refactor: Updated Bluetooth, Ethernet, and Wireless lists to use DeviceList component and improved layout structure

2 files changed, 106 insertions, 139 deletions

diff --git a/modules/controlcenter/network/EthernetList.qml b/modules/controlcenter/network/EthernetList.qml
index 45c9481..03bd37e 100644
--- a/modules/controlcenter/network/EthernetList.qml
+++ b/modules/controlcenter/network/EthernetList.qml
@@ -1,6 +1,7 @@
 pragma ComponentBehavior: Bound
 
 import ".."
+import "../components"
 import qs.components
 import qs.components.controls
 import qs.components.containers
@@ -9,81 +10,57 @@ import qs.config
 import QtQuick
 import QtQuick.Layouts
 
-ColumnLayout {
+DeviceList {
     id: root
 
     required property Session session
 
-    spacing: Appearance.spacing.small
+    title: qsTr("Devices (%1)").arg(Nmcli.ethernetDevices.length)
+    description: qsTr("All available ethernet devices")
+    activeItem: session.ethernet.active
 
-    RowLayout {
-        spacing: Appearance.spacing.smaller
+    model: Nmcli.ethernetDevices
 
-        StyledText {
-            text: qsTr("Settings")
-            font.pointSize: Appearance.font.size.large
-            font.weight: 500
-        }
-
-        Item {
-            Layout.fillWidth: true
-        }
+    headerComponent: Component {
+        RowLayout {
+            spacing: Appearance.spacing.smaller
 
-        ToggleButton {
-            toggled: !root.session.ethernet.active
-            icon: "settings"
-            accent: "Primary"
+            StyledText {
+                text: qsTr("Settings")
+                font.pointSize: Appearance.font.size.large
+                font.weight: 500
+            }
 
-            onClicked: {
-                if (root.session.ethernet.active)
-                    root.session.ethernet.active = null;
-                else {
-                    root.session.ethernet.active = view.model.get(0)?.modelData ?? null;
-                }
+            Item {
+                Layout.fillWidth: true
             }
-        }
-    }
 
-    RowLayout {
-        Layout.fillWidth: true
-        spacing: Appearance.spacing.small
+            ToggleButton {
+                toggled: !root.session.ethernet.active
+                icon: "settings"
+                accent: "Primary"
 
-        StyledText {
-            text: qsTr("Devices (%1)").arg(Nmcli.ethernetDevices.length)
-            font.pointSize: Appearance.font.size.large
-            font.weight: 500
+                onClicked: {
+                    if (root.session.ethernet.active)
+                        root.session.ethernet.active = null;
+                    else {
+                        root.session.ethernet.active = root.view.model.get(0)?.modelData ?? null;
+                    }
+                }
+            }
         }
     }
 
-    StyledText {
-        text: qsTr("All available ethernet devices")
-        color: Colours.palette.m3outline
-    }
-
-    StyledListView {
-        id: view
-
-        Layout.fillWidth: true
-        Layout.fillHeight: true
-
-        model: Nmcli.ethernetDevices
-
-        spacing: Appearance.spacing.small / 2
-        clip: true
-
-        StyledScrollBar.vertical: StyledScrollBar {
-            flickable: view
-        }
-
-        delegate: StyledRect {
+    delegate: Component {
+        StyledRect {
             required property var modelData
 
             anchors.left: parent.left
             anchors.right: parent.right
 
-            color: Qt.alpha(Colours.tPalette.m3surfaceContainer, root.session.ethernet.active === modelData ? Colours.tPalette.m3surfaceContainer.a : 0)
+            color: Qt.alpha(Colours.tPalette.m3surfaceContainer, root.activeItem === modelData ? Colours.tPalette.m3surfaceContainer.a : 0)
             radius: Appearance.rounding.normal
-            border.width: root.session.ethernet.active === modelData ? 1 : 0
+            border.width: root.activeItem === modelData ? 1 : 0
             border.color: Colours.palette.m3primary
 
             StateLayer {
@@ -165,4 +142,8 @@ ColumnLayout {
             implicitHeight: rowLayout.implicitHeight + Appearance.padding.normal * 2
         }
     }
-}
\ No newline at end of file
+
+    onItemSelected: function(item) {
+        session.ethernet.active = item;
+    }
+}
diff --git a/modules/controlcenter/network/WirelessList.qml b/modules/controlcenter/network/WirelessList.qml
index 18f728c..2f0288f 100644
--- a/modules/controlcenter/network/WirelessList.qml
+++ b/modules/controlcenter/network/WirelessList.qml
@@ -1,6 +1,7 @@
 pragma ComponentBehavior: Bound
 
 import ".."
+import "../components"
 import "."
 import qs.components
 import qs.components.controls
@@ -11,116 +12,94 @@ import qs.utils
 import QtQuick
 import QtQuick.Layouts
 
-ColumnLayout {
+DeviceList {
     id: root
 
     required property Session session
 
-    spacing: Appearance.spacing.small
-
-    RowLayout {
-        spacing: Appearance.spacing.smaller
-
+    title: qsTr("Networks (%1)").arg(Nmcli.networks.length)
+    description: qsTr("All available WiFi networks")
+    activeItem: session.network.active
+    
+    titleSuffix: Component {
         StyledText {
-            text: qsTr("Settings")
-            font.pointSize: Appearance.font.size.large
-            font.weight: 500
+            visible: Nmcli.scanning
+            text: qsTr("Scanning...")
+            color: Colours.palette.m3primary
+            font.pointSize: Appearance.font.size.small
         }
+    }
 
-        Item {
-            Layout.fillWidth: true
-        }
+    model: ScriptModel {
+        values: [...Nmcli.networks].sort((a, b) => {
+            // Put active/connected network first
+            if (a.active !== b.active)
+                return b.active - a.active;
+            // Then sort by signal strength
+            return b.strength - a.strength;
+        })
+    }
 
-        ToggleButton {
-            toggled: Nmcli.wifiEnabled
-            icon: "wifi"
-            accent: "Tertiary"
+    headerComponent: Component {
+        RowLayout {
+            spacing: Appearance.spacing.smaller
 
-            onClicked: {
-                Nmcli.toggleWifi(null);
+            StyledText {
+                text: qsTr("Settings")
+                font.pointSize: Appearance.font.size.large
+                font.weight: 500
             }
-        }
 
-        ToggleButton {
-            toggled: Nmcli.scanning
-            icon: "wifi_find"
-            accent: "Secondary"
-
-            onClicked: {
-                Nmcli.rescanWifi();
+            Item {
+                Layout.fillWidth: true
             }
-        }
 
-        ToggleButton {
-            toggled: !root.session.network.active
-            icon: "settings"
-            accent: "Primary"
+            ToggleButton {
+                toggled: Nmcli.wifiEnabled
+                icon: "wifi"
+                accent: "Tertiary"
 
-            onClicked: {
-                if (root.session.network.active)
-                    root.session.network.active = null;
-                else {
-                    root.session.network.active = view.model.get(0)?.modelData ?? null;
+                onClicked: {
+                    Nmcli.toggleWifi(null);
                 }
             }
-        }
-    }
-
-    RowLayout {
-        Layout.fillWidth: true
-        spacing: Appearance.spacing.small
 
-        StyledText {
-            text: qsTr("Networks (%1)").arg(Nmcli.networks.length)
-            font.pointSize: Appearance.font.size.large
-            font.weight: 500
-        }
+            ToggleButton {
+                toggled: Nmcli.scanning
+                icon: "wifi_find"
+                accent: "Secondary"
 
-        StyledText {
-            visible: Nmcli.scanning
-            text: qsTr("Scanning...")
-            color: Colours.palette.m3primary
-            font.pointSize: Appearance.font.size.small
-        }
-    }
-
-    StyledText {
-        text: qsTr("All available WiFi networks")
-        color: Colours.palette.m3outline
-    }
-
-    StyledListView {
-        id: view
-
-        Layout.fillWidth: true
-        Layout.fillHeight: true
-
-        model: ScriptModel {
-            values: [...Nmcli.networks].sort((a, b) => {
-                // Put active/connected network first
-                if (a.active !== b.active)
-                    return b.active - a.active;
-                // Then sort by signal strength
-                return b.strength - a.strength;
-            })
-        }
+                onClicked: {
+                    Nmcli.rescanWifi();
+                }
+            }
 
-        spacing: Appearance.spacing.small / 2
-        clip: true
+            ToggleButton {
+                toggled: !root.session.network.active
+                icon: "settings"
+                accent: "Primary"
 
-        StyledScrollBar.vertical: StyledScrollBar {
-            flickable: view
+                onClicked: {
+                    if (root.session.network.active)
+                        root.session.network.active = null;
+                    else {
+                        root.session.network.active = root.view.model.get(0)?.modelData ?? null;
+                    }
+                }
+            }
         }
+    }
 
-        delegate: StyledRect {
+    delegate: Component {
+        StyledRect {
             required property var modelData
 
             anchors.left: parent.left
             anchors.right: parent.right
 
-            color: Qt.alpha(Colours.tPalette.m3surfaceContainer, root.session.network.active === modelData ? Colours.tPalette.m3surfaceContainer.a : 0)
+            color: Qt.alpha(Colours.tPalette.m3surfaceContainer, root.activeItem === modelData ? Colours.tPalette.m3surfaceContainer.a : 0)
             radius: Appearance.rounding.normal
-            border.width: root.session.network.active === modelData ? 1 : 0
+            border.width: root.activeItem === modelData ? 1 : 0
             border.color: Colours.palette.m3primary
 
             StateLayer {
@@ -213,9 +192,16 @@ ColumnLayout {
         }
     }
 
+    onItemSelected: function(item) {
+        session.network.active = item;
+        if (item && item.ssid) {
+            checkSavedProfileForNetwork(item.ssid);
+        }
+    }
+
     function checkSavedProfileForNetwork(ssid: string): void {
         if (ssid && ssid.length > 0) {
             Nmcli.loadSavedConnections(() => {});
         }
     }
-}
\ No newline at end of file
+}