+ {coverUrl ? (
+ 
+ ) : (
+
+ {icon || 'inventory_2'}
+
+ )}
+
+
+
+
+ {name}
+{caption}
+
+
+
+ );
+};
+
+const FocusableButton = ({ children, onClick, className }: { children: React.ReactNode, onClick?: () => void, className?: string }) => {
+ const { ref, focused } = useFocusableAutoScroll({ onEnterPress: () => onClick?.() });
+ return (
+
+ );
+};
+
+const FocusableThumb = ({ g, isActive, onClick }: { g: Game, isActive: boolean, onClick: () => void }) => {
+ const { ref, focused } = useFocusableAutoScroll({ onEnterPress: onClick });
+ return (
+
+ 
+
+ );
+};
+
+export const FeaturedHero = ({ games, isFallback }: { games: Game[], isFallback?: boolean }) => {
+ const [currentIndex, setCurrentIndex] = useState(0);
+ const [isPaused, setIsPaused] = useState(false);
+
+ useEffect(() => {
+ if (isPaused || !games?.length) return;
+ const interval = setInterval(() => {
+ setCurrentIndex((prev) => (prev + 1) % games.length);
+ }, 5000);
+ return () => clearInterval(interval);
+ }, [games, isPaused]);
+
+ if (!games?.length) return null;
+ const game = games[currentIndex];
+
+ const formattedSize = (game.size / (1024 * 1024)).toFixed(2) + " MB";
+
+ return (
+
+
+
+ {/* Large Hero Poster */}
+
+
+
+
+
+
+ {/* Thumbnail Carousel */}
+
+
+ {isFallback ? 'history' : 'star'}
+
+
+ {isFallback ? 'Recently Added' : 'Featured'}
+
+
+
+ + {game.title} +
+ +
+
+
+
+ Platform
+ {game.system}
+
+
+ Size
+ {formattedSize}
+
+ + Experience the magic of {game.title} perfectly emulated and synced natively by the Digital Atelier architecture. +
+ +
+
+ play_arrow
+ Play Now
+
+
+ download
+ Download
+
+
+
+
+
+ {games.map((g, i) => (
+ setCurrentIndex(i)}
+ />
+ ))}
+
+
+ 
+
+
+
+
+ {game.title}
+{game.system}
+
+ {children}
+
+);
+
+const ScrollableSection = ({ title, children, showViewAll }: { title: string, children: React.ReactNode, showViewAll?: boolean }) => {
+ const scrollRef = useRef
+
+
+
+ {showViewAll && View All}
+ {title}
+
+
+
+
+
+ {children}
+
+
+
+
+
+
+
+
+ {game.title}
+
+ 84% Complete
+ Active
+
+
+
+
+ Loading vault data...
;
+ if (error) return Failed to load vault data
;
+
+ const recentGames = results[0].data || [];
+ const collections = results[1].data || [];
+ const favorites = results[2].data || [];
+ const continuePlaying = results[3].data || [];
+
+ const featuredCollections = collections.filter((c) => c.name.toLowerCase() === 'featured');
+ const combinedFeaturedGames = Array.from(new Map(featuredCollections.flatMap(c => c.games).map(g => [g.id, g])).values());
+
+ const hasFeatured = combinedFeaturedGames.length > 0;
+ const heroGames = hasFeatured ? combinedFeaturedGames : recentGames;
+ const showRecentSection = hasFeatured;
+ const standardCollections = collections.filter(c => c.name.toLowerCase() !== 'featured');
+
+ return (
+
+ {heroGames.length > 0 &&
+
+
+ {showRecentSection && recentGames.length > 0 && (
+
+ {recentGames.map((game) => (
+
+
+ ))}
+
+ )}
+
+ {continuePlaying.length > 0 && (
+
+ {continuePlaying.slice(0, 5).map((game) => (
+
+ )}
+
+ {favorites.length > 0 && (
+
+ {favorites.map((game) => (
+
+
+ ))}
+
+ )}
+
+ {standardCollections.length > 0 && (
+
+ {standardCollections.map((col) => {
+ const cover = col.games?.[0]?.coverUrl || '';
+ const gamesCount = col.games?.length || 0;
+ const caption = gamesCount > 0 ? `${gamesCount} Game${gamesCount === 1 ? '' : 's'}` : (col.ownerRole === 'admin' ? 'Public' : 'Private');
+
+ return (
+
+
+ );
+ })}
+
+ )}
+
+ {/* Autogenerated Collections */}
+
+ {[
+ { id: 'auto-1', name: 'All Games', icon: 'apps' },
+ { id: 'auto-2', name: 'Favorites', icon: 'star' },
+ { id: 'auto-3', name: 'Recently Added', icon: 'schedule' },
+ { id: 'auto-4', name: 'Recently Played', icon: 'history' },
+ { id: 'auto-5', name: 'Most Played', icon: 'leaderboard' },
+ { id: 'auto-6', name: 'Never Played', icon: 'videogame_asset_off' },
+ ].map((col) => (
+
+
+ ))}
+
+
+
+
+ {/* Background radial gradient glow for atmospheric depth */}
+
+
+
+
+
+
+ );
+};
diff --git a/src/components/MagicCard.tsx b/src/components/MagicCard.tsx
new file mode 100644
index 0000000..9b8db02
--- /dev/null
+++ b/src/components/MagicCard.tsx
@@ -0,0 +1,69 @@
+import React, { useRef, useState, useImperativeHandle } from "react";
+import { motion } from "framer-motion";
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+function cn(...inputs: ClassValue[]) {
+ return twMerge(clsx(inputs));
+}
+
+export interface MagicCardProps extends React.HTMLAttributes
+
+ );
+ }
+);
diff --git a/src/components/Settings.tsx b/src/components/Settings.tsx
new file mode 100644
index 0000000..80ed006
--- /dev/null
+++ b/src/components/Settings.tsx
@@ -0,0 +1,83 @@
+export const Settings = () => {
+ return (
+
+
+ );
+};
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
new file mode 100644
index 0000000..c631562
--- /dev/null
+++ b/src/components/Sidebar.tsx
@@ -0,0 +1,90 @@
+import { useState, useEffect } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { Link, useLocation, useNavigate } from 'react-router-dom';
+import { useAuth } from '../context/AuthContext';
+import { rommApiClient } from '../api/client';
+import { FocusContext } from '@noriginmedia/norigin-spatial-navigation';
+import { useFocusableAutoScroll } from '../hooks/useFocusableAutoScroll';
+
+export const Sidebar = () => {
+ const { logout } = useAuth();
+ const { data: user } = useQuery({ queryKey: ['currentUser'], queryFn: () => rommApiClient.fetchCurrentUser() });
+ const [imgError, setImgError] = useState(false);
+ const location = useLocation();
+ const navigate = useNavigate();
+
+ // Create physical bounding box for Sidebar natively mapping navigation paths
+ const { ref: containerRef, focusKey: sidebarFocusKey } = useFocusableAutoScroll();
+
+ const fallbackName = user?.username || "Admin";
+ const avatarFallback = `https://ui-avatars.com/api/?name=${encodeURIComponent(fallbackName)}&background=2563eb&color=fff&bold=true`;
+ const avatarUrl = !imgError && user?.avatarUrl ? user.avatarUrl : avatarFallback;
+
+ const NavItem = ({ path, icon, label, autoFocus }: { path: string, icon: string, label: string, autoFocus?: boolean }) => {
+ const isActive = location.pathname === path || (path !== '/' && location.pathname.startsWith(path));
+ const { ref, focused, focusSelf } = useFocusableAutoScroll({
+ onEnterPress: () => navigate(path),
+ });
+
+ useEffect(() => {
+ if (autoFocus) {
+ focusSelf();
+ }
+ }, [autoFocus, focusSelf]);
+
+ return (
+
+ {icon}
+ {label}
+
+ );
+ };
+
+ return (
+
+ {/* Page Header */}
+
+
+
+ {/* Horizontal Tab Bar */}
+
+ Vault Console
+Configure your library experience and server connections.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Layout Preview Card */}
+
+ palette
+
+ Visual Identity
+
+ {/* Toggle: Dark Mode */}
+
+
+
+ {/* Toggle: Notifications */}
+
+
+
+ Enable Dark Mode
+Switch between obsidian and slate themes.
+
+
+ {/* Toggle: Glassmorphism */}
+
+
+
+ Show Notifications
+Get alerts for scan completions and updates.
+
+
+
+
+
+ Glassmorphism Effects
+Enable translucent blurs and layered depth.
+
+
+
+
+ dashboard_customize
+ Interface Preview
+Current: Ultra-Modern / Editorial
+
+
+
+
+
+
+
+
+ search
+
+
+
+
+
+
+ account_tree
+ 12 Platforms
+
+
+ sports_esports
+ 1,402 Games
+
+
+ hard_drive
+ 2.4 TB
+
+
+ save
+ 842 Saves
+
+
+ history
+ 142 States
+
+
+ photo_library
+ 5,103 Screens
+
+
+
+
+ {/* Active Hardware Indicator */}
+
+
+ {mode === 'gamepad' ? 'sports_esports' : 'mouse'}
+
+
+
+
+
+search
+
+
+
+
+
+
+account_tree
+12 Platforms
+
+
+sports_esports
+1,402 Games
+
+
+hard_drive
+2.4 TB
+
+
+save
+842 Saves
+
+
+history
+142 States
+
+
+photo_library
+5,103 Screens
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+star
+Action Gold
+
+SUNSET OVERDRIVE
+ +
+
+
+Platform
+XBOX ONE / PC
+
+
+Developer
+Fizz Co
+
+
+Year
+2014
+
+
+Rating
+
+star 8.8
+
+
++ Style over everything. Grind, jump, and wall-run through a colorful post-apocalyptic city in the most energetic shooter ever made. +
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Recently Added
+View All +
+
+
+
+
+
+
+
+Lunar Colony
+Strategy
+
+
+
+
+
+
+The Golem Project
+Action
+
+
+
+
+
+
+Vector Prime
+Arcade
+
+
+Continue Playing
+
+
+
+
+
+
+
+
+
+
+Cyberpunk Reclamation
+
+84% Complete
+Active
+
+
+
+
+
+
+Favorites
+View All +
+
+
+
+
+
+
+
+Cyberpunk Reclamation
+RPG
+
+
+
+
+
+
+The Golem Project
+Action
+
+
+
+
+
+
+Sunset Overdrive
+Action
+
+
+Collections
+View All +
+
+
+
+
+
+
+
+Neon Noir
+
+
+
+
+
+
+Cyberpunk Classics
+
+
+
+
+
+
+Atmospheric Sims
+
+
+Autogenerated Collections
+
+
+
+
+
+
+
+
+Arcade Revival
+
+
+
+
+
+
+Deep Space Strategy
+
+
+
+
+
+
+Kinetic Combat
+
+
+
+
+
+
+
+
+Vault Console
+Configure your library experience and server connections.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+palette
+
+Visual Identity
+
+
+
+
+
+
+
+
+
+Enable Dark Mode
+Switch between obsidian and slate themes.
+
+
+
+
+
+
+Show Notifications
+Get alerts for scan completions and updates.
+
+
+
+
+
+Glassmorphism Effects
+Enable translucent blurs and layered depth.
+
+
+
+
+dashboard_customize
+Interface Preview
+Current: Ultra-Modern / Editorial
+
+
+
+
+
+
+
+
+cloud_sync
+
+Connection & API
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Required for fetching high-resolution box art and historical metadata.
+
+
+
+
+