Sprint 15: Suche, Ausweis, Teilen, Widget

- Volltext-Suche im Tagebuch (LIKE über Titel/Text/Tags, Debounce 350ms)
- Digitaler Heimtierausweis als druckbare HTML-Seite (/ausweis/{dog_id})
  Enthält Impfungen, Medikamente, Allergien, Tierärzte, Chip-Nr.
- Hund teilen: Einladungslink-System (dog_shares-Tabelle, /teilen/{token})
  Geteilte Hunde erscheinen in der Hundeliste, Tagebuch/Gesundheit lesbar
- Widget-Seite /#widget: zufälliges Tagebuchbild + nächste Erinnerung
  Als PWA-Shortcut im Manifest verankert
- SW-Cache by-v144, APP_VER 117

backend/static/js/pages/diary.js

@@ -9,11 +9,12 @@ window.Page_diary = (() => {
   // ----------------------------------------------------------
   // MODUL-STATE
   // ----------------------------------------------------------
-  let _container  = null;
-  let _appState   = null;
-  let _entries    = [];
-  let _offset     = 0;
-  const LIMIT     = 20;
+  let _container    = null;
+  let _appState     = null;
+  let _entries      = [];
+  let _offset       = 0;
+  let _searchQuery  = '';
+  const LIMIT       = 20;
 
   const TYPEN = {
     eintrag:    { label: 'Eintrag',    icon: '<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#book-open"></use></svg>' },
@@ -53,9 +54,9 @@ window.Page_diary = (() => {
   // ON DOG CHANGE — vom Header-Switcher ausgelöst
   // ----------------------------------------------------------
   async function onDogChange(dog) {
-    _offset  = 0;
-    _entries = [];
-    // Direkt Diary laden — Hund wurde bereits extern gewählt
+    _offset      = 0;
+    _entries     = [];
+    _searchQuery = '';
     await _renderDiary();
   }
 
@@ -136,9 +137,13 @@ window.Page_diary = (() => {
   async function _renderDiary() {
     _container.innerHTML = `
       <div class="by-toolbar diary-toolbar">
-        <button class="btn btn-secondary btn-sm" id="diary-import-btn">
+        <div class="diary-search-wrap" id="diary-search-wrap">
+          <svg class="ph-icon diary-search-icon" aria-hidden="true"><use href="/icons/phosphor.svg#magnifying-glass"></use></svg>
+          <input type="search" class="diary-search-input" id="diary-search-input"
+                 placeholder="Einträge durchsuchen…" autocomplete="off">
+        </div>
+        <button class="btn btn-secondary btn-sm" id="diary-import-btn" title="Importieren">
           <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#download-simple"></use></svg>
-          Importieren
         </button>
       </div>
       <div id="diary-list"></div>
@@ -152,6 +157,20 @@ window.Page_diary = (() => {
     _container.querySelector('#diary-btn-more')
       ?.addEventListener('click', () => _loadMore());
 
+    // Suche mit Debounce
+    let _searchTimer = null;
+    _container.querySelector('#diary-search-input')
+      ?.addEventListener('input', e => {
+        clearTimeout(_searchTimer);
+        _searchTimer = setTimeout(async () => {
+          _offset  = 0;
+          _entries = [];
+          _searchQuery = e.target.value.trim();
+          await _load();
+          _renderList();
+        }, 350);
+      });
+
     await _load();
     _renderList();
   }
@@ -163,7 +182,9 @@ window.Page_diary = (() => {
     const dog = _appState.activeDog;
     if (!dog) return;
     try {
-      const batch = await API.diary.list(dog.id, { limit: LIMIT, offset: _offset });
+      const params = { limit: LIMIT, offset: _offset };
+      if (_searchQuery) params.q = _searchQuery;
+      const batch = await API.diary.list(dog.id, params);
       _entries = _entries.concat(batch);
 
       // "Mehr laden" anzeigen wenn volle Page geladen wurde

backend/static/js/pages/dog-profile.js

@@ -188,6 +188,16 @@ window.Page_dog_profile = (() => {
           <button class="btn btn-primary w-full" id="dp-edit-btn">
             Profil bearbeiten
           </button>
+          <div style="display:flex;gap:var(--space-2)">
+            <button class="btn btn-secondary" style="flex:1" id="dp-ausweis-btn">
+              <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#identification-card"></use></svg>
+              Ausweis
+            </button>
+            <button class="btn btn-secondary" style="flex:1" id="dp-share-btn">
+              <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#share-network"></use></svg>
+              Teilen
+            </button>
+          </div>
           <button class="btn btn-secondary w-full" id="dp-add-dog-btn">
             + Weiteren Hund anlegen
           </button>
@@ -240,6 +250,14 @@ window.Page_dog_profile = (() => {
       _showChipEdit(dog);
     });
 
+    document.getElementById('dp-ausweis-btn')?.addEventListener('click', () => {
+      window.open(`/ausweis/${dog.id}`, '_blank');
+    });
+
+    document.getElementById('dp-share-btn')?.addEventListener('click', () => {
+      _showShareModal(dog);
+    });
+
     // Edit- und Add-Klicks laufen über Event-Delegation in init() — keine direkten Listener nötig.
   }
 
@@ -275,6 +293,102 @@ window.Page_dog_profile = (() => {
     });
   }
 
+  // ----------------------------------------------------------
+  // TEILEN
+  // ----------------------------------------------------------
+  async function _showShareModal(dog) {
+    UI.modal.open({
+      title: `${_esc(dog.name)} teilen`,
+      body: `
+        <p style="font-size:var(--text-sm);color:var(--c-text-secondary);margin-bottom:var(--space-4)">
+          Erstelle einen Einladungslink, den du per WhatsApp, Signal oder E-Mail teilen kannst.
+          Die eingeladene Person sieht Tagebuch und Gesundheitsakte nach dem Annehmen.
+        </p>
+        <div class="form-group">
+          <label class="form-label">Berechtigung</label>
+          <select class="form-control" id="share-role-select">
+            <option value="editor">Mitschreiben (Tagebuch & Gesundheit bearbeiten)</option>
+            <option value="viewer">Nur lesen</option>
+          </select>
+        </div>
+        <div id="share-link-result" style="display:none;margin-top:var(--space-4)">
+          <label class="form-label">Einladungslink</label>
+          <div style="display:flex;gap:var(--space-2);align-items:center">
+            <input class="form-control" id="share-link-input" type="text" readonly
+                   style="font-size:var(--text-xs)">
+            <button class="btn btn-secondary btn-sm" id="share-link-copy">
+              <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#clipboard-text"></use></svg>
+            </button>
+          </div>
+          <p style="font-size:var(--text-xs);color:var(--c-text-muted);margin-top:var(--space-2)">
+            Dieser Link kann einmalig angenommen werden.
+          </p>
+        </div>
+        <div id="share-list-wrap" style="margin-top:var(--space-4)"></div>`,
+      footer: `
+        <button class="btn btn-secondary" onclick="UI.modal.close()">Schließen</button>
+        <button class="btn btn-primary" id="share-create-btn">Link erstellen</button>`,
+    });
+
+    _loadShareList(dog.id);
+
+    document.getElementById('share-create-btn').addEventListener('click', async () => {
+      const role = document.getElementById('share-role-select').value;
+      const btn  = document.getElementById('share-create-btn');
+      UI.setLoading(btn, true);
+      try {
+        const res  = await API.sharing.create(dog.id, role);
+        const link = `${location.origin}${res.invite_path}`;
+        const inp  = document.getElementById('share-link-input');
+        inp.value  = link;
+        document.getElementById('share-link-result').style.display = 'block';
+        document.getElementById('share-link-copy').onclick = async () => {
+          await navigator.clipboard.writeText(link).catch(() => {});
+          UI.toast.success('Link kopiert!');
+        };
+        UI.setLoading(btn, false);
+        _loadShareList(dog.id);
+      } catch (e) {
+        UI.setLoading(btn, false);
+        UI.toast.error(e.message || 'Fehler');
+      }
+    });
+  }
+
+  async function _loadShareList(dogId) {
+    const wrap = document.getElementById('share-list-wrap');
+    if (!wrap) return;
+    try {
+      const shares = await API.sharing.list(dogId);
+      if (!shares.length) { wrap.innerHTML = ''; return; }
+      wrap.innerHTML = `
+        <div style="font-size:var(--text-xs);color:var(--c-text-muted);margin-bottom:var(--space-2)">
+          Aktive Einladungen
+        </div>` +
+        shares.map(s => `
+          <div style="display:flex;align-items:center;gap:var(--space-2);
+                      padding:var(--space-2) var(--space-3);background:var(--c-surface);
+                      border-radius:var(--radius-md);margin-bottom:var(--space-1)">
+            <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#user"></use></svg>
+            <div style="flex:1;font-size:var(--text-sm)">
+              ${s.shared_with_name
+                ? `<strong>${_esc(s.shared_with_name)}</strong> · ${s.role}`
+                : `<em style="color:var(--c-text-muted)">Ausstehend</em> · ${s.role}`}
+            </div>
+            <button class="btn btn-link btn-sm share-revoke-btn" data-share-id="${s.id}"
+                    style="color:var(--c-danger);padding:0">
+              <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#x"></use></svg>
+            </button>
+          </div>`).join('');
+      wrap.querySelectorAll('.share-revoke-btn').forEach(btn => {
+        btn.addEventListener('click', async () => {
+          await API.sharing.revoke(dogId, parseInt(btn.dataset.shareId));
+          _loadShareList(dogId);
+        });
+      });
+    } catch (e) { /* ignore */ }
+  }
+
   // ----------------------------------------------------------
   // NEU ANLEGEN (direkt auf der Seite, kein Modal)
   // ----------------------------------------------------------

backend/static/js/pages/widget.js

@@ -0,0 +1,145 @@
+/* BAN YARO — Widget-Vorschau (Home-Screen-Widget) */
+
+window.Page_widget = (() => {
+
+  let _container = null;
+  let _appState  = null;
+  let _refreshTimer = null;
+
+  async function init(container, appState) {
+    _container = container;
+    _appState  = appState;
+    await _render();
+  }
+
+  async function refresh() {
+    await _render();
+  }
+
+  async function _render() {
+    _container.innerHTML = `
+      <div style="padding:var(--space-4)">
+        <div style="text-align:center;color:var(--c-text-muted);padding:var(--space-8)">
+          <div style="font-size:2rem">⏳</div>
+          <div>Lade…</div>
+        </div>
+      </div>`;
+
+    if (!_appState.activeDog) {
+      _container.innerHTML = UI.emptyState({
+        icon:   UI.icon('dog'),
+        title:  'Kein Hund angelegt',
+        text:   'Erstelle zuerst ein Hundeprofil.',
+        action: `<button class="btn btn-primary" onclick="App.navigate('dog-profile')">Profil erstellen</button>`,
+      });
+      return;
+    }
+
+    let data;
+    try {
+      data = await API.widget.snapshot();
+    } catch (e) {
+      _container.innerHTML = '<p style="padding:2rem;color:red">Fehler beim Laden.</p>';
+      return;
+    }
+
+    const dog   = data.dog;
+    const photo = data.random_photo;
+    const rem   = data.reminder;
+
+    const photoHtml = photo
+      ? `<div class="widget-photo-wrap">
+           <img src="${_esc(photo.media_url)}" alt="${_esc(photo.titel || '')}" class="widget-photo">
+           <div class="widget-photo-caption">
+             ${_esc(photo.titel || '')}
+             <span class="widget-photo-date">${_fmtDate(photo.datum)}</span>
+           </div>
+         </div>`
+      : `<div class="widget-photo-wrap widget-photo-placeholder">
+           <svg class="ph-icon" style="font-size:3rem" aria-hidden="true"><use href="/icons/phosphor.svg#image"></use></svg>
+           <div style="color:var(--c-text-muted);font-size:var(--text-sm)">Noch keine Fotos im Tagebuch</div>
+         </div>`;
+
+    const reminderHtml = rem
+      ? `<div class="widget-reminder">
+           <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#calendar-check"></use></svg>
+           <div>
+             <div style="font-weight:var(--weight-semibold);font-size:var(--text-sm)">${_esc(rem.bezeichnung)}</div>
+             <div style="font-size:var(--text-xs);color:var(--c-text-muted)">${_fmtDate(rem.naechstes)}</div>
+           </div>
+         </div>`
+      : data.overdue > 0
+        ? `<div class="widget-reminder widget-reminder--overdue">
+             <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#warning"></use></svg>
+             <div style="font-size:var(--text-sm)">${data.overdue} überfällige Erinnerung${data.overdue > 1 ? 'en' : ''}</div>
+           </div>`
+        : `<div class="widget-reminder widget-reminder--ok">
+             <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#check-circle"></use></svg>
+             <div style="font-size:var(--text-sm)">Keine offenen Erinnerungen</div>
+           </div>`;
+
+    const dogAvatar = dog.foto_url
+      ? `<img src="${_esc(dog.foto_url)}" class="widget-dog-av" alt="${_esc(dog.name)}">`
+      : `<div class="widget-dog-av widget-dog-av--placeholder">🐕</div>`;
+
+    _container.innerHTML = `
+      <div style="padding:var(--space-4)">
+
+        <div class="widget-card">
+          <div class="widget-dog-row">
+            ${dogAvatar}
+            <div>
+              <div style="font-weight:var(--weight-bold);font-size:var(--text-lg)">${_esc(dog.name)}</div>
+              ${dog.rasse ? `<div style="font-size:var(--text-sm);color:var(--c-text-muted)">${_esc(dog.rasse)}</div>` : ''}
+            </div>
+            <button class="btn btn-secondary btn-sm" id="widget-refresh-btn" style="margin-left:auto"
+                    title="Neues Zufallsbild">
+              <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#arrows-clockwise"></use></svg>
+            </button>
+          </div>
+
+          ${reminderHtml}
+          ${photoHtml}
+        </div>
+
+        <div style="margin-top:var(--space-4);padding:var(--space-3) var(--space-4);
+                    background:var(--c-surface);border-radius:var(--radius-md);
+                    border:1px solid var(--c-border)">
+          <div style="font-size:var(--text-sm);font-weight:var(--weight-semibold);
+                      margin-bottom:var(--space-2)">
+            <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#device-mobile"></use></svg>
+            Als Home-Screen-Widget nutzen
+          </div>
+          <p style="font-size:var(--text-xs);color:var(--c-text-secondary);margin-bottom:var(--space-3)">
+            Füge diese Seite zum Home-Screen hinzu und öffne sie mit einem Tipp.
+          </p>
+          <div style="display:flex;flex-direction:column;gap:var(--space-2)">
+            <div style="font-size:var(--text-xs);color:var(--c-text-muted)">
+              <strong>iOS Safari:</strong> Teilen-Symbol → „Zum Home-Bildschirm"
+            </div>
+            <div style="font-size:var(--text-xs);color:var(--c-text-muted)">
+              <strong>Android Chrome:</strong> Menü (⋮) → „Zum Startbildschirm hinzufügen"
+            </div>
+          </div>
+        </div>
+      </div>`;
+
+    _container.querySelector('#widget-refresh-btn')?.addEventListener('click', () => _render());
+  }
+
+  function _esc(str) {
+    if (!str) return '';
+    return String(str).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
+  }
+
+  function _fmtDate(d) {
+    if (!d) return '';
+    try {
+      const [y, m, day] = d.split('-');
+      return `${parseInt(day)}.${parseInt(m)}.${y}`;
+    } catch { return d; }
+  }
+
+  return { init, refresh };
+
+})();