vicrodh
cfe083898d
Wires the sidebar's musician-clicked callback into a real
destination. Mirrors Tauri's MusicianPageView.svelte plus the
"jump to artist page when Confirmed" shortcut.
Slint:
- ContentView gains a `musician` variant; NavEntry mirrors with
`Musician { name, role }` so the back/forward history can
re-fire the page with the original payload.
- MusicianState / MusicianActions globals carry the resolved
musician metadata (name, role, confidence) + the paginated
Appears On grid (MusicianAppearanceItem mirrors the Tauri
interface — album_id, title, artist_name, year,
role_on_album, artwork URL/handle).
- New `ui/musician/MusicianPageView.slint`: header (avatar +
name + role), Bands & Projects chips when populated, and an
Appears On grid built from the same absolute-position pattern
the artist release grid uses. Load more button drives
MusicianActions::load-more.
- AppShell routes ContentView.musician to MusicianPageView and
forwards open-album.
Rust:
- `crate::musician` controller — load_musician, apply_musician,
load_more_appearances, append_appearances, reset_musician,
artwork_jobs. Pure data + UI plumbing; the orchestration lives
in qbz-core.
- artwork::ArtworkTarget gains MusicianAppearance { index } so
the existing artwork pipeline can target the new grid.
- main.rs gains `navigate_musician` (the navigation entry point
apply_entry now also routes to) and `on_musician_clicked`
(does the resolve, jumps to navigate_artist on Confirmed,
otherwise records + navigates to the Musician view).
- MusicianActions::on_load_more wired to load_more_appearances
+ append.
cc
270 lines
9.8 KiB
Plaintext
270 lines
9.8 KiB
Plaintext
// MusicianPageView — full page view opened from the artist network
|
|
// sidebar when a relationship row resolves with Contextual / Weak
|
|
// confidence (no exact Qobuz artist match). Mirrors Tauri's
|
|
// MusicianPageView.svelte: a small header (avatar + name + role)
|
|
// followed by Bands & Projects (when known) and the "Appears On"
|
|
// album grid with paginated load-more.
|
|
|
|
import { Theme } from "../foundation/semantic-colors.slint";
|
|
import { Typography } from "../foundation/typography.slint";
|
|
import { Radius } from "../foundation/radius.slint";
|
|
import {
|
|
MusicianState,
|
|
MusicianActions,
|
|
MusicianAppearanceItem,
|
|
} from "../state.slint";
|
|
import { QbzIcon } from "../primitives/QbzIcon.slint";
|
|
import { LoadingSpinner } from "../primitives/LoadingSpinner.slint";
|
|
import { NavButtons } from "../shell/NavButtons.slint";
|
|
|
|
component AppearanceCard inherits Rectangle {
|
|
in property <MusicianAppearanceItem> item;
|
|
callback clicked(string /* album-id */);
|
|
|
|
width: 200px;
|
|
height: 270px;
|
|
|
|
VerticalLayout {
|
|
spacing: 6px;
|
|
Rectangle {
|
|
width: 200px;
|
|
height: 200px;
|
|
border-radius: Radius.sm;
|
|
background: Theme.surface-elevated;
|
|
drop-shadow-blur: 18px;
|
|
drop-shadow-color: #00000060;
|
|
drop-shadow-offset-y: 6px;
|
|
clip: true;
|
|
Image {
|
|
width: 100%;
|
|
height: 100%;
|
|
source: root.item.artwork;
|
|
image-fit: cover;
|
|
}
|
|
TouchArea {
|
|
mouse-cursor: pointer;
|
|
clicked => {
|
|
root.clicked(root.item.album-id);
|
|
}
|
|
}
|
|
}
|
|
Text {
|
|
text: root.item.album-title;
|
|
color: Theme.text-primary;
|
|
font-size: Typography.body;
|
|
font-weight: Typography.medium;
|
|
overflow: elide;
|
|
width: 200px;
|
|
}
|
|
Text {
|
|
text: root.item.artist-name;
|
|
color: Theme.text-muted;
|
|
font-size: Typography.legal;
|
|
overflow: elide;
|
|
width: 200px;
|
|
}
|
|
HorizontalLayout {
|
|
spacing: 8px;
|
|
if root.item.year != "": Text {
|
|
text: root.item.year;
|
|
color: Theme.text-muted;
|
|
font-size: Typography.legal;
|
|
}
|
|
if root.item.role-on-album != "": Text {
|
|
text: root.item.role-on-album;
|
|
color: Theme.text-secondary;
|
|
font-size: Typography.legal;
|
|
font-weight: Typography.medium;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
export component MusicianPageView inherits Rectangle {
|
|
callback open-album(string);
|
|
|
|
property <length> card-width: 200px;
|
|
property <length> card-height: 270px;
|
|
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; }
|
|
|
|
// --- Musician header ---------------------------------------
|
|
HorizontalLayout {
|
|
spacing: 16px;
|
|
alignment: start;
|
|
Rectangle {
|
|
width: 56px;
|
|
height: 56px;
|
|
border-radius: 28px;
|
|
background: Theme.surface-elevated;
|
|
QbzIcon {
|
|
source: @image-url("../assets/icons/user.svg");
|
|
width: 28px;
|
|
height: 28px;
|
|
x: (parent.width - self.width) / 2;
|
|
y: (parent.height - self.height) / 2;
|
|
tint: Theme.text-muted;
|
|
}
|
|
}
|
|
VerticalLayout {
|
|
alignment: center;
|
|
spacing: 2px;
|
|
Text {
|
|
text: MusicianState.name;
|
|
color: Theme.text-primary;
|
|
font-size: Typography.title;
|
|
font-weight: Typography.bold;
|
|
}
|
|
Text {
|
|
text: MusicianState.role;
|
|
color: Theme.text-muted;
|
|
font-size: Typography.body;
|
|
}
|
|
}
|
|
}
|
|
|
|
Rectangle { height: 32px; }
|
|
|
|
// --- Bands & Projects (chips) ------------------------------
|
|
if MusicianState.bands.length > 0: VerticalLayout {
|
|
spacing: 10px;
|
|
Text {
|
|
text: @tr("Bands & Projects");
|
|
color: Theme.text-primary;
|
|
font-size: Typography.heading;
|
|
font-weight: Typography.semibold;
|
|
}
|
|
HorizontalLayout {
|
|
spacing: 8px;
|
|
alignment: start;
|
|
for band in MusicianState.bands: Rectangle {
|
|
height: 32px;
|
|
border-radius: Radius.sm;
|
|
background: Theme.surface-card;
|
|
HorizontalLayout {
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
spacing: 8px;
|
|
VerticalLayout {
|
|
alignment: center;
|
|
QbzIcon {
|
|
source: @image-url("../assets/icons/music.svg");
|
|
width: 14px;
|
|
height: 14px;
|
|
tint: Theme.text-muted;
|
|
}
|
|
}
|
|
Text {
|
|
text: band;
|
|
color: Theme.text-secondary;
|
|
font-size: Typography.body;
|
|
vertical-alignment: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
Rectangle { height: 24px; }
|
|
}
|
|
|
|
// --- Appears On --------------------------------------------
|
|
HorizontalLayout {
|
|
spacing: 8px;
|
|
Text {
|
|
text: @tr("Appears On");
|
|
color: Theme.text-primary;
|
|
font-size: Typography.heading;
|
|
font-weight: Typography.semibold;
|
|
vertical-alignment: center;
|
|
}
|
|
if MusicianState.total > 0: Text {
|
|
text: "(" + MusicianState.total + ")";
|
|
color: Theme.text-muted;
|
|
font-size: Typography.body;
|
|
vertical-alignment: center;
|
|
}
|
|
}
|
|
Rectangle { height: 14px; }
|
|
|
|
if MusicianState.loading
|
|
&& MusicianState.appearances.length == 0: HorizontalLayout {
|
|
alignment: center;
|
|
LoadingSpinner { size: 36px; }
|
|
}
|
|
if !MusicianState.loading
|
|
&& MusicianState.appearances.length == 0: Text {
|
|
text: @tr("No album appearances found.");
|
|
color: Theme.text-muted;
|
|
font-size: Typography.body;
|
|
}
|
|
|
|
if MusicianState.appearances.length > 0: appearances-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(MusicianState.appearances.length / self.columns);
|
|
height: self.rows > 0
|
|
? self.rows * root.card-height
|
|
+ Math.max(0, self.rows - 1) * root.card-gap
|
|
: 0px;
|
|
for item[i] in MusicianState.appearances: AppearanceCard {
|
|
x: Math.mod(i, appearances-grid.columns) * (root.card-width + root.card-gap);
|
|
y: Math.floor(i / appearances-grid.columns) * (root.card-height + root.card-gap);
|
|
item: item;
|
|
clicked(id) => {
|
|
root.open-album(id);
|
|
}
|
|
}
|
|
}
|
|
|
|
if MusicianState.appearances.length > 0
|
|
&& MusicianState.appearances.length < MusicianState.total:
|
|
HorizontalLayout {
|
|
alignment: center;
|
|
Rectangle {
|
|
width: load-more-text.preferred-width + 24px;
|
|
height: 32px;
|
|
load-more-text := Text {
|
|
text: MusicianState.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: !MusicianState.load-more-loading;
|
|
clicked => {
|
|
MusicianActions.load-more();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|