Merge: Mehr-Button beschriften

CHANGELOG.md

@@ -14,7 +14,7 @@ die Versionierung [Semantic Versioning](https://semver.org/lang/de/).
   Lego-Nummer, von Hand).
 - **„Mehr" statt Konto-Menü und Verwaltungsreitern**: Konto, Design,
   Sammler, Einladungen, Erinnerungen, Hersteller, Themen, Standorte und
-  Export/Import als Kacheln in Gruppen, oben rechts hinter den Initialen.
+  Export/Import als Kacheln in Gruppen, hinter dem Button „Mehr" oben rechts.
 - **„Für wen?" in der Kopfzeile**: Bei mehreren Sammlern wird das Kind einmal
   oben gewählt und gilt für Startseite, Katalog und Sammlung. Jedes Gerät
   merkt sich die Wahl; ein `?sammler=` im Link hat weiterhin Vorrang.

QUICKSTART.md

@@ -144,7 +144,7 @@ tut.
 
 ## 7. Passkey hinterlegen
 
-Unter **Mehr → Konto & Passkeys → Passkey hinzufügen** (das Kästchen mit deinen Initialen oben rechts). Ab dann meldest du dich per
+Unter **Mehr → Konto & Passkeys → Passkey hinzufügen** (der Button „Mehr" oben rechts). Ab dann meldest du dich per
 Fingerabdruck, Gesichtserkennung oder Geräte-PIN an. Für jedes Gerät ein
 eigener Passkey – Handy, Tablet, Laptop.
 

docs/ANLEITUNG.md

@@ -73,8 +73,8 @@ scannen, aus einem Link übernehmen, Lego-Nummer holen oder von Hand eintragen.
 
 ![Die Mehr-Seite](bilder/27-mehr.png)
 
-Alles, was man nicht täglich braucht, liegt hinter dem Kästchen mit deinen
+Alles, was man nicht täglich braucht, liegt hinter dem Button
-Initialen oben rechts – der Seite **Mehr**: Konto und Passkeys, Design,
+**„Mehr"** oben rechts: Konto und Passkeys, Design,
 Sammler, Einladungen, Erinnerungen, Hersteller, Themen, Standorte sowie
 Export und Import. Was nur der Administrator darf, sehen Mitglieder dort gar
 nicht erst.

src/components/layout/app-header.tsx

@@ -1,16 +1,11 @@
 import { Suspense } from 'react';
 import Link from 'next/link';
+import { Menu } from 'lucide-react';
 import { BrickLogo } from '@/components/brick/logo';
 import { DesktopNav } from './bottom-nav';
 import { CollectorSwitch, type CollectorOption } from './collector-switch';
 import type { SessionUser } from '@/lib/session';
 
-function initials(name: string): string {
-  const parts = name.trim().split(/\s+/);
-  const letters = (parts[0]?.[0] ?? '') + (parts.length > 1 ? (parts.at(-1)?.[0] ?? '') : '');
-  return letters.toUpperCase() || '?';
-}
-
 export function AppHeader({
   user,
   collectors,
@@ -35,13 +30,14 @@ export function AppHeader({
         <div className="flex-1" />
         <DesktopNav legoImport={legoImport} />
         {/* Account, design and master data: everything that is not daily use. */}
+        {/* Labelled on purpose: an initials-only box was not recognisable. */}
         <Link
           href="/mehr"
-          aria-label="Mehr: Konto, Design und Verwaltung"
+          title={`Mehr: Konto (${user.name}), Design und Verwaltung`}
-          title="Mehr"
+          className="flex h-10 items-center gap-2 rounded-[calc(var(--radius)*0.7)] border-[length:max(1px,var(--edge-w))] border-edge bg-card px-3 text-sm font-bold shadow-(--lift-sm) outline-none focus-visible:ring-3 focus-visible:ring-ring/50"
-          className="flex size-10 items-center justify-center rounded-[calc(var(--radius)*0.7)] border-[length:max(1px,var(--edge-w))] border-edge bg-card text-sm font-bold shadow-(--lift-sm) outline-none focus-visible:ring-3 focus-visible:ring-ring/50"
         >
-          {initials(user.name)}
+          <Menu className="size-5" aria-hidden />
+          Mehr
         </Link>
       </div>