refactor: add page base component

Also put page content inside flickable

modules/nexus/common/PageBase.qml

@@ -0,0 +1,64 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import QtQuick.Layouts
+import Caelestia.Config
+import qs.components
+import qs.components.containers
+import qs.components.controls
+import qs.services
+import qs.modules.nexus
+
+ColumnLayout {
+    id: root
+
+    required property string title
+    required property NexusState nState
+    property bool isSubPage
+    readonly property int cappedWidth: Math.min(800, width)
+
+    default property Item contentChild
+
+    signal close
+
+    spacing: Tokens.spacing.extraExtraLarge
+
+    RowLayout {
+        spacing: Tokens.spacing.largeIncreased
+
+        Loader {
+            visible: active
+            active: root.isSubPage
+            asynchronous: true
+            sourceComponent: IconButton {
+                icon: "arrow_back"
+                font: Tokens.font.icon.medium
+                type: IconButton.Tonal
+                isRound: true
+                inactiveColour: Colours.tPalette.m3surfaceContainerHigh
+                inactiveOnColour: Colours.palette.m3onSurface
+                onClicked: root.close()
+            }
+        }
+
+        StyledText {
+            text: root.title
+            font: Tokens.font.title.large
+        }
+    }
+
+    VerticalFadeFlickable {
+        id: flickable
+
+        Layout.fillWidth: true
+        Layout.fillHeight: true
+
+        Layout.topMargin: -topMargin
+        Layout.bottomMargin: -bottomMargin
+        topMargin: Tokens.padding.large
+        bottomMargin: Tokens.padding.large
+
+        contentHeight: root.contentChild?.implicitHeight ?? 0
+        contentItem.children: [root.contentChild]
+    }
+}

modules/nexus/pages/WallpaperAndStyle.qml

@@ -2,34 +2,29 @@ pragma ComponentBehavior: Bound
 
 import QtQuick
 import QtQuick.Layouts
-import Quickshell
 import Caelestia.Components
 import Caelestia.Config
 import qs.components
 import qs.components.controls
 import qs.components.images
 import qs.services
-import qs.modules.nexus
 import qs.modules.nexus.common
 
-ColumnLayout {
+PageBase {
     id: root
 
-    required property NexusState nState
+    title: qsTr("Wallpaper & style")
-    readonly property int cappedWidth: Math.min(800, width)
 
+    ColumnLayout {
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.top: parent.top
+        width: root.cappedWidth
         spacing: Tokens.spacing.large
 
-    StyledText {
-        text: qsTr("Wallpaper & style")
-        font: Tokens.font.title.large
-    }
-
         StyledClippingRect {
             id: wallWrapper
 
             Layout.alignment: Qt.AlignHCenter
-        Layout.topMargin: Tokens.spacing.extraLarge
             implicitWidth: {
                 const screen = root.nState.screen;
                 return implicitHeight / screen.height * screen.width;
@@ -175,8 +170,7 @@ ColumnLayout {
         }
 
         ToggleRow {
-        Layout.alignment: Qt.AlignHCenter
+            Layout.fillWidth: true
-        implicitWidth: root.cappedWidth
 
             first: true
             text: qsTr("Display wallpaper")
@@ -186,8 +180,7 @@ ColumnLayout {
 
         ToggleRow {
             Layout.topMargin: Tokens.spacing.extraSmall / 2 - parent.spacing
-        Layout.alignment: Qt.AlignHCenter
+            Layout.fillWidth: true
-        implicitWidth: root.cappedWidth
 
             text: qsTr("Transparency")
             subtext: qsTr("Base %1, layers %2").arg(Colours.transparency.base).arg(Colours.transparency.layers)
@@ -197,16 +190,12 @@ ColumnLayout {
 
         ToggleRow {
             Layout.topMargin: Tokens.spacing.extraSmall / 2 - parent.spacing
-        Layout.alignment: Qt.AlignHCenter
+            Layout.fillWidth: true
-        implicitWidth: root.cappedWidth
 
             last: true
             text: qsTr("Dark theme")
             checked: !Colours.light
             onToggled: Colours.setMode(checked ? "dark" : "light")
         }
-
-    Item {
-        Layout.fillHeight: true
     }
 }