sidebar and artist pipeline: one list in the rail, recents anchored to ids, and popular takes its own lane

src/views/Playlists.svelte

@@ -0,0 +1,132 @@
+<script>
+    // The sidebar's Playlists row needs a destination. Playlists used to be
+    // listed in the sidebar itself; with the sidebar showing listening history
+    // instead, this is where they live.
+    import { playlistStore, refreshPlaylists, goToView } from "../lib/state.svelte.js";
+    import * as api from "../lib/api.js";
+    import Icon from "./../components/Icon.svelte";
+
+    async function newPlaylist() {
+        const name = `New Playlist ${playlistStore.playlists.length + 1}`;
+        const id = await api.createPlaylist(name);
+        await refreshPlaylists();
+        goToView("playlist", { playlistId: id, label: name });
+    }
+
+    function open(pl) {
+        goToView("playlist", { playlistId: pl.id, label: pl.name });
+    }
+</script>
+
+<div class="page">
+    <header>
+        <h1>Playlists</h1>
+        <button class="new" onclick={newPlaylist}>
+            <Icon name="plus" size={15} /> New playlist
+        </button>
+    </header>
+
+    {#if playlistStore.playlists.length === 0}
+        <p class="empty">No playlists yet.</p>
+    {:else}
+        <ul>
+            {#each playlistStore.playlists as pl (pl.id)}
+                <li>
+                    <button class="row" onclick={() => open(pl)}>
+                        <span class="ic"><Icon name="playlist" size={18} /></span>
+                        <span class="name">{pl.name}</span>
+                        <span class="count">
+                            {pl.track_count}
+                            {pl.track_count === 1 ? "track" : "tracks"}
+                        </span>
+                    </button>
+                </li>
+            {/each}
+        </ul>
+    {/if}
+</div>
+
+<style>
+    .page {
+        padding: 8px 4px 24px;
+    }
+    header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 16px;
+        margin-bottom: 18px;
+    }
+    h1 {
+        font-size: 28px;
+        font-weight: 700;
+        letter-spacing: -0.02em;
+    }
+    .new {
+        display: flex;
+        align-items: center;
+        gap: 7px;
+        padding: 8px 14px;
+        border-radius: 8px;
+        font-size: 13px;
+        font-weight: 600;
+        color: var(--text-secondary);
+        background: var(--bg-highlight);
+        transition:
+            background 0.14s,
+            color 0.14s;
+    }
+    .new:hover {
+        background: var(--bg-press);
+        color: var(--text-primary);
+    }
+    ul {
+        list-style: none;
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+    }
+    .row {
+        display: flex;
+        align-items: center;
+        gap: 13px;
+        width: 100%;
+        padding: 11px 12px;
+        border-radius: 7px;
+        text-align: left;
+        color: var(--text-secondary);
+        transition: background 0.14s;
+    }
+    .row:hover {
+        background: var(--bg-highlight);
+        color: var(--text-primary);
+    }
+    .ic {
+        display: grid;
+        place-items: center;
+        width: 40px;
+        height: 40px;
+        border-radius: 5px;
+        background: var(--bg-highlight);
+        color: var(--text-muted);
+        flex: none;
+    }
+    .name {
+        flex: 1;
+        min-width: 0;
+        font-size: 14px;
+        font-weight: 600;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+    .count {
+        font-size: 12px;
+        color: var(--text-muted);
+        flex: none;
+    }
+    .empty {
+        color: var(--text-muted);
+        font-size: 13px;
+    }
+</style>