make bar and screencorners black because prettier

Appearance.qml

@@ -2,6 +2,6 @@ pragma Singleton
 import QtQuick
 
 QtObject {
-    readonly property string font: "JetBrainsMono Nerd Font"
+    readonly property string font: "Iosevka Nerd Font Propo"
     readonly property real fontSize: 14
 }

modules/bar/Bar.qml

@@ -5,8 +5,10 @@ import qs
 
 PanelWindow {
     id: root
+    required property var modelData
     implicitHeight: 30
-    color: Colors.background
+    //color: Colors.background
+    color: "black"
     anchors {
         top: true
         left: true
@@ -17,26 +19,26 @@ PanelWindow {
         id: leftLayout
         anchors.left: parent.left
         anchors.verticalCenter: parent.verticalCenter
-        Workspaces {
+        Clock {
-            Layout.leftMargin: 10
+            Layout.leftMargin: 30
         }
     }
 
     RowLayout {
         id: centerLayout
         anchors.centerIn: parent
-        Clock {}
+        Workspaces {}
     }
 
     RowLayout {
         id: rightLayout
-        spacing: 10
+        spacing: 20
         anchors.right: parent.right
         anchors.verticalCenter: parent.verticalCenter
         Volume {}
         Battery {}
         SystemTray {
-            Layout.rightMargin: 10
+            Layout.rightMargin: 30
         }
     }
 }

modules/bar/Battery.qml

@@ -15,8 +15,8 @@ Item {
         IconImage {
             anchors.verticalCenter: parent.verticalCenter
             source: "root:/icons/" + UPower.displayDevice.iconName + ".svg"
-            width: Appearance.fontSize
+            width: 12
-            height: Appearance.fontSize
+            height: 12
         }
         Text {
             id: batteryText

modules/bar/SystemTray.qml

@@ -6,7 +6,7 @@ Item {
     clip: true
 
     // This was already correct in your last file, but keep it this way!
-    implicitWidth: layout.implicitWidth + 10
+    implicitWidth: layout.implicitWidth
     implicitHeight: 30
 
     // Hide if empty so we don't have a 50px gap for nothing

modules/bar/Volume.qml

@@ -58,8 +58,8 @@ Item {
 
         IconImage {
             anchors.verticalCenter: parent.verticalCenter
-            width: Appearance.fontSize
+            width: 12
-            height: Appearance.fontSize
+            height: 12
 
             // The magic: 'image://theme/' pulls from your system icon theme (Papirus, Adwaita, etc.)
             source: "root:/icons/" + root.getVolumeIcon() + "-symbolic.svg"
@@ -70,6 +70,7 @@ Item {
 
         Text {
             PwObjectTracker {
+
                 objects: Pipewire.defaultAudioSink
             }
             font.weight: 900

modules/bar/Workspaces.qml

@@ -5,6 +5,7 @@ import qs
 
 Item {
     id: root
+    property var modelData
     implicitWidth: workspaceRow.implicitWidth
     height: 30
     Row {
@@ -13,20 +14,19 @@ Item {
         spacing: 10 // Slightly increase spacing between workspace buttons
 
         Repeater {
-            id: workspaceRepeater
+            anchors.centerIn: parent
             Rectangle {
+                id: workspaceNumber
                 width: 16
                 height: 16
-                radius: 10
+                radius: 20
-                //color: modelData.active ? myPallete.accent : myPallete.window
                 color: modelData.active ? Colors.foreground : "transparent"
 
                 Text {
-                    id: workspaceNumber
                     font.weight: 900
                     font.family: Appearance.font
                     font.pixelSize: Appearance.fontSize
-                    anchors.centerIn: parent
+                    anchors.centerIn: workspaceNumber
                     text: modelData.id
                     color: modelData.active ? Colors.background : Colors.foreground // Set contrasting color for workspace number
                 }

modules/notifications/NotiPopup.qml

@@ -1,3 +1,4 @@
+pragma ComponentBehavior: Bound
 import QtQuick
 import Quickshell
 import Quickshell.Wayland
@@ -18,8 +19,8 @@ WlrLayershell {
         top: 30
     }
 
-    width: 400
+    implicitWidth: 400
-    height: notifList.contentHeight + 10
+    implicitHeight: notifList.contentHeight + 10
 
     // 2. Layer: Put it ABOVE normal windows
     layer: WlrLayer.Overlay
@@ -51,15 +52,16 @@ WlrLayershell {
         // Inside your ListView...
         model: NotifServer.trackedNotifications
         delegate: Item {
-            width: ListView.view.width
+            id: notifyItem
-            height: 60 // Fixed height is usually better for icon layouts
+            implicitWidth: ListView.view.width
+            implicitHeight: 60 // Fixed height is usually better for icon layouts
 
             required property var modelData
             Timer {
                 id: timout
                 interval: 5000
                 running: true
-                onRunningChanged: modelData.dismiss()
+                onRunningChanged: notifyItem.modelData.dismiss()
             }
 
             Rectangle {
@@ -78,10 +80,10 @@ WlrLayershell {
                     Image {
                         // Use the image if available, otherwise hide this space?
                         // Or you could use an icon fallback.
-                        source: modelData.image
+                        source: notifyItem.modelData.image
 
                         // Hide if no image exists so text takes full width
-                        visible: modelData.image !== ""
+                        visible: notifyItem.modelData.image !== ""
 
                         // Fixed size for consistency
                         Layout.preferredWidth: 48
@@ -102,7 +104,7 @@ WlrLayershell {
                         spacing: 2
 
                         Text {
-                            text: modelData.summary
+                            text: notifyItem.modelData.summary
                             color: Colors.foreground
                             font.bold: true
                             elide: Text.ElideRight
@@ -110,7 +112,7 @@ WlrLayershell {
                         }
 
                         Text {
-                            text: modelData.body
+                            text: notifyItem.modelData.body
                             color: Colors.foreground
 
                             // Limit to 2 lines
@@ -127,7 +129,7 @@ WlrLayershell {
                 MouseArea {
                     anchors.fill: parent
                     acceptedButtons: Qt.LeftButton
-                    onClicked: modelData.dismiss()
+                    onClicked: notifyItem.modelData.dismiss()
                 }
             }
         }

modules/wallpaper/Overlay.qml

@@ -15,7 +15,7 @@ WlrLayershell {
     }
 
     // 2. Sit on top of EVERYTHING (even fullscreen apps if compositor allows)
-    layer: WlrLayer.Overlay
+    layer: WlrLayer.Top
 
     // 3. Invisible background
     color: "transparent"

modules/wallpaper/ScreenCorners.qml

@@ -52,7 +52,8 @@ Item {
                 readonly property real screenHeight: cornersShape.height
 
                 strokeWidth: -1 // No outline
-                fillColor: Colors.background
+                //fillColor: Colors.background
+                fillColor: "black"
 
                 // Smooth fade if you toggle it
 

modules/wallpaper/Wallpaper.qml

@@ -1,17 +1,12 @@
 import QtQuick
+import QtQuick.Controls // <--- Needed for StackView
 import Quickshell
 import Quickshell.Wayland
-import "."
-import qs
 
 WlrLayershell {
     id: root
-    // Inside your Wallpaper Window
-
-    // 1. Send it to the bottom of the stack!
     layer: WlrLayer.Background
-
+    keyboardFocus: WlrKeyboardFocus.None
-    // 2. Stretch it to cover the ENTIRE screen
     anchors {
         top: true
         bottom: true
@@ -19,15 +14,69 @@ WlrLayershell {
         right: true
     }
 
-    // 3. IMPORTANT: Tell the compositor NOT to reserve space for this.
+    // We need to accept the screen from Variants
-    // If you don't do this, your wallpaper might push your windows aside!
+    property var screen
-    exclusionMode: ExclusionMode.Ignore
+    property var modelData
 
-    // 4. The actual content
+    // 1. The StackView manages the images
-
+    StackView {
-    Image {
+        id: wallStack
-        id: actualWall
         anchors.fill: parent
-        source: WallpaperStore.currentWall
+        implicitWidth: Screen.width
+        implicitHeight: Screen.height
+
+        // 2. Define what a "Wallpaper" looks like
+        Component {
+            id: wallComponent
+            Image {
+                fillMode: Image.PreserveAspectCrop
+                width: StackView.view.width
+                height: StackView.view.height
+                asynchronous: true // ⚡ VERY IMPORTANT: Prevents lag while loading!
+            }
+        }
+
+        // 3. Load the initial wallpaper immediately (No animation on boot)
+        initialItem: wallComponent.createObject(wallStack, {
+            "source": WallpaperStore.currentWall
+        })
+
+        // 4. THE ANIMATIONS 🎬
+        // When a new wall replaces the old one:
+
+        // New One: Fades In (0 -> 1)
+        replaceEnter: Transition {
+            NumberAnimation {
+                property: "x"
+                from: wallStack.width
+                to: 0
+                duration: 800 // Slower = Smoother
+                easing.type: Easing.OutQuad
+            }
+        }
+
+        // Old One: Fades Out (1 -> 0)
+        replaceExit: Transition {
+            NumberAnimation {
+                property: "x"
+                from: 0
+                to: -wallStack.width
+                duration: 800
+                easing.type: Easing.OutQuad
+            }
+        }
+    }
+
+    // 5. The Trigger 🔫
+    // We listen for the singleton to change, then tell the Stack to update
+    Connections {
+        target: WallpaperStore
+
+        function onCurrentWallChanged() {
+            // "Replace the current item with a new wallComponent using the new source"
+            wallStack.replace(wallComponent, {
+                "source": WallpaperStore.currentWall
+            });
+        }
     }
 }

shell.qml

@@ -1,25 +1,22 @@
 //@ pragma UseQApplication
 //pragma ComponentBehavior: Bound
+pragma ComponentBehavior: Bound
 import Quickshell
-import qs.modules.bar
+import "./modules/bar/"
-import qs.modules.wallpaper
+import "./modules/wallpaper/"
-import qs.modules.notifications
+import "./modules/notifications/"
 
 Scope {
     WallSwitcher {}
     Variants {
         id: wallVariants
         model: Quickshell.screens
-        delegate: Wallpaper {
+        delegate: Wallpaper {}
-            screen: wallVariants.modelData
-        }
     }
     Variants {
         id: barVariants
         model: Quickshell.screens
-        delegate: Bar {
+        delegate: Bar {}
-            screen: barVariants.modelData
-        }
     }
     NotiPopup {}
     Overlay {}