feat(qbz-slint): album detail page
Clicking an album card opens the album detail view: a back button, the album header (224px artwork, title, artist, and info line — year, label, genre, track count, duration — plus play / shuffle / favorite / more action buttons), and the track list with a column header (#, title, artist, duration, quality). - album.rs: fetches the album via QbzCore::get_album, maps it (info line, per-track quality tier, durations) onto the AlbumState global, and loads the header artwork through the shared image cache. - AlbumPageView.slint, with NavState driving the shell content region between Home and the album page. - Album clicks bubble AlbumCard -> Carousel -> HomeView -> AppShell -> AppWindow -> main; the back button returns to Home. cc
This commit is contained in:
10 files changed
+628
-15
No files matched your search
@@ -0,0 +1,304 @@
|
||||
// Album detail page.
|
||||
//
|
||||
// Mirrors the Svelte AlbumDetailView: back button, an album header
|
||||
// (artwork + title / artist / info line / action buttons), a divider,
|
||||
// and the track list with a column header. Data comes from the
|
||||
// AlbumState global; the action buttons are visual for now.
|
||||
|
||||
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 { ScrollView } from "std-widgets.slint";
|
||||
|
||||
component CircleAction inherits Rectangle {
|
||||
in property <string> glyph;
|
||||
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);
|
||||
|
||||
Text {
|
||||
text: root.glyph;
|
||||
color: root.primary ? Theme.accent-text : Theme.text-secondary;
|
||||
font-size: 16px;
|
||||
horizontal-alignment: center;
|
||||
vertical-alignment: center;
|
||||
}
|
||||
|
||||
ta := TouchArea {
|
||||
mouse-cursor: pointer;
|
||||
clicked => {
|
||||
root.clicked();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
component TrackRow inherits Rectangle {
|
||||
in property <AlbumTrackItem> track;
|
||||
in property <int> index;
|
||||
|
||||
height: 56px;
|
||||
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: 32px;
|
||||
color: Theme.text-muted;
|
||||
font-size: Typography.body;
|
||||
vertical-alignment: center;
|
||||
}
|
||||
|
||||
VerticalLayout {
|
||||
alignment: center;
|
||||
horizontal-stretch: 1;
|
||||
spacing: 2px;
|
||||
|
||||
HorizontalLayout {
|
||||
spacing: 6px;
|
||||
Text {
|
||||
text: root.track.title;
|
||||
color: Theme.text-primary;
|
||||
font-size: Typography.body;
|
||||
font-weight: Typography.medium;
|
||||
vertical-alignment: center;
|
||||
overflow: elide;
|
||||
}
|
||||
if root.track.explicit: Rectangle {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
y: (parent.height - self.height) / 2;
|
||||
border-radius: 3px;
|
||||
background: Theme.surface-elevated;
|
||||
Text {
|
||||
text: "E";
|
||||
color: Theme.text-muted;
|
||||
font-size: 9px;
|
||||
font-weight: Typography.semibold;
|
||||
horizontal-alignment: center;
|
||||
vertical-alignment: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
Text {
|
||||
text: root.track.artist;
|
||||
visible: root.track.artist != "";
|
||||
color: Theme.text-muted;
|
||||
font-size: Typography.link;
|
||||
overflow: elide;
|
||||
}
|
||||
}
|
||||
|
||||
Text {
|
||||
text: root.track.duration;
|
||||
width: 80px;
|
||||
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: 80px;
|
||||
color: Theme.text-muted;
|
||||
font-size: Typography.legal;
|
||||
horizontal-alignment: center;
|
||||
vertical-alignment: center;
|
||||
}
|
||||
}
|
||||
|
||||
ta := TouchArea {
|
||||
mouse-cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
export component AlbumPageView inherits Rectangle {
|
||||
background: Theme.surface-main;
|
||||
|
||||
ScrollView {
|
||||
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.showing-album = false;
|
||||
}
|
||||
back-row := HorizontalLayout {
|
||||
spacing: 6px;
|
||||
Text {
|
||||
text: "‹";
|
||||
color: back.has-hover ? Theme.text-secondary : Theme.text-muted;
|
||||
font-size: 18px;
|
||||
vertical-alignment: center;
|
||||
}
|
||||
Text {
|
||||
text: @tr("Back");
|
||||
color: back.has-hover ? Theme.text-secondary : Theme.text-muted;
|
||||
font-size: Typography.body;
|
||||
vertical-alignment: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle { height: 22px; }
|
||||
|
||||
// --- Album header ------------------------------------------------
|
||||
HorizontalLayout {
|
||||
spacing: 32px;
|
||||
alignment: start;
|
||||
|
||||
Rectangle {
|
||||
width: 224px;
|
||||
height: 224px;
|
||||
border-radius: 12px;
|
||||
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: AlbumState.artwork;
|
||||
image-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
VerticalLayout {
|
||||
alignment: start;
|
||||
padding-top: 4px;
|
||||
spacing: 0px;
|
||||
horizontal-stretch: 1;
|
||||
|
||||
Text {
|
||||
text: AlbumState.title;
|
||||
color: Theme.text-primary;
|
||||
font-size: Typography.title;
|
||||
font-weight: Typography.bold;
|
||||
overflow: elide;
|
||||
}
|
||||
Rectangle { height: 4px; }
|
||||
Text {
|
||||
text: AlbumState.artist;
|
||||
color: Theme.accent;
|
||||
font-size: Typography.heading;
|
||||
font-weight: Typography.medium;
|
||||
overflow: elide;
|
||||
}
|
||||
Rectangle { height: 10px; }
|
||||
Text {
|
||||
text: AlbumState.info-line;
|
||||
color: Theme.text-muted;
|
||||
font-size: Typography.body;
|
||||
overflow: elide;
|
||||
}
|
||||
Rectangle { height: 20px; }
|
||||
HorizontalLayout {
|
||||
alignment: start;
|
||||
spacing: 12px;
|
||||
CircleAction { glyph: "▶"; primary: true; diameter: 44px; }
|
||||
VerticalLayout {
|
||||
alignment: center;
|
||||
CircleAction { glyph: "⇄"; }
|
||||
}
|
||||
VerticalLayout {
|
||||
alignment: center;
|
||||
CircleAction { glyph: "♡"; }
|
||||
}
|
||||
VerticalLayout {
|
||||
alignment: center;
|
||||
CircleAction { glyph: "⋯"; }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle { height: 20px; }
|
||||
Rectangle {
|
||||
height: 1px;
|
||||
background: Theme.border-subtle;
|
||||
}
|
||||
Rectangle { height: 8px; }
|
||||
|
||||
// --- Track list --------------------------------------------------
|
||||
if AlbumState.loading && AlbumState.tracks.length == 0: Text {
|
||||
text: @tr("Loading album...");
|
||||
color: Theme.text-muted;
|
||||
font-size: Typography.body;
|
||||
}
|
||||
|
||||
// Column header.
|
||||
HorizontalLayout {
|
||||
height: 40px;
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
spacing: 16px;
|
||||
Text {
|
||||
text: "#";
|
||||
width: 32px;
|
||||
color: Theme.text-muted;
|
||||
font-size: Typography.legal;
|
||||
letter-spacing: 0.5px;
|
||||
vertical-alignment: center;
|
||||
}
|
||||
Text {
|
||||
text: @tr("TITLE");
|
||||
horizontal-stretch: 1;
|
||||
color: Theme.text-muted;
|
||||
font-size: Typography.legal;
|
||||
letter-spacing: 0.5px;
|
||||
vertical-alignment: center;
|
||||
}
|
||||
Text {
|
||||
text: @tr("DURATION");
|
||||
width: 80px;
|
||||
color: Theme.text-muted;
|
||||
font-size: Typography.legal;
|
||||
letter-spacing: 0.5px;
|
||||
horizontal-alignment: center;
|
||||
vertical-alignment: center;
|
||||
}
|
||||
Text {
|
||||
text: @tr("QUALITY");
|
||||
width: 80px;
|
||||
color: Theme.text-muted;
|
||||
font-size: Typography.legal;
|
||||
letter-spacing: 0.5px;
|
||||
horizontal-alignment: center;
|
||||
vertical-alignment: center;
|
||||
}
|
||||
}
|
||||
|
||||
for track[index] in AlbumState.tracks: TrackRow {
|
||||
track: track;
|
||||
index: index;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,16 +1,16 @@
|
||||
// QBZ Slint POC — UI entry point.
|
||||
// QBZ Slint MVP — UI entry point.
|
||||
//
|
||||
// Stays thin: imports the feature screens and exports the single
|
||||
// top-level window. No raw visual constants or domain logic here
|
||||
// (POC ADR, sections 13 and 21).
|
||||
// (MVP ADR, sections 13 and 21).
|
||||
|
||||
import { Theme } from "foundation/semantic-colors.slint";
|
||||
import { SplashScreen } from "splash/SplashScreen.slint";
|
||||
import { LoginScreen } from "login/LoginScreen.slint";
|
||||
import { AppShell } from "shell/AppShell.slint";
|
||||
|
||||
// Re-export the HomeState global so the Rust layer can populate it.
|
||||
export { HomeState } from "state.slint";
|
||||
// Re-export the state globals so the Rust layer can populate them.
|
||||
export { HomeState, AlbumState, NavState } 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`.
|
||||
@@ -26,11 +26,12 @@ export component AppWindow inherits Window {
|
||||
|
||||
in-out property <AppScreen> screen: AppScreen.splash;
|
||||
|
||||
// Forwarded to the Rust layer, which maps them to typed AppCommands.
|
||||
// Forwarded to the Rust layer.
|
||||
callback sign-in-via-browser();
|
||||
callback use-system-browser();
|
||||
callback start-offline();
|
||||
callback open-tos();
|
||||
callback open-album(string);
|
||||
|
||||
if root.screen == AppScreen.splash: SplashScreen { }
|
||||
|
||||
@@ -49,5 +50,9 @@ export component AppWindow inherits Window {
|
||||
}
|
||||
}
|
||||
|
||||
if root.screen == AppScreen.shell: AppShell { }
|
||||
if root.screen == AppScreen.shell: AppShell {
|
||||
open-album(id) => {
|
||||
root.open-album(id);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -42,6 +42,7 @@ component NavButton inherits Rectangle {
|
||||
|
||||
export component Carousel inherits VerticalLayout {
|
||||
in property <DiscoverSection> section;
|
||||
callback album-clicked(string);
|
||||
|
||||
property <length> card-width: 220px;
|
||||
property <length> card-height: 266px;
|
||||
@@ -112,6 +113,9 @@ export component Carousel inherits VerticalLayout {
|
||||
spacing: root.gap;
|
||||
for album in root.section.albums: AlbumCard {
|
||||
album: album;
|
||||
clicked(id) => {
|
||||
root.album-clicked(id);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -93,6 +93,8 @@ component GearButton inherits Rectangle {
|
||||
}
|
||||
|
||||
export component HomeView inherits Rectangle {
|
||||
callback album-clicked(string);
|
||||
|
||||
background: Theme.surface-main;
|
||||
|
||||
VerticalLayout {
|
||||
@@ -155,6 +157,9 @@ export component HomeView inherits Rectangle {
|
||||
|
||||
for section in HomeState.sections: Carousel {
|
||||
section: section;
|
||||
album-clicked(id) => {
|
||||
root.album-clicked(id);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -6,9 +6,12 @@ export global Typography {
|
||||
out property <length> body: 14px;
|
||||
out property <length> subtitle: 14px;
|
||||
out property <length> button: 16px;
|
||||
out property <length> heading: 18px;
|
||||
out property <length> title: 24px;
|
||||
out property <length> wordmark: 28px;
|
||||
|
||||
out property <int> regular: 400;
|
||||
out property <int> medium: 500;
|
||||
out property <int> semibold: 600;
|
||||
out property <int> bold: 700;
|
||||
}
|
||||
@@ -1,17 +1,19 @@
|
||||
// App shell — the post-login frame: header bar, sidebar, content
|
||||
// region, and player bar.
|
||||
//
|
||||
// The content region is a placeholder; the Discover / Home view lands
|
||||
// in the next increment. Hairlines separate the regions.
|
||||
// region, and player bar. The content region shows either the Discover
|
||||
// Home view or the Album detail view, driven by NavState.
|
||||
|
||||
import { Theme } from "../foundation/semantic-colors.slint";
|
||||
import { Layout } from "../foundation/layout.slint";
|
||||
import { NavState } 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";
|
||||
|
||||
export component AppShell inherits Rectangle {
|
||||
callback open-album(string);
|
||||
|
||||
background: Theme.surface-main;
|
||||
|
||||
VerticalLayout {
|
||||
@@ -32,8 +34,18 @@ export component AppShell inherits Rectangle {
|
||||
width: Layout.hairline;
|
||||
background: Theme.border-subtle;
|
||||
}
|
||||
HomeView {
|
||||
|
||||
// Content region — Home or Album detail.
|
||||
Rectangle {
|
||||
horizontal-stretch: 1;
|
||||
background: Theme.surface-main;
|
||||
|
||||
if !NavState.showing-album: HomeView {
|
||||
album-clicked(id) => {
|
||||
root.open-album(id);
|
||||
}
|
||||
}
|
||||
if NavState.showing-album: AlbumPageView { }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -26,3 +26,28 @@ export global HomeState {
|
||||
in property <[DiscoverSection]> sections: [];
|
||||
in property <bool> loading: false;
|
||||
}
|
||||
|
||||
export struct AlbumTrackItem {
|
||||
number: string,
|
||||
title: string,
|
||||
artist: string,
|
||||
duration: string,
|
||||
quality-tier: string,
|
||||
explicit: bool,
|
||||
}
|
||||
|
||||
// Album detail screen state.
|
||||
export global AlbumState {
|
||||
in property <string> title;
|
||||
in property <string> artist;
|
||||
in property <string> info-line;
|
||||
in property <string> quality-tier;
|
||||
in property <image> artwork;
|
||||
in property <[AlbumTrackItem]> tracks: [];
|
||||
in property <bool> loading: false;
|
||||
}
|
||||
|
||||
// Which content view the shell shows.
|
||||
export global NavState {
|
||||
in-out property <bool> showing-album: false;
|
||||
}
|
||||
Reference in new issue
Block a user