2 files changed, 175 insertions, 67 deletions

diff --git a/modules/controlcenter/network/NetworkList.qml b/modules/controlcenter/network/NetworkList.qml
index df05de7..f528092 100644
--- a/modules/controlcenter/network/NetworkList.qml
+++ b/modules/controlcenter/network/NetworkList.qml
@@ -29,74 +29,38 @@ ColumnLayout {
             Layout.fillWidth: true
         }
 
-        StyledRect {
-            implicitWidth: implicitHeight
-            implicitHeight: wifiIcon.implicitHeight + Appearance.padding.normal * 2
+        ToggleButton {
+            toggled: Network.wifiEnabled
+            icon: "wifi"
+            accent: "Tertiary"
 
-            radius: Appearance.rounding.normal
-            color: Network.wifiEnabled ? Colours.palette.m3tertiary : Colours.palette.m3tertiaryContainer
-
-            StateLayer {
-                function onClicked(): void {
-                    Network.toggleWifi();
-                }
-            }
-
-            MaterialIcon {
-                id: wifiIcon
-
-                anchors.centerIn: parent
-                text: "wifi"
-                color: Network.wifiEnabled ? Colours.palette.m3onTertiary : Colours.palette.m3onTertiaryContainer
+            function onClicked(): void {
+                Network.toggleWifi();
             }
         }
 
-        StyledRect {
-            implicitWidth: implicitHeight
-            implicitHeight: scanIcon.implicitHeight + Appearance.padding.normal * 2
-
-            radius: Appearance.rounding.normal
-            color: Network.scanning ? Colours.palette.m3secondary : Colours.palette.m3secondaryContainer
+        ToggleButton {
+            toggled: Network.scanning
+            icon: "wifi_find"
+            accent: "Secondary"
 
-            StateLayer {
-                function onClicked(): void {
-                    Network.rescanWifi();
-                }
-            }
-
-            MaterialIcon {
-                id: scanIcon
-
-                anchors.centerIn: parent
-                text: "wifi_find"
-                color: Network.scanning ? Colours.palette.m3onSecondary : Colours.palette.m3onSecondaryContainer
+            function onClicked(): void {
+                Network.rescanWifi();
             }
         }
 
-        StyledRect {
-            implicitWidth: implicitHeight
-            implicitHeight: settingsIcon.implicitHeight + Appearance.padding.normal * 2
+        ToggleButton {
+            toggled: !root.session.network.active
+            icon: "settings"
+            accent: "Primary"
 
-            radius: Appearance.rounding.normal
-            color: !root.session.network.active ? Colours.palette.m3primary : Colours.palette.m3primaryContainer
-
-            StateLayer {
-                function onClicked(): void {
-                    if (root.session.network.active)
-                        root.session.network.active = null;
-                    else {
-                        root.session.network.active = view.model.get(0)?.modelData ?? null;
-                    }
+            function onClicked(): void {
+                if (root.session.network.active)
+                    root.session.network.active = null;
+                else {
+                    root.session.network.active = view.model.get(0)?.modelData ?? null;
                 }
             }
-
-            MaterialIcon {
-                id: settingsIcon
-
-                anchors.centerIn: parent
-                text: "settings"
-                color: !root.session.network.active ? Colours.palette.m3onPrimary : Colours.palette.m3onPrimaryContainer
-            }
         }
     }
 
@@ -258,4 +222,79 @@ 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
+            }
+        }
+    }
 }
diff --git a/modules/controlcenter/network/NetworkPane.qml b/modules/controlcenter/network/NetworkPane.qml
index 5e8a75a..fe18274 100644
--- a/modules/controlcenter/network/NetworkPane.qml
+++ b/modules/controlcenter/network/NetworkPane.qml
@@ -5,6 +5,7 @@ import qs.components
 import qs.components.effects
 import qs.components.containers
 import qs.config
+import Quickshell.Widgets
 import QtQuick
 import QtQuick.Layouts
 
@@ -41,30 +42,92 @@ RowLayout {
         Layout.fillWidth: true
         Layout.fillHeight: true
 
-        Loader {
-            id: loader
-
+        ClippingRectangle {
             anchors.fill: parent
-            anchors.margins: Appearance.padding.large * 2
+            anchors.margins: Appearance.padding.normal
+            anchors.leftMargin: 0
+            anchors.rightMargin: Appearance.padding.normal / 2
+
+            radius: rightBorder.innerRadius
+            color: "transparent"
+
+            Loader {
+                id: loader
+
+                property var pane: root.session.network.active
+                property string paneId: pane ? (pane.ssid || pane.bssid || "") : ""
 
-            sourceComponent: root.session.network.active ? details : settings
+                anchors.fill: parent
+                anchors.margins: Appearance.padding.large * 2
+
+                opacity: 1
+                scale: 1
+                transformOrigin: Item.Center
+
+                clip: false
+                asynchronous: true
+                sourceComponent: pane ? details : settings
+
+                Behavior on paneId {
+                    SequentialAnimation {
+                        ParallelAnimation {
+                            Anim {
+                                target: loader
+                                property: "opacity"
+                                to: 0
+                                easing.bezierCurve: Appearance.anim.curves.standardAccel
+                            }
+                            Anim {
+                                target: loader
+                                property: "scale"
+                                to: 0.8
+                                easing.bezierCurve: Appearance.anim.curves.standardAccel
+                            }
+                        }
+                        PropertyAction {}
+                        ParallelAnimation {
+                            Anim {
+                                target: loader
+                                property: "opacity"
+                                to: 1
+                                easing.bezierCurve: Appearance.anim.curves.standardDecel
+                            }
+                            Anim {
+                                target: loader
+                                property: "scale"
+                                to: 1
+                                easing.bezierCurve: Appearance.anim.curves.standardDecel
+                            }
+                        }
+                    }
+                }
 
-            Behavior on opacity {
-                NumberAnimation {
-                    duration: 200
+                onPaneChanged: {
+                    paneId = pane ? (pane.ssid || pane.bssid || "") : "";
                 }
             }
         }
 
         InnerBorder {
+            id: rightBorder
+
             leftThickness: Appearance.padding.normal / 2
         }
 
         Component {
             id: settings
 
-            Settings {
-                session: root.session
+            StyledFlickable {
+                flickableDirection: Flickable.VerticalFlick
+                contentHeight: settingsInner.height
+
+                Settings {
+                    id: settingsInner
+
+                    anchors.left: parent.left
+                    anchors.right: parent.right
+                    session: root.session
+                }
             }
         }
 
@@ -82,4 +145,10 @@ RowLayout {
         session: root.session
         z: 1000
     }
+
+    component Anim: NumberAnimation {
+        target: loader
+        duration: Appearance.anim.durations.normal / 2
+        easing.type: Easing.BezierSpline
+    }
 }