Einstellungen hat jeder, Verwaltung nicht

Die Seite hiess „Verwaltung" und war für alle anderen gar nicht
erreichbar — „Meine Sprache" lag dadurch hinter einer Tür, die den meisten
verschlossen ist. Jetzt heisst sie **Einstellungen**, steht jedem offen und
hat zwei beschriftete Gruppen: oben, was einem selbst gehört (Mein Konto,
Geschaut), darunter — nur für Administratoren — **Verwaltung**. Die
Überschrift ist hier die halbe Aussage: sie sagt ohne weiteren Satz, wem
der untere Teil gehört.

In der Hauptleiste steht der Eintrag jetzt unten, ohne Gruppenüberschrift.
Eine Überschrift über einem einzigen Eintrag ist eine Überschrift über
nichts, und am Fuss sucht man Einstellungen ohnehin. `#/profil` und
`#/verwaltung/…` leiten weiter; ein Lesezeichen merkt davon nichts.

**Ein kurzes Menü am Bild.** Erst meldete der Klick ab — ohne Rückfrage.
Dann führte er auf die eigene Seite, und zum Abmelden musste man erst
dorthin. Beides sind zwei Punkte; ein Menü mit zwei Punkten ist ehrlicher
als eine Tür, hinter der eine zweite liegt.

**Und das Profilbild lässt sich zuschneiden.** Ein Profilbild ist rund,
was hochgeladen wird selten quadratisch — den Ausschnitt dem Browser zu
überlassen hiesse: mittig, und das trifft bei einem Porträt den Hals. Der
Dialog zeigt den runden Ausschnitt, man zieht und vergrössert, und
hochgeladen wird genau das: ein Quadrat von 512 Pixeln. Gemessen, es kommt
auch so an.

**Dazu die Spielerleiste.** Beide Knopfgruppen durften schrumpfen, ihre
Knöpfe aber nicht — wird es eng, steht der äusserste halb hinter dem
Fensterrand. Rechts sind es nur Knöpfe, da gibt es nichts nachzugeben;
links schon. Dazu seitlich `env(safe-area-inset-*)`, damit auf einem Gerät
mit runden Ecken nichts darunter liegt. Gemessen: vorher riss es ab 420
Pixeln, jetzt bis 320 nicht mehr.

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

web/app/src/main.ts

@@ -1,6 +1,6 @@
 import './style.css';
 import {
-  systemauskunft, angemeldet, istAdmin, sitzung, bibliotheken,
+  systemauskunft, angemeldet, istAdmin, abmelden, sitzung, bibliotheken,
   reihenfolgeSetzen, bildAdresse, kontoAbgleichen,
   type Hinweis, type Bibliothek,
 } from './api';
@@ -11,10 +11,11 @@ import { anmeldung } from './views/login';
 import { startseite } from './views/home';
 import { mediathek } from './views/library';
 import { detailseite } from './views/detail';
-import { verwaltung, alsBereich } from './views/verwaltung';
+import { einstellungenseite, alsBereich } from './views/einstellungen';
 import { suchseite } from './views/search';
-import { profilseite } from './views/profil';
 import { esc, meldung } from './util';
+import { menueAnZiel } from './menue';
+import { nachfragen } from './dialog';
 
 const anmeldeflaeche = document.getElementById('login')!;
 const kopfleiste = document.getElementById('topbar')!;
@@ -171,9 +172,32 @@ function kopfleisteBauen(): void {
   } else {
     konto.innerHTML = `<span class="kreis">${esc(name.slice(0, 1).toUpperCase())}</span>`;
   }
