Joren/qbz
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(slint): LabelReleasesView (Port 3, second of three click targets)

Browse Source 
Wires the artist network sidebar's Labels section to a real
destination. Mirrors Tauri's LabelReleasesView.svelte core: a label
header (image + name + release count) over a wrapping album grid
with load-more pagination. (Sort / filter Hi-Res / group-by-artist
from the Tauri view are deferred — the core browse experience is in.)

Slint:
  - ContentView gains `label`; NavEntry mirrors with
    `Label { id, name }`.
  - LabelState / LabelActions globals carry the header (id, name,
    image-url + decoded image) and the AlbumCardItem grid + total.
  - New `ui/label/LabelReleasesView.slint`: label header card,
    then the same absolute-position album grid + load-more pattern
    the artist/musician views use. Reuses the Discover AlbumCard
    (artist-as-subtitle is correct here — a label's catalog is
    various artists).
  - AppShell routes ContentView.label and forwards open-album +
    media-action.

Rust:
  - `crate::label` controller — load_label (parallel-ish
    get_label_page + get_label_albums), load_more_albums,
    apply_label, append_albums, apply_image (label header), and
    artwork_jobs. extract_label_image handles the flexible
    /label/page image value (string or mega/extralarge/.../small
    object), same precedence as the Svelte.
  - artwork::ArtworkTarget gains LabelAlbum { index }.
  - main.rs: navigate_label + apply_entry route + on_label_clicked
    (sidebar) + LabelActions::on_load_more.
  - No new qbz-core methods — get_label_page / get_label_albums
    already existed.

cc
This commit is contained in:
vicrodh committed 2026-05-20 20:09:09 -06:00
1 parent cfe083898d
commit 302f708694
8 files changed
+550 -7
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

crates/qbz-slint/ui/label/LabelReleasesView.slint
+154
View File
@@ -0,0 +1,154 @@
// LabelReleasesView — opened from the artist network sidebar's
// Labels section. Mirrors Tauri's LabelReleasesView.svelte core:
// a label header (image + name + album count) over a wrapping
// album grid with load-more pagination. The sort / filter /
// group-by-artist controls from the Tauri view are deferred.
import { Theme } from "../foundation/semantic-colors.slint";
import { Typography } from "../foundation/typography.slint";
import { Radius } from "../foundation/radius.slint";
import { LabelState, LabelActions, AlbumCardItem } from "../state.slint";
import { AlbumCard } from "../discover/AlbumCard.slint";
import { QbzIcon } from "../primitives/QbzIcon.slint";
import { LoadingSpinner } from "../primitives/LoadingSpinner.slint";
import { NavButtons } from "../shell/NavButtons.slint";
export component LabelReleasesView inherits Rectangle {
callback open-album(string);
callback media-action(string, string, string);
property <length> card-width: 220px;
property <length> card-height: 266px;
property <length> card-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: 11px;
padding-bottom: 100px;
spacing: 0px;
alignment: start;
HorizontalLayout {
alignment: start;
NavButtons { }
}
Rectangle { height: 22px; }
// --- Label header ------------------------------------------
HorizontalLayout {
spacing: 24px;
alignment: start;
Rectangle {
width: 120px;
height: 120px;
border-radius: Radius.md;
background: Theme.surface-elevated;
clip: true;
Image {
width: 100%;
height: 100%;
source: LabelState.image;
image-fit: cover;
}
if LabelState.image-url == "": QbzIcon {
source: @image-url("../assets/icons/disc-3.svg");
width: 44px;
height: 44px;
x: (parent.width - self.width) / 2;
y: (parent.height - self.height) / 2;
tint: Theme.text-muted;
}
}
VerticalLayout {
alignment: center;
spacing: 6px;
Text {
text: @tr("LABEL");
color: Theme.text-muted;
font-size: 10px;
font-weight: Typography.semibold;
letter-spacing: 1.5px;
}
Text {
text: LabelState.name;
color: Theme.text-primary;
font-size: Typography.title;
font-weight: Typography.bold;
}
if LabelState.total > 0: Text {
text: LabelState.total + " " + @tr("releases");
color: Theme.text-muted;
font-size: Typography.body;
}
}
}
Rectangle { height: 32px; }
if LabelState.loading && LabelState.albums.length == 0: HorizontalLayout {
alignment: center;
LoadingSpinner { size: 36px; }
}
// --- Album grid --------------------------------------------
if LabelState.albums.length > 0: grid := Rectangle {
property <int> columns: Math.max(
1,
Math.floor((self.width + root.card-gap) / (root.card-width + root.card-gap)));
property <int> rows: Math.ceil(LabelState.albums.length / self.columns);
height: self.rows > 0
? self.rows * root.card-height + Math.max(0, self.rows - 1) * root.card-gap
: 0px;
for album[i] in LabelState.albums: AlbumCard {
x: Math.mod(i, grid.columns) * (root.card-width + root.card-gap);
y: Math.floor(i / grid.columns) * (root.card-height + root.card-gap);
width: root.card-width;
height: root.card-height;
album: album;
clicked(id) => {
root.open-album(id);
}
media-action(kind, id, action) => {
root.media-action(kind, id, action);
}
}
}
if LabelState.albums.length > 0
&& LabelState.albums.length < LabelState.total: HorizontalLayout {
alignment: center;
Rectangle {
width: load-more-text.preferred-width + 24px;
height: 32px;
load-more-text := Text {
text: LabelState.load-more-loading
? @tr("Loading…")
: @tr("Load more");
color: load-more-ta.has-hover
? Theme.text-primary
: Theme.text-secondary;
font-size: 13px;
x: (parent.width - self.width) / 2;
y: (parent.height - self.height) / 2;
}
load-more-ta := TouchArea {
mouse-cursor: pointer;
enabled: !LabelState.load-more-loading;
clicked => {
LabelActions.load-more();
}
}
}
}
}
}
}