Konto: "Meine Bestellungen"-Tab zeigt jetzt nur angekommene Bestellungen

Bisher zeigte der Bestellungen-Tab ALLE Bestellungen (Überschneidung mit
"Offene Sendungen"). Jetzt ist es eine echte Trennung: "Bestellungen"
zeigt nur bereits angekommene/abgeschlossene, "Offene Sendungen" nur die
noch nicht angekommenen. Eigene Leermeldung, falls noch keine Bestellung
angekommen ist.

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

src/i18n/ui.ts

@@ -226,6 +226,7 @@ export const ui = {
       navLabel: "Kontobereich-Navigation",
       statOrders: "Bestellungen", statWishlist: "Wunschliste", statOpen: "Offene Sendungen", statData: "Meine Daten",
       noOpenOrders: "Aktuell keine offenen Sendungen — alle Bestellungen sind schon angekommen. 🎉",
+      noArrivedOrders: "Noch keine angekommenen Bestellungen — hier erscheinen deine Bestellungen, sobald sie geliefert wurden.",
       ordersTitle: "📦 Meine Bestellungen",
       orderNo: "Bestellung", orderDate: "Bestellt am", orderTotal: "Gesamt", orderItems: "Artikel",
       trackingLabel: "Sendungsverfolgung", trackingBtn: "Sendung verfolgen →", invoiceBtn: "Rechnung (PDF)", reorderBtn: "Nochmal bestellen",
@@ -459,6 +460,7 @@ export const ui = {
       navLabel: "Account section navigation",
       statOrders: "Orders", statWishlist: "Wishlist", statOpen: "Open shipments", statData: "My details",
       noOpenOrders: "No open shipments right now — every order has already arrived. 🎉",
+      noArrivedOrders: "No delivered orders yet — your orders will appear here once they've arrived.",
       ordersTitle: "📦 My orders",
       orderNo: "Order", orderDate: "Ordered on", orderTotal: "Total", orderItems: "Items",
       trackingLabel: "Tracking", trackingBtn: "Track shipment →", invoiceBtn: "Invoice (PDF)", reorderBtn: "Order again",
@@ -692,6 +694,7 @@ export const ui = {
       navLabel: "Kontobereich-Navigation",
       statOrders: "Bstellige", statWishlist: "Wunschlischte", statOpen: "Offni Sändige", statData: "Mini Date",
       noOpenOrders: "Momentan kei offni Sändige — alli Bstellige sind scho aacho. 🎉",
+      noArrivedOrders: "No kei aacho Bstellige — da erschine dini Bstellige, sobald sie glifert worde sind.",
       ordersTitle: "📦 Mini Bstellige",
       orderNo: "Bstellig", orderDate: "Bstellt am", orderTotal: "Total", orderItems: "Artikel",
       trackingLabel: "Sändigsverfolgig", trackingBtn: "Sändig verfolge →", invoiceBtn: "Rächnig (PDF)", reorderBtn: "Nomal bstelle",
@@ -925,6 +928,7 @@ export const ui = {
       navLabel: "Navigation de l'espace client",
       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. 🎉",
+      noArrivedOrders: "Aucune commande livrée pour le moment — vos commandes apparaîtront ici dès qu'elles seront arrivées.",
       ordersTitle: "📦 Mes commandes",
       orderNo: "Commande", orderDate: "Commandé le", orderTotal: "Total", orderItems: "Articles",
       trackingLabel: "Suivi", trackingBtn: "Suivre l'envoi →", invoiceBtn: "Facture (PDF)", reorderBtn: "Commander à nouveau",

src/pages/ch/konto/angemeldet.astro

@@ -107,7 +107,7 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
   <section class="section-tight" id="bestellungen">
     <div class="container">
       <h2>{t.accountDash.ordersTitle}</h2>
-      <p class="small" id="orders-empty-note" style="display:none;">{t.accountDash.noOpenOrders}</p>
+      <p class="small" id="orders-empty-note" style="display:none;" data-empty-open={t.accountDash.noOpenOrders} data-empty-arrived={t.accountDash.noArrivedOrders}></p>
       <div class="order-list" id="order-list">
         {beispielBestellungen.map((b) => (
           <div class={`card order-card order-card-${b.status}`}>
@@ -217,8 +217,9 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
 </script>
 <script>
   // Schnellnavigation als echte Filter-Tabs: Klick zeigt NUR den passenden Bereich, blendet den
-  // Rest aus (statt nur hinzuspringen). "Offene Sendungen" filtert zusätzlich innerhalb von
+  // Rest aus (statt nur hinzuspringen). "Bestellungen" zeigt nur schon ANGEKOMMENE (abgeschlossene)
-  // "Meine Bestellungen" auf noch nicht abgeschlossene Bestellungen.
+  // Bestellungen, "Offene Sendungen" nur die noch nicht angekommenen — echte Trennung statt
+  // Überschneidung.
   const OFFENE_STATUS = ["bezahlt", "bearbeitung", "versandVorbereitet", "versendet"];
   const navItems = Array.from(document.querySelectorAll(".account-nav-item")) as HTMLButtonElement[];
   const bestellungenSection = document.getElementById("bestellungen");
@@ -226,7 +227,7 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
   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");
+  const emptyNote = document.getElementById("orders-empty-note") as HTMLElement | null;
 
   // 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.
@@ -257,11 +258,18 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
     let visibleCount = 0;
     orderCards.forEach((card) => {
       const status = OFFENE_STATUS.find((s) => card.classList.contains("order-card-" + s));
-      const show = tab === "bestellungen" || (tab === "offene" && !!status);
+      const show = tab === "offene" ? !!status : card.classList.contains("order-card-abgeschlossen");
       (card as HTMLElement).style.display = show ? "" : "none";
       if (show) visibleCount++;
     });
-    if (emptyNote) emptyNote.style.display = tab === "offene" && visibleCount === 0 ? "block" : "none";
+    if (emptyNote) {
+      if (visibleCount === 0 && (tab === "offene" || tab === "bestellungen")) {
+        emptyNote.textContent = tab === "offene" ? emptyNote.dataset.emptyOpen ?? "" : emptyNote.dataset.emptyArrived ?? "";
+        emptyNote.style.display = "block";
+      } else {
+        emptyNote.style.display = "none";
+      }
+    }
   }
 
   navItems.forEach((item) => {

src/pages/en/konto/angemeldet.astro

@@ -107,7 +107,7 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
   <section class="section-tight" id="bestellungen">
     <div class="container">
       <h2>{t.accountDash.ordersTitle}</h2>
-      <p class="small" id="orders-empty-note" style="display:none;">{t.accountDash.noOpenOrders}</p>
+      <p class="small" id="orders-empty-note" style="display:none;" data-empty-open={t.accountDash.noOpenOrders} data-empty-arrived={t.accountDash.noArrivedOrders}></p>
       <div class="order-list" id="order-list">
         {beispielBestellungen.map((b) => (
           <div class={`card order-card order-card-${b.status}`}>
@@ -217,8 +217,9 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
 </script>
 <script>
   // Schnellnavigation als echte Filter-Tabs: Klick zeigt NUR den passenden Bereich, blendet den
-  // Rest aus (statt nur hinzuspringen). "Offene Sendungen" filtert zusätzlich innerhalb von
+  // Rest aus (statt nur hinzuspringen). "Bestellungen" zeigt nur schon ANGEKOMMENE (abgeschlossene)
-  // "Meine Bestellungen" auf noch nicht abgeschlossene Bestellungen.
+  // Bestellungen, "Offene Sendungen" nur die noch nicht angekommenen — echte Trennung statt
+  // Überschneidung.
   const OFFENE_STATUS = ["bezahlt", "bearbeitung", "versandVorbereitet", "versendet"];
   const navItems = Array.from(document.querySelectorAll(".account-nav-item")) as HTMLButtonElement[];
   const bestellungenSection = document.getElementById("bestellungen");
@@ -226,7 +227,7 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
   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");
+  const emptyNote = document.getElementById("orders-empty-note") as HTMLElement | null;
 
   // 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.
@@ -257,11 +258,18 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
     let visibleCount = 0;
     orderCards.forEach((card) => {
       const status = OFFENE_STATUS.find((s) => card.classList.contains("order-card-" + s));
-      const show = tab === "bestellungen" || (tab === "offene" && !!status);
+      const show = tab === "offene" ? !!status : card.classList.contains("order-card-abgeschlossen");
       (card as HTMLElement).style.display = show ? "" : "none";
       if (show) visibleCount++;
     });
-    if (emptyNote) emptyNote.style.display = tab === "offene" && visibleCount === 0 ? "block" : "none";
+    if (emptyNote) {
+      if (visibleCount === 0 && (tab === "offene" || tab === "bestellungen")) {
+        emptyNote.textContent = tab === "offene" ? emptyNote.dataset.emptyOpen ?? "" : emptyNote.dataset.emptyArrived ?? "";
+        emptyNote.style.display = "block";
+      } else {
+        emptyNote.style.display = "none";
+      }
+    }
   }
 
   navItems.forEach((item) => {

src/pages/fr/konto/angemeldet.astro

@@ -107,7 +107,7 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
   <section class="section-tight" id="bestellungen">
     <div class="container">
       <h2>{t.accountDash.ordersTitle}</h2>
-      <p class="small" id="orders-empty-note" style="display:none;">{t.accountDash.noOpenOrders}</p>
+      <p class="small" id="orders-empty-note" style="display:none;" data-empty-open={t.accountDash.noOpenOrders} data-empty-arrived={t.accountDash.noArrivedOrders}></p>
       <div class="order-list" id="order-list">
         {beispielBestellungen.map((b) => (
           <div class={`card order-card order-card-${b.status}`}>
@@ -217,8 +217,9 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
 </script>
 <script>
   // Schnellnavigation als echte Filter-Tabs: Klick zeigt NUR den passenden Bereich, blendet den
-  // Rest aus (statt nur hinzuspringen). "Offene Sendungen" filtert zusätzlich innerhalb von
+  // Rest aus (statt nur hinzuspringen). "Bestellungen" zeigt nur schon ANGEKOMMENE (abgeschlossene)
-  // "Meine Bestellungen" auf noch nicht abgeschlossene Bestellungen.
+  // Bestellungen, "Offene Sendungen" nur die noch nicht angekommenen — echte Trennung statt
+  // Überschneidung.
   const OFFENE_STATUS = ["bezahlt", "bearbeitung", "versandVorbereitet", "versendet"];
   const navItems = Array.from(document.querySelectorAll(".account-nav-item")) as HTMLButtonElement[];
   const bestellungenSection = document.getElementById("bestellungen");
@@ -226,7 +227,7 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
   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");
+  const emptyNote = document.getElementById("orders-empty-note") as HTMLElement | null;
 
   // 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.
@@ -257,11 +258,18 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
     let visibleCount = 0;
     orderCards.forEach((card) => {
       const status = OFFENE_STATUS.find((s) => card.classList.contains("order-card-" + s));
-      const show = tab === "bestellungen" || (tab === "offene" && !!status);
+      const show = tab === "offene" ? !!status : card.classList.contains("order-card-abgeschlossen");
       (card as HTMLElement).style.display = show ? "" : "none";
       if (show) visibleCount++;
     });
-    if (emptyNote) emptyNote.style.display = tab === "offene" && visibleCount === 0 ? "block" : "none";
+    if (emptyNote) {
+      if (visibleCount === 0 && (tab === "offene" || tab === "bestellungen")) {
+        emptyNote.textContent = tab === "offene" ? emptyNote.dataset.emptyOpen ?? "" : emptyNote.dataset.emptyArrived ?? "";
+        emptyNote.style.display = "block";
+      } else {
+        emptyNote.style.display = "none";
+      }
+    }
   }
 
   navItems.forEach((item) => {

src/pages/konto/angemeldet.astro

@@ -107,7 +107,7 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
   <section class="section-tight" id="bestellungen">
     <div class="container">
       <h2>{t.accountDash.ordersTitle}</h2>
-      <p class="small" id="orders-empty-note" style="display:none;">{t.accountDash.noOpenOrders}</p>
+      <p class="small" id="orders-empty-note" style="display:none;" data-empty-open={t.accountDash.noOpenOrders} data-empty-arrived={t.accountDash.noArrivedOrders}></p>
       <div class="order-list" id="order-list">
         {beispielBestellungen.map((b) => (
           <div class={`card order-card order-card-${b.status}`}>
@@ -217,8 +217,9 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
 </script>
 <script>
   // Schnellnavigation als echte Filter-Tabs: Klick zeigt NUR den passenden Bereich, blendet den
-  // Rest aus (statt nur hinzuspringen). "Offene Sendungen" filtert zusätzlich innerhalb von
+  // Rest aus (statt nur hinzuspringen). "Bestellungen" zeigt nur schon ANGEKOMMENE (abgeschlossene)
-  // "Meine Bestellungen" auf noch nicht abgeschlossene Bestellungen.
+  // Bestellungen, "Offene Sendungen" nur die noch nicht angekommenen — echte Trennung statt
+  // Überschneidung.
   const OFFENE_STATUS = ["bezahlt", "bearbeitung", "versandVorbereitet", "versendet"];
   const navItems = Array.from(document.querySelectorAll(".account-nav-item")) as HTMLButtonElement[];
   const bestellungenSection = document.getElementById("bestellungen");
@@ -226,7 +227,7 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
   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");
+  const emptyNote = document.getElementById("orders-empty-note") as HTMLElement | null;
 
   // 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.
@@ -257,11 +258,18 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
     let visibleCount = 0;
     orderCards.forEach((card) => {
       const status = OFFENE_STATUS.find((s) => card.classList.contains("order-card-" + s));
-      const show = tab === "bestellungen" || (tab === "offene" && !!status);
+      const show = tab === "offene" ? !!status : card.classList.contains("order-card-abgeschlossen");
       (card as HTMLElement).style.display = show ? "" : "none";
       if (show) visibleCount++;
     });
-    if (emptyNote) emptyNote.style.display = tab === "offene" && visibleCount === 0 ? "block" : "none";
+    if (emptyNote) {
+      if (visibleCount === 0 && (tab === "offene" || tab === "bestellungen")) {
+        emptyNote.textContent = tab === "offene" ? emptyNote.dataset.emptyOpen ?? "" : emptyNote.dataset.emptyArrived ?? "";
+        emptyNote.style.display = "block";
+      } else {
+        emptyNote.style.display = "none";
+      }
+    }
   }
 
   navItems.forEach((item) => {