feat(appearance): accent color, corners, wide layout and game art background

src/App.jsx

@@ -15,10 +15,13 @@ import PublicProfilePage from './pages/PublicProfilePage.jsx';
 import AppHeader from './components/AppHeader.jsx';
 import {Toaster} from '@/components/ui/sonner';
 import {TooltipProvider} from '@/components/ui/tooltip';
+import PageBackground from './components/PageBackground.jsx';
+import {usePreferences} from './context/PreferencesContext.jsx';
 
 function App() {
     const {t} = useTranslation();
     const [isAuthenticated, setIsAuthenticated] = useState(false);
+    const {appearance, syncAppearance, resetAppearance} = usePreferences();
 
     // Hooks for routing
     const navigate = useNavigate();
@@ -30,15 +33,23 @@ function App() {
         setIsAuthenticated(!!localStorage.getItem('tbp_jwt'));
     }, [location]);
 
+    // On login and on page load; the cached look shows until Auth answers.
+    useEffect(() => {
+        if (isAuthenticated) syncAppearance();
+    }, [isAuthenticated, syncAppearance]);
+
     const handleLogout = () => {
         localStorage.removeItem('tbp_jwt');
+        resetAppearance();
         setIsAuthenticated(false);
         navigate('/login');
     };
 
     return (
         <TooltipProvider>
-            <div className="min-h-screen flex flex-col bg-background text-foreground font-sans">
+            {/* isolate: the background layer sits behind the content but in front of this div's own background. */}
+            <div className="isolate min-h-screen flex flex-col bg-background text-foreground font-sans">
+                {isAuthenticated && <PageBackground key={appearance.backgroundAppid} appid={appearance.backgroundAppid}/>}
                 <AppHeader isAuthenticated={isAuthenticated} onLogout={handleLogout}/>
 
                 <main className="grow flex flex-col">