feat(web): greifbarer Rollbalken, Zeitleiste in die Favoriten verlegt (3.1)

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

CHANGELOG.md

@@ -77,6 +77,30 @@ Die Android-App zählt eigenständig weiter (mehrere APKs pro Release). Welche d
 
 ---
 
+## [3.1] — 2026-09-22
+
+**Android:** unverändert bei 1.15 (versionCode 18) — beide Änderungen betreffen nur das Web.
+
+### Changed
+- **Der Rollbalken ist greifbar (Web)** — er war 4 px breit. Sichtbar reichte das, mit der Maus war
+  er kaum zu treffen: in einer langen Playlist kam man nicht ans Ende, ohne zu scrollen. Jetzt 12 px
+  **Greiffläche** mit einem schmalen sichtbaren Balken darin (durchsichtiger Rand plus
+  `background-clip:content-box`), heller beim Überfahren und beim Ziehen — wie in Spotify.
+  - `min-height:44px` hält ihn auch bei sehr langen Listen greifbar; bei 1900 Titeln schrumpfte er
+    sonst auf wenige Pixel, also genau dort, wo man ihn am nötigsten hat.
+  - **Firefox bekommt nur die Farbe.** Dessen Standardbalken ist ohnehin breit genug; ein
+    `scrollbar-width:thin` hätte ihn wieder verschmälert. Die Ausnahmen, die bewusst keinen Balken
+    zeigen (waagerechte Kartenreihen, Lyrics, Chips), bleiben unangetastet.
+- **„Neu von deinen Künstlern" sitzt jetzt in den Favoriten (Web)** — es stand links unter
+  *Entdecken*, in Android dagegen als Knopf „✨ Neu" in den Favoriten. Zwei Plattformen, zwei Orte
+  für dieselbe Sache. Das Web folgt jetzt Android: der Eintrag in der Seitenleiste ist weg, in der
+  Kopfzeile der Favoriten steht der Knopf — dort, wo auch die gefolgten Künstler stehen.
+  - Der Knopf erscheint nur, wenn man überhaupt jemandem folgt, genau wie in Android.
+  - Die Seite hat dafür einen Zurück-Knopf bekommen (vorher unnötig, weil sie über die Seitenleiste
+    erreichbar war) und zählt für die Seitenleiste jetzt zur Bibliothek statt zu Entdecken.
+
+---
+
 ## [3.0] — 2026-09-19
 
 **Android:** 1.13 (versionCode 16) → 1.15 (versionCode 18). 1.13 brachte Folgen, Zeitleiste und

index.html

@@ -76,9 +76,6 @@
           <div class="nav-item" onclick="navigate('discover')" data-page="discover">
             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polygon points="10 8 16 12 10 16 10 8"/></svg>Global Suche
           </div>
-          <div class="nav-item" onclick="navigate('artist-news')" data-page="artist-news">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>Von deinen Künstlern
-          </div>
           <div class="nav-item" onclick="navigate('new-releases')" data-page="new-releases">
             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>Neue Releases
           </div>
@@ -265,7 +262,14 @@
 
       <!-- STARRED -->
       <div class="page" id="page-starred">
-        <div class="page-header"><div class="page-title">Favoriten ⭐</div></div>
+        <div class="page-header">
+          <div class="page-title">Favoriten ⭐</div>
+          <!-- Einstieg in die Zeitleiste steht dort, wo auch die gefolgten Kuenstler stehen —
+               gleiche Stelle wie in Android. Erscheint nur, wenn man ueberhaupt jemandem folgt. -->
+          <button id="starred-news-btn" class="btn-outline" style="display:none;font-size:12px;padding:8px 14px" onclick="navigate('artist-news')">
+            ✨ Neu
+          </button>
+        </div>
         <div id="starred-sort-chips" class="sort-chips">
           <button class="sort-chip active" data-sort="newest" onclick="loadStarred('newest')">Neueste</button>
           <button class="sort-chip" data-sort="oldest" onclick="loadStarred('oldest')">Älteste</button>
@@ -418,6 +422,7 @@
 
       <!-- NEW RELEASES -->
       <div class="page" id="page-artist-news">
+        <button class="back-btn" id="artist-news-back-btn"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg>Favoriten</button>
         <div class="page-header">
           <div class="page-title">Neu von <em>deinen Künstlern</em></div>
         </div>

src/views/artistNews.js

@@ -3,7 +3,7 @@ import { esc } from '../utils.js';
 import { api } from '../api.js';
 import { openDlModal } from '../ui/ui.js';
 // Zirkulär — sicher, weil nur in Ereignisbehandlern aufgerufen
-import { navigate } from './navigation.js';
+import { navigate, _navGoBack } from './navigation.js';
 
 // ─── NEU VON DEINEN KÜNSTLERN ───────────────────────────────────────────────
 // Zeitleiste der jüngsten Veröffentlichungen aller Künstler, denen man folgt. "Folgen" ist
