qbz/crates/qbz-slint/ui/discover/HomeView.slint

// Discover — Home view: a fixed 56px toolbar (tab pill + genre filter +
// settings gear) over a scrollable column of section carousels.
//
// Section data is supplied by the Rust home controller through the
// HomeState global. The Editor's Picks / For You tabs, the genre filter,
// and the settings gear are visual for now; wiring them is a later
// increment.

import { Theme } from "../foundation/semantic-colors.slint";
import { Typography } from "../foundation/typography.slint";
import { HomeState, NavState, ContentView } from "../state.slint";
import { Carousel } from "Carousel.slint";
import { GridSection } from "GridSection.slint";
import { QbzIcon } from "../primitives/QbzIcon.slint";
import { NavButtons } from "../shell/NavButtons.slint";

component Tab inherits Rectangle {
    in property <string> label;
    in property <bool> active: false;
    callback clicked();

    border-radius: 4px;
    background: root.active ? Theme.surface-main
        : ta.has-hover ? Theme.surface-hover : transparent;

    HorizontalLayout {
        padding-left: 14px;
        padding-right: 14px;
        padding-top: 6px;
        padding-bottom: 6px;
        Text {
            text: root.label;
            color: root.active ? Theme.text-primary : Theme.text-muted;
            font-size: 13px;
            font-weight: Typography.medium;
        }
    }

    ta := TouchArea {
        mouse-cursor: pointer;
        clicked => {
            root.clicked();
        }
    }
}

component GenreButton inherits Rectangle {
    callback clicked();

    height: 32px;
    border-radius: 6px;
    background: ta.has-hover ? Theme.surface-hover : Theme.surface-elevated;

    HorizontalLayout {
        padding-left: 12px;
        padding-right: 14px;
        spacing: 7px;
        VerticalLayout {
            alignment: center;
            QbzIcon {
                source: @image-url("../assets/icons/list-filter.svg");
                width: 14px;
                height: 14px;
                tint: Theme.text-secondary;
            }
        }
        Text {
            text: @tr("Filter by genre");
            color: Theme.text-secondary;
            font-size: 13px;
            vertical-alignment: center;
        }
    }

    ta := TouchArea {
        mouse-cursor: pointer;
        clicked => {
            root.clicked();
        }
    }
}

component GearButton inherits Rectangle {
    callback clicked();

    width: 32px;
    height: 32px;
    border-radius: 4px;
    background: ta.has-hover ? Theme.surface-hover : transparent;

    QbzIcon {
        source: @image-url("../assets/icons/settings.svg");
        width: 18px;
        height: 18px;
        x: (parent.width - self.width) / 2;
        y: (parent.height - self.height) / 2;
        tint: ta.has-hover ? Theme.text-primary : Theme.text-muted;
    }

    ta := TouchArea {
        mouse-cursor: pointer;
        clicked => {
            root.clicked();
        }
    }
}

export component HomeView inherits Rectangle {
    callback album-clicked(string);
    callback media-action(string, string, string);

    background: Theme.surface-main;

    VerticalLayout {
        spacing: 0px;

        // --- Toolbar (fixed 56px) ----------------------------------------
        Rectangle {
            height: 56px;
            background: Theme.surface-main;

            HorizontalLayout {
                padding-left: 32px;
                padding-right: 32px;

                // Back / forward history pair, inline beside the tabs.
                VerticalLayout {
                    alignment: center;
                    NavButtons { }
                }
                Rectangle { width: 16px; }

                VerticalLayout {
                    alignment: center;
                    Rectangle {
                        background: Theme.surface-elevated;
                        border-radius: 6px;
                        HorizontalLayout {
                            padding: 3px;
                            spacing: 4px;
                            Tab { label: @tr("Home"); active: true; }
                            Tab { label: @tr("Editor's Picks"); }
                            Tab { label: @tr("For You"); }
                        }
                    }
                }

                Rectangle { horizontal-stretch: 1; }

                VerticalLayout {
                    alignment: center;
                    HorizontalLayout {
                        spacing: 6px;
                        GenreButton { }
                        GearButton {
                            clicked => {
                                NavState.request-settings();
                            }
                        }
                    }
                }
            }
        }
        Rectangle {
            height: 1px;
            background: Theme.border-subtle;
        }

        // --- Scrollable sections -----------------------------------------
        // A Flickable (not a ScrollView): wheel scrolling with no scrollbar
        // gutters at all. viewport-width is pinned to the Flickable width so
        // the carousels' clipped content can never scroll horizontally.
        Flickable {
            vertical-stretch: 1;
            viewport-width: self.width;
            viewport-height: home-content.preferred-height;

            home-content := VerticalLayout {
                padding: 32px;
                spacing: 28px;
                alignment: start;

                if HomeState.loading && HomeState.sections.length == 0: Text {
                    text: @tr("Loading your music...");
                    color: Theme.text-muted;
                    font-size: 14px;
                }

                for section in HomeState.sections: Carousel {
                    section: section;
                    album-clicked(id) => {
                        root.album-clicked(id);
                    }
                    media-action(kind, id, action) => {
                        root.media-action(kind, id, action);
                    }
                }

                if HomeState.recent-albums.length > 0: Carousel {
                    section: {
                        title: @tr("Recently Played Albums"),
                        albums: HomeState.recent-albums,
                    };
                    album-clicked(id) => {
                        root.album-clicked(id);
                    }
                    media-action(kind, id, action) => {
                        root.media-action(kind, id, action);
                    }
                }

                if HomeState.recent.length > 0: GridSection {
                    title: @tr("Recently Played Tracks");
                    items: HomeState.recent;
                    item-clicked(id) => {
                        root.media-action("track", id, "play");
                    }
                }

                if HomeState.popular.length > 0: GridSection {
                    title: @tr("Popular albums");
                    items: HomeState.popular;
                    item-clicked(id) => {
                        root.album-clicked(id);
                    }
                }
            }
        }
    }
}