feat: impl nexus nav pane

modules/nexus/NavPane.qml

@@ -0,0 +1,119 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import QtQuick.Layouts
+import Caelestia.Config
+import qs.components
+import qs.components.controls
+import qs.services
+import qs.modules.nexus
+
+ColumnLayout {
+    id: root
+
+    required property NexusState nState
+
+    spacing: Tokens.spacing.extraSmall
+
+    Repeater {
+        id: list
+
+        model: PageRegistry.pages
+
+        StyledRect {
+            id: item
+
+            required property var modelData
+            required property int index
+
+            readonly property bool isCurrentPage: index === root.nState.currentPageIdx
+            readonly property bool isCategoryStart: index === 0 || PageRegistry.pages[index - 1].category !== modelData.category
+            readonly property bool isCategoryEnd: index === list.model.length - 1 || PageRegistry.pages[index + 1].category !== modelData.category
+
+            Layout.fillWidth: true
+            Layout.topMargin: index !== 0 && isCategoryStart ? Tokens.spacing.medium : 0
+            implicitHeight: {
+                const h = layout.implicitHeight + layout.anchors.margins * 2;
+                return h % 2 === 0 ? h : h + 1;
+            }
+
+            color: isCurrentPage ? Colours.palette.m3secondaryContainer : Colours.palette.m3surfaceContainerHigh
+
+            topLeftRadius: stateLayer.pressed ? Tokens.rounding.medium : isCurrentPage ? Tokens.rounding.extraLargeIncreased : isCategoryStart ? Tokens.rounding.extraLarge : Tokens.rounding.extraSmall
+            topRightRadius: stateLayer.pressed ? Tokens.rounding.medium : isCurrentPage ? Tokens.rounding.extraLargeIncreased : isCategoryStart ? Tokens.rounding.extraLarge : Tokens.rounding.extraSmall
+            bottomLeftRadius: stateLayer.pressed ? Tokens.rounding.medium : isCurrentPage ? Tokens.rounding.extraLargeIncreased : isCategoryEnd ? Tokens.rounding.extraLarge : Tokens.rounding.extraSmall
+            bottomRightRadius: stateLayer.pressed ? Tokens.rounding.medium : isCurrentPage ? Tokens.rounding.extraLargeIncreased : isCategoryEnd ? Tokens.rounding.extraLarge : Tokens.rounding.extraSmall
+
+            RadiusBehavior on topLeftRadius {}
+            RadiusBehavior on topRightRadius {}
+            RadiusBehavior on bottomLeftRadius {}
+            RadiusBehavior on bottomRightRadius {}
+
+            StateLayer {
+                id: stateLayer
+
+                anchors.fill: parent
+                topLeftRadius: parent.topLeftRadius
+                topRightRadius: parent.topRightRadius
+                bottomLeftRadius: parent.bottomLeftRadius
+                bottomRightRadius: parent.bottomRightRadius
+
+                onClicked: root.nState.currentPageIdx = item.index
+            }
+
+            RowLayout {
+                id: layout
+
+                anchors.fill: parent
+                anchors.margins: Tokens.padding.large
+                spacing: Tokens.spacing.medium
+
+                StyledRect {
+                    Layout.fillHeight: true
+                    Layout.topMargin: -1
+                    Layout.bottomMargin: -1
+                    implicitWidth: height
+
+                    radius: Tokens.rounding.full
+                    color: item.isCurrentPage ? Colours.palette.m3primary : Colours.palette.m3secondaryContainer
+
+                    MaterialIcon {
+                        anchors.centerIn: parent
+                        anchors.verticalCenterOffset: 1
+
+                        text: item.modelData.icon
+                        color: item.isCurrentPage ? Colours.palette.m3onPrimary : Colours.palette.m3onSecondaryContainer
+                        fontStyle: Tokens.font.icon.medium
+                        fill: 1
+                    }
+                }
+
+                ColumnLayout {
+                    Layout.fillWidth: true
+                    spacing: 0 //Tokens.spacing.extraSmall
+
+                    StyledText {
+                        Layout.fillWidth: true
+                        text: item.modelData.label
+                        font: Tokens.font.title.small
+                        elide: Text.ElideRight
+                    }
+
+                    StyledText {
+                        Layout.fillWidth: true
+                        text: item.modelData.description
+                        color: Colours.palette.m3onSurfaceVariant
+                        font: Tokens.font.label.small
+                        elide: Text.ElideRight
+                    }
+                }
+            }
+        }
+    }
+
+    component RadiusBehavior: Behavior {
+        Anim {
+            type: Anim.DefaultEffects
+        }
+    }
+}

modules/nexus/Nexus.qml

@@ -6,6 +6,7 @@ import Caelestia.Config
 import qs.components
 import qs.components.controls
 import qs.services
