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

// Album card for the Discover sections.
//
// Mirrors the Svelte AlbumCardLite: 220px column, 220px square artwork
// with a bottom-left award ribbon and a hover overlay (dark scrim,
// genre/year meta, and play / favorite / more action buttons), then a
// tight title / artist stack alongside an icon-only quality badge.
// Deterministic 266px height.

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 { AlbumCardItem } from "../state.slint";

// Circular hover-overlay action button.
component OverlayButton inherits Rectangle {
    in property <string> glyph;
    in property <bool> primary: false;
    in property <length> diameter: 36px;
    in property <length> glyph-size: 16px;

    width: root.diameter;
    height: root.diameter;
    border-radius: root.diameter / 2;
    background: root.primary ? #ffffff : transparent;
    border-width: root.primary ? 0px : 1.5px;
    border-color: #ffffffe6;

    Text {
        text: root.glyph;
        color: root.primary ? #000000 : #ffffff;
        font-size: root.glyph-size;
        horizontal-alignment: center;
        vertical-alignment: center;
    }
}

export component AlbumCard inherits Rectangle {
    in property <AlbumCardItem> album;
    callback clicked(string);

    // Fully deterministic height: artwork 220 + 6 spacer + 40 meta.
    width: 220px;
    height: 266px;

    VerticalLayout {
        alignment: start;
        spacing: 0px;

        // --- Artwork + hover overlay -------------------------------------
        Rectangle {
            width: 220px;
            height: 220px;
            border-radius: Radius.sm;
            background: Theme.surface-elevated;
            clip: true;

            // Cover art. Empty until the artwork pipeline resolves it,
            // leaving the elevated placeholder visible underneath.
            Image {
                width: 100%;
                height: 100%;
                source: root.album.artwork;
                image-fit: cover;
            }

            // Hover scrim.
            Rectangle {
                width: 100%;
                height: 100%;
                background: #000000;
                opacity: hover.has-hover ? 0.6 : 0.0;
                animate opacity { duration: 150ms; }
            }

            // Hover meta — genre + year, top-left.
            VerticalLayout {
                x: 12px;
                y: 12px;
                spacing: 1px;
                opacity: hover.has-hover ? 1.0 : 0.0;
                animate opacity { duration: 150ms; }

                Text {
                    text: root.album.genre;
                    visible: root.album.genre != "";
                    color: #ffffffeb;
                    font-size: 14px;
                    font-weight: Typography.medium;
                }
                Text {
                    text: root.album.year;
                    visible: root.album.year != "";
                    color: #ffffffcc;
                    font-size: 13px;
                }
            }

            // Hover action buttons — favorite / play / more.
            HorizontalLayout {
                x: 0px;
                y: 132px;
                width: 220px;
                height: 44px;
                alignment: center;
                spacing: 12px;
                opacity: hover.has-hover ? 1.0 : 0.0;
                animate opacity { duration: 150ms; }

                VerticalLayout {
                    alignment: center;
                    OverlayButton { glyph: "♡"; }
                }
                OverlayButton {
                    glyph: "▶";
                    primary: true;
                    diameter: 44px;
                    glyph-size: 17px;
                }
                VerticalLayout {
                    alignment: center;
                    OverlayButton { glyph: "⋯"; glyph-size: 18px; }
                }
            }

            // Award ribbon — always visible, above the overlay.
            if root.album.ribbon != "": Rectangle {
                x: 0px;
                y: parent.height - self.height - 8px;
                height: 20px;
                background: root.album.ribbon-kind == "press"
                    ? #d49511
                    : #000000e0;
                border-top-right-radius: 3px;
                border-bottom-right-radius: 3px;

                // Left accent stripe (not on the gold press ribbon).
                Rectangle {
                    x: 0px;
                    width: root.album.ribbon-kind == "press" ? 0px : 3px;
                    background: root.album.ribbon-kind == "qobuzissime"
                        ? #8b5cf6
                        : #eab308;
                }
                HorizontalLayout {
                    padding-left: 10px;
                    padding-right: 10px;
                    Text {
                        text: root.album.ribbon;
                        color: root.album.ribbon-kind == "press"
                            ? #1f1407
                            : #ffffff;
                        font-size: 10px;
                        font-weight: Typography.semibold;
                        vertical-alignment: center;
                        overflow: elide;
                    }
                }
            }

            // Hover + click detector — topmost so it owns the pointer.
            hover := TouchArea {
                width: 100%;
                height: 100%;
                mouse-cursor: pointer;
                clicked => {
                    root.clicked(root.album.id);
                }
            }
        }

        Rectangle { height: 6px; }

        // --- Title / artist + quality badge ------------------------------
        HorizontalLayout {
            height: 40px;
            spacing: Spacing.sm;

            VerticalLayout {
                alignment: center;
                spacing: 2px;
                horizontal-stretch: 1;

                Text {
                    text: root.album.title;
                    height: 20px;
                    color: Theme.text-primary;
                    font-size: Typography.body;
                    font-weight: Typography.medium;
                    vertical-alignment: center;
                    overflow: elide;
                }
                Text {
                    text: root.album.artist;
                    height: 18px;
                    color: Theme.text-muted;
                    font-size: Typography.link;
                    vertical-alignment: center;
                    overflow: elide;
                }
            }

            // Icon-only quality badge.
            VerticalLayout {
                alignment: center;

                if root.album.quality-tier == "hires": Image {
                    source: @image-url("../assets/hi-res.svg");
                    width: 42px;
                    height: 28px;
                    image-fit: contain;
                }
                if root.album.quality-tier == "cd": Rectangle {
                    width: 30px;
                    height: 30px;
                    border-radius: 3px;
                    background: Theme.surface-elevated;
                    border-width: 1px;
                    border-color: Theme.border-subtle;
                    Image {
                        x: (parent.width - self.width) / 2;
                        y: (parent.height - self.height) / 2;
                        width: 16px;
                        height: 16px;
                        source: @image-url("../assets/cd.svg");
                        image-fit: contain;
                    }
                }
            }
        }
    }
}