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

feat: initial romm web ui architecture, bento grids, and spatial gamepad bindings

Browse Source
This commit is contained in:
roormonger
2026-03-23 15:31:41 -04:00
commit 9e8f148a10
40 changed files with 9935 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
src/components/TopNav.tsx Normal file
View File

@@ -0,0 +1,51 @@
import { useInputMode } from '../context/InputModeContext';
export const TopNav = () => {
const { mode } = useInputMode();
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">
<div className="relative flex-1 max-w-md focus-within:ring-1 focus-within:ring-[#2563eb]/50 rounded-full overflow-hidden bg-[#070913] border border-white/5 transition-all outline-none shadow-inner">
<span className="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-[#c3c6d7] text-sm">search</span>
<input className="w-full bg-transparent border-none pl-10 pr-4 py-2 text-[11px] font-bold tracking-widest uppercase text-white placeholder-[#c3c6d7]/50 focus:ring-0 geist-mono outline-none" placeholder="Search the vault..." type="text"/>
</div>
<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>
</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>
</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>
</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>
</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>
</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>
</div>
<div className="w-px h-4 bg-white/10 mx-2"></div>
{/* Active Hardware Indicator */}
<div className="flex items-center justify-center w-8 h-8 bg-white/5 border border-white/5 rounded-full ring-1 ring-white/10 shadow-inner text-[#2563eb]" title={mode === 'gamepad' ? 'Gamepad Active' : 'Mouse/Keyboard Active'}>
<span className="material-symbols-outlined text-[16px]" style={{ fontVariationSettings: "'FILL' 1" }}>
{mode === 'gamepad' ? 'sports_esports' : 'mouse'}
</span>
</div>
</div>
</div>
</header>
);
};