FIX: made borders of notifications rounded

.gitignore

@@ -3,3 +3,5 @@ Colors.qml
 modules/wlogout/scripts/helper.sh
 config/path/ConfigPath.qml
 config/path/WallpaperPath.qml
+modules/notification/assets/notification.ogg
+*.json

README.md

@@ -20,8 +20,6 @@ $HOME/Pictures/Wallpapers/
 - [ImageMagick (resizing & blurring)](https://github.com/ImageMagick/ImageMagick)
 
 ## Other Software:
-### Logout:
-- [wlogout](https://github.com/ArtsyMacaw/wlogout)
 - [nmcli (Recommended for Wifi)](https://github.com/ushiboy/nmcli)
 
 ## TO Enable Sub Programs:
@@ -30,9 +28,16 @@ Add the Lines to your ```~/.config/hypr/hyprland.conf``` keep in mind that you m
 ```bind = $mainMod SHIFT, W, global, quickshell:Wallpaper```
 ### JLearner
 ```bind = $mainMod SHIFT, J, global, quickshell:JLearner```
+### WLogout
+```bind = $mainMod SHIFT, L, global, quickshell:WLogout```
 
 # TODO:
 
 - Volume Contol
 - Notes
 - wofi
+
+### Inspirations
+- [quickshell-examples](https://github.com/quickshell-mirror/quickshell-examples)
+- [caelestia-shell](https://github.com/caelestia-dots/shell)
+- [TheLinuxGuy](https://www.youtube.com/@TheLinuxGuy-btw)

TODO.md

@@ -5,3 +5,5 @@ Akku (connected devices mice...)
 Background/Wallpaper
 Notes
 Network (NMCli)
+reload-popup
+WIN+Tab (shows Graphically all monitors and workspaces with Icon for app)

config/Config.qml

@@ -1,25 +1,40 @@
 pragma Singleton
-import QtQuick 2.15
+import QtQuick
+import Quickshell.Hyprland
 import "./path"
 
 QtObject {
+    // Not really usable since it is not updating when changed
+    property var focusedMonitor: Hyprland.focusedMonitor
+
     readonly property string configDir: ConfigPath.path
     readonly property string wallpaperDir: WallpaperPath.wallpaperDir
 
     readonly property int small_spacing: 4
     readonly property int spacing: 8
-    function small_spacing_fun(screenHeight) { return Math.floor(barHeight(screenHeight) / 16) }
+    function bar_small_bar_spacing_fun(barH) { return Math.floor(barHeight(barH) / 16) }
-    function spacing_fun(barH) { return Math.floor(barH / 8) }
+    function bar_spacing_fun(barH) { return Math.floor(barH / 8) }
-    function big_spacing_fun(barH) { return Math.floor(barH / 6) }
+    function bar_big_spacing_fun(barH) { return Math.floor(barH / 6) }
+
+    function screen_small_bar_spacing_fun(screenHeight) { return Math.floor((screenHeight / 1080)*2) }
+    function screen_spacing_fun(screenHeight) { return Math.floor((screenHeight / 1080)*4) }
+    function screen_big_spacing_fun(screenHeight) { return Math.floor((screenHeight / 1080)*8) }
 
     function font_size(spaceHeight) { return Math.floor(spaceHeight * 0.75) }
     function font_size_small(spaceHeight) { return Math.floor(spaceHeight * 0.625) }
     function font_size_tiny(spaceHeight) { return Math.floor(spaceHeight * 0.4) }
 
+    function screen_height_to_font_tiny(screenHeight) {return Math.round(9 * screenHeight / 1080)}
+    function screen_height_to_font_small(screenHeight) {return Math.round(12 * screenHeight / 1080)}
+    function screen_height_to_font_medium(screenHeight) {return Math.round(16 * screenHeight / 1080)}
+    function screen_height_to_font_big(screenHeight) {return Math.round(22 * screenHeight / 1080)}
+
     readonly property int small_radius: 8
     readonly property int radius: 16
     function small_radius_fun(barHeight) { return Math.floor(barHeight / 8) }
     function radius_fun(barHeight) { return Math.floor(barHeight / 4) }
+    function screen_radius_fun(screenHeight) { return Math.floor((screenHeight / 1080)*4) }
+    function screen_big_radius_fun(screenHeight) { return Math.floor((screenHeight / 1080)*6) }
     readonly property int big_radius: 10
     readonly property int border_width: 2
 
@@ -65,4 +80,6 @@ QtObject {
 
         return maxWidth;
     }
+
+    property string debug: ""
 }

install.sh

@@ -105,6 +105,15 @@ download \
   "$SCRIPT_DIR/modules/jl/assets/correct.svg" \
   "correct.svg"
 
+# ----------------------------
+# Sounds
+# ----------------------------
+
+download \
+  "https://raw.githubusercontent.com/akx/Notifications/master/OGG/Chord.ogg" \
+  "$SCRIPT_DIR/modules/notification/assets/notification.ogg" \
+  "notification.ogg"
+
 # ----------------------------
 # Nerd Font
 # ----------------------------

modules/bar/Bar.qml

@@ -2,6 +2,7 @@ import QtQuick
 import Quickshell
 import Quickshell.Hyprland
 import "./widgets"
+import "./states/Idle"
 import "../../config"
 
 PanelWindow {
@@ -13,7 +14,7 @@ PanelWindow {
     anchors.left: true
     anchors.right: true
 
-    implicitHeight: Math.floor(screen.height * Config.barHeightRatio(screen.height))
+    implicitHeight: Config.barHeight(screen.height)
 
     exclusiveZone: height // this is so context menus don't clip into the bar
 
@@ -25,6 +26,10 @@ PanelWindow {
         right: 0
     }
 
+    Component.onCompleted: {
+        IdleState.panelWindow = panel
+    }
+
     Rectangle { // Bar
         id: bar
         anchors.fill: parent   
@@ -35,8 +40,8 @@ PanelWindow {
 
             anchors.verticalCenter: parent.verticalCenter
             anchors.left: parent.left
-            anchors.leftMargin: Config.big_spacing_fun(height)
+            anchors.leftMargin: Config.bar_big_spacing_fun(height)
-            spacing: Config.big_spacing_fun(height)
+            spacing: Config.bar_big_spacing_fun(height)
 
             MenuButton {}
 
@@ -52,7 +57,7 @@ PanelWindow {
         Row {  // bar widgets center
             id: widgetsCenter
             anchors.centerIn: parent
-            spacing: Config.big_spacing_fun(height)
+            spacing: Config.bar_big_spacing_fun(height)
 
             Clock {}
 
@@ -64,14 +69,17 @@ PanelWindow {
             anchors.verticalCenter: parent.verticalCenter
             anchors.right: parent.right
             anchors.rightMargin: 0
-            spacing: Config.big_spacing_fun(height)
+            spacing: Config.bar_big_spacing_fun(height)
 
             // TODO: Add bluetooth, network, audio, power, maybe HW monitor
             Tray{}
+            NotificationButton {}
+            // AudioSource{}
+            AudioSink{}
             Battery{}
-            Network {}
+            Network{}
-            IdleButton { panelWindow: panel }
+            IdleButton {}
-            PowerButton {}
+            PowerButton{}
 
         }
     }

modules/bar/BarLoader.qml

@@ -1,5 +1,6 @@
 import QtQuick
 import Quickshell
+import Quickshell.Hyprland
 
 
 Item {
@@ -8,7 +9,10 @@ Item {
         model: Quickshell.screens
         delegate: Loader {
             active: true // loads object
-            sourceComponent: Bar {screen: modelData} // creates instance of bar component
+            sourceComponent: Bar {
+                screen: modelData
+                visible: !Hyprland.monitorFor(modelData).activeWorkspace?.hasFullscreen
+            } // creates instance of bar component
         }
     }
 }

modules/bar/states/Apps/AppsState.qml

@@ -183,6 +183,8 @@ Item {
         "lightburn":                "󱇣",
         "wofi":                     "",
         // Screenshare
-        "moonlight":                "󰍹ßß"
+        "moonlight":                "󰍹",
+        // PCB
+        "kicad":                    "",
     })
 }

modules/bar/states/Audio/DefaultSinkState.qml

@@ -0,0 +1,36 @@
+pragma Singleton
+
+import QtQuick
+import Quickshell
+import Quickshell.Services.Pipewire
+
+Item {
+    id: root
+
+    PwObjectTracker {
+        objects: [ Pipewire.defaultAudioSink ]
+    }
+
+    property var audioSink: Pipewire.defaultAudioSink
+
+    property bool exists: audioSink != null
+    property bool mute: audioSink?.audio?.muted ?? false
+    property real volume: Math.round((audioSink?.audio?.volume ?? 0) * 1000) / 10
+
+    property bool volumeChanged: false
+
+	Connections {
+		target: audioSink?.audio
+
+		function onVolumeChanged() {
+			root.volumeChanged = true;
+			hideTimer.restart();
+		}
+	}
+
+    Timer {
+        id: hideTimer
+        interval: 2000
+        onTriggered: root.volumeChanged = false
+    }
+}

modules/bar/states/Audio/DefaultSourceState.qml

@@ -0,0 +1,36 @@
+pragma Singleton
+
+import QtQuick
+import Quickshell
+import Quickshell.Services.Pipewire
+
+Item {
+    id: root
+
+    property var audioSource: Pipewire.defaultAudioSource
+
+    property bool exists: audioSource != null && audioSource.ready
+    property bool mute: audioSource?.audio?.muted ?? false
+    property real volume: Math.round((audioSource?.audio?.volume ?? 0) * 1000) / 10
+
+    property bool volumeChanged: false
+
+    PwObjectTracker {
+        objects: [ root.audioSource ]
+    }
+
+	Connections {
+		target: root.audioSource?.audio
+
+		function onVolumeChanged() {
+			root.volumeChanged = true;
+			hideTimer.restart();
+		}
+	}
+
+    Timer {
+        id: hideTimer
+        interval: 2000
+        onTriggered: root.volumeChanged = false
+    }
+}

modules/bar/states/Audio/qmldir

@@ -0,0 +1,2 @@
+singleton Sink DefaultSinkState.qml
+singleton Source DefaultSourceState.qml

modules/bar/states/Battery/BatteryState.qml

@@ -1,21 +1,144 @@
 pragma Singleton
 import QtQuick
 import Quickshell
+import Quickshell.Io
 import Quickshell.Services.UPower
+import "../../../../config"
 
 Item {
-    property bool available: UPower.displayDevice.isLaptopBattery
+    id: root
+    // show widget for laptop battery *or* UPS (your main PC), hide otherwise
+    // displayDevice is aggregate - for UPS it is type Ups, isLaptopBattery is false
+    property bool available: {
+        const d = UPower.displayDevice
+        if (d && d.ready && d.isPresent && (d.isLaptopBattery || d.type === UPowerDeviceType.Ups)) return true
+        // fallback: scan all devices (some systems don't set DisplayDevice to UPS)
+        const devs = UPower.devices.values
+        for (let i = 0; i < devs.length; i++) {
+            const dev = devs[i]
+            if (dev.isPresent && (dev.isLaptopBattery || dev.type === UPowerDeviceType.Ups)) return true
+        }
+        return false
+    }
     property real percentage: UPower.displayDevice.percentage*100
-    property string state: UPowerDeviceState.toString(UPower.displayDevice.state)
+    // 'state' shadows Item.state (qmllint) -> use chargeState
-    property bool charging: state == "Charging"
+    property string chargeState: UPowerDeviceState.toString(UPower.displayDevice.state)
-    property bool full: state == "FullyCharged"
+    // keep alias via getter would still shadow, so expose via function if needed; prefer chargeState
+    property bool charging: chargeState == "Charging"
+    property bool full: chargeState == "FullyCharged"
     property real energy: UPower.displayDevice.energy
     property real energy_formated: Math.round(energy*10)/10
     property real time_to_empty: UPower.displayDevice.timeToEmpty
+    property real time_to_full: UPower.displayDevice.timeToFull
     property real hour_to_empty: Math.floor(time_to_empty/3600)
     property real min_to_empty: Math.floor((time_to_empty%3600)/60)
+    property real hour_to_full: Math.floor(time_to_full/3600)
+    property real min_to_full: Math.floor((time_to_full%3600)/60)
     property real energy_rate: UPower.displayDevice.changeRate
     property real energy_rate_formated: Math.round(energy_rate*10)/10
     property bool healthSupported: UPower.displayDevice.healthSupported
     property real health: healthSupported ? UPower.displayDevice.healthPercentage : NaN
+
+    property int _maxHistory: 60*60 // 1h window
+
+    property var percentageHistory: [{time: Date.now() - _maxHistory*1000, value: 0}, {time: Date.now(), value: 0}]
+    property var percentageHistoryExists: false
+    property var energyHistory: [{time: Date.now() - _maxHistory*1000, value: 0}, {time: Date.now(), value: 0}]
+    property var energyHistoryExists: false
+    property var usageHistory: [{time: Date.now() - _maxHistory*1000, value: 0}, {time: Date.now(), value: 0}]
+    property var usageHistoryExists: false
+
+    // ---- persistence: survives reload AND close (FileView -> disk) ----
+    // use Config.configDir (base dir) so path is stable and visible in repo
+    readonly property string _historyPath: Config.configDir + "/modules/bar/states/Battery/battery_history.json"
+    // guard: don't try to read non-existent file (avoids FileView warning)
+    Process {
+        id: historyFileExistsCheck
+        command: ["test", "-f", root._historyPath]
+        onExited: function(exitCode, exitStatus) {
+            if (exitCode === 0) historyFile.path = root._historyPath
+            // else keep historyFile.path empty -> no read attempt, writes will set it later
+        }
+        Component.onCompleted: running = true
+    }
+    FileView {
+        id: historyFile
+        printErrors: false
+        // adapter holds json, synced to disk via writeAdapter()
+        adapter: JsonAdapter {
+            property var percentageHistory: []
+            property var energyHistory: []
+            property var usageHistory: []
+        }
+        onLoaded: {
+            function prune(arr) {
+                if (!arr || typeof arr.length !== "number" || arr.length===0) return null
+                const f = arr.filter(p => p && typeof p.time==="number" && typeof p.value==="number")
+                if (f.length < 2) return null
+                return f.length > root._maxHistory ? f.slice(-root._maxHistory) : f
+            }
+            const p = prune(adapter.percentageHistory)
+            if (p) { root.percentageHistory = p; root.percentageHistoryExists = p.some(i=>i.value!==0) }
+            const e = prune(adapter.energyHistory)
+            if (e) { root.energyHistory = e; root.energyHistoryExists = e.some(i=>i.value!==0) }
+            const u = prune(adapter.usageHistory)
+            if (u) { root.usageHistory = u; root.usageHistoryExists = u.some(i=>i.value!==0) }
+        }
+        onLoadFailed: {} // first run, file missing -> keep defaults
+    }
+
+    // periodic save every 10s (debounce-restart would never fire while statsTimer pushes every 1s)
+    Timer {
+        id: saveTimer
+        interval: 10000
+        repeat: true
+        running: true
+        onTriggered: {
+            if (historyFile.path === "") historyFile.path = root._historyPath
+            historyFile.adapter.percentageHistory = root.percentageHistory
+            historyFile.adapter.energyHistory = root.energyHistory
+            historyFile.adapter.usageHistory = root.usageHistory
+            historyFile.writeAdapter()
+        }
+    }
+
+    Timer {
+        id: statsTimer
+        interval: 1000
+        repeat: true
+        running: true
+        onTriggered: {
+            const now = Date.now()
+
+            // Creating percentage History
+            let pHist = root.percentageHistory.slice()
+            pHist.push({time: now, value: percentage})
+            if (pHist.length > root._maxHistory) pHist.shift()
+            root.percentageHistoryExists = pHist.some(item => item.value !== 0 && item.value !== undefined)
+            root.percentageHistory = pHist
+
+            // Creating energy History
+            let eHist = root.energyHistory.slice()
+            eHist.push({time: now, value: energy_formated})
+            if (eHist.length > root._maxHistory) eHist.shift()
+            root.energyHistoryExists = eHist.some(item => item.value !== 0 && item.value !== undefined)
+            root.energyHistory = eHist
+
+            // Creating usage History
+            let uHist = root.usageHistory.slice()
+            uHist.push({time: now, value: energy_rate_formated})
+            if (uHist.length > root._maxHistory) uHist.shift()
+            root.usageHistoryExists = uHist.some(item => item.value !== 0 && item.value !== undefined)
+            root.usageHistory = uHist
+        }
+    }
+
+    // ensure save on clean close / reload (best-effort, reload preserves via FileView anyway)
+    Component.onDestruction: {
+        if (historyFile.path === "") historyFile.path = root._historyPath
+        historyFile.adapter.percentageHistory = root.percentageHistory
+        historyFile.adapter.energyHistory = root.energyHistory
+        historyFile.adapter.usageHistory = root.usageHistory
+        historyFile.writeAdapter()
+    }
 }

modules/bar/states/Idle/IdleState.qml

@@ -2,11 +2,28 @@ pragma Singleton
 import QtQuick
 import Quickshell
 import Quickshell.Io
+import Quickshell.Wayland
 import "../../../../config"
 
 Item {
     // true = inhibit idle (prevent hypridle/lock/dpms), false = allow idle
     property bool idle: false
+    property bool isIdle: idleMonitor.isIdle
+
+    property PanelWindow panelWindow: null
+
+    IdleInhibitor {
+        id: idleInhibitor
+        window: panelWindow
+        enabled: IdleState.idle
+    }
+
+    IdleMonitor {
+        id: idleMonitor
+        enabled: true
+        timeout: 30
+        respectInhibitors: true
+    }
 
     // may need this in hypridle.conf
     // general {

modules/bar/states/Network/NetworkState.qml

@@ -3,6 +3,7 @@ import QtQuick
 import Quickshell
 import Quickshell.Io
 import Quickshell.Networking
+import "../../../../config"
 
 QtObject {
     id: root
@@ -38,6 +39,62 @@ QtObject {
 
     readonly property var networking: Networking
 
+    // ---- persistence: survives reload AND close (disk) ----
+    // use Config.configDir (base dir) so path is stable and visible in repo
+    readonly property string _historyPath: Config.configDir + "/modules/bar/states/Network/network_history.json"
+    // guard: don't try to read non-existent file
+    property Process historyFileExistsCheck: Process {
+        command: ["test", "-f", root._historyPath]
+        onExited: function(exitCode, exitStatus) {
+            if (exitCode === 0) root.historyFile.path = root._historyPath
+        }
+        Component.onCompleted: running = true
+    }
+    // QtObject has no default property, so hold FileView as typed property
+    property FileView historyFile: FileView {
+        printErrors: false
+        adapter: JsonAdapter {
+            property var downloadHistory: []
+            property var uploadHistory: []
+            property var pingHistory: []
+        }
+        onLoaded: {
+            function prune(arr) {
+                if (!arr || typeof arr.length !== "number" || arr.length===0) return null
+                const f = arr.filter(p => p && typeof p.time==="number" && typeof p.value==="number")
+                if (f.length < 2) return null
+                return f.length > root._maxHistory ? f.slice(-root._maxHistory) : f
+            }
+            const d = prune(adapter.downloadHistory)
+            if (d) root.downloadHistory = d
+            const u = prune(adapter.uploadHistory)
+            if (u) root.uploadHistory = u
+            const p = prune(adapter.pingHistory)
+            if (p) root.pingHistory = p
+        }
+        onLoadFailed: {} // first run
+    }
+    // periodic save every 10s (restart-debounce would never fire while statsTimer pushes every 1s)
+    property Timer saveTimer: Timer {
+        interval: 10000
+        repeat: true
+        running: true
+        onTriggered: {
+            if (root.historyFile.path === "") root.historyFile.path = root._historyPath
+            root.historyFile.adapter.downloadHistory = root.downloadHistory
+            root.historyFile.adapter.uploadHistory = root.uploadHistory
+            root.historyFile.adapter.pingHistory = root.pingHistory
+            root.historyFile.writeAdapter()
+        }
+    }
+    Component.onDestruction: {
+        if (root.historyFile.path === "") root.historyFile.path = root._historyPath
+        root.historyFile.adapter.downloadHistory = root.downloadHistory
+        root.historyFile.adapter.uploadHistory = root.uploadHistory
+        root.historyFile.adapter.pingHistory = root.pingHistory
+        root.historyFile.writeAdapter()
+    }
+
     function findAllConnectedDevices() {
         var devs = networking.devices.values
         var result = []
@@ -70,7 +127,8 @@ QtObject {
                 var nets = dev.networks.values
                 for (var j = 0; j < nets.length; j++) {
                     if (nets[j].connected) {
-                        sig += ":" + nets[j].name
+                        // include signalStrength & name so hover updates live on signal change
+                        sig += ":" + nets[j].name + ":" + Math.round(nets[j].signalStrength*100)
                         break
                     }
                 }

modules/bar/widgets/AudioSink.qml

@@ -0,0 +1,63 @@
+import QtQuick
+import "../../../config"
+import "../states/Audio"
+import Quickshell.Hyprland
+
+MouseArea {
+    id: audioButton
+
+    width: Math.max(audioRow.width + Config.bar_spacing_fun(height)*3.5, height)
+    height: bar.height
+    hoverEnabled: true
+    cursorShape: Qt.PointingHandCursor
+    enabled: Sink.exists
+
+    Rectangle {
+        anchors.fill: parent
+        color: audioButton.containsMouse ? Colors.tertiary : Qt.alpha(Colors.tertiaryContainer, 0.25)
+        radius: Config.radius_fun(audioButton.height)
+        border.width: Config.border_width
+        border.color: audioButton.containsMouse ? Colors.tertiaryContainer_fg
+            : Colors.secondaryContainer_fg
+
+        Row {
+            id: audioRow
+            width: audioSourceText.width + audioSinkText.width + audioPercentageText.width + Config.bar_spacing_fun(height)*2
+            height: parent.height
+            spacing: Config.bar_spacing_fun(height)/2
+            anchors.centerIn: parent
+
+            Text {
+                id: audioSourceText
+                text: (Source.mute ? "󰍭" :
+                "󰍬")
+                anchors.verticalCenter: parent.verticalCenter
+                font.pixelSize: Config.iconSize(bar.height)
+                font.family: Config.font
+                color: audioButton.containsMouse ? Colors.tertiary_fg : Colors.primary
+                rightPadding: Config.bar_spacing_fun(height)*1.5
+            }
+
+            Text {
+                id: audioSinkText
+                text: (Sink.mute ? "󰝟" : 
+                Sink.volume > 60 ? "󰕾" :
+                Sink.volume > 30 ? "󰖀" :
+                "󰕿")
+                anchors.verticalCenter: parent.verticalCenter
+                font.pixelSize: Config.iconSize(bar.height)
+                font.family: Config.font
+                color: audioButton.containsMouse ? Colors.tertiary_fg : Colors.primary
+            }
+
+            Text {
+                id: audioPercentageText
+                text: Sink.volume + "%"
+                anchors.verticalCenter: parent.verticalCenter
+                font.pixelSize: Config.iconSize(bar.height)
+                font.family: Config.font
+                color: audioButton.containsMouse ? Colors.tertiary_fg : Colors.primary
+            }
+        }
+    }
+}

modules/bar/widgets/AudioSource.qml

@@ -0,0 +1,32 @@
+import QtQuick
+import "../../../config"
+import "../states/Audio"
+
+MouseArea {
+    id: audioButton
+
+    width: Math.max(audioText.width + Config.bar_spacing_fun(height)*2, height)
+    height: bar.height
+    hoverEnabled: true
+    cursorShape: Qt.PointingHandCursor
+    enabled: Sink.exists
+
+    Rectangle {
+        anchors.fill: parent
+        color: audioButton.containsMouse ? Colors.tertiary : Qt.alpha(Colors.tertiaryContainer, 0.25)
+        radius: Config.radius_fun(audioButton.height)
+        border.width: Config.border_width
+        border.color: audioButton.containsMouse ? Colors.tertiaryContainer_fg
+            : Colors.secondaryContainer_fg
+
+        Text {
+            id: audioText
+            text: (Source.mute ? "󰍭" :
+            "󰍬")
+            anchors.centerIn: parent
+            font.pixelSize: Config.iconSize(bar.height)
+            font.family: Config.font
+            color: audioButton.containsMouse ? Colors.tertiary_fg : Colors.primary
+        }
+    }
+}

modules/bar/widgets/Battery.qml

@@ -1,12 +1,11 @@
 import QtQuick
 import Quickshell
-import Quickshell.Hyprland
 import "../../../config"
 import "../states/Battery"
 
 MouseArea {
     id: batteryButton
-    width: expanded ? Math.max(expandedRow.width + Config.spacing_fun(height)*3, bar.height) : Math.max(batteryText.width + Config.spacing_fun(height)*2, bar.height)
+    width: expanded ? Math.max(expandedRow.width + Config.bar_spacing_fun(height)*3, bar.height) : Math.max(batteryText.width + Config.bar_spacing_fun(height)*2, bar.height)
     height: bar.height
     hoverEnabled: true
     cursorShape: Qt.PointingHandCursor
@@ -24,7 +23,7 @@ MouseArea {
 
         Text {
             id: batteryText
-            visible : !expanded
+            visible : !batteryButton.expanded
             anchors.centerIn: parent
             text:(
                 BatteryState.percentage >= 90 ? "" :
@@ -49,7 +48,7 @@ MouseArea {
 
         Text {
             id: chargeIcon
-            visible : !expanded && BatteryState.charging
+            visible : !batteryButton.expanded && BatteryState.charging
             anchors.centerIn: parent
             text: "󱐋"
             font.pixelSize: Config.iconSize(batteryButton.height)
@@ -61,9 +60,9 @@ MouseArea {
 
         Row {
             id: expandedRow
-            visible: expanded
+            visible: batteryButton.expanded
             anchors.centerIn: parent
-            spacing: Config.spacing_fun(batteryButton.height)
+            spacing: Config.bar_spacing_fun(batteryButton.height)
 
             Text {
                 id: batteryPercentageSymbol
@@ -100,7 +99,7 @@ MouseArea {
 
             Text {
                 id: batteryPercentageText
-                text: BatteryState.percentage + "%"
+                text: Math.round(BatteryState.percentage) + "%"
 
                 font.pixelSize: Config.labelSize(batteryButton.height)
                 font.family: Config.font
@@ -121,13 +120,91 @@ MouseArea {
         id: batteryPopup
         anchorItem: batteryButton
         anchorHovered: batteryButton.containsMouse
-        spacingValue: Config.spacing_fun(batteryButton.height)
+        spacingValue: Config.bar_spacing_fun(batteryButton.height)
         radiusValue: Config.radius_fun(batteryButton.height)
 
         Column {
-            spacing: parent.spacing
+            spacing: batteryPopup.spacingValue
             Text {
-                text: "percentage: " + BatteryState.percentage + "%"
+                text: "State: " + BatteryState.chargeState
+                wrapMode: Text.WordWrap
+                color: Colors.primary
+                anchors.horizontalCenter: parent.horizontalCenter
+                font.pixelSize: Config.font_size_tiny(bar.height)
+                font.family: Config.font
+            }
+            Column {
+                width: parent.width
+                spacing: 2
+                visible: BatteryState.percentageHistoryExists
+
+                Text {
+                    text: "percentage: " + Math.round(BatteryState.percentage) + "%"
+                    color: Colors.primary
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    font.pixelSize: Config.font_size_tiny(bar.height)
+                    font.family: Config.font
+                }
+
+                Sparkline {
+                    values: BatteryState.percentageHistory
+                    lineColor: Colors.primary
+                    width: parent.width
+                    windowMs: BatteryState._maxHistory * 1000
+                }
+            }
+            Column {
+                width: parent.width
+                spacing: 2
+                visible: BatteryState.energyHistoryExists
+
+                Text {
+                    text: "energy: " + BatteryState.energy_formated + " Wh"
+                    color: Colors.primary
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    font.pixelSize: Config.font_size_tiny(bar.height)
+                    font.family: Config.font
+                }
+
+                Sparkline {
+                    values: BatteryState.energyHistory
+                    lineColor: Colors.primary
+                    width: parent.width
+                    windowMs: BatteryState._maxHistory * 1000
+                }
+            }
+            Column {
+                width: parent.width
+                spacing: 2
+                visible: BatteryState.usageHistoryExists
+
+                Text {
+                    text: "Usage: " + BatteryState.energy_rate_formated + " W"
+                    color: Colors.primary
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    font.pixelSize: Config.font_size_tiny(bar.height)
+                    font.family: Config.font
+                }
+
+                Sparkline {
+                    values: BatteryState.usageHistory
+                    lineColor: Colors.primary
+                    width: parent.width
+                    windowMs: BatteryState._maxHistory * 1000
+                }
+            }
+            Text {
+                text: {
+                    if (BatteryState.charging) {
+                        if (BatteryState.hour_to_full > 0) return "Remaining: " + BatteryState.hour_to_full + "h " + BatteryState.min_to_full + "min (to full)"
+                        if (BatteryState.min_to_full > 0) return "Remaining: " + BatteryState.min_to_full + "min (to full)"
+                        return BatteryState.full ? "Fully charged" : "Calculating..."
+                    } else {
+                        if (BatteryState.hour_to_empty > 0) return "Remaining: " + BatteryState.hour_to_empty + "h " + BatteryState.min_to_empty + "min"
+                        if (BatteryState.min_to_empty > 0) return "Remaining: " + BatteryState.min_to_empty + "min"
+                        return "Calculating..."
+                    }
+                }
                 wrapMode: Text.WordWrap
                 color: Colors.primary
                 anchors.horizontalCenter: parent.horizontalCenter
@@ -135,42 +212,7 @@ MouseArea {
                 font.family: Config.font
             }
             Text {
-                text: "State: " + BatteryState.state
+                text: "Health: " + Math.round(BatteryState.health) + " %"
-                wrapMode: Text.WordWrap
-                color: Colors.primary
-                anchors.horizontalCenter: parent.horizontalCenter
-                font.pixelSize: Config.font_size_tiny(bar.height)
-                font.family: Config.font
-            }
-            Text {
-                text: "energy: " + Math.round(BatteryState.energy*10)/10 + " W"
-                wrapMode: Text.WordWrap
-                color: Colors.primary
-                anchors.horizontalCenter: parent.horizontalCenter
-                font.pixelSize: Config.font_size_tiny(bar.height)
-                font.family: Config.font
-            }
-            Text {
-                text: (
-                    BatteryState.hour_to_empty > 0 ? "Remaining: " + BatteryState.hour_to_empty + "h " + BatteryState.min_to_empty + "min" :
-                    BatteryState.min_to_empty > 0 ? "Remaining: " + BatteryState.min_to_empty + "min" :
-                    "NaN")
-                wrapMode: Text.WordWrap
-                color: Colors.primary
-                anchors.horizontalCenter: parent.horizontalCenter
-                font.pixelSize: Config.font_size_tiny(bar.height)
-                font.family: Config.font
-            }
-            Text {
-                text: "Usage: " + BatteryState.energy_rate_formated + " W"
-                wrapMode: Text.WordWrap
-                color: Colors.primary
-                anchors.horizontalCenter: parent.horizontalCenter
-                font.pixelSize: Config.font_size_tiny(bar.height)
-                font.family: Config.font
-            }
-            Text {
-                text: "Health: " + BatteryState.health + " %"
                 visible: BatteryState.healthSupported
                 wrapMode: Text.WordWrap
                 color: Colors.primary

modules/bar/widgets/Clock.qml

@@ -6,7 +6,7 @@ import "../states/Clock"
 
 Rectangle {  //workspace
     id: clockRect
-    width: ClockState.expanded ? Math.max(dateText.width + timeText.width + Config.spacing_fun(height)*3, bar.height) : Math.max(timeText.width + Config.spacing_fun(height)*2, bar.height)
+    width: ClockState.expanded ? Math.max(dateText.width + timeText.width + Config.bar_spacing_fun(height)*3, bar.height) : Math.max(timeText.width + Config.bar_spacing_fun(height)*2, bar.height)
     height: bar.height
     radius: Config.radius_fun(height)
     color: clockArea.containsMouse ? Colors.tertiaryContainer : Colors.primaryContainer
@@ -61,7 +61,7 @@ Rectangle {  //workspace
         id: clockPopup
         anchorItem: clockRect
         anchorHovered: clockArea.containsMouse
-        spacingValue: Config.spacing_fun(clockRect.height)
+        spacingValue: Config.bar_spacing_fun(clockRect.height)
         radiusValue: Config.radius_fun(clockRect.height)
         
         Column {

modules/bar/widgets/IdleButton.qml

@@ -1,33 +1,17 @@
 import QtQuick
 import Quickshell
 import Quickshell.Hyprland
-import Quickshell.Wayland
 import Quickshell.Io
 import "../../../config"
 import "../states/Idle"
 
 MouseArea {
     id: idleButton
-    width: Math.max(idleText.width + Config.spacing_fun(height)*2, height)
+    width: Math.max(idleText.width + Config.bar_spacing_fun(height)*2, height)
     height: bar.height
     hoverEnabled: true
     cursorShape: Qt.PointingHandCursor
 
-    required property PanelWindow panelWindow
-
-    IdleInhibitor {
-        id: idleInhibitor
-        window: panelWindow
-        enabled: IdleState.idle
-    }
-
-    IdleMonitor {
-        id: idleMonitor
-        enabled: true
-        timeout: 30
-        respectInhibitors: true
-    }
-
     onClicked: {
         IdleState.idle = !IdleState.idle
         console.log("[IdleButton] Toggling idle: " + (IdleState.idle ? "enabled" : "disabled"))
@@ -35,7 +19,7 @@ MouseArea {
     
     Rectangle {
         anchors.fill: parent
-        color: idleButton.containsMouse ? Colors.tertiary : idleMonitor.isIdle ? Qt.alpha(Colors.secondary, 0.25) : Qt.alpha(Colors.tertiaryContainer, 0.25)
+        color: idleButton.containsMouse ? Colors.tertiary : IdleState.isIdle ? Qt.alpha(Colors.secondary, 0.25) : Qt.alpha(Colors.tertiaryContainer, 0.25)
         radius: Config.radius_fun(idleButton.height)
         border.width: Config.border_width
         border.color: (

modules/bar/widgets/Network.qml

@@ -5,7 +5,7 @@ import "../states/Network"
 MouseArea {
     id: networkButton
 
-    width: Math.max(networkText.width + Config.spacing_fun(height)*2, height)
+    width: Math.max(networkText.width + Config.bar_spacing_fun(height)*2, height)
     height: bar.height
     hoverEnabled: true
     cursorShape: Qt.PointingHandCursor
@@ -37,7 +37,7 @@ MouseArea {
         id: clockPopup
         anchorItem: networkButton
         anchorHovered: networkButton.containsMouse
-        spacingValue: Config.spacing_fun(networkButton.height)
+        spacingValue: Config.bar_spacing_fun(networkButton.height)
         radiusValue: Config.radius_fun(networkButton.height)
 
         Column {

modules/bar/widgets/NotificationButton.qml

@@ -0,0 +1,65 @@
+import QtQuick
+import Quickshell
+import Quickshell.Widgets
+import Quickshell.Io
+import "../../notification/notificationServer/"
+import "../../../config"
+
+MouseArea {
+    id: notificationButton
+    width: Math.max(bar.height, notificationText.width + Config.spacing)
+    height: bar.height
+    hoverEnabled: true
+    cursorShape: Qt.PointingHandCursor
+
+    onClicked: {
+        // NotificationS.notificationPopupEnabled = !NotificationS.notificationPopupEnabled
+        console.log("[NotificationButton] Opening NotificationHistory")
+        root.toggleNotificationHistory()
+    }
+
+    // ── Report hover to NotificationServer for auto-close logic ──
+    onContainsMouseChanged: NotificationS.buttonHovered = containsMouse
+    Component.onDestruction: {
+        if (containsMouse) NotificationS.buttonHovered = false
+    }
+    onVisibleChanged: {
+        if (!visible && NotificationS.buttonHovered) NotificationS.buttonHovered = false
+    }
+
+
+    Item {
+        anchors.top: parent.topBar
+        anchors.right: parent.right
+        anchors.topMargin: Config.spacing
+        anchors.rightMargin: Config.spacing
+        width: Config.screen_height_to_font_tiny(screen.height)
+        height: Config.screen_height_to_font_tiny(screen.height)
+
+        visible: NotificationS.notificationNum > 0
+
+        Text{
+            anchors.centerIn: parent
+            text: NotificationS.notificationNum
+            font.family: Config.font
+            font.pixelSize: Config.screen_height_to_font_tiny(screen.height)
+            color: Colors.secondaryContainer_fg
+        }
+    }
+
+    Rectangle {
+        anchors.fill: parent
+        color: "transparent"
+        radius: Config.radius_fun(notificationButton.height)
+
+        Text {
+            id: notificationText
+            anchors.centerIn: parent
+            // text: Quickshell.iconPath("discord")
+            text: NotificationS.notificationPopupEnabled ? "󰂚" : "󰂛"
+            font.pixelSize: Config.bigIconSize(bar.height)
+            font.family: Config.font
+            color: Colors.secondaryContainer_fg
+        }
+    }
+}

modules/bar/widgets/PowerButton.qml

@@ -4,7 +4,7 @@ import "../../../config"
 
 MouseArea {
     id: powerButton
-    width: Math.max(powerText.width + Config.spacing_fun(height), height)
+    width: Math.max(powerText.width + Config.bar_spacing_fun(height), height)
     height: bar.height
     hoverEnabled: true
     cursorShape: Qt.PointingHandCursor

modules/bar/widgets/Tray.qml

@@ -7,7 +7,7 @@ import "../../../config"
 
 Row {   // Workspace Row
     id: trayRow
-    spacing: Config.small_spacing_fun(height)
+    spacing: Config.bar_small_bar_spacing_fun(height)
 
     Repeater {
         model: SystemTray.items
@@ -19,8 +19,8 @@ Row {   // Workspace Row
 
             Rectangle {  //trayItem
                 id: trayItem
-                width: iconImage.width + Config.spacing_fun(bar.height)
+                width: iconImage.width + Config.bar_spacing_fun(bar.height)
-                height: iconImage.height + Config.spacing_fun(bar.height)
+                height: iconImage.height + Config.bar_spacing_fun(bar.height)
                 radius: Config.radius_fun(trayRow.height)
                 color: trayArea.containsMouse ? Colors.tertiaryContainer
                     : modelData.active ? Colors.primaryContainer

modules/bar/widgets/WindowInfo.qml

@@ -7,7 +7,7 @@ import "../states/Apps"
 Item {
     id: root
 
-    property real pad: Config.spacing_fun(bar.height) * 1.5
+    property real pad: Config.bar_spacing_fun(bar.height) * 1.5
 
     anchors.verticalCenter: parent.verticalCenter
 
@@ -39,7 +39,7 @@ Item {
     Row {
 
         id: contentRow
-        spacing: Config.spacing_fun(bar.height) * 1.25
+        spacing: Config.bar_spacing_fun(bar.height) * 1.25
         anchors.centerIn: parent
 
         Text {

modules/bar/widgets/Workspaces.qml

@@ -8,8 +8,8 @@ Rectangle {
     id: workspacesContainer
     required property HyprlandMonitor thisMonitor
 
-    height: bar.height - (Config.spacing_fun(bar.height) * 1.5)
+    height: bar.height - (Config.bar_spacing_fun(bar.height) * 1.5)
-    width: workspacesRow.width + (Config.spacing_fun(bar.height) * 2)
+    width: workspacesRow.width + (Config.bar_spacing_fun(bar.height) * 2)
     
     radius: height / 2
     
@@ -20,7 +20,7 @@ Rectangle {
     Row {
         id: workspacesRow
         anchors.centerIn: parent
-        spacing: Config.spacing_fun(bar.height) / 2 
+        spacing: Config.bar_spacing_fun(bar.height) / 2 
 
         Repeater {
             model: Hyprland.workspaces
@@ -30,9 +30,9 @@ Rectangle {
                     id: wsItem
                     property var workspaceData: modelData
                     
-                    width: Math.max(40, wsIconsRow.width==0 ? wsNum.width + 2*Config.spacing_fun(bar.height) : wsNum.width + wsIconsRow.width + 3*Config.spacing_fun(bar.height)+Config.spacing_fun(bar.height))
+                    width: Math.max(40, wsIconsRow.width==0 ? wsNum.width + 2*Config.bar_spacing_fun(bar.height) : wsNum.width + wsIconsRow.width + 3*Config.bar_spacing_fun(bar.height)+Config.bar_spacing_fun(bar.height))
                     // width: {
-                    //     var spacing = Config.spacing_fun(bar.height)
+                    //     var spacing = Config.bar_spacing_fun(bar.height)
                     //     var cw = wsNum.width
                     //     if (wsIconsRow.children.length > 0) {
                     //         cw += spacing + wsIconsRow.width + spacing
@@ -47,7 +47,7 @@ Rectangle {
                     Rectangle {
                         anchors.centerIn: parent
                         width: parent.width
-                        height: parent.height - (Config.spacing_fun(bar.height) * 1.5)
+                        height: parent.height - (Config.bar_spacing_fun(bar.height) * 1.5)
                         
                         radius: height / 2
                         
@@ -79,9 +79,9 @@ Rectangle {
 
                             Row {
                                 anchors.left: parent.left
-                                anchors.leftMargin: wsIconsRow.width==0 ? (wsItem.width-wsNum.width)/2 : (wsItem.width-wsNum.width-wsIconsRow.width-Config.spacing_fun(bar.height))/2
+                                anchors.leftMargin: wsIconsRow.width==0 ? (wsItem.width-wsNum.width)/2 : (wsItem.width-wsNum.width-wsIconsRow.width-Config.bar_spacing_fun(bar.height))/2
                                 anchors.verticalCenter: parent.verticalCenter
-                                spacing: Config.spacing_fun(bar.height)
+                                spacing: Config.bar_spacing_fun(bar.height)
 
                                 Text {
                                     id: wsNum
@@ -97,7 +97,7 @@ Rectangle {
 
                                 Row {
                                     id: wsIconsRow
-                                    spacing: Config.spacing_fun(workspacesContainer.height)
+                                    spacing: Config.bar_spacing_fun(workspacesContainer.height)
                                     anchors.verticalCenter: parent.verticalCenter
 
                                     Repeater {

modules/jl/JLearnerLoader.qml

@@ -7,10 +7,10 @@ import Quickshell.Io
 Item {  // container, invisible
     id: jLoader
 
-    Loader {
+    LazyLoader {
         id: jLearnerLoader
         active: false
-        sourceComponent: JLearner { id: jLearner }
+        JLearner { id: jLearner }
     }
 
     GlobalShortcut {

modules/notification/Notification.qml

@@ -0,0 +1,106 @@
+import QtQuick
+import Quickshell
+import Quickshell.Hyprland
+import Quickshell.Services.Notifications
+import "../../config"
+import "./notificationServer"
+
+PanelWindow {
+    // mask: Region {}
+
+    id: notificationWindow
+
+    focusable: true
+
+    anchors.top: true
+    anchors.left: true
+
+    // implicitHeight: screen.height/6
+    implicitHeight: Math.max(contentHeight+(content.spacing*(notificationListModel.count-1)), 0)
+    implicitWidth: contentWidth
+
+
+    color: "transparent"
+
+    ListModel {
+        id: notificationListModel
+    }
+
+    Connections {
+        target: NotificationS
+
+        function onNotificationReceived(notification) {
+            if (!NotificationS.correctMonitor(screen))
+                return
+            if (NotificationS.correctMonitor(screen)) {
+                Config.debug == "Notification" && console.log("[NotificationWindow " + Hyprland.monitorFor(screen).activeWorkspace.id + "]: This notification belongs to me! ")
+                notificationListModel.append({notificationData: notification})
+            }
+        }
+    }
+
+    Rectangle {
+        anchors.fill: parent
+
+        border.width: Config.border_width
+        border.color: Colors.primary
+        color: "transparent"
+
+        Column {
+            id: content
+            anchors.fill: parent
+            spacing: -2
+
+            Repeater {
+                id: notificationRepeater
+                model: notificationListModel
+
+                delegate: NotificationBody {
+                    required property int index
+                    required property var notificationData
+                    implicitWidth: screen.width/7
+                    screen: notificationWindow.screen
+
+                    notification: notificationData
+
+                    onDismissed: function(notification, dismiss) {
+                        const appName = notification.appName
+                        const id = notification.id
+                        const summary = notification.summary
+                        if (dismiss) {
+                            Config.debug == "Notification" && console.log("[NotificationWindow " + Hyprland.monitorFor(screen).activeWorkspace.id + "]: Dissmiss: " + appName + " " + id + " - " + summary)
+                            if (notification.tracked) {notification.dismiss()}
+                            notificationListModel.remove(index)
+                        } else {
+                            Config.debug == "Notification" && console.log("[NotificationWindow " + Hyprland.monitorFor(screen).activeWorkspace.id + "]: Close: " + appName + " " + id + " - " + summary)
+                            notificationListModel.remove(index)
+                        }
+                    }
+                }
+                onItemAdded: updateContentSize()
+                onItemRemoved: updateContentSize()
+            }
+        }
+    }
+
+    property real contentWidth: 0
+    property real contentHeight: 0
+
+    function updateContentSize() {
+        let width = 0
+        let height = 0
+
+        for (let i = 0; i < notificationRepeater.count; ++i) {
+            let item = notificationRepeater.itemAt(i)
+
+            if (item) {
+                width = Math.max(width, item.width)
+                height += item.height
+            }
+        }
+
+        contentWidth = width
+        contentHeight = height
+        Config.debug == "Notification" && console.log("[updateContentSize] contentWidth:", contentWidth, "contentHeight:", contentHeight)
+    }
+}

modules/notification/NotificationBody.qml

@@ -0,0 +1,477 @@
+import QtQuick
+import Quickshell
+import "../../config"
+import "./notificationServer"
+import QtQuick.Layouts
+import QtQuick.Controls
+
+Rectangle {
+    id: root
+
+    required property var notification
+    required property var screen
+    property var urgency: (notification.urgency ?? notification.hints["urgency"]) != null ? (notification.urgency ?? notification.hints["urgency"]) + 1 : 0
+
+    property bool closing: false
+    property int _hoveredActionCount: 0
+    // When used in history overview we don't want auto-timeout or click-to-close
+    property bool isHistory: false
+
+    // Helpers to handle summary/body placement
+    // - "Message:" title is always static (fixed bug where appName replaced it when image existed)
+    // - If notification only has summary and no body, show summary on the right side
+    property bool hasBody: notification.body !== undefined && notification.body !== null && String(notification.body).trim() !== ""
+    property bool hasSummary: notification.summary !== undefined && notification.summary !== null && String(notification.summary).trim() !== ""
+    property bool showSummaryOnLeft: hasSummary && hasBody
+    property bool showSummaryOnRight: hasSummary && !hasBody
+
+    property real duration: isHistory ? 0 : (
+        notification.expireTimeout > 0 ? notification.expireTimeout*1000 :
+        urgency ? urgency * 2000 :
+        5000
+    )
+
+    signal dismissed(var notification, bool dismiss)
+
+    implicitWidth: screen.width/7
+    // implicitHeight: screen.height/7
+    implicitHeight: contentRowRectangle.height+(actionRowRectangle.visible?actionRowRectangle.height:0)+(inlineReplyRectangle.visible?inlineReplyRectangle.height:0)+(progressBar.visible?progressBar.height:0)
+
+    color: textBGColor
+    border.width: Config.border_width
+    border.color: textColor
+    radius: isHistory ? Config.small_radius : 0
+    clip: isHistory
+
+    property color textColor: urgency != 3 ? Colors.primary : Colors.tertiary
+    property color textBGColor: urgency != 3 ? Qt.alpha(Colors.primaryContainer, 0.75) : Qt.alpha(Colors.tertiaryContainer, 0.75)
+
+    // Expose hover state for history auto-close (reuse paused logic)
+    readonly property bool isHovered: mouseArea.containsMouse || closingMouseArea.containsMouse || inlineReplyButtonMouseArea.containsMouse || _hoveredActionCount > 0 || inlineReplyTextField.hovered || inlineReplyTextField.activeFocus
+
+    HoverHandler {
+        enabled: root.isHistory
+        blocking: false
+        grabPermissions: PointerHandler.CanTakeOverFromAnything
+        onHoveredChanged: if (hovered) NotificationS.historyHovered = true
+    }
+    // When in history, also keep historyHovered true while any inner element is hovered
+    onIsHoveredChanged: if (isHistory && isHovered) NotificationS.historyHovered = true
+
+    function closeNotification(dismiss){
+        if (closing) {
+            return
+        }
+        closing = true
+        root.dismissed(root.notification, dismiss)
+    }
+
+    Connections {
+        target: root.notification
+        function onClosed(reason){
+            // It is known that it can be triggered twice and delete multiple Index but since it is only temporary display and the chance is low it is ignored
+            root.closeNotification(false)
+        }
+    }
+
+    MouseArea {
+        id: mouseArea
+        anchors.fill: parent
+        hoverEnabled: true
+        enabled: !root.isHistory
+        visible: !root.isHistory
+        onClicked: {
+            root.closeNotification(false)
+        }
+    }
+    Column {
+        id: contentColumn
+        anchors.fill: parent
+        spacing: 0
+
+        Rectangle{
+            id: contentRowRectangle
+            height: Math.max(iconRectangle.height, contentRectangle.height)+contentRow.anchors.margins*2
+            width: parent.width
+            color: "transparent"
+            // border.width: Config.border_width
+            // border.color: textColor
+
+            MouseArea {
+                id: closingMouseArea
+                anchors.top: parent.top
+                anchors.right: parent.right
+                anchors.margins: Config.spacing
+
+                width: closeIconText.implicitHeight
+                height: closeIconText.implicitHeight
+
+                hoverEnabled: true
+                cursorShape: Qt.PointingHandCursor
+                Rectangle {
+                    anchors.fill: parent
+                    radius: Config.radius
+                    color: parent.containsMouse ? "red" : "transparent"
+
+                    border.width: Config.border_width
+                    border.color: parent.containsMouse ? "white" : textColor
+
+                    Text {
+                        id: closeIconText
+                        anchors.centerIn: parent
+                        text: ""; // or "✕"
+                        font.family: Config.font
+                        font.pixelSize: Config.screen_height_to_font_medium(screen.height)
+                        color: parent.parent.containsMouse ? "white" : textColor
+                    }
+                }
+                onClicked: function(mouse){
+                    mouse.accepted=true
+                    root.closeNotification(true)
+                }
+            }
+
+            Row {
+                id: contentRow
+                anchors.fill: parent
+                anchors.margins: Config.spacing
+                spacing: Config.spacing
+                width: parent.width
+
+                // Left side: icon + icon information
+                Rectangle{
+                    id: iconRectangle
+                    width: childrenRect.width
+                    height: childrenRect.height
+                    color: "transparent"
+                    Column {
+                        id: iconColumn
+                        // height: Math.max(childrenRect.height, contentBodyColumn.height)
+                        width: 1.25*iconImage.width
+                        spacing: Config.spacing
+
+                        Image {
+                            id: iconImage
+
+                            width: screen.width/30
+                            height: iconImage.width
+                            anchors.horizontalCenter: parent.horizontalCenter
+
+                            source: {
+                                if (notification.image) return notification.image
+                                if (notification.appIcon) return Quickshell.iconPath(notification.appIcon)
+                                const entry = notification.desktopEntry ? DesktopEntries.byId(notification.desktopEntry) : null
+                                if (entry && entry.icon) {
+                                    const p = Quickshell.iconPath(entry.icon)
+                                    if (p && p !== "") return p
+                                }
+                                return Quickshell.iconPath("notifications")
+                            }
+
+                            fillMode: Image.PreserveAspectFit
+                            asynchronous: true
+                        }
+
+                        Text {
+                            id: summaryText
+                            text: root.notification.summary
+                            // Only show summary under icon when both summary and body exist.
+                            // If only summary exists (no body), it will be shown on the right instead.
+                            visible: root.showSummaryOnLeft
+                            width: iconColumn.width
+                            font.family: Config.font
+                            font.pixelSize: Config.screen_height_to_font_small(screen.height)
+                            color: textColor
+
+                            wrapMode: Text.Wrap
+                            horizontalAlignment: Text.AlignHCenter
+                        }
+                    }
+                }
+
+                // Right side: notification information
+                Rectangle{
+                    id: contentRectangle
+                    width: root.width - iconColumn.width - contentRow.spacing - contentRow.anchors.margins*2
+                    height: Math.max(iconRectangle.height, contentBodyColumn.implicitHeight)
+                    color: "transparent"
+
+                    Column {
+                        id: contentBodyColumn
+                        width: parent.width
+                        spacing: Config.spacing
+
+                        Item {
+                            id: titleTextItem
+                            width: parent.width-closingMouseArea.width
+                            height: closingMouseArea.height
+                            Text {
+                                id: bodyTitleText
+                                anchors.centerIn: parent
+                                text: (!notification.appName || !notification.appName.split(".").pop()
+                                    ? "Message"
+                                    : notification.appName.split(".").pop().charAt(0).toUpperCase()
+                                        + notification.appName.split(".").pop().slice(1))
+                                font.family: Config.font
+                                font.bold: true
+                                font.pixelSize: Config.screen_height_to_font_medium(screen.height)
+                                color: textColor
+                            }
+                        }
+                        Rectangle {
+                            width: parent.width
+                            height: Math.max(iconRectangle.height - titleTextItem.height - contentBodyColumn.spacing, 64)
+                            color: textBGColor
+                            radius: Config.screen_big_radius_fun(screen.height)
+                            border.width: Config.border_width
+                            border.color: textColor
+                            Item{
+                                anchors.fill: parent
+                                anchors.margins: Config.spacing
+                                Text {
+                                    id: bodyText
+                                    // If only summary exists (no body), show summary on the right instead of left
+                                    text: root.hasBody ? root.notification.body : (root.showSummaryOnRight ? root.notification.summary : "")
+                                    visible: root.hasBody || root.showSummaryOnRight
+
+                                    width: parent.width - 2*parent.anchors.margins
+                                    font.family: Config.font
+                                    font.pixelSize: Config.screen_height_to_font_tiny(screen.height)
+                                    color: textColor
+                                    wrapMode: Text.Wrap
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        Rectangle{
+            id: actionRowRectangle
+            width: root.width
+            height: Config.screen_height_to_font_tiny(screen.height)+2*Config.spacing
+            // border.width: Config.border_width
+            // border.color: textColor
+            color: "transparent"
+            visible: notification.actions.length > 0
+            Row{
+                id: actionsRow
+                spacing: Config.spacing
+                anchors.fill: parent
+                anchors.margins: Config.spacing
+                // Expose root to delegates without direct id lookup (avoids ReferenceError inside Repeater)
+                property var bodyRoot: root
+
+                Repeater {
+                    id: notificationActionRepeater
+                    model: notification.actions
+
+                    delegate: MouseArea{
+                        id: actionMouseArea
+                        width: parent.width / parent.bodyRoot.notification.actions.length
+                        height: actionRectangle.height
+                        anchors.verticalCenter: parent.verticalCenter
+
+                        hoverEnabled: true
+                        cursorShape: Qt.PointingHandCursor
+
+                        onContainsMouseChanged: {
+                            // Track hover for pause logic via parent's bodyRoot (avoids direct 'root' lookup)
+                            const body = parent.bodyRoot
+                            if (!body) return
+                            if (containsMouse) body._hoveredActionCount++
+                            else body._hoveredActionCount = Math.max(0, body._hoveredActionCount - 1)
+                        }
+
+                        Component.onDestruction: {
+                            if (containsMouse && parent && parent.bodyRoot) {
+                                const body = parent.bodyRoot
+                                body._hoveredActionCount = Math.max(0, body._hoveredActionCount - 1)
+                            }
+                        }
+
+                        Rectangle {
+                            id: actionRectangle
+                            width: parent.width
+                            height: actionRow.height
+                            color: actionMouseArea.containsMouse ? Colors.secondaryContainer_fg : Colors.secondaryContainer
+                            border.color: actionMouseArea.containsMouse ? Colors.secondary_fg : Colors.secondary
+                            border.width: Config.border_width
+                            radius: Config.radius_fun(actionRectangle.height)*2
+
+                            Row{
+                                id: actionRow
+                                width: childrenRect.width
+                                height: childrenRect.height
+                                anchors.centerIn: parent
+
+                                Image{
+                                    id: actionIcon
+                                    visible: notification.hasActionIcons
+                                }
+
+                                Text {
+                                    text: modelData.text
+                                    width: Math.min(actionRectangle.width - (actionIcon.visible ? actionIcon.width : 0), implicitWidth)
+                                    font.family: Config.font
+                                    font.pixelSize: Config.screen_height_to_font_tiny(screen.height)
+                                    color: actionMouseArea.containsMouse ? Colors.secondary_fg : Colors.secondary
+                                }
+                            }
+                        }
+
+                        onClicked: function(mouse){
+                            mouse.accepted=true
+                            modelData.invoke()
+                            // resident check is allready in .invoke()
+                            parent.bodyRoot.closeNotification(false)
+                        }
+                    }
+                }
+            }
+        }
+
+        Rectangle {
+            id: inlineReplyRectangle
+            width: root.width
+            height: Config.screen_height_to_font_small(screen.height)+2*Config.spacing
+            // border.width: Config.border_width
+            // border.color: textColor
+            color: "transparent"
+            visible: notification.hasInlineReply
+
+            function sendReply(message) {
+                notification.sendInlineReply(message)
+                inlineReplyTextField.focus = false
+                // resident check is allready in .invoke()
+                root.closeNotification(false)
+            }
+
+            Row {
+                id: inlineReplyRow
+                spacing: Config.spacing
+                anchors.fill: parent
+                anchors.margins: Config.spacing
+                TextField {
+                    id: inlineReplyTextField
+                    width: parent.width - inlineReplyButtonMouseArea.width
+                    height: inlineReplyButtonText.height
+                    anchors.verticalCenter: parent.verticalCenter
+                    hoverEnabled: true
+                    activeFocusOnTab: true
+
+                    placeholderText: notification.hints["x-kde-reply-placeholder-text"] != null ? notification.hints["x-kde-reply-placeholder-text"] : notification.inlineReplyPlaceholder
+                    placeholderTextColor: inlineReplyTextField.activeFocus ? Colors.secondary_fg : Colors.secondary
+                    font.family: Config.font
+                    leftPadding: Config.spacing
+
+                    background: Rectangle {
+                        radius: Config.radius
+                        color: inlineReplyTextField.activeFocus ? Colors.tertiary_fg : Colors.primary_fg
+                        border.color: inlineReplyTextField.activeFocus ? Colors.tertiary : Colors.primary
+                        border.width: Config.border_width
+                    }
+
+                    onAccepted: {
+                        console.log("[NotificationBodyInlineReply]: Enter pressed:", inlineReplyTextField.text)
+                        inlineReplyRectangle.sendReply(inlineReplyTextField.text)
+                    }
+
+                }
+
+                MouseArea {
+                    id: inlineReplyButtonMouseArea
+                    width: inlineReplyButtonText.width + 2*Config.spacing
+                    height: inlineReplyButtonText.height
+                    anchors.verticalCenter: parent.verticalCenter
+
+                    hoverEnabled: true
+                    cursorShape: Qt.PointingHandCursor
+                    Rectangle {
+                        id: inlineReplyButtonRectangle
+                        width: inlineReplyButtonText.width + 2*Config.spacing
+                        height: inlineReplyButtonText.height
+                        color: inlineReplyButtonMouseArea.containsMouse ? Colors.secondaryContainer_fg : Colors.secondaryContainer
+                        border.color: inlineReplyButtonMouseArea.containsMouse ? Colors.secondary_fg : Colors.secondary
+                        border.width: Config.border_width
+                        radius: inlineReplyButtonRectangle.height*0.5
+                        Text {
+                            id: inlineReplyButtonText
+                            text: "SEND"
+                            font.family: Config.font
+                            font.pixelSize: Config.screen_height_to_font_small(screen.height)
+                            color: inlineReplyButtonMouseArea.containsMouse ? Colors.secondary_fg : Colors.secondary
+                            anchors.centerIn: parent
+                        }
+                    }
+                    onClicked: function(mouse){
+                        mouse.accepted=true;
+                        console.log("[NotificationBodyInlineReply]: Pressed SEND:", inlineReplyTextField.text)
+                        inlineReplyRectangle.sendReply(inlineReplyTextField.text)
+                    }
+                }
+            }
+        }
+
+        // Timeout progress bar
+        Rectangle {
+            id: progressBar
+            // anchors.bottom: parent.bottom
+            // anchors.left: parent.left
+            height: Config.screen_height_to_font_tiny(screen.height)
+            color: textColor
+            visible: root.duration > 0
+
+            property real progress: 1.0
+            width: parent.width * progress
+
+            NumberAnimation on progress {
+                id: anim
+                running: root.duration > 0
+                from: 1.0
+                to: 0.0
+                duration: root.duration
+                paused: isHovered && !isHistory
+                onFinished: root.closeNotification(false)
+            }
+        }
+    }
+
+    Component.onCompleted: {
+        if(Config.debug == "Notification"){
+            console.log("\x1b[31m[NotificationBody]:"+"\x1b[0m")
+            console.log("\x1b[31m\t"+"notification.inlineReplyPlaceholder: " + notification.inlineReplyPlaceholder +"\x1b[0m")
+            console.log("\x1b[31m\t"+"notification.body: " + notification.body+"\x1b[0m")
+            console.log("\x1b[31m\t"+"notification.lastGeneration: " + notification.lastGeneration+"\x1b[0m")
+            console.log("\x1b[31m\t"+"notification.appName: " + notification.appName+"\x1b[0m")
+            console.log("\x1b[31m\t"+"notification.image: " + notification.image+"\x1b[0m")
+            console.log("\x1b[31m\t"+"notification.expireTimeout: " + notification.expireTimeout+"\x1b[0m")
+            console.log("\x1b[31m\t"+"notification.resident: " + notification.resident+"\x1b[0m")
+            console.log("\x1b[31m\t"+"notification.id: " + notification.id+"\x1b[0m")
+            console.log("\x1b[31m\t"+"notification.actions: " + notification.actions+"\x1b[0m")
+            if (notification.actions != []) {
+                for (const notificationAction of notification.actions) {
+                    console.log("\x1b[31m\t"+"notification.actions: "+ notificationAction+"\x1b[0m")
+                    console.log("\x1b[31m\t"+"notification.actions.text: "+ notificationAction.text+"\x1b[0m")
+                    console.log("\x1b[31m\t"+"notification.actions.identifier: "+ notificationAction.identifier+"\x1b[0m")
+                }
+            }
+            console.log("\x1b[31m\t"+"notification.urgency: " + notification.urgency+"\x1b[0m")
+            console.log("\x1b[31m\t"+"notification.appIcon: " + notification.appIcon + " | " + Quickshell.iconPath(notification.appIcon)+"\x1b[0m")
+            console.log("\x1b[31m\t"+"notification.desktopEntry: " + notification.desktopEntry+"\x1b[0m")
+            console.log("\x1b[31m\t"+"notification.hints: " + notification.hints+"\x1b[0m")
+            for (const item of Object.keys(notification.hints)) {
+                console.log("\x1b[31m\t"+"notification.hints[\""+ item +"\"]: " + notification.hints[item]+"\x1b[0m")
+            }
+            console.log("\x1b[31m\t"+"notification.summary: " + notification.summary+"\x1b[0m")
+            console.log("\x1b[31m\t"+"notification.transient: " + notification.transient+"\x1b[0m")
+            console.log("\x1b[31m\t"+"notification.hasInlineReply: " + notification.hasInlineReply+"\x1b[0m")
+            console.log("\x1b[31m\t"+"notification.hasActionIcons: " + notification.hasActionIcons+"\x1b[0m")
+
+            console.log("\x1b[31m\t"+"image.source: " + iconImage.source+"\x1b[0m")
+            console.log("\x1b[31m\t"+"urgency: " + urgency+"\x1b[0m")
+            console.log("\x1b[31m\t"+"duration: " + duration+"\x1b[0m")
+        }
+    }
+}

modules/notification/NotificationHistory.qml

@@ -0,0 +1,482 @@
+import QtQuick
+import Quickshell
+import QtQuick.Controls
+import Quickshell.Wayland
+import Quickshell.Hyprland
+import Quickshell.Services.Notifications
+import "../../config"
+import "./notificationServer"
+
+PanelWindow {
+    id: root
+    implicitWidth: screen.width/5
+    implicitHeight: screen.height - Config.barHeight(screen.height)
+    color: "transparent"
+    visible: true
+    focusable: true
+
+    anchors {
+        top: true
+        right: true
+    }
+
+    property string textColor: Colors.primary
+    property string textBGColor: Qt.alpha(Colors.primaryContainer, 0.75)
+    property string bGColor: Qt.alpha(Colors.primaryContainer, 0.5)
+
+    property real bigFontSize: Config.screen_height_to_font_medium(screen.height)
+    property real fontSize: Config.screen_height_to_font_small(screen.height)
+
+    property var expandedGroups: ({})
+
+    property var grouped: {
+        const vals = NotificationS.trackedNotifications.values
+        if (!vals || vals.length === 0) return []
+        let map = {}
+        for (let i = 0; i < vals.length; ++i) {
+            const n = vals[i]
+            const key = (n && n.appName && n.appName !== "") ? n.appName : "Unknown"
+            if (!map[key]) map[key] = []
+            map[key].push(n)
+        }
+        let result = []
+        for (const k in map) result.push({ appName: k, notes: map[k] })
+        result.sort((a,b)=>a.appName.localeCompare(b.appName))
+        return result
+    }
+
+    function toggleGroup(appName) {
+        let copy = Object.assign({}, expandedGroups)
+        copy[appName] = !(copy[appName] === true)
+        expandedGroups = copy
+    }
+    function clearGroup(appName) {
+        const vals = NotificationS.trackedNotifications.values.slice()
+        for (let i=0;i<vals.length;++i){
+            const n=vals[i]
+            const key = (n && n.appName && n.appName !== "") ? n.appName : "Unknown"
+            if (key===appName) { if (n.tracked) n.dismiss(); else if (n.close) n.close() }
+        }
+    }
+    function clearAll() {
+        const vals = NotificationS.trackedNotifications.values.slice()
+        for (let i=0;i<vals.length;++i) if (vals[i].tracked) vals[i].dismiss()
+        expandedGroups = ({})
+    }
+
+    function closeNHistory() {
+        console.log("[NotificationHistory] closeNHistory() requested")
+        NotificationS.historyHovered = false
+        NotificationS.closeHistoryRequested()
+    }
+
+    property bool _allowAutoClose: false
+
+    Timer {
+        id: graceTimer
+        interval: 500
+        running: root.visible && !_allowAutoClose
+        repeat: false
+        onTriggered: _allowAutoClose = true
+    }
+
+    Timer {
+        id: hoverCloseTimer
+        interval: NotificationS.historyAutoCloseDelay
+        running: root.visible && _allowAutoClose && !NotificationS.historyHovered && !NotificationS.buttonHovered
+        repeat: false
+        onTriggered: {
+            if (!NotificationS.historyHovered && !NotificationS.buttonHovered) {
+                console.log("[NotificationHistory] Auto-closing after hover timeout (" + interval + "ms)")
+                root.closeNHistory()
+            }
+        }
+    }
+
+    onVisibleChanged: {
+        if (!visible) {
+            NotificationS.historyHovered = false
+            _allowAutoClose = false
+        }
+    }
+    Component.onDestruction: NotificationS.historyHovered = false
+
+    FocusScope {
+        id: nHistoryScope
+        anchors.fill: parent
+        focus: true
+
+        Keys.onReleased: function(event) {
+            if (event.key === Qt.Key_Escape) {
+                console.log("Pressed Escape, closing NotificationHistory")
+                root.closeNHistory()
+            }
+        }
+    }
+
+    Rectangle {
+        id: background
+        color: bGColor
+        // opacity: 0.5
+        anchors.fill: parent
+        border.width: Config.border_width
+        border.color: textColor
+        radius: Config.screen_big_radius_fun(screen.height)
+
+
+        HoverHandler {
+            id: backgroundHoverHandler
+            blocking: false
+            grabPermissions: PointerHandler.CanTakeOverFromAnything
+            onHoveredChanged: {
+                NotificationS.historyHovered = hovered
+                if (Config.debug == "Notification") console.log("[NotificationHistory] background hovered:", hovered)
+            }
+        }
+
+        Column{
+            id: bgColumn
+            anchors.fill: parent
+            anchors.margins: Config.screen_spacing_fun(screen.height)
+            spacing: Config.screen_spacing_fun(screen.height)
+
+            Rectangle {
+                id: topBar
+                width: parent.width
+                height: bigFontSize*2.5
+                color: textBGColor
+                radius: Config.screen_big_radius_fun(screen.height)
+                border.width: Config.border_width
+                border.color: textColor
+
+                Row{
+                    id: backgroundLeft
+                    anchors.verticalCenter: parent.verticalCenter
+                    anchors.left: parent.left
+                    anchors.leftMargin: Config.screen_spacing_fun(screen.height)
+                    spacing: Config.screen_spacing_fun(screen.height)
+
+                    Text{
+                        text: "Notifications:"
+                        font.family: Config.font
+                        font.pixelSize: topBar.height*0.75
+                        color: textColor
+                    }
+                }
+
+                Row{
+                    id: backgroundRight
+                    anchors.verticalCenter: parent.verticalCenter
+                    anchors.right: parent.right
+                    anchors.rightMargin: Config.screen_spacing_fun(screen.height)
+                    spacing: Config.screen_spacing_fun(screen.height)
+
+                    Text{
+                        text: NotificationS.notificationPopupEnabled ? "󰂚" : "󰂛"
+                        font.family: Config.font
+                        font.pixelSize: topBar.height*0.75
+                        color: textColor
+                    }
+
+                    Switch {
+                        id: notificationVolumeSwitch
+
+                        implicitWidth: notificationVolumeSwitch.height*2
+                        implicitHeight: topBar.height*0.75
+                        anchors.verticalCenter: parent.verticalCenter
+                        checked: NotificationS.notificationPopupEnabled
+                        hoverEnabled: true
+
+                        HoverHandler {
+                            id: switchHoverHandler
+                            cursorShape: Qt.PointingHandCursor
+                            blocking: false
+                            grabPermissions: PointerHandler.CanTakeOverFromAnything
+                            onHoveredChanged: if (hovered) NotificationS.historyHovered = true
+                        }
+
+                        indicator: Rectangle {
+                            implicitWidth: notificationVolumeSwitch.width
+                            implicitHeight: notificationVolumeSwitch.height
+                            radius: height / 2
+
+                            color: notificationVolumeSwitch.checked ? Colors.secondary : Colors.secondaryContainer
+
+                            Behavior on color {
+                                ColorAnimation { duration: 150 }
+                            }
+
+                            Rectangle {
+                                width: parent.height*0.8
+                                height: parent.height*0.8
+                                radius: width / 2
+
+                                anchors.verticalCenter: parent.verticalCenter
+                                x: notificationVolumeSwitch.checked ? parent.width - width - 3 : 3
+
+                                color: notificationVolumeSwitch.checked ? Colors.secondaryContainer : Colors.secondary
+
+                                Behavior on x {
+                                    NumberAnimation {
+                                        duration: 180
+                                        easing.type: Easing.OutCubic
+                                    }
+                                }
+
+                                Behavior on color {
+                                    ColorAnimation { duration: 150 }
+                                }
+                            }
+                        }
+
+                        onCheckedChanged: {
+                            NotificationS.notificationPopupEnabled = notificationVolumeSwitch.checked
+                            console.log("NotificationS.notificationPopupEnabled:", NotificationS.notificationPopupEnabled)
+                        }
+                    }
+
+                    MouseArea {
+                        id: closeArea
+                        width: closeArea.height
+                        height: topBar.height*0.75
+                        anchors.verticalCenter: parent.verticalCenter
+                        hoverEnabled: true
+                        cursorShape: Qt.PointingHandCursor
+
+                        onContainsMouseChanged: if (containsMouse) NotificationS.historyHovered = true
+                        Rectangle{
+                            anchors.fill: parent
+                            color: closeArea.containsMouse ? "red" : textBGColor
+                            radius: Config.screen_big_radius_fun(screen.height)
+                            border.width: Config.border_width
+                            border.color: closeArea.containsMouse ? "white" : textColor
+                            Text{
+                                text: ""
+                                anchors.centerIn: parent
+                                font.family: Config.font
+                                font.pixelSize: closeArea.height - Config.spacing
+                                color: closeArea.containsMouse ? "white" : textColor
+                            }
+                        }
+                        onClicked: {
+                            root.clearAll()
+                        }
+                    }
+                }
+            }
+
+            Rectangle {
+                width: parent.width
+                height: parent.height - topBar.height - bgColumn.spacing
+                color: textBGColor
+                radius: Config.screen_big_radius_fun(screen.height)
+                border.width: Config.border_width
+                border.color: textColor
+
+                Text {
+                    id: noNotificationText
+                    anchors.centerIn: parent
+                    visible: NotificationS.notificationNum == 0
+                    text: "No notifications"
+                    font.family: Config.font
+                    font.pixelSize: bigFontSize
+                    color: textColor
+                }
+
+                Flickable {
+                    id: flick
+                    anchors.fill: parent
+                    anchors.margins: Config.screen_spacing_fun(screen.height)
+                    contentWidth: width
+                    contentHeight: contentColumn.implicitHeight
+                    clip: true
+                    boundsBehavior: Flickable.StopAtBounds
+                    flickableDirection: Flickable.VerticalFlick
+                    ScrollBar.vertical: ScrollBar { policy: ScrollBar.AsNeeded }
+                    Column {
+                        id: contentColumn
+                        width: flick.width
+                        spacing: Config.spacing
+
+                        Repeater {
+                            id: groupedRepeater
+                            model: root.grouped
+                            delegate: Item {
+                                id: delegateRoot
+                                required property var modelData
+                                required property int index
+                                property var group: modelData
+                                property bool isGrouped: group.notes.length > 1
+                                property bool isExpanded: root.expandedGroups[group.appName] === true
+
+                                width: contentColumn.width
+                                implicitHeight: isGrouped ? groupedCard.implicitHeight : singleBody.implicitHeight
+                                height: implicitHeight
+
+                                HoverHandler {
+                                    blocking: false
+                                    grabPermissions: PointerHandler.CanTakeOverFromAnything
+                                    onHoveredChanged: if (hovered) NotificationS.historyHovered = true
+                                }
+
+                                NotificationBody {
+                                    id: singleBody
+                                    visible: !delegateRoot.isGrouped
+                                    width: parent.width
+                                    screen: root.screen
+                                    notification: delegateRoot.group.notes[0]
+                                    isHistory: true
+                                    onDismissed: function(notification, dismiss) {
+                                        if (notification && notification.tracked) notification.dismiss()
+                                        else if (notification && notification.close) notification.close()
+                                    }
+                                }
+
+                                Rectangle {
+                                    id: groupedCard
+                                    visible: delegateRoot.isGrouped
+                                    width: parent.width
+                                    implicitHeight: groupColumn.implicitHeight + Config.spacing * 2
+                                    color: Qt.alpha(Colors.surfaceContainerHigh, 0.45)
+                                    radius: Config.screen_big_radius_fun(root.screen.height)
+                                    border.width: Config.border_width
+                                    border.color: root.textColor
+                                    clip: true
+
+                                    Column {
+                                        id: groupColumn
+                                        anchors.fill: parent
+                                        anchors.margins: Config.spacing
+                                        spacing: Config.spacing
+
+                                        Rectangle {
+                                            id: groupHeader
+                                            width: parent.width
+                                            height: Math.max(appNameText.implicitHeight, countText.implicitHeight, expandIcon.implicitHeight, clearGroupIcon.implicitHeight) + Config.spacing * 1.5
+                                            color: root.bGColor
+                                            radius: Config.radius
+                                            border.width: Config.border_width
+                                            border.color: root.textColor
+
+                                            MouseArea {
+                                                anchors.fill: parent
+                                                cursorShape: Qt.PointingHandCursor
+                                                hoverEnabled: true
+                                                onContainsMouseChanged: if (containsMouse) NotificationS.historyHovered = true
+                                                onClicked: root.toggleGroup(group.appName)
+                                            }
+
+                                            Row {
+                                                id: headerLeft
+                                                anchors.left: parent.left
+                                                anchors.leftMargin: Config.spacing
+                                                anchors.verticalCenter: parent.verticalCenter
+                                                spacing: Config.spacing
+
+                                                Text {
+                                                    id: expandIcon
+                                                    text: delegateRoot.isExpanded ? "󰅀" : "󰅂"
+                                                    font.family: Config.font
+                                                    font.pixelSize: root.fontSize
+                                                    color: root.textColor
+                                                    anchors.verticalCenter: parent.verticalCenter
+                                                }
+                                                Text {
+                                                    id: appNameText
+                                                    text: group.appName
+                                                    font.family: Config.font
+                                                    font.pixelSize: root.fontSize
+                                                    font.bold: true
+                                                    color: root.textColor
+                                                    elide: Text.ElideRight
+                                                    maximumLineCount: 1
+                                                }
+                                                Text {
+                                                    id: countText
+                                                    text: "(" + group.notes.length + ")"
+                                                    font.family: Config.font
+                                                    font.pixelSize: Config.screen_height_to_font_tiny(root.screen.height)
+                                                    color: Qt.alpha(root.textColor, 0.8)
+                                                    anchors.verticalCenter: parent.verticalCenter
+                                                }
+                                            }
+
+                                            Row {
+                                                id: headerRight
+                                                anchors.right: parent.right
+                                                anchors.rightMargin: Config.spacing
+                                                anchors.verticalCenter: parent.verticalCenter
+                                                spacing: Config.spacing
+
+                                                MouseArea {
+                                                    id: clearGroupArea
+                                                    width: bigFontSize + Config.spacing
+                                                    height: bigFontSize + Config.spacing
+                                                    hoverEnabled: true
+                                                    cursorShape: Qt.PointingHandCursor
+                                                    onContainsMouseChanged: if (containsMouse) NotificationS.historyHovered = true
+                                                    onClicked: function(mouse) {
+                                                        mouse.accepted = true
+                                                        root.clearGroup(group.appName)
+                                                    }
+                                                    Rectangle{
+                                                        anchors.fill: parent
+                                                        radius: Config.screen_big_radius_fun(screen.height)
+                                                        color: clearGroupArea.containsMouse ? "red" : textBGColor
+                                                        border.width: Config.border_width
+                                                        border.color: clearGroupArea.containsMouse ? "white" : textColor
+                                                        Text{
+                                                            id: clearGroupIcon
+                                                            anchors.centerIn: parent
+                                                            text: ""
+                                                            font.family: Config.font
+                                                            font.pixelSize: bigFontSize
+                                                            color: clearGroupArea.containsMouse ? "white" : textColor
+                                                        }
+                                                    }
+                                                }
+                                            }
+                                        }
+
+                                        Column {
+                                            id: notificationsColumn
+                                            width: parent.width
+                                            spacing: Config.spacing
+                                            visible: delegateRoot.isExpanded
+                                            Repeater {
+                                                model: group.notes
+                                                delegate: NotificationBody {
+                                                    required property var modelData
+                                                    required property int index
+                                                    width: notificationsColumn.width
+                                                    screen: root.screen
+                                                    notification: modelData
+                                                    isHistory: true
+                                                    onDismissed: function(notification, dismiss) {
+                                                        if (notification && notification.tracked) notification.dismiss()
+                                                        else if (notification && notification.close) notification.close()
+                                                    }
+                                                }
+                                            }
+                                        }
+
+                                        Text {
+                                            visible: !delegateRoot.isExpanded && group.notes.length > 1
+                                            width: parent.width
+                                            text: group.notes.length + " notification" + (group.notes.length > 1 ? "s hidden" : " hidden") + " — click header to expand"
+                                            font.family: Config.font
+                                            font.pixelSize: Config.screen_height_to_font_tiny(root.screen.height)
+                                            color: Qt.alpha(root.textColor, 0.6)
+                                            elide: Text.ElideRight
+                                            horizontalAlignment: Text.AlignHCenter
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

modules/notification/NotificationHistoryLoader.qml

@@ -0,0 +1,68 @@
+import QtQuick
+import Quickshell
+import Quickshell.Hyprland
+import Quickshell.Io
+import "../../config"
+import "./notificationServer"
+
+
+Item {  // container, invisible
+    id: nHistoryLoader
+
+    LazyLoader {
+        id: notifificationHistoryLoader
+        // active: true
+        active: false
+        NotificationHistory {
+            id: nHistory
+            // closeNHistory() is defined inside NotificationHistory.qml and
+            // emits NotificationS.closeHistoryRequested(); the loader listens below
+            // and actually deactivates. Keeping instance id for potential direct access.
+        }
+    }
+
+    // React to close requests coming from NotificationHistory (hover timer, Escape)
+    // or any other component via the singleton signal. This is the single
+    // source of truth for deactivating the history panel.
+    Connections {
+        target: NotificationS
+        function onCloseHistoryRequested() {
+            console.log("[NotificationHistoryLoader] closeHistoryRequested received -> closing")
+            nHistoryLoader.closeNHistory()
+        }
+    }
+
+    GlobalShortcut {
+        name: "NotificationHistory"
+        description: "Open Notification History"
+
+        onPressed: {
+            console.log("Pressed Meta+Shift+N (Hyprland global shortcut)")
+            notifificationHistoryLoader.active = !notifificationHistoryLoader.active
+        }
+    }
+
+    function openNHistory() {
+        notifificationHistoryLoader.active = true
+    }
+
+    function closeNHistory() {
+        // Reset hover states so timer doesn't immediately re-trigger on next open
+        NotificationS.historyHovered = false
+        // buttonHovered is managed by the button itself; don't force false here
+        // in case button is still hovered when history closes
+        notifificationHistoryLoader.active = false
+    }
+
+    function toggleNHistory() {
+        if (notifificationHistoryLoader.active) {
+            closeNHistory()
+        } else {
+            openNHistory()
+        }
+    }
+
+    Component.onCompleted: {
+        console.log("[NotificationHistoryLoader]:", NotificationS)
+    }
+}

modules/notification/NotificationLoader.qml

@@ -0,0 +1,19 @@
+import QtQuick
+import Quickshell
+import "./notificationServer"
+
+
+Item {
+    id: notification_root
+    Repeater { // Bars
+        model: Quickshell.screens
+        delegate: Loader {
+            active: true // loads object
+            sourceComponent: Notification {screen: modelData} // creates instance of bar component
+        }
+    }
+
+    Component.onCompleted: {
+        console.log("[NotificationLoader]:", NotificationS)
+    }
+}

modules/notification/notificationServer/NotificationServer.qml

@@ -0,0 +1,112 @@
+pragma Singleton
+
+import QtQuick
+import Quickshell
+import Quickshell.Io
+import Quickshell.Hyprland
+import Quickshell.Services.Notifications
+import "../../../config"
+
+Item {
+    id: notificationServerState
+
+    property var focusedMonitor: null
+    property var newestNotification: null
+    property bool notificationPopupEnabled: true
+
+    property alias trackedNotifications: notificationServer.trackedNotifications
+    property int notificationNum: trackedNotifications.values.length
+
+    signal notificationReceived(var notification)
+
+    // ── Hover state for history auto-close ──
+    // Updated by NotificationHistory.qml (PanelWindow hover) and NotificationButton.qml (bar button hover)
+    property bool historyHovered: false
+    property bool buttonHovered: false
+    property int historyAutoCloseDelay: 1000
+    signal closeHistoryRequested()
+
+    // Debug logging for hover transitions
+    onHistoryHoveredChanged: Config.debug == "Notification" && console.log("[NotificationServer] historyHovered:", historyHovered)
+    onButtonHoveredChanged: Config.debug == "Notification" && console.log("[NotificationServer] buttonHovered:", buttonHovered)
+
+    function correctMonitor(screen) {
+        return (Hyprland.monitorFor(screen) === focusedMonitor)
+    }
+
+    Process {
+        id: notificationSound
+        command: ["pw-play", "--volume", "0.25", Config.configDir + "/modules/notification/assets/notification.ogg"]
+        function play() {
+            if (running)
+                return
+            Config.debug == "Notification" && console.log(
+                "[NotificationSound] Playing:", Config.configDir + "/modules/notification/assets/notification.ogg"
+            )
+            notificationSound.startDetached()
+        }
+    }
+
+    NotificationServer {
+        id: notificationServer
+
+        actionsSupported: true
+        bodyHyperlinksSupported: true
+        bodyImagesSupported: true
+        actionIconsSupported: true
+        imageSupported: true
+        persistenceSupported: true
+        bodyMarkupSupported: true
+        inlineReplySupported: true
+
+        onNotification: function(notification) {
+            // if(notification.lastGeneration){
+            //     console.log(
+            //         "[NotificationServer] Closing Notification:",
+            //         notification.appName, notification.id, notification.summary, notification.body
+            //     )
+            //     notification.dismiss()
+            //     return
+            // }
+            notification.tracked = true
+            !notification.lastGeneration && Config.debug == "Notification" && console.log(
+                "[NotificationServer] Notification received:",
+                notification.appName, notification.id, notification.summary, notification.body
+            )
+
+            let timer = notificationTimerComponent.createObject(
+                notificationServerState,
+                { notification: notification }
+            )
+
+            Hyprland.refreshMonitors()
+            timer.start()
+        }
+    }
+
+    Component {
+        id: notificationTimerComponent
+
+        Timer {
+            required property var notification
+
+            interval: 2000
+            repeat: false
+
+            onTriggered: {
+                if((!notification.lastGeneration && notificationServerState.notificationPopupEnabled) || Config.debug == "Notification"){
+                    focusedMonitor = Hyprland.focusedMonitor
+                    notificationReceived(notification)
+                    notificationSound.play()
+                }
+
+                destroy()
+            }
+        }
+    }
+
+    Component.onCompleted: {
+        focusedMonitor = Hyprland.focusedMonitor
+        Config.debug == "Notification" && console.log("[NotificationServer]: Component completed")
+    }
+}

modules/notification/notificationServer/qmldir

@@ -0,0 +1 @@
+singleton NotificationS NotificationServer.qml

modules/volumeOSD/SinkOSD.qml

@@ -0,0 +1,89 @@
+import QtQuick
+import QtQuick.Layouts
+import Quickshell
+import Quickshell.Widgets
+import '../bar/states/Audio'
+import "../../config"
+
+LazyLoader {
+    active: Sink.volumeChanged
+    
+
+    PanelWindow {
+        // Since the panel's screen is unset, it will be picked by the compositor
+        // when the window is created. Most compositors pick the current active monitor.
+
+        anchors.bottom: true
+        margins.bottom: screen.height / 5
+        exclusiveZone: 0
+
+        implicitWidth: Config.focusedMonitor.width/5
+        implicitHeight: Config.focusedMonitor.height/40
+        color: "transparent"
+ 
+        // An empty click mask prevents the window from blocking mouse events.
+        mask: Region {}
+
+
+        Rectangle {
+            anchors.fill: parent
+            radius: height / 2
+            color: "transparent"
+
+            RowLayout {
+                anchors {
+                    fill: parent
+                    leftMargin: 10
+                    rightMargin: 15
+                }
+
+                Text {
+                    Layout.alignment: Qt.AlignLeft
+                    rightPadding: (text == "󰕿" || text == "󰸈" ? font.pixelSize/4 : text == "󰖀" ? font.pixelSize/6 : 0)
+                    leftPadding: (text == "󰕿" || text == "󰸈" ? -font.pixelSize/15 : 0)
+                   
+                    text: (
+                        Sink.mute ? "󰝟" : 
+                        Sink.volume > 60 ? "󰕾" :
+                        Sink.volume > 30 ? "󰖀" :
+                        Sink.volume > 0 ? "󰕿" :
+                        "󰸈")
+                    font.pixelSize: 30
+
+                    color: Colors.primary
+                }
+
+                Rectangle {
+                    // Stretches to fill all left-over space
+                    Layout.fillWidth: true
+
+                    implicitHeight: 10
+                    radius: 20
+                    color: "#50ffffff"
+
+                    Rectangle {
+                        anchors {
+                            left: parent.left
+                            top: parent.top
+                            bottom: parent.bottom
+                        }
+
+                        implicitWidth: parent.width * (Sink.volume/100/1.5 ?? 0)
+                        radius: parent.radius
+
+                        color: Sink.volume/100 > 1 ? Colors.tertiary : Colors.primary
+                    }
+                }
+
+                Text {
+                    Layout.alignment: Qt.AlignRight
+                   
+                    text: Sink.volume + "%"
+                    font.pixelSize: 30
+
+                    color: Colors.primary
+                }
+            }
+        }
+    }
+}

modules/volumeOSD/SourceOSD.qml

@@ -0,0 +1,81 @@
+import QtQuick
+import QtQuick.Layouts
+import Quickshell
+import Quickshell.Widgets
+import '../bar/states/Audio'
+import "../../config"
+
+LazyLoader {
+    active: Source.volumeChanged
+    
+
+    PanelWindow {
+        // Since the panel's screen is unset, it will be picked by the compositor
+        // when the window is created. Most compositors pick the current active monitor.
+
+        anchors.bottom: true
+        margins.bottom: screen.height / 5 - implicitHeight
+        exclusiveZone: 0
+
+        implicitWidth: Config.focusedMonitor.width/5
+        implicitHeight: Config.focusedMonitor.height/40
+        color: "transparent"
+
+        // An empty click mask prevents the window from blocking mouse events.
+        mask: Region {}
+
+
+        Rectangle {
+            anchors.fill: parent
+            radius: height / 2
+            color: "transparent"
+
+            RowLayout {
+                anchors {
+                    fill: parent
+                    leftMargin: 10
+                    rightMargin: 15
+                }
+
+                Text {
+                    Layout.alignment: Qt.AlignVCenter
+
+                    text: Source.mute ? "󰍭" : "󰍬"
+                    font.pixelSize: 30
+
+                    color: Colors.primary
+                }
+
+                Rectangle {
+                    // Stretches to fill all left-over space
+                    Layout.fillWidth: true
+
+                    implicitHeight: 10
+                    radius: 20
+                    color: "#50ffffff"
+
+                    Rectangle {
+                        anchors {
+                            left: parent.left
+                            top: parent.top
+                            bottom: parent.bottom
+                        }
+                        implicitWidth: parent.width * (Source.volume/100 ?? 0)
+                        radius: parent.radius
+
+                        color: Colors.primary
+                    }
+                }
+
+                Text {
+                    Layout.alignment: Qt.AlignRight
+                   
+                    text: Source.volume + "%"
+                    font.pixelSize: 30
+
+                    color: Colors.primary
+                }
+            }
+        }
+    }
+}

modules/wlogout/WLogout.qml

@@ -62,7 +62,7 @@ Variants {
 			MouseArea {
 				anchors.fill: parent
 				onClicked: {
-					console.log("clicked ???, closing Wallpaper Picker")
+					console.log("clicked Background, closing Wallpaper Picker")
 					wlogoutLoader.active = false
 				}
 				GridLayout {

modules/wlogout/WlogoutLoader.qml

@@ -8,10 +8,10 @@ import "../../config"
 Item {  // container, invisible
     id: wlLoader
 
-    Loader {
+    LazyLoader {
         id: wlogoutLoader
         active: false
-        sourceComponent: Wlogout {
+        Wlogout {
             id: wLogout
         }
     }

modules/wp/WallpaperPicker.qml

@@ -55,6 +55,7 @@ PanelWindow {
 
             color: "white"
             placeholderTextColor: "#888"
+            font.family: Config.font
 
             background: Rectangle {
 
@@ -67,7 +68,7 @@ PanelWindow {
             Keys.onReleased: (event) => {
                 if (event.key === Qt.Key_Escape) {
                     console.log("Escape pressed inside TextField")
-                    console.log("Pressed Escape, closing Wallpaper Picker")
+                    // console.log("Pressed Escape, closing Wallpaper Picker")
                     // wallpaperLoader.active = false
                     filterText.text = ""
                     filterText.focus = false
@@ -75,6 +76,13 @@ PanelWindow {
                     pickerScope.focus = true
                 }
             }
+            onAccepted: {
+                console.log("Enter pressed inside TextField")
+                filterText.text = ""
+                filterText.focus = false
+                event.accepted = true
+                pickerScope.focus = true
+            }
         }
 
         

modules/wp/WallpaperPickerLoader.qml

@@ -16,10 +16,10 @@ Item {
         }
     }
 
-    Loader {
+    LazyLoader {
         id: wallpaperLoader
         active: false
-        sourceComponent: WallpaperPicker { id: wPicker }
+        WallpaperPicker { id: wPicker }
     }
 
     GlobalShortcut {
@@ -30,7 +30,7 @@ Item {
             // generateThumbs.startDetached()
             generateThumbs.running = true
             console.log("Pressed Meta+Shift+W (Hyprland global shortcut)")
-            wallpaperLoader.active = !wallpaperLoader.active
+            wallpaperLoader.activeAsync = !wallpaperLoader.active
         }
     }
 

shell.qml

@@ -4,10 +4,12 @@ import Quickshell //for PanelWindow
 import Quickshell.Hyprland
 import QtQuick //for Text
 import "./modules/bar"
+import "./modules/notification"
 import "./modules/wp"
 import "./modules/wlogout"
 import "./modules/jl"
 import "./modules/background"
+import "./modules/volumeOSD"
 
 ShellRoot {
     id: root
@@ -15,6 +17,12 @@ ShellRoot {
     // Bar
     BarLoader {}
 
+    // Notifications
+    NotificationLoader {}
+    NotificationHistoryLoader {
+        id: nHistoryLoader
+    }
+
     //Wallpaper picker
     WallpaperPickerLoader {}
 
@@ -26,9 +34,25 @@ ShellRoot {
         id : wlLoader
     }
 
+    //VolumeChangeOSD
+    SourceOSD {}
+    SinkOSD {}
+
     // Background {}
 
     function openWlogout() {
         wlLoader.openWlogout()
     }
+
+    function toggleNotificationHistory() {
+        nHistoryLoader.toggleNHistory()
+    }
+
+    GlobalShortcut {
+        name: "QsReload"
+
+        onPressed: {
+            Quickshell.reload(false)
+        }
+    }
 }