Konto-Dashboard: kein Tab beim Laden aktiv, "Meine Daten" jetzt auch ein Tab

Bisher war "Bestellungen" beim Öffnen der Seite automatisch aktiv. Jetzt
ist standardmäßig KEIN Knopf gedrückt — man muss selbst auswählen, was man
sehen möchte. Solange nichts angeklickt ist, steht direkt "Zuletzt
angesehen" da. "Meine Daten" ist jetzt ein vierter, gleichwertiger Tab-
Knopf (👤, goldener Akzent) statt permanent sichtbar — genau wie
Bestellungen/Wunschliste/Offene Sendungen erscheint das Profilformular
erst nach Klick.

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

src/i18n/ui.ts

@@ -224,7 +224,7 @@ export const ui = {
       notLoggedIn: "Du bist nicht angemeldet — du wirst zur Anmeldung weitergeleitet …",
       logout: "Abmelden",
       navLabel: "Kontobereich-Navigation",
-      statOrders: "Bestellungen", statWishlist: "Wunschliste", statOpen: "Offene Sendungen",
+      statOrders: "Bestellungen", statWishlist: "Wunschliste", statOpen: "Offene Sendungen", statData: "Meine Daten",
       noOpenOrders: "Aktuell keine offenen Sendungen — alle Bestellungen sind schon angekommen. 🎉",
       ordersTitle: "📦 Meine Bestellungen",
       orderNo: "Bestellung", orderDate: "Bestellt am", orderTotal: "Gesamt", orderItems: "Artikel",
@@ -457,7 +457,7 @@ export const ui = {
       notLoggedIn: "You're not signed in — redirecting you to sign in …",
       logout: "Sign out",
       navLabel: "Account section navigation",
-      statOrders: "Orders", statWishlist: "Wishlist", statOpen: "Open shipments",
+      statOrders: "Orders", statWishlist: "Wishlist", statOpen: "Open shipments", statData: "My details",
       noOpenOrders: "No open shipments right now — every order has already arrived. 🎉",
       ordersTitle: "📦 My orders",
       orderNo: "Order", orderDate: "Ordered on", orderTotal: "Total", orderItems: "Items",
@@ -690,7 +690,7 @@ export const ui = {
       notLoggedIn: "Du bisch nid aagmäldet — du wirsch zur Aamäldig wytergleitet …",
       logout: "Abmälde",
       navLabel: "Kontobereich-Navigation",
-      statOrders: "Bstellige", statWishlist: "Wunschlischte", statOpen: "Offni Sändige",
+      statOrders: "Bstellige", statWishlist: "Wunschlischte", statOpen: "Offni Sändige", statData: "Mini Date",
       noOpenOrders: "Momentan kei offni Sändige — alli Bstellige sind scho aacho. 🎉",
       ordersTitle: "📦 Mini Bstellige",
       orderNo: "Bstellig", orderDate: "Bstellt am", orderTotal: "Total", orderItems: "Artikel",
@@ -923,7 +923,7 @@ export const ui = {
       notLoggedIn: "Vous n'êtes pas connecté(e) — redirection vers la connexion …",
       logout: "Se déconnecter",
       navLabel: "Navigation de l'espace client",
-      statOrders: "Commandes", statWishlist: "Liste de souhaits", statOpen: "Envois en cours",
+      statOrders: "Commandes", statWishlist: "Liste de souhaits", statOpen: "Envois en cours", statData: "Mes données",
       noOpenOrders: "Aucun envoi en cours pour le moment — toutes les commandes sont déjà arrivées. 🎉",
       ordersTitle: "📦 Mes commandes",
       orderNo: "Commande", orderDate: "Commandé le", orderTotal: "Total", orderItems: "Articles",

src/pages/ch/konto/angemeldet.astro

@@ -95,6 +95,10 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
           <span class="account-nav-value">{offeneSendungen}</span>
           <span class="account-nav-label">{t.accountDash.statOpen}</span>
         </button>
+        <button type="button" class="account-nav-item account-nav-data" data-tab="daten">
+          <span class="account-nav-icon" aria-hidden="true">👤</span>
+          <span class="account-nav-label">{t.accountDash.statData}</span>
+        </button>
       </nav>
     </div>
   </section>
@@ -157,7 +161,7 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
   </section>
 
   {zuletztAngesehen.length > 0 && (
-    <section class="section-tight">
+    <section class="section-tight" id="zuletzt-angesehen">
       <div class="container">
         <h2>{t.accountDash.recentTitle}</h2>
         <div class="grid grid-3">{zuletztAngesehen.map((p) => <ProductCard product={p} lang={lang} />)}</div>
@@ -165,7 +169,7 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
     </section>
   )}
 
-  <section class="section-tight">
+  <section class="section-tight" id="meine-daten">
     <div class="container">
       <h2>{t.accountDash.profileTitle}</h2>
       <div class="card profile-card">
@@ -224,21 +228,37 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
   const navItems = Array.from(document.querySelectorAll(".account-nav-item")) as HTMLButtonElement[];
   const bestellungenSection = document.getElementById("bestellungen");
   const wunschlisteSection = document.getElementById("wunschliste");
+  const recentSection = document.getElementById("zuletzt-angesehen");
+  const datenSection = document.getElementById("meine-daten");
   const orderCards = Array.from(document.querySelectorAll(".order-card"));
   const emptyNote = document.getElementById("orders-empty-note");
 
-  function setActiveTab(tab: string) {
+  // Beim Laden ist noch KEIN Knopf gedrückt — solange nichts angeklickt wurde, steht direkt
+  // "Zuletzt angesehen" da, alle anderen (per Tab umschaltbaren) Bereiche bleiben versteckt.
+  function setActiveTab(tab: string | null) {
     navItems.forEach((item) => item.classList.toggle("is-active", item.dataset.tab === tab));
 
+    if (bestellungenSection) bestellungenSection.style.display = "none";
+    if (wunschlisteSection) wunschlisteSection.style.display = "none";
+    if (datenSection) datenSection.style.display = "none";
+    if (recentSection) recentSection.style.display = "none";
+
+    if (tab === null) {
+      if (recentSection) recentSection.style.display = "";
+      return;
+    }
+
     if (tab === "wunschliste") {
-      if (bestellungenSection) bestellungenSection.style.display = "none";
       if (wunschlisteSection) wunschlisteSection.style.display = "";
       return;
     }
 
-    if (bestellungenSection) bestellungenSection.style.display = "";
+    if (tab === "daten") {
-    if (wunschlisteSection) wunschlisteSection.style.display = "none";
+      if (datenSection) datenSection.style.display = "";
+      return;
+    }
 
+    if (bestellungenSection) bestellungenSection.style.display = "";
     let visibleCount = 0;
     orderCards.forEach((card) => {
       const status = OFFENE_STATUS.find((s) => card.classList.contains("order-card-" + s));
@@ -253,7 +273,7 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
     item.addEventListener("click", () => { if (item.dataset.tab) setActiveTab(item.dataset.tab); });
   });
 
-  setActiveTab("bestellungen");
+  setActiveTab(null);
 </script>
 <script>
   import { getAccount, isLoggedIn, logout, setName, setUsername, setPhoto, hatBestellungBewertet, anzeigeName } from "../../../scripts/account";

src/pages/en/konto/angemeldet.astro

@@ -95,6 +95,10 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
           <span class="account-nav-value">{offeneSendungen}</span>
           <span class="account-nav-label">{t.accountDash.statOpen}</span>
         </button>
+        <button type="button" class="account-nav-item account-nav-data" data-tab="daten">
+          <span class="account-nav-icon" aria-hidden="true">👤</span>
+          <span class="account-nav-label">{t.accountDash.statData}</span>
+        </button>
       </nav>
     </div>
   </section>
@@ -157,7 +161,7 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
   </section>
 
   {zuletztAngesehen.length > 0 && (
-    <section class="section-tight">
+    <section class="section-tight" id="zuletzt-angesehen">
       <div class="container">
         <h2>{t.accountDash.recentTitle}</h2>
         <div class="grid grid-3">{zuletztAngesehen.map((p) => <ProductCard product={p} lang={lang} />)}</div>
@@ -165,7 +169,7 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
     </section>
   )}
 
-  <section class="section-tight">
+  <section class="section-tight" id="meine-daten">
     <div class="container">
       <h2>{t.accountDash.profileTitle}</h2>
       <div class="card profile-card">
@@ -224,21 +228,37 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
   const navItems = Array.from(document.querySelectorAll(".account-nav-item")) as HTMLButtonElement[];
   const bestellungenSection = document.getElementById("bestellungen");
   const wunschlisteSection = document.getElementById("wunschliste");
+  const recentSection = document.getElementById("zuletzt-angesehen");
+  const datenSection = document.getElementById("meine-daten");
   const orderCards = Array.from(document.querySelectorAll(".order-card"));
   const emptyNote = document.getElementById("orders-empty-note");
 
-  function setActiveTab(tab: string) {
+  // Beim Laden ist noch KEIN Knopf gedrückt — solange nichts angeklickt wurde, steht direkt
+  // "Zuletzt angesehen" da, alle anderen (per Tab umschaltbaren) Bereiche bleiben versteckt.
+  function setActiveTab(tab: string | null) {
     navItems.forEach((item) => item.classList.toggle("is-active", item.dataset.tab === tab));
 
+    if (bestellungenSection) bestellungenSection.style.display = "none";
+    if (wunschlisteSection) wunschlisteSection.style.display = "none";
+    if (datenSection) datenSection.style.display = "none";
+    if (recentSection) recentSection.style.display = "none";
+
+    if (tab === null) {
+      if (recentSection) recentSection.style.display = "";
+      return;
+    }
+
     if (tab === "wunschliste") {
-      if (bestellungenSection) bestellungenSection.style.display = "none";
       if (wunschlisteSection) wunschlisteSection.style.display = "";
       return;
     }
 
-    if (bestellungenSection) bestellungenSection.style.display = "";
+    if (tab === "daten") {
-    if (wunschlisteSection) wunschlisteSection.style.display = "none";
+      if (datenSection) datenSection.style.display = "";
+      return;
+    }
 
+    if (bestellungenSection) bestellungenSection.style.display = "";
     let visibleCount = 0;
     orderCards.forEach((card) => {
       const status = OFFENE_STATUS.find((s) => card.classList.contains("order-card-" + s));
@@ -253,7 +273,7 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
     item.addEventListener("click", () => { if (item.dataset.tab) setActiveTab(item.dataset.tab); });
   });
 
-  setActiveTab("bestellungen");
+  setActiveTab(null);
 </script>
 <script>
   import { getAccount, isLoggedIn, logout, setName, setUsername, setPhoto, hatBestellungBewertet, anzeigeName } from "../../../scripts/account";

src/pages/fr/konto/angemeldet.astro

@@ -95,6 +95,10 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
           <span class="account-nav-value">{offeneSendungen}</span>
           <span class="account-nav-label">{t.accountDash.statOpen}</span>
         </button>
+        <button type="button" class="account-nav-item account-nav-data" data-tab="daten">
+          <span class="account-nav-icon" aria-hidden="true">👤</span>
+          <span class="account-nav-label">{t.accountDash.statData}</span>
+        </button>
       </nav>
     </div>
   </section>
@@ -157,7 +161,7 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
   </section>
 
   {zuletztAngesehen.length > 0 && (
-    <section class="section-tight">
+    <section class="section-tight" id="zuletzt-angesehen">
       <div class="container">
         <h2>{t.accountDash.recentTitle}</h2>
         <div class="grid grid-3">{zuletztAngesehen.map((p) => <ProductCard product={p} lang={lang} />)}</div>
@@ -165,7 +169,7 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
     </section>
   )}
 
-  <section class="section-tight">
+  <section class="section-tight" id="meine-daten">
     <div class="container">
       <h2>{t.accountDash.profileTitle}</h2>
       <div class="card profile-card">
@@ -224,21 +228,37 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
   const navItems = Array.from(document.querySelectorAll(".account-nav-item")) as HTMLButtonElement[];
   const bestellungenSection = document.getElementById("bestellungen");
   const wunschlisteSection = document.getElementById("wunschliste");
+  const recentSection = document.getElementById("zuletzt-angesehen");
+  const datenSection = document.getElementById("meine-daten");
   const orderCards = Array.from(document.querySelectorAll(".order-card"));
   const emptyNote = document.getElementById("orders-empty-note");
 
-  function setActiveTab(tab: string) {
+  // Beim Laden ist noch KEIN Knopf gedrückt — solange nichts angeklickt wurde, steht direkt
+  // "Zuletzt angesehen" da, alle anderen (per Tab umschaltbaren) Bereiche bleiben versteckt.
+  function setActiveTab(tab: string | null) {
     navItems.forEach((item) => item.classList.toggle("is-active", item.dataset.tab === tab));
 
+    if (bestellungenSection) bestellungenSection.style.display = "none";
+    if (wunschlisteSection) wunschlisteSection.style.display = "none";
+    if (datenSection) datenSection.style.display = "none";
+    if (recentSection) recentSection.style.display = "none";
+
+    if (tab === null) {
+      if (recentSection) recentSection.style.display = "";
+      return;
+    }
+
     if (tab === "wunschliste") {
-      if (bestellungenSection) bestellungenSection.style.display = "none";
       if (wunschlisteSection) wunschlisteSection.style.display = "";
       return;
     }
 
-    if (bestellungenSection) bestellungenSection.style.display = "";
+    if (tab === "daten") {
-    if (wunschlisteSection) wunschlisteSection.style.display = "none";
+      if (datenSection) datenSection.style.display = "";
+      return;
+    }
 
+    if (bestellungenSection) bestellungenSection.style.display = "";
     let visibleCount = 0;
     orderCards.forEach((card) => {
       const status = OFFENE_STATUS.find((s) => card.classList.contains("order-card-" + s));
@@ -253,7 +273,7 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
     item.addEventListener("click", () => { if (item.dataset.tab) setActiveTab(item.dataset.tab); });
   });
 
-  setActiveTab("bestellungen");
+  setActiveTab(null);
 </script>
 <script>
   import { getAccount, isLoggedIn, logout, setName, setUsername, setPhoto, hatBestellungBewertet, anzeigeName } from "../../../scripts/account";

src/pages/konto/angemeldet.astro

@@ -95,6 +95,10 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
           <span class="account-nav-value">{offeneSendungen}</span>
           <span class="account-nav-label">{t.accountDash.statOpen}</span>
         </button>
+        <button type="button" class="account-nav-item account-nav-data" data-tab="daten">
+          <span class="account-nav-icon" aria-hidden="true">👤</span>
+          <span class="account-nav-label">{t.accountDash.statData}</span>
+        </button>
       </nav>
     </div>
   </section>
@@ -157,7 +161,7 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
   </section>
 
   {zuletztAngesehen.length > 0 && (
-    <section class="section-tight">
+    <section class="section-tight" id="zuletzt-angesehen">
       <div class="container">
         <h2>{t.accountDash.recentTitle}</h2>
         <div class="grid grid-3">{zuletztAngesehen.map((p) => <ProductCard product={p} lang={lang} />)}</div>
@@ -165,7 +169,7 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
     </section>
   )}
 
-  <section class="section-tight">
+  <section class="section-tight" id="meine-daten">
     <div class="container">
       <h2>{t.accountDash.profileTitle}</h2>
       <div class="card profile-card">
@@ -224,21 +228,37 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
   const navItems = Array.from(document.querySelectorAll(".account-nav-item")) as HTMLButtonElement[];
   const bestellungenSection = document.getElementById("bestellungen");
   const wunschlisteSection = document.getElementById("wunschliste");
+  const recentSection = document.getElementById("zuletzt-angesehen");
+  const datenSection = document.getElementById("meine-daten");
   const orderCards = Array.from(document.querySelectorAll(".order-card"));
   const emptyNote = document.getElementById("orders-empty-note");
 
-  function setActiveTab(tab: string) {
+  // Beim Laden ist noch KEIN Knopf gedrückt — solange nichts angeklickt wurde, steht direkt
+  // "Zuletzt angesehen" da, alle anderen (per Tab umschaltbaren) Bereiche bleiben versteckt.
+  function setActiveTab(tab: string | null) {
     navItems.forEach((item) => item.classList.toggle("is-active", item.dataset.tab === tab));
 
+    if (bestellungenSection) bestellungenSection.style.display = "none";
+    if (wunschlisteSection) wunschlisteSection.style.display = "none";
+    if (datenSection) datenSection.style.display = "none";
+    if (recentSection) recentSection.style.display = "none";
+
+    if (tab === null) {
+      if (recentSection) recentSection.style.display = "";
+      return;
+    }
+
     if (tab === "wunschliste") {
-      if (bestellungenSection) bestellungenSection.style.display = "none";
       if (wunschlisteSection) wunschlisteSection.style.display = "";
       return;
     }
 
-    if (bestellungenSection) bestellungenSection.style.display = "";
+    if (tab === "daten") {
-    if (wunschlisteSection) wunschlisteSection.style.display = "none";
+      if (datenSection) datenSection.style.display = "";
+      return;
+    }
 
+    if (bestellungenSection) bestellungenSection.style.display = "";
     let visibleCount = 0;
     orderCards.forEach((card) => {
       const status = OFFENE_STATUS.find((s) => card.classList.contains("order-card-" + s));
@@ -253,7 +273,7 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
     item.addEventListener("click", () => { if (item.dataset.tab) setActiveTab(item.dataset.tab); });
   });
 
-  setActiveTab("bestellungen");
+  setActiveTab(null);
 </script>
 <script>
   import { getAccount, isLoggedIn, logout, setName, setUsername, setPhoto, hatBestellungBewertet, anzeigeName } from "../../scripts/account";

src/styles/global.css

@@ -1388,6 +1388,7 @@ a:focus-visible, button:focus-visible {
 .account-nav-orders { --nav-color: #9b7fd6; }
 .account-nav-wishlist { --nav-color: var(--c-sale); }
 .account-nav-open { --nav-color: var(--c-accent); }
+.account-nav-data { --nav-color: #e3b23c; }
 @media (max-width: 560px) {
   .account-nav { flex-direction: column; }
   .account-nav-item + .account-nav-item { border-left: none; border-top: 1px solid rgba(244, 241, 247, 0.12); }