From da1146b047cc5285964629e2168c91f7c31581de Mon Sep 17 00:00:00 2001
From: rene <mail@motocamp.de>
Date: Fri, 1 May 2026 09:49:48 +0200
Subject: [PATCH] Fix: movies-type-btn bekommt movies-filter-btn CSS +
 Phosphor-Icons sichtbar, SW by-v583

---
 backend/static/js/app.js          |  2 +-
 backend/static/js/pages/movies.js | 16 ++++++----------
 backend/static/sw.js              |  2 +-
 3 files changed, 8 insertions(+), 12 deletions(-)

diff --git a/backend/static/js/app.js b/backend/static/js/app.js
index 95fa8fb..beb7069 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     = '582'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
+const APP_VER     = '583'; // ← 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/movies.js b/backend/static/js/pages/movies.js
index 65275d1..552928d 100644
--- a/backend/static/js/pages/movies.js
+++ b/backend/static/js/pages/movies.js
@@ -93,10 +93,10 @@ window.Page_movies = (() => {
           <button class="movies-filter-btn${_filter === 'top'       ? ' movies-filter-btn--active' : ''}" data-filter="top"><svg class="ph-icon" aria-hidden="true" style="width:14px;height:14px"><use href="/icons/phosphor.svg#star"></use></svg> Top</button>
         </div>
         <div class="movies-filter-row" style="margin-top:var(--space-2)">
-          <button class="movies-type-btn${_typ === 'alle'  ? ' movies-filter-btn--active' : ''}" data-typ="alle">Alle Typen</button>
-          <button class="movies-type-btn${_typ === 'film'  ? ' movies-filter-btn--active' : ''}" data-typ="film">🎬 Filme</button>
-          <button class="movies-type-btn${_typ === 'serie' ? ' movies-filter-btn--active' : ''}" data-typ="serie"><svg class="ph-icon" aria-hidden="true" style="width:14px;height:14px"><use href="/icons/phosphor.svg#film-slate"></use></svg> Serien</button>
-          <button class="movies-type-btn${_typ === 'doku'  ? ' movies-filter-btn--active' : ''}" data-typ="doku"><svg class="ph-icon" aria-hidden="true" style="width:14px;height:14px"><use href="/icons/phosphor.svg#camera"></use></svg> Dokus</button>
+          <button class="movies-filter-btn movies-type-btn${_typ === 'alle'  ? ' movies-filter-btn--active' : ''}" data-typ="alle">Alle</button>
+          <button class="movies-filter-btn movies-type-btn${_typ === 'film'  ? ' movies-filter-btn--active' : ''}" data-typ="film"><svg class="ph-icon" aria-hidden="true" style="width:15px;height:15px"><use href="/icons/phosphor.svg#film-slate"></use></svg> Filme</button>
+          <button class="movies-filter-btn movies-type-btn${_typ === 'serie' ? ' movies-filter-btn--active' : ''}" data-typ="serie"><svg class="ph-icon" aria-hidden="true" style="width:15px;height:15px"><use href="/icons/phosphor.svg#list"></use></svg> Serien</button>
+          <button class="movies-filter-btn movies-type-btn${_typ === 'doku'  ? ' movies-filter-btn--active' : ''}" data-typ="doku"><svg class="ph-icon" aria-hidden="true" style="width:15px;height:15px"><use href="/icons/phosphor.svg#camera"></use></svg> Dokus</button>
         </div>
         <div style="display:flex;align-items:center;gap:var(--space-2);margin-top:var(--space-2)">
           <svg class="ph-icon" aria-hidden="true" style="width:16px;height:16px;color:var(--c-text-muted)"><use href="/icons/phosphor.svg#list"></use></svg>
@@ -182,12 +182,8 @@ window.Page_movies = (() => {
       ? `<div class="movie-tag-stirbt"><svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#warning"></use></svg> Hund stirbt</div>`
       : `<div class="movie-tag-ueberlebt"><svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#check-circle"></use></svg> Hund überlebt</div>`;
     const stars = _starsHtml(film.bewertung_avg, film.id, film.user_rating, false);
-    const typIcon  = film.typ === 'serie'
-      ? `<svg class="ph-icon" aria-hidden="true" style="width:12px;height:12px"><use href="/icons/phosphor.svg#film-slate"></use></svg>`
-      : film.typ === 'doku'
-      ? `<svg class="ph-icon" aria-hidden="true" style="width:12px;height:12px"><use href="/icons/phosphor.svg#camera"></use></svg>`
-      : '';
-    const typLabel = film.typ === 'serie' ? `${typIcon} Serie` : film.typ === 'doku' ? `${typIcon} Doku` : '';
+    const _ico = name => `<svg class="ph-icon" aria-hidden="true" style="width:12px;height:12px;vertical-align:middle"><use href="/icons/phosphor.svg#${name}"></use></svg>`;
+    const typLabel = film.typ === 'serie' ? `${_ico('list')} Serie` : film.typ === 'doku' ? `${_ico('camera')} Doku` : '';
     const imdb = film.imdb_rating ? `<span style="font-size:var(--text-xs);color:var(--c-text-muted)">IMDb ${film.imdb_rating}</span>` : '';
     const streaming = film.streaming ? `<span style="font-size:var(--text-xs);color:var(--c-text-muted)">${_esc(film.streaming)}</span>` : '';
 
diff --git a/backend/static/sw.js b/backend/static/sw.js
index ba359c6..e2dcd3f 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-v582';
+const CACHE_VERSION = 'by-v583';
 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