From 05b28fcd8d45c4feca08a0555d8bd9d995fdba8f Mon Sep 17 00:00:00 2001
From: rene <mail@motocamp.de>
Date: Sun, 19 Apr 2026 10:19:44 +0200
Subject: [PATCH] =?UTF-8?q?Feature:=20Aktivit=C3=A4ten=20in=20Freunde-Ansi?=
 =?UTF-8?q?cht=20anklickbar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- diary → Tagebuch, health → Gesundheit, walk → Gassi-Treffen
- Items als <button> für iOS-Tap-Zuverlässigkeit
- fr-activity-item--link mit Hover/Tap-Stil
---
 backend/static/css/components.css  | 13 +++++++++++++
 backend/static/js/app.js           |  2 +-
 backend/static/js/pages/friends.js | 25 +++++++++++++++++++++----
 backend/static/sw.js               |  2 +-
 4 files changed, 36 insertions(+), 6 deletions(-)

diff --git a/backend/static/css/components.css b/backend/static/css/components.css
index d1efa8b..dd69fdd 100644
--- a/backend/static/css/components.css
+++ b/backend/static/css/components.css
@@ -5473,6 +5473,19 @@ html.modal-open {
   background:    var(--c-surface);
   border-radius: var(--radius-lg);
   border:        1px solid var(--c-border);
+  width:         100%;
+  text-align:    left;
+  font:          inherit;
+}
+.fr-activity-item--link {
+  cursor:        pointer;
+  transition:    background var(--transition-fast);
+  -webkit-tap-highlight-color: transparent;
+}
+.fr-activity-item--link:hover,
+.fr-activity-item--link:active {
+  background: var(--c-surface-2);
+  border-color: var(--c-primary-subtle);
 }
 
 .fr-activity-avatar-wrap {
diff --git a/backend/static/js/app.js b/backend/static/js/app.js
index 4f67493..718b473 100644
--- a/backend/static/js/app.js
+++ b/backend/static/js/app.js
@@ -3,7 +3,7 @@
    Router, State-Management, Navigation, Initialisierung.
    ============================================================ */
 
-const APP_VER = '211'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
+const APP_VER = '212'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
 
 const App = (() => {
 
diff --git a/backend/static/js/pages/friends.js b/backend/static/js/pages/friends.js
index 3840e7a..f233217 100644
--- a/backend/static/js/pages/friends.js
+++ b/backend/static/js/pages/friends.js
@@ -246,11 +246,26 @@ window.Page_friends = (() => {
         _renderActivity(_activityAll);
       });
     });
+
+    el.querySelectorAll('.fr-activity-item[data-nav]').forEach(btn => {
+      btn.addEventListener('click', () => {
+        const page = btn.dataset.nav;
+        if (page) App.navigate(page);
+      });
+    });
   }
 
+  const _ACTIVITY_PAGE = {
+    diary:   'diary',
+    health:  'health',
+    walk:    'walks',
+    new_dog: null,
+  };
+
   function _activityItem(item) {
-    const ago  = _timeAgo(item.created_at);
-    const text = item.text || '';
+    const ago     = _timeAgo(item.created_at);
+    const text    = item.text || '';
+    const page    = _ACTIVITY_PAGE[item.type] || '';
     const dogLabel = item.dog_name
       ? `<span class="fr-activity-dog">${_esc(item.dog_name)}</span>`
       : '';
@@ -265,8 +280,10 @@ window.Page_friends = (() => {
              ${_esc((item.user_name || '?')[0].toUpperCase())}
            </div>`;
 
+    const tag = page ? `button type="button"` : `div`;
     return `
-      <div class="fr-activity-item">
+      <${tag} class="fr-activity-item${page ? ' fr-activity-item--link' : ''}"
+              ${page ? `data-nav="${page}"` : ''}>
         <div class="fr-activity-avatar-wrap">
           ${avatar}
           <div class="fr-activity-icon-badge">
@@ -283,7 +300,7 @@ window.Page_friends = (() => {
           ${text ? `<div class="fr-activity-text">${_esc(text)}</div>` : ''}
           <div class="fr-activity-time">${_esc(ago)}</div>
         </div>
-      </div>
+      </${page ? 'button' : 'div'}>
     `;
   }
 
diff --git a/backend/static/sw.js b/backend/static/sw.js
index 8fbb544..0bc11bd 100644
--- a/backend/static/sw.js
+++ b/backend/static/sw.js
@@ -3,7 +3,7 @@
    Offline-Cache + Push Notifications + Tile-Cache
    ============================================================ */
 
-const CACHE_VERSION = 'by-v234';
+const CACHE_VERSION = 'by-v235';
 const CACHE_STATIC  = `${CACHE_VERSION}-static`;
 const CACHE_TILES   = 'ban-yaro-tiles-v1';  // bleibt über SW-Updates erhalten