feat(slint): playlist folders in the sidebar

Local, Tauri-shared playlist folders (library.db) now organize the sidebar: - New folders.rs controller (create / rename / delete / move via qbz-library); sidebar.rs reworked to a flattened entries model (folder headers + grouped playlists + root playlists) with a session expand cache, rebuilt without a refetch on expand/move. - Sidebar renders folders (expandable, with playlist counts) and playlists (indented inside folders); a hover "..." opens a context popup: Move to folder (root + each folder) for playlists, Delete folder for folders. - Header gains a New-folder button + a CreateFolderModal; folders reload after create/delete; moves are optimistic + persisted. Adds folder-open / folder-plus icons. cc
2026-05-22 08:44:37 -06:00
1 parent 5ac5c60c57
commit 4fe034d86b
@@ -0,0 +1,104 @@
+// "Create folder" modal — a name field + Create. Opened from the
+// sidebar's "New folder" action (CreateFolderState.open).
+
+import { Theme } from "../foundation/semantic-colors.slint";
+import { Typography } from "../foundation/typography.slint";
+import { Radius } from "../foundation/radius.slint";
+import { CreateFolderState, CreateFolderActions } from "../state.slint";
+import { QbzIcon } from "QbzIcon.slint";
+import { LineEdit } from "std-widgets.slint";
+
+export component CreateFolderModal inherits Rectangle {
+    visible: CreateFolderState.open;
+
+    if CreateFolderState.open: Rectangle {
+        background: #000000bf;
+        TouchArea {
+            mouse-cursor: default;
+            clicked => {
+                CreateFolderActions.close();
+            }
+        }
+        Rectangle {
+            width: Math.min(root.width - 80px, 400px);
+            height: panel.preferred-height;
+            x: (parent.width - self.width) / 2;
+            y: (parent.height - self.height) / 2;
+            border-radius: Radius.md;
+            background: Theme.surface-card;
+            border-width: 1px;
+            border-color: Theme.border-subtle;
+            drop-shadow-blur: 32px;
+            drop-shadow-color: #00000080;
+            TouchArea { }
+
+            panel := VerticalLayout {
+                padding: 20px;
+                spacing: 16px;
+
+                HorizontalLayout {
+                    Text {
+                        text: @tr("New folder");
+                        color: Theme.text-primary;
+                        font-size: Typography.heading;
+                        font-weight: Typography.semibold;
+                        horizontal-stretch: 1;
+                        vertical-alignment: center;
+                    }
+                    close-x := TouchArea {
+                        width: 28px;
+                        height: 28px;
+                        mouse-cursor: pointer;
+                        clicked => {
+                            CreateFolderActions.close();
+                        }
+                        QbzIcon {
+                            source: @image-url("../assets/icons/x.svg");
+                            width: 17px;
+                            height: 17px;
+                            x: (parent.width - self.width) / 2;
+                            y: (parent.height - self.height) / 2;
+                            tint: close-x.has-hover ? Theme.text-primary : Theme.text-muted;
+                        }
+                    }
+                }
+
+                name-input := LineEdit {
+                    placeholder-text: @tr("Folder name");
+                    text <=> CreateFolderState.name;
+                    accepted => {
+                        CreateFolderActions.submit();
+                    }
+                }
+
+                HorizontalLayout {
+                    alignment: end;
+                    Rectangle {
+                        width: create-label.preferred-width + 36px;
+                        height: 36px;
+                        border-radius: Radius.sm;
+                        opacity: (CreateFolderState.name != "" && !CreateFolderState.creating) ? 1.0 : 0.5;
+                        background: create-ta.has-hover ? #ffffffd6 : Theme.accent;
+                        create-label := Text {
+                            text: CreateFolderState.creating ? @tr("Creating...") : @tr("Create");
+                            color: #ffffff;
+                            font-size: Typography.body;
+                            font-weight: Typography.semibold;
+                            x: (parent.width - self.width) / 2;
+                            y: (parent.height - self.height) / 2;
+                        }
+                        create-ta := TouchArea {
+                            mouse-cursor: (CreateFolderState.name != "" && !CreateFolderState.creating)
+                                ? pointer : default;
+                            clicked => {
+                                if (CreateFolderState.name != "" && !CreateFolderState.creating) {
+                                    CreateFolderActions.submit();
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}