feat(web): Playlists und Favoriten als Liste in der Seitenleiste

Statt zweier Knoepfe, die erst eine Uebersichtsseite oeffnen, steht unter den
Navigationsrubriken der Abschnitt "Deine Musik": angepinnt Favoriten und "Neu von
deinen Kuenstlern", darunter die Playlists mit Cover und Titelzahl.

Links und nicht rechts, weil rechts belegt ist: dort faehrt die Warteschlange als
290-px-Panel ein und am Rand sitzt der Rollbalken aus 3.1.

Der Listenteil rollt eigenstaendig (nav ist jetzt eine Flex-Spalte), auf niedrigen
Fenstern rollt als Rueckfall die ganze Leiste. Dieselbe gecachte Abfrage wie die
Uebersichtsseite; nach Anlegen/Umbenennen/Loeschen wird der Cache verworfen und neu
gezeichnet, ein Coverwechsel tauscht nur die betroffene Zeile (gleiche Adresse pl-<id>,
sonst kaeme dasselbe Bild aus dem Browser-Cache).

Die Kachel-Uebersicht bleibt per "Alle" erreichbar, die untere Leiste auf dem Handy
bleibt unveraendert.

Ausserdem: in 3.2 uebersehene Mischstelle nachgezogen — der Shuffle-Knopf der
Playlist-Seite benutzte weiter sort(() => Math.random()-.5). Mein Suchmuster hatte nur
die Schreibweise mit 0.5 erfasst, nicht die mit .5.

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

styles.css

@@ -95,7 +95,30 @@ html.ns-authed #setup-screen{display:none}
 @media(max-width:768px){#header-search-overlay{max-height:calc(100vh - var(--player-h) - 160px)}}
 @media(max-width:359px){#mobile-header .sidebar-logo span{display:none}}
 
-nav{flex:1;overflow-y:auto;padding:4px 10px}
+/* Die Navigation ist eine Spalte: oben die festen Eintraege, unten die Playlist-Liste, die
+   den Rest einnimmt und selbst rollt. `overflow-y:auto` bleibt als Rueckfall fuer sehr niedrige
+   Fenster — dann rollt die ganze Leiste, statt die Liste auf null zu quetschen. */
+nav{flex:1;min-height:0;display:flex;flex-direction:column;overflow-y:auto;padding:4px 10px}
+
+/* ── DEINE MUSIK (Seitenleiste) ── */
+.lib-section{display:flex;flex-direction:column;flex:1;min-height:0;margin-bottom:0}
+.lib-head{display:flex;align-items:center;gap:6px;padding:0 2px 3px 8px}
+.lib-head .nav-section-title{flex:1;padding:0;margin:0}
+.lib-btn{flex-shrink:0;background:none;border:none;color:var(--text3);font-family:var(--font);font-size:11px;font-weight:600;padding:2px 6px;border-radius:6px;cursor:pointer;transition:background .15s,color .15s}
+.lib-btn:hover{background:var(--surface);color:var(--text)}
+.lib-btn-add{font-size:16px;line-height:1;padding:0 6px 2px}
+.lib-list{flex:1;min-height:140px;overflow-y:auto;overflow-x:hidden;margin-top:4px;padding-bottom:4px}
+.lib-item{display:flex;align-items:center;gap:9px;padding:5px 8px;border-radius:8px;cursor:pointer;transition:background .15s;user-select:none}
+.lib-item:hover{background:var(--surface)}
+.lib-item.active{background:var(--accent-dim)}
+.lib-item.active .lib-name{color:var(--accent)}
+.lib-art{flex-shrink:0;width:30px;height:30px;border-radius:5px;background:var(--surface);display:flex;align-items:center;justify-content:center;font-size:13px;overflow:hidden}
+.lib-art img{width:100%;height:100%;object-fit:cover}
+.lib-text{min-width:0;flex:1}
+.lib-name{font-size:12.5px;font-weight:500;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.lib-item:hover .lib-name{color:var(--text)}
+.lib-sub{font-size:10.5px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.lib-empty{font-size:11.5px;color:var(--text3);padding:8px 8px 4px;line-height:1.5}
 .nav-section{margin-bottom:18px}
 .nav-section-title{font-size:10px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--text3);padding:0 8px;margin-bottom:3px}
 .nav-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;cursor:pointer;font-size:13px;font-weight:500;color:var(--text2);transition:background .15s,color .15s;user-select:none}