From d1572c52bcc7c5056c816fc08823f8795ffc505e Mon Sep 17 00:00:00 2001
From: rene <mail@motocamp.de>
Date: Sat, 2 May 2026 08:35:49 +0200
Subject: [PATCH] =?UTF-8?q?Feature:=20Forum=20Tab-Pills=20=E2=80=94=20Marq?=
 =?UTF-8?q?uee-Scroll=20bei=20Hover=20f=C3=BCr=20abgeschnittenen=20Text,?=
 =?UTF-8?q?=20SW=20by-v595?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 backend/static/css/components.css | 13 +++++++++++++
 backend/static/js/app.js          |  2 +-
 backend/static/js/pages/forum.js  | 19 +++++++++++++++++--
 backend/static/sw.js              |  2 +-
 4 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/backend/static/css/components.css b/backend/static/css/components.css
index 65e9739..5264274 100644
--- a/backend/static/css/components.css
+++ b/backend/static/css/components.css
@@ -4179,6 +4179,19 @@ html.modal-open {
   text-overflow: ellipsis;
   max-width:     10rem;  /* prevents single pill from being wider than ~160px on mobile */
 }
+.by-tab-text {
+  display:    inline-block;
+  white-space: nowrap;
+  transition: transform 0.3s ease;
+}
+.by-tab-text.scrolling {
+  animation:  forum-tab-scroll 1.8s ease-in-out 0.3s infinite alternate;
+  transition: none;
+}
+@keyframes forum-tab-scroll {
+  from { transform: translateX(0); }
+  to   { transform: translateX(var(--tab-scroll-px, 0)); }
+}
 
 /* Category badge (colored pill) */
 .forum-category-badge {
diff --git a/backend/static/js/app.js b/backend/static/js/app.js
index ba16c57..89ea286 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     = '594'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
+const APP_VER     = '595'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
 const APP_VERSION = '1.2.1'; // ← semantische Version, wird bei make release gesetzt
 const IS_STAGING  = location.hostname === 'staging.banyaro.app';
 
diff --git a/backend/static/js/pages/forum.js b/backend/static/js/pages/forum.js
index 9df00c5..7a7634c 100644
--- a/backend/static/js/pages/forum.js
+++ b/backend/static/js/pages/forum.js
@@ -99,10 +99,10 @@ window.Page_forum = (() => {
         <div class="forum-category-tabs by-tabs" id="forum-tabs">
           ${KATEGORIEN.map(k => `
             <button class="by-tab ${k.key === _aktivKat ? 'active' : ''}"
-                    data-kat="${k.key}">${_esc(k.label)}</button>
+                    data-kat="${k.key}"><span class="by-tab-text">${_esc(k.label)}</span></button>
           `).join('')}
           <button class="by-tab ${_activeSection === 'map' ? 'active' : ''}"
-                  data-section="map">${UI.icon('users')} Mitgliederkarte</button>
+                  data-section="map"><span class="by-tab-text">${UI.icon('users')} Mitgliederkarte</span></button>
         </div>
 
         <!-- Rechte Spalte: HdM-Kachel + Suche + Threads -->
@@ -130,6 +130,21 @@ window.Page_forum = (() => {
     const _tabCount = _tabsEl.querySelectorAll('.by-tab').length;
     _tabsEl.style.setProperty('--forum-tab-cols', Math.ceil(_tabCount / 2));
 
+    // Marquee-Scroll: nur Tabs animieren, bei denen Text wirklich abgeschnitten ist
+    _tabsEl.addEventListener('mouseenter', e => {
+      const btn  = e.target.closest('.by-tab');
+      const span = btn?.querySelector('.by-tab-text');
+      if (!span) return;
+      const overflow = span.scrollWidth - btn.clientWidth;
+      if (overflow <= 2) return;
+      span.style.setProperty('--tab-scroll-px', `-${overflow}px`);
+      span.classList.add('scrolling');
+    }, true);
+    _tabsEl.addEventListener('mouseleave', e => {
+      const span = e.target.closest('.by-tab')?.querySelector('.by-tab-text');
+      if (span) span.classList.remove('scrolling');
+    }, true);
+
     // Tab-Klicks
     _tabsEl.addEventListener('click', e => {
       const btn = e.target.closest('[data-kat], [data-section]');
diff --git a/backend/static/sw.js b/backend/static/sw.js
index a727200..bfe5f0d 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-v594';
+const CACHE_VERSION = 'by-v595';
 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