Feature: Ratings, Lightbox, Forum-Standort, Notifications, Routen-Recording, Chat-Picker

- Bewertungssystem (ratings.py): Sterne für Sitter/Walks/Places/Routen
- Admin: Server-Log-Viewer + OSM-Cache-Statistiken
- Chat: "Neue Nachricht"-Button mit Freundesliste-Picker
- Forum: 5 neue Kategorien, Standorteingabe (locationPicker), Absende-Toast, Lightbox
- Freunde: Aktivitäts-Filter (Chips), Freundschaftsanfrage → In-App-Notification
- Sitter: locationPicker statt manuelle Koordinateneingabe + ratingStars
- Tagebuch: Bilder-Lightbox im Detail-View, iOS-Modal-Header-Fix (90svh)
- Routen: Start/Stopp-Button wechselt Zustand, nutzt Page_map.isRecording()
- Benachrichtigungen: Delete-Button sichtbar, typ-basierte Navigation, Toast-Feedback
- OSM: globales Semaphore + 429-Retry-Logic; Scheduler: München-Umland, täglich
- SW by-v225, APP_VER 202

backend/static/js/pages/notifications.js

@@ -33,14 +33,37 @@ window.Page_notifications = (() => {
     }
   }
 
+  /** Parst n.data sicher — egal ob String oder Objekt */
+  function _parseData(raw) {
+    if (!raw) return {};
+    if (typeof raw === 'object') return raw;
+    try { return JSON.parse(raw); } catch (_) { return {}; }
+  }
+
+  /** Ermittelt Ziel-Seite und optionale Label für den Toast */
+  function _navTarget(n) {
+    const d = _parseData(n.data);
+    // Explizit gesetzte Zielseite hat Vorrang
+    if (d.page) return { page: d.page, label: d.page };
+    // Typ-basiertes Fallback
+    switch (n.type) {
+      case 'chat_message':   return { page: d.conversation_id ? `chat?id=${d.conversation_id}` : 'chat', label: 'Chat' };
+      case 'friend_request': return { page: 'friends', label: 'Freunde' };
+      case 'milestone':      return { page: 'diary',   label: 'Tagebuch' };
+      case 'poison_alert':   return { page: 'map',     label: 'Karte' };
+      default:               return { page: '', label: '' };
+    }
+  }
+
   /** Rendert eine einzelne Notification als HTML-String */
   function _renderItem(n) {
-    const unread  = !n.read_at;
+    const unread   = !n.read_at;
     const iconName = unread ? _iconForType(n.type) : 'bell';
-    const cls     = ['notif-item', unread ? 'notif-unread' : ''].filter(Boolean).join(' ');
+    const cls      = ['notif-item', unread ? 'notif-unread' : ''].filter(Boolean).join(' ');
+    const nav      = _navTarget(n);
 
     return `
-      <div class="${cls}" data-id="${n.id}" data-page="${UI.escape((n.data && JSON.parse(n.data || '{}').page) || '')}">
+      <div class="${cls}" data-id="${n.id}" data-page="${UI.escape(nav.page)}" data-nav-label="${UI.escape(nav.label)}">
         <span class="notif-icon">${UI.icon(iconName)}</span>
         <div class="notif-content">
           <div class="notif-title">${UI.escape(n.title)}</div>
@@ -118,16 +141,24 @@ window.Page_notifications = (() => {
         // Löschen-Button nicht doppelt behandeln
         if (e.target.closest('.notif-del-btn')) return;
 
-        const id   = parseInt(el.dataset.id, 10);
-        const page = el.dataset.page;
+        const id       = parseInt(el.dataset.id, 10);
+        const page     = el.dataset.page;
+        const navLabel = el.dataset.navLabel;
 
-        // Optisch sofort als gelesen markieren
+        // Sofortiges visuelles Feedback: als gelesen markieren
         el.classList.remove('notif-unread');
+        el.style.opacity = '0.6';
 
-        try { await API.notifications.read(id); } catch (_) {}
+        // API-Call im Hintergrund — nicht abwarten
+        API.notifications.read(id).catch(() => {});
 
         if (page && window.App?.navigate) {
-          window.App.navigate(page);
+          if (navLabel) UI.toast?.(`Öffne ${navLabel}…`, 'info');
+          // Kurze Pause damit der Toast sichtbar wird, dann navigieren
+          setTimeout(() => window.App.navigate(page), 150);
+        } else {
+          // Keine Zielseite — Opacity nach kurzer Zeit zurücksetzen
+          setTimeout(() => { el.style.opacity = ''; }, 800);
         }
       });
     });
@@ -136,10 +167,19 @@ window.Page_notifications = (() => {
     list.querySelectorAll('.notif-del-btn').forEach(btn => {
       btn.addEventListener('click', async (e) => {
         e.stopPropagation();
-        const id = parseInt(btn.dataset.del, 10);
+        const id   = parseInt(btn.dataset.del, 10);
+        const item = btn.closest('.notif-item');
+
+        // Sofortiges visuelles Feedback
+        if (item) {
+          item.style.transition = 'opacity 0.2s, transform 0.2s';
+          item.style.opacity    = '0';
+          item.style.transform  = 'translateX(20px)';
+        }
+
         try {
           await API.notifications.delete(id);
-          btn.closest('.notif-item')?.remove();
+          item?.remove();
           if (!list.querySelector('.notif-item')) {
             list.innerHTML = `
               <div class="empty-state">
@@ -147,7 +187,14 @@ window.Page_notifications = (() => {
                 <p>Keine Benachrichtigungen</p>
               </div>`;
           }
-        } catch (_) {}
+        } catch (_) {
+          // Rückgängig machen falls Fehler
+          if (item) {
+            item.style.opacity   = '';
+            item.style.transform = '';
+          }
+          UI.toast?.('Löschen fehlgeschlagen.', 'error');
+        }
       });
     });
   }
@@ -215,19 +262,22 @@ window.Page_notifications = (() => {
       .notif-del-btn {
         flex-shrink: 0;
         color: var(--c-text-muted);
-        opacity: 0;
-        transition: opacity var(--transition-fast);
+        opacity: 0.45;
+        transition: opacity var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
         min-width: 44px;
         min-height: 44px;
         display: flex;
         align-items: center;
         justify-content: center;
+        border-radius: var(--radius-sm);
       }
-      .notif-item:hover .notif-del-btn {
+      .notif-item:hover .notif-del-btn,
+      .notif-del-btn:focus-visible {
         opacity: 1;
+        color: var(--c-danger, #e53e3e);
       }
-      @media (hover: none) {
-        .notif-del-btn { opacity: 1; }
+      .notif-del-btn:active {
+        background: var(--c-danger-subtle, rgba(229,62,62,.12));
       }
     `;
     document.head.appendChild(style);