move font picker to settings app

modules/bar/Title.qml

@@ -3,7 +3,6 @@ import Quickshell.Wayland
 import qs
 import qs.settings
 import qs.reusables
-import QtQuick.Dialogs
 
 Rectangle {
     id: container
@@ -26,20 +25,6 @@ Rectangle {
         }
         MouseArea {
             id: fontOpener
-            FontDialog {
-                id: fontPicker
-                title: "qs-fontpicker"
-                flags: FontDialog.NoButtons | FontDialog.MonospacedFonts
-
-                onAccepted: {
-                    Settings.config.font = selectedFont.family;
-                    Settings.config.fontSize = selectedFont.pointSize;
-                }
-                onSelectedFontChanged: {
-                    Settings.config.font = selectedFont.family;
-                    Settings.config.fontSize = selectedFont.pointSize;
-                }
-            }
             anchors.fill: parent
             acceptedButtons: Qt.LeftButton
             cursorShape: Qt.PointingHandCursor

modules/widgets/SettingsApp/Appearance.qml

@@ -1,14 +0,0 @@
-
-
-import QtQuick
-import qs
-import qs.reusables
-
-Item {
-    id: root
-    implicitWidth: 300
-    implicitHeight: 300
-    CustomText {
-        text: "I am the Appearance page"
-    }
-}

modules/widgets/settingsapp/Appearance.qml

@@ -0,0 +1,80 @@
+import QtQuick
+import qs
+import qs.reusables
+import QtQuick.Layouts
+import qs.settings
+import Quickshell.Widgets
+import QtQuick.Controls
+import QtQuick.Dialogs
+
+ClippingWrapperRectangle {
+    id: root
+    FontDialog {
+        id: fontPicker
+        title: "qs-fontpicker"
+        flags: FontDialog.NoButtons | FontDialog.MonospacedFonts
+
+        onAccepted: {
+            Settings.config.font = selectedFont.family;
+            Settings.config.fontSize = selectedFont.pointSize;
+        }
+        onSelectedFontChanged: {
+            Settings.config.font = selectedFont.family;
+            Settings.config.fontSize = selectedFont.pointSize;
+        }
+    }
+    anchors.centerIn: parent
+    clip: true
+    color: Colors.surfaceContainerLow
+    radius: 12
+    margin: 20
+
+    ColumnLayout {
+        id: verticalLayout
+        Rectangle {
+            id: fontWrapper
+            radius: 14
+            color: Colors.surfaceContainerHigh
+            implicitHeight: fontLayout.implicitHeight + 10
+            implicitWidth: fontLayout.implicitWidth + 10
+            RowLayout {
+                id: fontLayout
+                anchors.right: parent.right
+                anchors.verticalCenter: parent.verticalCenter
+                clip: true
+                spacing: 10
+                CustomText {
+                    id: fontText
+                    font.bold: true
+                    text: "current font: " + Settings.config.font
+                }
+                Rectangle {
+                    id: fontSelector
+                    Layout.rightMargin: 5
+                    implicitWidth: fontSelectorText.implicitWidth + 20
+                    implicitHeight: 20
+                    color: Colors.surfaceContainerHigh
+                    border.width: 2
+                    border.color: Colors.outline
+                    radius: 12
+                    CustomText {
+                        id: fontSelectorText
+                        anchors.centerIn: parent
+                        text: "Pick Font"
+                    }
+                    MouseArea {
+                        id: fontPickerOpener
+                        anchors.fill: parent
+                        acceptedButtons: Qt.LeftButton
+                        cursorShape: Qt.PointingHandCursor
+                        onClicked: fontPicker.open()
+                    }
+                }
+            }
+        }
+        Item {
+            id: spring
+            Layout.fillHeight: true
+        }
+    }
+}

modules/widgets/settingsapp/MainWindow.qml

@@ -35,13 +35,16 @@ FloatingWindow {
     }
     RowLayout {
         id: windowLayout
+        clip: true
         anchors.fill: parent
+        spacing: 10
 
         ClippingWrapperRectangle {
             id: pageWrapper
             Layout.margins: 20
             Layout.fillHeight: true
             Layout.preferredWidth: 200
+            Layout.rightMargin: 0
             margin: 20
             color: Colors.surfaceContainerLow
             radius: 12
@@ -54,7 +57,7 @@ FloatingWindow {
                     id: pageDelegate
                     Rectangle {
                         radius: 24
-                        color: ListView.isCurrentItem ? Colors.surfaceContainerHighest : "transparent"
+                        color: ListView.isCurrentItem ? Colors.surfaceContainerHigh : "transparent"
                         implicitHeight: 30
                         implicitWidth: pageWrapper.width - 50
                         required property var modelData
@@ -82,6 +85,7 @@ FloatingWindow {
         }
         Loader {
             id: contentLoader
+            Layout.leftMargin: 0
             Layout.fillHeight: true
             Layout.fillWidth: true
             Layout.margins: 20

modules/widgets/settingsapp/WelcomePage.qml

@@ -8,7 +8,7 @@ ClippingWrapperRectangle {
     id: root
     anchors.centerIn: parent
     clip: true
-    color: Colors.surfaceContainerHighest
+    color: Colors.surfaceContainerLow
     radius: 12
     margin: 20
     ColumnLayout {
@@ -16,7 +16,7 @@ ClippingWrapperRectangle {
         spacing: 0
         anchors.top: parent.top
         CustomText {
-
+            topPadding: 10
             text: "Welcome!"
             font.pixelSize: 24
             font.bold: true

shell.qml

@@ -6,7 +6,7 @@ import qs.modules.bar
 import qs.modules.overlays
 import qs.modules.notifications
 import qs.modules.widgets.wallswitcher
-import qs.modules.widgets.SettingsApp
+import qs.modules.widgets.settingsapp
 
 ShellRoot {
     id: root