controlcenter: many setting panes and minor features

components/ConnectionHeader.qml

@@ -0,0 +1,32 @@
+import qs.components
+import qs.services
+import qs.config
+import QtQuick
+import QtQuick.Layouts
+
+ColumnLayout {
+    id: root
+
+    required property string icon
+    required property string title
+
+    spacing: Appearance.spacing.normal
+    Layout.alignment: Qt.AlignHCenter
+
+    MaterialIcon {
+        Layout.alignment: Qt.AlignHCenter
+        animate: true
+        text: root.icon
+        font.pointSize: Appearance.font.size.extraLarge * 3
+        font.bold: true
+    }
+
+    StyledText {
+        Layout.alignment: Qt.AlignHCenter
+        animate: true
+        text: root.title
+        font.pointSize: Appearance.font.size.large
+        font.bold: true
+    }
+}
+

components/ConnectionInfoSection.qml

@@ -0,0 +1,60 @@
+import qs.components
+import qs.components.effects
+import qs.services
+import qs.config
+import QtQuick
+import QtQuick.Layouts
+
+ColumnLayout {
+    id: root
+
+    required property var deviceDetails
+
+    spacing: Appearance.spacing.small / 2
+
+    StyledText {
+        text: qsTr("IP Address")
+    }
+
+    StyledText {
+        text: root.deviceDetails?.ipAddress || qsTr("Not available")
+        color: Colours.palette.m3outline
+        font.pointSize: Appearance.font.size.small
+    }
+
+    StyledText {
+        Layout.topMargin: Appearance.spacing.normal
+        text: qsTr("Subnet Mask")
+    }
+
+    StyledText {
+        text: root.deviceDetails?.subnet || qsTr("Not available")
+        color: Colours.palette.m3outline
+        font.pointSize: Appearance.font.size.small
+    }
+
+    StyledText {
+        Layout.topMargin: Appearance.spacing.normal
+        text: qsTr("Gateway")
+    }
+
+    StyledText {
+        text: root.deviceDetails?.gateway || qsTr("Not available")
+        color: Colours.palette.m3outline
+        font.pointSize: Appearance.font.size.small
+    }
+
+    StyledText {
+        Layout.topMargin: Appearance.spacing.normal
+        text: qsTr("DNS Servers")
+    }
+
+    StyledText {
+        text: (root.deviceDetails && root.deviceDetails.dns && root.deviceDetails.dns.length > 0) ? root.deviceDetails.dns.join(", ") : qsTr("Not available")
+        color: Colours.palette.m3outline
+        font.pointSize: Appearance.font.size.small
+        wrapMode: Text.Wrap
+        Layout.maximumWidth: parent.width
+    }
+}
+

components/PropertyRow.qml

@@ -0,0 +1,27 @@
+import qs.components
+import qs.services
+import qs.config
+import QtQuick
+import QtQuick.Layouts
+
+ColumnLayout {
+    id: root
+
+    required property string label
+    required property string value
+    property bool showTopMargin: false
+
+    spacing: Appearance.spacing.small / 2
+
+    StyledText {
+        Layout.topMargin: root.showTopMargin ? Appearance.spacing.normal : 0
+        text: root.label
+    }
+
+    StyledText {
+        text: root.value
+        color: Colours.palette.m3outline
+        font.pointSize: Appearance.font.size.small
+    }
+}
+

components/SectionContainer.qml

@@ -0,0 +1,35 @@
+import qs.components
+import qs.components.effects
+import qs.services
+import qs.config
+import QtQuick
+import QtQuick.Layouts
+
+StyledRect {
+    id: root
+
+    default property alias content: contentColumn.data
+    property real contentSpacing: Appearance.spacing.larger
+    property bool alignTop: false
+
+    Layout.fillWidth: true
+    implicitHeight: contentColumn.implicitHeight + Appearance.padding.large * 2
+
+    radius: Appearance.rounding.normal
+    color: Colours.transparency.enabled 
+           ? Colours.layer(Colours.palette.m3surfaceContainer, 2)
+           : Colours.palette.m3surfaceContainerHigh
+
+    ColumnLayout {
+        id: contentColumn
+
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.top: root.alignTop ? parent.top : undefined
+        anchors.verticalCenter: root.alignTop ? undefined : parent.verticalCenter
+        anchors.margins: Appearance.padding.large
+
+        spacing: root.contentSpacing
+    }
+}
+

components/SectionHeader.qml

@@ -0,0 +1,28 @@
+import qs.components
+import qs.services
+import qs.config
+import QtQuick
+import QtQuick.Layouts
+
+ColumnLayout {
+    id: root
+
+    required property string title
+    property string description: ""
+
+    spacing: 0
+
+    StyledText {
+        Layout.topMargin: Appearance.spacing.large
+        text: root.title
+        font.pointSize: Appearance.font.size.larger
+        font.weight: 500
+    }
+
+    StyledText {
+        visible: root.description !== ""
+        text: root.description
+        color: Colours.palette.m3outline
+    }
+}
+

