feat(qbz-slint): artist detail page

Clicking an artist (from the album page's artist line) opens the
artist detail view: a circular portrait, name, biography, action
buttons, a Popular Tracks list, and a Discography carousel.

- artist.rs: fetches the artist page via QbzCore::get_artist_page and
  maps name, biography (HTML-stripped), portrait URL, top tracks and
  releases; the portrait loads through the shared image cache.
- ArtistPageView.slint reuses AlbumCard for the discography (through
  the Carousel) and AlbumTrackItem for the track list.
- NavState becomes a three-way ContentView (home / album / artist) and
  AppShell routes the content region accordingly. The album page's
  artist line and the artist page's release cards are navigable.

cc

crates/qbz-slint/src/album.rs

@@ -17,6 +17,7 @@ use crate::{AlbumState, AlbumTrackItem, AppWindow};
 pub struct AlbumData {
     pub title: String,
     pub artist: String,
+    pub artist_id: String,
     /// Pre-formatted "year • label • genre • N tracks • duration".
     pub info_line: String,
     pub quality_tier: String,
@@ -48,6 +49,7 @@ where
 
 fn map_album(album: Album) -> AlbumData {
     let artist = album.artist.name.clone();
+    let artist_id = album.artist.id.to_string();
 
     let year = album
         .release_date_original
@@ -87,6 +89,7 @@ fn map_album(album: Album) -> AlbumData {
     AlbumData {
         title: album.title,
         artist,
+        artist_id,
         info_line,
         quality_tier,
         artwork_url,
@@ -152,6 +155,7 @@ pub fn apply_album(window: &AppWindow, data: AlbumData) {
     let state = window.global::<AlbumState>();
     state.set_title(data.title.into());
     state.set_artist(data.artist.into());
+    state.set_artist_id(data.artist_id.into());
     state.set_info_line(data.info_line.into());
     state.set_quality_tier(data.quality_tier.into());
     state.set_tracks(ModelRc::new(VecModel::from(tracks)));

crates/qbz-slint/src/artist.rs

@@ -0,0 +1,221 @@
+//! Artist detail controller.
+//!
+//! Fetches an artist page through `QbzCore`, maps it to plain (Send)
+//! data on the worker thread, and applies it to the `ArtistState`
+//! global on the Slint event loop.
+
+use std::sync::Arc;
+
+use qbz_app::shell::AppRuntime;
+use qbz_core::FrontendAdapter;
+use qbz_models::{PageArtistRelease, PageArtistResponse, PageArtistTrack};
+use slint::{ComponentHandle, ModelRc, VecModel};
+
+use crate::album::TrackData;
+use crate::home::CardData;
+use crate::{AlbumCardItem, AlbumTrackItem, AppWindow, ArtistState};
+
+/// Plain, `Send` artist data produced on the worker thread.
+pub struct ArtistData {
+    pub name: String,
+    pub bio: String,
+    pub artwork_url: String,
+    pub top_tracks: Vec<TrackData>,
+    pub releases: Vec<CardData>,
+}
+
+/// Fetch and map an artist page by id.
+pub async fn load_artist<A>(
+    runtime: &Arc<AppRuntime<A>>,
+    artist_id: &str,
+) -> Result<ArtistData, String>
+where
+    A: FrontendAdapter + Send + Sync + 'static,
+{
+    let id: u64 = artist_id
+        .parse()
+        .map_err(|_| format!("invalid artist id: {artist_id}"))?;
+    let page = runtime
+        .core()
+        .get_artist_page(id, None)
+        .await
+        .map_err(|e| e.to_string())?;
+    Ok(map_artist(page))
+}
+
+fn map_artist(page: PageArtistResponse) -> ArtistData {
+    let name = page.name.display;
+
+    let bio = page
+        .biography
+        .and_then(|b| b.content)
+        .map(|content| strip_html(&content))
+        .unwrap_or_default();
+
+    let artwork_url = page
+        .images
+        .and_then(|images| images.portrait)
+        .map(|portrait| {
+            format!(
+                "https://static.qobuz.com/images/artists/covers/large/{}.{}",
+                portrait.hash, portrait.format
+            )
+        })
+        .unwrap_or_default();
+
+    let top_tracks = page
+        .top_tracks
+        .unwrap_or_default()
+        .into_iter()
+        .enumerate()
+        .map(|(index, track)| map_track(index, track))
+        .collect();
+
+    let releases = page
+        .releases
+        .unwrap_or_default()
+        .into_iter()
+        .flat_map(|group| group.items)
+        .map(map_release)
+        .collect();
+
+    ArtistData {
+        name,
+        bio,
+        artwork_url,
+        top_tracks,
+        releases,
+    }
+}
+
+fn map_track(index: usize, track: PageArtistTrack) -> TrackData {
+    let mut title = track.title;
+    if let Some(version) = track.version.as_ref().filter(|v| !v.is_empty()) {
+        title = format!("{title} ({version})");
+    }
+    TrackData {
+        number: (index + 1).to_string(),
+        title,
+        artist: track.artist.map(|a| a.name.display).unwrap_or_default(),
+        duration: mmss(track.duration.unwrap_or(0)),
+        quality_tier: tier(track.audio_info.and_then(|a| a.maximum_bit_depth)).to_string(),
+        explicit: track.parental_warning.unwrap_or(false),
+    }
+}
+
+fn map_release(release: PageArtistRelease) -> CardData {
+    let artist = release
+        .artist
+        .map(|a| a.name.display)
+        .or_else(|| release.artists.and_then(|list| list.into_iter().next().map(|a| a.name)))
+        .unwrap_or_default();
+    let artwork_url = release
+        .image
+        .and_then(|img| img.best().cloned())
+        .unwrap_or_default();
+    CardData {
+        id: release.id,
+        title: release.title,
+        artist,
+        genre: release.genre.map(|g| g.name).unwrap_or_default(),
+        year: String::new(),
+        quality_tier: String::new(),
+        ribbon: String::new(),
+        ribbon_kind: String::new(),
+        artwork_url,
+    }
+}
+
+fn tier(bit_depth: Option<u32>) -> &'static str {
+    match bit_depth {
+        Some(depth) if depth >= 24 => "hires",
+        Some(_) => "cd",
+        None => "",
+    }
+}
+
+fn mmss(secs: u32) -> String {
+    format!("{}:{:02}", secs / 60, secs % 60)
+}
+
+/// Crude HTML strip for Qobuz biographies (tags + a few entities).
+fn strip_html(input: &str) -> String {
+    let mut out = String::new();
+    let mut in_tag = false;
+    for ch in input.chars() {
+        match ch {
+            '<' => in_tag = true,
+            '>' => in_tag = false,
+            _ if !in_tag => out.push(ch),
+            _ => {}
+        }
+    }
+    out.replace("&amp;", "&")
+        .replace("&#39;", "'")
+        .replace("&quot;", "\"")
+        .replace("&nbsp;", " ")
+        .trim()
+        .to_string()
+}
+
+/// Apply artist data to the `ArtistState` global. Runs on the Slint event loop.
+pub fn apply_artist(window: &AppWindow, data: ArtistData) {
+    let top_tracks: Vec<AlbumTrackItem> = data
+        .top_tracks
+        .into_iter()
+        .map(|track| AlbumTrackItem {
+            number: track.number.into(),
+            title: track.title.into(),
+            artist: track.artist.into(),
+            duration: track.duration.into(),
+            quality_tier: track.quality_tier.into(),
+            explicit: track.explicit,
+        })
+        .collect();
+    let releases: Vec<AlbumCardItem> = data
+        .releases
+        .into_iter()
+        .map(|card| AlbumCardItem {
+            id: card.id.into(),
+            title: card.title.into(),
+            artist: card.artist.into(),
+            genre: card.genre.into(),
+            year: card.year.into(),
+            quality_tier: card.quality_tier.into(),
+            ribbon: card.ribbon.into(),
+            ribbon_kind: card.ribbon_kind.into(),
+            artwork_url: card.artwork_url.into(),
+            artwork: slint::Image::default(),
+        })
+        .collect();
+
+    let state = window.global::<ArtistState>();
+    state.set_name(data.name.into());
+    state.set_bio(data.bio.into());
+    state.set_top_tracks(ModelRc::new(VecModel::from(top_tracks)));
+    state.set_releases(ModelRc::new(VecModel::from(releases)));
+}
+
+/// Clear artist state before loading a new artist.
+pub fn reset_artist(window: &AppWindow) {
+    let state = window.global::<ArtistState>();
+    state.set_top_tracks(ModelRc::new(VecModel::from(Vec::<AlbumTrackItem>::new())));
+    state.set_releases(ModelRc::new(VecModel::from(Vec::<AlbumCardItem>::new())));
+    state.set_artwork(slint::Image::default());
+    state.set_name("".into());
+    state.set_bio("".into());
+    state.set_loading(true);
+}
+
+/// Apply decoded portrait artwork. Runs on the Slint event loop.
+pub fn apply_artwork(window: &AppWindow, pixels: &[u8], width: u32, height: u32) {
+    let mut buffer = slint::SharedPixelBuffer::<slint::Rgba8Pixel>::new(width, height);
+    let dst = buffer.make_mut_bytes();
+    if dst.len() != pixels.len() {
+        return;
+    }
+    dst.copy_from_slice(pixels);
+    window
+        .global::<ArtistState>()
+        .set_artwork(slint::Image::from_rgba8(buffer));
+}

crates/qbz-slint/src/main.rs

@@ -16,6 +16,7 @@ slint::include_modules!();
 
 mod adapter;
 mod album;
+mod artist;
 mod artwork;
 mod auth;
 mod commands;
@@ -203,7 +204,7 @@ fn main() -> Result<(), Box<dyn std::error::Error>> {
             handle.spawn(async move {
                 let _ = weak.upgrade_in_event_loop(|w| {
                     album::reset_album(&w);
-                    w.global::<NavState>().set_showing_album(true);
+                    w.global::<NavState>().set_view(ContentView::Album);
                 });
                 match album::load_album(&runtime, &album_id).await {
                     Ok(data) => {
@@ -233,6 +234,50 @@ fn main() -> Result<(), Box<dyn std::error::Error>> {
         });
     }
 
+    // Open an artist: load the artist page, show it, then fetch the portrait.
+    {
+        let runtime = app_runtime.clone();
+        let weak = window.as_weak();
+        let handle = tokio_rt.handle().clone();
+        let image_cache = image_cache.clone();
+        window.on_open_artist(move |artist_id| {
+            let runtime = runtime.clone();
+            let weak = weak.clone();
+            let image_cache = image_cache.clone();
+            let artist_id = artist_id.to_string();
+            handle.spawn(async move {
+                let _ = weak.upgrade_in_event_loop(|w| {
+                    artist::reset_artist(&w);
+                    w.global::<NavState>().set_view(ContentView::Artist);
+                });
+                match artist::load_artist(&runtime, &artist_id).await {
+                    Ok(data) => {
+                        let artwork_url = data.artwork_url.clone();
+                        let _ = weak.upgrade_in_event_loop(move |w| {
+                            artist::apply_artist(&w, data);
+                            w.global::<ArtistState>().set_loading(false);
+                        });
+                        if !artwork_url.is_empty() {
+                            if let Some((pixels, width, height)) =
+                                artwork::fetch_and_decode(&artwork_url, &image_cache, 440).await
+                            {
+                                let _ = weak.upgrade_in_event_loop(move |w| {
+                                    artist::apply_artwork(&w, &pixels, width, height);
+                                });
+                            }
+                        }
+                    }
+                    Err(e) => {
+                        log::error!("[qbz-slint] artist load failed: {e}");
+                        let _ = weak.upgrade_in_event_loop(|w| {
+                            w.global::<ArtistState>().set_loading(false);
+                        });
+                    }
+                }
+            });
+        });
+    }
+
     // Log out: clear the session and return to the login screen.
     {
         let runtime = app_runtime.clone();
@@ -246,7 +291,7 @@ fn main() -> Result<(), Box<dyn std::error::Error>> {
                     log::error!("[qbz-slint] logout failed: {e}");
                 }
                 let _ = weak.upgrade_in_event_loop(|w| {
-                    w.global::<NavState>().set_showing_album(false);
+                    w.global::<NavState>().set_view(ContentView::Home);
                     w.global::<SessionState>().set_user_name("".into());
                     w.set_screen(AppScreen::Login);
                 });

crates/qbz-slint/ui/album/AlbumPageView.slint

@@ -9,7 +9,7 @@ import { Theme } from "../foundation/semantic-colors.slint";
 import { Typography } from "../foundation/typography.slint";
 import { Radius } from "../foundation/radius.slint";
 import { Spacing } from "../foundation/spacing.slint";
-import { AlbumState, AlbumTrackItem, NavState } from "../state.slint";
+import { AlbumState, AlbumTrackItem, NavState, ContentView } from "../state.slint";
 import { QbzIcon } from "../primitives/QbzIcon.slint";
 import { ScrollView } from "std-widgets.slint";
 
@@ -132,6 +132,8 @@ component TrackRow inherits Rectangle {
 }
 
 export component AlbumPageView inherits Rectangle {
+    callback open-artist(string);
+
     background: Theme.surface-main;
 
     ScrollView {
@@ -150,7 +152,7 @@ export component AlbumPageView inherits Rectangle {
                 height: 28px;
                 mouse-cursor: pointer;
                 clicked => {
-                    NavState.showing-album = false;
+                    NavState.view = ContentView.home;
                 }
                 back-row := HorizontalLayout {
                     spacing: 6px;
@@ -210,12 +212,24 @@ export component AlbumPageView inherits Rectangle {
                         overflow: elide;
                     }
                     Rectangle { height: 4px; }
-                    Text {
-                        text: AlbumState.artist;
-                        color: Theme.accent;
-                        font-size: Typography.heading;
-                        font-weight: Typography.medium;
-                        overflow: elide;
+                    HorizontalLayout {
+                        alignment: start;
+                        artist-area := TouchArea {
+                            width: artist-text.preferred-width;
+                            height: artist-text.preferred-height;
+                            mouse-cursor: pointer;
+                            clicked => {
+                                root.open-artist(AlbumState.artist-id);
+                            }
+                            artist-text := Text {
+                                text: AlbumState.artist;
+                                color: artist-area.has-hover
+                                    ? Theme.accent-hover
+                                    : Theme.accent;
+                                font-size: Typography.heading;
+                                font-weight: Typography.medium;
+                            }
+                        }
                     }
                     Rectangle { height: 10px; }
                     Text {

crates/qbz-slint/ui/app.slint

@@ -10,7 +10,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, NavState, SessionState } from "state.slint";
+export { HomeState, AlbumState, ArtistState, NavState, SessionState } 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`.
@@ -32,6 +32,7 @@ export component AppWindow inherits Window {
     callback start-offline();
     callback open-tos();
     callback open-album(string);
+    callback open-artist(string);
     callback logout();
     callback close-app();
 
@@ -56,6 +57,9 @@ export component AppWindow inherits Window {
         open-album(id) => {
             root.open-album(id);
         }
+        open-artist(id) => {
+            root.open-artist(id);
+        }
         logout => {
             root.logout();
         }

crates/qbz-slint/ui/artist/ArtistPageView.slint

@@ -0,0 +1,250 @@
+// Artist detail page.
+//
+// Mirrors the Svelte ArtistDetailView: back button, an artist header
+// (circular portrait, name, biography, action buttons), a Popular
+// Tracks list, and a Discography carousel. Data comes from the
+// ArtistState global; action buttons are visual for now.
+
+import { Theme } from "../foundation/semantic-colors.slint";
+import { Typography } from "../foundation/typography.slint";
+import { ArtistState, AlbumTrackItem, DiscoverSection, NavState, ContentView } from "../state.slint";
+import { QbzIcon } from "../primitives/QbzIcon.slint";
+import { Carousel } from "../discover/Carousel.slint";
+import { ScrollView } from "std-widgets.slint";
+
+component CircleAction inherits Rectangle {
+    in property <image> icon;
+    in property <bool> primary: false;
+    in property <length> diameter: 40px;
+    callback clicked();
+
+    width: root.diameter;
+    height: root.diameter;
+    border-radius: root.diameter / 2;
+    background: root.primary
+        ? (ta.has-hover ? Theme.accent-hover : Theme.accent)
+        : (ta.has-hover ? Theme.surface-hover : Theme.surface-elevated);
+
+    QbzIcon {
+        source: root.icon;
+        width: 17px;
+        height: 17px;
+        x: (parent.width - self.width) / 2;
+        y: (parent.height - self.height) / 2;
+        tint: root.primary ? Theme.accent-text : Theme.text-secondary;
+    }
+
+    ta := TouchArea {
+        mouse-cursor: pointer;
+        clicked => {
+            root.clicked();
+        }
+    }
+}
+
+component TrackRow inherits Rectangle {
+    in property <AlbumTrackItem> track;
+    in property <int> index;
+
+    height: 52px;
+    border-radius: 8px;
+    background: ta.has-hover
+        ? Theme.surface-hover
+        : (Math.mod(root.index, 2) == 1 ? Theme.surface-card : transparent);
+
+    HorizontalLayout {
+        padding-left: 12px;
+        padding-right: 12px;
+        spacing: 16px;
+
+        Text {
+            text: root.track.number;
+            width: 28px;
+            color: Theme.text-muted;
+            font-size: Typography.body;
+            vertical-alignment: center;
+        }
+        VerticalLayout {
+            alignment: center;
+            horizontal-stretch: 1;
+            Text {
+                text: root.track.title;
+                color: Theme.text-primary;
+                font-size: Typography.body;
+                font-weight: Typography.medium;
+                overflow: elide;
+            }
+        }
+        Text {
+            text: root.track.duration;
+            width: 70px;
+            color: Theme.text-muted;
+            font-size: Typography.body;
+            horizontal-alignment: center;
+            vertical-alignment: center;
+        }
+        Text {
+            text: root.track.quality-tier == "hires"
+                ? "Hi-Res"
+                : (root.track.quality-tier == "cd" ? "CD" : "");
+            width: 70px;
+            color: Theme.text-muted;
+            font-size: Typography.legal;
+            horizontal-alignment: center;
+            vertical-alignment: center;
+        }
+    }
+
+    ta := TouchArea {
+        mouse-cursor: pointer;
+    }
+}
+
+export component ArtistPageView inherits Rectangle {
+    callback open-album(string);
+
+    background: Theme.surface-main;
+
+    ScrollView {
+        horizontal-scrollbar-policy: ScrollBarPolicy.always-off;
+        VerticalLayout {
+            padding-left: 24px;
+            padding-right: 24px;
+            padding-top: 14px;
+            padding-bottom: 100px;
+            spacing: 0px;
+            alignment: start;
+
+            // --- Back button -------------------------------------------------
+            back := TouchArea {
+                width: back-row.preferred-width;
+                height: 28px;
+                mouse-cursor: pointer;
+                clicked => {
+                    NavState.view = ContentView.home;
+                }
+                back-row := HorizontalLayout {
+                    spacing: 6px;
+                    VerticalLayout {
+                        alignment: center;
+                        QbzIcon {
+                            source: @image-url("../assets/icons/arrow-left.svg");
+                            width: 16px;
+                            height: 16px;
+                            tint: back.has-hover ? Theme.text-secondary : Theme.text-muted;
+                        }
+                    }
+                    Text {
+                        text: @tr("Back");
+                        color: back.has-hover ? Theme.text-secondary : Theme.text-muted;
+                        font-size: Typography.body;
+                        vertical-alignment: center;
+                    }
+                }
+            }
+
+            Rectangle { height: 22px; }
+
+            // --- Artist header -----------------------------------------------
+            HorizontalLayout {
+                spacing: 32px;
+                alignment: start;
+
+                Rectangle {
+                    width: 200px;
+                    height: 200px;
+                    border-radius: 100px;
+                    background: Theme.surface-elevated;
+                    drop-shadow-blur: 32px;
+                    drop-shadow-color: #00000080;
+                    drop-shadow-offset-y: 8px;
+                    clip: true;
+                    Image {
+                        width: 100%;
+                        height: 100%;
+                        source: ArtistState.artwork;
+                        image-fit: cover;
+                    }
+                }
+
+                VerticalLayout {
+                    alignment: start;
+                    padding-top: 8px;
+                    spacing: 0px;
+                    horizontal-stretch: 1;
+
+                    Text {
+                        text: ArtistState.name;
+                        color: Theme.text-primary;
+                        font-size: Typography.title;
+                        font-weight: Typography.bold;
+                        overflow: elide;
+                    }
+                    Rectangle { height: 12px; }
+                    Text {
+                        text: ArtistState.bio;
+                        visible: ArtistState.bio != "";
+                        color: Theme.text-secondary;
+                        font-size: Typography.body;
+                        wrap: word-wrap;
+                    }
+                    Rectangle { height: 20px; }
+                    HorizontalLayout {
+                        alignment: start;
+                        spacing: 12px;
+                        CircleAction {
+                            icon: @image-url("../assets/icons/play.svg");
+                            primary: true;
+                            diameter: 44px;
+                        }
+                        VerticalLayout {
+                            alignment: center;
+                            CircleAction { icon: @image-url("../assets/icons/shuffle.svg"); }
+                        }
+                        VerticalLayout {
+                            alignment: center;
+                            CircleAction { icon: @image-url("../assets/icons/heart.svg"); }
+                        }
+                        VerticalLayout {
+                            alignment: center;
+                            CircleAction { icon: @image-url("../assets/icons/cast.svg"); }
+                        }
+                    }
+                }
+            }
+
+            Rectangle { height: 32px; }
+
+            if ArtistState.loading && ArtistState.top-tracks.length == 0: Text {
+                text: @tr("Loading artist...");
+                color: Theme.text-muted;
+                font-size: Typography.body;
+            }
+
+            // --- Popular tracks ----------------------------------------------
+            if ArtistState.top-tracks.length > 0: Text {
+                text: @tr("Popular Tracks");
+                color: Theme.text-primary;
+                font-size: Typography.heading;
+                font-weight: Typography.semibold;
+            }
+            if ArtistState.top-tracks.length > 0: Rectangle { height: 10px; }
+            for track[index] in ArtistState.top-tracks: TrackRow {
+                track: track;
+                index: index;
+            }
+
+            // --- Discography -------------------------------------------------
+            if ArtistState.releases.length > 0: Rectangle { height: 28px; }
+            if ArtistState.releases.length > 0: Carousel {
+                section: {
+                    title: @tr("Discography"),
+                    albums: ArtistState.releases,
+                };
+                album-clicked(id) => {
+                    root.open-album(id);
+                }
+            }
+        }
+    }
+}

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

@@ -1,20 +1,22 @@
 // App shell — the post-login frame: header bar, sidebar, content
-// region, and player bar. The content region shows either the Discover
-// Home view or the Album detail view, driven by NavState.
+// region, and player bar. The content region shows the Discover Home,
+// Album detail, or Artist detail view, driven by NavState.
 //
 // Regions are delineated by their surface colors (chrome over the darker
 // content well); no hairline borders.
 
 import { Theme } from "../foundation/semantic-colors.slint";
-import { NavState } from "../state.slint";
+import { NavState, ContentView } from "../state.slint";
 import { Sidebar } from "Sidebar.slint";
 import { HeaderBar } from "HeaderBar.slint";
 import { PlayerBar } from "PlayerBar.slint";
 import { HomeView } from "../discover/HomeView.slint";
 import { AlbumPageView } from "../album/AlbumPageView.slint";
+import { ArtistPageView } from "../artist/ArtistPageView.slint";
 
 export component AppShell inherits Rectangle {
     callback open-album(string);
+    callback open-artist(string);
     callback logout();
     callback close-app();
 
@@ -38,17 +40,26 @@ export component AppShell inherits Rectangle {
 
             Sidebar { }
 
-            // Content region — Home or Album detail.
+            // Content region — Home, Album, or Artist.
             Rectangle {
                 horizontal-stretch: 1;
                 background: Theme.surface-main;
 
-                if !NavState.showing-album: HomeView {
+                if NavState.view == ContentView.home: HomeView {
                     album-clicked(id) => {
                         root.open-album(id);
                     }
                 }
-                if NavState.showing-album: AlbumPageView { }
+                if NavState.view == ContentView.album: AlbumPageView {
+                    open-artist(id) => {
+                        root.open-artist(id);
+                    }
+                }
+                if NavState.view == ContentView.artist: ArtistPageView {
+                    open-album(id) => {
+                        root.open-album(id);
+                    }
+                }
             }
         }
 

crates/qbz-slint/ui/state.slint

@@ -40,6 +40,7 @@ export struct AlbumTrackItem {
 export global AlbumState {
     in property <string> title;
     in property <string> artist;
+    in property <string> artist-id;
     in property <string> info-line;
     in property <string> quality-tier;
     in property <image> artwork;
@@ -48,8 +49,20 @@ export global AlbumState {
 }
 
 // Which content view the shell shows.
+export enum ContentView { home, album, artist }
+
 export global NavState {
-    in-out property <bool> showing-album: false;
+    in-out property <ContentView> view: ContentView.home;
+}
+
+// Artist detail screen state.
+export global ArtistState {
+    in property <string> name;
+    in property <string> bio;
+    in property <image> artwork;
+    in property <[AlbumTrackItem]> top-tracks: [];
+    in property <[AlbumCardItem]> releases: [];
+    in property <bool> loading: false;
 }
 
 // Authenticated user, for the header user element.