UX: Privater-Bereich-Header auf Zuchtkartei, Wurfverwaltung, Läufigkeit (SW by-v909)

backend/main.py

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

backend/static/index.html

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

backend/static/js/app.js

@@ -3,7 +3,7 @@
    Router, State-Management, Navigation, Initialisierung.
    ============================================================ */
 
-const APP_VER     = '908'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
+const APP_VER     = '909'; // ← 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/laeufi.js

@@ -26,9 +26,32 @@ window.Page_laeufi = (() => {
   // ----------------------------------------------------------
   // Grundstruktur
   // ----------------------------------------------------------
+  function _privateHeader() {
+    return `
+      <div style="background:linear-gradient(135deg,#1a1208,#2d1f0e);
+                  border-bottom:1px solid rgba(196,132,58,.25);
+                  padding:var(--space-3) var(--space-4);
+                  display:flex;align-items:center;gap:var(--space-3)">
+        <div style="background:rgba(196,132,58,.15);border:1px solid rgba(196,132,58,.3);
+                    border-radius:var(--radius-md);padding:var(--space-2) var(--space-3);
+                    display:flex;align-items:center;gap:var(--space-2);flex-shrink:0">
+          <svg style="width:14px;height:14px;color:var(--c-primary)" viewBox="0 0 256 256">
+            <use href="/icons/phosphor.svg#lock-key"></use>
+          </svg>
+          <span style="font-size:var(--text-xs);font-weight:700;color:var(--c-primary);white-space:nowrap">
+            Privater Bereich
+          </span>
+        </div>
+        <div style="font-size:var(--text-xs);color:rgba(196,132,58,.6)">
+          Nur du siehst das — nicht öffentlich
+        </div>
+      </div>`;
+  }
+
   function _render() {
     _container.innerHTML = `
       <div style="max-width:860px">
+        ${_privateHeader()}
         <div class="by-toolbar" style="margin-bottom:var(--space-4)">
           <h2 style="margin:0;font-size:var(--text-lg);font-weight:var(--weight-semibold)">
             ${UI.icon('thermometer')} Läufigkeit & Trächtigkeit

backend/static/js/pages/litters.js

@@ -90,12 +90,38 @@ window.Page_litters = (() => {
   // ----------------------------------------------------------
   // Grundstruktur rendern
   // ----------------------------------------------------------
+  function _privateHeader(icon, title) {
+    const zwinger = _appState?.user?.name || '';
+    return `
+      <div style="background:linear-gradient(135deg,#1a1208,#2d1f0e);
+                  border-bottom:1px solid rgba(196,132,58,.25);
+                  padding:var(--space-3) var(--space-4);
+                  display:flex;align-items:center;gap:var(--space-3)">
+        <div style="background:rgba(196,132,58,.15);border:1px solid rgba(196,132,58,.3);
+                    border-radius:var(--radius-md);padding:var(--space-2) var(--space-3);
+                    display:flex;align-items:center;gap:var(--space-2);flex-shrink:0">
+          <svg style="width:14px;height:14px;color:var(--c-primary)" viewBox="0 0 256 256">
+            <use href="/icons/phosphor.svg#lock-key"></use>
+          </svg>
+          <span style="font-size:var(--text-xs);font-weight:700;color:var(--c-primary);white-space:nowrap">
+            Privater Bereich
+          </span>
+        </div>
+        <div style="min-width:0">
+          <div style="font-size:var(--text-xs);color:rgba(196,132,58,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis">
+            Nur du siehst das — nicht öffentlich
+          </div>
+        </div>
+      </div>`;
+  }
+
   function _render() {
     _container.innerHTML = `
       <div class="litters-layout">
-        <div class="by-toolbar">
+        ${_privateHeader()}
+        <div class="by-toolbar" style="flex-wrap:wrap">
           <h2 style="margin:0;font-size:var(--text-lg);font-weight:var(--weight-semibold)">
-            ${UI.icon('dog')} Meine Würfe
+            ${UI.icon('certificate')} Meine Würfe
           </h2>
           <button class="btn btn-primary btn-sm" id="litters-new-btn">
             ${UI.icon('plus')} Neuer Wurf

backend/static/js/pages/zuchthunde.js

@@ -98,9 +98,32 @@ window.Page_zuchthunde = (() => {
   // ----------------------------------------------------------
   // Grundstruktur
   // ----------------------------------------------------------
+  function _privateHeader() {
+    return `
+      <div style="background:linear-gradient(135deg,#1a1208,#2d1f0e);
+                  border-bottom:1px solid rgba(196,132,58,.25);
+                  padding:var(--space-3) var(--space-4);
+                  display:flex;align-items:center;gap:var(--space-3)">
+        <div style="background:rgba(196,132,58,.15);border:1px solid rgba(196,132,58,.3);
+                    border-radius:var(--radius-md);padding:var(--space-2) var(--space-3);
+                    display:flex;align-items:center;gap:var(--space-2);flex-shrink:0">
+          <svg style="width:14px;height:14px;color:var(--c-primary)" viewBox="0 0 256 256">
+            <use href="/icons/phosphor.svg#lock-key"></use>
+          </svg>
+          <span style="font-size:var(--text-xs);font-weight:700;color:var(--c-primary);white-space:nowrap">
+            Privater Bereich
+          </span>
+        </div>
+        <div style="font-size:var(--text-xs);color:rgba(196,132,58,.6)">
+          Nur du siehst das — nicht öffentlich
+        </div>
+      </div>`;
+  }
+
   function _render() {
     _container.innerHTML = `
       <div class="zh-layout">
+        ${_privateHeader()}
         <div class="by-toolbar" style="flex-wrap:wrap">
           <h2 style="margin:0;font-size:var(--text-lg);font-weight:var(--weight-semibold);flex-shrink:0;white-space:nowrap">
             ${UI.icon('dog')} Zuchtkartei

backend/static/sw.js

@@ -3,7 +3,7 @@
    Offline-Cache + Push Notifications + Tile-Cache
    ============================================================ */
 
-const CACHE_VERSION = 'by-v908';
+const CACHE_VERSION = 'by-v909';
 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