controlcenter: refactoring into components

components/controls/CollapsibleSection.qml

@@ -0,0 +1,85 @@
+import ".."
+import qs.components
+import qs.components.effects
+import qs.services
+import qs.config
+import QtQuick
+import QtQuick.Layouts
+
+ColumnLayout {
+    id: root
+
+    required property string title
+    property string description: ""
+    property bool expanded: false
+    
+    signal toggleRequested
+
+    spacing: Appearance.spacing.small / 2
+    Layout.fillWidth: true
+
+    Item {
+        id: sectionHeaderItem
+        Layout.fillWidth: true
+        Layout.preferredHeight: sectionHeader.implicitHeight
+
+        ColumnLayout {
+            id: sectionHeader
+            anchors.left: parent.left
+            anchors.right: parent.right
+            spacing: Appearance.spacing.small
+
+            RowLayout {
+                Layout.fillWidth: true
+                spacing: Appearance.spacing.small
+
+                StyledText {
+                    Layout.topMargin: Appearance.spacing.large
+                    text: root.title
+                    font.pointSize: Appearance.font.size.larger
+                    font.weight: 500
+                }
+
+                Item {
+                    Layout.fillWidth: true
+                }
+
+                MaterialIcon {
+                    text: "expand_more"
+                    rotation: root.expanded ? 180 : 0
+                    color: Colours.palette.m3onSurface
+                    Behavior on rotation {
+                        Anim {}
+                    }
+                }
+            }
+
+            StateLayer {
+                anchors.fill: parent
+                anchors.leftMargin: -Appearance.padding.normal
+                anchors.rightMargin: -Appearance.padding.normal
+                function onClicked(): void {
+                    root.toggleRequested();
+                    root.expanded = !root.expanded;
+                }
+            }
+
+            StyledText {
+                visible: root.expanded && root.description !== ""
+                text: root.description
+                color: Colours.palette.m3outline
+                Layout.fillWidth: true
+            }
+        }
+    }
+
+    default property alias content: contentColumn.data
+
+    ColumnLayout {
+        id: contentColumn
+        Layout.fillWidth: true
+        visible: root.expanded
+        spacing: Appearance.spacing.small / 2
+    }
+}
+

components/controls/SpinBoxRow.qml

@@ -0,0 +1,51 @@
+import ".."
+import qs.components
+import qs.components.effects
+import qs.services
+import qs.config
+import QtQuick
+import QtQuick.Layouts
+
+StyledRect {
+    id: root
+
+    required property string label
+    required property real value
+    required property real min
+    required property real max
+    property var onValueModified: function(value) {}
+
+    Layout.fillWidth: true
+    implicitHeight: row.implicitHeight + Appearance.padding.large * 2
+    radius: Appearance.rounding.normal
+    color: Colours.tPalette.m3surfaceContainer
+
+    Behavior on implicitHeight {
+        Anim {}
+    }
+
+    RowLayout {
+        id: row
+
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.margins: Appearance.padding.large
+        spacing: Appearance.spacing.normal
+
+        StyledText {
+            Layout.fillWidth: true
+            text: root.label
+        }
+
+        CustomSpinBox {
+            min: root.min
+            max: root.max
+            value: root.value
+            onValueModified: value => {
+                root.onValueModified(value);
+            }
+        }
+    }
+}
+

components/controls/SwitchRow.qml

@@ -0,0 +1,47 @@
+import ".."
+import qs.components
+import qs.components.effects
+import qs.services
+import qs.config
+import QtQuick
+import QtQuick.Layouts
+
+StyledRect {
+    id: root
+
+    required property string label
+    required property bool checked
+    property var onToggled: function(checked) {}
+
+    Layout.fillWidth: true
+    implicitHeight: row.implicitHeight + Appearance.padding.large * 2
+    radius: Appearance.rounding.normal
+    color: Colours.tPalette.m3surfaceContainer
+
+    Behavior on implicitHeight {
+        Anim {}
+    }
+
+    RowLayout {
+        id: row
+
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.margins: Appearance.padding.large
+        spacing: Appearance.spacing.normal
+
+        StyledText {
+            Layout.fillWidth: true
+            text: root.label
+        }
+
+        StyledSwitch {
+            checked: root.checked
+            onToggled: {
+                root.onToggled(checked);
+            }
+        }
+    }
+}
+

components/controls/ToggleButton.qml

