settings app: base window with navrail

.config/quickshell/modules/common/widgets/FloatingActionButton.qml

@@ -0,0 +1,56 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import "root:/modules/common/"
+import "root:/modules/common/widgets/"
+
+/**
+ * Material 3 FAB.
+ */
+RippleButton {
+    id: root
+    property string iconText: "add"
+    property bool expanded: false
+    property real baseSize: 50
+    property real elementSpacing: 5
+    implicitWidth: Math.max(contentRowLayout.implicitWidth + 10 * 2, baseSize)
+    implicitHeight: baseSize
+    buttonRadius: Appearance.rounding.small
+    colBackground: Appearance.colors.colSecondaryContainer
+    colBackgroundHover: Appearance.colors.colSecondaryContainerHover
+    colRipple: Appearance.colors.colSecondaryContainerActive
+    contentItem: RowLayout {
+        id: contentRowLayout
+        property real horizontalMargins: (root.baseSize - icon.width) / 2
+        anchors {
+            verticalCenter: parent?.verticalCenter
+            left: parent?.left
+            leftMargin: contentRowLayout.horizontalMargins
+        }
+        spacing: 0
+
+        MaterialSymbol {
+            id: icon
+            Layout.fillWidth: true
+            horizontalAlignment: Text.AlignHCenter
+            iconSize: Appearance.font.pixelSize.huge
+            color: Appearance.colors.colOnLayer1
+            text: root.iconText
+        }
+        Revealer {
+            visible: root.expanded || implicitWidth > 0
+            reveal: root.expanded
+            implicitWidth: reveal ? (buttonText.implicitWidth + root.elementSpacing + contentRowLayout.horizontalMargins) : 0
+            StyledText {
+                id: buttonText
+                anchors {
+                    left: parent.left
+                    leftMargin: root.elementSpacing
+                }
+                text: root.buttonText
+                color: Appearance.colors.colOnLayer1
+                font.pixelSize: Appearance.font.pixelSize.small
+            }
+        }
+    }
+}

.config/quickshell/modules/common/widgets/NavigationRail.qml

@@ -0,0 +1,13 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import "root:/modules/common/"
+import "root:/modules/common/widgets/"
+
+ColumnLayout { // Window content with navigation rail and content pane
+    id: root
+    property bool expanded: true
+    spacing: 10
+
+
+}

.config/quickshell/modules/common/widgets/NavigationRailExpandButton.qml

@@ -0,0 +1,25 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import "root:/modules/common/"
+import "root:/modules/common/widgets/"
+
+RippleButton {
+    id: root
+    Layout.alignment: Qt.AlignLeft
+    implicitWidth: 40
+    implicitHeight: 40
+    Layout.leftMargin: 5
+    onClicked: {
+        parent.expanded = !parent.expanded;
+    }
+    buttonRadius: Appearance.rounding.full
+    contentItem: MaterialSymbol {
+        id: icon
+        anchors.centerIn: parent
+        horizontalAlignment: Text.AlignHCenter
+        iconSize: Appearance.font.pixelSize.hugeass
+        color: Appearance.colors.colOnLayer1
+        text: root.parent.expanded ? "menu_open" : "menu"
+    }
+}

.config/quickshell/modules/sidebarRight/todo/TodoWidget.qml

