Adding a scrollbar to the sidebar for better navigation. (#120)

* manually set basePath in `next.config.mjs`

* Fix: add getDisplayValueFromType formatting in InstallCommand instead of displaying raw type

* Refactor ScriptAccordion to improve layout and scroll handling

Author: BramSuurdje

frontend/src/app/scripts/_components/ScriptAccordion.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useRef } from "react";
 
+import { formattedBadge } from "@/components/CommandMenu";
 import {
   Accordion,
   AccordionContent,
@@ -8,12 +9,9 @@ import {
 } from "@/components/ui/accordion";
 import { Category } from "@/lib/types";
 import { cn } from "@/lib/utils";
-import { Star } from "lucide-react";
 import Image from "next/image";
 import Link from "next/link";
 import { useState } from "react";
-import { Badge } from "../../../components/ui/badge";
-import { formattedBadge } from "@/components/CommandMenu";
 
 export default function ScriptAccordion({
   items,
@@ -57,6 +55,7 @@ export default function ScriptAccordion({
       value={expandedItem}
       onValueChange={handleAccordionChange}
       collapsible
+      className="overflow-y-scroll max-h-[calc(100vh-210px)] overflow-x-hidden pb-4"
     >
       {items.map((category) => (
         <AccordionItem
@@ -79,9 +78,7 @@ export default function ScriptAccordion({
             </div>{" "}
           </AccordionTrigger>
           <AccordionContent
-            data-state={
-              expandedItem === category.name ? "open" : "closed"
-            }
+            data-state={expandedItem === category.name ? "open" : "closed"}
             className="pt-0"
           >
             {category.scripts
@@ -92,7 +89,7 @@ export default function ScriptAccordion({
                   <Link
                     href={{
                       pathname: "/scripts",
-                      query: { id: script.name},
+                      query: { id: script.name },
                     }}
                     prefetch={false}
                     className={`flex cursor-pointer items-center justify-between gap-1 px-1 py-1 text-muted-foreground hover:rounded-lg hover:bg-accent/60 hover:dark:bg-accent/20 ${

frontend/src/app/scripts/_components/ScriptItems/InstallCommand.tsx

@@ -2,6 +2,7 @@ import CodeCopyButton from "@/components/ui/code-copy-button";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { basePath } from "@/config/siteConfig";
 import { Script } from "@/lib/types";
+import { getDisplayValueFromType } from "../ScriptInfoBlocks";
 
 const getInstallCommand = (scriptPath?: string) => {
   return `bash -c "$(wget -qLO - https://github.com/community-scripts/${basePath}/raw/main/${scriptPath})"`;
@@ -21,24 +22,29 @@ export default function InstallCommand({ item }: { item: Script }) {
       <p className="text-sm mt-2">
         {isAlpine ? (
           <>
-            As an alternative option, you can use Alpine Linux and the {item.name}{" "}
-            package to create a {item.name} {item.type} container with faster
-            creation time and minimal system resource usage. You are also
-            obliged to adhere to updates provided by the package maintainer.
+            As an alternative option, you can use Alpine Linux and the{" "}
+            {item.name} package to create a {item.name}{" "}
+            {getDisplayValueFromType(item.type)} container with faster creation
+            time and minimal system resource usage. You are also obliged to
+            adhere to updates provided by the package maintainer.
           </>
         ) : item.type ? (
           <>
-            To create a new Proxmox VE {item.name} {item.type}, run the command
-            below in the Proxmox VE Shell.
+            To create a new Proxmox VE {item.name}{" "}
+            {getDisplayValueFromType(item.type)}, run the command below in the
+            Proxmox VE Shell.
           </>
         ) : (
-          <>To use the {item.name} script, run the command below in the shell.</>
+          <>
+            To use the {item.name} script, run the command below in the shell.
+          </>
         )}
       </p>
       {isAlpine && (
         <p className="mt-2 text-sm">
-          To create a new Proxmox VE Alpine-{item.name} {item.type}, run the command
-          below in the Proxmox VE Shell
+          To create a new Proxmox VE Alpine-{item.name}{" "}
+          {getDisplayValueFromType(item.type)}, run the command below in the
+          Proxmox VE Shell
         </p>
       )}
     </>

frontend/src/styles/globals.css

@@ -119,8 +119,6 @@
   }
 }
 
-
-
 @layer base {
   * {
     @apply border-border;
@@ -134,7 +132,15 @@
 }
 
 ::-webkit-scrollbar {
-  display: none;
+  width: 9px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background-color: rgba(155, 155, 155, 0.25);
+  border-radius: 20px;
+  border: transparent;
 }
 
 .glass {