controlcenter: corrected all panels edge-to-edge containers

modules/controlcenter/appearance/AppearancePane.qml

@@ -12,6 +12,7 @@ import qs.config
 import qs.utils
 import Caelestia.Models
 import Quickshell
+import Quickshell.Widgets
 import QtQuick
 import QtQuick.Layouts
 
@@ -47,26 +48,6 @@ RowLayout {
 
     spacing: 0
 
-    function collapseAllSections(exceptSection) {
-        if (exceptSection !== themeModeSection)
-            themeModeSection.expanded = false;
-        if (exceptSection !== colorVariantSection)
-            colorVariantSection.expanded = false;
-        if (exceptSection !== colorSchemeSection)
-            colorSchemeSection.expanded = false;
-        if (exceptSection !== animationsSection)
-            animationsSection.expanded = false;
-        if (exceptSection !== fontsSection)
-            fontsSection.expanded = false;
-        if (exceptSection !== scalesSection)
-            scalesSection.expanded = false;
-        if (exceptSection !== transparencySection)
-            transparencySection.expanded = false;
-        if (exceptSection !== borderSection)
-            borderSection.expanded = false;
-        if (exceptSection !== backgroundSection)
-            backgroundSection.expanded = false;
-    }
 
     function saveConfig() {
         // Update animations
@@ -110,26 +91,72 @@ RowLayout {
         Layout.minimumWidth: 420
         Layout.fillHeight: true
 
-        StyledFlickable {
+        ClippingRectangle {
-            id: sidebarFlickable
+            id: leftAppearanceClippingRect
             anchors.fill: parent
-            flickableDirection: Flickable.VerticalFlick
+            anchors.margins: Appearance.padding.normal
-            contentHeight: sidebarLayout.height
+            anchors.leftMargin: 0
+            anchors.rightMargin: Appearance.padding.normal / 2
+            radius: leftAppearanceBorder.innerRadius
+            color: "transparent"
 
-            StyledScrollBar.vertical: StyledScrollBar {
+            Loader {
-                flickable: sidebarFlickable
+                id: leftAppearanceLoader
-            }
+                anchors.fill: parent
-
-            ColumnLayout {
-                id: sidebarLayout
-                anchors.left: parent.left
-                anchors.right: parent.right
-                anchors.top: parent.top
                 anchors.margins: Appearance.padding.large + Appearance.padding.normal
                 anchors.leftMargin: Appearance.padding.large
                 anchors.rightMargin: Appearance.padding.large + Appearance.padding.normal / 2
+                asynchronous: true
+                sourceComponent: appearanceLeftContentComponent
+                property var rootPane: root
+            }
+        }
 
-                spacing: Appearance.spacing.small
+        InnerBorder {
+            id: leftAppearanceBorder
+            leftThickness: 0
+            rightThickness: Appearance.padding.normal / 2
+        }
+
+        Component {
+            id: appearanceLeftContentComponent
+
+            StyledFlickable {
+                id: sidebarFlickable
+                readonly property var rootPane: leftAppearanceLoader.rootPane
+                flickableDirection: Flickable.VerticalFlick
+                contentHeight: sidebarLayout.height
+
+                function collapseAllSections(exceptSection) {
+                    if (exceptSection !== themeModeSection)
+                        themeModeSection.expanded = false;
+                    if (exceptSection !== colorVariantSection)
+                        colorVariantSection.expanded = false;
+                    if (exceptSection !== colorSchemeSection)
+                        colorSchemeSection.expanded = false;
+                    if (exceptSection !== animationsSection)
+                        animationsSection.expanded = false;
+                    if (exceptSection !== fontsSection)
+                        fontsSection.expanded = false;
+                    if (exceptSection !== scalesSection)
+                        scalesSection.expanded = false;
+                    if (exceptSection !== transparencySection)
+                        transparencySection.expanded = false;
+                    if (exceptSection !== borderSection)
+                        borderSection.expanded = false;
+                    if (exceptSection !== backgroundSection)
+                        backgroundSection.expanded = false;
+                }
+
+                StyledScrollBar.vertical: StyledScrollBar {
+                    flickable: sidebarFlickable
+                }
+
+                ColumnLayout {
+                    id: sidebarLayout
+                    anchors.left: parent.left
+                    anchors.right: parent.right
+                    spacing: Appearance.spacing.small
 
                 RowLayout {
                     spacing: Appearance.spacing.smaller
@@ -150,7 +177,7 @@ RowLayout {
                     title: qsTr("Theme mode")
                     description: qsTr("Light or dark theme")
                     onToggleRequested: {
-                        root.collapseAllSections(themeModeSection);
+                        sidebarFlickable.collapseAllSections(themeModeSection);
                     }
 
                     SwitchRow {
@@ -167,7 +194,7 @@ RowLayout {
                     title: qsTr("Color variant")
                     description: qsTr("Material theme variant")
                     onToggleRequested: {
-                        root.collapseAllSections(colorVariantSection);
+                        sidebarFlickable.collapseAllSections(colorVariantSection);
                     }
 
                     StyledListView {
@@ -257,7 +284,7 @@ RowLayout {
                     title: qsTr("Color scheme")
                     description: qsTr("Available color schemes")
                     onToggleRequested: {
-                        root.collapseAllSections(colorSchemeSection);
+                        sidebarFlickable.collapseAllSections(colorSchemeSection);
                     }
 
                     StyledListView {
@@ -401,7 +428,7 @@ RowLayout {
                     id: animationsSection
                     title: qsTr("Animations")
                     onToggleRequested: {
-                        root.collapseAllSections(animationsSection);
+                        sidebarFlickable.collapseAllSections(animationsSection);
                     }
 
                     SpinBoxRow {
@@ -409,10 +436,10 @@ RowLayout {
                         min: 0.1
                         max: 5
                         step: 0.1
-                        value: root.animDurationsScale
+                        value: rootPane.animDurationsScale
                         onValueModified: value => {
-                            root.animDurationsScale = value;
+                            rootPane.animDurationsScale = value;
-                            root.saveConfig();
+                            rootPane.saveConfig();
                         }
                     }
                 }
@@ -421,7 +448,7 @@ RowLayout {
                     id: fontsSection
                     title: qsTr("Fonts")
                     onToggleRequested: {
-                        root.collapseAllSections(fontsSection);
+                        sidebarFlickable.collapseAllSections(fontsSection);
                     }
 
                     StyledText {
@@ -449,7 +476,7 @@ RowLayout {
                             anchors.left: parent.left
                             anchors.right: parent.right
 
-                            readonly property bool isCurrent: modelData === root.fontFamilyMaterial
+                            readonly property bool isCurrent: modelData === rootPane.fontFamilyMaterial
                             color: Qt.alpha(Colours.tPalette.m3surfaceContainer, isCurrent ? Colours.tPalette.m3surfaceContainer.a : 0)
                             radius: Appearance.rounding.normal
                             border.width: isCurrent ? 1 : 0
@@ -457,8 +484,8 @@ RowLayout {
 
                             StateLayer {
                                 function onClicked(): void {
-                                    root.fontFamilyMaterial = modelData;
+                                    rootPane.fontFamilyMaterial = modelData;
-                                    root.saveConfig();
+                                    rootPane.saveConfig();
                                 }
                             }
 
@@ -522,7 +549,7 @@ RowLayout {
                             anchors.left: parent.left
                             anchors.right: parent.right
 
-                            readonly property bool isCurrent: modelData === root.fontFamilyMono
+                            readonly property bool isCurrent: modelData === rootPane.fontFamilyMono
                             color: Qt.alpha(Colours.tPalette.m3surfaceContainer, isCurrent ? Colours.tPalette.m3surfaceContainer.a : 0)
                             radius: Appearance.rounding.normal
                             border.width: isCurrent ? 1 : 0
@@ -530,8 +557,8 @@ RowLayout {
 
                             StateLayer {
                                 function onClicked(): void {
-                                    root.fontFamilyMono = modelData;
+                                    rootPane.fontFamilyMono = modelData;
-                                    root.saveConfig();
+                                    rootPane.saveConfig();
                                 }
                             }
 
@@ -595,7 +622,7 @@ RowLayout {
                             anchors.left: parent.left
                             anchors.right: parent.right
 
-                            readonly property bool isCurrent: modelData === root.fontFamilySans
+                            readonly property bool isCurrent: modelData === rootPane.fontFamilySans
                             color: Qt.alpha(Colours.tPalette.m3surfaceContainer, isCurrent ? Colours.tPalette.m3surfaceContainer.a : 0)
                             radius: Appearance.rounding.normal
                             border.width: isCurrent ? 1 : 0
@@ -603,8 +630,8 @@ RowLayout {
 
                             StateLayer {
                                 function onClicked(): void {
-                                    root.fontFamilySans = modelData;
+                                    rootPane.fontFamilySans = modelData;
-                                    root.saveConfig();
+                                    rootPane.saveConfig();
                                 }
                             }
 
@@ -648,10 +675,10 @@ RowLayout {
                         min: 0.1
                         max: 5
                         step: 0.1
-                        value: root.fontSizeScale
+                        value: rootPane.fontSizeScale
                         onValueModified: value => {
-                            root.fontSizeScale = value;
+                            rootPane.fontSizeScale = value;
-                            root.saveConfig();
+                            rootPane.saveConfig();
                         }
                     }
                 }
@@ -660,7 +687,7 @@ RowLayout {
                     id: scalesSection
                     title: qsTr("Scales")
                     onToggleRequested: {
-                        root.collapseAllSections(scalesSection);
+                        sidebarFlickable.collapseAllSections(scalesSection);
                     }
 
                     SpinBoxRow {
@@ -668,10 +695,10 @@ RowLayout {
                         min: 0.1
                         max: 5
                         step: 0.1
-                        value: root.paddingScale
+                        value: rootPane.paddingScale
                         onValueModified: value => {
-                            root.paddingScale = value;
+                            rootPane.paddingScale = value;
-                            root.saveConfig();
+                            rootPane.saveConfig();
                         }
                     }
 
@@ -680,10 +707,10 @@ RowLayout {
                         min: 0.1
                         max: 5
                         step: 0.1
-                        value: root.roundingScale
+                        value: rootPane.roundingScale
                         onValueModified: value => {
-                            root.roundingScale = value;
+                            rootPane.roundingScale = value;
-                            root.saveConfig();
+                            rootPane.saveConfig();
                         }
                     }
 
@@ -692,10 +719,10 @@ RowLayout {
                         min: 0.1
                         max: 5
                         step: 0.1
-                        value: root.spacingScale
+                        value: rootPane.spacingScale
                         onValueModified: value => {
-                            root.spacingScale = value;
+                            rootPane.spacingScale = value;
-                            root.saveConfig();
+                            rootPane.saveConfig();
                         }
                     }
                 }
@@ -704,15 +731,15 @@ RowLayout {
                     id: transparencySection
                     title: qsTr("Transparency")
                     onToggleRequested: {
-                        root.collapseAllSections(transparencySection);
+                        sidebarFlickable.collapseAllSections(transparencySection);
                     }
 
                     SwitchRow {
                         label: qsTr("Transparency enabled")
-                        checked: root.transparencyEnabled
+                        checked: rootPane.transparencyEnabled
                         onToggled: checked => {
-                            root.transparencyEnabled = checked;
+                            rootPane.transparencyEnabled = checked;
-                            root.saveConfig();
+                            rootPane.saveConfig();
                         }
                     }
 
@@ -737,7 +764,7 @@ RowLayout {
                                 }
 
                                 StyledText {
-                                    text: qsTr("%1%").arg(Math.round(root.transparencyBase * 100))
+                                    text: qsTr("%1%").arg(Math.round(rootPane.transparencyBase * 100))
                                     color: Colours.palette.m3outline
                                     font.pointSize: Appearance.font.size.normal
                                 }
@@ -751,10 +778,10 @@ RowLayout {
 
                                 from: 0
                                 to: 100
-                                value: root.transparencyBase * 100
+                                value: rootPane.transparencyBase * 100
                                 onMoved: {
-                                    root.transparencyBase = baseSlider.value / 100;
+                                    rootPane.transparencyBase = baseSlider.value / 100;
-                                    root.saveConfig();
+                                    rootPane.saveConfig();
                                 }
                             }
                         }
@@ -781,7 +808,7 @@ RowLayout {
                                 }
 
                                 StyledText {
-                                    text: qsTr("%1%").arg(Math.round(root.transparencyLayers * 100))
+                                    text: qsTr("%1%").arg(Math.round(rootPane.transparencyLayers * 100))
                                     color: Colours.palette.m3outline
                                     font.pointSize: Appearance.font.size.normal
                                 }
@@ -795,10 +822,10 @@ RowLayout {
 
                                 from: 0
                                 to: 100
-                                value: root.transparencyLayers * 100
+                                value: rootPane.transparencyLayers * 100
                                 onMoved: {
-                                    root.transparencyLayers = layersSlider.value / 100;
+                                    rootPane.transparencyLayers = layersSlider.value / 100;
-                                    root.saveConfig();
+                                    rootPane.saveConfig();
                                 }
                             }
                         }
@@ -809,7 +836,7 @@ RowLayout {
                     id: borderSection
                     title: qsTr("Border")
                     onToggleRequested: {
-                        root.collapseAllSections(borderSection);
+                        sidebarFlickable.collapseAllSections(borderSection);
                     }
 
                     SpinBoxRow {
@@ -817,10 +844,10 @@ RowLayout {
                         min: 0.1
                         max: 100
                         step: 0.1
-                        value: root.borderRounding
+                        value: rootPane.borderRounding
                         onValueModified: value => {
-                            root.borderRounding = value;
+                            rootPane.borderRounding = value;
-                            root.saveConfig();
+                            rootPane.saveConfig();
                         }
                     }
 
@@ -829,10 +856,10 @@ RowLayout {
                         min: 0.1
                         max: 100
                         step: 0.1
-                        value: root.borderThickness
+                        value: rootPane.borderThickness
                         onValueModified: value => {
-                            root.borderThickness = value;
+                            rootPane.borderThickness = value;
-                            root.saveConfig();
+                            rootPane.saveConfig();
                         }
                     }
                 }
@@ -841,24 +868,24 @@ RowLayout {
                     id: backgroundSection
                     title: qsTr("Background")
                     onToggleRequested: {
-                        root.collapseAllSections(backgroundSection);
+                        sidebarFlickable.collapseAllSections(backgroundSection);
                     }
 
                     SwitchRow {
                         label: qsTr("Desktop clock")
-                        checked: root.desktopClockEnabled
+                        checked: rootPane.desktopClockEnabled
                         onToggled: checked => {
-                            root.desktopClockEnabled = checked;
+                            rootPane.desktopClockEnabled = checked;
-                            root.saveConfig();
+                            rootPane.saveConfig();
                         }
                     }
 
                     SwitchRow {
                         label: qsTr("Background enabled")
-                        checked: root.backgroundEnabled
+                        checked: rootPane.backgroundEnabled
                         onToggled: checked => {
-                            root.backgroundEnabled = checked;
+                            rootPane.backgroundEnabled = checked;
-                            root.saveConfig();
+                            rootPane.saveConfig();
                         }
                     }
 
@@ -871,19 +898,19 @@ RowLayout {
 
                     SwitchRow {
                         label: qsTr("Visualiser enabled")
-                        checked: root.visualiserEnabled
+                        checked: rootPane.visualiserEnabled
                         onToggled: checked => {
-                            root.visualiserEnabled = checked;
+                            rootPane.visualiserEnabled = checked;
-                            root.saveConfig();
+                            rootPane.saveConfig();
                         }
                     }
 
                     SwitchRow {
                         label: qsTr("Visualiser auto hide")
-                        checked: root.visualiserAutoHide
+                        checked: rootPane.visualiserAutoHide
                         onToggled: checked => {
-                            root.visualiserAutoHide = checked;
+                            rootPane.visualiserAutoHide = checked;
-                            root.saveConfig();
+                            rootPane.saveConfig();
                         }
                     }
 
@@ -891,10 +918,10 @@ RowLayout {
                         label: qsTr("Visualiser rounding")
                         min: 0
                         max: 10
-                        value: Math.round(root.visualiserRounding)
+                        value: Math.round(rootPane.visualiserRounding)
                         onValueModified: value => {
-                            root.visualiserRounding = value;
+                            rootPane.visualiserRounding = value;
-                            root.saveConfig();
+                            rootPane.saveConfig();
                         }
                     }
 
@@ -902,19 +929,15 @@ RowLayout {
                         label: qsTr("Visualiser spacing")
                         min: 0
                         max: 10
-                        value: Math.round(root.visualiserSpacing)
+                        value: Math.round(rootPane.visualiserSpacing)
                         onValueModified: value => {
-                            root.visualiserSpacing = value;
+                            rootPane.visualiserSpacing = value;
-                            root.saveConfig();
+                            rootPane.saveConfig();
                         }
                     }
                 }
             }
-        }
+            }
-
-        InnerBorder {
-            leftThickness: 0
-            rightThickness: Appearance.padding.normal / 2
         }
     }
 
@@ -922,30 +945,53 @@ RowLayout {
         Layout.fillWidth: true
         Layout.fillHeight: true
 
-        StyledFlickable {
+        ClippingRectangle {
+            id: rightAppearanceClippingRect
             anchors.fill: parent
             anchors.margins: Appearance.padding.normal
             anchors.leftMargin: 0
             anchors.rightMargin: Appearance.padding.normal / 2
+            radius: rightAppearanceBorder.innerRadius
+            color: "transparent"
 
-            flickableDirection: Flickable.VerticalFlick
+            Loader {
-            contentHeight: contentLayout.height
+                id: rightAppearanceLoader
-
+                anchors.fill: parent
-            StyledScrollBar.vertical: StyledScrollBar {
-                flickable: parent
-            }
-
-            ColumnLayout {
-                id: contentLayout
-
-                anchors.left: parent.left
-                anchors.right: parent.right
-                anchors.top: parent.top
-                anchors.leftMargin: Appearance.padding.large * 2
-                anchors.rightMargin: Appearance.padding.large * 2
                 anchors.topMargin: Appearance.padding.large * 2
+                anchors.bottomMargin: Appearance.padding.large * 2
+                anchors.leftMargin: 0
+                anchors.rightMargin: 0
+                asynchronous: true
+                sourceComponent: appearanceRightContentComponent
+                property var rootPane: root
+            }
+        }
 
-                spacing: Appearance.spacing.normal
+        InnerBorder {
+            id: rightAppearanceBorder
+            leftThickness: Appearance.padding.normal / 2
+        }
+
+        Component {
+            id: appearanceRightContentComponent
+
+            StyledFlickable {
+                id: rightAppearanceFlickable
+                flickableDirection: Flickable.VerticalFlick
+                contentHeight: contentLayout.height
+
+                StyledScrollBar.vertical: StyledScrollBar {
+                    flickable: rightAppearanceFlickable
+                }
+
+                ColumnLayout {
+                    id: contentLayout
+
+                    anchors.left: parent.left
+                    anchors.right: parent.right
+                    anchors.leftMargin: Appearance.padding.large * 2
+                    anchors.rightMargin: Appearance.padding.large * 2
+                    spacing: Appearance.spacing.normal
 
                 MaterialIcon {
                     Layout.alignment: Qt.AlignHCenter
@@ -1182,10 +1228,7 @@ RowLayout {
                     }
                 }
             }
-        }
+            }
-
-        InnerBorder {
-            leftThickness: Appearance.padding.normal / 2
         }
     }
 }

modules/controlcenter/audio/AudioPane.qml

@@ -7,6 +7,7 @@ import qs.components.effects
 import qs.components.containers
 import qs.services
 import qs.config
+import Quickshell.Widgets
 import QtQuick
 import QtQuick.Layouts
 
@@ -20,28 +21,58 @@ RowLayout {
     spacing: 0
 
     Item {
+        id: leftAudioItem
         Layout.preferredWidth: Math.floor(parent.width * 0.4)
         Layout.minimumWidth: 420
         Layout.fillHeight: true
 
-        StyledFlickable {
+        ClippingRectangle {
+            id: leftAudioClippingRect
             anchors.fill: parent
-            anchors.margins: Appearance.padding.large + Appearance.padding.normal
+            anchors.margins: Appearance.padding.normal
-            anchors.leftMargin: Appearance.padding.large
+            anchors.leftMargin: 0
-            anchors.rightMargin: Appearance.padding.large + Appearance.padding.normal / 2
+            anchors.rightMargin: Appearance.padding.normal / 2
-            flickableDirection: Flickable.VerticalFlick
-            contentHeight: leftContent.height
 
-            StyledScrollBar.vertical: StyledScrollBar {
+            radius: leftAudioBorder.innerRadius
-                flickable: parent
+            color: "transparent"
+
+            Loader {
+                id: leftAudioLoader
+
+                anchors.fill: parent
+                anchors.margins: Appearance.padding.large + Appearance.padding.normal
+                anchors.leftMargin: Appearance.padding.large
+                anchors.rightMargin: Appearance.padding.large + Appearance.padding.normal / 2
+
+                asynchronous: true
+                sourceComponent: audioLeftContentComponent
             }
+        }
 
-            ColumnLayout {
+        InnerBorder {
-                id: leftContent
+            id: leftAudioBorder
+            leftThickness: 0
+            rightThickness: Appearance.padding.normal / 2
+        }
 
-                anchors.left: parent.left
+        Component {
-                anchors.right: parent.right
+            id: audioLeftContentComponent
-                spacing: Appearance.spacing.normal
+
+            StyledFlickable {
+                id: leftAudioFlickable
+                flickableDirection: Flickable.VerticalFlick
+                contentHeight: leftContent.height
+
+                StyledScrollBar.vertical: StyledScrollBar {
+                    flickable: leftAudioFlickable
+                }
+
+                ColumnLayout {
+                    id: leftContent
+
+                    anchors.left: parent.left
+                    anchors.right: parent.right
+                    spacing: Appearance.spacing.normal
 
                 // Settings header above the collapsible sections
                 RowLayout {
@@ -215,42 +246,64 @@ RowLayout {
                     }
                 }
             }
-        }
+            }
-
-        InnerBorder {
-            leftThickness: 0
-            rightThickness: Appearance.padding.normal / 2
         }
     }
 
     Item {
+        id: rightAudioItem
         Layout.fillWidth: true
         Layout.fillHeight: true
 
-        StyledFlickable {
+        ClippingRectangle {
+            id: rightAudioClippingRect
             anchors.fill: parent
             anchors.margins: Appearance.padding.normal
             anchors.leftMargin: 0
             anchors.rightMargin: Appearance.padding.normal / 2
 
-            flickableDirection: Flickable.VerticalFlick
+            radius: rightAudioBorder.innerRadius
-            contentHeight: contentLayout.height
+            color: "transparent"
 
-            StyledScrollBar.vertical: StyledScrollBar {
+            Loader {
-                flickable: parent
+                id: rightAudioLoader
-            }
 
-            ColumnLayout {
+                anchors.fill: parent
-                id: contentLayout
-
-                anchors.left: parent.left
-                anchors.right: parent.right
-                anchors.top: parent.top
-                anchors.leftMargin: Appearance.padding.large * 2
-                anchors.rightMargin: Appearance.padding.large * 2
                 anchors.topMargin: Appearance.padding.large * 2
+                anchors.bottomMargin: Appearance.padding.large * 2
+                anchors.leftMargin: 0
+                anchors.rightMargin: 0
 
-                spacing: Appearance.spacing.normal
+                asynchronous: true
+                sourceComponent: audioRightContentComponent
+            }
+        }
+
+        InnerBorder {
+            id: rightAudioBorder
+            leftThickness: Appearance.padding.normal / 2
+        }
+
+        Component {
+            id: audioRightContentComponent
+
+            StyledFlickable {
+                id: rightAudioFlickable
+                flickableDirection: Flickable.VerticalFlick
+                contentHeight: contentLayout.height
+
+                StyledScrollBar.vertical: StyledScrollBar {
+                    flickable: rightAudioFlickable
+                }
+
+                ColumnLayout {
+                    id: contentLayout
+
+                    anchors.left: parent.left
+                    anchors.right: parent.right
+                    anchors.leftMargin: Appearance.padding.large * 2
+                    anchors.rightMargin: Appearance.padding.large * 2
+                    spacing: Appearance.spacing.normal
 
                 ConnectionHeader {
                     icon: "volume_up"
@@ -397,10 +450,7 @@ RowLayout {
                     }
                 }
             }
-        }
+            }
-
-        InnerBorder {
-            leftThickness: Appearance.padding.normal / 2
         }
     }
 }

modules/controlcenter/bluetooth/BtPane.qml

@@ -19,30 +19,57 @@ RowLayout {
     spacing: 0
 
     Item {
+        id: leftBtItem
         Layout.preferredWidth: Math.floor(parent.width * 0.4)
         Layout.minimumWidth: 420
         Layout.fillHeight: true
 
-        DeviceList {
+        ClippingRectangle {
+            id: leftBtClippingRect
             anchors.fill: parent
-            anchors.margins: Appearance.padding.large + Appearance.padding.normal
+            anchors.margins: Appearance.padding.normal
-            anchors.leftMargin: Appearance.padding.large
+            anchors.leftMargin: 0
-            anchors.rightMargin: Appearance.padding.large + Appearance.padding.normal / 2
+            anchors.rightMargin: Appearance.padding.normal / 2
 
-            session: root.session
+            radius: leftBtBorder.innerRadius
+            color: "transparent"
+
+            Loader {
+                id: leftBtLoader
+
+                anchors.fill: parent
+                anchors.margins: Appearance.padding.large + Appearance.padding.normal
+                anchors.leftMargin: Appearance.padding.large
+                anchors.rightMargin: Appearance.padding.large + Appearance.padding.normal / 2
+
+                asynchronous: true
+                sourceComponent: btDeviceListComponent
+            }
         }
 
         InnerBorder {
+            id: leftBtBorder
             leftThickness: 0
             rightThickness: Appearance.padding.normal / 2
         }
+
+        Component {
+            id: btDeviceListComponent
+
+            DeviceList {
+                anchors.fill: parent
+                session: root.session
+            }
+        }
     }
 
     Item {
+        id: rightBtItem
         Layout.fillWidth: true
         Layout.fillHeight: true
 
         ClippingRectangle {
+            id: btClippingRect
             anchors.fill: parent
             anchors.margins: Appearance.padding.normal
             anchors.leftMargin: 0

modules/controlcenter/launcher/LauncherPane.qml

@@ -144,20 +144,50 @@ RowLayout {
     }
 
     Item {
+        id: leftLauncherItem
         Layout.preferredWidth: Math.floor(parent.width * 0.4)
         Layout.minimumWidth: 420
         Layout.fillHeight: true
 
-        ColumnLayout {
+        ClippingRectangle {
+            id: leftLauncherClippingRect
             anchors.fill: parent
-            anchors.margins: Appearance.padding.large + Appearance.padding.normal
+            anchors.margins: Appearance.padding.normal
-            anchors.leftMargin: Appearance.padding.large
+            anchors.leftMargin: 0
-            anchors.rightMargin: Appearance.padding.large + Appearance.padding.normal / 2
+            anchors.rightMargin: Appearance.padding.normal / 2
-            anchors.bottomMargin: 0
 
-            spacing: Appearance.spacing.small
+            radius: leftLauncherBorder.innerRadius
+            color: "transparent"
 
-            RowLayout {
+            Loader {
+                id: leftLauncherLoader
+
+                anchors.fill: parent
+                anchors.margins: Appearance.padding.large + Appearance.padding.normal
+                anchors.leftMargin: Appearance.padding.large
+                anchors.rightMargin: Appearance.padding.large + Appearance.padding.normal / 2
+                anchors.bottomMargin: 0
+
+                asynchronous: true
+                sourceComponent: leftContentComponent
+            }
+        }
+
+        InnerBorder {
+            id: leftLauncherBorder
+            leftThickness: 0
+            rightThickness: Appearance.padding.normal / 2
+        }
+
+        Component {
+            id: leftContentComponent
+
+            ColumnLayout {
+                anchors.fill: parent
+
+                spacing: Appearance.spacing.small
+
+                RowLayout {
                 spacing: Appearance.spacing.smaller
 
                 StyledText {
@@ -268,6 +298,7 @@ RowLayout {
             }
 
             StyledListView {
+                id: appsListView
                 Layout.fillWidth: true
                 Layout.fillHeight: true
 
@@ -323,26 +354,50 @@ RowLayout {
                 }
             }
         }
-
-        InnerBorder {
-            leftThickness: 0
-            rightThickness: Appearance.padding.normal / 2
         }
     }
 
     Item {
+        id: rightLauncherItem
         Layout.fillWidth: true
         Layout.fillHeight: true
 
-        ColumnLayout {
+        ClippingRectangle {
+            id: rightLauncherClippingRect
             anchors.fill: parent
             anchors.margins: Appearance.padding.normal
             anchors.leftMargin: 0
             anchors.rightMargin: Appearance.padding.normal / 2
 
-            spacing: Appearance.spacing.normal
+            radius: rightLauncherBorder.innerRadius
+            color: "transparent"
 
-            Item {
+            Loader {
+                id: rightLauncherLoader
+
+                anchors.fill: parent
+                anchors.margins: Appearance.padding.large * 2
+
+                asynchronous: true
+                sourceComponent: rightContentComponent
+            }
+        }
+
+        InnerBorder {
+            id: rightLauncherBorder
+
+            leftThickness: Appearance.padding.normal / 2
+        }
+
+        Component {
+            id: rightContentComponent
+
+            ColumnLayout {
+                anchors.fill: parent
+
+                spacing: Appearance.spacing.normal
+
+                Item {
                 Layout.alignment: Qt.AlignHCenter
                 Layout.leftMargin: Appearance.padding.large * 2
                 Layout.rightMargin: Appearance.padding.large * 2
@@ -397,6 +452,7 @@ RowLayout {
                 Layout.rightMargin: Appearance.padding.large * 2
 
                 StyledFlickable {
+                    id: detailsFlickable
                     anchors.fill: parent
                     flickableDirection: Flickable.VerticalFlick
                     contentHeight: debugLayout.height
@@ -428,9 +484,6 @@ RowLayout {
                 }
             }
         }
-
-        InnerBorder {
-            leftThickness: Appearance.padding.normal / 2
         }
     }
 }

modules/controlcenter/network/NetworkingPane.qml

@@ -29,32 +29,59 @@ Item {
         spacing: 0
 
         Item {
+            id: leftNetworkItem
             Layout.preferredWidth: Math.floor(parent.width * 0.4)
             Layout.minimumWidth: 420
             Layout.fillHeight: true
 
-            // Left pane - networking list with collapsible sections
+            ClippingRectangle {
-            StyledFlickable {
+                id: leftNetworkClippingRect
-                id: leftFlickable
-
                 anchors.fill: parent
-                flickableDirection: Flickable.VerticalFlick
+                anchors.margins: Appearance.padding.normal
-                contentHeight: leftContent.height
+                anchors.leftMargin: 0
+                anchors.rightMargin: Appearance.padding.normal / 2
 
-                StyledScrollBar.vertical: StyledScrollBar {
+                radius: leftNetworkBorder.innerRadius
-                    flickable: leftFlickable
+                color: "transparent"
-                }
 
-                ColumnLayout {
+                Loader {
-                    id: leftContent
+                    id: leftNetworkLoader
 
-                    anchors.left: parent.left
+                    anchors.fill: parent
-                    anchors.right: parent.right
-                    anchors.top: parent.top
                     anchors.margins: Appearance.padding.large + Appearance.padding.normal
                     anchors.leftMargin: Appearance.padding.large
                     anchors.rightMargin: Appearance.padding.large + Appearance.padding.normal / 2
-                    spacing: Appearance.spacing.normal
+
+                    asynchronous: true
+                    sourceComponent: networkListComponent
+                }
+            }
+
+            InnerBorder {
+                id: leftNetworkBorder
+                leftThickness: 0
+                rightThickness: Appearance.padding.normal / 2
+            }
+
+            Component {
+                id: networkListComponent
+
+                StyledFlickable {
+                    id: leftFlickable
+
+                    flickableDirection: Flickable.VerticalFlick
+                    contentHeight: leftContent.height
+
+                    StyledScrollBar.vertical: StyledScrollBar {
+                        flickable: leftFlickable
+                    }
+
+                    ColumnLayout {
+                        id: leftContent
+
+                        anchors.left: parent.left
+                        anchors.right: parent.right
+                        spacing: Appearance.spacing.normal
 
                     // Settings header above the collapsible sections
                     RowLayout {
@@ -385,18 +412,16 @@ Item {
                     }
                 }
             }
-
-            InnerBorder {
-                leftThickness: 0
-                rightThickness: Appearance.padding.normal / 2
             }
         }
 
         Item {
+            id: rightNetworkItem
             Layout.fillWidth: true
             Layout.fillHeight: true
 
             ClippingRectangle {
+                id: networkClippingRect
                 anchors.fill: parent
                 anchors.margins: Appearance.padding.normal
                 anchors.leftMargin: 0

modules/controlcenter/taskbar/TaskbarPane.qml

@@ -9,6 +9,7 @@ import qs.services
 import qs.config
 import qs.utils
 import Quickshell
+import Quickshell.Widgets
 import QtQuick
 import QtQuick.Layouts
 
@@ -17,6 +18,9 @@ RowLayout {
 
     required property Session session
 
+    // Clock
+    property bool clockShowIcon: Config.bar.clock.showIcon ?? true
+
     // Bar Behavior
     property bool persistent: Config.bar.persistent ?? true
     property bool showOnHover: Config.bar.showOnHover ?? true
@@ -48,9 +52,6 @@ RowLayout {
     spacing: 0
 
     Component.onCompleted: {
-        // Update clock toggle
-        clockShowIconSwitch.checked = Config.bar.clock.showIcon ?? true;
-
         // Update entries
         if (Config.bar.entries) {
             entriesModel.clear();
@@ -66,7 +67,7 @@ RowLayout {
 
     function saveConfig(entryIndex, entryEnabled) {
         // Update clock setting
-        Config.bar.clock.showIcon = clockShowIconSwitch.checked;
+        Config.bar.clock.showIcon = root.clockShowIcon;
 
         // Update bar behavior
         Config.bar.persistent = root.persistent;
@@ -116,42 +117,62 @@ RowLayout {
         id: entriesModel
     }
 
-
-    function collapseAllSections(exceptSection) {
-        if (exceptSection !== clockSection) clockSection.expanded = false;
-        if (exceptSection !== barBehaviorSection) barBehaviorSection.expanded = false;
-        if (exceptSection !== statusIconsSection) statusIconsSection.expanded = false;
-        if (exceptSection !== traySettingsSection) traySettingsSection.expanded = false;
-        if (exceptSection !== workspacesSection) workspacesSection.expanded = false;
-    }
-
     Item {
+        id: leftTaskbarItem
         Layout.preferredWidth: Math.floor(parent.width * 0.4)
         Layout.minimumWidth: 420
         Layout.fillHeight: true
 
-        StyledFlickable {
+        ClippingRectangle {
-            id: sidebarFlickable
+            id: leftTaskbarClippingRect
             anchors.fill: parent
-            flickableDirection: Flickable.VerticalFlick
+            anchors.margins: Appearance.padding.normal
-            contentHeight: sidebarLayout.height
+            anchors.leftMargin: 0
+            anchors.rightMargin: Appearance.padding.normal / 2
 
-            StyledScrollBar.vertical: StyledScrollBar {
+            radius: leftTaskbarBorder.innerRadius
-                flickable: sidebarFlickable
+            color: "transparent"
-            }
 
-            ColumnLayout {
+            Loader {
-                id: sidebarLayout
+                id: leftTaskbarLoader
-                anchors.left: parent.left
+
-                anchors.right: parent.right
+                anchors.fill: parent
-                anchors.top: parent.top
                 anchors.margins: Appearance.padding.large + Appearance.padding.normal
                 anchors.leftMargin: Appearance.padding.large
                 anchors.rightMargin: Appearance.padding.large + Appearance.padding.normal / 2
 
-                spacing: Appearance.spacing.small
+                asynchronous: true
+                sourceComponent: leftTaskbarContentComponent
+            }
+        }
 
-            RowLayout {
+        InnerBorder {
+            id: leftTaskbarBorder
+            leftThickness: 0
+            rightThickness: Appearance.padding.normal / 2
+        }
+
+        Component {
+            id: leftTaskbarContentComponent
+
+            StyledFlickable {
+                id: sidebarFlickable
+                flickableDirection: Flickable.VerticalFlick
+                contentHeight: sidebarLayout.height
+
+                StyledScrollBar.vertical: StyledScrollBar {
+                    flickable: sidebarFlickable
+                }
+
+                ColumnLayout {
+                    id: sidebarLayout
+                    anchors.left: parent.left
+                    anchors.right: parent.right
+                    anchors.top: parent.top
+
+                    spacing: Appearance.spacing.small
+
+                    RowLayout {
                 spacing: Appearance.spacing.smaller
 
                 StyledText {
@@ -169,9 +190,6 @@ RowLayout {
                 id: clockSection
                 title: qsTr("Clock")
                 description: qsTr("Clock display settings")
-                onToggleRequested: {
-                    root.collapseAllSections(clockSection);
-                }
 
                 RowLayout {
                     id: clockRow
@@ -190,8 +208,9 @@ RowLayout {
 
                     StyledSwitch {
                         id: clockShowIconSwitch
-                        checked: true
+                        checked: root.clockShowIcon
                         onToggled: {
+                            root.clockShowIcon = checked;
                             root.saveConfig();
                         }
                     }
@@ -201,9 +220,6 @@ RowLayout {
             CollapsibleSection {
                 id: barBehaviorSection
                 title: qsTr("Bar Behavior")
-                onToggleRequested: {
-                    root.collapseAllSections(barBehaviorSection);
-                }
 
                 SwitchRow {
                     label: qsTr("Persistent")
@@ -238,9 +254,6 @@ RowLayout {
             CollapsibleSection {
                 id: statusIconsSection
                 title: qsTr("Status Icons")
-                onToggleRequested: {
-                    root.collapseAllSections(statusIconsSection);
-                }
 
                 SwitchRow {
                     label: qsTr("Show audio")
@@ -309,9 +322,6 @@ RowLayout {
             CollapsibleSection {
                 id: traySettingsSection
                 title: qsTr("Tray Settings")
-                onToggleRequested: {
-                    root.collapseAllSections(traySettingsSection);
-                }
 
                 SwitchRow {
                     label: qsTr("Background")
@@ -344,9 +354,6 @@ RowLayout {
             CollapsibleSection {
                 id: workspacesSection
                 title: qsTr("Workspaces")
-                onToggleRequested: {
-                    root.collapseAllSections(workspacesSection);
-                }
 
                 StyledRect {
                     Layout.fillWidth: true
@@ -517,43 +524,62 @@ RowLayout {
             }
         }
         }
-
-        InnerBorder {
-            leftThickness: 0
-            rightThickness: Appearance.padding.normal / 2
         }
     }
 
     Item {
+        id: rightTaskbarItem
         Layout.fillWidth: true
         Layout.fillHeight: true
 
-        StyledFlickable {
+        ClippingRectangle {
+            id: rightTaskbarClippingRect
             anchors.fill: parent
             anchors.margins: Appearance.padding.normal
             anchors.leftMargin: 0
             anchors.rightMargin: Appearance.padding.normal / 2
 
-            flickableDirection: Flickable.VerticalFlick
+            radius: rightTaskbarBorder.innerRadius
-            contentHeight: contentLayout.height
+            color: "transparent"
 
-            StyledScrollBar.vertical: StyledScrollBar {
+            Loader {
-                flickable: parent
+                id: rightTaskbarLoader
+
+                anchors.fill: parent
+                anchors.margins: Appearance.padding.large * 2
+
+                asynchronous: true
+                sourceComponent: rightTaskbarContentComponent
             }
+        }
 
-            ColumnLayout {
+        InnerBorder {
-                id: contentLayout
+            id: rightTaskbarBorder
 
-                anchors.left: parent.left
+            leftThickness: Appearance.padding.normal / 2
-                anchors.right: parent.right
+        }
-                anchors.top: parent.top
-                anchors.leftMargin: Appearance.padding.large * 2
-                anchors.rightMargin: Appearance.padding.large * 2
-                anchors.topMargin: Appearance.padding.large * 2
 
-                spacing: Appearance.spacing.normal
+        Component {
+            id: rightTaskbarContentComponent
 
-                MaterialIcon {
+            StyledFlickable {
+                flickableDirection: Flickable.VerticalFlick
+                contentHeight: contentLayout.height
+
+                StyledScrollBar.vertical: StyledScrollBar {
+                    flickable: parent
+                }
+
+                ColumnLayout {
+                    id: contentLayout
+
+                    anchors.left: parent.left
+                    anchors.right: parent.right
+                    anchors.top: parent.top
+
+                    spacing: Appearance.spacing.normal
+
+                    MaterialIcon {
                     Layout.alignment: Qt.AlignHCenter
                     text: "task_alt"
                     font.pointSize: Appearance.font.size.extraLarge * 3
@@ -577,7 +603,7 @@ RowLayout {
 
                 StyledText {
                     Layout.alignment: Qt.AlignHCenter
-                    text: clockShowIconSwitch.checked ? qsTr("Clock icon enabled") : qsTr("Clock icon disabled")
+                    text: root.clockShowIcon ? qsTr("Clock icon enabled") : qsTr("Clock icon disabled")
                     color: Colours.palette.m3outline
                 }
 
@@ -597,9 +623,6 @@ RowLayout {
 
             }
         }
-
-        InnerBorder {
-            leftThickness: Appearance.padding.normal / 2
         }
     }
 }