feat(nav): add header navigation and show Steam ID on dashboard

Header links to Dashboard, Library and Settings. The logo, the login page and
the landing page lead logged-in users to the dashboard. Expired tokens are
removed, and a 403 on the dashboard logs out. Remove the dev dummy token.

public/i18n/de.json

@@ -69,7 +69,8 @@
   "DASHBOARD": {
     "LOADING": "Lade Dashboard ...",
     "HELLO": "Hallo",
-    "STEAM_GAMES": "Steam Spiele"
+    "STEAM_GAMES": "Steam Spiele",
+    "NO_STEAM_ID": "Keine Steam-ID hinterlegt – jetzt in den Einstellungen eintragen"
   },
   "LIBRARY": {
     "TITLE": "Spielebibliothek",
@@ -130,5 +131,11 @@
     "GET_STARTED": "Jetzt loslegen",
     "LOGIN": "Anmelden",
     "LOGOUT": "Abmelden"
+  },
+  "NAV": {
+    "DASHBOARD": "Dashboard",
+    "LIBRARY": "Bibliothek",
+    "SETTINGS": "Einstellungen",
+    "TO_DASHBOARD": "Zum Dashboard"
   }
 }

public/i18n/en.json

@@ -69,7 +69,8 @@
   "DASHBOARD": {
     "LOADING": "Loading dashboard ...",
     "HELLO": "Hello",
-    "STEAM_GAMES": "Steam Games"
+    "STEAM_GAMES": "Steam Games",
+    "NO_STEAM_ID": "No Steam ID saved yet – add it in the settings"
   },
   "LIBRARY": {
     "TITLE": "Game Library",
@@ -130,5 +131,11 @@
     "GET_STARTED": "Get Started",
     "LOGIN": "Login",
     "LOGOUT": "Logout"
+  },
+  "NAV": {
+    "DASHBOARD": "Dashboard",
+    "LIBRARY": "Library",
+    "SETTINGS": "Settings",
+    "TO_DASHBOARD": "Go to dashboard"
   }
 }

src/App.jsx

@@ -1,4 +1,4 @@
-import {Link, Route, Routes, useLocation, useNavigate} from 'react-router-dom';
+import {Link, NavLink, Route, Routes, useLocation, useNavigate} from 'react-router-dom';
 import {useTranslation} from 'react-i18next';
 import {useEffect, useState} from 'react';
 