+import qs.modules.nexus
 
 Item {
     id: root
@@ -25,7 +26,7 @@ Item {
         id: blobGroup
 
         smoothing: root.Tokens.rounding.largeIncreased
-        color: Colours.palette.m3surfaceContainer
+        color: Colours.palette.m3surfaceContainerLow
     }
 
     BlobInvertedRect {
@@ -33,7 +34,7 @@ Item {
         group: blobGroup
         radius: Tokens.rounding.large
 
-        borderLeft: navPane.implicitWidth + Tokens.padding.medium
+        borderLeft: navPane.width + navPane.anchors.margins * 2
         borderRight: Tokens.padding.medium
         borderTop: Tokens.padding.medium
         borderBottom: Tokens.padding.medium
@@ -72,9 +73,15 @@ Item {
         }
     }
 
-    Item {
+    NavPane {
         id: navPane // TODO
 
-        implicitWidth: 400
+        anchors.top: parent.top
+        anchors.bottom: parent.bottom
+        anchors.left: parent.left
+        anchors.margins: Tokens.padding.large
+
+        nState: nState
+        width: Math.round(root.width / 3)
     }
 }

modules/nexus/PageRegistry.qml

@@ -6,106 +6,87 @@ QtObject {
     id: root
 
     readonly property list<var> pages: [
+        // Appearance
         {
-            label: qsTr("Appearance"),
+            label: qsTr("Look & feel"),
             icon: "palette",
-            description: qsTr("Customise the look and feel of your desktop")
+            description: qsTr("Fonts, colours, transparency"),
+            category: "appearance"
         },
         {
-            label: qsTr("Taskbar"),
+            label: qsTr("Wallpaper & widgets"),
-            icon: "dock_to_bottom",
+            icon: "wallpaper",
-            description: qsTr("Configure your taskbar appearance and behavior")
+            description: qsTr("Wallpaper, desktop widgets"),
-        },
+            category: "appearance"
-        {
-            label: qsTr("Launcher"),
-            icon: "apps",
-            description: qsTr("Customize application launcher settings")
-        },
-        {
-            label: qsTr("Dashboard"),
-            icon: "dashboard",
-            description: qsTr("Configure dashboard widgets and layout")
-        },
-        {
-            label: qsTr("Sidebar"),
-            icon: "side_navigation",
-            description: qsTr("Sidebar panel settings")
-        },
-        {
-            label: qsTr("Utilities"),
-            icon: "handyman",
-            description: qsTr("Quick access utilities and tools")
-        },
-        {
-            label: qsTr("Notifications"),
-            icon: "notifications",
-            description: qsTr("Manage notification settings and behavior")
-        },
-        {
-            label: qsTr("Session"),
-            icon: "account_circle",
-            description: qsTr("User session and power menu settings")
-        },
-        {
-            label: qsTr("Lockscreen"),
-            icon: "lock",
-            description: qsTr("Lock screen appearance and security")
-        },
-        {
-            label: qsTr("Display"),
-            icon: "monitor",
-            title: "Display",
-            description: qsTr("Monitor configuration and display settings")
         },
+
+        // Connectivity
+        // TODO
+        // {
+        //     label: qsTr("Display"),
+        //     icon: "monitor",
+        //     description: qsTr("Output configuration"),
+        //     category: "connectivity"
+        // },
         {
             label: qsTr("Network"),
             icon: "wifi",
-            description: qsTr("Network connections and settings")
+            description: qsTr("Wi-Fi, ethernet"),
-        },
+            category: "connectivity"
-        {
-            label: qsTr("Audio"),
-            icon: "volume_up",
-            description: qsTr("Sound devices and volume control")
         },
         {
             label: qsTr("Bluetooth"),
             icon: "bluetooth",
-            description: qsTr("Bluetooth device management")
+            description: qsTr("Bluetooth pairing"),
+            category: "connectivity"
         },
         {
-            label: qsTr("Location"),
+            label: qsTr("Audio"),
-            icon: "location_on",
+            icon: "volume_up",
-            description: qsTr("Location access and privacy")
+            description: qsTr("App volumes, sound devices"),
+            category: "connectivity"
         },
+
+        // System
         {
-            label: qsTr("Screen recorder"),
+            label: qsTr("Updates"),
-            icon: "screen_record",
+            icon: "update",
-            description: qsTr("Screen recording settings")
+            description: qsTr("System updates"),
-        },
+            category: "system"
-        {
-            label: qsTr("Power"),
-            icon: "power_settings_new",
-            description: qsTr("Power management and battery settings")
         },
         {
             label: qsTr("Plugins"),
             icon: "extension",
-            description: qsTr("Manage and configure plugins")
+            description: qsTr("Manage plugins"),
+            category: "system"
+        },
+
+        // Shell
+        {
+            label: qsTr("Panels"),
+            icon: "dock_to_bottom",
+            description: qsTr("Dashboard, taskbar, launcher, sidebar"),
+            category: "shell"
         },
         {
-            label: qsTr("Hooks"),
+            label: qsTr("Services"),
-            icon: "link",
+            icon: "build",
-            description: qsTr("System hooks and automation")
+            description: qsTr("Poll intervals, lyrics backend"),
+            category: "shell"
         },
+        {
+            label: qsTr("Language & region"),
+            icon: "build",
+            description: qsTr("UI language, weather location, display units"),
+            category: "shell"
+        },
+
+        // About
         {
             label: qsTr("About"),
             icon: "info",
-            description: qsTr("System information and credits")
+            description: qsTr("System information, credits"),
+            category: "about"
         },
-        {
-            label: qsTr("Updates"),
-            icon: "update",
-            description: qsTr("System updates and changelog")
-        }
     ]
 }