components/StateLayer.qml

@@ -6,6 +6,7 @@ MouseArea {
     id: root
 
     property bool disabled
+    property bool showHoverBackground: true
     property color color: Colours.palette.m3onSurface
     property real radius: parent?.radius ?? 0
     property alias rect: hoverLayer
@@ -75,7 +76,7 @@ MouseArea {
 
         anchors.fill: parent
 
-        color: Qt.alpha(root.color, root.disabled ? 0 : root.pressed ? 0.1 : root.containsMouse ? 0.08 : 0)
+        color: Qt.alpha(root.color, root.disabled ? 0 : root.pressed ? 0.12 : (root.showHoverBackground && root.containsMouse) ? 0.08 : 0)
         radius: root.radius
 
         StyledRect {

components/controls/CollapsibleSection.qml

@@ -0,0 +1,135 @@
+import ".."
+import qs.components
+import qs.components.effects
+import qs.services
+import qs.config
+import QtQuick
+import QtQuick.Layouts
+
+ColumnLayout {
+    id: root
+
+    required property string title
+    property string description: ""
+    property bool expanded: false
+    property bool showBackground: false
+    property bool nested: false
+
+    signal toggleRequested
+
+    spacing: Appearance.spacing.small
+    Layout.fillWidth: true
+
+    Item {
+        id: sectionHeaderItem
+        Layout.fillWidth: true
+        Layout.preferredHeight: Math.max(titleRow.implicitHeight + Appearance.padding.normal * 2, 48)
+
+        RowLayout {
+            id: titleRow
+            anchors.left: parent.left
+            anchors.right: parent.right
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.leftMargin: Appearance.padding.normal
+            anchors.rightMargin: Appearance.padding.normal
+            spacing: Appearance.spacing.normal
+
+            StyledText {
+                text: root.title
+                font.pointSize: Appearance.font.size.larger
+                font.weight: 500
+            }
+
+            Item {
+                Layout.fillWidth: true
+            }
+
+            MaterialIcon {
+                text: "expand_more"
+                rotation: root.expanded ? 180 : 0
+                color: Colours.palette.m3onSurfaceVariant
+                font.pointSize: Appearance.font.size.normal
+                Behavior on rotation {
+                    Anim {
+                        duration: Appearance.anim.durations.small
+                        easing.bezierCurve: Appearance.anim.curves.standard
+                    }
+                }
+            }
+        }
+
+        StateLayer {
+            anchors.fill: parent
+            color: Colours.palette.m3onSurface
+            radius: Appearance.rounding.normal
+            showHoverBackground: false
+            function onClicked(): void {
+                root.toggleRequested();
+                root.expanded = !root.expanded;
+            }
+        }
+    }
+
+    default property alias content: contentColumn.data
+
+    Item {
+        id: contentWrapper
+        Layout.fillWidth: true
+        Layout.preferredHeight: root.expanded ? (contentColumn.implicitHeight + Appearance.spacing.small * 2) : 0
+        clip: true
+
+        Behavior on Layout.preferredHeight {
+            Anim {
+                easing.bezierCurve: Appearance.anim.curves.standard
+            }
+        }
+
+        StyledRect {
+            id: backgroundRect
+            anchors.fill: parent
+            radius: Appearance.rounding.normal
+            color: Colours.transparency.enabled 
+                   ? Colours.layer(Colours.palette.m3surfaceContainer, root.nested ? 3 : 2)
+                   : (root.nested ? Colours.palette.m3surfaceContainerHigh : Colours.palette.m3surfaceContainer)
+            opacity: root.showBackground && root.expanded ? 1.0 : 0.0
+            visible: root.showBackground
+
+            Behavior on opacity {
+                Anim {
+                    easing.bezierCurve: Appearance.anim.curves.standard
+                }
+            }
+        }
+
+        ColumnLayout {
+            id: contentColumn
+            anchors.left: parent.left
+            anchors.right: parent.right
+            y: Appearance.spacing.small
+            anchors.leftMargin: Appearance.padding.normal
+            anchors.rightMargin: Appearance.padding.normal
+            anchors.bottomMargin: Appearance.spacing.small
+            spacing: Appearance.spacing.small
+            opacity: root.expanded ? 1.0 : 0.0
+
+            Behavior on opacity {
+                Anim {
+                    easing.bezierCurve: Appearance.anim.curves.standard
+                }
+            }
+
+            StyledText {
+                id: descriptionText
+                Layout.fillWidth: true
+                Layout.topMargin: root.description !== "" ? Appearance.spacing.smaller : 0
+                Layout.bottomMargin: root.description !== "" ? Appearance.spacing.small : 0
+                visible: root.description !== ""
+                text: root.description
+                color: Colours.palette.m3onSurfaceVariant
+                font.pointSize: Appearance.font.size.small
+                wrapMode: Text.Wrap
+            }
+        }
+    }
+}
+