port all settings to a settings singleton to make it easier to make a settings ui later on

Appearance.qml

@@ -1,7 +0,0 @@
-pragma Singleton
-import QtQuick
-
-QtObject {
-    readonly property string font: "CommitMono Nerd Font Propo"
-    readonly property real fontSize: 14
-}

Colors.qml

@@ -5,25 +5,25 @@ import Quickshell
 Singleton {
     id: customColors
     // Core Backgrounds
-    readonly property color background: "#272E33"
+    readonly property color background: "#0A0E14"
-    readonly property color foreground: "#D3C6AA"
+    readonly property color foreground: "#B3B1AD"
-    readonly property color cursor: "#D3C6AA"
+    readonly property color cursor: "#E6B450"
 
     // The 16 Colors of the Apocalypse
-    readonly property color color0: "#2E383C"
+    readonly property color color0: "#0A0E14"
-    readonly property color color1: "#E67E80"
+    readonly property color color1: "#FF3333"
-    readonly property color color2: "#A7C080"
+    readonly property color color2: "#C2D94C"
-    readonly property color color3: "#DBBC7F"
+    readonly property color color3: "#FF8F40"
-    readonly property color color4: "#7FBBB3"
+    readonly property color color4: "#59C2FF"
-    readonly property color color5: "#D699B6"
+    readonly property color color5: "#FFEE99"
-    readonly property color color6: "#83C092"
+    readonly property color color6: "#95E6CB"
-    readonly property color color7: "#D3C6AA"
+    readonly property color color7: "#B3B1AD"
-    readonly property color color8: "#5C6A72"
+    readonly property color color8: "#4D5566"
-    readonly property color color9: "#F85552"
+    readonly property color color9: "#FF3333"
-    readonly property color color10: "#8DA101"
+    readonly property color color10: "#C2D94C"
-    readonly property color color11: "#DFA000"
+    readonly property color color11: "#FF8F40"
-    readonly property color color12: "#3A94C5"
+    readonly property color color12: "#59C2FF"
-    readonly property color color13: "#DF69BA"
+    readonly property color color13: "#FFEE99"
-    readonly property color color14: "#35A77C"
+    readonly property color color14: "#95E6CB"
-    readonly property color color15: "#DFDDC8"
+    readonly property color color15: "#B3B1AD"
 }

modules/bar/Bar.qml

@@ -2,11 +2,12 @@ import Quickshell
 import QtQuick
 import QtQuick.Layouts
 import qs
