Fix: Warteliste — besserer Empty-State, Badge-Count am Button, Status-Übersicht (SW by-v892)

backend/main.py

@@ -404,7 +404,7 @@ async def serve_media(path: str, request: _Request):
         raise _HE(404, "Nicht gefunden.")
     return _media_response(filepath)
 
-APP_VER = "891"  # muss mit APP_VER in app.js übereinstimmen
+APP_VER = "892"  # muss mit APP_VER in app.js übereinstimmen
 
 @app.get("/.well-known/assetlinks.json")
 async def assetlinks():

backend/static/index.html

@@ -583,10 +583,10 @@
 <div id="modal-container"></div>
 
 <!-- JS: Reihenfolge ist wichtig — erst Basis, dann Features -->
-<script src="/js/api.js?v=891"></script>
+<script src="/js/api.js?v=892"></script>
-<script src="/js/ui.js?v=891"></script>
+<script src="/js/ui.js?v=892"></script>
-<script src="/js/app.js?v=891"></script>
+<script src="/js/app.js?v=892"></script>
-<script src="/js/worlds.js?v=891"></script>
+<script src="/js/worlds.js?v=892"></script>
 
 <!-- Feature-Seiten werden lazy geladen -->
 

backend/static/js/app.js

@@ -3,7 +3,7 @@
    Router, State-Management, Navigation, Initialisierung.
    ============================================================ */
 
-const APP_VER     = '891'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
+const APP_VER     = '892'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
 const APP_VERSION = '1.5.1'; // ← semantische Version, wird bei make release gesetzt
 const IS_STAGING  = location.hostname === 'staging.banyaro.app';
 // Cache-Bust-Parameter nach Update-Reload sofort entfernen

backend/static/js/pages/litters.js

@@ -613,17 +613,46 @@ window.Page_litters = (() => {
     try {
       const entries = await API.litters.waitlist(litterId);
       _renderWaitlist(inner, litterId, entries);
+      // Badge am Button aktualisieren
+      const btn = document.querySelector(`.litters-waitlist-btn[data-id="${litterId}"]`);
+      if (btn) {
+        const active = entries.filter(e => e.status !== 'abgesagt').length;
+        btn.innerHTML = `${UI.icon('list-bullets')} Warteliste${active ? ` <span style="background:var(--c-primary);color:white;border-radius:999px;padding:0 6px;font-size:10px;font-weight:700">${active}</span>` : ''}`;
+      }
     } catch (err) {
       inner.innerHTML = `<p style="color:var(--c-danger);font-size:var(--text-sm)">${_esc(err.message || 'Fehler.')}</p>`;
     }
   }
 
   function _renderWaitlist(container, litterId, entries) {
+    const active   = entries.filter(e => e.status !== 'abgesagt');
+    const statusCounts = {};
+    entries.forEach(e => { statusCounts[e.status] = (statusCounts[e.status] || 0) + 1; });
+
+    const summaryPills = Object.entries(statusCounts).map(([s, n]) => {
+      const cfg = _WL_STATUS[s] || _WL_STATUS.anfrage;
+      return `<span style="background:${cfg.color}1a;color:${cfg.color};border:1px solid ${cfg.color}30;border-radius:999px;padding:1px 8px;font-size:11px;font-weight:600">${cfg.label}: ${n}</span>`;
+    }).join('');
+
+    const header = `
+      <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-3);flex-wrap:wrap;gap:var(--space-2)">
+        <div style="display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap">
+          <span style="font-size:var(--text-sm);font-weight:700;color:var(--c-text)">${entries.length} Interessent${entries.length !== 1 ? 'en' : ''}</span>
+          ${summaryPills}
+        </div>
+      </div>`;
+
     if (!entries.length) {
-      container.innerHTML = `<p style="color:var(--c-text-muted);font-size:var(--text-sm)">Noch keine Interessenten eingetragen.</p>`;
+      container.innerHTML = `
+        <div style="text-align:center;padding:var(--space-6) var(--space-4);border:1px dashed var(--c-border);border-radius:var(--radius-md)">
+          <div style="font-size:2rem;margin-bottom:var(--space-2)">${UI.icon('users')}</div>
+          <p style="font-weight:600;font-size:var(--text-sm);color:var(--c-text);margin-bottom:var(--space-1)">Noch keine Interessenten</p>
+          <p style="font-size:var(--text-xs);color:var(--c-text-muted)">Trage Anfragen ein — mit Wunsch-Geschlecht, Kontaktdaten und Status.</p>
+        </div>`;
       return;
     }
-    container.innerHTML = `
+
+    container.innerHTML = header + `
       <div style="display:flex;flex-direction:column;gap:var(--space-2)">
         ${entries.map((e, i) => `
           <div style="background:var(--c-bg-secondary);border-radius:var(--radius-md);padding:var(--space-3) var(--space-3);display:flex;gap:var(--space-3);align-items:flex-start" data-entry-id="${e.id}">

backend/static/sw.js

@@ -3,7 +3,7 @@
    Offline-Cache + Push Notifications + Tile-Cache
    ============================================================ */
 
-const CACHE_VERSION = 'by-v891';
+const CACHE_VERSION = 'by-v892';
 const CACHE_STATIC  = `${CACHE_VERSION}-static`;
 const CACHE_TILES   = 'ban-yaro-tiles-v1';  // bleibt über SW-Updates erhalten
 const CACHE_API     = 'ban-yaro-api-v1';    // API-Response-Cache