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>

index.html

@@ -64,12 +64,6 @@
           <div class="nav-item" onclick="navigate('albums')" data-page="albums">
             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="3"/></svg>Alben
           </div>
-          <div class="nav-item" onclick="navigate('playlists')" data-page="playlists">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg>Playlists
-          </div>
-          <div class="nav-item" onclick="navigate('starred')" data-page="starred">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>Favoriten
-          </div>
         </div>
         <div class="nav-section">
           <div class="nav-section-title">Entdecken</div>
@@ -92,6 +86,24 @@
             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg>Bibliothek
           </div>
         </div>
+
+        <!-- Deine Musik: Favoriten, "Neu von deinen Kuenstlern" und die Playlists als LISTE
+             statt als Knopf, der erst eine Uebersichtsseite oeffnet. Der Listenteil rollt
+             eigenstaendig, damit die Navigation darueber immer sichtbar bleibt. -->
+        <div class="nav-section lib-section">
+          <div class="lib-head">
+            <span class="nav-section-title">Deine Musik</span>
+            <button class="lib-btn" onclick="navigate('playlists')" title="Alle Playlists als Kacheln">Alle</button>
+            <button class="lib-btn lib-btn-add" onclick="createPlaylistPrompt()" title="Neue Playlist" aria-label="Neue Playlist">+</button>
+          </div>
+          <div class="nav-item" onclick="navigate('starred')" data-page="starred">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>Favoriten
+          </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="M12 3l1.9 4.6L18.5 9.5 13.9 11.4 12 16l-1.9-4.6L5.5 9.5l4.6-1.9L12 3z"/></svg>Neu von deinen Künstlern
+          </div>
+          <div class="lib-list" id="sidebar-playlists"></div>
+        </div>
       </nav>
     </aside>