fix(frontend): improve detail view badges, addon texts, and HTML title (#12461)

frontend/src/app/scripts/_components/script-info-blocks.tsx

@@ -19,8 +19,9 @@ export function getDisplayValueFromType(type: string) {
     case "vm":
       return "VM";
     case "pve":
+      return "PVE";
     case "addon":
-      return "";
+      return "ADDON";
     default:
       return "";
   }
@@ -36,10 +37,9 @@ export function LatestScripts({
   onPageChange: (page: number) => void;
 }) {
   const latestScripts = useMemo(() => {
-    if (!items)
-      return [];
+    if (!items) return [];
 
-    const scripts = items.flatMap(category => category.scripts || []);
+    const scripts = items.flatMap((category) => category.scripts || []);
 
     // Filter out duplicates by slug
     const uniqueScriptsMap = new Map<string, Script>();
@@ -97,7 +97,7 @@ export function LatestScripts({
         </div>
       )}
       <div className="min-w flex w-full flex-row flex-wrap gap-4">
-        {latestScripts.slice(startIndex, endIndex).map(script => (
+        {latestScripts.slice(startIndex, endIndex).map((script) => (
           <Card key={script.slug} className="min-w-[250px] flex-1 flex-grow bg-accent/30">
             <CardHeader>
               <CardTitle className="flex items-center gap-3">
@@ -108,15 +108,13 @@ export function LatestScripts({
                     height={64}
                     width={64}
                     alt=""
-                    onError={e => ((e.currentTarget as HTMLImageElement).src = `/${basePath}/logo.png`)}
+                    onError={(e) => ((e.currentTarget as HTMLImageElement).src = `/${basePath}/logo.png`)}
                     className="h-11 w-11 object-contain"
                   />
                 </div>
                 <div className="flex flex-col">
                   <p className="text-lg line-clamp-1">
-                    {script.name}
-                    {" "}
-                    {getDisplayValueFromType(script.type)}
+                    {script.name} {getDisplayValueFromType(script.type)}
                   </p>
                   <p className="text-sm text-muted-foreground flex items-center gap-1">
                     <CalendarPlus className="h-4 w-4" />
@@ -149,7 +147,7 @@ export function LatestScripts({
 
 export function MostViewedScripts({ items }: { items: Category[] }) {
   const mostViewedScripts = items.reduce((acc: Script[], category) => {
-    const foundScripts = category.scripts.filter(script => mostPopularScripts.includes(script.slug));
+    const foundScripts = category.scripts.filter((script) => mostPopularScripts.includes(script.slug));
     return acc.concat(foundScripts);
   }, []);
 
@@ -161,7 +159,7 @@ export function MostViewedScripts({ items }: { items: Category[] }) {
         </>
       )}
       <div className="min-w flex w-full flex-row flex-wrap gap-4">
-        {mostViewedScripts.map(script => (
+        {mostViewedScripts.map((script) => (
           <Card key={script.slug} className="min-w-[250px] flex-1 flex-grow bg-accent/30">
             <CardHeader>
               <CardTitle className="flex items-center gap-3">
@@ -172,15 +170,13 @@ export function MostViewedScripts({ items }: { items: Category[] }) {
                     height={64}
                     width={64}
                     alt=""
-                    onError={e => ((e.currentTarget as HTMLImageElement).src = `/${basePath}/logo.png`)}
+                    onError={(e) => ((e.currentTarget as HTMLImageElement).src = `/${basePath}/logo.png`)}
                     className="h-11 w-11 object-contain"
                   />
                 </div>
                 <div className="flex flex-col">
                   <p className="line-clamp-1 text-lg">
-                    {script.name}
-                    {" "}
-                    {getDisplayValueFromType(script.type)}
+                    {script.name} {getDisplayValueFromType(script.type)}
                   </p>
                   <p className="flex items-center gap-1 text-sm text-muted-foreground">
                     <CalendarPlus className="h-4 w-4" />

frontend/src/app/scripts/_components/script-item.tsx

@@ -14,6 +14,7 @@ import { basePath } from "@/config/site-config";
 import { extractDate } from "@/lib/time";
 
 import DisableDescription from "./script-items/disable-description";
+import { formattedBadge } from "@/components/command-menu";
 import { getDisplayValueFromType } from "./script-info-blocks";
 import DefaultPassword from "./script-items/default-password";
 import InstallCommand from "./script-items/install-command";
@@ -31,7 +32,7 @@ type ScriptItemProps = {
 
 function ScriptHeader({ item }: { item: Script }) {
   const defaultInstallMethod = item.install_methods?.[0];
-  const os = defaultInstallMethod?.resources?.os || "Proxmox Node";
+  const os = defaultInstallMethod?.resources?.os || (item.type === "addon" ? "Existing LXC or Proxmox Node" : "Proxmox Node");
   const version = defaultInstallMethod?.resources?.version || "";
 
   return (
@@ -55,9 +56,7 @@ function ScriptHeader({ item }: { item: Script }) {
                 <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>
+                  {formattedBadge(item.type)}
                 </h1>
                 <div className="mt-1 flex items-center gap-3 text-sm text-muted-foreground">
                   <span>

frontend/src/app/scripts/_components/script-items/tool-tips.tsx

@@ -36,17 +36,24 @@ const TooltipBadge: React.FC<TooltipProps> = ({ variant, label, content }) => (
 export default function Tooltips({ item }: { item: Script }) {
   return (
     <div className="flex items-center gap-2">
-      {item.privileged && (
+      {item.privileged && item.type !== "addon" && (
         <TooltipBadge variant="warning" label="Privileged" content="This script will be run in a privileged LXC" />
       )}
-      {item.updateable && item.type !== "pve" && (
+      {item.updateable && item.type !== "pve" && item.type !== "addon" && (
         <TooltipBadge
           variant="success"
           label="Updateable"
           content={`To Update ${item.name}, run the command below (or type update) in the LXC Console.`}
         />
       )}
-      {!item.updateable && item.type !== "pve" && <TooltipBadge variant="failure" label="Not Updateable" />}
+      {item.updateable && item.type === "addon" && (
+        <TooltipBadge
+          variant="success"
+          label="Updateable"
+          content={`Run update_${item.slug} to update or use the bash command inside the LXC.`}
+        />
+      )}
+      {!item.updateable && item.type !== "pve" && item.type !== "addon" && <TooltipBadge variant="failure" label="Not Updateable" />}
     </div>
   );
 }

frontend/src/app/scripts/page.tsx

@@ -32,6 +32,11 @@ function ScriptContent() {
         .flat()
         .find(script => script.slug === selectedScript);
       setItem(script);
+      if (script) {
+        document.title = `${script.name} | Proxmox VE Helper-Scripts`;
+      }
+    } else {
+      document.title = "Proxmox VE Helper-Scripts";
     }
   }, [selectedScript, links]);