+import "../../"
 
 PanelWindow {
     id: root
     required property var modelData
-    implicitHeight: 30
+    implicitHeight: 35
     //color: Colors.background
     color: Colors.background
     anchors {

modules/bar/BarContent.qml

@@ -1,8 +0,0 @@
-import Quickshell
-import QtQuick
-import QtQuick.Layouts
-
-RowLayout {
-    id: leftLayout
-    anchors.left: parent.left
-}

modules/bar/Battery.qml

@@ -1,8 +1,8 @@
 import Quickshell.Services.UPower
 import QtQuick
 import Quickshell.Widgets
-import "."
+import "../../"
-import qs
+import "../settings/"
 
 Item {
     id: root
@@ -22,8 +22,8 @@ Item {
             id: batteryText
             anchors.verticalCenter: parent.verticalCenter
             font.weight: 900
-            font.family: Appearance.font
+            font.family: Settings.font
-            font.pixelSize: Appearance.fontSize
+            font.pixelSize: Settings.fontSize
             color: Colors.foreground
             text: Math.round(UPower.displayDevice.percentage * 100) + "%"
         }

modules/bar/Clock.qml

@@ -1,26 +1,47 @@
 import QtQuick
 import Quickshell
-import qs
+import QtQuick.Layouts
+import "../settings/"
+import "../../"
 
 Item {
     id: root
-    // FIX: Real pixels please!
+    implicitWidth: clockLayout.implicitWidth
-    implicitWidth: clockText.implicitWidth
+    implicitHeight: 35
-    implicitHeight: 30
 
-    Text {
+    ColumnLayout {
-        id: clockText
+        id: clockLayout
         anchors.centerIn: parent
-        font.weight: 900
+        spacing: 0
-        font.family: Appearance.font
-        font.pixelSize: Appearance.fontSize
-        color: Colors.foreground
 
-        text: Qt.formatDateTime(clock.date, "hh:mm")
+        Text {
+            id: clockHoursText
+            font.weight: 900
+            font.family: Settings.font
+            font.pixelSize: Settings.fontSize
+            color: Colors.foreground
 
-        SystemClock {
+            text: Qt.formatDateTime(clockHours.date, "hh:mm")
-            id: clock
+
-            precision: SystemClock.Minutes
+            SystemClock {
+                id: clockHours
+                precision: SystemClock.Minutes
+            }
+        }
+        Text {
+            id: clockDateText
+            font.weight: 900
+            opacity: 0.7
+            font.family: Settings.font
+            font.pixelSize: Settings.fontSize - 2
+            color: Colors.foreground
+
+            text: Qt.formatDateTime(clockDate.date, "d.m.yy")
+
+            SystemClock {
+                id: clockDate
+                precision: SystemClock.Minutes
+            }
         }
     }
 }

modules/bar/Mpris.qml

@@ -5,7 +5,9 @@ import QtQuick
 import QtQuick.Layouts
 import Quickshell
 import Quickshell.Services.Mpris
-import qs
+import Quickshell.Widgets
+import "../settings/"
+import "../../"
 
 RowLayout {
     id: root
@@ -16,6 +18,7 @@ RowLayout {
         model: Mpris.players
 
         delegate: RowLayout {
+            id: delegateLayout
             required property var modelData
             // 2. 🕵️‍♀️ FILTER LOGIC
             // Check if this specific player is Spotify.
@@ -39,26 +42,18 @@ RowLayout {
             property string artUrl: modelData.trackArtUrl
             property bool isPlaying: modelData.isPlaying
 
-            spacing: 8
+            spacing: 10
 
             // 🖼️ ALBUM ART
-            Rectangle {
+            ClippingWrapperRectangle {
-                Layout.preferredHeight: parent.height * 0.8
-                Layout.preferredWidth: Layout.preferredHeight
                 Layout.alignment: Qt.AlignVCenter
 
-                radius: 4
+                radius: 20
-                color: Colors.background
-                clip: true
-                visible: parent.visible // Optimization
 
-                Image {
+                IconImage {
-                    anchors.fill: parent
+                    source: delegateLayout.artUrl // Access property from delegate
-                    source: parent.parent.artUrl // Access property from delegate
-                    fillMode: Image.PreserveAspectCrop
                     asynchronous: true
-                    sourceSize.width: 128
+                    implicitSize: 24
-                    sourceSize.height: 128
                 }
             }
 
@@ -69,66 +64,26 @@ RowLayout {
                 visible: parent.visible
 
                 Text {
-                    text: parent.parent.title
+                    text: delegateLayout.title
                     color: Colors.foreground
                     font.bold: true
-                    font.pixelSize: 12
+                    font.pixelSize: Settings.fontSize
+                    font.family: Settings.font
                     elide: Text.ElideRight
                     Layout.preferredWidth: implicitWidth
                 }
 
                 Text {
-                    text: parent.parent.artist
+                    font.pixelSize: Settings.fontSize - 2
+                    font.family: Settings.font
+                    text: delegateLayout.artist
                     color: Colors.foreground
                     opacity: 0.7
-                    font.pixelSize: 10
                     Layout.preferredWidth: implicitWidth
                 }
             }
 
             // ⏯️ CONTROLS
-            RowLayout {
-                Layout.alignment: Qt.AlignVCenter
-                spacing: 8
-                visible: parent.visible
-
-                // PREV
-                Text {
-                    text: "󰒮"
-                    color: Colors.foreground
-                    font.pixelSize: 24
-                    MouseArea {
-                        anchors.fill: parent
-                        // Use modelData to control THIS player
-                        onClicked: modelData.previous()
-                        cursorShape: Qt.PointingHandCursor
-                    }
-                }
-
-                // PLAY / PAUSE
-                Text {
-                    text: parent.parent.isPlaying ? "󰏤" : "󰐊"
-                    color: Colors.foreground
-                    font.pixelSize: 24
-                    MouseArea {
-                        anchors.fill: parent
-                        onClicked: modelData.playPause()
-                        cursorShape: Qt.PointingHandCursor
-                    }
-                }
-
-                // NEXT
-                Text {
-                    text: "󰒭"
-                    color: Colors.foreground
-                    font.pixelSize: 24
-                    MouseArea {
-                        anchors.fill: parent
-                        onClicked: modelData.next()
-                        cursorShape: Qt.PointingHandCursor
-                    }
-                }
-            }
         }
     }
 }

modules/bar/PowerProfiles.qml

@@ -1,6 +1,7 @@
 import QtQuick
 import Quickshell.Services.UPower
-import qs
+import "../settings/"
+import "../../"
 
 Item {
     id: root
@@ -10,11 +11,11 @@ Item {
         text: PowerProfile.toString(PowerProfiles.profile)
         font.weight: 900
         color: Colors.foreground
-        font.family: Appearance.font
+        font.family: Settings.font
-        font.pixelSize: Appearance.fontSize
+        font.pixelSize: Settings.fontSize
         anchors.centerIn: parent
         MouseArea {
-        cursorShape: Qt.PointingHandCursor
+            cursorShape: Qt.PointingHandCursor
             acceptedButtons: Qt.LeftButton | Qt.RightButton
             anchors.fill: parent
             onClicked: mouse => {

modules/bar/Volume.qml

@@ -3,6 +3,7 @@ import Quickshell.Services.Pipewire
 import Quickshell.Widgets
 import Quickshell.Io
 import "../../"
+import "../settings/"
 
 Item {
     id: root
@@ -69,8 +70,8 @@ Item {
             width: 20
             font.weight: 900
             color: Colors.foreground
-            font.family: Appearance.font
+            font.family: Settings.font
-            font.pixelSize: Appearance.fontSize
+            font.pixelSize: Settings.fontSize
             text: Pipewire.ready ? Math.round(Pipewire.defaultAudioSink.audio.volume * 100) + "%" : "0%"
         }
     }

modules/bar/Workspaces.qml

@@ -2,6 +2,7 @@ pragma ComponentBehavior: Bound
 import Quickshell.Hyprland
 import QtQuick
 import "../../"
+import "../settings/"
 
 Item {
     id: root
@@ -26,8 +27,8 @@ Item {
 
                 Text {
                     font.weight: 900
-                    font.family: Appearance.font
+                    font.family: Settings.font
-                    font.pixelSize: Appearance.fontSize
+                    font.pixelSize: Settings.fontSize
                     anchors.centerIn: workspaceNumber
                     text: parent.modelData.id
                     color: parent.modelData.active ? Colors.background : Colors.foreground // Set contrasting color for workspace number

modules/settings/Settings.qml

@@ -0,0 +1,31 @@
+pragma ComponentBehavior: Bound
+pragma Singleton
+import QtQuick
+import Quickshell
+import Quickshell.Io
+
+Singleton {
+    id: store
+
+    FileView {
+        path: "/home/lucy/.cache/quickshell_settings.json"
+
+        onAdapterUpdated: writeAdapter()
+
+        watchChanges: true
+        onFileChanged: reload()
+
+        JsonAdapter {
+            id: adapter
+            property string lastWallpaper: "file:///home/lucy/.walls/mooon.png"
+            property string wallDir: "file:///home/lucy/.walls/"
+            property string font: "CodeNewRoman  Nerd Font Propo"
+            property real fontSize: 14
+        }
+    }
+
+    property alias currentWall: adapter.lastWallpaper
+    property alias font: adapter.font
+    property alias fontSize: adapter.fontSize
+    property alias wallDir: adapter.wallDir
+}

modules/settings/qmldir

@@ -0,0 +1 @@
+singleton Settings 1.0 Settings.qml

modules/wallpaper/WallSwitcher.qml

@@ -3,8 +3,8 @@ import QtQuick
 import Qt.labs.folderlistmodel 2.15 // <--- The magic file scanner!
 import Quickshell
 import Quickshell.Hyprland
-import Quickshell.Io
 import "../../"
+import "../settings/"
 
 FloatingWindow {
     id: root
@@ -26,13 +26,13 @@ FloatingWindow {
     // Make it float above everything else
     Text {
         id: titleText
-        text: "Wallpapers in " + WallpaperStore.wallDir
+        text: "Wallpapers in " + Settings.wallDir.replace("file://", "")
         anchors.horizontalCenter: parent.horizontalCenter
         anchors.top: parent.top
         font.pixelSize: 20
         topPadding: 20
         bottomPadding: 10
-        font.family: Appearance.font
+        font.family: Settings.font
         color: Colors.foreground
     }
 
@@ -41,7 +41,7 @@ FloatingWindow {
     // 1. The File Scanner
     FolderListModel {
         id: folderModel
-        folder: "file:///home/lucy/.walls/" // <--- Your stash!
+        folder: Settings.wallDir // <--- Your stash!
         nameFilters: ["*.png", "*.jpg", "*.jpeg"]
         showDirs: false
     }
@@ -60,6 +60,7 @@ FloatingWindow {
         model: folderModel
 
         delegate: Item {
+            property string cleanPath: modelData.fileUrl.toString().replace("file://", "")
             required property var modelData
             width: 200
             height: 100
@@ -84,8 +85,7 @@ FloatingWindow {
                 anchors.fill: parent
                 onClicked: {
                     let cleanPath = parent.modelData.fileUrl.toString().replace("file://", "");
-                    // Update the Singleton!
+                    Settings.currentWall = parent.modelData.fileUrl.toString();
-                    WallpaperStore.currentWall = parent.modelData.fileUrl.toString();
                 }
             }
         }

modules/wallpaper/Wallpaper.qml

@@ -1,8 +1,8 @@
 pragma ComponentBehavior: Bound
 import QtQuick
 import QtQuick.Controls // <--- Needed for StackView
-import Quickshell
 import Quickshell.Wayland
+import "../settings/"
 
 WlrLayershell {
     id: root
@@ -64,12 +64,11 @@ WlrLayershell {
     // 5. The Trigger 🔫
     // We listen for the singleton to change, then tell the Stack to update
     Connections {
-        target: WallpaperStore
+        target: Settings
 
         function onCurrentWallChanged() {
-            // "Replace the current item with a new wallComponent using the new source"
             wallStack.replace(wallComponent, {
-                "source": WallpaperStore.currentWall
+                "source": Settings.currentWall
             });
         }
     }

modules/wallpaper/WallpaperStore.qml

@@ -1,31 +0,0 @@
-pragma Singleton
-import QtQuick
-import Quickshell.Io // <--- Import for FileView and JsonAdapter
-
-QtObject {
-    id: store
-
-    // 1. The File Manager
-    property string wallDir: "~/.walls/"
-    property var settings: FileView {
-        path: "/home/lucy/.cache/quickshell_settings.json"
-
-        // Auto-save when properties change
-        onAdapterUpdated: writeAdapter()
-
-        // Auto-load when the file changes on disk
-        watchChanges: true
-        onFileChanged: reload()
-
-        // 2. The Magic Adapter
-        JsonAdapter {
-            id: adapter
-            // This property corresponds to a key in your JSON file!
-            property string lastWallpaper: "/home/lucy/.walls/mooon.png"
-        }
-    }
-
-    // 3. Create a helper property for the rest of your app to use
-    // This keeps the "WallpaperStore.currentWall" name working!
-    property alias currentWall: adapter.lastWallpaper
-}

modules/wallpaper/qmldir

@@ -1,4 +1,3 @@
-singleton WallpaperStore 1.0 WallpaperStore.qml
 Wallpaper 1.0 Wallpaper.qml
 WallSwitcher 1.0 WallSwitcher.qml
 Overlay 1.0 Overlay.qml

qmldir

@@ -1,2 +1 @@
 singleton Colors 1.0 Colors.qml
-singleton Appearance 1.0 Appearance.qml

shell.qml

@@ -6,7 +6,6 @@ import "./modules/wallpaper/"
 import "./modules/notifications/"
 
 ShellRoot {
-    WallSwitcher {}
     Variants {
         id: barVariants
         model: Quickshell.screens
@@ -28,5 +27,6 @@ ShellRoot {
             screen: modelData
         }
     }
+    WallSwitcher {}
     NotiPopup {}
 }