@@ -154,31 +154,18 @@ Item {
     // + FAB
     StyledRectangularShadow {
         target: fabButton
-        radius: Appearance.rounding.normal
+        radius: fabButton.buttonRadius
+        blur: 0.6 * Appearance.sizes.elevationMargin
     }
-    Button { 
+    FloatingActionButton {
         id: fabButton
         anchors.right: parent.right
         anchors.bottom: parent.bottom
         anchors.rightMargin: root.fabMargins
         anchors.bottomMargin: root.fabMargins
-        width: root.fabSize
-        height: root.fabSize
-        PointingHandInteraction {}
 
         onClicked: root.showAddDialog = true
 
-        background: Rectangle {
-            id: fabBackground
-            anchors.fill: parent
-            radius: Appearance.rounding.normal
-            color: (fabButton.down) ? Appearance.colors.colPrimaryContainerActive : (fabButton.hovered ? Appearance.colors.colPrimaryContainerHover : Appearance.colors.colPrimaryContainer)
-
-            Behavior on color {
-                animation: Appearance.animation.elementMoveFast.colorAnimation.createObject(this)
-            }
-        }
-
         contentItem: MaterialSymbol {
             text: "add"
             horizontalAlignment: Text.AlignHCenter

.config/quickshell/settings.qml

@@ -0,0 +1,135 @@
+//@ pragma UseQApplication
+//@ pragma Env QS_NO_RELOAD_POPUP=1
+//@ pragma Env QT_QUICK_CONTROLS_STYLE=Basic
+
+// Adjust this to make the app smaller or larger
+//@ pragma Env QT_SCALE_FACTOR=1
+
+import Qt5Compat.GraphicalEffects
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import QtQuick.Window
+import Quickshell
+import Quickshell.Io
+import Quickshell.Hyprland
+import "root:/services/"
+import "root:/modules/common/"
+import "root:/modules/common/widgets/"
+import "root:/modules/common/functions/color_utils.js" as ColorUtils
+import "root:/modules/common/functions/file_utils.js" as FileUtils
+import "root:/modules/common/functions/string_utils.js" as StringUtils
+
+ApplicationWindow {
+    id: root
+    property string firstRunFilePath: FileUtils.trimFileProtocol(`${Directories.state}/user/first_run.txt`)
+    property string firstRunFileContent: "This file is just here to confirm you've been greeted :>"
+    property real contentPadding: 5
+    property bool showNextTime: false
+    visible: true
+    onClosing: Qt.quit()
+    title: "illogical-impulse Settings"
+
+    Component.onCompleted: {
+        MaterialThemeLoader.reapplyTheme()
+        ConfigLoader.loadConfig()
+    }
+
+    minimumWidth: 600
+    minimumHeight: 400
+    width: 800
+    height: 650
+    color: Appearance.m3colors.m3background
+
+    component Section: ColumnLayout {
+        id: sectionRoot
+        property string title
+        default property alias data: sectionContent.data
+
+        Layout.fillWidth: true
+        spacing: 8
+        StyledText {
+            text: sectionRoot.title
+            font.pixelSize: Appearance.font.pixelSize.larger
+        }
+        ColumnLayout {
+            id: sectionContent
+            spacing: 5
+        }
+    }
+
+    ColumnLayout {
+        anchors {
+            fill: parent
+            margins: contentPadding
+        }
+
+        Item { // Titlebar
+            visible: ConfigOptions?.windows.showTitlebar
+            Layout.fillWidth: true
+            Layout.fillHeight: false
+            implicitHeight: Math.max(titleText.implicitHeight, windowControlsRow.implicitHeight)
+            StyledText {
+                id: titleText
+                anchors.centerIn: parent
+                color: Appearance.colors.colOnLayer0
+                text: "Settings"
+                font.pixelSize: Appearance.font.pixelSize.hugeass
+                font.family: Appearance.font.family.title
+            }
+            RowLayout { // Window controls row
+                id: windowControlsRow
+                anchors.verticalCenter: parent.verticalCenter
+                anchors.right: parent.right
+                RippleButton {
+                    buttonRadius: Appearance.rounding.full
+                    implicitWidth: 35
+                    implicitHeight: 35
+                    onClicked: root.close()
+                    contentItem: MaterialSymbol {
+                        anchors.centerIn: parent
+                        horizontalAlignment: Text.AlignHCenter
+                        text: "close"
+                        iconSize: 20
+                    }
+                }
+            }
+        }
+
+        RowLayout { // Window content with navigation rail and content pane
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+            NavigationRail { // Window content with navigation rail and content pane
+                id: navRail
+                Layout.fillHeight: true
+                Layout.margins: 5
+                spacing: 10
+                expanded: root.width > 800
+                
+                NavigationRailExpandButton {}
+
+                FloatingActionButton {
+                    id: fab
+                    iconText: "edit"
+                    buttonText: "Edit config"
+                    expanded: navRail.expanded
+                    onClicked: {
+                        Qt.openUrlExternally(`${Directories.config}/illogical-impulse/config.json`);
+                    }
+                }
+
+                
+
+                Item {
+                    Layout.fillHeight: true
+                }
+            }
+            Rectangle { // Content container
+                Layout.fillWidth: true
+                Layout.fillHeight: true
+                color: Appearance.m3colors.m3surfaceContainerLow
+                radius: Appearance.rounding.windowRounding - root.contentPadding
+            }
+        }
+    }
+}

.config/quickshell/shell.qml

@@ -32,7 +32,7 @@ ShellRoot {
     property bool enableBar: true
     property bool enableBackgroundWidgets: true
     property bool enableCheatsheet: true
-    property bool enableDock: true
+    property bool enableDock: false
     property bool enableMediaControls: true
     property bool enableNotificationPopup: true
     property bool enableOnScreenDisplayBrightness: true

.config/quickshell/welcome.qml

@@ -241,7 +241,7 @@ ApplicationWindow {
             margins: contentPadding
         }
 
-        Item {
+        Item { // Titlebar
             visible: ConfigOptions?.windows.showTitlebar
             Layout.fillWidth: true
             implicitHeight: Math.max(welcomeText.implicitHeight, windowControlsRow.implicitHeight)
@@ -289,13 +289,13 @@ ApplicationWindow {
                 }
             }
         }
-        Rectangle {
+        Rectangle { // Content container
             color: Appearance.m3colors.m3surfaceContainerLow
+            radius: Appearance.rounding.windowRounding - root.contentPadding
             implicitHeight: contentColumn.implicitHeight
             implicitWidth: contentColumn.implicitWidth
             Layout.fillWidth: true
             Layout.fillHeight: true
-            radius: Appearance.rounding.windowRounding - root.contentPadding
             Flickable {
                 clip: true
                 anchors.fill: parent