feat(slint): Library > Favorites view (Tracks / Albums / Artists)

Wires the Library header dropdown to a real Favorites view. Mirrors
Tauri's FavoritesView.svelte core: a tab bar over per-tab content,
each tab lazy-loaded on first open.

Slint:
  - ContentView gains `favorites`. NavMenuEntry gains a `route`
    field; the Library dropdown rows carry "favorites-tracks" /
    "-albums" / "-artists" / "-playlists" / "-labels". The
    HeaderMenuOverlay click bubbles the route up through AppShell ->
    AppWindow -> Rust (new header-menu-navigate callback).
  - FavoritesState / FavoritesActions globals. Tracks reuse
    SearchTrackItem (so the shared SearchTrackRow renders them with
    per-row cover art), albums reuse AlbumCardItem + the Discover
    AlbumCard, artists use a new FavoriteArtistItem round-portrait
    grid.
  - New ui/favorites/FavoritesView.slint: title, tab bar with live
    counts + active underline, and the three populated tabs.
    Playlists / Labels show "Coming soon" pending their backing
    views. AppShell routes ContentView.favorites.

Rust:
  - crate::favorites controller — load_favorites parses the raw
    get_favorites JSON (`{ <type>: { items, total } }`) into typed
    qbz-models Track / Album / Artist, maps to the Slint structs.
    Lazy per-tab: select-tab and the header route both call
    navigate_favorites, which fetches only the opened tab.
  - artwork::ArtworkTarget gains FavoriteTrack / FavoriteAlbum /
    FavoriteArtist; covers stream in via the shared pipeline.
  - main.rs: navigate_favorites + on_header_menu_navigate +
    FavoritesActions (select-tab / open-album / open-artist /
    play-track / track-action). No new qbz-core method —
    get_favorites already existed.

Deferred: Playlists + Labels tab content, full pagination (one 500
page is fetched per tab), favorites preferences (tab order).

cc

crates/qbz-slint/src/artwork.rs

@@ -58,6 +58,12 @@ pub enum ArtworkTarget {
     LabelAlbum { index: usize },
     /// A card in LocationViewState.artists[index].
     LocationArtist { index: usize },
+    /// A row in FavoritesState.tracks[index].
+    FavoriteTrack { index: usize },
+    /// A card in FavoritesState.albums[index].
+    FavoriteAlbum { index: usize },
+    /// A card in FavoritesState.artists[index].
+    FavoriteArtist { index: usize },
 }
 
 /// An artwork download job: which card, and the image URL.
@@ -367,5 +373,26 @@ fn apply_artwork(
                 model.set_row_data(index, item);
             }
         }
+        ArtworkTarget::FavoriteTrack { index } => {
+            let model = window.global::<crate::FavoritesState>().get_tracks();
+            if let Some(mut item) = model.row_data(index) {
+                item.artwork = image;
+                model.set_row_data(index, item);
+            }
+        }
+        ArtworkTarget::FavoriteAlbum { index } => {
+            let model = window.global::<crate::FavoritesState>().get_albums();
+            if let Some(mut item) = model.row_data(index) {
+                item.artwork = image;
+                model.set_row_data(index, item);
+            }
+        }
+        ArtworkTarget::FavoriteArtist { index } => {
+            let model = window.global::<crate::FavoritesState>().get_artists();
+            if let Some(mut item) = model.row_data(index) {
+                item.image = image;
+                model.set_row_data(index, item);
+            }
+        }
     }
 }

crates/qbz-slint/src/favorites.rs

