feat(qbz-slint): app shell frame

M1 progress. Adds the post-login shell: HeaderBar (nav tabs and search), Sidebar (playlists list and user card), PlayerBar (transport, now-playing, volume), and AppShell composing them with the content region as a placeholder. app.slint gains an AppScreen enum; clicking sign-in or start-offline navigates login -> shell (no real auth yet — that is M2). New layout foundation tokens (sidebar width, header/player-bar heights) plus border and hover semantic colors. cc
2026-05-18 12:34:01 -06:00
1 parent d5be0029b6
commit 7535869e61
@@ -0,0 +1,139 @@
+// Left navigation sidebar — playlists list plus the user card.
+//
+// Shell-frame increment: the playlist rows are placeholder names for
+// visual reference. Real playlist data is wired in a later milestone.
+
+import { Theme } from "../foundation/semantic-colors.slint";
+import { Spacing } from "../foundation/spacing.slint";
+import { Typography } from "../foundation/typography.slint";
+import { Layout } from "../foundation/layout.slint";
+import { Radius } from "../foundation/radius.slint";
+import { ScrollView } from "std-widgets.slint";
+
+component PlaylistRow inherits Rectangle {
+    in property <string> name;
+    height: 34px;
+    border-radius: Radius.sm;
+    background: ta.has-hover ? Theme.surface-hover : transparent;
+
+    HorizontalLayout {
+        padding-left: Spacing.sm;
+        padding-right: Spacing.sm;
+        spacing: Spacing.sm;
+
+        Rectangle {
+            width: 16px;
+            height: 16px;
+            y: (parent.height - self.height) / 2;
+            border-radius: 3px;
+            background: Theme.accent;
+            opacity: 0.55;
+        }
+        Text {
+            text: root.name;
+            color: Theme.text-secondary;
+            font-size: Typography.body;
+            vertical-alignment: center;
+            overflow: elide;
+            horizontal-stretch: 1;
+        }
+        Text {
+            text: "›";
+            color: Theme.text-muted;
+            font-size: 16px;
+            vertical-alignment: center;
+        }
+    }
+
+    ta := TouchArea {
+        mouse-cursor: pointer;
+    }
+}
+
+export component Sidebar inherits Rectangle {
+    width: Layout.sidebar-width;
+    background: Theme.surface-main;
+
+    VerticalLayout {
+        padding: Spacing.md;
+        spacing: Spacing.md;
+
+        HorizontalLayout {
+            Text {
+                text: "PLAYLISTS";
+                color: Theme.text-muted;
+                font-size: 11px;
+                letter-spacing: 1.5px;
+                vertical-alignment: center;
+                horizontal-stretch: 1;
+            }
+            Text {
+                text: "+";
+                color: Theme.text-muted;
+                font-size: 18px;
+                vertical-alignment: center;
+            }
+        }
+
+        ScrollView {
+            vertical-stretch: 1;
+            VerticalLayout {
+                spacing: 2px;
+                for name in [
+                    "N.W.O.B.H.M.", "Beatles", "Progressive Metal",
+                    "Progressive Rock", "Rock en español", "Español",
+                    "Metal of the world", "Curated Metal", "Soundtracks",
+                    "Rock Mix", "Anime", "Classic Punk", "grls",
+                    "One Hit Wonder",
+                ] : PlaylistRow {
+                    name: name;
+                }
+            }
+        }
+
+        Rectangle {
+            height: 56px;
+            border-radius: Radius.md;
+            background: Theme.surface-elevated;
+
+            HorizontalLayout {
+                padding: 10px;
+                spacing: Spacing.sm;
+
+                Rectangle {
+                    width: 36px;
+                    height: 36px;
+                    border-radius: Radius.pill;
+                    background: Theme.accent;
+                    Text {
+                        text: "Q";
+                        color: Theme.accent-text;
+                        font-weight: Typography.semibold;
+                        horizontal-alignment: center;
+                        vertical-alignment: center;
+                    }
+                }
+                VerticalLayout {
+                    alignment: center;
+                    horizontal-stretch: 1;
+                    Text {
+                        text: "QBZ User";
+                        color: Theme.text-primary;
+                        font-size: Typography.body;
+                    }
+                    Text {
+                        text: "Slint POC";
+                        color: Theme.text-muted;
+                        font-size: 11px;
+                    }
+                }
+                Text {
+                    text: "⚙";
+                    color: Theme.text-muted;
+                    font-size: 16px;
+                    vertical-alignment: center;
+                }
+            }
+        }
+    }
+}