settings: more icons

.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 {
-        id: labelWidget
-        Layout.fillWidth: true
-        text: root.text
-        font.pixelSize: Appearance.font.pixelSize.small
-        color: Appearance.colors.colOnSecondaryContainer
+    RowLayout {
+        OptionalMaterialSymbol {
+            icon: root.icon
+        }
+        StyledText {
+            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
-    StyledText {
-        text: root.title
-        font.pixelSize: Appearance.font.pixelSize.larger
-        font.weight: Font.Medium
+    spacing: 6
+
+    RowLayout {
+        spacing: 6
+        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 {
-        color: parent.toggled ? Appearance.colors.colOnPrimary : Appearance.colors.colOnSecondaryContainer
-        text: root.buttonText
+    colBackgroundHover: Appearance.colors.colSecondaryContainerHover
+    colBackgroundActive: Appearance.colors.colSecondaryContainerActive
+
+    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)
+    }
+}