@@ -0,0 +1,313 @@
+//! Library > Favorites controller — fetches the user's saved
+//! tracks / albums / artists via `QbzCore::get_favorites` and pushes
+//! them into `FavoritesState`. Mirrors Tauri's FavoritesView.svelte
+//! data flow: each tab is fetched lazily the first time it is opened.
+//!
+//! `get_favorites` returns a raw JSON value shaped
+//! `{ <type>: { items: [...], total: N } }`; this module parses the
+//! relevant branch into typed qbz-models items and maps them to the
+//! Slint row/card structs.
+
+use std::sync::Arc;
+
+use qbz_app::shell::AppRuntime;
+use qbz_core::FrontendAdapter;
+use qbz_models::{Album, Artist, Track};
+use slint::{ComponentHandle, ModelRc, VecModel};
+
+use crate::artwork::{ArtworkJob, ArtworkTarget};
+use crate::{
+    AlbumCardItem, AppWindow, FavoriteArtistItem, FavoritesState, SearchTrackItem,
+};
+
+/// Page size — matches Tauri's FAVORITES_PAGE_SIZE. We fetch one
+/// page on tab open (favorites lists are typically small; full
+/// pagination can come later).
+pub const PAGE_SIZE: u32 = 500;
+
+/// Which favorites tab to load.
+#[derive(Clone, Copy, PartialEq, Eq)]
+pub enum FavTab {
+    Tracks,
+    Albums,
+    Artists,
+}
+
+impl FavTab {
+    pub fn from_route(route: &str) -> Option<Self> {
+        match route {
+            "favorites-tracks" => Some(Self::Tracks),
+            "favorites-albums" => Some(Self::Albums),
+            "favorites-artists" => Some(Self::Artists),
+            _ => None,
+        }
+    }
+
+    pub fn from_tab_id(id: &str) -> Option<Self> {
+        match id {
+            "tracks" => Some(Self::Tracks),
+            "albums" => Some(Self::Albums),
+            "artists" => Some(Self::Artists),
+            _ => None,
+        }
+    }
+
+    /// The Qobuz favType string + the JSON branch key.
+    fn key(self) -> &'static str {
+        match self {
+            Self::Tracks => "tracks",
+            Self::Albums => "albums",
+            Self::Artists => "artists",
+        }
+    }
+}
+
+pub enum FavData {
+    Tracks { items: Vec<TrackCard>, total: usize },
+    Albums { items: Vec<AlbumCard>, total: usize },
+    Artists { items: Vec<ArtistCard>, total: usize },
+}
+
+#[derive(Clone)]
+pub struct TrackCard {
+    pub id: String,
+    pub title: String,
+    pub artist: String,
+    pub duration: String,
+    pub quality_tier: String,
+    pub explicit: bool,
+    pub artwork_url: String,
+}
+
+#[derive(Clone)]
+pub struct AlbumCard {
+    pub id: String,
+    pub title: String,
+    pub artist: String,
+    pub year: String,
+    pub quality_tier: String,
+    pub quality_label: String,
+    pub artwork_url: String,
+}
+
+#[derive(Clone)]
+pub struct ArtistCard {
+    pub id: String,
+    pub name: String,
+    pub albums_line: String,
+    pub image_url: String,
+}
+
+/// Fetch + parse one favorites tab.
+pub async fn load_favorites<A>(
+    runtime: &Arc<AppRuntime<A>>,
+    tab: FavTab,
+) -> Result<FavData, String>
+where
+    A: FrontendAdapter + Send + Sync + 'static,
+{
+    let value = runtime
+        .core()
+        .get_favorites(tab.key(), PAGE_SIZE, 0)
+        .await
+        .map_err(|e| e.to_string())?;
+
+    let branch = value.get(tab.key());
+    let total = branch
+        .and_then(|b| b.get("total"))
+        .and_then(|t| t.as_u64())
+        .unwrap_or(0) as usize;
+    let items = branch
+        .and_then(|b| b.get("items"))
+        .cloned()
+        .unwrap_or(serde_json::Value::Null);
+
+    Ok(match tab {
+        FavTab::Tracks => {
+            let tracks: Vec<Track> = serde_json::from_value(items).unwrap_or_default();
+            FavData::Tracks {
+                items: tracks.into_iter().map(map_track).collect(),
+                total,
+            }
+        }
+        FavTab::Albums => {
+            let albums: Vec<Album> = serde_json::from_value(items).unwrap_or_default();
+            FavData::Albums {
+                items: albums.into_iter().map(map_album).collect(),
+                total,
+            }
+        }
+        FavTab::Artists => {
+            let artists: Vec<Artist> = serde_json::from_value(items).unwrap_or_default();
+            FavData::Artists {
+                items: artists.into_iter().map(map_artist).collect(),
+                total,
+            }
+        }
+    })
+}
+
+fn tier(bit_depth: Option<u32>) -> &'static str {
+    match bit_depth {
+        Some(b) if b > 16 => "hires",
+        Some(_) => "cd",
+        None => "",
+    }
+}
+
+fn mmss(secs: u32) -> String {
+    format!("{}:{:02}", secs / 60, secs % 60)
+}
+
+fn map_track(track: Track) -> TrackCard {
+    let mut title = track.title;
+    if let Some(version) = track.version.as_ref().filter(|v| !v.is_empty()) {
+        title = format!("{title} ({version})");
+    }
+    let artwork_url = track
+        .album
+        .as_ref()
+        .and_then(|a| a.image.best().cloned())
+        .unwrap_or_default();
+    TrackCard {
+        id: track.id.to_string(),
+        title,
+        artist: track.performer.map(|p| p.name).unwrap_or_default(),
+        duration: mmss(track.duration),
+        quality_tier: tier(track.maximum_bit_depth).to_string(),
+        explicit: track.parental_warning,
+        artwork_url,
+    }
+}
+
+fn map_album(album: Album) -> AlbumCard {
+    let year = album
+        .release_date_original
+        .as_deref()
+        .and_then(|s| s.get(..4).map(|y| y.to_string()))
+        .unwrap_or_default();
+    let quality_label = match (album.maximum_bit_depth, album.maximum_sampling_rate) {
+        (Some(bd), Some(sr)) => format!("{}-bit / {} kHz", bd, sr),
+        _ => String::new(),
+    };
+    AlbumCard {
+        id: album.id,
+        title: album.title,
+        artist: album.artist.name,
+        year,
+        quality_tier: tier(album.maximum_bit_depth).to_string(),
+        quality_label,
+        artwork_url: album.image.best().cloned().unwrap_or_default(),
+    }
+}
+
+fn map_artist(artist: Artist) -> ArtistCard {
+    let albums_line = match artist.albums_count {
+        Some(n) if n > 0 => format!("{} albums", n),
+        _ => String::new(),
+    };
+    ArtistCard {
+        id: artist.id.to_string(),
+        name: artist.name,
+        albums_line,
+        image_url: artist
+            .image
+            .and_then(|img| img.best().cloned())
+            .unwrap_or_default(),
+    }
+}
+
+pub fn apply_favorites(window: &AppWindow, data: FavData) {
+    let state = window.global::<FavoritesState>();
+    match data {
+        FavData::Tracks { items, total } => {
+            let rows: Vec<SearchTrackItem> = items
+                .into_iter()
+                .map(|t| SearchTrackItem {
+                    id: t.id.into(),
+                    title: t.title.into(),
+                    artist: t.artist.into(),
+                    duration: t.duration.into(),
+                    quality_tier: t.quality_tier.into(),
+                    explicit: t.explicit,
+                    artwork_url: t.artwork_url.into(),
+                    artwork: slint::Image::default(),
+                })
+                .collect();
+            state.set_tracks(ModelRc::new(VecModel::from(rows)));
+            state.set_tracks_total(total as i32);
+        }
+        FavData::Albums { items, total } => {
+            let cards: Vec<AlbumCardItem> = items
+                .into_iter()
+                .map(|a| AlbumCardItem {
+                    id: a.id.into(),
+                    title: a.title.into(),
+                    artist: a.artist.into(),
+                    genre: "".into(),
+                    year: a.year.into(),
+                    quality_tier: a.quality_tier.into(),
+                    quality_label: a.quality_label.into(),
+                    ribbon: "".into(),
+                    ribbon_kind: "".into(),
+                    artwork_url: a.artwork_url.into(),
+                    artwork: slint::Image::default(),
+                })
+                .collect();
+            state.set_albums(ModelRc::new(VecModel::from(cards)));
+            state.set_albums_total(total as i32);
+        }
+        FavData::Artists { items, total } => {
+            let cards: Vec<FavoriteArtistItem> = items
+                .into_iter()
+                .map(|a| FavoriteArtistItem {
+                    id: a.id.into(),
+                    name: a.name.into(),
+                    albums_line: a.albums_line.into(),
+                    image_url: a.image_url.into(),
+                    image: slint::Image::default(),
+                })
+                .collect();
+            state.set_artists(ModelRc::new(VecModel::from(cards)));
+            state.set_artists_total(total as i32);
+        }
+    }
+    state.set_loading(false);
+}
+
+pub fn reset_loading(window: &AppWindow) {
+    window.global::<FavoritesState>().set_loading(true);
+}
+
+/// Artwork jobs for the freshly loaded tab.
+pub fn artwork_jobs(data: &FavData) -> Vec<ArtworkJob> {
+    match data {
+        FavData::Tracks { items, .. } => items
+            .iter()
+            .enumerate()
+            .filter(|(_, t)| !t.artwork_url.is_empty())
+            .map(|(i, t)| ArtworkJob {
+                url: t.artwork_url.clone(),
+                target: ArtworkTarget::FavoriteTrack { index: i },
+            })
+            .collect(),
+        FavData::Albums { items, .. } => items
+            .iter()
+            .enumerate()
+            .filter(|(_, a)| !a.artwork_url.is_empty())
+            .map(|(i, a)| ArtworkJob {
+                url: a.artwork_url.clone(),
+                target: ArtworkTarget::FavoriteAlbum { index: i },
+            })
+            .collect(),
+        FavData::Artists { items, .. } => items
+            .iter()
+            .enumerate()
+            .filter(|(_, a)| !a.image_url.is_empty())
+            .map(|(i, a)| ArtworkJob {
+                url: a.image_url.clone(),
+                target: ArtworkTarget::FavoriteArtist { index: i },
+            })
+            .collect(),
+    }
+}

