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

1 files changed, 37 insertions, 56 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;
+    }
+}