feat(slint): sidebar playlists list + create-playlist modal

- SidebarState/SidebarActions + crate::sidebar: the user's playlists
    load into the left-nav list on shell entry; clicking a row opens
    the playlist detail view, with the open playlist highlighted
    (active-id). Empty state shown when there are none.
  - The sidebar "+" opens a CreatePlaylistModal (name field + public
    toggle); submit calls create_playlist, refreshes the sidebar, and
    navigates to the new playlist.

cc

crates/qbz-slint/src/main.rs

@@ -41,6 +41,7 @@ mod recently;
 mod search;
 mod settings;
 mod share;
+mod sidebar;
 mod ui_prefs;
 
 use std::sync::Arc;
@@ -80,6 +81,9 @@ async fn enter_shell(
     // the queue on track end. Safe to start once per shell entry.
     playback::start_poll_loop(runtime.clone(), weak.clone(), tokio::runtime::Handle::current());
 
+    // Load the sidebar playlists list.
+    load_sidebar_playlists(runtime.clone(), weak.clone(), &tokio::runtime::Handle::current());
+
     // Load Audio + Playback settings into the Settings page in the
     // background — store reads and device enumeration are blocking.
     {
@@ -658,8 +662,10 @@ fn navigate_playlist(
         return;
     };
     handle.spawn(async move {
+        let active = playlist_id.clone();
         let _ = weak.upgrade_in_event_loop(move |w| {
             playlist::reset(&w);
+            sidebar::set_active(&w, &active);
             w.global::<NavState>().set_view(ContentView::Playlist);
         });
         if let Some(data) = playlist::load(&runtime, id).await {
@@ -672,6 +678,21 @@ fn navigate_playlist(
     });
 }
 
+/// Load (or reload) the sidebar playlists list off-thread.
+fn load_sidebar_playlists(
+    runtime: Arc<AppRuntime<SlintAdapter>>,
+    weak: slint::Weak<AppWindow>,
+    handle: &tokio::runtime::Handle,
+) {
+    let _ = weak.upgrade_in_event_loop(|w| sidebar::set_loading(&w, true));
+    handle.spawn(async move {
+        let playlists = sidebar::load(&runtime).await;
+        let _ = weak.upgrade_in_event_loop(move |w| {
+            sidebar::apply(&w, playlists);
+        });
+    });
+}
+
 /// Open a MusicianPageView for `name + role`. Routes to the artist
 /// page instead when the resolved musician has a Confirmed Qobuz
 /// match (Tauri's `confidence === 'confirmed'` shortcut). Fetches
@@ -2332,6 +2353,102 @@ fn main() -> Result<(), Box<dyn std::error::Error>> {
             });
     }
 
+    // Sidebar playlists — open a row, or create a new playlist.
+    {
+        let runtime = app_runtime.clone();
+        let weak = window.as_weak();
+        let handle = tokio_rt.handle().clone();
+        let image_cache = image_cache.clone();
+        window
+            .global::<SidebarActions>()
+            .on_open_playlist(move |id| {
+                nav::record(nav::NavEntry::Playlist(id.to_string()));
+                navigate_playlist(
+                    runtime.clone(),
+                    weak.clone(),
+                    &handle,
+                    image_cache.clone(),
+                    id.to_string(),
+                );
+                if let Some(w) = weak.upgrade() {
+                    update_nav_flags(&w);
+                }
+            });
+    }
+    {
+        let weak = window.as_weak();
+        window
+            .global::<SidebarActions>()
+            .on_create_playlist(move || {
+                if let Some(w) = weak.upgrade() {
+                    w.global::<CreatePlaylistState>().set_name("".into());
+                    w.global::<CreatePlaylistState>().set_is_public(false);
+                    w.global::<CreatePlaylistState>().set_creating(false);
+                    w.global::<CreatePlaylistState>().set_open(true);
+                }
+            });
+    }
+    {
+        let weak = window.as_weak();
+        window
+            .global::<CreatePlaylistActions>()
+            .on_close(move || {
+                if let Some(w) = weak.upgrade() {
+                    w.global::<CreatePlaylistState>().set_open(false);
+                }
+            });
+    }
+    {
+        // Create the playlist, then refresh the sidebar + open it.
+        let runtime = app_runtime.clone();
+        let weak = window.as_weak();
+        let handle = tokio_rt.handle().clone();
+        let image_cache = image_cache.clone();
+        window
+            .global::<CreatePlaylistActions>()
+            .on_submit(move || {
+                let Some(w) = weak.upgrade() else {
+                    return;
+                };
+                let state = w.global::<CreatePlaylistState>();
+                let name = state.get_name().to_string();
+                let is_public = state.get_is_public();
+                if name.trim().is_empty() || state.get_creating() {
+                    return;
+                }
+                state.set_creating(true);
+                let runtime = runtime.clone();
+                let weak = weak.clone();
+                let handle = handle.clone();
+                let image_cache = image_cache.clone();
+                handle.clone().spawn(async move {
+                    match runtime.core().create_playlist(name.trim(), None, is_public).await {
+                        Ok(playlist) => {
+                            let new_id = playlist.id.to_string();
+                            let weak2 = weak.clone();
+                            let r2 = runtime.clone();
+                            let h2 = handle.clone();
+                            let ic2 = image_cache.clone();
+                            let _ = weak.upgrade_in_event_loop(move |w| {
+                                w.global::<CreatePlaylistState>().set_creating(false);
+                                w.global::<CreatePlaylistState>().set_open(false);
+                                load_sidebar_playlists(r2.clone(), weak2.clone(), &h2);
+                                nav::record(nav::NavEntry::Playlist(new_id.clone()));
+                                navigate_playlist(r2, weak2.clone(), &h2, ic2, new_id);
+                                update_nav_flags(&w);
+                            });
+                        }
+                        Err(e) => {
+                            log::error!("[qbz-slint] create playlist failed: {e}");
+                            let _ = weak.upgrade_in_event_loop(|w| {
+                                w.global::<CreatePlaylistState>().set_creating(false);
+                            });
+                        }
+                    }
+                });
+            });
+    }
+
     // handler.
     {
         let runtime = app_runtime.clone();

crates/qbz-slint/src/sidebar.rs

@@ -0,0 +1,56 @@
+//! Sidebar playlists controller. Loads the user's own playlists into
+//! SidebarState for the left-nav list (clicking a row opens the
+//! playlist detail view). Reloaded on shell entry and after a playlist
+//! is created or deleted.
+
+use qbz_app::shell::AppRuntime;
+use qbz_core::FrontendAdapter;
+use slint::{ComponentHandle, ModelRc, VecModel};
+
+use crate::{AppWindow, SidebarPlaylistItem, SidebarState};
+
+pub struct SidebarPlaylist {
+    pub id: String,
+    pub name: String,
+}
+
+pub async fn load<A>(runtime: &AppRuntime<A>) -> Vec<SidebarPlaylist>
+where
+    A: FrontendAdapter + Send + Sync + 'static,
+{
+    match runtime.core().get_user_playlists().await {
+        Ok(playlists) => playlists
+            .into_iter()
+            .map(|p| SidebarPlaylist {
+                id: p.id.to_string(),
+                name: p.name,
+            })
+            .collect(),
+        Err(e) => {
+            log::warn!("[qbz-slint] sidebar playlists load failed: {e}");
+            Vec::new()
+        }
+    }
+}
+
+pub fn set_loading(window: &AppWindow, loading: bool) {
+    window.global::<SidebarState>().set_loading(loading);
+}
+
+pub fn apply(window: &AppWindow, playlists: Vec<SidebarPlaylist>) {
+    let items: Vec<SidebarPlaylistItem> = playlists
+        .into_iter()
+        .map(|p| SidebarPlaylistItem {
+            id: p.id.into(),
+            name: p.name.into(),
+        })
+        .collect();
+    let state = window.global::<SidebarState>();
+    state.set_playlists(ModelRc::new(VecModel::from(items)));
+    state.set_loading(false);
+}
+
+/// Highlight the open playlist in the sidebar (or clear with "").
+pub fn set_active(window: &AppWindow, id: &str) {
+    window.global::<SidebarState>().set_active_id(id.into());
+}

crates/qbz-slint/ui/app.slint

@@ -17,7 +17,7 @@ import { LoginScreen } from "login/LoginScreen.slint";
 import { AppShell } from "shell/AppShell.slint";
 
 // Re-export the state globals so the Rust layer can populate them.
-export { HomeState, HomeActions, ForYouState, MixState, GenreFilterState, GenreFilterActions, AlbumState, ArtistState, NavState, SessionState, SettingsState, AlbumActions, ArtistActions, ArtworkActions, NowPlayingState, QueueState, SearchState, SearchActions, NetworkSidebarState, NetworkSidebarActions, MusicianState, MusicianActions, LabelState, LabelActions, LocationViewState, LocationViewActions, FavoritesState, FavoritesActions, PlaylistPickerState, PlaylistPickerActions, PlaylistState } from "state.slint";
+export { HomeState, HomeActions, ForYouState, MixState, GenreFilterState, GenreFilterActions, AlbumState, ArtistState, NavState, SessionState, SettingsState, AlbumActions, ArtistActions, ArtworkActions, NowPlayingState, QueueState, SearchState, SearchActions, NetworkSidebarState, NetworkSidebarActions, MusicianState, MusicianActions, LabelState, LabelActions, LocationViewState, LocationViewActions, FavoritesState, FavoritesActions, PlaylistPickerState, PlaylistPickerActions, PlaylistState, SidebarState, SidebarActions, CreatePlaylistState, CreatePlaylistActions } from "state.slint";
 
 // Which top-level screen is shown. The app starts on `splash` while it
 // restores a saved session, then resolves to `shell` or `login`.

crates/qbz-slint/ui/primitives/CreatePlaylistModal.slint

@@ -0,0 +1,144 @@
+// "Create playlist" modal — name field + public toggle + Create.
+// Opened from the sidebar "+" button (CreatePlaylistState.open).
+
+import { Theme } from "../foundation/semantic-colors.slint";
+import { Typography } from "../foundation/typography.slint";
+import { Radius } from "../foundation/radius.slint";
+import { CreatePlaylistState, CreatePlaylistActions } from "../state.slint";
+import { QbzIcon } from "QbzIcon.slint";
+import { LineEdit } from "std-widgets.slint";
+
+export component CreatePlaylistModal inherits Rectangle {
+    visible: CreatePlaylistState.open;
+
+    if CreatePlaylistState.open: Rectangle {
+        background: #000000bf;
+        TouchArea {
+            mouse-cursor: default;
+            clicked => {
+                CreatePlaylistActions.close();
+            }
+        }
+        Rectangle {
+            width: Math.min(root.width - 80px, 420px);
+            height: panel.preferred-height;
+            x: (parent.width - self.width) / 2;
+            y: (parent.height - self.height) / 2;
+            border-radius: Radius.md;
+            background: Theme.surface-card;
+            border-width: 1px;
+            border-color: Theme.border-subtle;
+            drop-shadow-blur: 32px;
+            drop-shadow-color: #00000080;
+            TouchArea { }
+
+            panel := VerticalLayout {
+                padding: 20px;
+                spacing: 16px;
+
+                HorizontalLayout {
+                    Text {
+                        text: @tr("New playlist");
+                        color: Theme.text-primary;
+                        font-size: Typography.heading;
+                        font-weight: Typography.semibold;
+                        horizontal-stretch: 1;
+                        vertical-alignment: center;
+                    }
+                    close-x := TouchArea {
+                        width: 28px;
+                        height: 28px;
+                        mouse-cursor: pointer;
+                        clicked => {
+                            CreatePlaylistActions.close();
+                        }
+                        QbzIcon {
+                            source: @image-url("../assets/icons/x.svg");
+                            width: 17px;
+                            height: 17px;
+                            x: (parent.width - self.width) / 2;
+                            y: (parent.height - self.height) / 2;
+                            tint: close-x.has-hover ? Theme.text-primary : Theme.text-muted;
+                        }
+                    }
+                }
+
+                name-input := LineEdit {
+                    placeholder-text: @tr("Playlist name");
+                    text <=> CreatePlaylistState.name;
+                    accepted => {
+                        CreatePlaylistActions.submit();
+                    }
+                }
+
+                // Public toggle row.
+                HorizontalLayout {
+                    spacing: 10px;
+                    toggle := TouchArea {
+                        width: 20px;
+                        height: 20px;
+                        mouse-cursor: pointer;
+                        clicked => {
+                            CreatePlaylistState.is-public = !CreatePlaylistState.is-public;
+                        }
+                        Rectangle {
+                            width: 18px;
+                            height: 18px;
+                            y: (parent.height - self.height) / 2;
+                            border-radius: 4px;
+                            background: CreatePlaylistState.is-public ? Theme.accent : transparent;
+                            border-width: CreatePlaylistState.is-public ? 0px : 1.5px;
+                            border-color: Theme.text-muted;
+                            QbzIcon {
+                                source: @image-url("../assets/icons/check.svg");
+                                width: 12px;
+                                height: 12px;
+                                x: (parent.width - self.width) / 2;
+                                y: (parent.height - self.height) / 2;
+                                tint: #ffffff;
+                                visible: CreatePlaylistState.is-public;
+                            }
+                        }
+                    }
+                    Text {
+                        text: @tr("Public playlist");
+                        color: Theme.text-secondary;
+                        font-size: Typography.body;
+                        vertical-alignment: center;
+                        horizontal-stretch: 1;
+                    }
+                }
+
+                // Create button.
+                HorizontalLayout {
+                    alignment: end;
+                    spacing: 10px;
+                    Rectangle {
+                        width: create-label.preferred-width + 36px;
+                        height: 36px;
+                        border-radius: Radius.sm;
+                        opacity: (CreatePlaylistState.name != "" && !CreatePlaylistState.creating) ? 1.0 : 0.5;
+                        background: create-ta.has-hover ? #ffffffd6 : Theme.accent;
+                        create-label := Text {
+                            text: CreatePlaylistState.creating ? @tr("Creating...") : @tr("Create");
+                            color: #ffffff;
+                            font-size: Typography.body;
+                            font-weight: Typography.semibold;
+                            x: (parent.width - self.width) / 2;
+                            y: (parent.height - self.height) / 2;
+                        }
+                        create-ta := TouchArea {
+                            mouse-cursor: (CreatePlaylistState.name != "" && !CreatePlaylistState.creating)
+                                ? pointer : default;
+                            clicked => {
+                                if (CreatePlaylistState.name != "" && !CreatePlaylistState.creating) {
+                                    CreatePlaylistActions.submit();
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

crates/qbz-slint/ui/shell/AppShell.slint

@@ -11,6 +11,7 @@ import { Sidebar } from "Sidebar.slint";
 import { HeaderBar } from "HeaderBar.slint";
 import { HeaderMenuOverlay } from "HeaderMenuOverlay.slint";
 import { PlaylistPickerModal } from "../primitives/PlaylistPickerModal.slint";
+import { CreatePlaylistModal } from "../primitives/CreatePlaylistModal.slint";
 import { PlayerBar } from "PlayerBar.slint";
 import { QueueSidebar } from "QueueSidebar.slint";
 import { LyricsSidebar } from "LyricsSidebar.slint";
@@ -222,4 +223,7 @@ export component AppShell inherits Rectangle {
     // Global "Add to playlist" picker overlay, opened from any track
     // context menu.
     PlaylistPickerModal { }
+
+    // Global "Create playlist" modal, opened from the sidebar "+".
+    CreatePlaylistModal { }
 }

crates/qbz-slint/ui/shell/Sidebar.slint

@@ -12,9 +12,49 @@
 import { Theme } from "../foundation/semantic-colors.slint";
 import { Spacing } from "../foundation/spacing.slint";
 import { QbzIcon } from "../primitives/QbzIcon.slint";
-import { ShellState } from "../state.slint";
+import { ShellState, SidebarState, SidebarActions, SidebarPlaylistItem } from "../state.slint";
 import { ScrollView } from "std-widgets.slint";
 
+// One playlist row in the sidebar.
+component PlaylistRow inherits Rectangle {
+    in property <SidebarPlaylistItem> item;
+    in property <bool> active: false;
+    callback clicked(string);
+
+    height: 32px;
+    border-radius: 6px;
+    background: ta.has-hover || root.active ? Theme.surface-hover : transparent;
+
+    HorizontalLayout {
+        padding-left: 8px;
+        padding-right: 8px;
+        spacing: 8px;
+        VerticalLayout {
+            alignment: center;
+            QbzIcon {
+                source: @image-url("../assets/icons/list-music.svg");
+                width: 15px;
+                height: 15px;
+                tint: root.active ? Theme.text-primary : Theme.text-muted;
+            }
+        }
+        Text {
+            text: root.item.name;
+            color: root.active ? Theme.text-primary : Theme.text-secondary;
+            font-size: 13px;
+            vertical-alignment: center;
+            horizontal-stretch: 1;
+            overflow: elide;
+        }
+    }
+    ta := TouchArea {
+        mouse-cursor: pointer;
+        clicked => {
+            root.clicked(root.item.id);
+        }
+    }
+}
+
 export component Sidebar inherits Rectangle {
     // Rendered width — 0 when collapsed, otherwise the user-set width.
     width: ShellState.sidebar-collapsed ? 0px : ShellState.sidebar-width;
@@ -44,11 +84,25 @@ export component Sidebar inherits Rectangle {
             }
             VerticalLayout {
                 alignment: center;
-                QbzIcon {
-                    source: @image-url("../assets/icons/plus.svg");
-                    width: 16px;
-                    height: 16px;
-                    tint: Theme.text-muted;
+                Rectangle {
+                    width: 22px;
+                    height: 22px;
+                    border-radius: 4px;
+                    background: plus-ta.has-hover ? Theme.surface-hover : transparent;
+                    QbzIcon {
+                        source: @image-url("../assets/icons/plus.svg");
+                        width: 16px;
+                        height: 16px;
+                        x: (parent.width - self.width) / 2;
+                        y: (parent.height - self.height) / 2;
+                        tint: plus-ta.has-hover ? Theme.text-primary : Theme.text-muted;
+                    }
+                    plus-ta := TouchArea {
+                        mouse-cursor: pointer;
+                        clicked => {
+                            SidebarActions.create-playlist();
+                        }
+                    }
                 }
             }
         }
@@ -58,8 +112,20 @@ export component Sidebar inherits Rectangle {
             horizontal-scrollbar-policy: ScrollBarPolicy.always-off;
             VerticalLayout {
                 spacing: 2px;
-                // Real playlist rows are populated when the sidebar
-                // milestone wires playlist data. No fixtures.
+                alignment: start;
+                for pl in SidebarState.playlists: PlaylistRow {
+                    item: pl;
+                    active: pl.id == SidebarState.active-id;
+                    clicked(id) => {
+                        SidebarActions.open-playlist(id);
+                    }
+                }
+                if SidebarState.playlists.length == 0 && !SidebarState.loading: Text {
+                    text: @tr("No playlists yet.");
+                    color: Theme.text-muted;
+                    font-size: 12px;
+                    wrap: word-wrap;
+                }
             }
         }
     }

crates/qbz-slint/ui/state.slint

@@ -198,6 +198,39 @@ export global AlbumActions {
 // Which content view the shell shows.
 export enum ContentView { home, album, artist, settings, search, musician, label, location, favorites, mix, playlist }
 
+// One row in the sidebar playlists list.
+export struct SidebarPlaylistItem {
+    id: string,
+    name: string,
+}
+
+// The sidebar's playlists list (the user's own playlists). Populated
+// by crate::sidebar on shell entry and after create/delete.
+export global SidebarState {
+    in property <[SidebarPlaylistItem]> playlists: [];
+    in property <bool> loading: false;
+    // The currently-open playlist id, for the active-row highlight.
+    in property <string> active-id;
+}
+
+export global SidebarActions {
+    callback open-playlist(string /* id */);
+    callback create-playlist();
+}
+
+// "Create playlist" modal state.
+export global CreatePlaylistState {
+    in-out property <bool> open: false;
+    in-out property <string> name;
+    in-out property <bool> is-public: false;
+    in property <bool> creating: false;
+}
+
+export global CreatePlaylistActions {
+    callback submit();
+    callback close();
+}
+
 // Playlist detail screen state. Rows reuse the shared TrackRow
 // (show-artwork + show-album); populated by crate::playlist.
 export global PlaylistState {