From fc2c58c411ef6c4692ac3445070f31e2521092f7 Mon Sep 17 00:00:00 2001
From: Michel Roegl-Brunner <michel.roegl-brunner@htl-braunau.at>
Date: Fri, 10 Oct 2025 12:47:29 +0200
Subject: [PATCH 1/2] feat: add script count badges to tab navigation

- Add script counts to Available Scripts, Downloaded Scripts, and Installed Scripts tabs
- Counts are calculated from API data and displayed as small badges
- Available scripts count shows total GitHub scripts
- Downloaded scripts count shows scripts that have local versions
- Installed scripts count shows total installed script records
- Badges use muted styling to blend with the UI
---
 src/app/page.tsx | 38 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 38 insertions(+)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 9d66c4f..a6f14eb 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -12,12 +12,41 @@ import { SettingsButton } from './_components/SettingsButton';
 import { VersionDisplay } from './_components/VersionDisplay';
 import { Button } from './_components/ui/button';
 import { Rocket, Package, HardDrive, FolderOpen } from 'lucide-react';
+import { api } from '~/trpc/react';
 
 export default function Home() {
   const [runningScript, setRunningScript] = useState<{ path: string; name: string; mode?: 'local' | 'ssh'; server?: any } | null>(null);
   const [activeTab, setActiveTab] = useState<'scripts' | 'downloaded' | 'installed'>('scripts');
   const terminalRef = useRef<HTMLDivElement>(null);
 
+  // Fetch data for script counts
+  const { data: scriptCardsData } = api.scripts.getScriptCardsWithCategories.useQuery();
+  const { data: localScriptsData } = api.scripts.getCtScripts.useQuery();
+  const { data: installedScriptsData } = api.installedScripts.getAllInstalledScripts.useQuery();
+
+  // Calculate script counts
+  const scriptCounts = {
+    available: scriptCardsData?.success ? scriptCardsData.cards?.length || 0 : 0,
+    downloaded: (() => {
+      if (!scriptCardsData?.success || !localScriptsData?.scripts) return 0;
+      
+      // Count scripts that are both in GitHub data and have local versions
+      const githubScripts = scriptCardsData.cards || [];
+      const localScripts = localScriptsData.scripts || [];
+      
+      return githubScripts.filter(script => {
+        if (!script?.name) return false;
+        return localScripts.some(local => {
+          if (!local?.name) return false;
+          const localName = local.name.replace(/\.sh$/, '');
+          return localName.toLowerCase() === script.name.toLowerCase() || 
+                 localName.toLowerCase() === (script.slug ?? '').toLowerCase();
+        });
+      }).length;
+    })(),
+    installed: installedScriptsData?.scripts?.length || 0
+  };
+
   const scrollToTerminal = () => {
     if (terminalRef.current) {
       // Get the element's position and scroll with a small offset for better mobile experience
@@ -83,6 +112,9 @@ export default function Home() {
                 <Package className="h-4 w-4" />
                 <span className="hidden sm:inline">Available Scripts</span>
                 <span className="sm:hidden">Available</span>
+                <span className="ml-1 px-2 py-0.5 text-xs bg-muted text-muted-foreground rounded-full">
+                  {scriptCounts.available}
+                </span>
               </Button>
               <Button
                 variant="ghost"
@@ -96,6 +128,9 @@ export default function Home() {
                 <HardDrive className="h-4 w-4" />
                 <span className="hidden sm:inline">Downloaded Scripts</span>
                 <span className="sm:hidden">Downloaded</span>
+                <span className="ml-1 px-2 py-0.5 text-xs bg-muted text-muted-foreground rounded-full">
+                  {scriptCounts.downloaded}
+                </span>
               </Button>
               <Button
                 variant="ghost"
@@ -109,6 +144,9 @@ export default function Home() {
                 <FolderOpen className="h-4 w-4" />
                 <span className="hidden sm:inline">Installed Scripts</span>
                 <span className="sm:hidden">Installed</span>
+                <span className="ml-1 px-2 py-0.5 text-xs bg-muted text-muted-foreground rounded-full">
+                  {scriptCounts.installed}
+                </span>
               </Button>
             </nav>
           </div>

From 9517e3842bdd7d45be2b12492798fe90b4c3c8cf Mon Sep 17 00:00:00 2001
From: Michel Roegl-Brunner <michel.roegl-brunner@htl-braunau.at>
Date: Fri, 10 Oct 2025 12:50:53 +0200
Subject: [PATCH 2/2] fix: use nullish coalescing operator for safer null
 handling

- Replace logical OR (||) with nullish coalescing (??) for better null/undefined safety
- Fixes ESLint error: @typescript-eslint/prefer-nullish-coalescing
- Ensures build passes successfully
---
 src/app/page.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index a6f14eb..6fdf431 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -26,13 +26,13 @@ export default function Home() {
 
   // Calculate script counts
   const scriptCounts = {
-    available: scriptCardsData?.success ? scriptCardsData.cards?.length || 0 : 0,
+    available: scriptCardsData?.success ? scriptCardsData.cards?.length ?? 0 : 0,
     downloaded: (() => {
       if (!scriptCardsData?.success || !localScriptsData?.scripts) return 0;
       
       // Count scripts that are both in GitHub data and have local versions
-      const githubScripts = scriptCardsData.cards || [];
-      const localScripts = localScriptsData.scripts || [];
+      const githubScripts = scriptCardsData.cards ?? [];
+      const localScripts = localScriptsData.scripts ?? [];
       
       return githubScripts.filter(script => {
         if (!script?.name) return false;
@@ -44,7 +44,7 @@ export default function Home() {
         });
       }).length;
     })(),
-    installed: installedScriptsData?.scripts?.length || 0
+    installed: installedScriptsData?.scripts?.length ?? 0
   };
 
   const scrollToTerminal = () => {