Chief/romm-web-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixed little controller issue and wired up stats in top bar

Browse Source
This commit is contained in:
roormonger
2026-03-23 16:43:09 -04:00
parent 9e8f148a10
commit f6ae56c848
5 changed files with 45 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/components/TopNav.tsx
View File

@@ -1,7 +1,22 @@
import { useQuery } from '@tanstack/react-query';
import { rommApiClient } from '../api/client';
import { useInputMode } from '../context/InputModeContext';
export const TopNav = () => {
const { mode } = useInputMode();
const { data: stats } = useQuery({
queryKey: ['stats'],
queryFn: () => rommApiClient.fetchStats(),
staleTime: 60000, // 1 minute caching
});
const formatBytes = (bytes?: number) => {
if (!bytes) return '--';
const gb = bytes / (1024 * 1024 * 1024);
if (gb >= 1024) return `${(gb / 1024).toFixed(1)} TB`;
return `${Math.round(gb)} GB`;
};
return (
<header className="fixed top-0 right-0 left-64 h-16 z-50 bg-[#10131f]/80 backdrop-blur-2xl flex items-center justify-between px-12 border-b border-white/5">
<div className="flex items-center gap-6 w-full">
@@ -13,27 +28,27 @@ export const TopNav = () => {
<div className="hidden xl:flex items-center gap-6 ml-4 geist-mono justify-end flex-1">
<div className="flex items-center gap-2">
<span className="material-symbols-outlined text-[#2563eb] text-sm" data-icon="account_tree">account_tree</span>
<span className="text-[11px] uppercase text-[#c3c6d7] font-bold"><span className="text-white">12</span> Platforms</span>
<span className="text-[11px] uppercase text-[#c3c6d7] font-bold"><span className="text-white">{stats?.PLATFORMS ?? '--'}</span> Platforms</span>
</div>
<div className="flex items-center gap-2">
<span className="material-symbols-outlined text-[#2563eb] text-sm" data-icon="sports_esports">sports_esports</span>
<span className="text-[11px] uppercase text-[#c3c6d7] font-bold"><span className="text-white">1,402</span> Games</span>
<span className="text-[11px] uppercase text-[#c3c6d7] font-bold"><span className="text-white">{stats?.ROMS?.toLocaleString() ?? '--'}</span> Games</span>
</div>
<div className="flex items-center gap-2">
<span className="material-symbols-outlined text-[#2563eb] text-sm" data-icon="hard_drive">hard_drive</span>
<span className="text-[11px] uppercase text-[#c3c6d7] font-bold"><span className="text-white">2.4 TB</span></span>
<span className="text-[11px] uppercase text-[#c3c6d7] font-bold"><span className="text-white">{formatBytes(stats?.TOTAL_FILESIZE_BYTES)}</span></span>
</div>
<div className="flex items-center gap-2">
<span className="material-symbols-outlined text-[#2563eb] text-sm" data-icon="save">save</span>
<span className="text-[11px] uppercase text-[#c3c6d7] font-bold"><span className="text-white">842</span> Saves</span>
<span className="text-[11px] uppercase text-[#c3c6d7] font-bold"><span className="text-white">{stats?.SAVES?.toLocaleString() ?? '--'}</span> Saves</span>
</div>
<div className="flex items-center gap-2">
<span className="material-symbols-outlined text-[#2563eb] text-sm" data-icon="history">history</span>
<span className="text-[11px] uppercase text-[#c3c6d7] font-bold"><span className="text-white">142</span> States</span>
<span className="text-[11px] uppercase text-[#c3c6d7] font-bold"><span className="text-white">{stats?.STATES?.toLocaleString() ?? '--'}</span> States</span>
</div>
<div className="flex items-center gap-2">
<span className="material-symbols-outlined text-[#2563eb] text-sm" data-icon="photo_library">photo_library</span>
<span className="text-[11px] uppercase text-[#c3c6d7] font-bold"><span className="text-white">5,103</span> Screens</span>
<span className="text-[11px] uppercase text-[#c3c6d7] font-bold"><span className="text-white">{stats?.SCREENSHOTS?.toLocaleString() ?? '--'}</span> Screens</span>
</div>
<div className="w-px h-4 bg-white/10 mx-2"></div>