only show categorys wich have scripts in it

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

@@ -4,40 +4,42 @@ import type { Category, Script } from "@/lib/types";
 import ScriptAccordion from "./ScriptAccordion";
 
 const Sidebar = ({
-	items,
+  items,
-	selectedScript,
+  selectedScript,
-	setSelectedScript,
+  setSelectedScript,
 }: {
-	items: Category[];
+  items: Category[];
-	selectedScript: string | null;
+  selectedScript: string | null;
-	setSelectedScript: (script: string | null) => void;
+  setSelectedScript: (script: string | null) => void;
 }) => {
-	const uniqueScripts = items.reduce((acc, category) => {
+  const filteredItems = items.filter(category => category.scripts && category.scripts.length > 0);
-		for (const script of category.scripts) {
-			if (!acc.some((s) => s.name === script.name)) {
-				acc.push(script);
-			}
-		}
-		return acc;
-	}, [] as Script[]);
 
-	return (
+  const uniqueScripts = filteredItems.reduce((acc, category) => {
-		<div className="flex min-w-72 flex-col sm:max-w-72">
+    for (const script of category.scripts) {
-			<div className="flex items-end justify-between pb-4">
+      if (!acc.some((s) => s.name === script.name)) {
-				<h1 className="text-xl font-bold">Categories</h1>
+        acc.push(script);
-				<p className="text-xs italic text-muted-foreground">
+      }
-					{uniqueScripts.length} Total scripts
+    }
-				</p>
+    return acc;
-			</div>
+  }, [] as Script[]);
-			<div className="rounded-lg">
+
-				<ScriptAccordion
+  return (
-					items={items}
+    <div className="flex min-w-72 flex-col sm:max-w-72">
-					selectedScript={selectedScript}
+      <div className="flex items-end justify-between pb-4">
-					setSelectedScript={setSelectedScript}
+        <h1 className="text-xl font-bold">Categories</h1>
-				/>
+        <p className="text-xs italic text-muted-foreground">
-			</div>
+          {uniqueScripts.length} Total scripts
-		</div>
+        </p>
-	);
+      </div>
+      <div className="rounded-lg">
+        <ScriptAccordion
+          items={filteredItems}
+          selectedScript={selectedScript}
+          setSelectedScript={setSelectedScript}
+        />
+      </div>
+    </div>
+  );
 };
 
-export default Sidebar;
+export default Sidebar;