Refactor ScriptItem and Buttons components to enhance layout and integrate dropdown for links. Update InterFaces component for improved styling and structure. (#3567)

* Refactor ScriptItem and Buttons components to enhance layout and integrate dropdown for links. Update InterFaces component for improved styling and structure.

* Add React Query integration and enhance component structure

- Introduced `@tanstack/react-query` for data fetching and state management.
- Added `QueryProvider` component to wrap the application with QueryClient.
- Refactored `ScriptItem` to utilize `useVersions` hook for fetching versions.
- Created `ResourceDisplay` and `VersionBadge` components for better resource representation.
- Improved layout and styling across various components, including `Alerts`, `Buttons`, and `DefaultPassword`.
- Updated `layout.tsx` to include the new `QueryProvider` for global state management.

* Remove bun.lock file to streamline dependency management and prevent potential conflicts.

* Update dependencies in package.json and package-lock.json

- Removed `@vercel/analytics` from dependencies.
- Upgraded `vitest` and related packages to version `3.1.1`.
- Updated various packages to their latest versions for improved performance and compatibility.
- Adjusted Node.js engine requirements to support newer versions.

* Update dependencies in package.json and package-lock.json

- Upgraded various Radix UI components to their latest versions for improved functionality and performance.
- Updated `chart.js`, `class-variance-authority`, `cmdk`, `framer-motion`, `fuse.js`, `nuqs`, `pocketbase`, and other packages to their latest versions.
- Enhanced TypeScript and ESLint packages for better type checking and linting capabilities.
- Updated Tailwind CSS and related plugins for improved styling and utility classes.
- Adjusted Node.js engine requirements in several packages to support newer versions.

frontend/package.json

@@ -20,70 +20,71 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@radix-ui/react-accordion": "^1.1.2",
+    "@radix-ui/react-accordion": "^1.2.3",
-    "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-dialog": "^1.1.6",
-    "@radix-ui/react-dropdown-menu": "^2.0.6",
+    "@radix-ui/react-dropdown-menu": "^2.1.6",
-    "@radix-ui/react-icons": "^1.3.1",
+    "@radix-ui/react-icons": "^1.3.2",
-    "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-label": "^2.1.2",
-    "@radix-ui/react-navigation-menu": "^1.1.4",
+    "@radix-ui/react-navigation-menu": "^1.2.5",
-    "@radix-ui/react-popover": "^1.1.2",
+    "@radix-ui/react-popover": "^1.1.6",
-    "@radix-ui/react-select": "^2.1.2",
+    "@radix-ui/react-select": "^2.1.6",
-    "@radix-ui/react-separator": "^1.1.0",
+    "@radix-ui/react-separator": "^1.1.2",
-    "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-slot": "^1.1.2",
-    "@radix-ui/react-switch": "^1.1.1",
+    "@radix-ui/react-switch": "^1.1.3",
-    "@radix-ui/react-tabs": "^1.1.0",
+    "@radix-ui/react-tabs": "^1.1.3",
-    "@radix-ui/react-tooltip": "^1.1.2",
+    "@radix-ui/react-tooltip": "^1.1.8",
-    "@vercel/analytics": "^1.2.2",
+    "@tanstack/react-query": "^5.71.1",
-    "chart.js": "^4.4.1",
+    "chart.js": "^4.4.8",
     "chartjs-plugin-datalabels": "^2.2.0",
-    "class-variance-authority": "^0.7.0",
+    "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "cmdk": "^1.0.0",
+    "cmdk": "^1.1.1",
     "date-fns": "^4.1.0",
-    "framer-motion": "^11.11.11",
+    "framer-motion": "^11.18.2",
-    "fuse.js": "^7.0.0",
+    "fuse.js": "^7.1.0",
     "lucide-react": "^0.453.0",
     "mini-svg-data-uri": "^1.4.4",
     "next": "15.2.3",
     "next-themes": "^0.3.0",
-    "nuqs": "^2.1.1",
+    "nuqs": "^2.4.1",
-    "pocketbase": "^0.21.4",
+    "pocketbase": "^0.21.5",
     "prettier-plugin-organize-imports": "^4.1.0",
-    "react": "19.0.0-rc-02c0e824-20241028",
+    "react": "19.0.0",
     "react-chartjs-2": "^5.3.0",
     "react-code-blocks": "^0.1.6",
     "react-datepicker": "^7.6.0",
     "react-day-picker": "8.10.1",
-    "react-dom": "19.0.0-rc-02c0e824-20241028",
+    "react-dom": "19.0.0",
-    "react-icons": "^5.1.0",
+    "react-icons": "^5.5.0",
     "react-simple-typewriter": "^5.0.1",
     "sharp": "^0.33.5",
-    "simple-icons": "^13.5.0",
+    "simple-icons": "^13.21.0",
-    "sonner": "^1.5.0",
+    "sonner": "^1.7.4",
-    "tailwind-merge": "^2.3.0",
+    "tailwind-merge": "^2.6.0",
-    "zod": "^3.23.8"
+    "zod": "^3.24.2"
   },
   "devDependencies": {
+    "@tanstack/eslint-plugin-query": "^5.68.0",
     "@testing-library/dom": "^10.4.0",
-    "@testing-library/react": "^16.0.1",
+    "@testing-library/react": "^16.2.0",
-    "@types/node": "^22",
+    "@types/node": "^22.13.16",
     "@types/react": "npm:types-react@19.0.0-rc.1",
     "@types/react-dom": "npm:types-react-dom@19.0.0-rc.1",
-    "@typescript-eslint/eslint-plugin": "^8.8.1",
+    "@typescript-eslint/eslint-plugin": "^8.29.0",
-    "@typescript-eslint/parser": "^8.8.1",
+    "@typescript-eslint/parser": "^8.29.0",
     "@vitejs/plugin-react": "^4.3.4",
-    "eslint": "^9.13.0",
+    "eslint": "^9.23.0",
     "eslint-config-next": "15.0.2",
     "jsdom": "^25.0.1",
-    "postcss": "^8",
+    "postcss": "^8.5.3",
-    "prettier": "^3.2.5",
+    "prettier": "^3.5.3",
-    "prettier-plugin-tailwindcss": "^0.6.5",
+    "prettier-plugin-tailwindcss": "^0.6.11",
-    "tailwindcss": "^3.4.9",
+    "tailwindcss": "^3.4.17",
     "tailwindcss-animate": "^1.0.7",
     "tailwindcss-animated": "^1.1.2",
-    "typescript": "^5",
+    "typescript": "^5.8.2",
-    "vite-tsconfig-paths": "^5.1.3",
+    "vite-tsconfig-paths": "^5.1.4",
-    "vitest": "^2.1.9"
+    "vitest": "^3.1.1"
   },
   "overrides": {
     "@types/react": "npm:types-react@19.0.0-rc.1",

frontend/src/app/layout.tsx

@@ -1,5 +1,6 @@
 import Footer from "@/components/Footer";
 import Navbar from "@/components/Navbar";
+import QueryProvider from "@/components/query-provider";
 import { ThemeProvider } from "@/components/theme-provider";
 import { Toaster } from "@/components/ui/sonner";
 import { analytics, basePath } from "@/config/siteConfig";
@@ -15,15 +16,7 @@ export const metadata = {
   generator: "Next.js",
   applicationName: "Proxmox VE Helper-Scripts",
   referrer: "origin-when-cross-origin",
-  keywords: [
+  keywords: ["Proxmox VE", "Helper-Scripts", "tteck", "helper", "scripts", "proxmox", "VE"],
-    "Proxmox VE",
-    "Helper-Scripts",
-    "tteck",
-    "helper",
-    "scripts",
-    "proxmox",
-    "VE",
-  ],
   authors: { name: "Bram Suurd" },
   creator: "Bram Suurd",
   publisher: "Bram Suurd",
@@ -59,28 +52,21 @@ export default function RootLayout({
   return (
     <html lang="en" suppressHydrationWarning>
       <head>
-        <script
+        <script defer src={`https://${analytics.url}/script.js`} data-website-id={analytics.token}></script>
-          defer
-          src={`https://${analytics.url}/script.js`}
-          data-website-id={analytics.token}
-        ></script>
         <link rel="canonical" href={metadata.metadataBase.href} />
         <link rel="manifest" href="manifest.webmanifest" />
         <link rel="preconnect" href="https://api.github.com" />
       </head>
       <body className={inter.className}>
-        <ThemeProvider
+        <ThemeProvider attribute="class" defaultTheme="dark" enableSystem disableTransitionOnChange>
-          attribute="class"
-          defaultTheme="dark"
-          enableSystem
-          disableTransitionOnChange
-        >
           <div className="flex w-full flex-col justify-center">
             <Navbar />
             <div className="flex min-h-screen flex-col justify-center">
               <div className="flex w-full justify-center">
                 <div className="w-full max-w-7xl ">
-                  <NuqsAdapter>{children}</NuqsAdapter>
+                  <QueryProvider>
+                    <NuqsAdapter>{children}</NuqsAdapter>
+                  </QueryProvider>
                   <Toaster richColors />
                 </div>
               </div>

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

@@ -0,0 +1,42 @@
+import { CPUIcon, HDDIcon, RAMIcon } from "@/components/icons/resource-icons";
+import { getDisplayValueFromRAM } from "@/lib/utils/resource-utils";
+
+interface ResourceDisplayProps {
+  title: string;
+  cpu: number | null;
+  ram: number | null;
+  hdd: number | null;
+}
+
+interface IconTextProps {
+  icon: React.ReactNode;
+  label: string;
+}
+
+function IconText({ icon, label }: IconTextProps) {
+  return (
+    <span className="inline-flex items-center gap-1.5 rounded-md bg-accent/20 px-2 py-1 text-sm">
+      {icon}
+      <span className="text-foreground/90">{label}</span>
+    </span>
+  );
+}
+
+export function ResourceDisplay({ title, cpu, ram, hdd }: ResourceDisplayProps) {
+  const hasCPU = typeof cpu === "number" && cpu > 0;
+  const hasRAM = typeof ram === "number" && ram > 0;
+  const hasHDD = typeof hdd === "number" && hdd > 0;
+
+  if (!hasCPU && !hasRAM && !hasHDD) return null;
+
+  return (
+    <div className="flex flex-wrap items-center gap-2">
+      <span className="text-sm font-medium text-muted-foreground">{title}</span>
+      <div className="flex flex-wrap gap-2">
+        {hasCPU && <IconText icon={<CPUIcon />} label={`${cpu} vCPU`} />}
+        {hasRAM && <IconText icon={<RAMIcon />} label={getDisplayValueFromRAM(ram!)} />}
+        {hasHDD && <IconText icon={<HDDIcon />} label={`${hdd} GB`} />}
+      </div>
+    </div>
+  );
+}

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

@@ -1,263 +1,156 @@
-import { Separator } from "@/components/ui/separator";
+"use client";
-import { fetchVersions } from "@/lib/data";
+
 import { extractDate } from "@/lib/time";
 import { AppVersion, Script } from "@/lib/types";
 
 import { X } from "lucide-react";
 import Image from "next/image";
 
+import { Separator } from "@/components/ui/separator";
 import { basePath } from "@/config/siteConfig";
-import { useEffect, useState } from "react";
+import { useVersions } from "@/hooks/useVersions";
+import { cleanSlug } from "@/lib/utils/resource-utils";
+import { Suspense } from "react";
+import { ResourceDisplay } from "./ResourceDisplay";
 import { getDisplayValueFromType } from "./ScriptInfoBlocks";
 import Alerts from "./ScriptItems/Alerts";
-import Buttons from "./ScriptItems/Buttons";
 import DefaultPassword from "./ScriptItems/DefaultPassword";
 import Description from "./ScriptItems/Description";
 import InstallCommand from "./ScriptItems/InstallCommand";
-import InterFaces from "./ScriptItems/InterFaces";
 import Tooltips from "./ScriptItems/Tooltips";
+import InterFaces from "./ScriptItems/InterFaces";
+import Buttons from "./ScriptItems/Buttons";
 
-function ScriptItem({ item, setSelectedScript }: { item: Script; setSelectedScript: (script: string | null) => void }) {
+interface ScriptItemProps {
-  const closeScript = () => {
+  item: Script;
-    window.history.pushState({}, document.title, window.location.pathname);
+  setSelectedScript: (script: string | null) => void;
-    setSelectedScript(null);
+}
-  };
-  const [versions, setVersions] = useState<AppVersion[]>([]);
-
-  useEffect(() => {
-    fetchVersions()
-      .then((fetchedVersions) => {
-        console.log("Fetched Versions: ", fetchedVersions);
-        if (Array.isArray(fetchedVersions)) {
-          setVersions(fetchedVersions);
-        } else if (fetchedVersions && typeof fetchedVersions === "object") {
-          setVersions([fetchedVersions]);
-        } else {
-          setVersions([]);
-        }
-      })
-      .catch((error) => console.error("Error fetching versions:", error));
-  }, []);
 
+function ScriptHeader({ item }: { item: Script }) {
   const defaultInstallMethod = item.install_methods?.[0];
   const os = defaultInstallMethod?.resources?.os || "Proxmox Node";
   const version = defaultInstallMethod?.resources?.version || "";
 
   return (
-    <div className="mr-7 mt-0 flex w-full min-w-fit">
+    <div className="flex flex-col lg:flex-row gap-6 w-full">
-      <div className="flex w-full min-w-fit">
+      <div className="flex flex-col md:flex-row gap-6 flex-grow">
-        <div className="flex w-full flex-col">
+        <div className="flex-shrink-0">
-          <div className="flex h-[36px] min-w-max items-center justify-between">
+          <Image
-            <h2 className="text-lg font-semibold">Selected Script</h2>
+            className="h-32 w-32 rounded-xl bg-gradient-to-br from-accent/40 to-accent/60 object-contain p-3 shadow-lg transition-transform hover:scale-105"
-            <X onClick={closeScript} className="cursor-pointer" />
+            src={item.logo || `/${basePath}/logo.png`}
-          </div>
+            width={400}
-          <div className="rounded-lg border bg-accent/20 p-4">
+            onError={(e) => ((e.currentTarget as HTMLImageElement).src = `/${basePath}/logo.png`)}
-            <div className="flex justify-between">
+            height={400}
-              <div className="flex">
+            alt={item.name}
-                <Image
+            unoptimized
-                  className="h-32 w-32 rounded-lg bg-accent/60 object-contain p-3 shadow-md"
+          />
-                  src={item.logo || `/${basePath}/logo.png`}
+        </div>
-                  width={400}
+        <div className="flex flex-col justify-between flex-grow space-y-4">
-                  onError={(e) => ((e.currentTarget as HTMLImageElement).src = `/${basePath}/logo.png`)}
+          <div className="space-y-2">
-                  height={400}
+            <div className="flex items-start justify-between">
-                  alt={item.name}
+              <div>
-                  unoptimized
+                <h1 className="text-2xl font-semibold tracking-tight flex items-center gap-2">
-                />
+                  {item.name}
-                <div className="ml-4 flex flex-col justify-between">
+                  <VersionInfo item={item} />
-                  <div className="flex h-full w-full flex-col justify-between">
+                  <span className="inline-flex items-center rounded-md bg-accent/30 px-2 py-1 text-sm">
-                    <div>
+                    {getDisplayValueFromType(item.type)}
-                      <h1 className="text-lg font-semibold">
+                  </span>
-                        {item.name} {getDisplayValueFromType(item.type)}
+                </h1>
-                      </h1>
+                <div className="mt-1 flex items-center gap-3 text-sm text-muted-foreground">
-                      <p className="w-full text-sm text-muted-foreground">
+                  <span>Added {extractDate(item.date_created)}</span>
-                        Date added: {extractDate(item.date_created)}
+                  <span>•</span>
-                      </p>
+                  <span className=" capitalize">
-                      <p className="text-sm text-muted-foreground">
+                    {os} {version}
-                        Default OS: {os} {version}
+                  </span>
-                      </p>
-                    </div>
-                    <div className="flex min-w-[600px] flex-wrap gap-6 text-sm text-muted-foreground">
-                      {(() => {
-                        const getDisplayValueFromRAM = (ram: number) =>
-                          ram >= 1024 ? `${Math.floor(ram / 1024)}GB` : `${ram}MB`;
-
-                        const IconText = ({ icon, label }: { icon: React.ReactNode; label: string }) => (
-                          <span className="flex items-center gap-1">
-                            {icon}
-                            {label}
-                          </span>
-                        );
-
-                        const CPUIcon = (
-                          <svg
-                            xmlns="http://www.w3.org/2000/svg"
-                            className="w-4 h-4"
-                            fill="none"
-                            viewBox="0 0 24 24"
-                            stroke="currentColor"
-                            strokeWidth={2}
-                          >
-                            <rect x="9" y="9" width="6" height="6" />
-                            <path d="M3 9h2m14 0h2M3 15h2m14 0h2M9 3v2m6-2v2M9 19v2m6-2v2" />
-                          </svg>
-                        );
-
-                        const RAMIcon = (
-                          <svg
-                            xmlns="http://www.w3.org/2000/svg"
-                            className="w-4 h-4"
-                            fill="none"
-                            viewBox="0 0 24 24"
-                            stroke="currentColor"
-                            strokeWidth={2}
-                          >
-                            <rect x="4" y="6" width="16" height="12" rx="2" ry="2" />
-                            <path d="M8 6v12M16 6v12" />
-                          </svg>
-                        );
-
-                        const HDDIcon = (
-                          <svg
-                            xmlns="http://www.w3.org/2000/svg"
-                            className="w-4 h-4"
-                            fill="none"
-                            viewBox="0 0 24 24"
-                            stroke="currentColor"
-                            strokeWidth={2}
-                          >
-                            <path d="M4 4h16v16H4z" />
-                            <circle cx="8" cy="16" r="1" />
-                            <circle cx="16" cy="16" r="1" />
-                          </svg>
-                        );
-
-                        const ResourceDisplay = ({
-                          title,
-                          cpu,
-                          ram,
-                          hdd,
-                        }: {
-                          title: string;
-                          cpu: number | null;
-                          ram: number | null;
-                          hdd: number | null;
-                        }) => {
-                          const getDisplayValueFromRAM = (ram: number) =>
-                            ram >= 1024 ? `${Math.floor(ram / 1024)}GB` : `${ram}MB`;
-
-                          const IconText = ({ icon, label }: { icon: React.ReactNode; label: string }) => (
-                            <span className="flex items-center gap-1 whitespace-nowrap">
-                              {icon}
-                              {label}
-                            </span>
-                          );
-
-                          const hasCPU = typeof cpu === "number" && cpu > 0;
-                          const hasRAM = typeof ram === "number" && ram > 0;
-                          const hasHDD = typeof hdd === "number" && hdd > 0;
-
-                          if (!hasCPU && !hasRAM && !hasHDD) return null;
-
-                          return (
-                            <div className="flex flex-wrap items-center gap-1">
-                              <span className="font-semibold text-foreground">{title}:</span>
-                              {hasCPU && (
-                                <>
-                                  <IconText icon={CPUIcon} label={`CPU: ${cpu} vCPU`} />
-                                  <span>|</span>
-                                </>
-                              )}
-                              {hasRAM && (
-                                <>
-                                  <IconText icon={RAMIcon} label={`RAM: ${getDisplayValueFromRAM(ram!)}`} />
-                                  <span>|</span>
-                                </>
-                              )}
-                              {hasHDD && <IconText icon={HDDIcon} label={`HDD: ${hdd} GB`} />}
-                            </div>
-                          );
-                        };
-
-                        const defaultSettings = item.install_methods.find((method) => method.type === "default");
-                        const alpineSettings = item.install_methods.find((method) => method.type === "alpine");
-                        return (
-                          <>
-                            {defaultSettings?.resources && (
-                              <ResourceDisplay
-                                title="Default"
-                                cpu={defaultSettings.resources.cpu}
-                                ram={defaultSettings.resources.ram}
-                                hdd={defaultSettings.resources.hdd}
-                              />
-                            )}
-
-                            {alpineSettings?.resources && (
-                              <ResourceDisplay
-                                title="Alpine"
-                                cpu={alpineSettings.resources.cpu}
-                                ram={alpineSettings.resources.ram}
-                                hdd={alpineSettings.resources.hdd}
-                              />
-                            )}
-                          </>
-                        );
-                      })()}
-                    </div>
-
-                    {(() => {
-                      if (versions.length === 0) {
-                        return <p>Loading versions...</p>;
-                      }
-
-                      const cleanSlug = item.slug.replace(/[^a-z0-9]/gi, "").toLowerCase();
-
-                      const matched = versions.find((v) => {
-                        const cleanName = v.name.replace(/[^a-z0-9]/gi, "").toLowerCase();
-                        return cleanName === cleanSlug || cleanName.includes(cleanSlug);
-                      });
-
-                      if (!matched) return null;
-
-                      return (
-                        <div className="flex items-center gap-2 text-sm text-muted-foreground mt-2">
-                          <span className="text-foreground">
-                            Version: {matched.version} (
-                            {extractDate(
-                              matched.date instanceof Date ? matched.date.toISOString() : matched.date || "",
-                            )}
-                          </span>
-                          <span
-                            title="Crawled version from newreleases.io"
-                            className="cursor-help rounded-full border border-green-500 px-2 py-0.5 text-xs font-semibold text-green-500"
-                          >
-                            Info
-                          </span>
-                        </div>
-                      );
-                    })()}
-                  </div>
                 </div>
               </div>
-              <div className="hidden flex-col justify-between gap-2 sm:flex">
+              {/* <VersionInfo item={item} /> */}
-                <InterFaces item={item} />
-                <Buttons item={item} />
-              </div>
             </div>
-            <Separator className="mt-4" />
+            <div className="flex flex-col gap-2 text-sm text-muted-foreground">
-            <div>
+              {defaultInstallMethod?.resources && (
-              <div className="mt-4">
+                <ResourceDisplay
-                <Description item={item} />
+                  title="Default"
-                <Alerts item={item} />
+                  cpu={defaultInstallMethod.resources.cpu}
+                  ram={defaultInstallMethod.resources.ram}
+                  hdd={defaultInstallMethod.resources.hdd}
+                />
+              )}
+              {item.install_methods.find((method) => method.type === "alpine")?.resources && (
+                <ResourceDisplay
+                  title="Alpine"
+                  {...item.install_methods.find((method) => method.type === "alpine")!.resources!}
+                />
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="flex flex-col gap-4 justify-between">
+        <InterFaces item={item} />
+        <div className="flex justify-end">
+          <Buttons item={item} />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function VersionInfo({ item }: { item: Script }) {
+  const { data: versions = [], isLoading } = useVersions();
+
+  if (isLoading || versions.length === 0) {
+    return <p className="text-sm text-muted-foreground">Loading versions...</p>;
+  }
+
+  const matchedVersion = versions.find((v: AppVersion) => {
+    const cleanName = v.name.replace(/[^a-z0-9]/gi, "").toLowerCase();
+    return cleanName === cleanSlug(item.slug) || cleanName.includes(cleanSlug(item.slug));
+  });
+
+  if (!matchedVersion) return null;
+
+  return <span className="font-medium text-sm">{matchedVersion.version}</span>;
+}
+
+export function ScriptItem({ item, setSelectedScript }: ScriptItemProps) {
+  const closeScript = () => {
+    window.history.pushState({}, document.title, window.location.pathname);
+    setSelectedScript(null);
+  };
+
+  return (
+    <div className="w-full max-w-5xl mx-auto">
+      <div className="flex w-full flex-col">
+        <div className="mb-3 flex items-center justify-between">
+          <h2 className="text-2xl font-semibold tracking-tight text-foreground/90">Selected Script</h2>
+          <button
+            onClick={closeScript}
+            className="rounded-full p-2 text-muted-foreground hover:bg-card/50 transition-colors"
+          >
+            <X className="h-5 w-5" />
+          </button>
+        </div>
+
+        <div className="rounded-xl border border-border/40 bg-gradient-to-b from-card/30 to-background/50 backdrop-blur-sm shadow-sm">
+          <div className="p-6 space-y-6">
+            <Suspense fallback={<div className="animate-pulse h-32 bg-accent/20 rounded-xl" />}>
+              <ScriptHeader item={item} />
+            </Suspense>
+
+            <Description item={item} />
+            <Alerts item={item} />
+
+            <div className="mt-4 rounded-lg border shadow-sm">
+              <div className="flex gap-3 px-4 py-2 bg-accent/25">
+                <h2 className="text-lg font-semibold">How to {item.type === "misc" ? "use" : "install"}</h2>
+                <Tooltips item={item} />
               </div>
-              <div className="mt-4 rounded-lg border bg-accent/50">
+              <Separator />
-                <div className="flex gap-3 px-4 py-2">
+              <div className="">
-                  <h2 className="text-lg font-semibold">How to {item.type == "misc" ? "use" : "install"}</h2>
-                  <Tooltips item={item} />
-                </div>
-                <Separator className="w-full"></Separator>
                 <InstallCommand item={item} />
               </div>
             </div>
+
             <DefaultPassword item={item} />
           </div>
         </div>
@@ -265,5 +158,3 @@ function ScriptItem({ item, setSelectedScript }: { item: Script; setSelectedScri
     </div>
   );
 }
-
-export default ScriptItem;

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

@@ -14,7 +14,7 @@ export default function Alerts({ item }: { item: Script }) {
     <>
       {item?.notes?.length > 0 &&
         item.notes.map((note: NoteProps, index: number) => (
-          <div key={index} className="mt-4 flex flex-col gap-2">
+          <div key={index} className="mt-4 flex flex-col shadow-sm gap-2">
             <p
               className={cn(
                 "inline-flex items-center gap-2 rounded-lg border p-2 pl-4 text-sm",

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

@@ -1,8 +1,13 @@
 import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 import { basePath } from "@/config/siteConfig";
 import { Script } from "@/lib/types";
-import { BookOpenText, Code, Globe, RefreshCcw } from "lucide-react";
+import { BookOpenText, Code, Globe, LinkIcon, RefreshCcw } from "lucide-react";
-import Link from "next/link";
 
 const generateInstallSourceUrl = (slug: string) => {
   const baseUrl = `https://raw.githubusercontent.com/community-scripts/${basePath}/main`;
@@ -12,7 +17,6 @@ const generateInstallSourceUrl = (slug: string) => {
 const generateSourceUrl = (slug: string, type: string) => {
   const baseUrl = `https://raw.githubusercontent.com/community-scripts/${basePath}/main`;
   return type === "vm" ? `${baseUrl}/vm/${slug}.sh` : `${baseUrl}/misc/${slug}.sh`;
-  return `${baseUrl}/misc/${slug}.sh`;
 };
 
 const generateUpdateUrl = (slug: string) => {
@@ -20,62 +24,66 @@ const generateUpdateUrl = (slug: string) => {
   return `${baseUrl}/ct/${slug}.sh`;
 };
 
-interface ButtonLinkProps {
+interface LinkItem {
   href: string;
   icon: React.ReactNode;
   text: string;
 }
 
-const ButtonLink = ({ href, icon, text }: ButtonLinkProps) => (
-  <Button variant="secondary" asChild>
-    <Link target="_blank" href={href}>
-      <span className="flex items-center gap-2">
-        {icon}
-        {text}
-      </span>
-    </Link>
-  </Button>
-);
-
 export default function Buttons({ item }: { item: Script }) {
   const isCtOrDefault = ["ct"].includes(item.type);
   const installSourceUrl = isCtOrDefault ? generateInstallSourceUrl(item.slug) : null;
   const updateSourceUrl = isCtOrDefault ? generateUpdateUrl(item.slug) : null;
   const sourceUrl = !isCtOrDefault ? generateSourceUrl(item.slug, item.type) : null;
 
-  const buttons = [
+  const links = [
     item.website && {
       href: item.website,
-      icon: <Globe className="h-4 w-4" />, 
+      icon: <Globe className="h-4 w-4" />,
       text: "Website",
     },
     item.documentation && {
       href: item.documentation,
-      icon: <BookOpenText className="h-4 w-4" />, 
+      icon: <BookOpenText className="h-4 w-4" />,
       text: "Documentation",
     },
     installSourceUrl && {
       href: installSourceUrl,
-      icon: <Code className="h-4 w-4" />, 
+      icon: <Code className="h-4 w-4" />,
-      text: "Install-Source",
+      text: "Install Source",
     },
     updateSourceUrl && {
       href: updateSourceUrl,
-      icon: <RefreshCcw className="h-4 w-4" />, 
+      icon: <RefreshCcw className="h-4 w-4" />,
-      text: "Update-Source",
+      text: "Update Source",
     },
     sourceUrl && {
       href: sourceUrl,
-      icon: <Code className="h-4 w-4" />, 
+      icon: <Code className="h-4 w-4" />,
       text: "Source Code",
     },
-  ].filter(Boolean) as ButtonLinkProps[];
+  ].filter(Boolean) as LinkItem[];
+
+  if (links.length === 0) return null;
 
   return (
-    <div className="flex flex-wrap justify-end gap-2">
+    <DropdownMenu>
-      {buttons.map((props, index) => (
+      <DropdownMenuTrigger asChild>
-        <ButtonLink key={index} {...props} />
+        <Button variant="outline" className="flex items-center gap-2">
-      ))}
+          <LinkIcon className="size-4" />
-    </div>
+          Links
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        {links.map((link, index) => (
+          <DropdownMenuItem key={index} asChild>
+            <a href={link.href} target="_blank" rel="noopener noreferrer" className="flex items-center gap-2">
+              <span className="text-muted-foreground size-4">{link.icon}</span>
+              <span>{link.text}</span>
+            </a>
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
   );
 }

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

@@ -14,24 +14,19 @@ export default function DefaultPassword({ item }: { item: Script }) {
   };
 
   return (
-    <div className="mt-4 rounded-lg border bg-accent/50">
+    <div className="mt-4 rounded-lg border shadow-sm">
-      <div className="flex gap-3 px-4 py-2">
+      <div className="flex gap-3 px-4 py-2 bg-accent/25">
         <h2 className="text-lg font-semibold">Default Login Credentials</h2>
       </div>
       <Separator className="w-full" />
       <div className="flex flex-col gap-2 p-4">
         <p className="mb-2 text-sm">
-          You can use the following credentials to login to the {item.name}{" "}
+          You can use the following credentials to login to the {item.name} {item.type}.
-          {item.type}.
         </p>
         {["username", "password"].map((type) => (
           <div key={type} className="text-sm">
             {type.charAt(0).toUpperCase() + type.slice(1)}:{" "}
-            <Button
+            <Button variant="secondary" size="null" onClick={() => copyCredential(type as "username" | "password")}>
-              variant="secondary"
-              size="null"
-              onClick={() => copyCredential(type as "username" | "password")}
-            >
               {item.default_credentials[type as "username" | "password"]}
             </Button>
           </div>

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

@@ -1,51 +1,29 @@
 import { Script } from "@/lib/types";
 
 export default function DefaultSettings({ item }: { item: Script }) {
-  const getDisplayValueFromRAM = (ram: number) =>
+  const getDisplayValueFromRAM = (ram: number) => (ram >= 1024 ? `${Math.floor(ram / 1024)}GB` : `${ram}MB`);
-    ram >= 1024 ? `${Math.floor(ram / 1024)}GB` : `${ram}MB`;
 
-  const ResourceDisplay = ({
+  const ResourceDisplay = ({ settings, title }: { settings: (typeof item.install_methods)[0]; title: string }) => {
-    settings,
-    title,
-  }: {
-    settings: (typeof item.install_methods)[0];
-    title: string;
-  }) => {
     const { cpu, ram, hdd } = settings.resources;
     return (
       <div>
         <h2 className="text-md font-semibold">{title}</h2>
         <p className="text-sm text-muted-foreground">CPU: {cpu}vCPU</p>
-        <p className="text-sm text-muted-foreground">
+        <p className="text-sm text-muted-foreground">RAM: {getDisplayValueFromRAM(ram ?? 0)}</p>
-          RAM: {getDisplayValueFromRAM(ram ?? 0)}
-        </p>
         <p className="text-sm text-muted-foreground">HDD: {hdd}GB</p>
       </div>
     );
   };
 
-  const defaultSettings = item.install_methods.find(
+  const defaultSettings = item.install_methods.find((method) => method.type === "default");
-    (method) => method.type === "default",
+  const defaultAlpineSettings = item.install_methods.find((method) => method.type === "alpine");
-  );
-  const defaultAlpineSettings = item.install_methods.find(
-    (method) => method.type === "alpine",
-  );
 
-  const hasDefaultSettings =
+  const hasDefaultSettings = defaultSettings?.resources && Object.values(defaultSettings.resources).some(Boolean);
-    defaultSettings?.resources &&
-    Object.values(defaultSettings.resources).some(Boolean);
 
   return (
-    <>
+    <div className="space-y-4 flex-col flex">
-      {hasDefaultSettings && (
+      {hasDefaultSettings && <ResourceDisplay settings={defaultSettings} title="Default settings" />}
-        <ResourceDisplay settings={defaultSettings} title="Default settings" />
+      {defaultAlpineSettings && <ResourceDisplay settings={defaultAlpineSettings} title="Default Alpine settings" />}
-      )}
+    </div>
-      {defaultAlpineSettings && (
-        <ResourceDisplay
-          settings={defaultAlpineSettings}
-          title="Default Alpine settings"
-        />
-      )}
-    </>
   );
 }

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

@@ -4,36 +4,16 @@ import { Script } from "@/lib/types";
 import { cn } from "@/lib/utils";
 import { ClipboardIcon } from "lucide-react";
 
-const CopyButton = ({
-  label,
-  value,
-}: {
-  label: string;
-  value: string | number;
-}) => (
-  <span
-    className={cn(
-      buttonVariants({ size: "sm", variant: "secondary" }),
-      "flex items-center gap-2",
-    )}
-  >
-    {value}
-    <ClipboardIcon
-      onClick={() => handleCopy(label, String(value))}
-      className="size-4 cursor-pointer"
-    />
-  </span>
-);
-
 export default function InterFaces({ item }: { item: Script }) {
   return (
-    <div className="flex flex-col gap-2">
+    <div className="flex flex-col gap-2 w-full">
       {item.interface_port !== null ? (
         <div className="flex items-center justify-end">
-          <h2 className="mr-2 text-end text-lg font-semibold">
+          <h2 className="mr-2 text-end text-lg font-semibold">Default Interface:</h2>
-            {"Default Interface:"}
+          <span className={cn(buttonVariants({ size: "sm", variant: "outline" }), "flex items-center gap-2")}>
-          </h2>{" "}
+            {item.interface_port}
-          <CopyButton label="default interface" value={item.interface_port} />
+            <ClipboardIcon onClick={() => handleCopy("default interface", String(item.interface_port))} className="size-4 cursor-pointer" />
+          </span>
         </div>
       ) : null}
     </div>

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

@@ -0,0 +1,13 @@
+import { AppVersion } from "@/lib/types";
+
+interface VersionBadgeProps {
+  version: AppVersion;
+}
+
+export function VersionBadge({ version }: VersionBadgeProps) {
+  return (
+    <div className="flex items-center">
+      <span className="font-medium text-sm">{version.version}</span>
+    </div>
+  );
+}

frontend/src/app/scripts/page.tsx

@@ -2,7 +2,7 @@
 
 export const dynamic = "force-static";
 
-import ScriptItem from "@/app/scripts/_components/ScriptItem";
+import { ScriptItem } from "@/app/scripts/_components/ScriptItem";
 import { fetchCategories } from "@/lib/data";
 import { Category, Script } from "@/lib/types";
 import { Loader2 } from "lucide-react";

frontend/src/components/icons/resource-icons.tsx

@@ -0,0 +1,48 @@
+export function CPUIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      className="size-4"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      strokeWidth={2}
+    >
+      <rect x="9" y="9" width="6" height="6" />
+      <path d="M3 9h2m14 0h2M3 15h2m14 0h2M9 3v2m6-2v2M9 19v2m6-2v2" />
+    </svg>
+  );
+}
+
+export function RAMIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      className="size-4"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      strokeWidth={2}
+    >
+      <rect x="4" y="6" width="16" height="12" rx="2" ry="2" />
+      <path d="M8 6v12M16 6v12" />
+    </svg>
+  );
+}
+
+export function HDDIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      className="size-4"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      strokeWidth={2}
+    >
+      <path d="M4 4h16v16H4z" />
+      <circle cx="8" cy="16" r="1" />
+      <circle cx="16" cy="16" r="1" />
+    </svg>
+  );
+}

frontend/src/components/query-provider.tsx

@@ -0,0 +1,9 @@
+"use client";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import React from "react";
+
+const queryClient = new QueryClient();
+
+export default function QueryProvider({ children }: { children: React.ReactNode }) {
+  return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
+}

frontend/src/hooks/useVersions.ts

@@ -0,0 +1,21 @@
+"use client";
+
+import { fetchVersions } from "@/lib/data";
+import { AppVersion } from "@/lib/types";
+import { useQuery } from "@tanstack/react-query";
+
+export function useVersions() {
+  return useQuery<AppVersion[]>({
+    queryKey: ["versions"],
+    queryFn: async () => {
+      const fetchedVersions = await fetchVersions();
+      if (Array.isArray(fetchedVersions)) {
+        return fetchedVersions;
+      }
+      if (fetchedVersions && typeof fetchedVersions === "object") {
+        return [fetchedVersions];
+      }
+      return [];
+    },
+  });
+}

frontend/src/lib/utils/resource-utils.ts

@@ -0,0 +1,7 @@
+export function getDisplayValueFromRAM(ram: number): string {
+  return ram >= 1024 ? `${Math.floor(ram / 1024)}GB` : `${ram}MB`;
+}
+
+export function cleanSlug(slug: string): string {
+  return slug.replace(/[^a-z0-9]/gi, "").toLowerCase();
+}