@@ -0,0 +1,82 @@
+import ".."
+import qs.components
+import qs.components.effects
+import qs.services
+import qs.config
+import QtQuick
+import QtQuick.Layouts
+
+StyledRect {
+    id: root
+
+    required property bool toggled
+    property string icon
+    property string label
+    property string accent: "Secondary"
+
+    signal clicked
+
+    Layout.preferredWidth: implicitWidth + (toggleStateLayer.pressed ? Appearance.padding.normal * 2 : toggled ? Appearance.padding.small * 2 : 0)
+    implicitWidth: toggleBtnInner.implicitWidth + Appearance.padding.large * 2
+    implicitHeight: toggleBtnIcon.implicitHeight + Appearance.padding.normal * 2
+
+    radius: toggled || toggleStateLayer.pressed ? Appearance.rounding.small : Math.min(width, height) / 2 * Math.min(1, Appearance.rounding.scale)
+    color: toggled ? Colours.palette[`m3${accent.toLowerCase()}`] : Colours.palette[`m3${accent.toLowerCase()}Container`]
+
+    StateLayer {
+        id: toggleStateLayer
+
+        color: root.toggled ? Colours.palette[`m3on${root.accent}`] : Colours.palette[`m3on${root.accent}Container`]
+
+        function onClicked(): void {
+            root.clicked();
+        }
+    }
+
+    RowLayout {
+        id: toggleBtnInner
+
+        anchors.centerIn: parent
+        spacing: Appearance.spacing.normal
+
+        MaterialIcon {
+            id: toggleBtnIcon
+
+            visible: !!text
+            fill: root.toggled ? 1 : 0
+            text: root.icon
+            color: root.toggled ? Colours.palette[`m3on${root.accent}`] : Colours.palette[`m3on${root.accent}Container`]
+            font.pointSize: Appearance.font.size.large
+
+            Behavior on fill {
+                Anim {}
+            }
+        }
+
+        Loader {
+            asynchronous: true
+            active: !!root.label
+            visible: active
+
+            sourceComponent: StyledText {
+                text: root.label
+                color: root.toggled ? Colours.palette[`m3on${root.accent}`] : Colours.palette[`m3on${root.accent}Container`]
+            }
+        }
+    }
+
+    Behavior on radius {
+        Anim {
+            duration: Appearance.anim.durations.expressiveFastSpatial
+            easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial
+        }
+    }
+
+    Behavior on Layout.preferredWidth {
+        Anim {
+            duration: Appearance.anim.durations.expressiveFastSpatial
+            easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial
+        }
+    }
+}
+

modules/controlcenter/ethernet/EthernetList.qml

