From 69a253f0e1ce16f10d50e01799446515f629fda4 Mon Sep 17 00:00:00 2001
From: Bram Suurd <contact@bramsuurd.nl>
Date: Thu, 19 Dec 2024 00:54:23 +0100
Subject: [PATCH 1/2] Enhance Tooltip component by adding CircleHelp icon and
 adjusting layout. Updated TooltipContent max width for better display.

---
 .../src/app/scripts/_components/ScriptItems/Tooltips.tsx   | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/frontend/src/app/scripts/_components/ScriptItems/Tooltips.tsx b/frontend/src/app/scripts/_components/ScriptItems/Tooltips.tsx
index 7e70b68e9..9adb58b74 100644
--- a/frontend/src/app/scripts/_components/ScriptItems/Tooltips.tsx
+++ b/frontend/src/app/scripts/_components/ScriptItems/Tooltips.tsx
@@ -6,6 +6,7 @@ import {
   TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { Script } from "@/lib/types";
+import { CircleHelp } from "lucide-react";
 import React from "react";
 
 interface TooltipProps {
@@ -18,9 +19,11 @@ const TooltipBadge: React.FC<TooltipProps> = ({ variant, label, content }) => (
   <TooltipProvider>
     <Tooltip delayDuration={100}>
       <TooltipTrigger className="flex items-center">
-        <Badge variant={variant}>{label}</Badge>
+        <Badge variant={variant} className="flex items-center gap-1">
+          {label} <CircleHelp className="size-3" />
+        </Badge>
       </TooltipTrigger>
-      <TooltipContent side="bottom" className="text-sm">
+      <TooltipContent side="bottom" className="text-sm max-w-64">
         {content}
       </TooltipContent>
     </Tooltip>

From b9d4a83c6d70136a791e50f271a7b23851788891 Mon Sep 17 00:00:00 2001
From: Bram Suurd <contact@bramsuurd.nl>
Date: Thu, 19 Dec 2024 01:00:05 +0100
Subject: [PATCH 2/2] Refactor ScriptItem and InstallCommand components to
 improve conditional rendering based on item type. Updated text to clarify
 usage instructions for 'misc' type scripts.

---
 frontend/src/app/scripts/_components/ScriptItem.tsx   |  2 +-
 .../_components/ScriptItems/InstallCommand.tsx        | 11 ++++++-----
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/frontend/src/app/scripts/_components/ScriptItem.tsx b/frontend/src/app/scripts/_components/ScriptItem.tsx
index 835fce576..fb9e64e0b 100644
--- a/frontend/src/app/scripts/_components/ScriptItem.tsx
+++ b/frontend/src/app/scripts/_components/ScriptItem.tsx
@@ -81,7 +81,7 @@ function ScriptItem({
               <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 ? "install" : "use"}
+                    How to {item.type == "misc" ? "use" : "install"}
                   </h2>
                   <Tooltips item={item} />
                 </div>
diff --git a/frontend/src/app/scripts/_components/ScriptItems/InstallCommand.tsx b/frontend/src/app/scripts/_components/ScriptItems/InstallCommand.tsx
index 58525f6b4..26d941cf3 100644
--- a/frontend/src/app/scripts/_components/ScriptItems/InstallCommand.tsx
+++ b/frontend/src/app/scripts/_components/ScriptItems/InstallCommand.tsx
@@ -28,15 +28,16 @@ export default function InstallCommand({ item }: { item: Script }) {
             time and minimal system resource usage. You are also obliged to
             adhere to updates provided by the package maintainer.
           </>
-        ) : item.type ? (
+        ) : item.type == "misc" ? (
           <>
-            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.
+            {" "}
+            To create a new Proxmox VE {item.name}{" "}
+            {getDisplayValueFromType(item.type)}, run the command below in the
+            Proxmox VE Shell.
           </>
         )}
       </p>