Skip to content

Commit c618fef

Browse files
feat: Add script count badges to tab navigation (#100)
* 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 * 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
1 parent 6265ffe commit c618fef

File tree

1 file changed

+38
-0
lines changed

1 file changed

+38
-0
lines changed

src/app/page.tsx

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,41 @@ import { SettingsButton } from './_components/SettingsButton';
1212
import { VersionDisplay } from './_components/VersionDisplay';
1313
import { Button } from './_components/ui/button';
1414
import { Rocket, Package, HardDrive, FolderOpen } from 'lucide-react';
15+
import { api } from '~/trpc/react';
1516

1617
export default function Home() {
1718
const [runningScript, setRunningScript] = useState<{ path: string; name: string; mode?: 'local' | 'ssh'; server?: any } | null>(null);
1819
const [activeTab, setActiveTab] = useState<'scripts' | 'downloaded' | 'installed'>('scripts');
1920
const terminalRef = useRef<HTMLDivElement>(null);
2021

22+
// Fetch data for script counts
23+
const { data: scriptCardsData } = api.scripts.getScriptCardsWithCategories.useQuery();
24+
const { data: localScriptsData } = api.scripts.getCtScripts.useQuery();
25+
const { data: installedScriptsData } = api.installedScripts.getAllInstalledScripts.useQuery();
26+
27+
// Calculate script counts
28+
const scriptCounts = {
29+
available: scriptCardsData?.success ? scriptCardsData.cards?.length ?? 0 : 0,
30+
downloaded: (() => {
31+
if (!scriptCardsData?.success || !localScriptsData?.scripts) return 0;
32+
33+
// Count scripts that are both in GitHub data and have local versions
34+
const githubScripts = scriptCardsData.cards ?? [];
35+
const localScripts = localScriptsData.scripts ?? [];
36+
37+
return githubScripts.filter(script => {
38+
if (!script?.name) return false;
39+
return localScripts.some(local => {
40+
if (!local?.name) return false;
41+
const localName = local.name.replace(/\.sh$/, '');
42+
return localName.toLowerCase() === script.name.toLowerCase() ||
43+
localName.toLowerCase() === (script.slug ?? '').toLowerCase();
44+
});
45+
}).length;
46+
})(),
47+
installed: installedScriptsData?.scripts?.length ?? 0
48+
};
49+
2150
const scrollToTerminal = () => {
2251
if (terminalRef.current) {
2352
// Get the element's position and scroll with a small offset for better mobile experience
@@ -83,6 +112,9 @@ export default function Home() {
83112
<Package className="h-4 w-4" />
84113
<span className="hidden sm:inline">Available Scripts</span>
85114
<span className="sm:hidden">Available</span>
115+
<span className="ml-1 px-2 py-0.5 text-xs bg-muted text-muted-foreground rounded-full">
116+
{scriptCounts.available}
117+
</span>
86118
</Button>
87119
<Button
88120
variant="ghost"
@@ -96,6 +128,9 @@ export default function Home() {
96128
<HardDrive className="h-4 w-4" />
97129
<span className="hidden sm:inline">Downloaded Scripts</span>
98130
<span className="sm:hidden">Downloaded</span>
131+
<span className="ml-1 px-2 py-0.5 text-xs bg-muted text-muted-foreground rounded-full">
132+
{scriptCounts.downloaded}
133+
</span>
99134
</Button>
100135
<Button
101136
variant="ghost"
@@ -109,6 +144,9 @@ export default function Home() {
109144
<FolderOpen className="h-4 w-4" />
110145
<span className="hidden sm:inline">Installed Scripts</span>
111146
<span className="sm:hidden">Installed</span>
147+
<span className="ml-1 px-2 py-0.5 text-xs bg-muted text-muted-foreground rounded-full">
148+
{scriptCounts.installed}
149+
</span>
112150
</Button>
113151
</nav>
114152
</div>

0 commit comments

Comments
 (0)