feat(qbz-qt): phase 7 — shared AlbumCard, rounded frameless window, sidebar playlist tree

One AlbumCard.qml replicating the Slint shared card (pin badge with PinnedItemsService wired, heart, hover play overlay, exact context menu with Play next/Add to queue wired) used by BOTH Home rails and the Library All grid. Frameless translucent window with 12px rounded corners, replicated WindowControls, header drag, 8 resize grips. Sidebar playlist tree: 56 playlists / 12 folders live, expand state, 5-option sort with direction caret, recursive search filter, collage covers, create-playlist wired. Fixed a std-Mutex self-deadlock in the sidebar loader (two lock temporaries in one log statement). km
2026-07-27 16:45:44 -06:00
1 parent c06297c915
commit 4d196223cd
@@ -40,6 +40,7 @@ fn main() {
                "qml/Main.qml",
                "qml/LoginScreen.qml",
                "qml/AppShell.qml",
+                "qml/AlbumCard.qml",
                "qml/Sidebar.qml",
                "qml/HeaderBar.qml",
                "qml/NowPlayingBarSmall.qml",
@@ -0,0 +1,428 @@
+// THE shared album card — QML replica of discover/AlbumCard.slint, used
+// by BOTH the Home rails and the Library All grid (the Slint mounts the
+// same component in both places).
+//
+// 200x246: 200px artwork (Radius.sm) + placeholder, hover scrim with
+// genre/year meta, pin badge (top-right), favorite / play / more overlay
+// buttons, award ribbon, source badge (opt-in), then the title/artist
+// lines with the icon-only quality badge.
+//
+// Live wiring: play (art click + overlay play), favorite heart (optimistic
+// + signal), pin badge (pinned store), ⋯ context menu (Play / Play next /
+// Add to queue wired through playback_qt; favorite wired; Open album +
+// Block inert — POC-NOTEs: no album page / blacklist store).
+
+import QtQuick
+import QtQuick.Controls
+import com.blitzfc.qbz
+
+Rectangle {
+    id: root
+
+    // --- card data (the ONE contract both hosts fill) --------------------
+    property string albumId: ""
+    property string title: ""
+    property string artist: ""
+    property string artistId: ""
+    property string genre: ""
+    property string year: ""
+    property string qualityTier: ""
+    property string ribbon: ""
+    property string ribbonKind: ""
+    // Artwork image source (file://… or "") — the host's cache lookup.
+    property string artSource: ""
+    property bool isFavorite: false
+    property bool isPinned: false
+    // Source badge (Library show-local): "local" | "plex" | "" (hidden).
+    property string source: ""
+
+    QbzTheme { id: theme }
+
+    width: 200
+    height: 246
+    color: "transparent"
+
+    readonly property bool overlayOn: artArea.containsMouse || pinArea.containsMouse
+        || favArea.containsMouse || playArea.containsMouse || moreArea.containsMouse
+
+    function toggleFavorite() {
+        root.isFavorite = !root.isFavorite
+        QbzBridge.libraryToggleFavorite("album", root.albumId)
+    }
+    function togglePin() {
+        root.isPinned = !root.isPinned
+        QbzBridge.togglePin("album", root.albumId, root.title, root.artist, "")
+    }
+
+    Column {
+        spacing: 0
+
+        // --- Artwork + hover overlay -----------------------------------
+        Rectangle {
+            width: 200
+            height: 200
+            radius: theme.radiusSm
+            color: theme.surfaceElevated
+            clip: true
+
+            Image {
+                anchors.fill: parent
+                source: root.artSource
+                fillMode: Image.PreserveAspectCrop
+                asynchronous: true
+            }
+
+            // Hover scrim.
+            Rectangle {
+                anchors.fill: parent
+                color: "#000000"
+                opacity: root.overlayOn ? 0.6 : 0.0
+                Behavior on opacity { NumberAnimation { duration: 150 } }
+            }
+
+            // Hover meta — genre + year, top-left.
+            Column {
+                x: 12
+                y: 12
+                spacing: 2
+                opacity: root.overlayOn ? 1.0 : 0.0
+                Behavior on opacity { NumberAnimation { duration: 150 } }
+                Text {
+                    visible: root.genre !== ""
+                    text: root.genre
+                    height: 20
+                    color: "#ebffffff"
+                    font.pixelSize: 13
+                    font.weight: theme.weightBold
+                    verticalAlignment: Text.AlignVCenter
+                }
+                Text {
+                    visible: root.year !== ""
+                    text: root.year
+                    height: 17
+                    color: "#ccffffff"
+                    font.pixelSize: 12
+                    verticalAlignment: Text.AlignVCenter
+                }
+            }
+
+            // Card-open + hover detector (declared before the action
+            // buttons so those win the pointer).
+            MouseArea {
+                id: artArea
+                anchors.fill: parent
+                hoverEnabled: true
+                cursorShape: Qt.PointingHandCursor
+                onClicked: QbzBridge.playAlbum(root.albumId)
+            }
+
+            // Pin badge — top-right. Filled accent pin always visible when
+            // pinned; outline pin hover-revealed otherwise. Always-mounted
+            // (opacity) so its hover joins overlayOn.
+            Rectangle {
+                x: parent.width - width - 8
+                y: 8
+                width: 26
+                height: 26
+                radius: 13
+                color: pinArea.containsMouse ? "#cc000000" : "#99000000"
+                opacity: root.overlayOn ? 1.0 : (root.isPinned ? 1.0 : 0.0)
+                Behavior on opacity { NumberAnimation { duration: 150 } }
+                QbzIcon {
+                    name: root.isPinned ? "pin-filled" : "pin"
+                    width: 14
+                    height: 14
+                    anchors.centerIn: parent
+                    tintName: root.isPinned ? "accent" : "primary"
+                }
+                MouseArea {
+                    id: pinArea
+                    anchors.fill: parent
+                    hoverEnabled: true
+                    cursorShape: Qt.PointingHandCursor
+                    onClicked: root.togglePin()
+                }
+            }
+
+            // Hover action buttons — favorite / play / more (y=120, h=44,
+            // centered, spacing 12).
+            Row {
+                y: 120
+                width: parent.width
+                height: 44
+                anchors.horizontalCenter: parent.horizontalCenter
+                spacing: 12
+                opacity: root.overlayOn ? 1.0 : 0.0
+                Behavior on opacity { NumberAnimation { duration: 150 } }
+
+                Item { width: (200 - 44 - 2 * 36 - 2 * 12) / 2; height: 1 }
+                Rectangle {
+                    width: 36
+                    height: 36
+                    radius: 18
+                    anchors.verticalCenter: parent.verticalCenter
+                    color: favArea.containsMouse ? "#3dffffff" : "#24ffffff"
+                    border.width: 1.5
+                    border.color: "#ccffffff"
+                    QbzIcon {
+                        name: root.isFavorite ? "heart-filled" : "heart"
+                        width: 16
+                        height: 16
+                        anchors.centerIn: parent
+                        tintName: root.isFavorite ? "favorite" : "primary"
+                    }
+                    MouseArea {
+                        id: favArea
+                        anchors.fill: parent
+                        hoverEnabled: true
+                        cursorShape: Qt.PointingHandCursor
+                        onClicked: root.toggleFavorite()
+                    }
+                }
+                Rectangle {
+                    width: 44
+                    height: 44
+                    radius: 22
+                    color: playArea.containsMouse ? "#d6ffffff" : "#ffffff"
+                    QbzIcon {
+                        name: "play-fill"
+                        width: 18
+                        height: 18
+                        anchors.centerIn: parent
+                        tintName: "black"
+                    }
+                    MouseArea {
+                        id: playArea
+                        anchors.fill: parent
+                        hoverEnabled: true
+                        cursorShape: Qt.PointingHandCursor
+                        onClicked: QbzBridge.playAlbum(root.albumId)
+                    }
+                }
+                Rectangle {
+                    width: 36
+                    height: 36
+                    radius: 18
+                    anchors.verticalCenter: parent.verticalCenter
+                    color: moreArea.containsMouse ? "#3dffffff" : "#24ffffff"
+                    border.width: 1.5
+                    border.color: "#ccffffff"
+                    QbzIcon {
+                        name: "ellipsis"
+                        width: 16
+                        height: 16
+                        anchors.centerIn: parent
+                        tintName: "primary"
+                    }
+                    MouseArea {
+                        id: moreArea
+                        anchors.fill: parent
+                        hoverEnabled: true
+                        cursorShape: Qt.PointingHandCursor
+                        onClicked: albumMenu.open()
+                    }
+                }
+                Item { width: (200 - 44 - 2 * 36 - 2 * 12) / 2; height: 1 }
+            }
+
+            // Context menu (AlbumCard.slint's album-menu): 196px, items
+            // 33px, icon 15 + label 13.
+            Popup {
+                id: albumMenu
+                x: 150
+                y: 140
+                width: 196
+                padding: 5
+                closePolicy: Popup.CloseOnPressOutside
+                background: Rectangle {
+                    color: theme.surfaceMain
+                    radius: theme.radiusSm
+                    border.width: 1
+                    border.color: theme.borderMuted
+                }
+                contentItem: Column {
+                    Repeater {
+                        model: [
+                            { "label": QbzBridge.tr("Open album"), "icon": "library-big", "action": "open" },
+                            { "label": QbzBridge.tr("Play"), "icon": "play-fill", "action": "play" },
+                            { "label": QbzBridge.tr("Play next"), "icon": "list-plus", "action": "next" },
+                            { "label": QbzBridge.tr("Add to queue"), "icon": "list-end", "action": "queue" },
+                            { "label": root.isFavorite ? QbzBridge.tr("Remove from Library") : QbzBridge.tr("Add to Library"), "icon": root.isFavorite ? "heart-filled" : "heart", "action": "favorite" },
+                            { "label": QbzBridge.tr("Block this album"), "icon": "blind-eye", "action": "block" },
+                        ]
+                        delegate: Rectangle {
+                            required property var modelData
+                            width: parent ? parent.width : 0
+                            height: 33
+                            radius: 5
+                            color: miArea.containsMouse ? theme.surfaceHover : "transparent"
+                            Row {
+                                anchors.fill: parent
+                                anchors.leftMargin: 8
+                                spacing: 8
+                                QbzIcon {
+                                    name: modelData.icon
+                                    width: 15
+                                    height: 15
+                                    anchors.verticalCenter: parent.verticalCenter
+                                    tintName: "secondary"
+                                }
+                                Text {
+                                    height: parent.height
+                                    width: parent.width - 23
+                                    text: modelData.label
+                                    color: theme.textSecondary
+                                    font.pixelSize: 13
+                                    verticalAlignment: Text.AlignVCenter
+                                    elide: Text.ElideRight
+                                }
+                            }
+                            MouseArea {
+                                id: miArea
+                                anchors.fill: parent
+                                hoverEnabled: true
+                                cursorShape: Qt.PointingHandCursor
+                                onClicked: {
+                                    albumMenu.close()
+                                    var a = modelData.action
+                                    if (a === "play") QbzBridge.playAlbum(root.albumId)
+                                    else if (a === "next") QbzBridge.enqueueAlbum(root.albumId, "next")
+                                    else if (a === "queue") QbzBridge.enqueueAlbum(root.albumId, "later")
+                                    else if (a === "favorite") root.toggleFavorite()
+                                    // "open" (no album page) + "block" (no
+                                    // blacklist store): inert — POC-NOTE.
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+
+            // Award ribbon — content-width, capped at the card width.
+            Rectangle {
+                visible: root.ribbon !== ""
+                x: 0
+                y: parent.height - height - 8
+                height: 20
+                width: Math.min(ribbonRow.width, 200)
+                color: root.ribbonKind === "press" ? "#d49511" : "#e0000000"
+                topRightRadius: 3
+                bottomRightRadius: 3
+                clip: true
+                Rectangle {
+                    width: root.ribbonKind === "press" ? 0 : 3
+                    height: parent.height
+                    color: root.ribbonKind === "qobuzissime" ? "#8b5cf6" : "#eab308"
+                }
+                Row {
+                    id: ribbonRow
+                    height: parent.height
+                    leftPadding: 10
+                    rightPadding: 10
+                    width: ribbonText.implicitWidth + 20
+                    Text {
+                        id: ribbonText
+                        height: parent.height
+                        text: root.ribbon
+                        color: root.ribbonKind === "press" ? "#1f1407" : "#ffffff"
+                        font.pixelSize: 9
+                        font.weight: theme.weightSemibold
+                        verticalAlignment: Text.AlignVCenter
+                        elide: Text.ElideRight
+                    }
+                }
+            }
+
+            // Source badge (Library show-local): bottom-right of the art.
+            Rectangle {
+                visible: root.source === "local" || root.source === "plex"
+                x: parent.width - width - 6
+                y: parent.height - height - 6
+                width: 24
+                height: 24
+                radius: 4
+                color: "#b3000000"
+                QbzIcon {
+                    name: "hard-drive"
+                    width: 14
+                    height: 14
+                    anchors.centerIn: parent
+                    tintName: root.source === "plex" ? "accent" : "primary"
+                }
+            }
+        }
+        Item { width: 1; height: 6 }
+
+        // --- Title / artist + quality badge ------------------------------
+        Row {
+            width: 200
+            height: 40
+            spacing: theme.spacingSm
+            Column {
+                width: parent.width - (qBadge.visible ? qBadge.width + theme.spacingSm : 0)
+                anchors.verticalCenter: parent.verticalCenter
+                spacing: 2
+                Text {
+                    width: parent.width
+                    height: 20
+                    text: root.title
+                    color: titleArea.containsMouse ? theme.accent : theme.textPrimary
+                    font.pixelSize: theme.fontBody - 2
+                    font.weight: theme.weightMedium
+                    verticalAlignment: Text.AlignVCenter
+                    elide: Text.ElideRight
+                    MouseArea {
+                        id: titleArea
+                        anchors.fill: parent
+                        hoverEnabled: true
+                        cursorShape: Qt.PointingHandCursor
+                        onClicked: QbzBridge.playAlbum(root.albumId)
+                    }
+                }
+                Text {
+                    width: parent.width
+                    height: 18
+                    text: root.artist
+                    color: root.artistId !== "" && artistArea.containsMouse
+                        ? theme.textPrimary : theme.textMuted
+                    font.pixelSize: theme.fontLink - 1
+                    verticalAlignment: Text.AlignVCenter
+                    elide: Text.ElideRight
+                    MouseArea {
+                        id: artistArea
+                        anchors.fill: parent
+                        hoverEnabled: true
+                        cursorShape: root.artistId !== "" ? Qt.PointingHandCursor : Qt.ArrowCursor
+                    }
+                }
+            }
+            // Icon-only quality badge (QualityBadge.slint).
+            Item {
+                id: qBadge
+                visible: root.qualityTier !== ""
+                width: root.qualityTier === "hires" ? 42 : 30
+                height: 30
+                anchors.verticalCenter: parent.verticalCenter
+                Image {
+                    visible: root.qualityTier === "hires"
+                    source: "assets/hi-res.svg"
+                    width: 42
+                    height: 28
+                    anchors.centerIn: parent
+                    sourceSize: Qt.size(84, 56)
+                    fillMode: Image.PreserveAspectFit
+                }
+                Rectangle {
+                    visible: root.qualityTier === "cd"
+                    width: 30
+                    height: 30
+                    radius: 3
+                    color: theme.surfaceElevated
+                    border.width: 1
+                    border.color: theme.borderSubtle
+                    QbzIcon { name: "cd"; width: 16; height: 16; anchors.centerIn: parent; tintName: "muted" }
+                }
+            }
+        }
+    }
+}
@@ -17,9 +17,14 @@ import com.blitzfc.qbz

 Rectangle {
    id: root
-    // The window chrome is surface-card (header / sidebar / queue column /
-    // NPB all paint it too); the content panel contrasts in surface-main.
-    color: theme.surfaceCard
+    // TRANSPARENT — the chrome (header / sidebar / queue column / NPB)
+    // paints every pixel between the header's rounded top corners and the
+    // NPB's rounded bottom corners, so the window's rounded corners show
+    // through (frameless translucent window).
+    color: "transparent"
+
+    // The host ApplicationWindow (custom chrome: drag / maximize / resize).
+    property var hostWindow: null

    QbzTheme { id: theme }

@@ -29,6 +34,10 @@ Rectangle {
        anchors.right: parent.right
        anchors.top: parent.top
        height: theme.headerHeight
+        hostWindow: root.hostWindow
+        // Rounded top window corners (custom chrome); the bottom corners
+        // are covered by the same-color surfaces below.
+        radius: 12
    }

    NowPlayingBarSmall {
@@ -37,6 +46,9 @@ Rectangle {
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        height: theme.npbSmallHeight
+        // Rounded bottom window corners (custom chrome); the top corners
+        // are covered by the same-color surfaces above.
+        radius: 12
    }

    Sidebar {
@@ -21,8 +21,33 @@ Rectangle {
    id: root
    color: theme.surfaceCard

+    // The host ApplicationWindow (custom chrome); null in previews.
+    property var hostWindow: null
+
    QbzTheme { id: theme }

+    // Custom-chrome drag surface (declared FIRST so every interactive
+    // element above wins hit-testing): press-and-move starts the system
+    // move; double-click toggles maximize. The system grab starts only
+    // after a real movement so plain clicks/double-clicks still work.
+    MouseArea {
+        anchors.fill: parent
+        property bool dragStarted: false
+        onPressed: dragStarted = false
+        onPositionChanged: {
+            if (pressed && !dragStarted && root.hostWindow) {
+                dragStarted = true
+                root.hostWindow.startSystemMove()
+            }
+        }
+        onDoubleClicked: {
+            if (root.hostWindow) {
+                root.hostWindow.visibility = root.hostWindow.visibility === Window.Maximized
+                    ? Window.Windowed : Window.Maximized
+            }
+        }
+    }
+
    // Slint OfflineState.badge-state: 0 hidden / 1 hard offline / 2 manual /
    // 3 logged out (wins over the others).
    readonly property int badgeState: QbzBridge.offlineSession ? 3
@@ -195,7 +220,8 @@ Rectangle {
    // --- Right controls: status badge + app menu --------------------------
    Row {
        id: rightControls
-        x: root.width - width - theme.spacingMd + 2
+        // Shifts left of the drawn window controls (3x34 + 2x2 = 106px).
+        x: root.width - width - theme.spacingMd + 2 - 110
        y: (root.height - height) / 2
        height: 36
        spacing: 4
@@ -335,6 +361,80 @@ Rectangle {
        }
    }

+    // --- Drawn window controls (WindowControls.slint, right placement:
+    // minimize · maximize · close; close gets the danger-red hover) ------
+    Row {
+        x: root.width - width - 8
+        y: (root.height - height) / 2
+        height: 26
+        spacing: 2
+        Rectangle {
+            width: 34
+            height: 26
+            radius: theme.radiusSm
+            color: wcMinArea.containsMouse ? theme.surfaceHover : "transparent"
+            QbzIcon {
+                name: "minus"
+                width: 14
+                height: 14
+                anchors.centerIn: parent
+                tintName: "secondary"
+            }
+            MouseArea {
+                id: wcMinArea
+                anchors.fill: parent
+                hoverEnabled: true
+                onClicked: if (root.hostWindow) root.hostWindow.showMinimized()
+            }
+        }
+        Rectangle {
+            width: 34
+            height: 26
+            radius: theme.radiusSm
+            color: wcMaxArea.containsMouse ? theme.surfaceHover : "transparent"
+            QbzIcon {
+                name: root.hostWindow && root.hostWindow.visibility === Window.Maximized
+                    ? "minimize-2" : "maximize-2"
+                width: 14
+                height: 14
+                anchors.centerIn: parent
+                tintName: "secondary"
+            }
+            MouseArea {
+                id: wcMaxArea
+                anchors.fill: parent
+                hoverEnabled: true
+                onClicked: {
+                    if (root.hostWindow) {
+                        root.hostWindow.visibility = root.hostWindow.visibility === Window.Maximized
+                            ? Window.Windowed : Window.Maximized
+                    }
+                }
+            }
+        }
+        Rectangle {
+            width: 34
+            height: 26
+            radius: theme.radiusSm
+            color: wcCloseArea.containsMouse ? "#e81123" : "transparent"
+            QbzIcon {
+                name: "x"
+                width: 14
+                height: 14
+                anchors.centerIn: parent
+                tintName: wcCloseArea.containsMouse ? "primary" : "secondary"
+            }
+            MouseArea {
+                id: wcCloseArea
+                anchors.fill: parent
+                hoverEnabled: true
+                // POC-NOTE: the Slint app hides-to-tray on close; the POC
+                // has no tray — close quits.
+                onClicked: Qt.quit()
+            }
+        }
+    }
+
    // --- App menu (stub: user block + Log Out + Close) --------------------
    // POC-NOTE: the Slint menu also carries Settings / Open Music Link /
    // Keyboard Shortcuts / Documentation / Report an Issue / What's New /
@@ -97,261 +97,6 @@ Rectangle {
        }
    }

-    // Album card (AlbumCard.slint): 200x246 — 200px art (radius 8) + 6px +
-    // 40px title/artist row with the icon-only quality badge.
-    component AlbumCard: Rectangle {
-        property var card: ({})
-        width: 200
-        height: 246
-        color: "transparent"
-
-        readonly property bool overlayOn: artArea.containsMouse
-
-        Column {
-            spacing: 0
-            // --- Artwork + hover overlay --------------------------------
-            Rectangle {
-                width: 200
-                height: 200
-                radius: theme.radiusSm
-                color: theme.surfaceElevated
-                clip: true
-
-                Image {
-                    anchors.fill: parent
-                    source: card.artPath
-                    fillMode: Image.PreserveAspectCrop
-                    asynchronous: true
-                }
-                // Hover scrim.
-                Rectangle {
-                    anchors.fill: parent
-                    color: "#000000"
-                    opacity: overlayOn ? 0.6 : 0.0
-                    Behavior on opacity { NumberAnimation { duration: 150 } }
-                }
-                // Hover meta — genre + year, top-left.
-                Column {
-                    x: 12
-                    y: 12
-                    spacing: 2
-                    opacity: overlayOn ? 1.0 : 0.0
-                    Behavior on opacity { NumberAnimation { duration: 150 } }
-                    Text {
-                        visible: card.genre !== ""
-                        text: card.genre
-                        height: 20
-                        color: "#ebffffff"
-                        font.pixelSize: 13
-                        font.weight: theme.weightBold
-                        verticalAlignment: Text.AlignVCenter
-                    }
-                    Text {
-                        visible: card.year !== ""
-                        text: card.year
-                        height: 17
-                        color: "#ccffffff"
-                        font.pixelSize: 12
-                        verticalAlignment: Text.AlignVCenter
-                    }
-                }
-                // Card-open + hover detector (declared before the action
-                // buttons so those win the pointer).
-                MouseArea {
-                    id: artArea
-                    anchors.fill: parent
-                    hoverEnabled: true
-                    cursorShape: Qt.PointingHandCursor
-                    // Phase 4: a card click plays the album (the album page
-                    // itself is out of scope — POC-NOTE).
-                    onClicked: QbzBridge.playAlbum(card.id)
-                }
-                // Hover action buttons — favorite / play / more (INERT;
-                // POC-NOTE: playback + favorites land in later phases).
-                Row {
-                    x: 0
-                    y: 120
-                    width: 200
-                    height: 44
-                    anchors.horizontalCenter: parent.horizontalCenter
-                    spacing: 12
-                    opacity: overlayOn ? 1.0 : 0.0
-                    Behavior on opacity { NumberAnimation { duration: 150 } }
-
-                    Item { width: (parent.width - 44 - 2 * 36 - 2 * 12) / 2; height: 1 }
-                    Rectangle {
-                        width: 36
-                        height: 36
-                        radius: 18
-                        anchors.verticalCenter: parent.verticalCenter
-                        color: favArea.containsMouse ? "#3dffffff" : "#24ffffff"
-                        border.width: 1.5
-                        border.color: "#ccffffff"
-                        QbzIcon {
-                            name: "heart"
-                            width: 16
-                            height: 16
-                            anchors.centerIn: parent
-                            tintName: "primary"
-                        }
-                        MouseArea { id: favArea; anchors.fill: parent; hoverEnabled: true; cursorShape: Qt.PointingHandCursor }
-                    }
-                    Rectangle {
-                        width: 44
-                        height: 44
-                        radius: 22
-                        color: playOvArea.containsMouse ? "#d6ffffff" : "#ffffff"
-                        // Black glyph on the white disc (Slint tints #000)
-                        // — the "black" baked variant.
-                        QbzIcon {
-                            name: "play-fill"
-                            width: 18
-                            height: 18
-                            anchors.centerIn: parent
-                            tintName: "black"
-                        }
-                        MouseArea {
-                            id: playOvArea
-                            anchors.fill: parent
-                            hoverEnabled: true
-                            cursorShape: Qt.PointingHandCursor
-                            onClicked: QbzBridge.playAlbum(card.id)
-                        }
-                    }
-                    Rectangle {
-                        width: 36
-                        height: 36
-                        radius: 18
-                        anchors.verticalCenter: parent.verticalCenter
-                        color: moreArea.containsMouse ? "#3dffffff" : "#24ffffff"
-                        border.width: 1.5
-                        border.color: "#ccffffff"
-                        QbzIcon {
-                            name: "ellipsis"
-                            width: 16
-                            height: 16
-                            anchors.centerIn: parent
-                            tintName: "primary"
-                        }
-                        MouseArea { id: moreArea; anchors.fill: parent; hoverEnabled: true; cursorShape: Qt.PointingHandCursor }
-                    }
-                    Item { width: (parent.width - 44 - 2 * 36 - 2 * 12) / 2; height: 1 }
-                }
-                // Award ribbon — content-width, capped at the card width.
-                Rectangle {
-                    visible: card.ribbon !== ""
-                    x: 0
-                    y: parent.height - height - 8
-                    height: 20
-                    width: Math.min(ribbonRow.width, 200)
-                    color: card.ribbonKind === "press" ? "#d49511" : "#e0000000"
-                    topRightRadius: 3
-                    bottomRightRadius: 3
-                    clip: true
-                    Rectangle {
-                        width: card.ribbonKind === "press" ? 0 : 3
-                        height: parent.height
-                        color: card.ribbonKind === "qobuzissime" ? "#8b5cf6" : "#eab308"
-                    }
-                    Row {
-                        id: ribbonRow
-                        height: parent.height
-                        leftPadding: 10
-                        rightPadding: 10
-                        width: ribbonText.implicitWidth + 20
-                        Text {
-                            id: ribbonText
-                            height: parent.height
-                            text: card.ribbon
-                            color: card.ribbonKind === "press" ? "#1f1407" : "#ffffff"
-                            font.pixelSize: 9
-                            font.weight: theme.weightSemibold
-                            verticalAlignment: Text.AlignVCenter
-                            elide: Text.ElideRight
-                        }
-                    }
-                }
-            }
-            Item { width: 1; height: 6 }
-            // --- Title / artist + quality badge --------------------------
-            Row {
-                width: 200
-                height: 40
-                spacing: theme.spacingSm
-                Column {
-                    width: parent.width - (qualityBadge.visible ? qualityBadge.width + theme.spacingSm : 0)
-                    anchors.verticalCenter: parent.verticalCenter
-                    spacing: 2
-                    Text {
-                        width: parent.width
-                        height: 20
-                        text: card.title
-                        color: titleArea.containsMouse ? theme.accent : theme.textPrimary
-                        font.pixelSize: theme.fontBody - 2
-                        font.weight: theme.weightMedium
-                        verticalAlignment: Text.AlignVCenter
-                        elide: Text.ElideRight
-                        MouseArea {
-                            id: titleArea
-                            anchors.fill: parent
-                            hoverEnabled: true
-                            cursorShape: Qt.PointingHandCursor
-                        }
-                    }
-                    Text {
-                        width: parent.width
-                        height: 18
-                        text: card.artist
-                        color: card.artistId !== "" && artistArea.containsMouse
-                            ? theme.textPrimary : theme.textMuted
-                        font.pixelSize: theme.fontLink - 1
-                        verticalAlignment: Text.AlignVCenter
-                        elide: Text.ElideRight
-                        MouseArea {
-                            id: artistArea
-                            anchors.fill: parent
-                            hoverEnabled: true
-                            cursorShape: card.artistId !== "" ? Qt.PointingHandCursor : Qt.ArrowCursor
-                        }
-                    }
-                }
-                // Icon-only quality badge (QualityBadge.slint).
-                Item {
-                    id: qualityBadge
-                    visible: card.qualityTier !== ""
-                    width: card.qualityTier === "hires" ? 42 : 30
-                    height: 30
-                    anchors.verticalCenter: parent.verticalCenter
-                    Image {
-                        visible: card.qualityTier === "hires"
-                        source: "assets/hi-res.svg"
-                        width: 42
-                        height: 28
-                        anchors.centerIn: parent
-                        sourceSize: Qt.size(84, 56)
-                        fillMode: Image.PreserveAspectFit
-                    }
-                    Rectangle {
-                        visible: card.qualityTier === "cd"
-                        width: 30
-                        height: 30
-                        radius: 3
-                        color: theme.surfaceElevated
-                        border.width: 1
-                        border.color: theme.borderSubtle
-                        QbzIcon {
-                            name: "cd"
-                            width: 16
-                            height: 16
-                            anchors.centerIn: parent
-                            tintName: "muted"
-                        }
-                    }
-                }
-            }
-        }
-    }
-
    // Horizontal album rail (Carousel.slint): header + clipped ListView,
    // page chevrons (per-page step like the Slint paging).
    component AlbumRail: Column {
@@ -381,7 +126,22 @@ Rectangle {
                clip: true
                boundsBehavior: Flickable.StopAtBounds
                model: sectionData.items
-                delegate: AlbumCard { card: modelData }
+                delegate: AlbumCard {
+                    albumId: modelData.id
+                    title: modelData.title
+                    artist: modelData.artist
+                    artistId: modelData.artistId
+                    genre: modelData.genre
+                    year: modelData.year
+                    qualityTier: modelData.qualityTier
+                    ribbon: modelData.ribbon
+                    ribbonKind: modelData.ribbonKind
+                    artSource: modelData.artPath
+                    isPinned: modelData.isPinned
+                    // POC-NOTE: Home hearts are not seeded from fav_cache
+                    // (store not open in the POC); toggles still hit the API.
+                    isFavorite: false
+                }
            }
            // Cider-style edge fades (Carousel.slint): content dissolves
            // into the page background at the scrolled edges.
@@ -169,6 +169,13 @@ Rectangle {
            }
            root.feedChanged()
        }
+        function onPinChanged(key, value) {
+            var f = root.feed
+            for (var i = 0; i < f.length; i++) {
+                if (f[i].artKey === key) { f[i].isPinned = value; break }
+            }
+            root.feedChanged()
+        }
    }

    // Debounced window reporting (180ms, library_all.rs throttle).
@@ -17,6 +17,10 @@ import com.blitzfc.qbz
 Rectangle {
    id: root
    color: theme.surfaceMain
+    // Rounded window corners (custom chrome).
+    radius: 12
+    // Set by the Loader (custom chrome drag/maximize); unused here.
+    property var hostWindow: null

    // Slint: in-out property tos-accepted: true.
    property bool tosAccepted: true
@@ -19,7 +19,10 @@ ApplicationWindow {
    minimumHeight: 600
    visible: true
    title: "QBZ"
-    color: "#0f0f0f"
+    // Custom chrome (phase 7): frameless + translucent so the window draws
+    // its own rounded corners, 1:1 with the Slint custom-chrome look.
+    flags: Qt.Window | Qt.FramelessWindowHint
+    color: "transparent"

    FontLoader { id: interRegular; source: "assets/fonts/Inter_18pt-Regular.ttf" }
    FontLoader { id: interMedium; source: "assets/fonts/Inter_18pt-Medium.ttf" }
@@ -36,6 +39,62 @@ ApplicationWindow {
        source: QbzBridge.screen === "login"
                ? "LoginScreen.qml"
                : (QbzBridge.screen === "shell" ? "AppShell.qml" : "")
+        // Hand the host window down for drag/maximize/resize (custom chrome).
+        onLoaded: if (screenLoader.item) screenLoader.item.hostWindow = window
+    }
+
+    // Rounded-window hairline frame (app.slint's no-frame 1px edge) —
+    // paints at the very rim, over everything, clipped by the corners.
+    Rectangle {
+        anchors.fill: parent
+        color: "transparent"
+        radius: 12
+        border.width: 1
+        border.color: "#14ffffff"
+        visible: window.visibility !== Window.Maximized && window.visibility !== Window.FullScreen
+    }
+
+    // Edge/corner resize grips (custom chrome — the compositor draws no
+    // border). 6px, invisible.
+    MouseArea {
+        anchors.left: parent.left; anchors.top: parent.top; anchors.bottom: parent.bottom; width: 6
+        cursorShape: Qt.SizeHorCursor
+        onPressed: window.startSystemResize(Qt.LeftEdge)
+    }
+    MouseArea {
+        anchors.right: parent.right; anchors.top: parent.top; anchors.bottom: parent.bottom; width: 6
+        cursorShape: Qt.SizeHorCursor
+        onPressed: window.startSystemResize(Qt.RightEdge)
+    }
+    MouseArea {
+        anchors.left: parent.left; anchors.right: parent.right; anchors.top: parent.top; height: 6
+        cursorShape: Qt.SizeVerCursor
+        onPressed: window.startSystemResize(Qt.TopEdge)
+    }
+    MouseArea {
+        anchors.left: parent.left; anchors.right: parent.right; anchors.bottom: parent.bottom; height: 6
+        cursorShape: Qt.SizeVerCursor
+        onPressed: window.startSystemResize(Qt.BottomEdge)
+    }
+    MouseArea {
+        anchors.left: parent.left; anchors.top: parent.top; width: 12; height: 12
+        cursorShape: Qt.SizeFDiagCursor
+        onPressed: window.startSystemResize(Qt.TopEdge | Qt.LeftEdge)
+    }
+    MouseArea {
+        anchors.right: parent.right; anchors.top: parent.top; width: 12; height: 12
+        cursorShape: Qt.SizeBDiagCursor
+        onPressed: window.startSystemResize(Qt.TopEdge | Qt.RightEdge)
+    }
+    MouseArea {
+        anchors.left: parent.left; anchors.bottom: parent.bottom; width: 12; height: 12
+        cursorShape: Qt.SizeBDiagCursor
+        onPressed: window.startSystemResize(Qt.BottomEdge | Qt.LeftEdge)
+    }
+    MouseArea {
+        anchors.right: parent.right; anchors.bottom: parent.bottom; width: 12; height: 12
+        cursorShape: Qt.SizeFDiagCursor
+        onPressed: window.startSystemResize(Qt.BottomEdge | Qt.RightEdge)
    }

    // Splash (SplashScreen.slint): the same 720px dark card as the login
@@ -43,6 +102,7 @@ ApplicationWindow {
    Rectangle {
        anchors.fill: parent
        color: "#0f0f0f"
+        radius: 12
        visible: QbzBridge.screen === "splash"

        Rectangle {
@@ -18,6 +18,7 @@
 // shows ("No playlists yet.").

 import QtQuick
+import QtQuick.Controls
 import com.blitzfc.qbz

 Rectangle {
@@ -26,6 +27,32 @@ Rectangle {
    property bool mini: QbzBridge.sidebarState === 1
    // The current section — Discover (home) is the only real view.
    property string activeNav: "discover"
+    // Playlist tree state (phase 7).
+    property bool searchOpen: false
+    property bool playlistsCollapsed: false
+    property string activePlaylistId: ""
+    // Flattened entries from the bridge + the url-keyed cover map.
+    readonly property var entries: parseEntries(QbzBridge.sidebarJson)
+    property var coverMap: ({})
+    function parseEntries(json) {
+        var e = JSON.parse(json)
+        // Collect every cover url and dispatch the artwork window.
+        var urls = []
+        for (var i = 0; i < e.length; i++) {
+            for (var j = 0; j < e[i].covers.length; j++) urls.push(e[i].covers[j])
+        }
+        if (urls.length > 0) QbzBridge.sidebarArtworkWindow(JSON.stringify(urls))
+        return e
+    }
+
+    Connections {
+        target: QbzBridge
+        function onLibraryArtworkReady(key, path) {
+            var m = root.coverMap
+            m[key] = path
+            root.coverMap = Object.assign({}, m)
+        }
+    }

    QbzTheme { id: theme }

@@ -158,7 +185,9 @@ Rectangle {
            height: 22
            spacing: 4

+            // Title (hidden while the search input is open).
            Text {
+                visible: !root.searchOpen
                width: parent.width - 4 * 26
                height: parent.height
                text: QbzBridge.tr("PLAYLISTS")
@@ -167,46 +196,406 @@ Rectangle {
                font.letterSpacing: 1
                verticalAlignment: Text.AlignVCenter
            }
-            Repeater {
-                // POC-NOTE: search / new-playlist / sort / collapse are
-                // visual stubs (the playlist tree is out of scope).
-                model: [
-                    { "icon": "search", "size": 15 },
-                    { "icon": "plus", "size": 16 },
-                    { "icon": "ellipsis", "size": 15 },
-                    { "icon": "chevron-down", "size": 15 },
-                ]
-                delegate: Rectangle {
-                    required property var modelData
-                    width: 22
-                    height: 22
-                    radius: 4
-                    color: hdrArea.containsMouse ? theme.surfaceHover : "transparent"
-                    QbzIcon {
-                        name: modelData.icon
-                        width: modelData.size
-                        height: modelData.size
-                        anchors.centerIn: parent
-                        tintName: hdrArea.containsMouse ? "primary" : "muted"
-                    }
-                    MouseArea {
-                        id: hdrArea
+            // Inline search input (filters entries, recursive).
+            Rectangle {
+                visible: root.searchOpen
+                width: parent.width - 4 * 26
+                height: 22
+                radius: 4
+                color: theme.surfaceElevated
+                border.width: 1
+                border.color: theme.borderSubtle
+                TextInput {
+                    id: searchEdit
+                    anchors.fill: parent
+                    anchors.leftMargin: 6
+                    color: theme.textPrimary
+                    font.pixelSize: 12
+                    verticalAlignment: Text.AlignVCenter
+                    clip: true
+                    onTextEdited: QbzBridge.sidebarSearch(text)
+                    Text {
+                        visible: searchEdit.text === ""
                        anchors.fill: parent
-                        hoverEnabled: true
-                        cursorShape: Qt.PointingHandCursor
+                        text: QbzBridge.tr("Search playlists")
+                        color: theme.textMuted
+                        font.pixelSize: 12
+                        verticalAlignment: Text.AlignVCenter
                    }
                }
            }
+
+            // Search toggle.
+            Rectangle {
+                width: 22
+                height: 22
+                radius: 4
+                color: (searchBtnArea.containsMouse || root.searchOpen) ? theme.surfaceHover : "transparent"
+                QbzIcon {
+                    name: "search"
+                    width: 15
+                    height: 15
+                    anchors.centerIn: parent
+                    tintName: (searchBtnArea.containsMouse || root.searchOpen) ? "primary" : "muted"
+                }
+                MouseArea {
+                    id: searchBtnArea
+                    anchors.fill: parent
+                    hoverEnabled: true
+                    cursorShape: Qt.PointingHandCursor
+                    onClicked: {
+                        root.searchOpen = !root.searchOpen
+                        if (!root.searchOpen) {
+                            searchEdit.text = ""
+                            QbzBridge.sidebarSearch("")
+                        } else {
+                            searchEdit.forceActiveFocus()
+                        }
+                    }
+                }
+            }
+            // New playlist (+) — single core call (create_playlist), then
+            // reload the tree. Slint opens a naming modal; the POC creates
+            // with the default name (POC-NOTE).
+            Rectangle {
+                width: 22
+                height: 22
+                radius: 4
+                color: plusArea.containsMouse ? theme.surfaceHover : "transparent"
+                QbzIcon {
+                    name: "plus"
+                    width: 16
+                    height: 16
+                    anchors.centerIn: parent
+                    tintName: plusArea.containsMouse ? "primary" : "muted"
+                }
+                MouseArea {
+                    id: plusArea
+                    anchors.fill: parent
+                    hoverEnabled: true
+                    cursorShape: Qt.PointingHandCursor
+                    onClicked: QbzBridge.createPlaylist()
+                }
+            }
+            // Sort / more (...) menu.
+            Rectangle {
+                width: 22
+                height: 22
+                radius: 4
+                color: sortBtnArea.containsMouse ? theme.surfaceHover : "transparent"
+                QbzIcon {
+                    name: "ellipsis"
+                    width: 15
+                    height: 15
+                    anchors.centerIn: parent
+                    tintName: sortBtnArea.containsMouse ? "primary" : "muted"
+                }
+                MouseArea {
+                    id: sortBtnArea
+                    anchors.fill: parent
+                    hoverEnabled: true
+                    cursorShape: Qt.PointingHandCursor
+                    onClicked: sortMenu.open()
+                }
+                Popup {
+                    id: sortMenu
+                    // Opens to the RIGHT of the "..." (overlay into the
+                    // content area) — owner request in Sidebar.slint.
+                    x: parent.width + 18
+                    y: 26
+                    width: 200
+                    padding: 6
+                    closePolicy: Popup.CloseOnPressOutside
+                    background: Rectangle {
+                        color: theme.surfaceCard
+                        radius: 8
+                        border.width: 1
+                        border.color: theme.borderSubtle
+                    }
+                    contentItem: Column {
+                        spacing: 1
+                        Row {
+                            leftPadding: 8
+                            topPadding: 4
+                            bottomPadding: 2
+                            spacing: 6
+                            QbzIcon { name: "arrow-up-down"; width: 13; height: 13; tintName: "muted" }
+                            Text {
+                                text: QbzBridge.tr("Sort by")
+                                color: theme.textMuted
+                                font.pixelSize: 11
+                                verticalAlignment: Text.AlignVCenter
+                            }
+                        }
+                        Repeater {
+                            model: [
+                                { "opt": "name", "label": QbzBridge.tr("Name (A-Z)") },
+                                { "opt": "recent", "label": QbzBridge.tr("Recent") },
+                                { "opt": "tracks", "label": QbzBridge.tr("# of tracks") },
+                                { "opt": "playcount", "label": QbzBridge.tr("Play Count") },
+                                { "opt": "custom", "label": QbzBridge.tr("Custom") },
+                            ]
+                            delegate: Rectangle {
+                                required property var modelData
+                                width: parent ? parent.width : 0
+                                height: 30
+                                radius: 5
+                                color: sortOptArea.containsMouse ? theme.surfaceHover : "transparent"
+                                Row {
+                                    anchors.fill: parent
+                                    anchors.leftMargin: 8
+                                    anchors.rightMargin: 8
+                                    spacing: 6
+                                    Text {
+                                        width: parent.width - 20
+                                        height: parent.height
+                                        text: modelData.label
+                                        color: theme.textSecondary
+                                        font.pixelSize: 13
+                                        font.weight: QbzBridge.sidebarSortBy === modelData.opt ? theme.weightSemibold : theme.weightRegular
+                                        verticalAlignment: Text.AlignVCenter
+                                    }
+                                    QbzIcon {
+                                        visible: QbzBridge.sidebarSortBy === modelData.opt
+                                        name: QbzBridge.sidebarSortAsc ? "chevron-up" : "chevron-down"
+                                        width: 13
+                                        height: 13
+                                        anchors.verticalCenter: parent.verticalCenter
+                                        tintName: "accent"
+                                    }
+                                }
+                                MouseArea {
+                                    id: sortOptArea
+                                    anchors.fill: parent
+                                    hoverEnabled: true
+                                    cursorShape: Qt.PointingHandCursor
+                                    onClicked: {
+                                        QbzBridge.sidebarSetSort(modelData.opt)
+                                        sortMenu.close()
+                                    }
+                                }
+                            }
+                        }
+                        Rectangle { width: parent.width; height: 1; color: theme.borderSubtle }
+                        // New folder / Manage / Import — visual stubs
+                        // (POC-NOTE: folder management + importer are out
+                        // of scope).
+                        Repeater {
+                            model: [
+                                { "icon": "folder-plus", "label": QbzBridge.tr("New folder") },
+                                { "icon": "library-big", "label": QbzBridge.tr("Manage playlists") },
+                                { "icon": "import", "label": QbzBridge.tr("Import") },
+                            ]
+                            delegate: Rectangle {
+                                required property var modelData
+                                width: parent ? parent.width : 0
+                                height: 30
+                                radius: 5
+                                color: stubArea.containsMouse ? theme.surfaceHover : "transparent"
+                                Row {
+                                    anchors.fill: parent
+                                    anchors.leftMargin: 8
+                                    spacing: 8
+                                    QbzIcon { name: modelData.icon; width: 14; height: 14; anchors.verticalCenter: parent.verticalCenter; tintName: "secondary" }
+                                    Text {
+                                        height: parent.height
+                                        text: modelData.label
+                                        color: theme.textSecondary
+                                        font.pixelSize: 13
+                                        verticalAlignment: Text.AlignVCenter
+                                    }
+                                }
+                                MouseArea {
+                                    id: stubArea
+                                    anchors.fill: parent
+                                    hoverEnabled: true
+                                    cursorShape: Qt.PointingHandCursor
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+            // Collapse chevron (down = expanded, right = collapsed).
+            Rectangle {
+                width: 22
+                height: 22
+                radius: 4
+                color: collapseArea.containsMouse ? theme.surfaceHover : "transparent"
+                QbzIcon {
+                    name: root.playlistsCollapsed ? "chevron-right" : "chevron-down"
+                    width: 15
+                    height: 15
+                    anchors.centerIn: parent
+                    tintName: collapseArea.containsMouse ? "primary" : "muted"
+                }
+                MouseArea {
+                    id: collapseArea
+                    anchors.fill: parent
+                    hoverEnabled: true
+                    cursorShape: Qt.PointingHandCursor
+                    onClicked: root.playlistsCollapsed = !root.playlistsCollapsed
+                }
+            }
        }

-        // ---- Playlist list (out of scope) — the Slint empty state ----
-        Text {
-            visible: !root.mini
+        // ---- Playlist tree (folders + playlists, sidebar_qt.rs) --------
+        Item {
+            visible: !root.playlistsCollapsed
            width: parent.width
-            text: QbzBridge.tr("No playlists yet.")
-            color: theme.textMuted
-            font.pixelSize: 12
-            wrapMode: Text.WordWrap
+            height: parent.height - y - 16
+
+            Flickable {
+                id: plFlick
+                anchors.fill: parent
+                clip: true
+                contentWidth: width
+                contentHeight: plColumn.implicitHeight
+                boundsBehavior: Flickable.StopAtBounds
+
+                Column {
+                    id: plColumn
+                    width: parent.width
+                    spacing: 2
+
+                    Repeater {
+                        model: root.entries
+                        delegate: Rectangle {
+                            required property var modelData
+                            property bool isFolder: modelData.kind === "folder"
+                            property bool isActive: !isFolder && modelData.id === root.activePlaylistId
+                            width: plColumn.width
+                            height: root.mini && modelData.indent ? 0 : 32
+                            visible: !(root.mini && modelData.indent)
+                            radius: 6
+                            color: (rowArea.containsMouse || isActive) ? theme.surfaceHover : "transparent"
+
+                            Row {
+                                anchors.fill: parent
+                                anchors.leftMargin: root.mini ? 0 : (modelData.indent ? 24 : 8)
+                                anchors.rightMargin: root.mini ? 0 : 6
+                                spacing: 8
+
+                                // Leading icon slot (24px fixed).
+                                Item {
+                                    width: 24
+                                    height: parent.height
+                                    // Folder icon (accent).
+                                    QbzIcon {
+                                        visible: isFolder
+                                        name: modelData.expanded && !root.mini ? "folder-open" : "folder"
+                                        width: 15
+                                        height: 15
+                                        anchors.centerIn: parent
+                                        anchors.horizontalCenterOffset: root.mini ? 0 : -4.5
+                                        tintName: "accent"
+                                    }
+                                    // 2x2 micro-collage (or list-music glyph).
+                                    Rectangle {
+                                        visible: !isFolder && modelData.covers.length > 0
+                                        width: 20
+                                        height: 20
+                                        anchors.centerIn: parent
+                                        anchors.horizontalCenterOffset: root.mini ? 0 : -2
+                                        radius: 3
+                                        color: theme.surfaceElevated
+                                        clip: true
+                                        Grid {
+                                            anchors.fill: parent
+                                            columns: 2
+                                            Repeater {
+                                                model: modelData.covers.slice(0, 4)
+                                                delegate: Image {
+                                                    required property string modelData
+                                                    width: 10
+                                                    height: 10
+                                                    source: root.coverMap[modelData] || ""
+                                                    fillMode: Image.PreserveAspectCrop
+                                                    asynchronous: true
+                                                }
+                                            }
+                                        }
+                                    }
+                                    QbzIcon {
+                                        visible: !isFolder && modelData.covers.length === 0
+                                        name: "list-music"
+                                        width: 15
+                                        height: 15
+                                        anchors.centerIn: parent
+                                        anchors.horizontalCenterOffset: root.mini ? 0 : -4.5
+                                        tintName: (rowArea.containsMouse || isActive) ? "primary" : "muted"
+                                    }
+                                }
+                                // Name (hidden in mini).
+                                Text {
+                                    visible: !root.mini
+                                    width: parent.width - 24 - (isFolder ? 22 : 0)
+                                    height: parent.height
+                                    text: modelData.name
+                                    color: (rowArea.containsMouse || isActive) ? theme.textPrimary : theme.textSecondary
+                                    font.pixelSize: 13
+                                    font.weight: isFolder ? theme.weightSemibold : theme.weightRegular
+                                    verticalAlignment: Text.AlignVCenter
+                                    elide: Text.ElideRight
+                                }
+                                // Folder count (hover) + chevron.
+                                Text {
+                                    visible: !root.mini && isFolder && modelData.count > 0
+                                    height: parent.height
+                                    text: modelData.count
+                                    color: theme.textMuted
+                                    font.pixelSize: 11
+                                    verticalAlignment: Text.AlignVCenter
+                                    opacity: rowArea.containsMouse ? 1.0 : 0.0
+                                }
+                                QbzIcon {
+                                    visible: !root.mini && isFolder
+                                    name: modelData.expanded ? "chevron-down" : "chevron-right"
+                                    width: 14
+                                    height: 14
+                                    anchors.verticalCenter: parent.verticalCenter
+                                    tintName: rowArea.containsMouse ? "primary" : "muted"
+                                }
+                            }
+                            // Active-row redundant shape cue: 3px accent bar.
+                            Rectangle {
+                                visible: isActive
+                                x: 0
+                                width: 3
+                                height: parent.height - 12
+                                anchors.verticalCenter: parent.verticalCenter
+                                radius: 1.5
+                                color: theme.accent
+                            }
+                            MouseArea {
+                                id: rowArea
+                                anchors.fill: parent
+                                hoverEnabled: true
+                                cursorShape: Qt.PointingHandCursor
+                                onClicked: {
+                                    if (isFolder) {
+                                        QbzBridge.sidebarToggleFolder(modelData.id)
+                                    } else {
+                                        // POC-NOTE: no playlist view yet —
+                                        // the click only marks the row active.
+                                        root.activePlaylistId = modelData.id
+                                    }
+                                }
+                            }
+                        }
+                    }
+
+                    // Empty state.
+                    Text {
+                        visible: !root.mini && root.entries.length === 0 && !QbzBridge.offline
+                        width: plColumn.width
+                        text: QbzBridge.tr("No playlists yet.")
+                        color: theme.textMuted
+                        font.pixelSize: 12
+                        wrapMode: Text.WordWrap
+                    }
+                }
+            }
        }

        // Fill the rest.
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#4285f4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="m21 16-4 4-4-4" />
+  <path d="M17 20V4" />
+  <path d="m3 8 4-4 4 4" />
+  <path d="M7 4v16" />
+</svg>
@@ -0,0 +1,2 @@
+<?xml version="1.0" ?>
+<svg fill="#4285f4" width="24" height="24" viewBox="0 0 200 200" data-name="Layer 1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"><title/><path d="M177.5,67.4a9.75,9.75,0,0,0-14-1.5c-10.5,8.5-20,14.5-29.5,17.5-9.5,3.5-20.5,5-34,5s-24.5-1.5-34-5-19-9-29.5-17.5c-4.5-3.5-10.5-3-14,1.5s-3,10.5,1.5,14A132.06,132.06,0,0,0,45,95.9l-8.5,14.5c-2.5,5-1,11,3.5,13.5,5,2.5,11,1,13.5-3.5L63,103.9a112.84,112.84,0,0,0,27,4.5v18a10,10,0,0,0,20,0v-18a106.6,106.6,0,0,0,29-5.5l10,17.5a9.86,9.86,0,0,0,17-10l-9-15.5a111.22,111.22,0,0,0,19-13.5C180.5,77.9,181,71.9,177.5,67.4Z"/></svg>
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#4285f4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.93a2 2 0 0 1 1.66.9l.82 1.2a2 2 0 0 0 1.66.9H18a2 2 0 0 1 2 2v2" />
+</svg>
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#4285f4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M12 10v6" />
+  <path d="M9 13h6" />
+  <path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" />
+</svg>
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#4285f4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" />
+</svg>
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#4285f4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M12 3v12" />
+  <path d="m8 11 4 4 4-4" />
+  <path d="M8 5H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-4" />
+</svg>
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#4285f4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <rect width="8" height="18" x="3" y="3" rx="1" />
+  <path d="M7 3v18" />
+  <path d="M20.4 18.9c.2.5-.1 1.1-.6 1.3l-1.9.7c-.5.2-1.1-.1-1.3-.6L11.1 5.1c-.2-.5.1-1.1.6-1.3l1.9-.7c.5-.2 1.1.1 1.3.6Z" />
+</svg>
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#4285f4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M16 12H3" />
+  <path d="M16 6H3" />
+  <path d="M10 18H3" />
+  <path d="M21 18V8a2 2 0 0 0-2-2h-5" />
+  <path d="m16 8-2-2 2-2" />
+</svg>
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#4285f4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M11 12H3" />
+  <path d="M16 6H3" />
+  <path d="M16 18H3" />
+  <path d="M18 9v6" />
+  <path d="M21 12h-6" />
+</svg>
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#4285f4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M15 3h6v6" />
+  <path d="m21 3-7 7" />
+  <path d="m3 21 7-7" />
+  <path d="M9 21H3v-6" />
+</svg>
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#4285f4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="m14 10 7-7" />
+  <path d="M20 10h-6V4" />
+  <path d="m3 21 7-7" />
+  <path d="M4 14h6v6" />
+</svg>
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#4285f4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M5 12h14" />
+</svg>
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#4285f4" stroke="#4285f4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <g transform="rotate(-45 12 12)">
+    <path d="M12 17v5" />
+    <path d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z" />
+  </g>
+</svg>
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#4285f4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <g transform="rotate(-45 12 12)">
+    <path d="M12 17v5" />
+    <path d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z" />
+  </g>
+</svg>
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="m21 16-4 4-4-4" />
+  <path d="M17 20V4" />
+  <path d="m3 8 4-4 4 4" />
+  <path d="M7 4v16" />
+</svg>
@@ -0,0 +1,2 @@
+<?xml version="1.0" ?>
+<svg fill="#000000" width="24" height="24" viewBox="0 0 200 200" data-name="Layer 1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"><title/><path d="M177.5,67.4a9.75,9.75,0,0,0-14-1.5c-10.5,8.5-20,14.5-29.5,17.5-9.5,3.5-20.5,5-34,5s-24.5-1.5-34-5-19-9-29.5-17.5c-4.5-3.5-10.5-3-14,1.5s-3,10.5,1.5,14A132.06,132.06,0,0,0,45,95.9l-8.5,14.5c-2.5,5-1,11,3.5,13.5,5,2.5,11,1,13.5-3.5L63,103.9a112.84,112.84,0,0,0,27,4.5v18a10,10,0,0,0,20,0v-18a106.6,106.6,0,0,0,29-5.5l10,17.5a9.86,9.86,0,0,0,17-10l-9-15.5a111.22,111.22,0,0,0,19-13.5C180.5,77.9,181,71.9,177.5,67.4Z"/></svg>
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.93a2 2 0 0 1 1.66.9l.82 1.2a2 2 0 0 0 1.66.9H18a2 2 0 0 1 2 2v2" />
+</svg>
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M12 10v6" />
+  <path d="M9 13h6" />
+  <path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" />
+</svg>
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" />
+</svg>
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M12 3v12" />
+  <path d="m8 11 4 4 4-4" />
+  <path d="M8 5H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-4" />
+</svg>
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <rect width="8" height="18" x="3" y="3" rx="1" />
+  <path d="M7 3v18" />
+  <path d="M20.4 18.9c.2.5-.1 1.1-.6 1.3l-1.9.7c-.5.2-1.1-.1-1.3-.6L11.1 5.1c-.2-.5.1-1.1.6-1.3l1.9-.7c.5-.2 1.1.1 1.3.6Z" />
+</svg>
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M16 12H3" />
+  <path d="M16 6H3" />
+  <path d="M10 18H3" />
+  <path d="M21 18V8a2 2 0 0 0-2-2h-5" />
+  <path d="m16 8-2-2 2-2" />
+</svg>
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M11 12H3" />
+  <path d="M16 6H3" />
+  <path d="M16 18H3" />
+  <path d="M18 9v6" />
+  <path d="M21 12h-6" />
+</svg>
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M15 3h6v6" />
+  <path d="m21 3-7 7" />
+  <path d="m3 21 7-7" />
+  <path d="M9 21H3v-6" />
+</svg>
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="m14 10 7-7" />
+  <path d="M20 10h-6V4" />
+  <path d="m3 21 7-7" />
+  <path d="M4 14h6v6" />
+</svg>
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M5 12h14" />
+</svg>
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#000000" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <g transform="rotate(-45 12 12)">
+    <path d="M12 17v5" />
+    <path d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z" />
+  </g>
+</svg>
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <g transform="rotate(-45 12 12)">
+    <path d="M12 17v5" />
+    <path d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z" />
+  </g>
+</svg>
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ef4444" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="m21 16-4 4-4-4" />
+  <path d="M17 20V4" />
+  <path d="m3 8 4-4 4 4" />
+  <path d="M7 4v16" />
+</svg>
@@ -0,0 +1,2 @@
+<?xml version="1.0" ?>
+<svg fill="#ef4444" width="24" height="24" viewBox="0 0 200 200" data-name="Layer 1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"><title/><path d="M177.5,67.4a9.75,9.75,0,0,0-14-1.5c-10.5,8.5-20,14.5-29.5,17.5-9.5,3.5-20.5,5-34,5s-24.5-1.5-34-5-19-9-29.5-17.5c-4.5-3.5-10.5-3-14,1.5s-3,10.5,1.5,14A132.06,132.06,0,0,0,45,95.9l-8.5,14.5c-2.5,5-1,11,3.5,13.5,5,2.5,11,1,13.5-3.5L63,103.9a112.84,112.84,0,0,0,27,4.5v18a10,10,0,0,0,20,0v-18a106.6,106.6,0,0,0,29-5.5l10,17.5a9.86,9.86,0,0,0,17-10l-9-15.5a111.22,111.22,0,0,0,19-13.5C180.5,77.9,181,71.9,177.5,67.4Z"/></svg>
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ef4444" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.93a2 2 0 0 1 1.66.9l.82 1.2a2 2 0 0 0 1.66.9H18a2 2 0 0 1 2 2v2" />
+</svg>
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ef4444" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M12 10v6" />
+  <path d="M9 13h6" />
+  <path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" />
+</svg>
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ef4444" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" />
+</svg>
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ef4444" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M12 3v12" />
+  <path d="m8 11 4 4 4-4" />
+  <path d="M8 5H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-4" />
+</svg>
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ef4444" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <rect width="8" height="18" x="3" y="3" rx="1" />
+  <path d="M7 3v18" />
+  <path d="M20.4 18.9c.2.5-.1 1.1-.6 1.3l-1.9.7c-.5.2-1.1-.1-1.3-.6L11.1 5.1c-.2-.5.1-1.1.6-1.3l1.9-.7c.5-.2 1.1.1 1.3.6Z" />
+</svg>
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ef4444" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M16 12H3" />
+  <path d="M16 6H3" />
+  <path d="M10 18H3" />
+  <path d="M21 18V8a2 2 0 0 0-2-2h-5" />
+  <path d="m16 8-2-2 2-2" />
+</svg>
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ef4444" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M11 12H3" />
+  <path d="M16 6H3" />
+  <path d="M16 18H3" />
+  <path d="M18 9v6" />
+  <path d="M21 12h-6" />
+</svg>
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ef4444" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M15 3h6v6" />
+  <path d="m21 3-7 7" />
+  <path d="m3 21 7-7" />
+  <path d="M9 21H3v-6" />
+</svg>
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ef4444" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="m14 10 7-7" />
+  <path d="M20 10h-6V4" />
+  <path d="m3 21 7-7" />
+  <path d="M4 14h6v6" />
+</svg>
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ef4444" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M5 12h14" />
+</svg>
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#ef4444" stroke="#ef4444" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <g transform="rotate(-45 12 12)">
+    <path d="M12 17v5" />
+    <path d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z" />
+  </g>
+</svg>
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ef4444" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <g transform="rotate(-45 12 12)">
+    <path d="M12 17v5" />
+    <path d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z" />
+  </g>
+</svg>
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#888888" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="m21 16-4 4-4-4" />
+  <path d="M17 20V4" />
+  <path d="m3 8 4-4 4 4" />
+  <path d="M7 4v16" />
+</svg>
@@ -0,0 +1,2 @@
+<?xml version="1.0" ?>
+<svg fill="#888888" width="24" height="24" viewBox="0 0 200 200" data-name="Layer 1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"><title/><path d="M177.5,67.4a9.75,9.75,0,0,0-14-1.5c-10.5,8.5-20,14.5-29.5,17.5-9.5,3.5-20.5,5-34,5s-24.5-1.5-34-5-19-9-29.5-17.5c-4.5-3.5-10.5-3-14,1.5s-3,10.5,1.5,14A132.06,132.06,0,0,0,45,95.9l-8.5,14.5c-2.5,5-1,11,3.5,13.5,5,2.5,11,1,13.5-3.5L63,103.9a112.84,112.84,0,0,0,27,4.5v18a10,10,0,0,0,20,0v-18a106.6,106.6,0,0,0,29-5.5l10,17.5a9.86,9.86,0,0,0,17-10l-9-15.5a111.22,111.22,0,0,0,19-13.5C180.5,77.9,181,71.9,177.5,67.4Z"/></svg>
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#888888" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.93a2 2 0 0 1 1.66.9l.82 1.2a2 2 0 0 0 1.66.9H18a2 2 0 0 1 2 2v2" />
+</svg>
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#888888" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M12 10v6" />
+  <path d="M9 13h6" />
+  <path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" />
+</svg>
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#888888" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" />
+</svg>
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#888888" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M12 3v12" />
+  <path d="m8 11 4 4 4-4" />
+  <path d="M8 5H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-4" />
+</svg>
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#888888" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <rect width="8" height="18" x="3" y="3" rx="1" />
+  <path d="M7 3v18" />
+  <path d="M20.4 18.9c.2.5-.1 1.1-.6 1.3l-1.9.7c-.5.2-1.1-.1-1.3-.6L11.1 5.1c-.2-.5.1-1.1.6-1.3l1.9-.7c.5-.2 1.1.1 1.3.6Z" />
+</svg>
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#888888" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M16 12H3" />
+  <path d="M16 6H3" />
+  <path d="M10 18H3" />
+  <path d="M21 18V8a2 2 0 0 0-2-2h-5" />
+  <path d="m16 8-2-2 2-2" />
+</svg>
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#888888" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M11 12H3" />
+  <path d="M16 6H3" />
+  <path d="M16 18H3" />
+  <path d="M18 9v6" />
+  <path d="M21 12h-6" />
+</svg>
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#888888" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M15 3h6v6" />
+  <path d="m21 3-7 7" />
+  <path d="m3 21 7-7" />
+  <path d="M9 21H3v-6" />
+</svg>
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#888888" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="m14 10 7-7" />
+  <path d="M20 10h-6V4" />
+  <path d="m3 21 7-7" />
+  <path d="M4 14h6v6" />
+</svg>
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#888888" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M5 12h14" />
+</svg>
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#888888" stroke="#888888" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <g transform="rotate(-45 12 12)">
+    <path d="M12 17v5" />
+    <path d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z" />
+  </g>
+</svg>
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#888888" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <g transform="rotate(-45 12 12)">
+    <path d="M12 17v5" />
+    <path d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z" />
+  </g>
+</svg>
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="m21 16-4 4-4-4" />
+  <path d="M17 20V4" />
+  <path d="m3 8 4-4 4 4" />
+  <path d="M7 4v16" />
+</svg>
@@ -0,0 +1,2 @@
+<?xml version="1.0" ?>
+<svg fill="#ffffff" width="24" height="24" viewBox="0 0 200 200" data-name="Layer 1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"><title/><path d="M177.5,67.4a9.75,9.75,0,0,0-14-1.5c-10.5,8.5-20,14.5-29.5,17.5-9.5,3.5-20.5,5-34,5s-24.5-1.5-34-5-19-9-29.5-17.5c-4.5-3.5-10.5-3-14,1.5s-3,10.5,1.5,14A132.06,132.06,0,0,0,45,95.9l-8.5,14.5c-2.5,5-1,11,3.5,13.5,5,2.5,11,1,13.5-3.5L63,103.9a112.84,112.84,0,0,0,27,4.5v18a10,10,0,0,0,20,0v-18a106.6,106.6,0,0,0,29-5.5l10,17.5a9.86,9.86,0,0,0,17-10l-9-15.5a111.22,111.22,0,0,0,19-13.5C180.5,77.9,181,71.9,177.5,67.4Z"/></svg>
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.93a2 2 0 0 1 1.66.9l.82 1.2a2 2 0 0 0 1.66.9H18a2 2 0 0 1 2 2v2" />
+</svg>
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M12 10v6" />
+  <path d="M9 13h6" />
+  <path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" />
+</svg>
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" />
+</svg>
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M12 3v12" />
+  <path d="m8 11 4 4 4-4" />
+  <path d="M8 5H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-4" />
+</svg>
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <rect width="8" height="18" x="3" y="3" rx="1" />
+  <path d="M7 3v18" />
+  <path d="M20.4 18.9c.2.5-.1 1.1-.6 1.3l-1.9.7c-.5.2-1.1-.1-1.3-.6L11.1 5.1c-.2-.5.1-1.1.6-1.3l1.9-.7c.5-.2 1.1.1 1.3.6Z" />
+</svg>
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M16 12H3" />
+  <path d="M16 6H3" />
+  <path d="M10 18H3" />
+  <path d="M21 18V8a2 2 0 0 0-2-2h-5" />
+  <path d="m16 8-2-2 2-2" />
+</svg>
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M11 12H3" />
+  <path d="M16 6H3" />
+  <path d="M16 18H3" />
+  <path d="M18 9v6" />
+  <path d="M21 12h-6" />
+</svg>
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M15 3h6v6" />
+  <path d="m21 3-7 7" />
+  <path d="m3 21 7-7" />
+  <path d="M9 21H3v-6" />
+</svg>
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="m14 10 7-7" />
+  <path d="M20 10h-6V4" />
+  <path d="m3 21 7-7" />
+  <path d="M4 14h6v6" />
+</svg>
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M5 12h14" />
+</svg>
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#ffffff" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <g transform="rotate(-45 12 12)">
+    <path d="M12 17v5" />
+    <path d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z" />
+  </g>
+</svg>
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <g transform="rotate(-45 12 12)">
+    <path d="M12 17v5" />
+    <path d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z" />
+  </g>
+</svg>
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#cccccc" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="m21 16-4 4-4-4" />
+  <path d="M17 20V4" />
+  <path d="m3 8 4-4 4 4" />
+  <path d="M7 4v16" />
+</svg>
@@ -0,0 +1,2 @@
+<?xml version="1.0" ?>
+<svg fill="#cccccc" width="24" height="24" viewBox="0 0 200 200" data-name="Layer 1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"><title/><path d="M177.5,67.4a9.75,9.75,0,0,0-14-1.5c-10.5,8.5-20,14.5-29.5,17.5-9.5,3.5-20.5,5-34,5s-24.5-1.5-34-5-19-9-29.5-17.5c-4.5-3.5-10.5-3-14,1.5s-3,10.5,1.5,14A132.06,132.06,0,0,0,45,95.9l-8.5,14.5c-2.5,5-1,11,3.5,13.5,5,2.5,11,1,13.5-3.5L63,103.9a112.84,112.84,0,0,0,27,4.5v18a10,10,0,0,0,20,0v-18a106.6,106.6,0,0,0,29-5.5l10,17.5a9.86,9.86,0,0,0,17-10l-9-15.5a111.22,111.22,0,0,0,19-13.5C180.5,77.9,181,71.9,177.5,67.4Z"/></svg>
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#cccccc" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.93a2 2 0 0 1 1.66.9l.82 1.2a2 2 0 0 0 1.66.9H18a2 2 0 0 1 2 2v2" />
+</svg>
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#cccccc" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M12 10v6" />
+  <path d="M9 13h6" />
+  <path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" />
+</svg>
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#cccccc" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" />
+</svg>
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#cccccc" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M12 3v12" />
+  <path d="m8 11 4 4 4-4" />
+  <path d="M8 5H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-4" />
+</svg>
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#cccccc" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <rect width="8" height="18" x="3" y="3" rx="1" />
+  <path d="M7 3v18" />
+  <path d="M20.4 18.9c.2.5-.1 1.1-.6 1.3l-1.9.7c-.5.2-1.1-.1-1.3-.6L11.1 5.1c-.2-.5.1-1.1.6-1.3l1.9-.7c.5-.2 1.1.1 1.3.6Z" />
+</svg>
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#cccccc" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M16 12H3" />
+  <path d="M16 6H3" />
+  <path d="M10 18H3" />
+  <path d="M21 18V8a2 2 0 0 0-2-2h-5" />
+  <path d="m16 8-2-2 2-2" />
+</svg>
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#cccccc" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M11 12H3" />
+  <path d="M16 6H3" />
+  <path d="M16 18H3" />
+  <path d="M18 9v6" />
+  <path d="M21 12h-6" />
+</svg>
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#cccccc" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M15 3h6v6" />
+  <path d="m21 3-7 7" />
+  <path d="m3 21 7-7" />
+  <path d="M9 21H3v-6" />
+</svg>
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#cccccc" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="m14 10 7-7" />
+  <path d="M20 10h-6V4" />
+  <path d="m3 21 7-7" />
+  <path d="M4 14h6v6" />
+</svg>
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#cccccc" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M5 12h14" />
+</svg>
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#cccccc" stroke="#cccccc" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <g transform="rotate(-45 12 12)">
+    <path d="M12 17v5" />
+    <path d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z" />
+  </g>
+</svg>
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#cccccc" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <g transform="rotate(-45 12 12)">
+    <path d="M12 17v5" />
+    <path d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z" />
+  </g>
+</svg>
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#fbbf24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="m21 16-4 4-4-4" />
+  <path d="M17 20V4" />
+  <path d="m3 8 4-4 4 4" />
+  <path d="M7 4v16" />
+</svg>
@@ -0,0 +1,2 @@
+<?xml version="1.0" ?>
+<svg fill="#fbbf24" width="24" height="24" viewBox="0 0 200 200" data-name="Layer 1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"><title/><path d="M177.5,67.4a9.75,9.75,0,0,0-14-1.5c-10.5,8.5-20,14.5-29.5,17.5-9.5,3.5-20.5,5-34,5s-24.5-1.5-34-5-19-9-29.5-17.5c-4.5-3.5-10.5-3-14,1.5s-3,10.5,1.5,14A132.06,132.06,0,0,0,45,95.9l-8.5,14.5c-2.5,5-1,11,3.5,13.5,5,2.5,11,1,13.5-3.5L63,103.9a112.84,112.84,0,0,0,27,4.5v18a10,10,0,0,0,20,0v-18a106.6,106.6,0,0,0,29-5.5l10,17.5a9.86,9.86,0,0,0,17-10l-9-15.5a111.22,111.22,0,0,0,19-13.5C180.5,77.9,181,71.9,177.5,67.4Z"/></svg>
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#fbbf24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.93a2 2 0 0 1 1.66.9l.82 1.2a2 2 0 0 0 1.66.9H18a2 2 0 0 1 2 2v2" />
+</svg>
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#fbbf24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M12 10v6" />
+  <path d="M9 13h6" />
+  <path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" />
+</svg>
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#fbbf24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" />
+</svg>
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#fbbf24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M12 3v12" />
+  <path d="m8 11 4 4 4-4" />
+  <path d="M8 5H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-4" />
+</svg>
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#fbbf24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <rect width="8" height="18" x="3" y="3" rx="1" />
+  <path d="M7 3v18" />
+  <path d="M20.4 18.9c.2.5-.1 1.1-.6 1.3l-1.9.7c-.5.2-1.1-.1-1.3-.6L11.1 5.1c-.2-.5.1-1.1.6-1.3l1.9-.7c.5-.2 1.1.1 1.3.6Z" />
+</svg>