feat: add script disable functionality with visual indicators (#9374)

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

@@ -123,7 +123,7 @@ export default function ScriptAccordion({
                     className={`flex cursor-pointer items-center justify-between gap-1 px-1 py-1 text-muted-foreground hover:rounded-lg hover:bg-accent/60 hover:dark:bg-accent/20 ${selectedScript === script.slug
                       ? "rounded-lg bg-accent font-semibold dark:bg-accent/30 dark:text-white"
                       : ""
-                    }`}
+                    } ${script.disable ? "opacity-60" : ""}`}
                     onClick={() => {
                       handleSelected(script.slug);
                       setSelectedCategory(category.name);
@@ -143,7 +143,9 @@ export default function ScriptAccordion({
                         alt={script.name}
                         className="mr-1 w-4 h-4 rounded-full"
                       />
-                      <span className="flex items-center gap-2">{script.name}</span>
+                      <span className="flex items-center gap-2">
+                        {script.name}
+                      </span>
                     </div>
                     {formattedBadge(script.type)}
                   </Link>

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

@@ -12,6 +12,7 @@ import { useVersions } from "@/hooks/use-versions";
 import { basePath } from "@/config/site-config";
 import { extractDate } from "@/lib/time";
 
+import DisableDescription from "./script-items/disable-description";
 import { getDisplayValueFromType } from "./script-info-blocks";
 import DefaultPassword from "./script-items/default-password";
 import InstallCommand from "./script-items/install-command";
@@ -146,37 +147,45 @@ export function ScriptItem({ item, setSelectedScript }: ScriptItemProps) {
               <ScriptHeader item={item} />
             </Suspense>
 
-            <Description item={item} />
-            <Alerts item={item} />
+            {item.disable && item.disable_description && (
+              <DisableDescription 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 === "pve" ? "use" : item.type === "addon" ? "apply" : "install"}
-                </h2>
-                <Tooltips item={item} />
-              </div>
-              <Separator />
-              <div className="">
-                <InstallCommand item={item} />
-              </div>
-              {item.config_path && (
-                <>
-                  <Separator />
+            {!item.disable && (
+              <>
+                <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">Location of config file</h2>
+                    <h2 className="text-lg font-semibold">
+                      How to
+                      {" "}
+                      {item.type === "pve" ? "use" : item.type === "addon" ? "apply" : "install"}
+                    </h2>
+                    <Tooltips item={item} />
                   </div>
                   <Separator />
                   <div className="">
-                    <ConfigFile configPath={item.config_path} />
+                    <InstallCommand item={item} />
                   </div>
-                </>
-              )}
-            </div>
+                  {item.config_path && (
+                    <>
+                      <Separator />
+                      <div className="flex gap-3 px-4 py-2 bg-accent/25">
+                        <h2 className="text-lg font-semibold">Location of config file</h2>
+                      </div>
+                      <Separator />
+                      <div className="">
+                        <ConfigFile configPath={item.config_path} />
+                      </div>
+                    </>
+                  )}
+                </div>
 
-            <DefaultPassword item={item} />
+                <DefaultPassword item={item} />
+              </>
+            )}
           </div>
         </div>
       </div>

frontend/src/app/scripts/_components/script-items/disable-description.tsx

@@ -0,0 +1,26 @@
+import { AlertCircle } from "lucide-react";
+
+import type { Script } from "@/lib/types";
+
+import TextParseLinks from "@/components/text-parse-links";
+import { AlertColors } from "@/config/site-config";
+import { cn } from "@/lib/utils";
+
+export default function DisableDescription({ item }: { item: Script }) {
+  return (
+    <div className="mt-4 flex flex-col shadow-sm gap-2">
+      <div
+        className={cn(
+          "flex items-start gap-3 rounded-lg border p-4 text-sm",
+          AlertColors.warning,
+        )}
+      >
+        <AlertCircle className="h-5 min-h-5 w-5 min-w-5 mt-0.5" />
+        <div className="flex flex-col gap-2">
+          <h3 className="font-semibold text-base">Script Disabled</h3>
+          <p>{TextParseLinks(item.disable_description!)}</p>
+        </div>
+      </div>
+    </div>
+  );
+}