Konto: echter Name jetzt getrennt vom optionalen Benutzernamen (Spitzname)

Bisher gab es nur ein "Benutzername"-Feld, das überall (Begrüßung, Header,
Rezensionen) angezeigt wurde. Jetzt gibt es zwei getrennte Felder: einen
festen "Name" (Pflichtangabe, z.B. für Bestellungen) und einen optionalen
"Benutzername (Spitzname)" als Bonus, falls man lieber mit einem Spitznamen
statt dem echten Namen angezeigt werden möchte.

Überall, wo bisher nur der Benutzername angezeigt wurde (Header-Konto-Menü,
Begrüßung im Dashboard, Rezensions-Autorenname, "angemeldet als"-Hinweis),
gilt jetzt: Spitzname bevorzugt, sonst echter Name als Rückfalloption
(neue anzeigeName()-Hilfsfunktion in scripts/account.ts).

Co-Authored-By: Claude Sonnet 5 <[email protected]>

src/pages/konto/angemeldet.astro

@@ -174,6 +174,17 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
           </div>
         </div>
 
+        {/* Fester Pflicht-Name (z.B. für Bestellungen/Lieferadresse) — getrennt vom optionalen
+            Benutzernamen weiter unten, der nur ein Spitzname-Bonus ist. */}
+        <div class="profile-field">
+          <label for="profile-name">{t.accountDash.profileName}</label>
+          <div class="profile-field-row">
+            <input type="text" id="profile-name" maxlength="60" />
+            <button type="button" class="btn btn-primary btn-sm" id="profile-name-save">{t.accountDash.nameSave}</button>
+          </div>
+          <span class="small" id="profile-name-status" style="display:none; color: var(--c-accent);">{t.accountDash.nameSaved}</span>
+        </div>
+
         <div class="profile-field">
           <label for="profile-username">{t.accountDash.usernameLabel}</label>
           <div class="profile-field-row">
@@ -181,6 +192,7 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
             <button type="button" class="btn btn-primary btn-sm" id="profile-username-save">{t.accountDash.usernameSave}</button>
           </div>
           <span class="small" id="profile-username-status" style="display:none; color: var(--c-accent);">{t.accountDash.usernameSaved}</span>
+          <span class="small" style="display:block; color: var(--c-text-muted); margin-top:0.3em;">{t.accountDash.usernameHint}</span>
         </div>
 
         <table class="specs">
@@ -198,7 +210,7 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
   window.__accountDashVars = { loginPath, fallbackName, greetingTemplate, reviewedBadgeText };
 </script>
 <script>
-  import { getAccount, isLoggedIn, logout, setUsername, setPhoto, hatBestellungBewertet } from "../../scripts/account";
+  import { getAccount, isLoggedIn, logout, setName, setUsername, setPhoto, hatBestellungBewertet, anzeigeName } from "../../scripts/account";
   const { loginPath, fallbackName, greetingTemplate, reviewedBadgeText } = (window as any).__accountDashVars;
 
   // Zugriffsschutz: diese Seite ist nur für angemeldete Kund:innen gedacht. Es gibt noch kein
@@ -219,13 +231,15 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
     function renderProfil() {
       const a = getAccount();
       const greetingEl = document.getElementById("dash-greeting");
-      if (greetingEl) greetingEl.textContent = greetingTemplate.replace("{name}", a.username || fallbackName);
+      if (greetingEl) greetingEl.textContent = greetingTemplate.replace("{name}", anzeigeName(a) || fallbackName);
       const emailEl = document.getElementById("profile-email");
       if (emailEl) emailEl.textContent = a.email || "–";
+      const nameInput = document.getElementById("profile-name") as HTMLInputElement | null;
+      if (nameInput && document.activeElement !== nameInput) nameInput.value = a.name;
       const usernameInput = document.getElementById("profile-username") as HTMLInputElement | null;
       if (usernameInput && document.activeElement !== usernameInput) usernameInput.value = a.username;
 
-      const { bg, text } = avatarHtml(a.username, a.photo);
+      const { bg, text } = avatarHtml(anzeigeName(a), a.photo);
       [document.getElementById("dash-avatar"), document.getElementById("profile-avatar")].forEach((el) => {
         if (!el) return;
         el.style.backgroundImage = bg;
@@ -235,6 +249,19 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
     renderProfil();
     window.addEventListener("account:changed", renderProfil);
 
+    // Echter Name ändern (fest, Pflichtfeld)
+    const nameSaveBtn = document.getElementById("profile-name-save");
+    const nameInputEl = document.getElementById("profile-name") as HTMLInputElement | null;
+    const nameStatus = document.getElementById("profile-name-status");
+    nameSaveBtn?.addEventListener("click", () => {
+      if (!nameInputEl) return;
+      setName(nameInputEl.value);
+      if (nameStatus) {
+        nameStatus.style.display = "inline";
+        setTimeout(() => { nameStatus.style.display = "none"; }, 1800);
+      }
+    });
+
     // Benutzername ändern
     const saveBtn = document.getElementById("profile-username-save");
     const usernameInput = document.getElementById("profile-username") as HTMLInputElement | null;