wallpaper selector: add address bar

.config/quickshell/ii/modules/common/AddressBar.qml

@@ -0,0 +1,94 @@
+import QtQuick
+import QtQuick.Layouts
+import qs
+import qs.modules.common
+import qs.modules.common.widgets
+import qs.modules.common.functions
+
+Rectangle {
+    id: root
+    required property var directory
+    property bool showBreadcrumb: true // TODO: make this work
+
+    signal navigateToDirectory(string path)
+
+    property real padding: 6
+    implicitWidth: mainLayout.implicitWidth + padding * 2
+    implicitHeight: mainLayout.implicitHeight + padding * 2
+    color: Appearance.colors.colLayer2
+
+    RowLayout {
+        id: mainLayout
+        anchors {
+            fill: parent
+            margins: root.padding
+        }
+        spacing: 8
+
+        RippleButton {
+            id: parentDirButton
+            onClicked: root.navigateToDirectory(FileUtils.parentDirectory(root.directory))
+            contentItem: MaterialSymbol {
+                text: "drive_folder_upload"
+                iconSize: Appearance.font.pixelSize.larger
+            }
+        }
+
+        Item {
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+
+            Loader {
+                active: !root.showBreadcrumb
+                visible: !root.showBreadcrumb
+                anchors.fill: parent
+                sourceComponent: Rectangle {
+                    color: Appearance.colors.colLayer1
+                    radius: Appearance.rounding.full
+                    implicitWidth: addressInput.implicitWidth
+                    implicitHeight: addressInput.implicitHeight
+
+                    StyledTextInput {
+                        id: addressInput
+                        anchors.fill: parent
+                        padding: 10
+                        text: root.directory
+
+                        onAccepted: root.navigateToDirectory(text)
+
+                        MouseArea {
+                            // I-beam cursor
+                            anchors.fill: parent
+                            acceptedButtons: Qt.NoButton
+                            hoverEnabled: true
+                            cursorShape: Qt.IBeamCursor
+                        }
+                    }
+                }
+            }
+
+            Loader {
+                active: root.showBreadcrumb
+                visible: root.showBreadcrumb
+                anchors.fill: parent
+                sourceComponent: AddressBreadcrumb {
+                    directory: root.directory
+                    onNavigateToDirectory: (dir) => {
+                        root.navigateToDirectory(dir)
+                    }
+                }
+            }
+        }
+
+        RippleButton {
+            id: dirEditButton
+            toggled: !root.showBreadcrumb
+            onClicked: root.showBreadcrumb = !root.showBreadcrumb
+            contentItem: MaterialSymbol {
+                text: "edit"
+                iconSize: Appearance.font.pixelSize.larger
+                color: dirEditButton.toggled ? Appearance.colors.colOnPrimary : Appearance.colors.colOnLayer2
+            }
+        }
+    }
+}

.config/quickshell/ii/modules/common/functions/FileUtils.qml

@@ -24,6 +24,20 @@ Singleton {
         return trimmed.split(/[\\/]/).pop();
     }
 
+    /**
+     * Extracts the folder name from a directory path
+     * @param {string} str
+     * @returns {string}
+     */
+    function folderNameForPath(str) {
+        if (typeof str !== "string") return "";
+        const trimmed = trimFileProtocol(str);
+        // Remove trailing slash if present
+        const noTrailing = trimmed.endsWith("/") ? trimmed.slice(0, -1) : trimmed;
+        if (!noTrailing) return "";
+        return noTrailing.split(/[\\/]/).pop();
+    }
+
     /**
      * Removes the file extension from a file path or name
      * @param {string} str
@@ -38,4 +52,18 @@ Singleton {
         }
         return trimmed;
     }
+
+    /**
+     * Returns the parent directory of a given file path
+     * @param {string} str
+     * @returns {string}
+     */
+    function parentDirectory(str) {
+        if (typeof str !== "string") return "";
+        const trimmed = trimFileProtocol(str);
+        const parts = trimmed.split(/[\\/]/);
+        if (parts.length <= 1) return "";
+        parts.pop();
+        return parts.join("/");
+    }
 }

.config/quickshell/ii/modules/common/widgets/AddressBreadcrumb.qml

@@ -0,0 +1,38 @@
+import QtQuick
+import QtQuick.Layouts
+import qs.services
+import qs.modules.common
+import qs.modules.common.widgets
+import qs.modules.common.functions
+
+ListView {
+    id: root
+    required property var directory
+    property var breadcrumbDirectory: ""
+    Component.onCompleted: breadcrumbDirectory = directory;
+    onDirectoryChanged: {
+        if (breadcrumbDirectory.startsWith(directory)) return;
+        breadcrumbDirectory = directory
+    }
+
+    signal navigateToDirectory(string path)
+
+    orientation: ListView.Horizontal
+    clip: true
+    spacing: 2
+
+    model: breadcrumbDirectory.split("/")
+    delegate: SelectionGroupButton {
+        id: folderButton
+        required property var modelData
+        required property int index
+        buttonText: index === 0 ? "/" : modelData
+        toggled: index === directory.split("/").length - 1
+        leftmost: index === 0
+        rightmost: index === breadcrumbDirectory.split("/").length - 1
+
+        onClicked: {
+            root.navigateToDirectory(breadcrumbDirectory.split("/").slice(0, index + 1).join("/"))
+        }
+    }
+}