crates/qbz-slint/src/main.rs

@@ -22,6 +22,7 @@ mod auth;
 mod commands;
 mod custom_artwork;
 mod discovery_dismiss;
+mod favorites;
 mod home;
 mod label;
 mod location_view;
@@ -526,6 +527,44 @@ fn navigate_label(
     });
 }
 
+/// Open Library > Favorites on `tab` and lazy-load that tab's data.
+/// Switching the active tab also routes here so each tab fetches on
+/// first view (Tauri's loadTabIfNeeded).
+fn navigate_favorites(
+    runtime: Arc<AppRuntime<SlintAdapter>>,
+    weak: slint::Weak<AppWindow>,
+    handle: &tokio::runtime::Handle,
+    image_cache: artwork::ImageCache,
+    tab: favorites::FavTab,
+    tab_id: &str,
+) {
+    let tab_id = tab_id.to_string();
+    handle.spawn(async move {
+        let tab_id_for_ui = tab_id.clone();
+        let _ = weak.upgrade_in_event_loop(move |w| {
+            let state = w.global::<FavoritesState>();
+            state.set_active_tab(tab_id_for_ui.into());
+            favorites::reset_loading(&w);
+            w.global::<NavState>().set_view(ContentView::Favorites);
+        });
+        match favorites::load_favorites(&runtime, tab).await {
+            Ok(data) => {
+                let jobs = favorites::artwork_jobs(&data);
+                let _ = weak.upgrade_in_event_loop(move |w| {
+                    favorites::apply_favorites(&w, data);
+                });
+                artwork::spawn_loads(jobs, weak.clone(), image_cache.clone());
+            }
+            Err(e) => {
+                log::error!("[qbz-slint] favorites load failed: {e}");
+                let _ = weak.upgrade_in_event_loop(|w| {
+                    w.global::<FavoritesState>().set_loading(false);
+                });
+            }
+        }
+    });
+}
+
 /// 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
