fix some things?

Colors.qml

@@ -5,25 +5,25 @@ import Quickshell
 Singleton {
     id: customColors
     // Core Backgrounds
-    readonly property color background: "#1A1B26"
-    readonly property color foreground: "#C0CAF5"
-    readonly property color cursor: "#C0CAF5"
+    readonly property color background: "#24273A"
+    readonly property color foreground: "#CAD3F5"
+    readonly property color cursor: "#CAD3F5"
 
     // The 16 Colors of the Apocalypse
-    readonly property color color0: "#414868"
-    readonly property color color1: "#F7768E"
-    readonly property color color2: "#9ECE6A"
-    readonly property color color3: "#E0AF68"
-    readonly property color color4: "#7AA2F7"
-    readonly property color color5: "#BB9AF7"
-    readonly property color color6: "#7DCFFF"
-    readonly property color color7: "#A9B1D6"
-    readonly property color color8: "#414868"
-    readonly property color color9: "#F7768E"
-    readonly property color color10: "#9ECE6A"
-    readonly property color color11: "#E0AF68"
-    readonly property color color12: "#7AA2F7"
-    readonly property color color13: "#BB9AF7"
-    readonly property color color14: "#7DCFFF"
-    readonly property color color15: "#C0CAF5"
+    readonly property color color0: "#494D64"
+    readonly property color color1: "#ED8796"
+    readonly property color color2: "#A6DA95"
+    readonly property color color3: "#EED49F"
+    readonly property color color4: "#8AADF4"
+    readonly property color color5: "#F5BDE6"
+    readonly property color color6: "#8BD5CA"
+    readonly property color color7: "#B8C0E0"
+    readonly property color color8: "#5B6078"
+    readonly property color color9: "#ED8796"
+    readonly property color color10: "#A6DA95"
+    readonly property color color11: "#EED49F"
+    readonly property color color12: "#8AADF4"
+    readonly property color color13: "#F5BDE6"
+    readonly property color color14: "#8BD5CA"
+    readonly property color color15: "#A5ADCB"
 }

config.json

@@ -0,0 +1,6 @@
+{
+    "currentWall": "file:///home/lucy/.walls/faris.jpg",
+    "font": "MonaSpiceXe Nerd Font Propo",
+    "fontSize": 13,
+    "wallDir": "/home/lucy/.walls/"
+}

modules/bar/Bar.qml