@@ -34,7 +34,7 @@ ColumnLayout {
             icon: "settings"
             accent: "Primary"
 
-            function onClicked(): void {
+            onClicked: {
                 if (root.session.ethernet.active)
                     root.session.ethernet.active = null;
                 else {
@@ -166,81 +166,6 @@ ColumnLayout {
             implicitHeight: rowLayout.implicitHeight + Appearance.padding.normal * 2
         }
     }
-
-    component ToggleButton: StyledRect {
-        id: toggleBtn
-
-        required property bool toggled
-        property string icon
-        property string label
-        property string accent: "Secondary"
-
-        function onClicked(): void {
-        }
-
-        Layout.preferredWidth: implicitWidth + (toggleStateLayer.pressed ? Appearance.padding.normal * 2 : toggled ? Appearance.padding.small * 2 : 0)
-        implicitWidth: toggleBtnInner.implicitWidth + Appearance.padding.large * 2
-        implicitHeight: toggleBtnIcon.implicitHeight + Appearance.padding.normal * 2
-
-        radius: toggled || toggleStateLayer.pressed ? Appearance.rounding.small : Math.min(width, height) / 2 * Math.min(1, Appearance.rounding.scale)
-        color: toggled ? Colours.palette[`m3${accent.toLowerCase()}`] : Colours.palette[`m3${accent.toLowerCase()}Container`]
-
-        StateLayer {
-            id: toggleStateLayer
-
-            color: toggleBtn.toggled ? Colours.palette[`m3on${toggleBtn.accent}`] : Colours.palette[`m3on${toggleBtn.accent}Container`]
-
-            function onClicked(): void {
-                toggleBtn.onClicked();
-            }
-        }
-
-        RowLayout {
-            id: toggleBtnInner
-
-            anchors.centerIn: parent
-            spacing: Appearance.spacing.normal
-
-            MaterialIcon {
-                id: toggleBtnIcon
-
-                visible: !!text
-                fill: toggleBtn.toggled ? 1 : 0
-                text: toggleBtn.icon
-                color: toggleBtn.toggled ? Colours.palette[`m3on${toggleBtn.accent}`] : Colours.palette[`m3on${toggleBtn.accent}Container`]
-                font.pointSize: Appearance.font.size.large
-
-                Behavior on fill {
-                    Anim {}
-                }
-            }
-
-            Loader {
-                asynchronous: true
-                active: !!toggleBtn.label
-                visible: active
-
-                sourceComponent: StyledText {
-                    text: toggleBtn.label
-                    color: toggleBtn.toggled ? Colours.palette[`m3on${toggleBtn.accent}`] : Colours.palette[`m3on${toggleBtn.accent}Container`]
-                }
-            }
-        }
-
-        Behavior on radius {
-            Anim {
-                duration: Appearance.anim.durations.expressiveFastSpatial
-                easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial
-            }
-        }
-
-        Behavior on Layout.preferredWidth {
-            Anim {
-                duration: Appearance.anim.durations.expressiveFastSpatial
-                easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial
-            }
-        }
-    }
 }
 
 

modules/controlcenter/network/NetworkList.qml

@@ -34,7 +34,7 @@ ColumnLayout {
             icon: "wifi"
             accent: "Tertiary"
 
-            function onClicked(): void {
+            onClicked: {
                 Network.toggleWifi();
             }
         }
@@ -44,7 +44,7 @@ ColumnLayout {
             icon: "wifi_find"
             accent: "Secondary"
 
-            function onClicked(): void {
+            onClicked: {
                 Network.rescanWifi();
             }
         }
@@ -54,7 +54,7 @@ ColumnLayout {
             icon: "settings"
             accent: "Primary"
 
-            function onClicked(): void {
+            onClicked: {
                 if (root.session.network.active)
                     root.session.network.active = null;
                 else {
@@ -224,79 +224,4 @@ ColumnLayout {
             implicitHeight: rowLayout.implicitHeight + Appearance.padding.normal * 2
         }
     }
-
-    component ToggleButton: StyledRect {
-        id: toggleBtn
-
-        required property bool toggled
-        property string icon
-        property string label
-        property string accent: "Secondary"
-
-        function onClicked(): void {
-        }
-
-        Layout.preferredWidth: implicitWidth + (toggleStateLayer.pressed ? Appearance.padding.normal * 2 : toggled ? Appearance.padding.small * 2 : 0)
-        implicitWidth: toggleBtnInner.implicitWidth + Appearance.padding.large * 2
-        implicitHeight: toggleBtnIcon.implicitHeight + Appearance.padding.normal * 2
-
-        radius: toggled || toggleStateLayer.pressed ? Appearance.rounding.small : Math.min(width, height) / 2 * Math.min(1, Appearance.rounding.scale)
-        color: toggled ? Colours.palette[`m3${accent.toLowerCase()}`] : Colours.palette[`m3${accent.toLowerCase()}Container`]
-
-        StateLayer {
-            id: toggleStateLayer
-
-            color: toggleBtn.toggled ? Colours.palette[`m3on${toggleBtn.accent}`] : Colours.palette[`m3on${toggleBtn.accent}Container`]
-
-            function onClicked(): void {
-                toggleBtn.onClicked();
-            }
-        }
-
-        RowLayout {
-            id: toggleBtnInner
-
-            anchors.centerIn: parent
-            spacing: Appearance.spacing.normal
-
-            MaterialIcon {
-                id: toggleBtnIcon
-
-                visible: !!text
-                fill: toggleBtn.toggled ? 1 : 0
-                text: toggleBtn.icon
-                color: toggleBtn.toggled ? Colours.palette[`m3on${toggleBtn.accent}`] : Colours.palette[`m3on${toggleBtn.accent}Container`]
-                font.pointSize: Appearance.font.size.large
-
-                Behavior on fill {
-                    Anim {}
-                }
-            }
-
-            Loader {
-                asynchronous: true
-                active: !!toggleBtn.label
-                visible: active
-
-                sourceComponent: StyledText {
-                    text: toggleBtn.label
-                    color: toggleBtn.toggled ? Colours.palette[`m3on${toggleBtn.accent}`] : Colours.palette[`m3on${toggleBtn.accent}Container`]
-                }
-            }
-        }
-
-        Behavior on radius {
-            Anim {
-                duration: Appearance.anim.durations.expressiveFastSpatial
-                easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial
-            }
-        }
-
-        Behavior on Layout.preferredWidth {
-            Anim {
-                duration: Appearance.anim.durations.expressiveFastSpatial
-                easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial
-            }
-        }
-    }
 }

modules/controlcenter/taskbar/TaskbarPane.qml

@@ -239,73 +239,12 @@ RowLayout {
                 }
             }
 
-            Item {
+            CollapsibleSection {
                 id: clockSection
-                Layout.fillWidth: true
+                title: qsTr("Clock")
-                Layout.preferredHeight: clockSectionHeader.implicitHeight
+                description: qsTr("Clock display settings")
-                property bool expanded: false
+                onToggleRequested: {
-
-                ColumnLayout {
-                    id: clockSectionHeader
-                    anchors.left: parent.left
-                    anchors.right: parent.right
-                    spacing: Appearance.spacing.small
-
-                    RowLayout {
-                        Layout.fillWidth: true
-                        spacing: Appearance.spacing.small
-
-                        StyledText {
-                            Layout.topMargin: Appearance.spacing.large
-                            text: qsTr("Clock")
-                            font.pointSize: Appearance.font.size.larger
-                            font.weight: 500
-                        }
-
-                        Item {
-                            Layout.fillWidth: true
-                        }
-
-                        MaterialIcon {
-                            text: "expand_more"
-                            rotation: clockSection.expanded ? 180 : 0
-                            color: Colours.palette.m3onSurface
-                            Behavior on rotation {
-                                Anim {}
-                            }
-                        }
-                    }
-
-                    StateLayer {
-                        anchors.fill: parent
-                        anchors.leftMargin: -Appearance.padding.normal
-                        anchors.rightMargin: -Appearance.padding.normal
-                        function onClicked(): void {
-                            const wasExpanded = clockSection.expanded;
                     root.collapseAllSections(clockSection);
-                            clockSection.expanded = !wasExpanded;
-                        }
-                    }
-
-                    StyledText {
-                        visible: clockSection.expanded
-                        text: qsTr("Clock display settings")
-                        color: Colours.palette.m3outline
-                        Layout.fillWidth: true
-                    }
-                }
-            }
-
-            StyledRect {
-                Layout.fillWidth: true
-                visible: clockSection.expanded
-                implicitHeight: clockSection.expanded ? clockRow.implicitHeight + Appearance.padding.large * 2 : 0
-
-                radius: Appearance.rounding.normal
-                color: Colours.tPalette.m3surfaceContainer
-
-                Behavior on implicitHeight {
-                    Anim {}
                 }
 
                 RowLayout {
@@ -333,152 +272,33 @@ RowLayout {
                 }
             }
 
-            Item {
+            CollapsibleSection {
                 id: barBehaviorSection
-                Layout.fillWidth: true
+                title: qsTr("Bar Behavior")
-                Layout.preferredHeight: barBehaviorSectionHeader.implicitHeight
+                onToggleRequested: {
-                property bool expanded: false
-
-                ColumnLayout {
-                    id: barBehaviorSectionHeader
-                    anchors.left: parent.left
-                    anchors.right: parent.right
-                    spacing: Appearance.spacing.small
-
-                    RowLayout {
-                        Layout.fillWidth: true
-                        spacing: Appearance.spacing.small
-
-                        StyledText {
-                            Layout.topMargin: Appearance.spacing.large
-                            text: qsTr("Bar Behavior")
-                            font.pointSize: Appearance.font.size.larger
-                            font.weight: 500
-                        }
-
-                        Item {
-                            Layout.fillWidth: true
-                        }
-
-                        MaterialIcon {
-                            text: "expand_more"
-                            rotation: barBehaviorSection.expanded ? 180 : 0
-                            color: Colours.palette.m3onSurface
-                            Behavior on rotation {
-                                Anim {}
-                            }
-                        }
-                    }
-
-                    StateLayer {
-                        anchors.fill: parent
-                        anchors.leftMargin: -Appearance.padding.normal
-                        anchors.rightMargin: -Appearance.padding.normal
-                        function onClicked(): void {
-                            const wasExpanded = barBehaviorSection.expanded;
                     root.collapseAllSections(barBehaviorSection);
-                            barBehaviorSection.expanded = !wasExpanded;
-                        }
-                    }
-                }
                 }
 
-            StyledRect {
+                SwitchRow {
-                visible: barBehaviorSection.expanded
+                    label: qsTr("Persistent")
-                Layout.fillWidth: true
-                Layout.topMargin: Appearance.spacing.small / 2
-                implicitHeight: barBehaviorSection.expanded ? persistentRow.implicitHeight + Appearance.padding.large * 2 : 0
-                radius: Appearance.rounding.normal
-                color: Colours.tPalette.m3surfaceContainer
-
-                Behavior on implicitHeight {
-                    Anim {}
-                }
-
-                RowLayout {
-                    id: persistentRow
-                    anchors.left: parent.left
-                    anchors.right: parent.right
-                    anchors.verticalCenter: parent.verticalCenter
-                    anchors.margins: Appearance.padding.large
-                    spacing: Appearance.spacing.normal
-
-                    StyledText {
-                        Layout.fillWidth: true
-                        text: qsTr("Persistent")
-                    }
-
-                    StyledSwitch {
                     checked: root.persistent
-                        onToggled: {
+                    onToggled: checked => {
                         root.persistent = checked;
                         root.saveConfig();
                     }
                 }
-                }
-            }
 
-            StyledRect {
+                SwitchRow {
-                visible: barBehaviorSection.expanded
+                    label: qsTr("Show on hover")
-                Layout.fillWidth: true
-                Layout.topMargin: Appearance.spacing.small / 2
-                implicitHeight: barBehaviorSection.expanded ? showOnHoverRow.implicitHeight + Appearance.padding.large * 2 : 0
-                radius: Appearance.rounding.normal
-                color: Colours.tPalette.m3surfaceContainer
-
-                Behavior on implicitHeight {
-                    Anim {}
-                }
-
-                RowLayout {
-                    id: showOnHoverRow
-                    anchors.left: parent.left
-                    anchors.right: parent.right
-                    anchors.verticalCenter: parent.verticalCenter
-                    anchors.margins: Appearance.padding.large
-                    spacing: Appearance.spacing.normal
-
-                    StyledText {
-                        Layout.fillWidth: true
-                        text: qsTr("Show on hover")
-                    }
-
-                    StyledSwitch {
                     checked: root.showOnHover
-                        onToggled: {
+                    onToggled: checked => {
                         root.showOnHover = checked;
                         root.saveConfig();
                     }
                 }
-                }
-            }
 
-            StyledRect {
+                SpinBoxRow {
-                visible: barBehaviorSection.expanded
+                    label: qsTr("Drag threshold")
-                Layout.fillWidth: true
-                Layout.topMargin: Appearance.spacing.small / 2
-                implicitHeight: barBehaviorSection.expanded ? dragThresholdRow.implicitHeight + Appearance.padding.large * 2 : 0
-                radius: Appearance.rounding.normal
-                color: Colours.tPalette.m3surfaceContainer
-
-                Behavior on implicitHeight {
-                    Anim {}
-                }
-
-                RowLayout {
-                    id: dragThresholdRow
-                    anchors.left: parent.left
-                    anchors.right: parent.right
-                    anchors.verticalCenter: parent.verticalCenter
-                    anchors.margins: Appearance.padding.large
-                    spacing: Appearance.spacing.normal
-
-                    StyledText {
-                        Layout.fillWidth: true
-                        text: qsTr("Drag threshold")
-                    }
-
-                    CustomSpinBox {
                     min: 0
                     max: 100
                     value: root.dragThreshold
@@ -488,513 +308,123 @@ RowLayout {
                     }
                 }
             }
-            }
 
-            Item {
+            CollapsibleSection {
                 id: statusIconsSection
-                Layout.fillWidth: true
+                title: qsTr("Status Icons")
-                Layout.preferredHeight: statusIconsSectionHeader.implicitHeight
+                onToggleRequested: {
-                property bool expanded: false
-
-                ColumnLayout {
-                    id: statusIconsSectionHeader
-                    anchors.left: parent.left
-                    anchors.right: parent.right
-                    spacing: Appearance.spacing.small
-
-                    RowLayout {
-                        Layout.fillWidth: true
-                        spacing: Appearance.spacing.small
-
-                        StyledText {
-                            Layout.topMargin: Appearance.spacing.large
-                            text: qsTr("Status Icons")
-                            font.pointSize: Appearance.font.size.larger
-                            font.weight: 500
-                        }
-
-                        Item {
-                            Layout.fillWidth: true
-                        }
-
-                        MaterialIcon {
-                            text: "expand_more"
-                            rotation: statusIconsSection.expanded ? 180 : 0
-                            color: Colours.palette.m3onSurface
-                            Behavior on rotation {
-                                Anim {}
-                            }
-                        }
-                    }
-
-                    StateLayer {
-                        anchors.fill: parent
-                        anchors.leftMargin: -Appearance.padding.normal
-                        anchors.rightMargin: -Appearance.padding.normal
-                        function onClicked(): void {
-                            const wasExpanded = statusIconsSection.expanded;
                     root.collapseAllSections(statusIconsSection);
-                            statusIconsSection.expanded = !wasExpanded;
-                        }
-                    }
-                }
                 }
 
-            StyledRect {
+                SwitchRow {
-                visible: statusIconsSection.expanded
+                    label: qsTr("Show audio")
-                Layout.fillWidth: true
-                Layout.topMargin: Appearance.spacing.small / 2
-                implicitHeight: statusIconsSection.expanded ? showAudioRow.implicitHeight + Appearance.padding.large * 2 : 0
-                radius: Appearance.rounding.normal
-                color: Colours.tPalette.m3surfaceContainer
-
-                Behavior on implicitHeight {
-                    Anim {}
-                }
-
-                RowLayout {
-                    id: showAudioRow
-                    anchors.left: parent.left
-                    anchors.right: parent.right
-                    anchors.verticalCenter: parent.verticalCenter
-                    anchors.margins: Appearance.padding.large
-                    spacing: Appearance.spacing.normal
-
-                    StyledText {
-                        Layout.fillWidth: true
-                        text: qsTr("Show audio")
-                    }
-
-                    StyledSwitch {
                     checked: root.showAudio
-                        onToggled: {
+                    onToggled: checked => {
                         root.showAudio = checked;
                         root.saveConfig();
                     }
                 }
-                }
-            }
 
-            StyledRect {
+                SwitchRow {
-                visible: statusIconsSection.expanded
+                    label: qsTr("Show microphone")
-                Layout.fillWidth: true
-                Layout.topMargin: Appearance.spacing.small / 2
-                implicitHeight: statusIconsSection.expanded ? showMicrophoneRow.implicitHeight + Appearance.padding.large * 2 : 0
-                radius: Appearance.rounding.normal
-                color: Colours.tPalette.m3surfaceContainer
-
-                Behavior on implicitHeight {
-                    Anim {}
-                }
-
-                RowLayout {
-                    id: showMicrophoneRow
-                    anchors.left: parent.left
-                    anchors.right: parent.right
-                    anchors.verticalCenter: parent.verticalCenter
-                    anchors.margins: Appearance.padding.large
-                    spacing: Appearance.spacing.normal
-
-                    StyledText {
-                        Layout.fillWidth: true
-                        text: qsTr("Show microphone")
-                    }
-
-                    StyledSwitch {
                     checked: root.showMicrophone
-                        onToggled: {
+                    onToggled: checked => {
                         root.showMicrophone = checked;
                         root.saveConfig();
                     }
                 }
-                }
-            }
 
-            StyledRect {
+                SwitchRow {
-                visible: statusIconsSection.expanded
+                    label: qsTr("Show keyboard layout")
-                Layout.fillWidth: true
-                Layout.topMargin: Appearance.spacing.small / 2
-                implicitHeight: statusIconsSection.expanded ? showKbLayoutRow.implicitHeight + Appearance.padding.large * 2 : 0
-                radius: Appearance.rounding.normal
-                color: Colours.tPalette.m3surfaceContainer
-
-                Behavior on implicitHeight {
-                    Anim {}
-                }
-
-                RowLayout {
-                    id: showKbLayoutRow
-                    anchors.left: parent.left
-                    anchors.right: parent.right
-                    anchors.verticalCenter: parent.verticalCenter
-                    anchors.margins: Appearance.padding.large
-                    spacing: Appearance.spacing.normal
-
-                    StyledText {
-                        Layout.fillWidth: true
-                        text: qsTr("Show keyboard layout")
-                    }
-
-                    StyledSwitch {
                     checked: root.showKbLayout
-                        onToggled: {
+                    onToggled: checked => {
                         root.showKbLayout = checked;
                         root.saveConfig();
                     }
                 }
-                }
-            }
 
-            StyledRect {
+                SwitchRow {
-                visible: statusIconsSection.expanded
+                    label: qsTr("Show network")
-                Layout.fillWidth: true
-                Layout.topMargin: Appearance.spacing.small / 2
-                implicitHeight: statusIconsSection.expanded ? showNetworkRow.implicitHeight + Appearance.padding.large * 2 : 0
-                radius: Appearance.rounding.normal
-                color: Colours.tPalette.m3surfaceContainer
-
-                Behavior on implicitHeight {
-                    Anim {}
-                }
-
-                RowLayout {
-                    id: showNetworkRow
-                    anchors.left: parent.left
-                    anchors.right: parent.right
-                    anchors.verticalCenter: parent.verticalCenter
-                    anchors.margins: Appearance.padding.large
-                    spacing: Appearance.spacing.normal
-
-                    StyledText {
-                        Layout.fillWidth: true
-                        text: qsTr("Show network")
-                    }
-
-                    StyledSwitch {
                     checked: root.showNetwork
-                        onToggled: {
+                    onToggled: checked => {
                         root.showNetwork = checked;
                         root.saveConfig();
                     }
                 }
-                }
-            }
 
-            StyledRect {
+                SwitchRow {
-                visible: statusIconsSection.expanded
+                    label: qsTr("Show bluetooth")
-                Layout.fillWidth: true
-                Layout.topMargin: Appearance.spacing.small / 2
-                implicitHeight: statusIconsSection.expanded ? showBluetoothRow.implicitHeight + Appearance.padding.large * 2 : 0
-                radius: Appearance.rounding.normal
-                color: Colours.tPalette.m3surfaceContainer
-
-                Behavior on implicitHeight {
-                    Anim {}
-                }
-
-                RowLayout {
-                    id: showBluetoothRow
-                    anchors.left: parent.left
-                    anchors.right: parent.right
-                    anchors.verticalCenter: parent.verticalCenter
-                    anchors.margins: Appearance.padding.large
-                    spacing: Appearance.spacing.normal
-
-                    StyledText {
-                        Layout.fillWidth: true
-                        text: qsTr("Show bluetooth")
-                    }
-
-                    StyledSwitch {
                     checked: root.showBluetooth
-                        onToggled: {
+                    onToggled: checked => {
                         root.showBluetooth = checked;
                         root.saveConfig();
                     }
                 }
-                }
-            }
 
-            StyledRect {
+                SwitchRow {
-                visible: statusIconsSection.expanded
+                    label: qsTr("Show battery")
-                Layout.fillWidth: true
-                Layout.topMargin: Appearance.spacing.small / 2
-                implicitHeight: statusIconsSection.expanded ? showBatteryRow.implicitHeight + Appearance.padding.large * 2 : 0
-                radius: Appearance.rounding.normal
-                color: Colours.tPalette.m3surfaceContainer
-
-                Behavior on implicitHeight {
-                    Anim {}
-                }
-
-                RowLayout {
-                    id: showBatteryRow
-                    anchors.left: parent.left
-                    anchors.right: parent.right
-                    anchors.verticalCenter: parent.verticalCenter
-                    anchors.margins: Appearance.padding.large
-                    spacing: Appearance.spacing.normal
-
-                    StyledText {
-                        Layout.fillWidth: true
-                        text: qsTr("Show battery")
-                    }
-
-                    StyledSwitch {
                     checked: root.showBattery
-                        onToggled: {
+                    onToggled: checked => {
                         root.showBattery = checked;
                         root.saveConfig();
                     }
                 }
-                }
-            }
 
-            StyledRect {
+                SwitchRow {
-                visible: statusIconsSection.expanded
+                    label: qsTr("Show lock status")
-                Layout.fillWidth: true
-                Layout.topMargin: Appearance.spacing.small / 2
-                implicitHeight: statusIconsSection.expanded ? showLockStatusRow.implicitHeight + Appearance.padding.large * 2 : 0
-                radius: Appearance.rounding.normal
-                color: Colours.tPalette.m3surfaceContainer
-
-                Behavior on implicitHeight {
-                    Anim {}
-                }
-
-                RowLayout {
-                    id: showLockStatusRow
-                    anchors.left: parent.left
-                    anchors.right: parent.right
-                    anchors.verticalCenter: parent.verticalCenter
-                    anchors.margins: Appearance.padding.large
-                    spacing: Appearance.spacing.normal
-
-                    StyledText {
-                        Layout.fillWidth: true
-                        text: qsTr("Show lock status")
-                    }
-
-                    StyledSwitch {
                     checked: root.showLockStatus
-                        onToggled: {
+                    onToggled: checked => {
                         root.showLockStatus = checked;
                         root.saveConfig();
                     }
                 }
             }
-            }
 
-            Item {
+            CollapsibleSection {
                 id: traySettingsSection
-                Layout.fillWidth: true
+                title: qsTr("Tray Settings")
-                Layout.preferredHeight: traySettingsSectionHeader.implicitHeight
+                onToggleRequested: {
-                property bool expanded: false
-
-                ColumnLayout {
-                    id: traySettingsSectionHeader
-                    anchors.left: parent.left
-                    anchors.right: parent.right
-                    spacing: Appearance.spacing.small
-
-                    RowLayout {
-                        Layout.fillWidth: true
-                        spacing: Appearance.spacing.small
-
-                        StyledText {
-                            Layout.topMargin: Appearance.spacing.large
-                            text: qsTr("Tray Settings")
-                            font.pointSize: Appearance.font.size.larger
-                            font.weight: 500
-                        }
-
-                        Item {
-                            Layout.fillWidth: true
-                        }
-
-                        MaterialIcon {
-                            text: "expand_more"
-                            rotation: traySettingsSection.expanded ? 180 : 0
-                            color: Colours.palette.m3onSurface
-                            Behavior on rotation {
-                                Anim {}
-                            }
-                        }
-                    }
-
-                    StateLayer {
-                        anchors.fill: parent
-                        anchors.leftMargin: -Appearance.padding.normal
-                        anchors.rightMargin: -Appearance.padding.normal
-                        function onClicked(): void {
-                            const wasExpanded = traySettingsSection.expanded;
                     root.collapseAllSections(traySettingsSection);
-                            traySettingsSection.expanded = !wasExpanded;
-                        }
-                    }
-                }
                 }
 
-            StyledRect {
+                SwitchRow {
-                visible: traySettingsSection.expanded
+                    label: qsTr("Background")
-                Layout.fillWidth: true
-                Layout.topMargin: Appearance.spacing.small / 2
-                implicitHeight: traySettingsSection.expanded ? trayBackgroundRow.implicitHeight + Appearance.padding.large * 2 : 0
-                radius: Appearance.rounding.normal
-                color: Colours.tPalette.m3surfaceContainer
-
-                Behavior on implicitHeight {
-                    Anim {}
-                }
-
-                RowLayout {
-                    id: trayBackgroundRow
-                    anchors.left: parent.left
-                    anchors.right: parent.right
-                    anchors.verticalCenter: parent.verticalCenter
-                    anchors.margins: Appearance.padding.large
-                    spacing: Appearance.spacing.normal
-
-                    StyledText {
-                        Layout.fillWidth: true
-                        text: qsTr("Background")
-                    }
-
-                    StyledSwitch {
                     checked: root.trayBackground
-                        onToggled: {
+                    onToggled: checked => {
                         root.trayBackground = checked;
                         root.saveConfig();
                     }
                 }
-                }
-            }
 
-            StyledRect {
+                SwitchRow {
-                visible: traySettingsSection.expanded
+                    label: qsTr("Compact")
-                Layout.fillWidth: true
-                Layout.topMargin: Appearance.spacing.small / 2
-                implicitHeight: traySettingsSection.expanded ? trayCompactRow.implicitHeight + Appearance.padding.large * 2 : 0
-                radius: Appearance.rounding.normal
-                color: Colours.tPalette.m3surfaceContainer
-
-                Behavior on implicitHeight {
-                    Anim {}
-                }
-
-                RowLayout {
-                    id: trayCompactRow
-                    anchors.left: parent.left
-                    anchors.right: parent.right
-                    anchors.verticalCenter: parent.verticalCenter
-                    anchors.margins: Appearance.padding.large
-                    spacing: Appearance.spacing.normal
-
-                    StyledText {
-                        Layout.fillWidth: true
-                        text: qsTr("Compact")
-                    }
-
-                    StyledSwitch {
                     checked: root.trayCompact
-                        onToggled: {
+                    onToggled: checked => {
                         root.trayCompact = checked;
                         root.saveConfig();
                     }
                 }
-                }
-            }
 
-            StyledRect {
+                SwitchRow {
-                visible: traySettingsSection.expanded
+                    label: qsTr("Recolour")
-                Layout.fillWidth: true
-                Layout.topMargin: Appearance.spacing.small / 2
-                implicitHeight: traySettingsSection.expanded ? trayRecolourRow.implicitHeight + Appearance.padding.large * 2 : 0
-                radius: Appearance.rounding.normal
-                color: Colours.tPalette.m3surfaceContainer
-
-                Behavior on implicitHeight {
-                    Anim {}
-                }
-
-                RowLayout {
-                    id: trayRecolourRow
-                    anchors.left: parent.left
-                    anchors.right: parent.right
-                    anchors.verticalCenter: parent.verticalCenter
-                    anchors.margins: Appearance.padding.large
-                    spacing: Appearance.spacing.normal
-
-                    StyledText {
-                        Layout.fillWidth: true
-                        text: qsTr("Recolour")
-                    }
-
-                    StyledSwitch {
                     checked: root.trayRecolour
-                        onToggled: {
+                    onToggled: checked => {
                         root.trayRecolour = checked;
                         root.saveConfig();
                     }
                 }
             }
-            }
 
-            Item {
+            CollapsibleSection {
                 id: workspacesSection
-                Layout.fillWidth: true
+                title: qsTr("Workspaces")
-                Layout.preferredHeight: workspacesSectionHeader.implicitHeight
+                onToggleRequested: {
-                property bool expanded: false
-
-                ColumnLayout {
-                    id: workspacesSectionHeader
-                    anchors.left: parent.left
-                    anchors.right: parent.right
-                    spacing: Appearance.spacing.small
-
-                    RowLayout {
-                        Layout.fillWidth: true
-                        spacing: Appearance.spacing.small
-
-                        StyledText {
-                            Layout.topMargin: Appearance.spacing.large
-                            text: qsTr("Workspaces")
-                            font.pointSize: Appearance.font.size.larger
-                            font.weight: 500
-                        }
-
-                        Item {
-                            Layout.fillWidth: true
-                        }
-
-                        MaterialIcon {
-                            text: "expand_more"
-                            rotation: workspacesSection.expanded ? 180 : 0
-                            color: Colours.palette.m3onSurface
-                            Behavior on rotation {
-                                Anim {}
-                            }
-                        }
-                    }
-
-                    StateLayer {
-                        anchors.fill: parent
-                        anchors.leftMargin: -Appearance.padding.normal
-                        anchors.rightMargin: -Appearance.padding.normal
-                        function onClicked(): void {
-                            const wasExpanded = workspacesSection.expanded;
                     root.collapseAllSections(workspacesSection);
-                            workspacesSection.expanded = !wasExpanded;
-                        }
-                    }
-                }
                 }
 
                 StyledRect {
-                visible: workspacesSection.expanded
                     Layout.fillWidth: true
-                Layout.topMargin: Appearance.spacing.small / 2
+                    implicitHeight: workspacesShownRow.implicitHeight + Appearance.padding.large * 2
-                implicitHeight: workspacesSection.expanded ? workspacesShownRow.implicitHeight + Appearance.padding.large * 2 : 0
                     radius: Appearance.rounding.normal
                     color: Colours.tPalette.m3surfaceContainer
 
@@ -1028,10 +458,8 @@ RowLayout {
                 }
 
                 StyledRect {
-                visible: workspacesSection.expanded
                     Layout.fillWidth: true
-                Layout.topMargin: Appearance.spacing.small / 2
+                    implicitHeight: workspacesActiveIndicatorRow.implicitHeight + Appearance.padding.large * 2
-                implicitHeight: workspacesSection.expanded ? workspacesActiveIndicatorRow.implicitHeight + Appearance.padding.large * 2 : 0
                     radius: Appearance.rounding.normal
                     color: Colours.tPalette.m3surfaceContainer
 
@@ -1063,10 +491,8 @@ RowLayout {
                 }
 
                 StyledRect {
-                visible: workspacesSection.expanded
                     Layout.fillWidth: true
-                Layout.topMargin: Appearance.spacing.small / 2
+                    implicitHeight: workspacesOccupiedBgRow.implicitHeight + Appearance.padding.large * 2
-                implicitHeight: workspacesSection.expanded ? workspacesOccupiedBgRow.implicitHeight + Appearance.padding.large * 2 : 0
                     radius: Appearance.rounding.normal
                     color: Colours.tPalette.m3surfaceContainer
 
@@ -1098,10 +524,8 @@ RowLayout {
                 }
 
                 StyledRect {
-                visible: workspacesSection.expanded
                     Layout.fillWidth: true
-                Layout.topMargin: Appearance.spacing.small / 2
+                    implicitHeight: workspacesShowWindowsRow.implicitHeight + Appearance.padding.large * 2
-                implicitHeight: workspacesSection.expanded ? workspacesShowWindowsRow.implicitHeight + Appearance.padding.large * 2 : 0
                     radius: Appearance.rounding.normal
                     color: Colours.tPalette.m3surfaceContainer
 
@@ -1133,10 +557,8 @@ RowLayout {
                 }
 
                 StyledRect {
-                visible: workspacesSection.expanded
                     Layout.fillWidth: true
-                Layout.topMargin: Appearance.spacing.small / 2
+                    implicitHeight: workspacesPerMonitorRow.implicitHeight + Appearance.padding.large * 2
-                implicitHeight: workspacesSection.expanded ? workspacesPerMonitorRow.implicitHeight + Appearance.padding.large * 2 : 0
                     radius: Appearance.rounding.normal
                     color: Colours.tPalette.m3surfaceContainer
 
@@ -1168,6 +590,7 @@ RowLayout {
                 }
             }
         }
+        }
 
         InnerBorder {
             leftThickness: 0