@@ -1723,6 +1762,105 @@ fn main() -> Result<(), Box<dyn std::error::Error>> {
             });
     }
 
+    // Header nav-menu navigation — currently routes the Library
+    // dropdown rows into Library > Favorites tabs.
+    {
+        let runtime = app_runtime.clone();
+        let weak = window.as_weak();
+        let handle = tokio_rt.handle().clone();
+        let image_cache = image_cache.clone();
+        window.on_header_menu_navigate(move |route| {
+            if route == "home" {
+                if let Some(w) = weak.upgrade() {
+                    w.global::<NavState>().set_view(ContentView::Home);
+                }
+                return;
+            }
+            if let Some(tab) = favorites::FavTab::from_route(route.as_str()) {
+                let tab_id = route.strip_prefix("favorites-").unwrap_or("tracks");
+                nav::record(nav::NavEntry::Home); // favorites is not yet a history entry
+                navigate_favorites(
+                    runtime.clone(),
+                    weak.clone(),
+                    &handle,
+                    image_cache.clone(),
+                    tab,
+                    tab_id,
+                );
+            }
+        });
+    }
+
+    // Favorites view actions — tab switch (lazy-load), open album /
+    // artist, and per-row track actions routed to the media-action
+    // handler.
+    {
+        let runtime = app_runtime.clone();
+        let weak = window.as_weak();
+        let handle = tokio_rt.handle().clone();
+        let image_cache = image_cache.clone();
+        window
+            .global::<FavoritesActions>()
+            .on_select_tab(move |id| {
+                let Some(tab) = favorites::FavTab::from_tab_id(id.as_str()) else {
+                    // Playlists / Labels: just switch the visible tab,
+                    // their content is not implemented yet.
+                    if let Some(w) = weak.upgrade() {
+                        w.global::<FavoritesState>().set_active_tab(id);
+                    }
+                    return;
+                };
+                navigate_favorites(
+                    runtime.clone(),
+                    weak.clone(),
+                    &handle,
+                    image_cache.clone(),
+                    tab,
+                    id.as_str(),
+                );
+            });
+    }
+    {
+        let weak = window.as_weak();
+        window
+            .global::<FavoritesActions>()
+            .on_open_album(move |id| {
+                if let Some(w) = weak.upgrade() {
+                    w.invoke_open_album(id);
+                }
+            });
+    }
+    {
+        let weak = window.as_weak();
+        window
+            .global::<FavoritesActions>()
+            .on_open_artist(move |id| {
+                if let Some(w) = weak.upgrade() {
+                    w.invoke_open_artist(id);
+                }
+            });
+    }
+    {
+        let weak = window.as_weak();
+        window
+            .global::<FavoritesActions>()
+            .on_play_track(move |id| {
+                if let Some(w) = weak.upgrade() {
+                    w.invoke_media_action("track".into(), id, "play".into());
+                }
+            });
+    }
+    {
+        let weak = window.as_weak();
+        window
+            .global::<FavoritesActions>()
+            .on_track_action(move |id, action| {
+                if let Some(w) = weak.upgrade() {
+                    w.invoke_media_action("track".into(), id, action);
+                }
+            });
+    }
+
     // Artwork right-click menu wiring — Open in browser / Save as /
     // Add custom / Remove custom. Mirrors the v2_library_* + native
     // dialog flow Tauri uses on artist portraits + album covers.

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, AlbumState, ArtistState, NavState, SessionState, SettingsState, AlbumActions, ArtistActions, ArtworkActions, NowPlayingState, QueueState, SearchState, SearchActions, NetworkSidebarState, NetworkSidebarActions, MusicianState, MusicianActions, LabelState, LabelActions, LocationViewState, LocationViewActions } from "state.slint";
+export { HomeState, AlbumState, ArtistState, NavState, SessionState, SettingsState, AlbumActions, ArtistActions, ArtworkActions, NowPlayingState, QueueState, SearchState, SearchActions, NetworkSidebarState, NetworkSidebarActions, MusicianState, MusicianActions, LabelState, LabelActions, LocationViewState, LocationViewActions, FavoritesState, FavoritesActions } 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`.
@@ -46,6 +46,7 @@ export component AppWindow inherits Window {
     callback open-album(string);
     callback open-artist(string);
     callback media-action(string, string, string);
+    callback header-menu-navigate(string);
     callback settings-bool(string, bool);
     callback settings-select(string, int);
     callback settings-slider(string, int);
@@ -80,6 +81,9 @@ export component AppWindow inherits Window {
         media-action(kind, id, action) => {
             root.media-action(kind, id, action);
         }
+        header-menu-navigate(route) => {
+            root.header-menu-navigate(route);
+        }
         settings-bool(k, v) => {
             root.settings-bool(k, v);
         }

crates/qbz-slint/ui/favorites/FavoritesView.slint

@@ -0,0 +1,278 @@
+// Library > Favorites — the user's saved tracks / albums / artists /
+// playlists / labels. Mirrors Tauri's FavoritesView.svelte core: a
+// tab bar over per-tab content. Tracks reuse the shared
+// SearchTrackRow, albums the Discover AlbumCard, artists a round-
+// portrait grid. Playlists + Labels are stubbed pending their
+// backing views.
+
+import { Theme } from "../foundation/semantic-colors.slint";
+import { Typography } from "../foundation/typography.slint";
+import {
+    FavoritesState,
+    FavoritesActions,
+    AlbumCardItem,
+    SearchTrackItem,
+    FavoriteArtistItem,
+} from "../state.slint";
+import { AlbumCard } from "../discover/AlbumCard.slint";
+import { SearchTrackRow } from "../search/SearchTrackRow.slint";
+import { QbzIcon } from "../primitives/QbzIcon.slint";
+import { LoadingSpinner } from "../primitives/LoadingSpinner.slint";
+
+// One tab in the favorites tab bar.
+component FavTab inherits Rectangle {
+    in property <string> label;
+    in property <string> id;
+    in property <int> count;
+    callback selected(string);
+
+    property <bool> active: FavoritesState.active-tab == root.id;
+    height: 34px;
+    width: tab-row.preferred-width;
+
+    tab-row := HorizontalLayout {
+        padding-left: 4px;
+        padding-right: 4px;
+        spacing: 6px;
+        Text {
+            text: root.label;
+            color: root.active ? Theme.text-primary : Theme.text-muted;
+            font-size: Typography.body;
+            font-weight: root.active ? Typography.semibold : Typography.regular;
+            vertical-alignment: center;
+        }
+        if root.count > 0: Text {
+            text: root.count;
+            color: Theme.text-muted;
+            font-size: Typography.legal;
+            vertical-alignment: center;
+        }
+    }
+    // Active underline.
+    Rectangle {
+        y: parent.height - 2px;
+        height: 2px;
+        width: parent.width;
+        background: root.active ? Theme.accent : transparent;
+        border-radius: 1px;
+    }
+    ta := TouchArea {
+        mouse-cursor: pointer;
+        clicked => {
+            root.selected(root.id);
+        }
+    }
+}
+
+component FavArtistCard inherits Rectangle {
+    in property <FavoriteArtistItem> item;
+    callback clicked(string);
+
+    width: 160px;
+    height: 200px;
+
+    VerticalLayout {
+        spacing: 10px;
+        Rectangle {
+            width: 140px;
+            height: 140px;
+            x: (parent.width - self.width) / 2;
+            border-radius: 70px;
+            background: Theme.surface-elevated;
+            clip: true;
+            Image {
+                width: 100%;
+                height: 100%;
+                source: root.item.image;
+                image-fit: cover;
+            }
+            if root.item.image-url == "": QbzIcon {
+                source: @image-url("../assets/icons/user.svg");
+                width: 44px;
+                height: 44px;
+                x: (parent.width - self.width) / 2;
+                y: (parent.height - self.height) / 2;
+                tint: Theme.text-muted;
+            }
+            ta := TouchArea {
+                mouse-cursor: pointer;
+                clicked => {
+                    root.clicked(root.item.id);
+                }
+            }
+        }
+        Text {
+            text: root.item.name;
+            color: Theme.text-primary;
+            font-size: Typography.body;
+            font-weight: Typography.medium;
+            horizontal-alignment: center;
+            overflow: elide;
+            width: 160px;
+        }
+        if root.item.albums-line != "": Text {
+            text: root.item.albums-line;
+            color: Theme.text-muted;
+            font-size: Typography.legal;
+            horizontal-alignment: center;
+            width: 160px;
+        }
+    }
+}
+
+export component FavoritesView inherits Rectangle {
+    callback open-album(string);
+    callback open-artist(string);
+
+    property <length> album-w: 220px;
+    property <length> album-h: 266px;
+    property <length> artist-w: 160px;
+    property <length> artist-h: 200px;
+    property <length> gap: 24px;
+
+    background: Theme.surface-main;
+
+    Flickable {
+        viewport-width: self.width;
+        viewport-height: page.preferred-height;
+
+        page := VerticalLayout {
+            width: parent.width;
+            padding-left: 32px;
+            padding-right: 32px;
+            padding-top: 20px;
+            padding-bottom: 100px;
+            spacing: 0px;
+            alignment: start;
+
+            Text {
+                text: @tr("Favorites");
+                color: Theme.text-primary;
+                font-size: Typography.title;
+                font-weight: Typography.bold;
+            }
+
+            Rectangle { height: 16px; }
+
+            // --- Tab bar -----------------------------------------------
+            HorizontalLayout {
+                spacing: 20px;
+                alignment: start;
+                FavTab {
+                    label: @tr("Tracks");
+                    id: "tracks";
+                    count: FavoritesState.tracks-total;
+                    selected(id) => { FavoritesActions.select-tab(id); }
+                }
+                FavTab {
+                    label: @tr("Albums");
+                    id: "albums";
+                    count: FavoritesState.albums-total;
+                    selected(id) => { FavoritesActions.select-tab(id); }
+                }
+                FavTab {
+                    label: @tr("Artists");
+                    id: "artists";
+                    count: FavoritesState.artists-total;
+                    selected(id) => { FavoritesActions.select-tab(id); }
+                }
+                FavTab {
+                    label: @tr("Playlists");
+                    id: "playlists";
+                    selected(id) => { FavoritesActions.select-tab(id); }
+                }
+                FavTab {
+                    label: @tr("Labels");
+                    id: "labels";
+                    selected(id) => { FavoritesActions.select-tab(id); }
+                }
+            }
+            Rectangle {
+                height: 1px;
+                background: Theme.border-subtle;
+            }
+            Rectangle { height: 20px; }
+
+            if FavoritesState.loading: HorizontalLayout {
+                alignment: center;
+                LoadingSpinner { size: 36px; }
+            }
+
+            // --- Tracks tab --------------------------------------------
+            if !FavoritesState.loading
+                && FavoritesState.active-tab == "tracks": VerticalLayout {
+                spacing: 0px;
+                if FavoritesState.tracks.length == 0: Text {
+                    text: @tr("No favorite tracks yet.");
+                    color: Theme.text-muted;
+                    font-size: Typography.body;
+                }
+                for track[i] in FavoritesState.tracks: SearchTrackRow {
+                    track: track;
+                    index: i;
+                    show-artwork: true;
+                    media-action(kind, id, action) => {
+                        FavoritesActions.track-action(id, action);
+                    }
+                }
+            }
+
+            // --- Albums tab --------------------------------------------
+            if !FavoritesState.loading
+                && FavoritesState.active-tab == "albums": albums-grid := Rectangle {
+                property <int> columns: Math.max(
+                    1,
+                    Math.floor((self.width + root.gap) / (root.album-w + root.gap)));
+                property <int> rows: Math.ceil(FavoritesState.albums.length / self.columns);
+                height: self.rows > 0
+                    ? self.rows * root.album-h + Math.max(0, self.rows - 1) * root.gap
+                    : 0px;
+                if FavoritesState.albums.length == 0: Text {
+                    text: @tr("No favorite albums yet.");
+                    color: Theme.text-muted;
+                    font-size: Typography.body;
+                }
+                for album[i] in FavoritesState.albums: AlbumCard {
+                    x: Math.mod(i, albums-grid.columns) * (root.album-w + root.gap);
+                    y: Math.floor(i / albums-grid.columns) * (root.album-h + root.gap);
+                    width: root.album-w;
+                    height: root.album-h;
+                    album: album;
+                    clicked(id) => { root.open-album(id); }
+                }
+            }
+
+            // --- Artists tab -------------------------------------------
+            if !FavoritesState.loading
+                && FavoritesState.active-tab == "artists": artists-grid := Rectangle {
+                property <int> columns: Math.max(
+                    1,
+                    Math.floor((self.width + root.gap) / (root.artist-w + root.gap)));
+                property <int> rows: Math.ceil(FavoritesState.artists.length / self.columns);
+                height: self.rows > 0
+                    ? self.rows * root.artist-h + Math.max(0, self.rows - 1) * root.gap
+                    : 0px;
+                if FavoritesState.artists.length == 0: Text {
+                    text: @tr("No favorite artists yet.");
+                    color: Theme.text-muted;
+                    font-size: Typography.body;
+                }
+                for artist[i] in FavoritesState.artists: FavArtistCard {
+                    x: Math.mod(i, artists-grid.columns) * (root.artist-w + root.gap);
+                    y: Math.floor(i / artists-grid.columns) * (root.artist-h + root.gap);
+                    item: artist;
+                    clicked(id) => { root.open-artist(id); }
+                }
+            }
+
+            // --- Playlists / Labels (pending) --------------------------
+            if !FavoritesState.loading
+                && (FavoritesState.active-tab == "playlists"
+                    || FavoritesState.active-tab == "labels"): Text {
+                text: @tr("Coming soon.");
+                color: Theme.text-muted;
+                font-size: Typography.body;
+            }
+        }
+    }
+}

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

@@ -19,6 +19,7 @@ import { ArtistPageView } from "../artist/ArtistPageView.slint";
 import { MusicianPageView } from "../musician/MusicianPageView.slint";
 import { LabelReleasesView } from "../label/LabelReleasesView.slint";
 import { ArtistsByLocationView } from "../location/ArtistsByLocationView.slint";
+import { FavoritesView } from "../favorites/FavoritesView.slint";
 import { SettingsView } from "../settings/SettingsView.slint";
 import { SearchResultsView } from "../search/SearchResultsView.slint";
 
@@ -26,6 +27,7 @@ export component AppShell inherits Rectangle {
     callback open-album(string);
     callback open-artist(string);
     callback media-action(string, string, string);
+    callback header-menu-navigate(string);
     callback settings-bool(string, bool);
     callback settings-select(string, int);
     callback settings-slider(string, int);
@@ -115,6 +117,14 @@ export component AppShell inherits Rectangle {
                         root.open-artist(id);
                     }
                 }
+                if NavState.view == ContentView.favorites: FavoritesView {
+                    open-album(id) => {
+                        root.open-album(id);
+                    }
+                    open-artist(id) => {
+                        root.open-artist(id);
+                    }
+                }
                 if NavState.view == ContentView.settings: SettingsView {
                     settings-bool(k, v) => {
                         root.settings-bool(k, v);
@@ -163,5 +173,9 @@ export component AppShell inherits Rectangle {
     // the header and the content region. A plain in-window overlay (not
     // a PopupWindow) — it does not grab the pointer, so the header tabs
     // stay hoverable and menus can be hover-switched instantly.
-    HeaderMenuOverlay { }
+    HeaderMenuOverlay {
+        navigate(route) => {
+            root.header-menu-navigate(route);
+        }
+    }
 }

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

@@ -266,7 +266,7 @@ export component HeaderBar inherits Rectangle {
             show-icon: root.show-tab-icons;
             // Discover rows are text-only (no glyphs).
             items: [
-                { label: @tr("Home"), has-glyph: false },
+                { label: @tr("Home"), has-glyph: false, route: "home" },
                 { label: @tr("Editor's Picks"), has-glyph: false },
                 { label: @tr("For You"), has-glyph: false },
             ];
@@ -279,11 +279,11 @@ export component HeaderBar inherits Rectangle {
             label: @tr("Library");
             show-icon: root.show-tab-icons;
             items: [
-                { label: @tr("Tracks"), icon: @image-url("../assets/icons/music.svg"), has-glyph: true },
-                { label: @tr("Albums"), icon: @image-url("../assets/icons/disc.svg"), has-glyph: true },
-                { label: @tr("Artists"), icon: @image-url("../assets/icons/user.svg"), has-glyph: true },
-                { label: @tr("Playlists"), icon: @image-url("../assets/icons/list-music.svg"), has-glyph: true },
-                { label: @tr("Labels"), icon: @image-url("../assets/icons/disc-3.svg"), has-glyph: true },
+                { label: @tr("Tracks"), icon: @image-url("../assets/icons/music.svg"), has-glyph: true, route: "favorites-tracks" },
+                { label: @tr("Albums"), icon: @image-url("../assets/icons/disc.svg"), has-glyph: true, route: "favorites-albums" },
+                { label: @tr("Artists"), icon: @image-url("../assets/icons/user.svg"), has-glyph: true, route: "favorites-artists" },
+                { label: @tr("Playlists"), icon: @image-url("../assets/icons/list-music.svg"), has-glyph: true, route: "favorites-playlists" },
+                { label: @tr("Labels"), icon: @image-url("../assets/icons/disc-3.svg"), has-glyph: true, route: "favorites-labels" },
             ];
         }
         NavTabWithMenu {

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

@@ -26,6 +26,10 @@ export component HeaderMenuOverlay inherits Rectangle {
     // while a menu is open.
     visible: HeaderMenuState.open-index >= 0;
 
+    // Bubbles a row's destination route (e.g. "favorites-tracks") up
+    // to the shell so Rust can run the navigation + data load.
+    callback navigate(string);
+
     // (Re)arms the idle countdown — called on any pointer activity over
     // the panel or its rows.
     function reset-idle() {
@@ -111,7 +115,9 @@ export component HeaderMenuOverlay inherits Rectangle {
                     icon: entry.icon;
                     has-glyph: entry.has-glyph;
                     clicked => {
-                        if (idx == HeaderMenuState.home-item) {
+                        if (entry.route != "") {
+                            root.navigate(entry.route);
+                        } else if (idx == HeaderMenuState.home-item) {
                             NavState.view = ContentView.home;
                         }
                         root.close-menu();

crates/qbz-slint/ui/state.slint

@@ -94,7 +94,7 @@ export global AlbumActions {
 }
 
 // Which content view the shell shows.
-export enum ContentView { home, album, artist, settings, search, musician, label, location }
+export enum ContentView { home, album, artist, settings, search, musician, label, location, favorites }
 
 // Settings screen state. Audio and Playback preferences are loaded from
 // the persistence stores by the Rust settings controller and pushed here;
@@ -166,6 +166,10 @@ export struct NavMenuEntry {
     label: string,
     icon: image,
     has-glyph: bool,
+    // Destination route fired when the row is clicked, e.g. "home",
+    // "favorites-tracks", "favorites-albums". Empty = no-op (the
+    // destination isn't implemented yet).
+    route: string,
 }
 
 // Header nav-tab dropdown state.
@@ -636,6 +640,43 @@ export struct SearchPlaylistItem {
     cover4: image,
 }
 
+// One artist tile in the Favorites > Artists grid.
+export struct FavoriteArtistItem {
+    id: string,
+    name: string,
+    albums-line: string,
+    image-url: string,
+    image: image,
+}
+
+// Library > Favorites state. The active tab decides which model is
+// shown; all are populated lazily by `crate::favorites` the first
+// time their tab is opened. Albums reuse AlbumCardItem, tracks reuse
+// SearchTrackItem (artwork-on), artists use FavoriteArtistItem.
+export global FavoritesState {
+    // "tracks" | "albums" | "artists" | "playlists" | "labels"
+    in-out property <string> active-tab: "tracks";
+    // Tracks reuse SearchTrackItem so the shared SearchTrackRow can
+    // render them (artwork-on, per-row cover thumbnail).
+    in property <[SearchTrackItem]> tracks: [];
+    in property <[AlbumCardItem]> albums: [];
+    in property <[FavoriteArtistItem]> artists: [];
+    in property <int> tracks-total: 0;
+    in property <int> albums-total: 0;
+    in property <int> artists-total: 0;
+    in property <bool> loading: false;
+}
+
+export global FavoritesActions {
+    // Switch tab; the Rust side lazy-loads the tab's data if it
+    // hasn't been fetched yet.
+    callback select-tab(string);
+    callback open-album(string);
+    callback open-artist(string);
+    callback play-track(string /* track id */);
+    callback track-action(string /* track id */, string /* action */);
+}
+
 // Search results screen state. The Rust search controller populates the
 // four category lists, their totals, and the most-popular hero entry.
 export global SearchState {