settings: more icons

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

@@ -2,13 +2,14 @@ import QtQuick
 import Quickshell
 import Quickshell.Io
 import qs.modules.common
+import qs.modules.common.widgets
 import qs.modules.common.functions
 
 /**
  * Thumbnail image. It currently generates to the right place at the right size, but does not handle metadata/maintenance on modification.
  * See Freedesktop's spec: https://specifications.freedesktop.org/thumbnail-spec/thumbnail-spec-latest.html
  */
-Image {
+StyledImage {
     id: root
 
     property bool generateThumbnail: true
@@ -24,7 +25,6 @@ Image {
     source: thumbnailPath
 
     asynchronous: true
-    cache: false
     smooth: true
     mipmap: false
 

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

@@ -3,6 +3,6 @@ import QtQuick.Layouts
 
 RowLayout {
     property bool uniform: false
-    spacing: 10
+    spacing: 4
     uniformCellSizes: uniform
 }

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

@@ -9,7 +9,18 @@ Flow {
     id: root
     Layout.fillWidth: true
     spacing: 2
-    property list<var> options: []
+    property list<var> options: [
+        {
+            "displayName": "Option 1",
+            "icon": "check",
+            "value": 1
+        },
+        {
+            "displayName": "Option 2",
+            "icon": "close",
+            "value": 2
+        },
+    ]
     property var currentValue: null
 
     signal selected(var newValue)
@@ -32,7 +43,8 @@ Flow {
             }
             leftmost: index === 0
             rightmost: index === root.options.length - 1
-            buttonText: modelData.displayName;
+            buttonIcon: modelData.icon || ""
+            buttonText: modelData.displayName
             toggled: root.currentValue === modelData.value
             onClicked: {
                 root.selected(modelData.value);

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

@@ -6,6 +6,7 @@ import QtQuick.Layouts
 RowLayout {
     id: root
     property string text: ""
+    property string icon
     property alias value: spinBoxWidget.value
     property alias stepSize: spinBoxWidget.stepSize
     property alias from: spinBoxWidget.from
@@ -14,12 +15,17 @@ RowLayout {
     Layout.leftMargin: 8
     Layout.rightMargin: 8
 
-    StyledText {
+    RowLayout {
-        id: labelWidget
+        OptionalMaterialSymbol {
-        Layout.fillWidth: true
+            icon: root.icon
-        text: root.text
+        }
-        font.pixelSize: Appearance.font.pixelSize.small
+        StyledText {
-        color: Appearance.colors.colOnSecondaryContainer
+            id: labelWidget
+            Layout.fillWidth: true
+            text: root.text
+            font.pixelSize: Appearance.font.pixelSize.small
+            color: Appearance.colors.colOnSecondaryContainer
+        }
     }
 
     StyledSpinBox {

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

@@ -6,12 +6,17 @@ import QtQuick.Controls
 
 RippleButton {
     id: root
+    property string buttonIcon
     Layout.fillWidth: true
     implicitHeight: contentItem.implicitHeight + 8 * 2
     onClicked: checked = !checked
 
     contentItem: RowLayout {
         spacing: 10
+        OptionalMaterialSymbol {
+            icon: root.buttonIcon
+            iconSize: Appearance.font.pixelSize.larger
+        }
         StyledText {
             id: labelWidget
             Layout.fillWidth: true

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

@@ -5,7 +5,7 @@ import qs.modules.common.widgets
 
 StyledFlickable {
     id: root
-    property real baseWidth: 550
+    property real baseWidth: 600
     property bool forceWidth: false
     property real bottomContentPadding: 100
 
@@ -21,9 +21,9 @@ StyledFlickable {
         anchors {
             top: parent.top
             horizontalCenter: parent.horizontalCenter
-            margins: 10
+            margins: 20
         }
-        spacing: 20
+        spacing: 30
     }
 
 }

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

@@ -7,22 +7,29 @@ import qs.modules.common.widgets
 ColumnLayout {
     id: root
     property string title
+    property string icon: ""
     default property alias data: sectionContent.data
 
     Layout.fillWidth: true
-    spacing: 8
+    spacing: 6
-    StyledText {
+
-        text: root.title
+    RowLayout {
-        font.pixelSize: Appearance.font.pixelSize.larger
+        spacing: 6
-        font.weight: Font.Medium
+        OptionalMaterialSymbol {
+            icon: root.icon
+            iconSize: Appearance.font.pixelSize.hugeass
+        }
+        StyledText {
+            text: root.title
+            font.pixelSize: Appearance.font.pixelSize.larger
+            font.weight: Font.Medium
+        }
     }
+
     ColumnLayout {
         id: sectionContent
         Layout.fillWidth: true
-        spacing: 8
+        spacing: 4
 
-        Item {
-            Layout.fillWidth: true
-        }
     }
 }

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

@@ -6,5 +6,5 @@ import qs.modules.common.widgets
 StyledText {
     text: "Subsection"
     color: Appearance.colors.colSubtext
-    Layout.leftMargin: 4
+    Layout.leftMargin: 2
 }

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

@@ -10,6 +10,7 @@ TabButton {
 
     property bool toggled: TabBar.tabBar.currentIndex === TabBar.index
     property string buttonIcon
+    property real buttonIconRotation: 0
     property string buttonText
     property bool expanded: false
     property bool showToggledHighlight: true
@@ -99,6 +100,7 @@ TabButton {
             }
             MaterialSymbol {
                 id: navRailButtonIcon
+                rotation: root.buttonIconRotation
                 anchors.centerIn: parent
                 iconSize: 24
                 fill: toggled ? 1 : 0

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

@@ -0,0 +1,27 @@
+import QtQuick
+import QtQuick.Layouts
+import qs.modules.common
+import qs.modules.common.widgets
+
+Loader {
+    id: root
+    required property string icon
+    property real iconSize: Appearance.font.pixelSize.larger
+    Layout.alignment: Qt.AlignVCenter
+
+    active: root.icon && root.icon.length > 0
+    visible: active
+
+    sourceComponent: Item {
+        implicitWidth: materialSymbol.implicitWidth
+
+        MaterialSymbol {
+            id: materialSymbol
+            anchors.centerIn: parent
+
+            iconSize: root.iconSize
+            color: root.toggled ? Appearance.colors.colOnPrimary : Appearance.colors.colOnSecondaryContainer
+            text: root.icon
+        }
+    }
+}

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

@@ -1,3 +1,4 @@
+import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 import Quickshell
@@ -12,13 +13,37 @@ GroupButton {
     horizontalPadding: 12
     verticalPadding: 8
     bounce: false
+    property string buttonIcon
     property bool leftmost: false
     property bool rightmost: false
     leftRadius: (toggled || leftmost) ? (height / 2) : Appearance.rounding.unsharpenmore
     rightRadius: (toggled || rightmost) ? (height / 2) : Appearance.rounding.unsharpenmore
     colBackground: Appearance.colors.colSecondaryContainer
-    contentItem: StyledText {
+    colBackgroundHover: Appearance.colors.colSecondaryContainerHover
-        color: parent.toggled ? Appearance.colors.colOnPrimary : Appearance.colors.colOnSecondaryContainer
+    colBackgroundActive: Appearance.colors.colSecondaryContainerActive
-        text: root.buttonText
+
+    contentItem: RowLayout {
+        spacing: 4
+
+        Loader {
+            Layout.alignment: Qt.AlignVCenter
+            active: root.buttonIcon && root.buttonIcon.length > 0
+            visible: active
+            sourceComponent: Item {
+                implicitWidth: materialSymbol.implicitWidth
+                MaterialSymbol {
+                    id: materialSymbol
+                    anchors.centerIn: parent
+                    text: root.buttonIcon
+                    iconSize: Appearance.font.pixelSize.larger
+                    color: root.toggled ? Appearance.colors.colOnPrimary : Appearance.colors.colOnSecondaryContainer
+                }
+            }
+        }
+
+        StyledText {
+            color: root.toggled ? Appearance.colors.colOnPrimary : Appearance.colors.colOnSecondaryContainer
+            text: root.buttonText
+        }
     }
 }

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

@@ -0,0 +1,15 @@
+import QtQuick
+import qs.services
+import qs.modules.common
+import qs.modules.common.widgets
+import qs.modules.common.functions
+
+Image {
+    asynchronous: true
+    retainWhileLoading: true
+    visible: opacity > 0
+    opacity: (status === Image.Ready) ? 1 : 0
+    Behavior on opacity {
+        animation: Appearance.animation.elementMoveEnter.numberAnimation.createObject(this)
+    }
+}

.config/quickshell/ii/modules/settings/About.qml

@@ -11,6 +11,7 @@ ContentPage {
     forceWidth: true
 
     ContentSection {
+        icon: "box"
         title: Translation.tr("Distro")
         
         RowLayout {
@@ -79,6 +80,7 @@ ContentPage {
 
     }
     ContentSection {
+        icon: "folder_managed"
         title: Translation.tr("Dotfiles")
 
         RowLayout {

.config/quickshell/ii/modules/settings/AdvancedConfig.qml

@@ -8,6 +8,7 @@ ContentPage {
     forceWidth: true
 
     ContentSection {
+        icon: "colors"
         title: Translation.tr("Color generation")
 
         ConfigRow {

.config/quickshell/ii/modules/settings/BarConfig.qml

@@ -0,0 +1,286 @@
+import QtQuick
+import QtQuick.Layouts
+import qs
+import qs.services
+import qs.modules.common
+import qs.modules.common.widgets
+
+ContentPage {
+    forceWidth: true
+    
+    ContentSection {
+        icon: "spoke"
+        title: Translation.tr("Positioning")
+
+        ConfigRow {
+            ContentSubsection {
+                title: Translation.tr("Bar position")
+                Layout.fillWidth: true
+
+                ConfigSelectionArray {
+                    currentValue: (Config.options.bar.bottom ? 1 : 0) | (Config.options.bar.vertical ? 2 : 0)
+                    onSelected: newValue => {
+                        Config.options.bar.bottom = (newValue & 1) !== 0;
+                        Config.options.bar.vertical = (newValue & 2) !== 0;
+                    }
+                    options: [
+                        {
+                            displayName: Translation.tr("Top"),
+                            icon: "arrow_upward",
+                            value: 0 // bottom: false, vertical: false
+                        },
+                        {
+                            displayName: Translation.tr("Left"),
+                            icon: "arrow_back",
+                            value: 2 // bottom: false, vertical: true
+                        },
+                        {
+                            displayName: Translation.tr("Bottom"),
+                            icon: "arrow_downward",
+                            value: 1 // bottom: true, vertical: false
+                        },
+                        {
+                            displayName: Translation.tr("Right"),
+                            icon: "arrow_forward",
+                            value: 3 // bottom: true, vertical: true
+                        }
+                    ]
+                }
+            }
+            ContentSubsection {
+                title: Translation.tr("Automatically hide")
+                Layout.fillWidth: false
+
+                ConfigSelectionArray {
+                    currentValue: Config.options.bar.autoHide.enable
+                    onSelected: newValue => {
+                        Config.options.bar.autoHide.enable = newValue; // Update local copy
+                    }
+                    options: [
+                        {
+                            displayName: Translation.tr("No"),
+                            icon: "close",
+                            value: false
+                        },
+                        {
+                            displayName: Translation.tr("Yes"),
+                            icon: "check",
+                            value: true
+                        }
+                    ]
+                }
+            }
+        }
+
+        ConfigRow {
+            
+            ContentSubsection {
+                title: Translation.tr("Corner style")
+                Layout.fillWidth: true
+
+                ConfigSelectionArray {
+                    currentValue: Config.options.bar.cornerStyle
+                    onSelected: newValue => {
+                        Config.options.bar.cornerStyle = newValue; // Update local copy
+                    }
+                    options: [
+                        {
+                            displayName: Translation.tr("Hug"),
+                            icon: "line_curve",
+                            value: 0
+                        },
+                        {
+                            displayName: Translation.tr("Float"),
+                            icon: "page_header",
+                            value: 1
+                        },
+                        {
+                            displayName: Translation.tr("Rect"),
+                            icon: "toolbar",
+                            value: 2
+                        }
+                    ]
+                }
+            }
+
+            ContentSubsection {
+                title: Translation.tr("Group style")
+                Layout.fillWidth: false
+
+                ConfigSelectionArray {
+                    currentValue: Config.options.bar.borderless
+                    onSelected: newValue => {
+                        Config.options.bar.borderless = newValue; // Update local copy
+                    }
+                    options: [
+                        {
+                            displayName: Translation.tr("Pills"),
+                            icon: "location_chip",
+                            value: false
+                        },
+                        {
+                            displayName: Translation.tr("Line-separated"),
+                            icon: "split_scene",
+                            value: true
+                        }
+                    ]
+                }
+            }
+        }
+    }
+
+    ContentSection {
+        icon: "workspaces"
+        title: Translation.tr("Workspaces")
+
+        ConfigSwitch {
+            buttonIcon: "counter_1"
+            text: Translation.tr('Always show numbers')
+            checked: Config.options.bar.workspaces.alwaysShowNumbers
+            onCheckedChanged: {
+                Config.options.bar.workspaces.alwaysShowNumbers = checked;
+            }
+        }
+
+        ConfigSwitch {
+            buttonIcon: "award_star"
+            text: Translation.tr('Show app icons')
+            checked: Config.options.bar.workspaces.showAppIcons
+            onCheckedChanged: {
+                Config.options.bar.workspaces.showAppIcons = checked;
+            }
+        }
+
+        ConfigSwitch {
+            buttonIcon: "colors"
+            text: Translation.tr('Tint app icons')
+            checked: Config.options.bar.workspaces.monochromeIcons
+            onCheckedChanged: {
+                Config.options.bar.workspaces.monochromeIcons = checked;
+            }
+        }
+
+        ConfigSpinBox {
+            icon: "view_column"
+            text: Translation.tr("Workspaces shown")
+            value: Config.options.bar.workspaces.shown
+            from: 1
+            to: 30
+            stepSize: 1
+            onValueChanged: {
+                Config.options.bar.workspaces.shown = value;
+            }
+        }
+
+        ConfigSpinBox {
+            icon: "touch_long"
+            text: Translation.tr("Number show delay when pressing Super (ms)")
+            value: Config.options.bar.workspaces.showNumberDelay
+            from: 0
+            to: 1000
+            stepSize: 50
+            onValueChanged: {
+                Config.options.bar.workspaces.showNumberDelay = value;
+            }
+        }
+    }
+
+    ContentSection {
+        icon: "widgets"
+        title: Translation.tr("Utility buttons")
+
+        ConfigRow {
+            uniform: true
+            ConfigSwitch {
+                buttonIcon: "content_cut"
+                text: Translation.tr("Screen snip")
+                checked: Config.options.bar.utilButtons.showScreenSnip
+                onCheckedChanged: {
+                    Config.options.bar.utilButtons.showScreenSnip = checked;
+                }
+            }
+            ConfigSwitch {
+                buttonIcon: "colorize"
+                text: Translation.tr("Color picker")
+                checked: Config.options.bar.utilButtons.showColorPicker
+                onCheckedChanged: {
+                    Config.options.bar.utilButtons.showColorPicker = checked;
+                }
+            }
+        }
+        ConfigRow {
+            uniform: true
+            ConfigSwitch {
+                buttonIcon: "keyboard"
+                text: Translation.tr("Keyboard toggle")
+                checked: Config.options.bar.utilButtons.showKeyboardToggle
+                onCheckedChanged: {
+                    Config.options.bar.utilButtons.showKeyboardToggle = checked;
+                }
+            }
+            ConfigSwitch {
+                buttonIcon: "mic"
+                text: Translation.tr("Mic toggle")
+                checked: Config.options.bar.utilButtons.showMicToggle
+                onCheckedChanged: {
+                    Config.options.bar.utilButtons.showMicToggle = checked;
+                }
+            }
+        }
+        ConfigRow {
+            uniform: true
+            ConfigSwitch {
+                buttonIcon: "dark_mode"
+                text: Translation.tr("Dark/Light toggle")
+                checked: Config.options.bar.utilButtons.showDarkModeToggle
+                onCheckedChanged: {
+                    Config.options.bar.utilButtons.showDarkModeToggle = checked;
+                }
+            }
+            ConfigSwitch {
+                buttonIcon: "speed"
+                text: Translation.tr("Performance Profile toggle")
+                checked: Config.options.bar.utilButtons.showPerformanceProfileToggle
+                onCheckedChanged: {
+                    Config.options.bar.utilButtons.showPerformanceProfileToggle = checked;
+                }
+            }
+        }
+    }
+
+    ContentSection {
+        icon: "shelf_auto_hide"
+        title: Translation.tr("Tray")
+
+        ConfigSwitch {
+            buttonIcon: "keep"
+            text: Translation.tr('Make icons pinned by default')
+            checked: Config.options.bar.tray.invertPinnedItems
+            onCheckedChanged: {
+                Config.options.bar.tray.invertPinnedItems = checked;
+            }
+        }
+        
+        ConfigSwitch {
+            buttonIcon: "colors"
+            text: Translation.tr('Tint icons')
+            checked: Config.options.bar.tray.monochromeIcons
+            onCheckedChanged: {
+                Config.options.bar.tray.monochromeIcons = checked;
+            }
+        }
+    }
+
+    ContentSection {
+        icon: "cloud"
+        title: Translation.tr("Weather")
+        ConfigSwitch {
+            buttonIcon: "check"
+            text: Translation.tr("Enable")
+            checked: Config.options.bar.weather.enable
+            onCheckedChanged: {
+                Config.options.bar.weather.enable = checked;
+            }
+        }
+    }
+}

.config/quickshell/ii/modules/settings/InterfaceConfig.qml

@@ -8,6 +8,7 @@ import qs.modules.common.widgets
 ContentPage {
     forceWidth: true
     ContentSection {
+        icon: "rule"
         title: Translation.tr("Policies")
 
         ConfigRow {
@@ -68,6 +69,7 @@ ContentPage {
     }
 
     ContentSection {
+        icon: "wallpaper"
         title: Translation.tr("Background")
 
         ConfigSwitch {
@@ -77,229 +79,51 @@ ContentPage {
                 Config.options.background.showClock = checked;
             }
         }
-    }
-
-    ContentSection {
-        title: Translation.tr("Bar")
-
-        ConfigRow {
-            ContentSubsection {
-                title: Translation.tr("Corner style")
-
-                ConfigSelectionArray {
-                    currentValue: Config.options.bar.cornerStyle
-                    onSelected: newValue => {
-                        Config.options.bar.cornerStyle = newValue; // Update local copy
-                    }
-                    options: [
-                        {
-                            displayName: Translation.tr("Hug"),
-                            value: 0
-                        },
-                        {
-                            displayName: Translation.tr("Float"),
-                            value: 1
-                        },
-                        {
-                            displayName: Translation.tr("Plain rectangle"),
-                            value: 2
-                        }
-                    ]
-                }
-            }
-
-            ContentSubsection {
-                title: Translation.tr("Bar layout")
-                ConfigSelectionArray {
-                    currentValue: Config.options.bar.vertical
-                    onSelected: newValue => {
-                        Config.options.bar.vertical = newValue;
-                    }
-                    options: [
-                        {
-                            displayName: Translation.tr("Horizontal"),
-                            value: false
-                        },
-                        {
-                            displayName: Translation.tr("Vertical"),
-                            value: true
-                        },
-                    ]
-                }
-            }
-        }
 
         ContentSubsection {
-            title: Translation.tr("Overall appearance")
+            title: Translation.tr("Wallpaper parallax")
-            ConfigRow {
-                uniform: true
-                ConfigSwitch {
-                    text: Translation.tr("Automatically hide")
-                    checked: Config.options.bar.autoHide.enable
-                    onCheckedChanged: {
-                        Config.options.bar.autoHide.enable = checked;
-                    }
-                }
-                ConfigSwitch {
-                    text: Translation.tr("Place at the bottom/right")
-                    checked: Config.options.bar.bottom
-                    onCheckedChanged: {
-                        Config.options.bar.bottom = checked;
-                    }
-                }
-            }
-            ConfigRow {
-                uniform: true
-                ConfigSwitch {
-                    text: Translation.tr('Borderless')
-                    checked: Config.options.bar.borderless
-                    onCheckedChanged: {
-                        Config.options.bar.borderless = checked;
-                    }
-                }
-                ConfigSwitch {
-                    text: Translation.tr('Show background')
-                    checked: Config.options.bar.showBackground
-                    onCheckedChanged: {
-                        Config.options.bar.showBackground = checked;
-                    }
-                    StyledToolTip {
-                        content: Translation.tr("Note: turning off can hurt readability")
-                    }
-                }
-            }
-        }
 
-        ContentSubsection {
-            title: Translation.tr("Buttons")
-            ConfigRow {
-                uniform: true
-                ConfigSwitch {
-                    text: Translation.tr("Screen snip")
-                    checked: Config.options.bar.utilButtons.showScreenSnip
-                    onCheckedChanged: {
-                        Config.options.bar.utilButtons.showScreenSnip = checked;
-                    }
-                }
-                ConfigSwitch {
-                    text: Translation.tr("Color picker")
-                    checked: Config.options.bar.utilButtons.showColorPicker
-                    onCheckedChanged: {
-                        Config.options.bar.utilButtons.showColorPicker = checked;
-                    }
-                }
-            }
-            ConfigRow {
-                uniform: true
-                ConfigSwitch {
-                    text: Translation.tr("Mic toggle")
-                    checked: Config.options.bar.utilButtons.showMicToggle
-                    onCheckedChanged: {
-                        Config.options.bar.utilButtons.showMicToggle = checked;
-                    }
-                }
-                ConfigSwitch {
-                    text: Translation.tr("Keyboard toggle")
-                    checked: Config.options.bar.utilButtons.showKeyboardToggle
-                    onCheckedChanged: {
-                        Config.options.bar.utilButtons.showKeyboardToggle = checked;
-                    }
-                }
-            }
-            ConfigRow {
-                uniform: true
-                ConfigSwitch {
-                    text: Translation.tr("Dark/Light toggle")
-                    checked: Config.options.bar.utilButtons.showDarkModeToggle
-                    onCheckedChanged: {
-                        Config.options.bar.utilButtons.showDarkModeToggle = checked;
-                    }
-                }
-                ConfigSwitch {
-                    text: Translation.tr("Performance Profile toggle")
-                    checked: Config.options.bar.utilButtons.showPerformanceProfileToggle
-                    onCheckedChanged: {
-                        Config.options.bar.utilButtons.showPerformanceProfileToggle = checked;
-                    }
-                }
-            }
-        }
-
-        ContentSubsection {
-            title: Translation.tr("Workspaces")
-            tooltip: Translation.tr("Tip: Hide icons and always show numbers for\nthe classic illogical-impulse experience")
-
-            ConfigRow {
-                uniform: true
-                ConfigSwitch {
-                    text: Translation.tr('Show app icons')
-                    checked: Config.options.bar.workspaces.showAppIcons
-                    onCheckedChanged: {
-                        Config.options.bar.workspaces.showAppIcons = checked;
-                    }
-                }
-                ConfigSwitch {
-                    text: Translation.tr('Tint app icons')
-                    checked: Config.options.bar.workspaces.monochromeIcons
-                    onCheckedChanged: {
-                        Config.options.bar.workspaces.monochromeIcons = checked;
-                    }
-                }
-            }
             ConfigSwitch {
-                text: Translation.tr('Always show numbers')
+                text: Translation.tr("Vertical")
-                checked: Config.options.bar.workspaces.alwaysShowNumbers
+                checked: Config.options.background.parallax.vertical
                 onCheckedChanged: {
-                    Config.options.bar.workspaces.alwaysShowNumbers = checked;
+                    Config.options.background.parallax.vertical = checked;
+                }
+            }
+
+            ConfigRow {
+                uniform: true
+                ConfigSwitch {
+                    text: Translation.tr("Depends on workspace")
+                    checked: Config.options.background.parallax.enableWorkspace
+                    onCheckedChanged: {
+                        Config.options.background.parallax.enableWorkspace = checked;
+                    }
+                }
+                ConfigSwitch {
+                    text: Translation.tr("Depends on sidebars")
+                    checked: Config.options.background.parallax.enableSidebar
+                    onCheckedChanged: {
+                        Config.options.background.parallax.enableSidebar = checked;
+                    }
                 }
             }
             ConfigSpinBox {
-                text: Translation.tr("Workspaces shown")
+                text: Translation.tr("Preferred wallpaper zoom (%)")
-                value: Config.options.bar.workspaces.shown
+                value: Config.options.background.parallax.workspaceZoom * 100
-                from: 1
+                from: 100
-                to: 30
+                to: 150
                 stepSize: 1
                 onValueChanged: {
-                    Config.options.bar.workspaces.shown = value;
+                    console.log(value/100)
-                }
+                    Config.options.background.parallax.workspaceZoom = value / 100;
-            }
-            ConfigSpinBox {
-                text: Translation.tr("Number show delay when pressing Super (ms)")
-                value: Config.options.bar.workspaces.showNumberDelay
-                from: 0
-                to: 1000
-                stepSize: 50
-                onValueChanged: {
-                    Config.options.bar.workspaces.showNumberDelay = value;
-                }
-            }
-        }
-
-        ContentSubsection {
-            title: Translation.tr("Tray")
-
-            ConfigSwitch {
-                text: Translation.tr('Tint icons')
-                checked: Config.options.bar.tray.monochromeIcons
-                onCheckedChanged: {
-                    Config.options.bar.tray.monochromeIcons = checked;
-                }
-            }
-        }
-
-        ContentSubsection {
-            title: Translation.tr("Weather")
-            ConfigSwitch {
-                text: Translation.tr("Enable")
-                checked: Config.options.bar.weather.enable
-                onCheckedChanged: {
-                    Config.options.bar.weather.enable = checked;
                 }
             }
         }
     }
 
     ContentSection {
+        icon: "battery_android_full"
         title: Translation.tr("Battery")
 
         ConfigRow {
@@ -351,6 +175,7 @@ ContentPage {
     }
 
     ContentSection {
+        icon: "call_to_action"
         title: Translation.tr("Dock")
 
         ConfigSwitch {
@@ -388,7 +213,9 @@ ContentPage {
     }
 
     ContentSection {
+        icon: "side_navigation"
         title: Translation.tr("Sidebars")
+
         ConfigSwitch {
             text: Translation.tr('Keep right sidebar loaded')
             checked: Config.options.sidebar.keepRightSidebarLoaded
@@ -486,7 +313,9 @@ ContentPage {
     }
 
     ContentSection {
+        icon: "voting_chip"
         title: Translation.tr("On-screen display")
+
         ConfigSpinBox {
             text: Translation.tr("Timeout (ms)")
             value: Config.options.osd.timeout
@@ -500,7 +329,9 @@ ContentPage {
     }
 
     ContentSection {
+        icon: "overview_key"
         title: Translation.tr("Overview")
+
         ConfigSwitch {
             text: Translation.tr("Enable")
             checked: Config.options.overview.enable
@@ -544,6 +375,7 @@ ContentPage {
     }
 
     ContentSection {
+        icon: "screenshot_frame_2"
         title: Translation.tr("Screenshot tool")
 
         ConfigSwitch {
@@ -559,6 +391,7 @@ ContentPage {
     }
 
     ContentSection {
+        icon: "language"
         title: Translation.tr("Language")
 
         ContentSubsection {

.config/quickshell/ii/modules/settings/QuickConfig.qml

@@ -58,6 +58,7 @@ ContentPage {
 
     // Wallpaper selection
     ContentSection {
+        icon: "format_paint"
         title: Translation.tr("Wallpaper & Colors")
         Layout.fillWidth: true
 
@@ -65,13 +66,14 @@ ContentPage {
             Layout.fillWidth: true
 
             Item {
-                implicitWidth: 300
+                implicitWidth: 340
                 implicitHeight: 200
-                Image {
+                
+                StyledImage {
                     id: wallpaperPreview
                     anchors.fill: parent
-                    sourceSize.width: 300
+                    sourceSize.width: parent.implicitWidth
-                    sourceSize.height: 200
+                    sourceSize.height: parent.implicitHeight
                     fillMode: Image.PreserveAspectCrop
                     source: Config.options.background.wallpaperPath
                     layer.enabled: true
@@ -212,6 +214,7 @@ ContentPage {
     }
 
     ContentSection {
+        icon: "screenshot_monitor"
         title: Translation.tr("Bar & screen")
 
         ConfigRow {
@@ -226,18 +229,22 @@ ContentPage {
                     options: [
                         {
                             displayName: Translation.tr("Top"),
+                            icon: "arrow_upward",
                             value: 0 // bottom: false, vertical: false
                         },
                         {
                             displayName: Translation.tr("Left"),
+                            icon: "arrow_back",
                             value: 2 // bottom: false, vertical: true
                         },
                         {
                             displayName: Translation.tr("Bottom"),
+                            icon: "arrow_downward",
                             value: 1 // bottom: true, vertical: false
                         },
                         {
                             displayName: Translation.tr("Right"),
+                            icon: "arrow_forward",
                             value: 3 // bottom: true, vertical: true
                         }
                     ]
@@ -254,14 +261,17 @@ ContentPage {
                     options: [
                         {
                             displayName: Translation.tr("Hug"),
+                            icon: "line_curve",
                             value: 0
                         },
                         {
                             displayName: Translation.tr("Float"),
+                            icon: "page_header",
                             value: 1
                         },
                         {
-                            displayName: Translation.tr("Plain rectangle"),
+                            displayName: Translation.tr("Rect"),
+                            icon: "toolbar",
                             value: 2
                         }
                     ]
@@ -281,14 +291,17 @@ ContentPage {
                     options: [
                         {
                             displayName: Translation.tr("No"),
+                            icon: "close",
                             value: 0
                         },
                         {
                             displayName: Translation.tr("Yes"),
+                            icon: "check",
                             value: 1
                         },
                         {
                             displayName: Translation.tr("When not fullscreen"),
+                            icon: "fullscreen_exit",
                             value: 2
                         }
                     ]

.config/quickshell/ii/modules/settings/ServicesConfig.qml

@@ -11,6 +11,7 @@ ContentPage {
     forceWidth: true
 
     ContentSection {
+        icon: "volume_up"
         title: Translation.tr("Audio")
 
         ConfigSwitch {
@@ -47,8 +48,11 @@ ContentPage {
             }
         }
     }
+
     ContentSection {
+        icon: "neurology"
         title: Translation.tr("AI")
+
         MaterialTextArea {
             Layout.fillWidth: true
             placeholderText: Translation.tr("System prompt")
@@ -63,6 +67,7 @@ ContentPage {
     }
 
     ContentSection {
+        icon: "battery_android_full"
         title: Translation.tr("Battery")
 
         ConfigRow {
@@ -114,7 +119,9 @@ ContentPage {
     }
 
     ContentSection {
+        icon: "cell_tower"
         title: Translation.tr("Networking")
+
         MaterialTextArea {
             Layout.fillWidth: true
             placeholderText: Translation.tr("User agent (for services that require it)")
@@ -127,7 +134,9 @@ ContentPage {
     }
 
     ContentSection {
+        icon: "memory"
         title: Translation.tr("Resources")
+
         ConfigSpinBox {
             text: Translation.tr("Polling interval (ms)")
             value: Config.options.resources.updateInterval
@@ -141,6 +150,7 @@ ContentPage {
     }
 
     ContentSection {
+        icon: "search"
         title: Translation.tr("Search")
 
         ConfigSwitch {
@@ -158,7 +168,6 @@ ContentPage {
             title: Translation.tr("Prefixes")
             ConfigRow {
                 uniform: true
-
                 MaterialTextArea {
                     Layout.fillWidth: true
                     placeholderText: Translation.tr("Action")
@@ -187,6 +196,37 @@ ContentPage {
                     }
                 }
             }
+
+            ConfigRow {
+                uniform: true
+                MaterialTextArea {
+                    Layout.fillWidth: true
+                    placeholderText: Translation.tr("Math")
+                    text: Config.options.search.prefix.math
+                    wrapMode: TextEdit.Wrap
+                    onTextChanged: {
+                        Config.options.search.prefix.math = text;
+                    }
+                }
+                MaterialTextArea {
+                    Layout.fillWidth: true
+                    placeholderText: Translation.tr("Shell command")
+                    text: Config.options.search.prefix.shellCommand
+                    wrapMode: TextEdit.Wrap
+                    onTextChanged: {
+                        Config.options.search.prefix.shellCommand = text;
+                    }
+                }
+                MaterialTextArea {
+                    Layout.fillWidth: true
+                    placeholderText: Translation.tr("Web search")
+                    text: Config.options.search.prefix.webSearch
+                    wrapMode: TextEdit.Wrap
+                    onTextChanged: {
+                        Config.options.search.prefix.webSearch = text;
+                    }
+                }
+            }
         }
         ContentSubsection {
             title: Translation.tr("Web search")
@@ -203,6 +243,7 @@ ContentPage {
     }
 
     ContentSection {
+        icon: "nest_clock_farsight_analog"
         title: Translation.tr("Time")
 
         ContentSubsection {

.config/quickshell/ii/settings.qml

@@ -28,6 +28,12 @@ ApplicationWindow {
             icon: "instant_mix",
             component: "modules/settings/QuickConfig.qml"
         },
+        {
+            name: Translation.tr("Bar"),
+            icon: "toast",
+            iconRotation: 180,
+            component: "modules/settings/BarConfig.qml"
+        },
         {
             name: Translation.tr("Interface"),
             icon: "cards",
@@ -181,6 +187,7 @@ ApplicationWindow {
                                 onClicked: root.currentPage = index;
                                 expanded: navRail.expanded
                                 buttonIcon: modelData.icon
+                                buttonIconRotation: modelData.iconRotation || 0
                                 buttonText: modelData.name
                                 showToggledHighlight: false
                             }