feat: das Konto zieht hinter den Namen, und die Ansicht merkt sich

DAS KONTO WAR EIN EIGENER REITER -- gleichrangig neben Galerie und Verlauf,
obwohl man sein Passwort zweimal im Jahr aendert und die Galerie taeglich
oeffnet. Jetzt haengt es hinter dem eigenen Namen oben rechts, zusammen mit dem
Abmelden. Das ist der Platz, an dem jeder danach sucht.

Der Pfad /konto BLEIBT bestehen: ein Lesezeichen darauf soll nicht ins Leere
fuehren, nur weil der Reiter verschwunden ist. Dafuer gibt es jetzt eine
zweite, kleine Liste "versteckt" neben den Reitern -- Seiten mit Adresse, aber
ohne Knopf.

Das Menue schliesst bei Klick daneben und bei Escape. Ein Menue, das offen
bleibt, bis man genau den Knopf wieder trifft, steht im Weg.

DIE ANSICHT MERKT SICH. Seitengroesse, Sortierung und Richtung in der Galerie,
Seitengroesse im Verlauf: wer 120 pro Seite einstellt, meint das dauerhaft und
nicht bis zum naechsten F5. Der Auffrisch-Schalter tat das schon von Hand und
geht jetzt denselben Weg.

BEWUSST NICHT gemerkt werden Filter -- Ordner, Suche, Medienart. Ein gemerkter
Filter fuehrt zu der Frage "warum sehe ich nichts", und die Antwort steht dann
in einer Leiste, auf die niemand schaut, weil er sie nicht selbst gesetzt hat.
Was die Ansicht formt, wird gemerkt; was die Menge einschraenkt, nicht.

localStorage kann werfen (privates Fenster, voller Speicher). Dann verhaelt
sich der Haken wie ein gewoehnlicher Zustand, statt die Seite mitzureissen.

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

server/ui/src/App.tsx

@@ -6,12 +6,10 @@ import {
     History,
     Images,
     KeyRound,
-    LogOut,
     PieChart,
     Settings,
-    UserCog,
 } from 'lucide-react'
-import { run, useStore } from './store'
+import { useStore } from './store'
 import { Anmelden } from './pages/Anmelden'
 import { Start } from './pages/Start'
 import { Galerie } from './pages/Galerie'
@@ -23,7 +21,7 @@ import { Verlauf } from './pages/Verlauf'
 import { Api } from './pages/Api'
 import { Meldungen } from './components/Meldungen'
 import { gehZu, usePfad } from './router'
-import { Avatar } from './components/Avatar'
+import { Kontomenue } from './components/Kontomenue'
 
 /** Die Breite des Inhalts — an EINER Stelle.
  *
@@ -41,10 +39,14 @@ const seiten = [
     { pfad: '/speicher', name: 'Speicher', kind: PieChart, Inhalt: Speicher },
     { pfad: '/tokens', name: 'Token', kind: KeyRound, Inhalt: Tokens },
     { pfad: '/api', name: 'API', kind: Code2, Inhalt: Api },
-    { pfad: '/konto', name: 'Konto', kind: UserCog, Inhalt: Konto },
     { pfad: '/einstellungen', name: 'Einstellungen', kind: Settings, Inhalt: Einstellungen },
 ] as const
 
+/** Seiten OHNE Reiter. Sie sind ueber die Adresse und ueber das Kontomenue
+ *  erreichbar -- ein Lesezeichen auf /konto soll nicht ins Leere fuehren, nur
+ *  weil der Reiter verschwunden ist. */
+const versteckt = [{ pfad: '/konto', Inhalt: Konto }] as const
+
 export function App() {
     // Einzeln ausgewählt und nicht als ganzer Laden: `useStore()` ohne
     // Auswahlfunktion abonniert ALLES, und dann zeichnet jede Meldung das
@@ -52,7 +54,6 @@ export function App() {
     const user = useStore((s) => s.user)
     const checking = useStore((s) => s.checking)
     const checkSession = useStore((s) => s.checkSession)
-    const logout = useStore((s) => s.logout)
     const pfad = usePfad()
 
     useEffect(() => {
@@ -80,8 +81,9 @@ export function App() {
         )
     }
 
+    const ohneReiter = versteckt.find((s) => s.pfad === pfad)
     const aktiv = seiten.find((s) => s.pfad === pfad) ?? seiten[0]
-    const Inhalt = aktiv.Inhalt
+    const Inhalt = ohneReiter ? ohneReiter.Inhalt : aktiv.Inhalt
 
     return (
         <div className="flex min-h-full flex-col">
@@ -124,21 +126,8 @@ export function App() {
                         })}
                     </nav>
 
-                    <div className="flex items-center gap-2">
-                        <Avatar name={user.username} url={user.avatar} groesse={26} />
-                        <span className="hidden text-sm text-schrift-leise sm:inline">
-                            {user.username}
-                        </span>
-                        <button
-                            onClick={() => void run(logout, 'Abgemeldet.')}
-                            className="flex items-center gap-1.5 rounded-md px-2.5 py-1.5 text-sm
-                                       text-schrift-leise hover:text-schrift"
-                            aria-label="Abmelden"
-                        >
-                            <LogOut size={15} />
-                            <span className="hidden md:inline">Abmelden</span>
-                        </button>
-                    </div>
+                    <Kontomenue />
+
                 </div>
             </header>