@@ -15,6 +15,10 @@ let _laeuft = false;
 
 export async function loadArtistNews(tage = _tage) {
   _tage = tage;
+  // Die Seite haengt an den Favoriten (Knopf "✨ Neu") und nicht mehr an der Seitenleiste,
+  // deshalb braucht sie einen Weg zurueck wie jede andere Unterseite.
+  const zurueck = document.getElementById('artist-news-back-btn');
+  if (zurueck) zurueck.onclick = () => _navGoBack();
   document.querySelectorAll('#artist-news-sort .sort-chip').forEach(c =>
     c.classList.toggle('active', Number(c.dataset.days) === tage));
 

src/views/navigation.js

@@ -92,7 +92,7 @@ export function navigate(page, data=null) {
 
   document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
   document.querySelectorAll('.nav-item,.bnav-item').forEach(n => n.classList.remove('active','active-blue'));
-  const cls = ['discover','new-releases','recommendations','artist-news'].includes(page) ? 'active-blue' : 'active';
+  const cls = ['discover','new-releases','recommendations'].includes(page) ? 'active-blue' : 'active';
   document.querySelectorAll(`[data-page="${page}"]`).forEach(el => el.classList.add(cls));
   const pageEl = document.getElementById(`page-${page}`);
   if(pageEl) {
@@ -109,8 +109,10 @@ export function navigate(page, data=null) {
     }
   }
   closeSidebar();
-  if(['discover','new-releases','recommendations','random','artist-news'].includes(page)) switchNavMode('discover');
-  else if(['home','artists','albums','starred','playlists'].includes(page)) switchNavMode('library');
+  // artist-news haengt jetzt an den Favoriten (Knopf "✨ Neu"), nicht mehr an Entdecken —
+  // deshalb bleibt die Seitenleiste in der Bibliothek stehen und Favoriten bleibt markiert.
+  if(['discover','new-releases','recommendations','random'].includes(page)) switchNavMode('discover');
+  else if(['home','artists','albums','starred','playlists','artist-news'].includes(page)) switchNavMode('library');
 
   if(page==='home')    loadHomeData(!S._navJumping); // explicit Home click refreshes; back/forward keeps state
   if(page==='artists' && !document.getElementById('artists-grid').children.length) loadArtists();

src/views/playlists.js

@@ -265,6 +265,10 @@ function _passendeAnzahl(wrap) {
 let _starredArtists = [];
 function _renderStarredArtists(artists) {
   _starredArtists = artists;
+  // "✨ Neu" fuehrt in die Zeitleiste und steht in der Kopfzeile der Favoriten — dieselbe
+  // Stelle wie in Android. Ohne gefolgte Kuenstler gaebe es dort nichts zu sehen.
+  const neuBtn = document.getElementById('starred-news-btn');
+  if (neuBtn) neuBtn.style.display = artists.length ? '' : 'none';
   const wrap = document.getElementById('starred-artists-section');
   if (!wrap) return;
   wrap.innerHTML = '';

styles.css

@@ -20,7 +20,20 @@
 #app input,#app textarea,#app [contenteditable=true],#app .selectable,
 #app #np-lyrics-content,#app .lyrics-line,#app .lyrics-plain{-webkit-user-select:text;user-select:text}
 html,body{height:100%;font-family:var(--font);background:var(--bg);color:var(--text);overflow:hidden}
-::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--surface2);border-radius:2px}
+/* Rollbalken: 4 px waren zwar unauffaellig, aber mit der Maus kaum zu treffen — in einer langen
+   Playlist kam man nicht ans Ende. Jetzt 12 px Greiffläche mit einem schmalen sichtbaren Balken
+   (durchsichtiger Rand + background-clip), wie bei Spotify. min-height haelt ihn bei sehr langen
+   Listen greifbar, sonst schrumpft er bei 1900 Titeln auf wenige Pixel. */
+::-webkit-scrollbar{width:12px;height:12px}
+::-webkit-scrollbar-track{background:transparent}
+::-webkit-scrollbar-thumb{background:var(--surface2);border-radius:8px;border:3px solid transparent;background-clip:content-box;min-height:44px}
+::-webkit-scrollbar-thumb:hover{background:var(--text3);background-clip:content-box}
+::-webkit-scrollbar-thumb:active{background:var(--text2);background-clip:content-box}
+::-webkit-scrollbar-corner{background:transparent}
+/* Firefox kennt die ::-webkit-Regeln nicht. Dort NUR die Farbe setzen — der Standardbalken ist
+   ohnehin breit genug zum Greifen, "thin" wuerde ihn wieder verschmaelern. scrollbar-color wird
+   vererbt; die Ausnahmen (.scroll-row, Lyrics, Chips) setzen weiterhin scrollbar-width:none. */
+html{scrollbar-color:var(--surface2) transparent}
 
 /* ── SETUP ── */
 html.ns-authed #setup-screen{display:none}