Add persistence layer: TOTP auth, game history, restore

- db/ package: async SQLAlchemy engine + Player/Game/Guess models
- api/auth.py: passwordless TOTP login (pyotp), session token via socket auth
- api/history.py: record guesses/points, DB-backed standings, restore
  unfinished games on startup, host-only end_game
- api/__init__.py: auth-gated handlers, accounts map, rejoin via account
- frontend: Auth (QR + code) and History pages, resume/end-game in lobby/table
- docker-compose: real PostgreSQL service wired via DATABASE_URL
- tests_history.py for the persistence/auth layer; refresh CLAUDE.md

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

frontend/src/pages/GameList.tsx

@@ -1,18 +1,42 @@
 import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { useGameStore } from '../store/gameStore';
+import { emit, socket, setAuthToken } from '../lib/socket';
 import NameModal from '../components/NameModal';
 import RulesModal from '../components/RulesModal';
 
-type ModalState = { mode: 'create' } | { mode: 'join'; gid: string } | null;
-
 export default function GameList() {
+  const navigate = useNavigate();
   const games = useGameStore((s) => s.games);
-  const [modal, setModal] = useState<ModalState>(null);
+  const account = useGameStore((s) => s.account);
+  const [showCreate, setShowCreate] = useState(false);
   const [showRules, setShowRules] = useState(false);
 
+  const handleLogout = () => {
+    localStorage.removeItem('bridzik_token');
+    localStorage.removeItem('bridzik_player');
+    setAuthToken(null);
+    useGameStore.getState().logout();
+    // Drop the authenticated server-side session for this connection.
+    socket.disconnect();
+    socket.connect();
+    navigate('/auth', { replace: true });
+  };
+
   return (
     <div className="max-w-md mx-auto p-4 pt-8">
-      <h1 className="text-2xl font-bold text-center mb-6 tracking-wide">Bridzik</h1>
+      <div className="flex items-center justify-between mb-6">
+        <h1 className="text-2xl font-bold tracking-wide">Bridzik</h1>
+        <div className="flex items-center gap-3 text-sm">
+          <span className="text-gray-400">{account?.username}</span>
+          <button onClick={() => navigate('/history')} className="text-blue-400 hover:text-blue-300">
+            Historia
+          </button>
+          <button onClick={handleLogout} className="text-gray-400 hover:text-white">
+            Odhlasit
+          </button>
+        </div>
+      </div>
 
       <div className="flex flex-col gap-3 mb-6">
         {games.length === 0 && (
@@ -20,7 +44,11 @@ export default function GameList() {
         )}
         {games.map((g) => {
           const full = g.players.length >= 4;
-          const unavailable = full || g.started;
+          const isMember =
+            !!account && g.players.some((p) => p.player_id === account.player_id);
+          const canResume = g.started && isMember;
+          const unavailable = !canResume && (full || g.started);
+          const label = canResume ? 'Pokracovat' : full ? 'Plna' : g.started ? 'Zacata' : 'Vstup';
           return (
             <div
               key={g.gid}
@@ -35,10 +63,12 @@ export default function GameList() {
               </div>
               <button
                 disabled={unavailable}
-                onClick={() => setModal({ mode: 'join', gid: g.gid })}
-                className="px-4 py-1.5 rounded-lg text-sm font-semibold bg-blue-600 hover:bg-blue-500 disabled:opacity-40 disabled:cursor-default"
+                onClick={() => (canResume ? emit.rejoinGame(g.gid) : emit.registerPlayer(g.gid))}
+                className={`px-4 py-1.5 rounded-lg text-sm font-semibold disabled:opacity-40 disabled:cursor-default ${
+                  canResume ? 'bg-green-700 hover:bg-green-600' : 'bg-blue-600 hover:bg-blue-500'
+                }`}
               >
-                {full ? 'Plna' : g.started ? 'Zacata' : 'Vstup'}
+                {label}
               </button>
             </div>
           );
@@ -46,8 +76,8 @@ export default function GameList() {
       </div>
 
       <button
-        onClick={() => setModal({ mode: 'create' })}
-        className="w-full py-3 rounded-xl bg-green-700 hover:bg-green-600 font-bold text-lg"
+        onClick={() => setShowCreate(true)}
+        className="w-full py-3 rounded-xl bg-green-700 hover:bg-green-600 font-bold text-lg mb-3"
       >
         + Vytvorit novu hru
       </button>
@@ -61,13 +91,7 @@ export default function GameList() {
 
       {showRules && <RulesModal onClose={() => setShowRules(false)} />}
 
-      {modal && (
-        <NameModal
-          mode={modal.mode}
-          gid={modal.mode === 'join' ? modal.gid : undefined}
-          onClose={() => setModal(null)}
-        />
-      )}
+      {showCreate && <NameModal onClose={() => setShowCreate(false)} />}
     </div>
   );
 }