feat(ui): modern shadcn/ui theme with violet accent across all pages

Add shadcn/ui (Radix + Tailwind 4) components, zinc/violet theme tokens and self-hosted Inter. New header with user menu, Steam cover art, skeletons and toasts. Replace @mdi/font with lucide-react. Fix: top-owned list on the landing page only showed with top-played entries; numbers use the app language.

src/App.jsx

@@ -1,4 +1,4 @@
-import {Link, NavLink, Route, Routes, useLocation, useNavigate} from 'react-router-dom';
+import {Link, Route, Routes, useLocation, useNavigate} from 'react-router-dom';
 import {useTranslation} from 'react-i18next';
 import {useEffect, useState} from 'react';
 
@@ -10,17 +10,13 @@ import RegistrationPage from './pages/RegistrationPage.jsx';
 import SettingsPage from './pages/SettingsPage.jsx';
 import GameLibrary from './pages/GameLibrary.jsx';
 import GameDetail from './pages/GameDetail.jsx';
-import {usePreferences} from './context/PreferencesContext.jsx';
+import AppHeader from './components/AppHeader.jsx';
+import {Toaster} from '@/components/ui/sonner';
+import {TooltipProvider} from '@/components/ui/tooltip';
 import {getValidToken} from './utils/auth.js';
 
-const navLinkClass = ({isActive}) =>
-    `flex items-center gap-1 text-sm font-bold transition-colors ${
-        isActive ? 'text-blue-600 dark:text-blue-400' : 'text-slate-600 dark:text-slate-300 hover:text-blue-500'
-    }`;
-
 function App() {
-    const {t, i18n} = useTranslation();
-    const {isDarkMode, setDarkMode, setLanguage} = usePreferences();
+    const {t} = useTranslation();
     const [isAuthenticated, setIsAuthenticated] = useState(false);
 
     // Hooks for routing
@@ -31,10 +27,6 @@ function App() {
         setIsAuthenticated(!!getValidToken());
     }, [location]);
 
-    const toggleLanguage = () => {
-        setLanguage(i18n.language === 'de' ? 'en' : 'de');
-    };
-
     const handleLogout = () => {
         localStorage.removeItem('tbp_jwt');
         setIsAuthenticated(false);
@@ -42,73 +34,32 @@ function App() {
     };
 
     return (
-        <div className="min-h-screen flex flex-col bg-slate-50 dark:bg-slate-950 transition-colors duration-300 font-sans">
-            <header className="px-3 py-3 sm:p-4 flex justify-between items-center gap-3 border-b border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 sticky top-0 z-50">
-                <Link to={isAuthenticated ? '/dashboard' : '/'} className="font-black text-blue-600 dark:text-blue-500 text-xl sm:text-2xl flex items-center tracking-tight whitespace-nowrap">
-                    <i className="mdi mdi-controller mr-1 sm:mr-2 text-2xl sm:text-3xl"></i> Game Log
-                </Link>
+        <TooltipProvider>
+            <div className="min-h-screen flex flex-col bg-background text-foreground font-sans">
+                <AppHeader isAuthenticated={isAuthenticated} onLogout={handleLogout}/>
 
-                {isAuthenticated && (
-                    <nav className="flex gap-4 sm:gap-6 items-center">
-                        <NavLink to="/dashboard" className={navLinkClass}>
-                            <i className="mdi mdi-view-dashboard text-xl"></i>
-                            <span className="hidden sm:inline">{t('NAV.DASHBOARD')}</span>
-                        </NavLink>
-                        <NavLink to="/library" className={navLinkClass}>
-                            <i className="mdi mdi-gamepad-variant text-xl"></i>
-                            <span className="hidden sm:inline">{t('NAV.LIBRARY')}</span>
-                        </NavLink>
-                        <NavLink to="/settings" className={navLinkClass}>
-                            <i className="mdi mdi-cog text-xl"></i>
-                            <span className="hidden sm:inline">{t('NAV.SETTINGS')}</span>
-                        </NavLink>
-                    </nav>
-                )}
+                <main className="grow flex flex-col">
+                    <Routes>
+                        <Route path="/" element={<LandingPage/>}/>
+                        <Route path="/login" element={<LoginPage/>}/>
+                        <Route path="/register" element={<RegistrationPage/>}/>
+                        <Route path="/dashboard" element={<Dashboard/>}/>
+                        <Route path="/library" element={<GameLibrary/>}/>
+                        <Route path="/library/:appid" element={<GameDetail/>}/>
+                        <Route path="/settings" element={<SettingsPage/>}/>
+                        <Route path="/impressum" element={<ImprintPage/>}/>
+                    </Routes>
+                </main>
 
-                <div className="flex gap-3 sm:gap-5 items-center">
-                    <button onClick={toggleLanguage} className="text-sm font-bold text-slate-600 dark:text-slate-300 hover:text-blue-500 transition-colors">
-                        {i18n.language.toUpperCase()}
-                    </button>
-                    <button onClick={() => {
-                        setDarkMode(!isDarkMode);
-                    }} className="text-xl text-slate-600 dark:text-slate-300 hover:text-blue-500 transition-colors">
-                        <i className={isDarkMode ? "mdi mdi-weather-sunny" : "mdi mdi-weather-night"}></i>
-                    </button>
-                    {isAuthenticated ? (
-                        <>
-                            <button onClick={handleLogout} title={t('MAIN.LOGOUT')} className="bg-red-600 hover:bg-red-500 text-white px-3 sm:px-5 py-2 rounded-lg font-bold transition-all shadow-md shadow-red-500/20">
-                                <i className="mdi mdi-logout sm:hidden"></i>
-                                <span className="hidden sm:inline">{t('MAIN.LOGOUT')}</span>
-                            </button>
-                        </>
-                    ) : (
-                        <Link to="/login" className="bg-blue-600 hover:bg-blue-500 text-white px-5 py-2 rounded-lg font-bold transition-all shadow-md shadow-blue-500/20">
-                            {t('MAIN.LOGIN')}
-                        </Link>
-                    )}
-                </div>
-            </header>
-
-            <main className="grow flex flex-col">
-                <Routes>
-                    <Route path="/" element={<LandingPage/>}/>
-                    <Route path="/login" element={<LoginPage/>}/>
-                    <Route path="/register" element={<RegistrationPage/>}/>
-                    <Route path="/dashboard" element={<Dashboard/>}/>
-                    <Route path="/library" element={<GameLibrary/>}/>
-                    <Route path="/library/:appid" element={<GameDetail/>}/>
-                    <Route path="/settings" element={<SettingsPage/>}/>
-                    <Route path="/impressum" element={<ImprintPage/>}/>
-                </Routes>
-            </main>
-
-            <footer className="p-6 text-center border-t border-slate-200 dark:border-slate-800 text-slate-500 dark:text-slate-400 text-sm bg-white dark:bg-slate-900">
-                <Link to="/impressum" className="hover:text-blue-500 font-semibold transition-colors">
-                    {t('IMPRINT.TITLE')}
-                </Link>
-            </footer>
-        </div>
+                <footer className="border-t py-6 text-center text-sm text-muted-foreground">
+                    <Link to="/impressum" className="font-medium hover:text-foreground transition-colors">
+                        {t('IMPRINT.TITLE')}
+                    </Link>
+                </footer>
+            </div>
+            <Toaster richColors position="bottom-right"/>
+        </TooltipProvider>
     );
 }
 
-export default App;
+export default App;