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/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
-  // "Meine Bestellungen" auf noch nicht abgeschlossene Bestellungen.
+  // Rest aus (statt nur hinzuspringen). "Bestellungen" zeigt nur schon ANGEKOMMENE (abgeschlossene)
+  // 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
-  // "Meine Bestellungen" auf noch nicht abgeschlossene Bestellungen.
+  // Rest aus (statt nur hinzuspringen). "Bestellungen" zeigt nur schon ANGEKOMMENE (abgeschlossene)
+  // 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
-  // "Meine Bestellungen" auf noch nicht abgeschlossene Bestellungen.
+  // Rest aus (statt nur hinzuspringen). "Bestellungen" zeigt nur schon ANGEKOMMENE (abgeschlossene)
+  // 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
-  // "Meine Bestellungen" auf noch nicht abgeschlossene Bestellungen.
+  // Rest aus (statt nur hinzuspringen). "Bestellungen" zeigt nur schon ANGEKOMMENE (abgeschlossene)
+  // 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) => {