feat: add network page

modules/nexus/PageCompRegistry.qml

@@ -11,6 +11,7 @@ QtObject {
     readonly property list<Component> pageComps: [
         // Appearance
         Component {
+            // Wallpaper & style
             StackPage {
                 Component {
                     WallpaperAndStyle {}
@@ -25,6 +26,16 @@ QtObject {
                     ColourSelect {}
                 }
             }
+        },
+
+        // Connectivity
+        Component {
+            // Network
+            StackPage {
+                Component {
+                    NetworkPage {}
+                }
+            }
         }
     ]
 }

modules/nexus/common/ToggleRow.qml

@@ -10,18 +10,25 @@ StyledSwitch {
     property string subtext
     property bool first
     property bool last
+    readonly property alias bg: bg
 
-    implicitWidth: implicitContentWidth + implicitIndicatorWidth + Tokens.padding.largeIncreased * 2
+    horizontalPadding: Tokens.padding.largeIncreased
-    implicitHeight: Math.max(implicitContentHeight, implicitIndicatorHeight) + Tokens.padding.medium * 2
+    verticalPadding: Tokens.padding.medium
+    font: Tokens.font.body.small
+
+    implicitWidth: implicitContentWidth + implicitIndicatorWidth + horizontalPadding * 2
+    implicitHeight: Math.max(implicitContentHeight, implicitIndicatorHeight) + verticalPadding * 2
     cLayer: 2
 
     indicator.anchors.verticalCenter: verticalCenter
     indicator.anchors.right: right
-    indicator.anchors.rightMargin: Tokens.padding.large
+    indicator.anchors.rightMargin: root.horizontalPadding
 
     onPressed: stateLayer.press(stateLayer.mouseX, stateLayer.mouseY)
 
     background: StyledRect {
+        id: bg
+
         color: Colours.tPalette.m3surfaceContainer
         topLeftRadius: root.first ? Tokens.rounding.extraLarge : Tokens.rounding.extraSmall
         topRightRadius: root.first ? Tokens.rounding.extraLarge : Tokens.rounding.extraSmall
@@ -43,7 +50,7 @@ StyledSwitch {
     contentItem: Item {
         anchors.left: parent.left
         anchors.right: root.indicator.left
-        anchors.leftMargin: Tokens.padding.large
+        anchors.leftMargin: root.horizontalPadding
         anchors.rightMargin: Tokens.spacing.medium
 
         implicitWidth: column.implicitWidth
@@ -58,11 +65,13 @@ StyledSwitch {
             spacing: 0
 
             StyledText {
+                id: label
+
                 anchors.left: parent.left
                 anchors.right: parent.right
 
                 text: root.text
-                font: Tokens.font.body.small
+                font: root.font
                 elide: Text.ElideRight
             }
 

modules/nexus/pages/NetworkPage.qml

@@ -0,0 +1,145 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import QtQuick.Layouts
+import Caelestia.Components
+import Caelestia.Config
+import qs.components
+import qs.components.controls
+import qs.services
+import qs.utils
+import qs.modules.nexus.common
+
+PageBase {
+    id: root
+
+    title: qsTr("Network")
+
+    ColumnLayout {
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.top: parent.top
+        width: root.cappedWidth
+        spacing: Tokens.spacing.extraSmall / 2
+
+        ToggleRow {
+            Layout.fillWidth: true
+            first: true
+            text: qsTr("Wi-Fi")
+            font: Tokens.font.title.medium
+            checked: Network.wifiEnabled
+            onToggled: Network.enableWifi(checked)
+
+            horizontalPadding: Tokens.padding.largeIncreased
+            verticalPadding: Tokens.padding.medium
+        }
+
+        StyledRect {
+            Layout.fillWidth: true
+            implicitHeight: networkList.implicitHeight + networkList.anchors.margins * 2
+            radius: Tokens.rounding.extraSmall
+            color: Colours.tPalette.m3surfaceContainer
+
+            ColumnLayout {
+                id: networkList
+
+                anchors.fill: parent
+                spacing: 0
+
+                Repeater {
+                    model: Network.networks
+
+                    StateLayer {
+                        id: network
+
+                        required property Network.AccessPoint modelData
+
+                        Layout.fillWidth: true
+                        implicitHeight: networkLayout.implicitHeight + networkLayout.anchors.margins * 2
+                        radius: Tokens.rounding.extraSmall
+                        anchors.fill: undefined
+
+                        RowLayout {
+                            id: networkLayout
+
+                            anchors.fill: parent
+                            anchors.margins: Tokens.padding.medium
+                            anchors.leftMargin: Tokens.padding.largeIncreased
+                            anchors.rightMargin: Tokens.padding.largeIncreased
+                            spacing: Tokens.spacing.medium
+
+                            MaterialIcon {
+                                text: Icons.getNetworkIcon(network.modelData.strength)
+                                color: network.modelData.active ? Colours.palette.m3primary : Colours.tPalette.m3onSurfaceVariant
+                                font: Tokens.font.icon.medium
+                            }
+
+                            ColumnLayout {
+                                Layout.fillWidth: true
+                                spacing: 0
+
+                                StyledText {
+                                    Layout.fillWidth: true
+                                    text: network.modelData.ssid
+                                    font: Tokens.font.body.small
+                                    elide: Text.ElideRight
+                                }
+
+                                StyledText {
+                                    Layout.fillWidth: true
+                                    text: qsTr("Security: %1").arg(network.modelData.security)
+                                    color: Colours.tPalette.m3outline
+                                    font: Tokens.font.label.small
+                                    elide: Text.ElideRight
+                                }
+                            }
+
+                            MaterialIcon {
+                                visible: network.modelData.isSecure
+                                text: network.modelData.active ? "settings" : "lock"
+                                color: network.modelData.active ? Colours.palette.m3primary : Colours.tPalette.m3onSurfaceVariant
+                                font: Tokens.font.icon.medium
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        StyledRect {
+            Layout.fillWidth: true
+            bottomLeftRadius: Tokens.rounding.extraLarge
+            bottomRightRadius: Tokens.rounding.extraLarge
+            radius: Tokens.rounding.extraSmall
+
+            implicitHeight: addNetworkLayout.implicitHeight + addNetworkLayout.anchors.margins * 2
+            color: Colours.tPalette.m3surfaceContainer
+
+            StateLayer {}
+
+            RowLayout {
+                id: addNetworkLayout
+
+                anchors.fill: parent
+                anchors.margins: Tokens.padding.medium
+                anchors.leftMargin: Tokens.padding.largeIncreased
+                anchors.rightMargin: Tokens.padding.largeIncreased
+
+                spacing: Tokens.spacing.medium
+
+                MaterialIcon {
+                    text: "add"
+                    color: Colours.tPalette.m3onSurfaceVariant
+                    font: Tokens.font.icon.medium
+                }
+
+                StyledText {
+                    Layout.fillWidth: true
+                    text: qsTr("Add network")
+                    color: Colours.tPalette.m3onSurfaceVariant
+                    font: Tokens.font.body.small
+                    elide: Text.ElideRight
+                }
+            }
+        }
+    }
+}