Merge remote-tracking branch 'upstream/main'

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/ScriptAccordion.tsx

@@ -56,7 +56,7 @@ export default function ScriptAccordion({
       value={expandedItem}
       onValueChange={handleAccordionChange}
       collapsible
-      className="overflow-y-scroll max-h-[calc(100vh-220px)] overflow-x-hidden mt-3 p-2"
+      className="overflow-y-scroll max-h-[calc(100vh-225px)] overflow-x-hidden mt-3 p-2"
     >
       {items.map((category) => (
         <AccordionItem

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

@@ -1,148 +1,156 @@
+"use client";
 
-import { Separator } from "@/components/ui/separator";
 import { extractDate } from "@/lib/time";
-import { Script, AppVersion } from "@/lib/types";
-import { fetchVersions } from "@/lib/data";
+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 { 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 DefaultSettings from "./ScriptItems/DefaultSettings";
 import Description from "./ScriptItems/Description";
 import InstallCommand from "./ScriptItems/InstallCommand";
-import InterFaces from "./ScriptItems/InterFaces";
 import Tooltips from "./ScriptItems/Tooltips";
-import { basePath } from "@/config/siteConfig";
-import { useEffect, useState } from "react";
+import InterFaces from "./ScriptItems/InterFaces";
+import Buttons from "./ScriptItems/Buttons";
 
-
-function ScriptItem({
-  item,
-  setSelectedScript,
-}: {
+interface ScriptItemProps {
   item: Script;
   setSelectedScript: (script: string | null) => void;
-}) {
-  const closeScript = () => {
-    window.history.pushState({}, document.title, window.location.pathname);
-    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 w-full min-w-fit">
-        <div className="flex w-full flex-col">
-          <div className="flex h-[36px] min-w-max items-center justify-between">
-            <h2 className="text-lg font-semibold">Selected Script</h2>
-            <X onClick={closeScript} className="cursor-pointer" />
-          </div>
-          <div className="rounded-lg border bg-accent/20 p-4">
-            <div className="flex justify-between">
-              <div className="flex">
-                <Image
-                  className="h-32 w-32 rounded-lg bg-accent/60 object-contain p-3 shadow-md"
-                  src={item.logo || `/${basePath}/logo.png`}
-                  width={400}
-                  onError={(e) =>
-                  ((e.currentTarget as HTMLImageElement).src =
-                    `/${basePath}/logo.png`)
-                  }
-                  height={400}
-                  alt={item.name}
-                  unoptimized
-                />
-                <div className="ml-4 flex flex-col justify-between">
-                  <div className="flex h-full w-full flex-col justify-between">
-                    <div>
-                      <h1 className="text-lg font-semibold">
-                        {item.status} {item.name} {getDisplayValueFromType(item.type)}
-                      </h1>
-                      <p className="w-full text-sm text-muted-foreground">
-                        Date added: {extractDate(item.date_created)}
-                      </p>
-                      <p className="text-sm text-muted-foreground">
-                        Default OS: {os} {version}
-                      </p>
-                    </div>
-                    <div className="flex gap-5">
-                      <DefaultSettings item={item} />
-                    </div>
-                    <div>{versions.length === 0 ? (<p>Loading versions...</p>) :
-                      (<>
-                        <p className="text-l text-foreground">Version:</p>
-                        <p className="text-l text-muted-foreground">{versions.find((v) =>
-                          v.name === item.slug.replace(/[^a-z0-9]/g, '') ||
-                          v.name.includes(item.slug.replace(/[^a-z0-9]/g, '')) ||
-                          v.name.replace(/[^a-z0-9]/g, '') === item.slug.replace(/[^a-z0-9]/g, '')
-
-                        )?.version || "No Version information found"
-                        }</p>
-                        <p className="text-l text-foreground">Latest Version changes(Pulled from newreleases.io):</p>
-                        <p className="text-l text-muted-foreground">
-                          {(() => {
-                            const matchedVersion = versions.find((v) =>
-                              v.name === item.slug.replace(/[^a-z0-9]/g, '') ||
-                              v.name.includes(item.slug.replace(/[^a-z0-9]/g, '')) ||
-                              v.name.replace(/[^a-z0-9]/g, '') === item.slug.replace(/[^a-z0-9]/g, '')
-                            );
-                            return matchedVersion?.date ?
-                              extractDate(matchedVersion.date as unknown as string) :
-                              "No date information found"
-                          })()}
-                        </p>
-                      </>)
-                    }
-                    </div>
-                  </div>
+    <div className="flex flex-col lg:flex-row gap-6 w-full">
+      <div className="flex flex-col md:flex-row gap-6 flex-grow">
+        <div className="flex-shrink-0">
+          <Image
+            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"
+            src={item.logo || `/${basePath}/logo.png`}
+            width={400}
+            onError={(e) => ((e.currentTarget as HTMLImageElement).src = `/${basePath}/logo.png`)}
+            height={400}
+            alt={item.name}
+            unoptimized
+          />
+        </div>
+        <div className="flex flex-col justify-between flex-grow space-y-4">
+          <div className="space-y-2">
+            <div className="flex items-start justify-between">
+              <div>
+                <h1 className="text-2xl font-semibold tracking-tight flex items-center gap-2">
+                  {item.name}
+                  <VersionInfo item={item} />
+                  <span className="inline-flex items-center rounded-md bg-accent/30 px-2 py-1 text-sm">
+                    {getDisplayValueFromType(item.type)}
+                  </span>
+                </h1>
+                <div className="mt-1 flex items-center gap-3 text-sm text-muted-foreground">
+                  <span>Added {extractDate(item.date_created)}</span>
+                  <span>•</span>
+                  <span className=" capitalize">
+                    {os} {version}
+                  </span>
                 </div>
               </div>
-              <div className="hidden flex-col justify-between gap-2 sm:flex">
-                <InterFaces item={item} />
-                <Buttons item={item} />
-              </div>
+              {/* <VersionInfo item={item} /> */}
             </div>
-            <Separator className="mt-4" />
-            <div>
-              <div className="mt-4">
-                <Description item={item} />
-                <Alerts item={item} />
+            <div className="flex flex-col gap-2 text-sm text-muted-foreground">
+              {defaultInstallMethod?.resources && (
+                <ResourceDisplay
+                  title="Default"
+                  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">
-                <div className="flex gap-3 px-4 py-2">
-                  <h2 className="text-lg font-semibold">
-                    How to {item.type == "misc" ? "use" : "install"}
-                  </h2>
-                  <Tooltips item={item} />
-                </div>
-                <Separator className="w-full"></Separator>
+              <Separator />
+              <div className="">
                 <InstallCommand item={item} />
               </div>
             </div>
+
             <DefaultPassword item={item} />
           </div>
         </div>
@@ -150,5 +158,3 @@ function ScriptItem({
     </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 Link from "next/link";
+import { BookOpenText, Code, Globe, LinkIcon, RefreshCcw } from "lucide-react";
 
 const generateInstallSourceUrl = (slug: string) => {
   const baseUrl = `https://raw.githubusercontent.com/asykynexo/${basePath}/main`;
@@ -12,7 +17,6 @@ const generateInstallSourceUrl = (slug: string) => {
 const generateSourceUrl = (slug: string, type: string) => {
   const baseUrl = `https://raw.githubusercontent.com/asylumexp/${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" />, 
-      text: "Install-Source",
+      icon: <Code className="h-4 w-4" />,
+      text: "Install Source",
     },
     updateSourceUrl && {
       href: updateSourceUrl,
-      icon: <RefreshCcw className="h-4 w-4" />, 
-      text: "Update-Source",
+      icon: <RefreshCcw className="h-4 w-4" />,
+      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">
-      {buttons.map((props, index) => (
-        <ButtonLink key={index} {...props} />
-      ))}
-    </div>
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" className="flex items-center gap-2">
+          <LinkIcon className="size-4" />
+          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="flex gap-3 px-4 py-2">
+    <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">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}{" "}
-          {item.type}.
+          You can use the following credentials to login to the {item.name} {item.type}.
         </p>
         {["username", "password"].map((type) => (
           <div key={type} className="text-sm">
             {type.charAt(0).toUpperCase() + type.slice(1)}:{" "}
-            <Button
-              variant="secondary"
-              size="null"
-              onClick={() => copyCredential(type as "username" | "password")}
-            >
+            <Button 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) =>
-    ram >= 1024 ? `${Math.floor(ram / 1024)}GB` : `${ram}MB`;
+  const getDisplayValueFromRAM = (ram: number) => (ram >= 1024 ? `${Math.floor(ram / 1024)}GB` : `${ram}MB`);
 
-  const ResourceDisplay = ({
-    settings,
-    title,
-  }: {
-    settings: (typeof item.install_methods)[0];
-    title: string;
-  }) => {
+  const ResourceDisplay = ({ 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">
-          RAM: {getDisplayValueFromRAM(ram ?? 0)}
-        </p>
+        <p className="text-sm text-muted-foreground">RAM: {getDisplayValueFromRAM(ram ?? 0)}</p>
         <p className="text-sm text-muted-foreground">HDD: {hdd}GB</p>
       </div>
     );
   };
 
-  const defaultSettings = item.install_methods.find(
-    (method) => method.type === "default",
-  );
-  const defaultAlpineSettings = item.install_methods.find(
-    (method) => method.type === "alpine",
-  );
+  const defaultSettings = item.install_methods.find((method) => method.type === "default");
+  const defaultAlpineSettings = item.install_methods.find((method) => method.type === "alpine");
 
-  const hasDefaultSettings =
-    defaultSettings?.resources &&
-    Object.values(defaultSettings.resources).some(Boolean);
+  const hasDefaultSettings = defaultSettings?.resources && Object.values(defaultSettings.resources).some(Boolean);
 
   return (
-    <>
-      {hasDefaultSettings && (
-        <ResourceDisplay settings={defaultSettings} title="Default settings" />
-      )}
-      {defaultAlpineSettings && (
-        <ResourceDisplay
-          settings={defaultAlpineSettings}
-          title="Default Alpine settings"
-        />
-      )}
-    </>
+    <div className="space-y-4 flex-col flex">
+      {hasDefaultSettings && <ResourceDisplay settings={defaultSettings} title="Default settings" />}
+      {defaultAlpineSettings && <ResourceDisplay settings={defaultAlpineSettings} title="Default Alpine settings" />}
+    </div>
   );
 }

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

@@ -4,82 +4,86 @@ import { basePath } from "@/config/siteConfig";
 import { Script } from "@/lib/types";
 import { getDisplayValueFromType } from "../ScriptInfoBlocks";
 
-const getInstallCommand = (scriptPath?: string, isAlpine = false) => {
-  return `bash -c "$(wget -q${isAlpine ? "" : "L"}O - https://github.com/asylumexp/Proxmox/raw/main/${scriptPath})"`;
+const getInstallCommand = (scriptPath = "", isAlpine = false) => {
+    const url = `https://raw.githubusercontent.com/asylumexp/Proxmox/main/${scriptPath}`;
+    return isAlpine
+        ? `bash -c "$(curl -fsSL ${url})"`
+        : `bash -c "$(curl -fsSL ${url})"`;
 };
 
+
 export default function InstallCommand({ item }: { item: Script }) {
-  const alpineScript = item.install_methods.find(
-    (method) => method.type === "alpine",
-  );
+    const alpineScript = item.install_methods.find(
+        (method) => method.type === "alpine",
+    );
 
-  const defaultScript = item.install_methods.find(
-    (method) => method.type === "default",
-  );
+    const defaultScript = item.install_methods.find(
+        (method) => method.type === "default",
+    );
 
-  const renderInstructions = (isAlpine = false) => (
-    <>
-      <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}{" "}
-            {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 == "misc" ? (
-          <>
-            To use the {item.name} script, run the command below in the shell.
-          </>
-        ) : (
-          <>
-            {" "}
-            To create a new Proxmox VE {item.name}{" "}
-            {getDisplayValueFromType(item.type)}, run the command below in the
-            Proxmox VE Shell.
-          </>
-        )}
-      </p>
-      {isAlpine && (
-        <p className="mt-2 text-sm">
-          To create a new Proxmox VE Alpine-{item.name}{" "}
-          {getDisplayValueFromType(item.type)}, run the command below in the
-          Proxmox VE Shell
-        </p>
-      )}
-    </>
-  );
-
-  return (
-    <div className="p-4">
-      {alpineScript ? (
-        <Tabs defaultValue="default" className="mt-2 w-full max-w-4xl">
-          <TabsList>
-            <TabsTrigger value="default">Default</TabsTrigger>
-            <TabsTrigger value="alpine">Alpine Linux</TabsTrigger>
-          </TabsList>
-          <TabsContent value="default">
-            {renderInstructions()}
-            <CodeCopyButton>
-              {getInstallCommand(defaultScript?.script)}
-            </CodeCopyButton>
-          </TabsContent>
-          <TabsContent value="alpine">
-            {renderInstructions(true)}
-            <CodeCopyButton>
-              {getInstallCommand(alpineScript.script, true)}
-            </CodeCopyButton>
-          </TabsContent>
-        </Tabs>
-      ) : defaultScript?.script ? (
+    const renderInstructions = (isAlpine = false) => (
         <>
-          {renderInstructions()}
-          <CodeCopyButton>
-            {getInstallCommand(defaultScript.script)}
-          </CodeCopyButton>
+            <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}{" "}
+                        {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 == "misc" ? (
+                    <>
+                        To use the {item.name} script, run the command below in the shell.
+                    </>
+                ) : (
+                    <>
+                        {" "}
+                        To create a new Proxmox VE {item.name}{" "}
+                        {getDisplayValueFromType(item.type)}, run the command below in the
+                        Proxmox VE Shell.
+                    </>
+                )}
+            </p>
+            {isAlpine && (
+                <p className="mt-2 text-sm">
+                    To create a new Proxmox VE Alpine-{item.name}{" "}
+                    {getDisplayValueFromType(item.type)}, run the command below in the
+                    Proxmox VE Shell
+                </p>
+            )}
         </>
-      ) : null}
-    </div>
-  );
+    );
+
+    return (
+        <div className="p-4">
+            {alpineScript ? (
+                <Tabs defaultValue="default" className="mt-2 w-full max-w-4xl">
+                    <TabsList>
+                        <TabsTrigger value="default">Default</TabsTrigger>
+                        <TabsTrigger value="alpine">Alpine Linux</TabsTrigger>
+                    </TabsList>
+                    <TabsContent value="default">
+                        {renderInstructions()}
+                        <CodeCopyButton>
+                            {getInstallCommand(defaultScript?.script)}
+                        </CodeCopyButton>
+                    </TabsContent>
+                    <TabsContent value="alpine">
+                        {renderInstructions(true)}
+                        <CodeCopyButton>
+                            {getInstallCommand(alpineScript.script, true)}
+                        </CodeCopyButton>
+                    </TabsContent>
+                </Tabs>
+            ) : defaultScript?.script ? (
+                <>
+                    {renderInstructions()}
+                    <CodeCopyButton>
+                        {getInstallCommand(defaultScript.script)}
+                    </CodeCopyButton>
+                </>
+            ) : null}
+        </div>
+    );
 }

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">
-            {"Default Interface:"}
-          </h2>{" "}
-          <CopyButton label="default interface" value={item.interface_port} />
+          <h2 className="mr-2 text-end text-lg font-semibold">Default Interface:</h2>
+          <span className={cn(buttonVariants({ size: "sm", variant: "outline" }), "flex items-center gap-2")}>
+            {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";