Colors.qml

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

config.json

@@ -1,6 +0,0 @@
-{
-    "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: 40
+        spacing: 30
         anchors.left: parent.left
         anchors.verticalCenter: parent.verticalCenter
         Clock {
@@ -33,11 +33,14 @@ PanelWindow {
 
     RowLayout {
         id: rightLayout
-        spacing: 40
+        spacing: 30
         anchors.right: parent.right
         anchors.verticalCenter: parent.verticalCenter
         Battery {}
-        Volume {}
+        Loader {
+            sourceComponent: Volume {}
+        }
+
         PowerProfiles {}
         SystemTray {
             Layout.rightMargin: 30

modules/bar/Battery.qml

@@ -1,22 +1,18 @@
 pragma ComponentBehavior: Bound
 import Quickshell.Services.UPower
 import QtQuick
+import Quickshell.Widgets
 import "../../"
 import "../settings/"
 import QtQuick.Layouts
-import Quickshell
-import Quickshell.Widgets
 
-Item {
+Loader {
     id: root
     visible: UPower.displayDevice.isLaptopBattery
-    implicitWidth: masterLayout.implicitWidth
+    width: 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
@@ -28,10 +24,38 @@ Item {
                 text: Math.round(UPower.displayDevice.percentage * 100) + "%"
                 color: Colors.foreground
             }
-            IconImage {
+            Icons {
-                anchors.verticalCenter: parent.verticalCenter
+                property bool isCharging: UPower.displayDevice.state === UPowerDeviceState.Charging
-                implicitSize: 12
+                function getBatteryIcon() {
-                source: Quickshell.iconPath(UPower.displayDevice.iconName)
+                    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()
             }
         }
         Text {
@@ -45,6 +69,7 @@ Item {
             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, "dd.MM.yy")
+            text: Qt.formatDateTime(clockDate.date, "d.m.yy")
 
             SystemClock {
                 id: clockDate

modules/bar/PowerProfiles.qml

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

modules/bar/SystemTray.qml

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

modules/bar/Volume.qml

@@ -2,16 +2,12 @@ import QtQuick
 import Quickshell.Services.Pipewire
 import Quickshell.Widgets
 import QtQuick.Layouts
-import Quickshell
 import Quickshell.Io
 import "../../"
 import "../settings/"
 
-Item {
+Loader {
     id: root
-    implicitWidth: styleLayout.implicitWidth
-    height: 34
-    property var sink: Pipewire.defaultAudioSink
     MouseArea {
         anchors.fill: parent
         cursorShape: Qt.PointingHandCursor
@@ -21,67 +17,59 @@ Item {
             }
         }
     }
+    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-symbolic";
+            return "audio-volume-muted-blocking";
 
         // If muted, show the hush icon
         if (sink.audio.muted)
-            return "audio-volume-muted-symbolic";
+            return "audio-volume-muted";
 
         // Volume is usually 0.0 to 1.0 (0% to 100%)
         const vol = sink.audio.volume;
 
         if (vol <= 0.25)
-            return "audio-volume-low-symbolic";
+            return "volume_mute";
         if (vol < 0.75)
-            return "audio-volume-medium-symbolic";
+            return "volume_down";
-        if (vol <= 1.00)
+        if (vol < 1.00)
-            return "audio-volume-high-symbolic";
+            return "volume_up";
 
         // If it's loud, prepare the ears!
-        return "audio-volume-high-danger-symbolic";
+        return "volume_up";
     }
 
     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 ? root.sink.audio.volume.toFixed(2) + "%" : "0%"
+                text: Pipewire.ready ? Math.round(root.sink.audio.volume * 100) + "%" : "0%"
-                onTextChanged: console.log(Quickshell.iconPath)
             }
-            IconImage {
+            Icons {
-                id: icon
+                text: root.getVolumeIcon()
-                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,33 +4,27 @@ import QtQuick
 import Quickshell
 import Quickshell.Io
 
-Singleton {
+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()
+    }
     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

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

modules/wallpaper/Overlay.qml

@@ -1,7 +1,6 @@
 import QtQuick
 import Quickshell
 import Quickshell.Wayland
-import Quickshell.Io
 import "../../"
 import "."
 
@@ -9,30 +8,7 @@ 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
@@ -59,8 +35,7 @@ WlrLayershell {
     }
     ScreenCorners {
         // Adjust these to match your screen's aesthetic
-        cornerRadius: overlayRoot.rounding
+        cornerRadius: 20
-        margin: overlayRoot.padding
         cornerColor: Colors.background
     }
 }

modules/wallpaper/ScreenCorners.qml

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

shell.qml

@@ -1,14 +1,11 @@
 //@ 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