@@ -16,7 +16,7 @@ PanelWindow {
 
     RowLayout {
         id: leftLayout
-        spacing: 30
+        spacing: 40
         anchors.left: parent.left
         anchors.verticalCenter: parent.verticalCenter
         Clock {
@@ -33,14 +33,11 @@ PanelWindow {
 
     RowLayout {
         id: rightLayout
-        spacing: 30
+        spacing: 40
         anchors.right: parent.right
         anchors.verticalCenter: parent.verticalCenter
         Battery {}
-        Loader {
-            sourceComponent: Volume {}
-        }
-
+        Volume {}
         PowerProfiles {}
         SystemTray {
             Layout.rightMargin: 30

modules/bar/Battery.qml

@@ -1,18 +1,22 @@
 pragma ComponentBehavior: Bound
 import Quickshell.Services.UPower
 import QtQuick
-import Quickshell.Widgets
 import "../../"
 import "../settings/"
 import QtQuick.Layouts
+import Quickshell
+import Quickshell.Widgets
 
-Loader {
+Item {
     id: root
     visible: UPower.displayDevice.isLaptopBattery
-    width: masterLayout.implicitWidth
+    implicitWidth: masterLayout.implicitWidth
     height: 34
+    property bool isCharging: UPower.displayDevice.state === UPowerDeviceState.Charging
     ColumnLayout {
         id: masterLayout
+        anchors.centerIn: parent
+        implicitWidth: botText.width
         spacing: 0
         Row {
             spacing: 5
@@ -24,38 +28,10 @@ Loader {
                 text: Math.round(UPower.displayDevice.percentage * 100) + "%"
                 color: Colors.foreground
             }
-            Icons {
-                property bool isCharging: UPower.displayDevice.state === UPowerDeviceState.Charging
-                function getBatteryIcon() {
-                    if (isCharging) {
-                        return "battery_android_frame_bolt";
-                    }
-                    if (UPower.displayDevice.percentage < 0.12) {
-                        return "battery_android_frame_0";
-                    }
-                    if (UPower.displayDevice.percentage < 0.24) {
-                        return "battery_android_frame_1";
-                    }
-                    if (UPower.displayDevice.percentage < 0.36) {
-                        return "battery_android_frame_2";
-                    }
-                    if (UPower.displayDevice.percentage < 0.48) {
-                        return "battery_android_frame_3";
-                    }
-                    if (UPower.displayDevice.percentage < 0.60) {
-                        return "battery_android_frame_4";
-                    }
-                    if (UPower.displayDevice.percentage < 0.72) {
-                        return "battery_android_frame_5";
-                    }
-                    if (UPower.displayDevice.percentage < 0.84) {
-                        return "battery_android_frame_6";
-                    }
-                    if (UPower.displayDevice.percentage > 0.84) {
-                        return "battery_android_full";
-                    }
-                }
-                text: getBatteryIcon()
+            IconImage {
+                anchors.verticalCenter: parent.verticalCenter
+                implicitSize: 12
+                source: Quickshell.iconPath(UPower.displayDevice.iconName)
             }
         }
         Text {
@@ -69,7 +45,6 @@ Loader {
             opacity: 0.7
             color: Colors.foreground
             text: isCharging ? timeToFull.toFixed(1) + "h to full" : timeToEmpty.toFixed(1) + "h left"
-            onTextChanged: console.log(UPower.displayDevice.percentage)
         }
     }
 }

modules/bar/Clock.qml

@@ -36,7 +36,7 @@ Item {
             font.pixelSize: Settings.fontSize - 2
             color: Colors.foreground
 
-            text: Qt.formatDateTime(clockDate.date, "d.m.yy")
+            text: Qt.formatDateTime(clockDate.date, "dd.MM.yy")
 
             SystemClock {
                 id: clockDate

modules/bar/PowerProfiles.qml

@@ -6,7 +6,7 @@ import "../../"
 
 Item {
     id: root
-    implicitWidth: powerLayout.implicitWidth + 10
+    width: powerLayout.implicitWidth
     implicitHeight: 34
     MouseArea {
         anchors.fill: parent

modules/bar/SystemTray.qml

@@ -5,11 +5,9 @@ Item {
     id: root
     clip: true
 
-    // This was already correct in your last file, but keep it this way!
-    implicitWidth: layout.implicitWidth
-    implicitHeight: 30
+    implicitWidth: layout.implicitWidth < 0 ? 0 : layout.implicitWidth
+    implicitHeight: 34
 
-    // Hide if empty so we don't have a 50px gap for nothing
     visible: layout.children.length > 0
 
     Row {

modules/bar/Volume.qml

@@ -2,12 +2,16 @@ import QtQuick
 import Quickshell.Services.Pipewire
 import Quickshell.Widgets
 import QtQuick.Layouts
+import Quickshell
 import Quickshell.Io
 import "../../"
 import "../settings/"
 
-Loader {
+Item {
     id: root
+    implicitWidth: styleLayout.implicitWidth
+    height: 34
+    property var sink: Pipewire.defaultAudioSink
     MouseArea {
         anchors.fill: parent
         cursorShape: Qt.PointingHandCursor
@@ -17,59 +21,67 @@ Loader {
             }
         }
     }
-    width: styleLayout.implicitWidth
-    height: 34
-    property var sink: Pipewire.defaultAudioSink
     Process {
         id: pavu
         command: ["pavucontrol"] // The command and args list
 
     }
+
     // Logic to pick the correct icon name
     function getVolumeIcon() {
         // Safety check: if Pipewire is dead or sink is missing
         if (!sink)
-            return "audio-volume-muted-blocking";
+            return "audio-volume-muted-symbolic";
 
         // If muted, show the hush icon
         if (sink.audio.muted)
-            return "audio-volume-muted";
+            return "audio-volume-muted-symbolic";
 
         // Volume is usually 0.0 to 1.0 (0% to 100%)
         const vol = sink.audio.volume;
 
         if (vol <= 0.25)
-            return "volume_mute";
+            return "audio-volume-low-symbolic";
         if (vol < 0.75)
-            return "volume_down";
-        if (vol < 1.00)
-            return "volume_up";
+            return "audio-volume-medium-symbolic";
+        if (vol <= 1.00)
+            return "audio-volume-high-symbolic";
 
         // If it's loud, prepare the ears!
-        return "volume_up";
+        return "audio-volume-high-danger-symbolic";
     }
 
     ColumnLayout {
         id: styleLayout
         anchors.centerIn: parent
         spacing: 0
+        implicitWidth: topText.width
         Row {
-            spacing: 2
+
+            spacing: 5
             Text {
+                id: topText
+                anchors.verticalCenter: parent.verticalCenter
                 PwObjectTracker {
+
                     objects: Pipewire.ready ? root.sink : []
                 }
                 font.weight: 900
                 color: Colors.foreground
                 font.family: Settings.font
                 font.pixelSize: Settings.fontSize
-                text: Pipewire.ready ? Math.round(root.sink.audio.volume * 100) + "%" : "0%"
+                text: Pipewire.ready ? root.sink.audio.volume.toFixed(2) + "%" : "0%"
+                onTextChanged: console.log(Quickshell.iconPath)
             }
-            Icons {
-                text: root.getVolumeIcon()
+            IconImage {
+                id: icon
+                anchors.verticalCenter: parent.verticalCenter
+                implicitSize: 12
+                source: Quickshell.iconPath(root.getVolumeIcon())
             }
         }
         Text {
+            id: botText
             font.weight: 900
             color: Colors.foreground
             font.family: Settings.font

modules/settings/Settings.qml

@@ -4,27 +4,33 @@ import QtQuick
 import Quickshell
 import Quickshell.Io
 
-FileView {
-    id: settingsView
-    path: "/home/lucy/.cache/quickshell_settings.json"
-
-    watchChanges: true
-    onAdapterChanged: writeAdapter()
-
-    adapter: JsonAdapter {
-        id: jsonAdapter
-        property string currentWall: ""
-        property string wallDir: "/home/lucy/.walls/"
-        property string font: "SFMono Nerd Font Propo"
-        property real fontSize: 14
-
-        onCurrentWallChanged: settingsView.writeAdapter()
-        onWallDirChanged: settingsView.writeAdapter()
-        onFontChanged: settingsView.writeAdapter()
-        onFontSizeChanged: settingsView.writeAdapter()
-    }
+Singleton {
     property alias currentWall: jsonAdapter.currentWall
     property alias font: jsonAdapter.font
     property alias fontSize: jsonAdapter.fontSize
     property alias wallDir: jsonAdapter.wallDir
+    onCurrentWallChanged: settingsView.writeAdapter()
+    onWallDirChanged: settingsView.writeAdapter()
+    onFontChanged: {
+        Quickshell.reload();
+        settingsView.writeAdapter();
+    }
+    onFontSizeChanged: settingsView.writeAdapter()
+
+    FileView {
+        id: settingsView
+        path: "/home/lucy/.config/quickshell/modules/settings/config.json"
+
+        watchChanges: true
+        onAdapterChanged: reload()
+        onAdapterUpdated: reload()
+
+        adapter: JsonAdapter {
+            id: jsonAdapter
+            property string currentWall: ""
+            property string wallDir: "/home/lucy/.walls/"
+            property string font: "Google Sans Code"
+            property real fontSize: 14
+        }
+    }
 }

modules/settings/config.json

@@ -0,0 +1,6 @@
+{
+    "currentWall": "file:///home/lucy/.walls/lain_room.png",
+    "font": "Google Sans Code",
+    "fontSize": 14,
+    "wallDir": "/home/lucy/.walls/"
+}

modules/wallpaper/Overlay.qml

@@ -1,6 +1,7 @@
 import QtQuick
 import Quickshell
 import Quickshell.Wayland
+import Quickshell.Io
 import "../../"
 import "."
 
@@ -8,7 +9,30 @@ WlrLayershell {
     id: overlayRoot
     required property var modelData
     property var padding: 5
+    property var rounding: 25
+    property var hyprgaps: 5
+    onPaddingChanged: {
+        hyprGaps.exec(hyprGaps.command);
+        console.log(hyprGaps.command);
+    }
 
+    Process {
+        id: hyprGaps
+        running: true
+        property bool isZero: overlayRoot.padding === 0
+        property var top: overlayRoot.hyprgaps
+        property var sides: isZero ? overlayRoot.hyprgaps : overlayRoot.padding + overlayRoot.hyprgaps
+        property var gaps: top + "," + sides + "," + sides + "," + sides
+        command: ["hyprctl", "keyword", "general:gaps_out", gaps]
+        onStarted: console.log("set gaps to ", gaps)
+    }
+    Process {
+        id: hyprRounding
+        property var rounding: overlayRoot.rounding - 4
+        running: true
+        command: ["hyprctl", "keyword", "decoration:rounding", rounding]
+        onStarted: console.log("set rounding to ", overlayRoot.rounding)
+    }
     // 1. Fill the entire screen
     anchors {
         top: true
@@ -35,7 +59,8 @@ WlrLayershell {
     }
     ScreenCorners {
         // Adjust these to match your screen's aesthetic
-        cornerRadius: 20
+        cornerRadius: overlayRoot.rounding
+        margin: overlayRoot.padding
         cornerColor: Colors.background
     }
 }

modules/wallpaper/ScreenCorners.qml

@@ -19,6 +19,7 @@ Item {
 
     // Enable/Disable toggle
     property bool shouldShow: true
+    property real margin
 
     // ---------------------------------------------------------
 
@@ -42,9 +43,9 @@ Item {
 
                 // Margins (Leave 0 unless your bar overlaps)
                 readonly property real topMargin: 0
-                readonly property real bottomMargin: 5
-                readonly property real leftMargin: 5
-                readonly property real rightMargin: 5
+                readonly property real bottomMargin: root.margin
+                readonly property real leftMargin: root.margin
+                readonly property real rightMargin: root.margin
 
                 readonly property real screenWidth: cornersShape.width
                 readonly property real screenHeight: cornersShape.height

shell.qml

@@ -1,11 +1,14 @@
 //@ pragma UseQApplication
 pragma ComponentBehavior: Bound
 import Quickshell
+import Quickshell.Io
 import "./modules/bar/"
 import "./modules/wallpaper/"
 import "./modules/notifications/"
 
 ShellRoot {
+    id: shellRoot
+
     Variants {
         id: barVariants
         model: Quickshell.screens