qbz/crates/qbz-ui/ui/location/ArtistsByLocationView.slint

// ArtistsByLocationView — "artists from the same place" scene
// discovery, opened from the Origin section's location link. Mirrors
// Tauri's ArtistsByLocationView.svelte core: a scene header
// (location + genre summary) over a wrapping artist grid, with
// load-more pagination. The progress bar / live event stream from
// the Tauri view is replaced by a single loading flag.
// The grid uses the app-wide ArtistGridCard (SlimItem; genres ride the
// subtitle row under the name) — follow / play / pin / context menu
// included, homologated with the other artist carousels.

import { Theme } from "../foundation/semantic-colors.slint";
import { Typography } from "../foundation/typography.slint";
import { LocationViewState, LocationViewActions, NavState, ShellState } from "../state.slint";
import { QbzIcon } from "../primitives/QbzIcon.slint";
import { LoadingSpinner } from "../primitives/LoadingSpinner.slint";
import { ListScrollbar } from "../primitives/ListScrollbar.slint";
import { NavButtons } from "../shell/NavButtons.slint";
import { ArtistGridCard } from "../discover/ArtistGridCard.slint";

export component ArtistsByLocationView inherits Rectangle {
    callback open-artist(string);
    // kind ("artist"), id, action ("follow" | "play") — routed to the
    // shell's central media-action like every other card surface.
    callback media-action(string, string, string);

    property <length> card-width: 200px;
    property <length> card-height: 246px;
    property <length> card-gap: 20px;

    background: ShellState.app-background-active ? transparent : Theme.surface-main;

    flick := Flickable {
        viewport-width: self.width;
        viewport-height: page.preferred-height;
        // Scroll-position restore on back/forward (see nav::scope_for).
        property <string> sr-armed: NavState.restore-scope;
        function sr-restore() {
            if (NavState.restore-scope == "location" && self.viewport-height > self.height) {
                self.viewport-y = NavState.scroll-restore;
                NavState.restore-scope = "";
            }
        }
        init => { self.sr-restore(); }
        changed sr-armed => { self.sr-restore(); }
        changed viewport-height => { self.sr-restore(); }
        changed viewport-y => { NavState.report-scroll(self.viewport-y); }

        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; }

            // --- Scene header ------------------------------------------
            VerticalLayout {
                spacing: 4px;
                HorizontalLayout {
                    spacing: 10px;
                    alignment: start;
                    VerticalLayout {
                        alignment: center;
                        QbzIcon {
                            source: @image-url("../assets/icons/map-pin.svg");
                            width: 22px;
                            height: 22px;
                            tint: Theme.accent;
                        }
                    }
                    Text {
                        text: LocationViewState.scene-label != ""
                            ? LocationViewState.scene-label
                            : @tr("Scene");
                        color: Theme.text-primary;
                        // Hero homologated to the canonical 18px (section).
                        font-size: Typography.section;
                        font-weight: Typography.bold;
                        vertical-alignment: center;
                    }
                }
                if LocationViewState.genre-summary != "": Text {
                    text: LocationViewState.genre-summary;
                    color: Theme.text-muted;
                    font-size: Typography.body;
                }
            }

            Rectangle { height: 28px; }

            if LocationViewState.loading
                && LocationViewState.artists.length == 0: HorizontalLayout {
                alignment: center;
                LoadingSpinner { size: 36px; }
            }
            if !LocationViewState.loading
                && LocationViewState.artists.length == 0: Text {
                text: @tr("No artists found for this scene.");
                color: Theme.text-muted;
                font-size: Typography.body;
            }

            // --- Artist grid -------------------------------------------
            if LocationViewState.artists.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(LocationViewState.artists.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 LocationViewState.artists: ArtistGridCard {
                    x: Math.mod(i, grid.columns) * (root.card-width + root.card-gap);
                    y: Math.floor(i / grid.columns) * (root.card-height + root.card-gap);
                    artist: item;
                    clicked(id) => {
                        if (id != "") {
                            root.open-artist(id);
                        }
                    }
                    media-action(k, id, a) => {
                        root.media-action(k, id, a);
                    }
                }
            }

            if LocationViewState.artists.length > 0
                && LocationViewState.artists.length < LocationViewState.total: HorizontalLayout {
                alignment: center;
                Rectangle {
                    width: load-more-text.preferred-width + 24px;
                    height: 32px;
                    load-more-text := Text {
                        text: LocationViewState.load-more-loading
                            ? @tr("Loading…")
                            : @tr("Load more");
                        color: load-more-ta.has-hover
                            ? Theme.text-primary
                            : Theme.text-secondary;
                        font-size: 13px;
                        x: Math.round((parent.width - self.width) / 2 / 1px) * 1px;
                        y: Math.round((parent.height - self.height) / 2 / 1px) * 1px;
                    }
                    load-more-ta := TouchArea {
                        mouse-cursor: pointer;
                        enabled: !LocationViewState.load-more-loading;
                        clicked => {
                            LocationViewActions.load-more();
                        }
                    }
                }
            }
        }
    }

    // Shared scrollbar in the right gutter (homologated cross-view).
    ListScrollbar {
        x: parent.width - self.width - 4px;
        width: 14px;
        height: 100%;
        viewport-height: flick.viewport-height;
        visible-height: flick.height;
        viewport-y <=> flick.viewport-y;
    }
}