Change Frontend Version Info (#3527)

* Change Frontend Version Info

* Fix

* Update ScriptItem.tsx

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

@@ -1,39 +1,29 @@
-
 import { Separator } from "@/components/ui/separator";
-import { extractDate } from "@/lib/time";
-import { Script, AppVersion } from "@/lib/types";
 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 { basePath } from "@/config/siteConfig";
+import { useEffect, useState } from "react";
 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";
 
-
+function ScriptItem({ item, setSelectedScript }: { item: Script; setSelectedScript: (script: string | null) => void }) {
-function ScriptItem({
-  item,
-  setSelectedScript,
-}: {
-  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) => {
@@ -68,10 +58,7 @@ function ScriptItem({
                   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) =>
+                  onError={(e) => ((e.currentTarget as HTMLImageElement).src = `/${basePath}/logo.png`)}
-                  ((e.currentTarget as HTMLImageElement).src =
-                    `/${basePath}/logo.png`)
-                  }
                   height={400}
                   alt={item.name}
                   unoptimized
@@ -89,35 +76,165 @@ function ScriptItem({
                         Default OS: {os} {version}
                       </p>
                     </div>
-                    <div className="flex gap-5">
+                    <div className="flex min-w-[600px] flex-wrap gap-6 text-sm text-muted-foreground">
-                      <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) =>
+                        const getDisplayValueFromRAM = (ram: number) =>
-                              v.name === item.slug.replace(/[^a-z0-9]/g, '') ||
+                          ram >= 1024 ? `${Math.floor(ram / 1024)}GB` : `${ram}MB`;
-                              v.name.includes(item.slug.replace(/[^a-z0-9]/g, '')) ||
+
-                              v.name.replace(/[^a-z0-9]/g, '') === item.slug.replace(/[^a-z0-9]/g, '')
+                        const IconText = ({ icon, label }: { icon: React.ReactNode; label: string }) => (
+                          <span className="flex items-center gap-1">
+                            {icon}
+                            {label}
+                          </span>
                         );
-                            return matchedVersion?.date ?
+
-                              extractDate(matchedVersion.date as unknown as string) :
+                        const CPUIcon = (
-                              "No date information found"
+                          <svg
-                          })()}
+                            xmlns="http://www.w3.org/2000/svg"
-                        </p>
+                            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>
@@ -134,9 +251,7 @@ function ScriptItem({
               </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">
+                  <h2 className="text-lg font-semibold">How to {item.type == "misc" ? "use" : "install"}</h2>
-                    How to {item.type == "misc" ? "use" : "install"}
-                  </h2>
                   <Tooltips item={item} />
                 </div>
                 <Separator className="w-full"></Separator>