-  konto.title = `${name} — mein Profil`;
-  konto.setAttribute('aria-label', `${name} — mein Profil`);
-  konto.onclick = () => { location.hash = '#/profil'; };
+  konto.title = name;
+  konto.setAttribute('aria-label', `${name} — Konto`);
+
+  // **Ein kurzes Menü, kein Sprung.** Erst meldete der Klick ab — ohne
+  // Rückfrage. Dann führte er auf die eigene Seite, und zum Abmelden musste
+  // man erst dorthin. Beides sind zwei Punkte; ein Menü mit zwei Punkten ist
+  // die ehrlichere Form als eine Tür, hinter der eine zweite liegt.
+  konto.onclick = () => menueAnZiel(konto, [
+    {
+      text: 'Einstellungen',
+      icon: 'verwaltung',
+      tun: () => { location.hash = '#/einstellungen/konto'; },
+    },
+    {
+      text: 'Abmelden',
+      icon: 'abmelden',
+      gefaehrlich: true,
+      tun: () => nachfragen({
+        titel: 'Abmelden',
+        text: `Du meldest dich als „${name}“ von diesem Gerät ab. `
+          + 'Sehstände und Favoriten bleiben auf dem Server.',
+        bestaetigen: 'Abmelden',
+        tun: async () => { abmelden(); location.reload(); },
+      }),
+    },
+  ]);
   rechts.appendChild(konto);
 
   kopfleiste.append(marke, suche, rechts);
@@ -206,7 +230,18 @@ function leisteBauen(): void {
       b.name, `#/m/${b.id}`, b.kind === 'Shows' ? 'serien' : 'filme', b.itemCount, i, liste));
   }
 
-  if (istAdmin()) { gruppe('Server'); eintrag('Verwaltung', '#/verwaltung', 'verwaltung'); }
+  // **Für jeden, nicht nur für Administratoren.** Hier stand „Verwaltung",
+  // und die sah nur, wer Rechte hat — mitsamt „Meine Sprache", die jedem
+  // gehört. Was dem Server gehört, steht jetzt als eigene Gruppe *in* den
+  // Einstellungen und bleibt Administratoren vorbehalten.
+  //
+  // **Unten, ohne Überschrift.** Eine Gruppenüberschrift über einem einzigen
+  // Eintrag ist eine Überschrift über nichts; am Fuss der Leiste steht er
+  // dort, wo man Einstellungen sucht.
+  const fuss = document.createElement('div');
+  fuss.className = 'nav-fuss';
+  leiste.appendChild(fuss);
+  eintrag('Einstellungen', '#/einstellungen', 'verwaltung', undefined, undefined, fuss);
 
   /** Eine Gruppenüberschrift — bei den Mediatheken mit dem Stift daneben.
    *
@@ -423,13 +458,17 @@ function zeichnen(): void {
   } else if (teile[0] === 'suche' && kennung) {
     einhaengen(weg, inhalt, () => suchseite(decodeURIComponent(kennung), oeffnen),
       { merken: true });
-  } else if (teile[0] === 'profil') {
-    // Nicht gemerkt: das Bild kann sich ändern, und ein Profil ist billig.
-    einhaengen(weg, inhalt, () => profilseite());
-  } else if (teile[0] === 'verwaltung' && istAdmin()) {
-    // **Die Verwaltung auch nicht** — sie zeigt Laufendes. Ihr Takt hängt am
-    // Signal und hört auf, sobald man weggeht.
-    einhaengen(weg, inhalt, signal => verwaltung(alsBereich(teile[1]), bekannt => {
+  } else if (teile[0] === 'profil' || teile[0] === 'verwaltung') {
+    // **Die alten Adressen bleiben gültig.** Beides ist in „Einstellungen"
+    // aufgegangen; ein Lesezeichen soll davon nichts merken.
+    location.hash = teile[0] === 'profil'
+      ? '#/einstellungen/konto'
+      : `#/einstellungen/${teile[1] ?? 'uebersicht'}`;
+    return;
+  } else if (teile[0] === 'einstellungen') {
+    // **Nicht gemerkt** — sie zeigt Laufendes. Ihr Takt hängt am Signal und
+    // hört auf, sobald man weggeht.
+    einhaengen(weg, inhalt, signal => einstellungenseite(alsBereich(teile[1], istAdmin()), bekannt => {
       // Gemerkte Ansichten wegwerfen: der Bestand hat sich geändert.
       // Die Seitenleiste bekommt neue Zahlen — die Seite selbst bleibt.
       vergessen();