filedialog: add nav rail

widgets/filedialog/FileDialog.qml

@@ -18,13 +18,18 @@ FloatingWindow {
     RowLayout {
         anchors.fill: parent
 
-        spacing: Appearance.spacing.normal
+        spacing: 0
+
+        Sidebar {
+            Layout.fillHeight: true
+            dialog: root
+        }
 
         ColumnLayout {
             Layout.fillWidth: true
             Layout.fillHeight: true
 
-            spacing: Appearance.spacing.small
+            spacing: 0
 
             HeaderBar {
                 Layout.fillWidth: true

widgets/filedialog/FolderContents.qml

@@ -8,20 +8,55 @@ import Quickshell
 import Quickshell.Io
 import Quickshell.Widgets
 import QtQuick
+import QtQuick.Effects
 import Qt.labs.folderlistmodel
 
-GridView {
+Item {
     id: root
 
     required property var dialog
 
+    StyledRect {
+        anchors.fill: parent
+        color: Colours.palette.m3surfaceContainer
+
+        layer.enabled: true
+        layer.effect: MultiEffect {
+            maskSource: mask
+            maskEnabled: true
+            maskInverted: true
+            maskThresholdMin: 0.5
+            maskSpreadAtMin: 1
+        }
+    }
+
+    Item {
+        id: mask
+
+        anchors.fill: parent
+        layer.enabled: true
+        visible: false
+
+        Rectangle {
+            anchors.fill: parent
+            anchors.margins: Appearance.padding.small
+            radius: Appearance.rounding.small
+        }
+    }
+
+    GridView {
+        id: view
+
+        anchors.fill: parent
+        anchors.margins: Appearance.padding.small + Appearance.padding.normal
+
         cellWidth: Sizes.itemWidth + Appearance.spacing.small
         cellHeight: Sizes.itemWidth + Appearance.spacing.small * 2 + Appearance.padding.normal * 2 + 1
 
         clip: true
         focus: true
         currentIndex: -1
-    Keys.onEscapePressed: root.currentIndex = -1
+        Keys.onEscapePressed: view.currentIndex = -1
 
         model: FolderListModel {
             showDirsFirst: true
@@ -33,7 +68,7 @@ GridView {
                     url += root.dialog.cwd.join("/");
                 return url;
             }
-        onFolderChanged: root.currentIndex = -1
+            onFolderChanged: view.currentIndex = -1
         }
 
         delegate: StyledRect {
@@ -52,12 +87,12 @@ GridView {
             implicitHeight: nonAnimHeight
 
             radius: Appearance.rounding.normal
-        color: root.currentItem === item ? Colours.palette.m3primary : "transparent"
+            color: view.currentItem === item ? Colours.palette.m3primary : "transparent"
-        z: root.currentItem === item || implicitHeight !== nonAnimHeight ? 1 : 0
+            z: view.currentItem === item || implicitHeight !== nonAnimHeight ? 1 : 0
             clip: true
 
             StateLayer {
-            color: root.currentItem === item ? Colours.palette.m3onPrimary : Colours.palette.m3onSurface
+                color: view.currentItem === item ? Colours.palette.m3onPrimary : Colours.palette.m3onSurface
 
                 onDoubleClicked: {
                     if (item.fileIsDir)
@@ -67,7 +102,7 @@ GridView {
                 }
 
                 function onClicked(): void {
-                root.currentIndex = item.index;
+                    view.currentIndex = item.index;
                 }
             }
 
@@ -109,9 +144,9 @@ GridView {
 
                 horizontalAlignment: Text.AlignHCenter
                 text: item.fileName
-            color: root.currentItem === item ? Colours.palette.m3onPrimary : Colours.palette.m3onSurface
+                color: view.currentItem === item ? Colours.palette.m3onPrimary : Colours.palette.m3onSurface
-            elide: root.currentItem === item ? Text.ElideNone : Text.ElideRight
+                elide: view.currentItem === item ? Text.ElideNone : Text.ElideRight
-            wrapMode: root.currentItem === item ? Text.WrapAtWordBoundaryOrAnywhere : Text.NoWrap
+                wrapMode: view.currentItem === item ? Text.WrapAtWordBoundaryOrAnywhere : Text.NoWrap
             }
 
             Behavior on implicitHeight {
@@ -122,4 +157,5 @@ GridView {
                 }
             }
         }
+    }
 }

widgets/filedialog/Sidebar.qml

@@ -0,0 +1,120 @@
+pragma ComponentBehavior: Bound
+
+import ".."
+import qs.services
+import qs.config
+import Quickshell
+import Quickshell.Widgets
+import QtQuick
+import QtQuick.Layouts
+
+StyledRect {
+    id: root
+
+    required property var dialog
+
+    implicitWidth: Sizes.sidebarWidth
+    implicitHeight: inner.implicitHeight + Appearance.padding.normal * 2
+
+    color: Colours.palette.m3surfaceContainer
+
+    ColumnLayout {
+        id: inner
+
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.top: parent.top
+        anchors.margins: Appearance.padding.normal
+        spacing: Appearance.spacing.small / 2
+
+        StyledText {
+            Layout.alignment: Qt.AlignHCenter
+            Layout.topMargin: Appearance.padding.small / 2
+            Layout.bottomMargin: Appearance.spacing.normal
+            text: qsTr("Files")
+            color: Colours.palette.m3onSurface
+            font.pointSize: Appearance.font.size.larger
+            font.bold: true
+        }
+
+        Repeater {
+            model: ["Home", "Downloads", "Desktop", "Documents", "Music", "Pictures", "Videos"]
+
+            StyledRect {
+                id: place
+
+                required property string modelData
+                readonly property bool selected: modelData === root.dialog.cwd[root.dialog.cwd.length - 1]
+
+                anchors.left: parent.left
+                anchors.right: parent.right
+                implicitHeight: placeInner.implicitHeight + Appearance.padding.normal * 2
+
+                radius: Appearance.rounding.full
+                color: selected ? Colours.palette.m3secondaryContainer : "transparent"
+
+                StateLayer {
+                    color: place.selected ? Colours.palette.m3onSecondaryContainer : Colours.palette.m3onSurface
+
+                    function onClicked(): void {
+                        if (place.modelData === "Home")
+                            root.dialog.cwd = ["Home"];
+                        else
+                            root.dialog.cwd = ["Home", place.modelData];
+                    }
+                }
+
+                RowLayout {
+                    id: placeInner
+
+                    anchors.fill: parent
+                    anchors.margins: Appearance.padding.normal
+                    anchors.leftMargin: Appearance.padding.large
+                    anchors.rightMargin: Appearance.padding.large
+
+                    spacing: Appearance.spacing.normal
+
+                    MaterialIcon {
+                        text: {
+                            const p = place.modelData;
+                            if (p === "Home")
+                                return "home";
+                            if (p === "Downloads")
+                                return "file_download";
+                            if (p === "Desktop")
+                                return "desktop_windows";
+                            if (p === "Documents")
+                                return "description";
+                            if (p === "Music")
+                                return "music_note";
+                            if (p === "Pictures")
+                                return "image";
+                            if (p === "Videos")
+                                return "video_library";
+                            return "folder";
+                        }
+                        color: place.selected ? Colours.palette.m3onSecondaryContainer : Colours.palette.m3onSurface
+                        font.pointSize: Appearance.font.size.large
+                        fill: place.selected ? 1 : 0
+
+                        Behavior on fill {
+                            NumberAnimation {
+                                duration: Appearance.anim.durations.normal
+                                easing.type: Easing.BezierSpline
+                                easing.bezierCurve: Appearance.anim.curves.standard
+                            }
+                        }
+                    }
+
+                    StyledText {
+                        Layout.fillWidth: true
+                        text: place.modelData
+                        color: place.selected ? Colours.palette.m3onSecondaryContainer : Colours.palette.m3onSurface
+                        font.pointSize: Appearance.font.size.normal
+                        elide: Text.ElideRight
+                    }
+                }
+            }
+        }
+    }
+}

widgets/filedialog/Sizes.qml

@@ -4,4 +4,5 @@ import Quickshell
 
 Singleton {
     property int itemWidth: 100
+    property int sidebarWidth: 200
 }