@@ -11,6 +11,12 @@ 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 {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();
@@ -22,13 +28,7 @@ function App() {
     const location = useLocation();
 
     useEffect(() => {
-        // Dev mode: inject dummy token if none exists
-        if (import.meta.env.MODE === 'development' && !localStorage.getItem('tbp_jwt')) {
-            localStorage.setItem('tbp_jwt', 'dev-dummy-token');
-        }
-
-        const token = localStorage.getItem('tbp_jwt');
-        setIsAuthenticated(!!token); // Converts the token string (or null) to a boolean
+        setIsAuthenticated(!!getValidToken());
     }, [location]);
 
     const toggleLanguage = () => {
@@ -44,10 +44,27 @@ 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="p-4 flex justify-between items-center border-b border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 sticky top-0 z-50">
-                <Link to="/" className="font-black text-blue-600 dark:text-blue-500 text-2xl flex items-center tracking-tight">
+                <Link to={isAuthenticated ? '/dashboard' : '/'} className="font-black text-blue-600 dark:text-blue-500 text-2xl flex items-center tracking-tight">
                     <i className="mdi mdi-controller mr-2 text-3xl"></i> Game Log
                 </Link>
 
+                {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>
+                )}
+
                 <div className="flex 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()}
@@ -59,9 +76,6 @@ function App() {
                     </button>
                     {isAuthenticated ? (
                         <>
-                            <Link to="/settings" className="text-sm font-bold text-slate-600 dark:text-slate-300 hover:text-blue-500 transition-colors">
-                                <i className="mdi mdi-cog text-xl"></i>
-                            </Link>
                             <button onClick={handleLogout} className="bg-red-600 hover:bg-red-500 text-white px-5 py-2 rounded-lg font-bold transition-all shadow-md shadow-red-500/20">
                                 {t('MAIN.LOGOUT')}
                             </button>

src/pages/Dashboard.jsx

@@ -56,7 +56,7 @@ const Dashboard = () => {
                     if (data.steamId) {
                         await fetchSteamCount();
                     }
-                } else if (profileResponse.status === 401) {
+                } else if (profileResponse.status === 401 || profileResponse.status === 403) {
                     localStorage.removeItem('tbp_jwt');
                     navigate('/login');
                 } else {
@@ -107,6 +107,17 @@ const Dashboard = () => {
                     <p className="text-lg text-slate-600 dark:text-slate-300">
                         {userData?.dashboardMessage}
                     </p>
+                    {userData?.steamId ? (
+                        <p className="mt-2 text-sm text-slate-500 dark:text-slate-400">
+                            <i className="mdi mdi-steam mr-1"></i>
+                            {t('SETTINGS.STEAM_ID')}: <span className="font-mono">{userData.steamId}</span>
+                        </p>
+                    ) : (
+                        <Link to="/settings" className="mt-2 inline-block text-sm text-blue-600 dark:text-blue-400 hover:underline">
+                            <i className="mdi mdi-steam mr-1"></i>
+                            {t('DASHBOARD.NO_STEAM_ID')}
+                        </Link>
+                    )}
                     {userData?.steamId && (
                         <div className="mt-4">
                             <SyncStatusBadge

src/pages/LandingPage.jsx

@@ -1,5 +1,6 @@
 import {useTranslation} from 'react-i18next';
 import {Link} from 'react-router-dom';
+import {getValidToken} from '../utils/auth.js';
 import StatCard from '../components/StatCard.jsx';
 
 import usePublicStats from '../hooks/usePublicStats.js';
@@ -25,9 +26,15 @@ export default function LandingPage() {
                 <p className="text-lg text-slate-600 dark:text-slate-400 max-w-2xl mx-auto mb-8">
                     {t('MAIN.DESCRIPTION')}
                 </p>
-                <Link to="/login" className="bg-blue-600 hover:bg-blue-500 text-white px-8 py-3 rounded-xl font-bold text-lg transition-all shadow-lg shadow-blue-500/30">
-                    {t('MAIN.GET_STARTED')}
-                </Link>
+                {getValidToken() ? (
+                    <Link to="/dashboard" className="bg-blue-600 hover:bg-blue-500 text-white px-8 py-3 rounded-xl font-bold text-lg transition-all shadow-lg shadow-blue-500/30">
+                        {t('NAV.TO_DASHBOARD')}
+                    </Link>
+                ) : (
+                    <Link to="/login" className="bg-blue-600 hover:bg-blue-500 text-white px-8 py-3 rounded-xl font-bold text-lg transition-all shadow-lg shadow-blue-500/30">
+                        {t('MAIN.GET_STARTED')}
+                    </Link>
+                )}
             </section>
 
             <section className="w-full max-w-5xl mb-16">

src/pages/LoginPage.jsx

@@ -1,6 +1,7 @@
 import {useTranslation} from 'react-i18next';
 import {useState} from 'react';
-import {Link, useNavigate} from 'react-router-dom';
+import {Link, Navigate, useNavigate} from 'react-router-dom';
+import {getValidToken} from '../utils/auth.js';
 
 export default function LoginPage() {
     const {t} = useTranslation();
@@ -38,10 +39,7 @@ export default function LoginPage() {
             if (response.ok) {
                 // HTTP 200 OK
                 localStorage.setItem('tbp_jwt', data.token);
-                setFeedback({message: 'Login successful!', isError: false});
-                setTimeout(() => {
-                    navigate('/dashboard');
-                }, 500);
+                navigate('/dashboard', {replace: true});
             } else {
                 // HTTP 401 Unauthorized or other errors
                 setFeedback({
@@ -61,6 +59,10 @@ export default function LoginPage() {
         }
     };
 
+    if (getValidToken()) {
+        return <Navigate to="/dashboard" replace/>;
+    }
+
     return (
         <div className="flex min-h-screen items-center justify-center bg-slate-50 dark:bg-slate-900 px-4">
             <div className="w-full max-w-md bg-white dark:bg-slate-800 rounded-xl shadow-lg p-8">

src/utils/auth.js

@@ -0,0 +1,26 @@
+const TOKEN_KEY = 'tbp_jwt';
+
+/**
+ * Only checks `exp`. The signature is checked by the backends.
+ */
+export function isTokenValid(token, nowMs = Date.now()) {
+    try {
+        const payload = token.split('.')[1].replace(/-/g, '+').replace(/_/g, '/');
+        const {exp} = JSON.parse(atob(payload));
+        return typeof exp === 'number' && exp * 1000 > nowMs;
+    } catch {
+        return false;
+    }
+}
+
+/**
+ * Returns the stored token, or null. Removes an expired token.
+ */
+export function getValidToken() {
+    const token = localStorage.getItem(TOKEN_KEY);
+    if (token && !isTokenValid(token)) {
+        localStorage.removeItem(TOKEN_KEY);
+        return null;
+    }
+    return token;
+}

src/utils/auth.test.js

@@ -0,0 +1,27 @@
+import {describe, expect, it} from 'vitest';
+import {isTokenValid} from './auth.js';
+
+const tokenWithPayload = (payload) => {
+    const encode = (obj) => btoa(JSON.stringify(obj)).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
+    return `${encode({alg: 'EdDSA'})}.${encode(payload)}.signature`;
+};
+
+describe('isTokenValid', () => {
+    const now = Date.UTC(2026, 8, 24, 12, 0, 0);
+
+    it('accepts a token that expires in the future', () => {
+        expect(isTokenValid(tokenWithPayload({exp: now / 1000 + 60}), now)).toBe(true);
+    });
+
+    it('rejects an expired token', () => {
+        expect(isTokenValid(tokenWithPayload({exp: now / 1000 - 60}), now)).toBe(false);
+    });
+
+    it('rejects a token without exp', () => {
+        expect(isTokenValid(tokenWithPayload({sub: 'a@b.de'}), now)).toBe(false);
+    });
+
+    it.each([null, '', 'not-a-jwt', 'a.%%%.c'])('rejects %j', (token) => {
+        expect(isTokenValid(token, now)).toBe(false);
+    });
+});