feat(slint): add slim-card grid for Popular albums

Add a compact "slim" card variant and a 4-column grid section that
renders it, used for the Popular albums row on Discover Home.

- SlimCard: 60px row with optional rank, 44px thumbnail, title/subtitle
- GridSection: 4-column grid; cards absolutely positioned since Slint
  GridLayout cannot host a `for`
- state.slint: SlimItem struct and HomeState.popular model
- home.rs: load_home now returns HomeData { sections, popular };
  map_slim maps the discover most-streamed container
- artwork pipeline: ArtworkTarget enum routes decoded covers to either
  a section card or a popular card

cc

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

@@ -0,0 +1,50 @@
+// A Discover section that lays slim cards in a fixed 4-column grid
+// (Popular albums, Recently Played). Non-paginated for now.
+//
+// GridLayout cannot host a `for`, so cards are absolutely positioned
+// inside a Rectangle whose height is derived from the row count.
+
+import { Theme } from "../foundation/semantic-colors.slint";
+import { Typography } from "../foundation/typography.slint";
+import { SlimItem } from "../state.slint";
+import { SlimCard } from "SlimCard.slint";
+
+export component GridSection inherits VerticalLayout {
+    in property <string> title;
+    in property <[SlimItem]> items;
+    callback item-clicked(string);
+
+    property <int> columns: 4;
+    property <length> gap: 8px;
+    property <length> row-height: 60px;
+    property <int> rows: Math.ceil(root.items.length / root.columns);
+
+    spacing: 12px;
+
+    Text {
+        text: root.title;
+        color: Theme.text-primary;
+        font-size: 18px;
+        font-weight: Typography.semibold;
+    }
+
+    grid := Rectangle {
+        property <length> cell-width:
+            (self.width - (root.columns - 1) * root.gap) / root.columns;
+
+        height: root.rows > 0
+            ? root.rows * root.row-height + (root.rows - 1) * root.gap
+            : 0px;
+
+        for item[i] in root.items: SlimCard {
+            width: grid.cell-width;
+            height: root.row-height;
+            x: Math.mod(i, root.columns) * (grid.cell-width + root.gap);
+            y: Math.floor(i / root.columns) * (root.row-height + root.gap);
+            item: item;
+            clicked(id) => {
+                root.item-clicked(id);
+            }
+        }
+    }
+}

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

@@ -10,6 +10,7 @@ import { Theme } from "../foundation/semantic-colors.slint";
 import { Typography } from "../foundation/typography.slint";
 import { HomeState } from "../state.slint";
 import { Carousel } from "Carousel.slint";
+import { GridSection } from "GridSection.slint";
 import { QbzIcon } from "../primitives/QbzIcon.slint";
 import { ScrollView } from "std-widgets.slint";
 
@@ -174,6 +175,14 @@ export component HomeView inherits Rectangle {
                         root.album-clicked(id);
                     }
                 }
+
+                if HomeState.popular.length > 0: GridSection {
+                    title: @tr("Popular albums");
+                    items: HomeState.popular;
+                    item-clicked(id) => {
+                        root.album-clicked(id);
+                    }
+                }
             }
         }
     }

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

@@ -0,0 +1,77 @@
+// Compact "slim" card — a 44px thumbnail with a title / subtitle, used
+// in grid sections like Popular albums and Recently Played. Optionally
+// rank-numbered on the left.
+
+import { Theme } from "../foundation/semantic-colors.slint";
+import { Typography } from "../foundation/typography.slint";
+import { Radius } from "../foundation/radius.slint";
+import { SlimItem } from "../state.slint";
+
+export component SlimCard inherits Rectangle {
+    in property <SlimItem> item;
+    callback clicked(string);
+
+    height: 60px;
+    border-radius: Radius.sm;
+    background: ta.has-hover ? Theme.surface-hover : transparent;
+
+    HorizontalLayout {
+        padding-left: 8px;
+        padding-right: 8px;
+        spacing: 12px;
+
+        if root.item.rank != "": VerticalLayout {
+            alignment: center;
+            Text {
+                text: root.item.rank;
+                width: 20px;
+                color: Theme.text-muted;
+                font-size: Typography.body;
+                horizontal-alignment: center;
+            }
+        }
+
+        VerticalLayout {
+            alignment: center;
+            Rectangle {
+                width: 44px;
+                height: 44px;
+                border-radius: 4px;
+                background: Theme.surface-elevated;
+                clip: true;
+                Image {
+                    width: 100%;
+                    height: 100%;
+                    source: root.item.artwork;
+                    image-fit: cover;
+                }
+            }
+        }
+
+        VerticalLayout {
+            alignment: center;
+            horizontal-stretch: 1;
+            spacing: 2px;
+            Text {
+                text: root.item.title;
+                color: Theme.text-primary;
+                font-size: Typography.link;
+                font-weight: Typography.medium;
+                overflow: elide;
+            }
+            Text {
+                text: root.item.subtitle;
+                color: Theme.text-muted;
+                font-size: 12px;
+                overflow: elide;
+            }
+        }
+    }
+
+    ta := TouchArea {
+        mouse-cursor: pointer;
+        clicked => {
+            root.clicked(root.item.id);
+        }
+    }
+}

crates/qbz-slint/ui/state.slint

@@ -21,9 +21,21 @@ export struct DiscoverSection {
     albums: [AlbumCardItem],
 }
 
+// Compact "slim" card item — a small thumbnail with a title/subtitle,
+// optionally rank-numbered (Popular albums, Recently Played).
+export struct SlimItem {
+    id: string,
+    title: string,
+    subtitle: string,
+    rank: string,          // "" = no rank
+    artwork-url: string,
+    artwork: image,
+}
+
 // Discover / Home screen state.
 export global HomeState {
     in property <[DiscoverSection]> sections: [];
+    in property <[SlimItem]> popular: [];
     in property <bool> loading: false;
 }