feat: add NotificationOverview and NotificationOverviewLoader for notification history overview {alpha}

.gitignore

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

config/Config.qml

@@ -12,13 +12,9 @@ QtObject {
 
     readonly property int small_spacing: 4
     readonly property int spacing: 8
-    function bar_small_bar_spacing_fun(barH) { return Math.floor(barHeight(barH) / 16) }
+    function small_spacing_fun(screenHeight) { return Math.floor(barHeight(screenHeight) / 16) }
-    function bar_spacing_fun(barH) { return Math.floor(barH / 8) }
+    function spacing_fun(barH) { return Math.floor(barH / 8) }
-    function bar_big_spacing_fun(barH) { return Math.floor(barH / 6) }
+    function 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) }
@@ -33,8 +29,6 @@ QtObject {
     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
 
@@ -81,5 +75,5 @@ QtObject {
         return maxWidth;
     }
 
-    property string debug: ""
+    property string debug: "Notification"
 }

modules/bar/Bar.qml

@@ -14,7 +14,7 @@ PanelWindow {
     anchors.left: true
     anchors.right: true
 
-    implicitHeight: Config.barHeight(screen.height)
+    implicitHeight: Math.floor(screen.height * Config.barHeightRatio(screen.height))
 
     exclusiveZone: height // this is so context menus don't clip into the bar
 
@@ -40,8 +40,8 @@ PanelWindow {
 
             anchors.verticalCenter: parent.verticalCenter
             anchors.left: parent.left
-            anchors.leftMargin: Config.bar_big_spacing_fun(height)
+            anchors.leftMargin: Config.big_spacing_fun(height)
-            spacing: Config.bar_big_spacing_fun(height)
+            spacing: Config.big_spacing_fun(height)
 
             MenuButton {}
 
@@ -57,7 +57,7 @@ PanelWindow {
         Row {  // bar widgets center
             id: widgetsCenter
             anchors.centerIn: parent
-            spacing: Config.bar_big_spacing_fun(height)
+            spacing: Config.big_spacing_fun(height)
 
             Clock {}
 
@@ -69,7 +69,7 @@ PanelWindow {
             anchors.verticalCenter: parent.verticalCenter
             anchors.right: parent.right
             anchors.rightMargin: 0
-            spacing: Config.bar_big_spacing_fun(height)
+            spacing: Config.big_spacing_fun(height)
 
             // TODO: Add bluetooth, network, audio, power, maybe HW monitor
             Tray{}
@@ -83,4 +83,4 @@ PanelWindow {
 
         }
     }
-}
+}

modules/bar/BarLoader.qml

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

modules/bar/states/Apps/AppsState.qml

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

modules/bar/states/Battery/BatteryState.qml

@@ -1,144 +1,21 @@
 pragma Singleton
 import QtQuick
 import Quickshell
-import Quickshell.Io
 import Quickshell.Services.UPower
-import "../../../../config"
 
 Item {
-    id: root
+    property bool available: UPower.displayDevice.isLaptopBattery
-    // 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
-    // 'state' shadows Item.state (qmllint) -> use chargeState
+    property string state: UPowerDeviceState.toString(UPower.displayDevice.state)
-    property string chargeState: UPowerDeviceState.toString(UPower.displayDevice.state)
+    property bool charging: state == "Charging"
-    // keep alias via getter would still shadow, so expose via function if needed; prefer chargeState
+    property bool full: state == "FullyCharged"
-    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/Network/NetworkState.qml

@@ -3,7 +3,6 @@ import QtQuick
 import Quickshell
 import Quickshell.Io
 import Quickshell.Networking
-import "../../../../config"
 
 QtObject {
     id: root
@@ -39,62 +38,6 @@ 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 = []
@@ -127,8 +70,7 @@ QtObject {
                 var nets = dev.networks.values
                 for (var j = 0; j < nets.length; j++) {
                     if (nets[j].connected) {
-                        // include signalStrength & name so hover updates live on signal change
+                        sig += ":" + nets[j].name
-                        sig += ":" + nets[j].name + ":" + Math.round(nets[j].signalStrength*100)
                         break
                     }
                 }
@@ -412,4 +354,4 @@ QtObject {
     Component.onCompleted: {
         root.updateAll()
     }
-}
+}

modules/bar/widgets/AudioSink.qml

@@ -6,7 +6,7 @@ import Quickshell.Hyprland
 MouseArea {
     id: audioButton
 
-    width: Math.max(audioRow.width + Config.bar_spacing_fun(height)*3.5, height)
+    width: Math.max(audioRow.width + Config.spacing_fun(height)*3.5, height)
     height: bar.height
     hoverEnabled: true
     cursorShape: Qt.PointingHandCursor
@@ -22,9 +22,9 @@ MouseArea {
 
         Row {
             id: audioRow
-            width: audioSourceText.width + audioSinkText.width + audioPercentageText.width + Config.bar_spacing_fun(height)*2
+            width: audioSourceText.width + audioSinkText.width + audioPercentageText.width + Config.spacing_fun(height)*2
             height: parent.height
-            spacing: Config.bar_spacing_fun(height)/2
+            spacing: Config.spacing_fun(height)/2
             anchors.centerIn: parent
 
             Text {
@@ -35,7 +35,7 @@ MouseArea {
                 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
+                rightPadding: Config.spacing_fun(height)*1.5
             }
 
             Text {

modules/bar/widgets/AudioSource.qml

@@ -5,7 +5,7 @@ import "../states/Audio"
 MouseArea {
     id: audioButton
 
-    width: Math.max(audioText.width + Config.bar_spacing_fun(height)*2, height)
+    width: Math.max(audioText.width + Config.spacing_fun(height)*2, height)
     height: bar.height
     hoverEnabled: true
     cursorShape: Qt.PointingHandCursor

modules/bar/widgets/Battery.qml

@@ -1,18 +1,19 @@
 import QtQuick
 import Quickshell
+import Quickshell.Hyprland
 import "../../../config"
 import "../states/Battery"
 
 MouseArea {
     id: batteryButton
-    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)
+    width: expanded ? Math.max(expandedRow.width + Config.spacing_fun(height)*3, bar.height) : Math.max(batteryText.width + Config.spacing_fun(height)*2, bar.height)
     height: bar.height
     hoverEnabled: true
     cursorShape: Qt.PointingHandCursor
     visible: BatteryState.available
 
     property bool expanded: false
-
+    
     Rectangle {
         anchors.fill: parent
         color: batteryButton.containsMouse ? Colors.tertiary : Qt.alpha(Colors.tertiaryContainer, 0.25)
@@ -23,7 +24,7 @@ MouseArea {
 
         Text {
             id: batteryText
-            visible : !batteryButton.expanded
+            visible : !expanded
             anchors.centerIn: parent
             text:(
                 BatteryState.percentage >= 90 ? "" :
@@ -36,7 +37,7 @@ MouseArea {
             font.family: Config.font
             color: (
                 BatteryState.charging ? (
-                    BatteryState.full ? Colors.secondary :
+                    BatteryState.full ? Colors.secondary : 
                     Colors.tertiary
                 ) :
                 BatteryState.percentage <= 5 ? Colors.errorContainer :
@@ -48,7 +49,7 @@ MouseArea {
 
         Text {
             id: chargeIcon
-            visible : !batteryButton.expanded && BatteryState.charging
+            visible : !expanded && BatteryState.charging
             anchors.centerIn: parent
             text: "󱐋"
             font.pixelSize: Config.iconSize(batteryButton.height)
@@ -60,9 +61,9 @@ MouseArea {
 
         Row {
             id: expandedRow
-            visible: batteryButton.expanded
+            visible: expanded
             anchors.centerIn: parent
-            spacing: Config.bar_spacing_fun(batteryButton.height)
+            spacing: Config.spacing_fun(batteryButton.height)
 
             Text {
                 id: batteryPercentageSymbol
@@ -88,7 +89,7 @@ MouseArea {
                 color: (
                     BatteryState.percentage <= 5 ? Colors.errorContainer :
                     BatteryState.charging ? (
-                        BatteryState.full ? Colors.secondary :
+                        BatteryState.full ? Colors.secondary : 
                         Colors.tertiary
                     ) :
                     BatteryState.percentage < 10 ? "yellow" :
@@ -99,7 +100,7 @@ MouseArea {
 
             Text {
                 id: batteryPercentageText
-                text: Math.round(BatteryState.percentage) + "%"
+                text: BatteryState.percentage + "%"
 
                 font.pixelSize: Config.labelSize(batteryButton.height)
                 font.family: Config.font
@@ -120,91 +121,13 @@ MouseArea {
         id: batteryPopup
         anchorItem: batteryButton
         anchorHovered: batteryButton.containsMouse
-        spacingValue: Config.bar_spacing_fun(batteryButton.height)
+        spacingValue: Config.spacing_fun(batteryButton.height)
         radiusValue: Config.radius_fun(batteryButton.height)
 
         Column {
-            spacing: batteryPopup.spacingValue
+            spacing: parent.spacing
             Text {
-                text: "State: " + BatteryState.chargeState
+                text: "percentage: " + BatteryState.percentage + "%"
-                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
@@ -212,7 +135,42 @@ MouseArea {
                 font.family: Config.font
             }
             Text {
-                text: "Health: " + Math.round(BatteryState.health) + " %"
+                text: "State: " + BatteryState.state
+                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.bar_spacing_fun(height)*3, bar.height) : Math.max(timeText.width + Config.bar_spacing_fun(height)*2, bar.height)
+    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)
     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.bar_spacing_fun(clockRect.height)
+        spacingValue: Config.spacing_fun(clockRect.height)
         radiusValue: Config.radius_fun(clockRect.height)
         
         Column {

modules/bar/widgets/IdleButton.qml

@@ -7,7 +7,7 @@ import "../states/Idle"
 
 MouseArea {
     id: idleButton
-    width: Math.max(idleText.width + Config.bar_spacing_fun(height)*2, height)
+    width: Math.max(idleText.width + Config.spacing_fun(height)*2, height)
     height: bar.height
     hoverEnabled: true
     cursorShape: Qt.PointingHandCursor

modules/bar/widgets/Network.qml

@@ -5,7 +5,7 @@ import "../states/Network"
 MouseArea {
     id: networkButton
 
-    width: Math.max(networkText.width + Config.bar_spacing_fun(height)*2, height)
+    width: Math.max(networkText.width + Config.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.bar_spacing_fun(networkButton.height)
+        spacingValue: Config.spacing_fun(networkButton.height)
         radiusValue: Config.radius_fun(networkButton.height)
 
         Column {

modules/bar/widgets/NotificationButton.qml

@@ -13,53 +13,70 @@ MouseArea {
     cursorShape: Qt.PointingHandCursor
 
     onClicked: {
-        // NotificationS.notificationPopupEnabled = !NotificationS.notificationPopupEnabled
+        NotificationS.toggleOverview()
-        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"
+        color: notificationButton.containsMouse || NotificationS.overviewVisible ? Colors.tertiary : "transparent"
         radius: Config.radius_fun(notificationButton.height)
+        border.width: Config.border_width
+        border.color: notificationButton.containsMouse || NotificationS.overviewVisible ? Colors.tertiary_fg : "transparent"
 
         Text {
             id: notificationText
             anchors.centerIn: parent
-            // text: Quickshell.iconPath("discord")
+            text: "󰂚"
-            text: NotificationS.notificationPopupEnabled ? "󰂚" : "󰂛"
             font.pixelSize: Config.bigIconSize(bar.height)
             font.family: Config.font
-            color: Colors.secondaryContainer_fg
+            color: NotificationS.overviewVisible ? Colors.tertiary_fg : Colors.secondaryContainer_fg
         }
+
+        // count badge
+        Rectangle {
+            id: badge
+            visible: NotificationS.trackedNotifications.values.length > 0
+            width: badgeText.implicitWidth + 6
+            height: badgeText.implicitHeight + 4
+            radius: height / 2
+            color: Colors.errorContainer
+            border.width: 1
+            border.color: Colors.error
+            anchors.top: parent.top
+            anchors.right: parent.right
+            anchors.topMargin: 2
+            anchors.rightMargin: 2
+            Text {
+                id: badgeText
+                anchors.centerIn: parent
+                text: NotificationS.trackedNotifications.values.length > 99 ? "99+" : NotificationS.trackedNotifications.values.length
+                font.family: Config.font
+                font.pixelSize: Config.labelSize(bar.height) * 0.6
+                font.bold: true
+                color: Colors.error_fg
+            }
+        }
+
+        // muted indicator dot
+        Rectangle {
+            visible: !NotificationS.soundEnabled
+            width: 8
+            height: 8
+            radius: 4
+            color: Colors.error
+            border.width: 1
+            border.color: Colors.error_fg
+            anchors.bottom: parent.bottom
+            anchors.right: parent.right
+            anchors.bottomMargin: 3
+            anchors.rightMargin: 3
+        }
+
+        // Image{
+        //     id: iconImage
+        //     source: Quickshell.iconPath("discord")
+        //     width: Config.bigIconSize(notificationButton.height)
+        //     height: Config.bigIconSize(notificationButton.height)
+        // }
     }
 }

modules/bar/widgets/PowerButton.qml

@@ -4,7 +4,7 @@ import "../../../config"
 
 MouseArea {
     id: powerButton
-    width: Math.max(powerText.width + Config.bar_spacing_fun(height), height)
+    width: Math.max(powerText.width + Config.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.bar_small_bar_spacing_fun(height)
+    spacing: Config.small_spacing_fun(height)
 
     Repeater {
         model: SystemTray.items
@@ -19,8 +19,8 @@ Row {   // Workspace Row
 
             Rectangle {  //trayItem
                 id: trayItem
-                width: iconImage.width + Config.bar_spacing_fun(bar.height)
+                width: iconImage.width + Config.spacing_fun(bar.height)
-                height: iconImage.height + Config.bar_spacing_fun(bar.height)
+                height: iconImage.height + Config.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.bar_spacing_fun(bar.height) * 1.5
+    property real pad: Config.spacing_fun(bar.height) * 1.5
 
     anchors.verticalCenter: parent.verticalCenter
 
@@ -39,7 +39,7 @@ Item {
     Row {
 
         id: contentRow
-        spacing: Config.bar_spacing_fun(bar.height) * 1.25
+        spacing: Config.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.bar_spacing_fun(bar.height) * 1.5)
+    height: bar.height - (Config.spacing_fun(bar.height) * 1.5)
-    width: workspacesRow.width + (Config.bar_spacing_fun(bar.height) * 2)
+    width: workspacesRow.width + (Config.spacing_fun(bar.height) * 2)
     
     radius: height / 2
     
@@ -20,7 +20,7 @@ Rectangle {
     Row {
         id: workspacesRow
         anchors.centerIn: parent
-        spacing: Config.bar_spacing_fun(bar.height) / 2 
+        spacing: Config.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.bar_spacing_fun(bar.height) : wsNum.width + wsIconsRow.width + 3*Config.bar_spacing_fun(bar.height)+Config.bar_spacing_fun(bar.height))
+                    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: {
-                    //     var spacing = Config.bar_spacing_fun(bar.height)
+                    //     var spacing = Config.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.bar_spacing_fun(bar.height) * 1.5)
+                        height: parent.height - (Config.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.bar_spacing_fun(bar.height))/2
+                                anchors.leftMargin: wsIconsRow.width==0 ? (wsItem.width-wsNum.width)/2 : (wsItem.width-wsNum.width-wsIconsRow.width-Config.spacing_fun(bar.height))/2
                                 anchors.verticalCenter: parent.verticalCenter
-                                spacing: Config.bar_spacing_fun(bar.height)
+                                spacing: Config.spacing_fun(bar.height)
 
                                 Text {
                                     id: wsNum
@@ -97,7 +97,7 @@ Rectangle {
 
                                 Row {
                                     id: wsIconsRow
-                                    spacing: Config.bar_spacing_fun(workspacesContainer.height)
+                                    spacing: Config.spacing_fun(workspacesContainer.height)
                                     anchors.verticalCenter: parent.verticalCenter
 
                                     Repeater {

modules/notification/Notification.qml

@@ -58,7 +58,6 @@ PanelWindow {
                 delegate: NotificationBody {
                     required property int index
                     required property var notificationData
-                    implicitWidth: screen.width/7
                     screen: notificationWindow.screen
 
                     notification: notificationData

modules/notification/NotificationBody.qml

@@ -1,31 +1,22 @@
 import QtQuick
 import Quickshell
 import "../../config"
-import "./notificationServer"
 import QtQuick.Layouts
 import QtQuick.Controls
 
 Rectangle {
     id: root
 
+    //TODO: urgency, expireTimeoutText, ...
+
     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
+    property real duration: (
-    // - "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
@@ -40,23 +31,9 @@ Rectangle {
     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 string textColor: urgency != 3 ? Colors.primary : Colors.tertiary
-    property color textBGColor: urgency != 3 ? Qt.alpha(Colors.primaryContainer, 0.75) : Qt.alpha(Colors.tertiaryContainer, 0.75)
+    property string 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) {
@@ -78,8 +55,6 @@ Rectangle {
         id: mouseArea
         anchors.fill: parent
         hoverEnabled: true
-        enabled: !root.isHistory
-        visible: !root.isHistory
         onClicked: {
             root.closeNotification(false)
         }
@@ -94,8 +69,8 @@ Rectangle {
             height: Math.max(iconRectangle.height, contentRectangle.height)+contentRow.anchors.margins*2
             width: parent.width
             color: "transparent"
-            // border.width: Config.border_width
+            border.width: Config.border_width
-            // border.color: textColor
+            border.color: textColor
 
             MouseArea {
                 id: closingMouseArea
@@ -103,26 +78,26 @@ Rectangle {
                 anchors.right: parent.right
                 anchors.margins: Config.spacing
 
-                width: closeIconText.implicitHeight
+                width: closeIconText.implicitHeight + Config.spacing
-                height: closeIconText.implicitHeight
+                height: closeIconText.implicitHeight + Config.spacing
 
                 hoverEnabled: true
                 cursorShape: Qt.PointingHandCursor
                 Rectangle {
                     anchors.fill: parent
                     radius: Config.radius
-                    color: parent.containsMouse ? "red" : "transparent"
+                    color: parent.containsMouse ? Colors.errorContainer : "transparent"
 
                     border.width: Config.border_width
-                    border.color: parent.containsMouse ? "white" : textColor
+                    border.color: parent.containsMouse ? Colors.error : textColor
 
                     Text {
                         id: closeIconText
                         anchors.centerIn: parent
-                        text: ""; // or "✕"
+                        text: "✕"; // or "✕"
                         font.family: Config.font
-                        font.pixelSize: Config.screen_height_to_font_medium(screen.height)
+                        font.pixelSize: Config.screen_height_to_font_small(screen.height)
-                        color: parent.parent.containsMouse ? "white" : textColor
+                        color: parent.parent.containsMouse ? Colors.error_fg : textColor
                     }
                 }
                 onClicked: function(mouse){
@@ -174,10 +149,10 @@ Rectangle {
 
                         Text {
                             id: summaryText
+                            // height: implicitHeight + font.pixelSize + Config.spacing
+
                             text: root.notification.summary
-                            // Only show summary under icon when both summary and body exist.
+                            visible: root.notification.summary ? true : false
-                            // 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)
@@ -193,54 +168,37 @@ Rectangle {
                 Rectangle{
                     id: contentRectangle
                     width: root.width - iconColumn.width - contentRow.spacing - contentRow.anchors.margins*2
-                    height: Math.max(iconRectangle.height, contentBodyColumn.implicitHeight)
+                    height: iconRectangle.height
                     color: "transparent"
 
                     Column {
                         id: contentBodyColumn
                         width: parent.width
+                        height: Math.max(childrenRect.height, iconRectangle.height)
                         spacing: Config.spacing
 
-                        Item {
+                        Text {
-                            id: titleTextItem
+                            id: bodyTitleText
-                            width: parent.width-closingMouseArea.width
+                            text: {
-                            height: closingMouseArea.height
+                                if (notification.image) return notification.appName.charAt(0).toUpperCase() + notification.appName.slice(1)
-                            Text {
+                                return "Message:"
-                                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
                             }
+                            font.family: Config.font
+                            font.bold: true
+                            font.pixelSize: closingMouseArea.height //Config.screen_height_to_font_small(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
+                        Text {
-                                    font.family: Config.font
+                            id: bodyText
-                                    font.pixelSize: Config.screen_height_to_font_tiny(screen.height)
+                            text: root.notification.body
-                                    color: textColor
+                            visible: root.notification.body ? true : false
-                                    wrapMode: Text.Wrap
+
-                                }
+                            width: contentBodyColumn.width
-                            }
+                            font.family: Config.font
+                            font.pixelSize: Config.screen_height_to_font_tiny(screen.height)
+                            color: textColor
+                            wrapMode: Text.Wrap
                         }
                     }
                 }
@@ -251,8 +209,8 @@ Rectangle {
             id: actionRowRectangle
             width: root.width
             height: Config.screen_height_to_font_tiny(screen.height)+2*Config.spacing
-            // border.width: Config.border_width
+            border.width: Config.border_width
-            // border.color: textColor
+            border.color: textColor
             color: "transparent"
             visible: notification.actions.length > 0
             Row{
@@ -336,8 +294,8 @@ Rectangle {
             id: inlineReplyRectangle
             width: root.width
             height: Config.screen_height_to_font_small(screen.height)+2*Config.spacing
-            // border.width: Config.border_width
+            border.width: Config.border_width
-            // border.color: textColor
+            border.color: textColor
             color: "transparent"
             visible: notification.hasInlineReply
 
@@ -431,8 +389,9 @@ Rectangle {
                 running: root.duration > 0
                 from: 1.0
                 to: 0.0
-                duration: root.duration
+                duration: root.duration 
-                paused: isHovered && !isHistory
+                paused: mouseArea.containsMouse || closingMouseArea.containsMouse || inlineReplyButtonMouseArea.containsMouse || root._hoveredActionCount > 0 || inlineReplyTextField.hovered || inlineReplyTextField.activeFocus
+
                 onFinished: root.closeNotification(false)
             }
         }
@@ -468,7 +427,7 @@ Rectangle {
             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

@@ -1,482 +0,0 @@
-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

@@ -1,68 +0,0 @@
-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/NotificationOverview.qml

@@ -0,0 +1,795 @@
+import QtQuick
+import Quickshell
+import Quickshell.Wayland
+import Quickshell.Hyprland
+import Quickshell.Services.Notifications
+import QtQuick.Layouts
+import QtQuick.Controls
+import "../../config"
+import "./notificationServer"
+
+PanelWindow {
+    id: root
+
+    required property var screen
+
+    anchors {
+        top: true
+        left: true
+        right: true
+        bottom: true
+    }
+
+    exclusiveZone: 0
+    color: "transparent"
+
+    WlrLayershell.layer: WlrLayer.Overlay
+    WlrLayershell.keyboardFocus: WlrKeyboardFocus.Exclusive
+
+    // state for expanded groups: appName -> bool
+    property var expandedGroups: ({})
+
+    // reactive grouped model: depends on trackedNotifications count
+    property var grouped: {
+        // establish binding dependency on trackedNotifications
+        const vals = NotificationS.trackedNotifications.values
+        // touch length to trigger re-evaluation
+        const len = vals.length
+        if (len < 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] })
+        }
+        // sort alphabetically for stable order; could sort by most recent instead
+        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) {
+                // dismiss tracked notification
+                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) {
+            const n = vals[i]
+            if (n.tracked) n.dismiss()
+        }
+        // also collapse all
+        expandedGroups = ({})
+    }
+
+    // close handling
+    function closeOverview() {
+        NotificationS.overviewVisible = false
+    }
+
+    // keyboard handling via contentItem
+    contentItem {
+        focus: true
+        Keys.onPressed: event => {
+            if (event.key === Qt.Key_Escape) {
+                closeOverview()
+                event.accepted = true
+            }
+        }
+    }
+
+    // background dim + click to close
+    MouseArea {
+        id: bgMouse
+        anchors.fill: parent
+        onClicked: function(mouse) { root.closeOverview() }
+        // eat wheel to prevent flickable behind?
+    }
+
+    // main panel container
+    Rectangle {
+        id: panel
+
+        // panel size: constrained by screen
+        width: Math.min(520, Math.max(380, root.screen.width * 0.32))
+        property real maxPanelHeight: root.screen.height * 0.72
+        height: maxPanelHeight
+
+        anchors.top: parent.top
+        anchors.right: parent.right
+        anchors.topMargin: Config.barHeight(root.screen.height) + Config.spacing
+        anchors.rightMargin: Config.spacing
+
+        radius: Config.radius
+        color: Qt.alpha(Colors.surfaceContainer, 0.96)
+        border.width: Config.border_width
+        border.color: Colors.outlineVariant
+        clip: true
+
+        // prevent bg click when clicking panel
+        MouseArea {
+            anchors.fill: parent
+            hoverEnabled: false
+            onClicked: function(mouse) { mouse.accepted = true }
+        }
+
+        Column {
+            id: panelColumn
+            anchors.fill: parent
+            anchors.margins: Config.spacing
+            spacing: Config.spacing
+
+            // ───── Header ─────
+            Rectangle {
+                id: header
+                width: parent.width
+                implicitHeight: headerRow.implicitHeight + Config.spacing*2
+                radius: Config.small_radius
+                color: Colors.surfaceContainerHigh
+                border.width: Config.border_width
+                border.color: Colors.outlineVariant
+
+                RowLayout {
+                    id: headerRow
+                    anchors.fill: parent
+                    anchors.margins: Config.spacing
+                    spacing: Config.spacing
+
+                    // title + count
+                    Text {
+                        id: titleText
+                        Layout.alignment: Qt.AlignVCenter
+                        text: "Notifications"
+                        font.family: Config.font
+                        font.pixelSize: Config.screen_height_to_font_small(root.screen.height)
+                        font.bold: true
+                        color: Colors.primary
+                    }
+                    Rectangle {
+                        id: countBadge
+                        Layout.alignment: Qt.AlignVCenter
+                        visible: NotificationS.trackedNotifications.values.length > 0
+                        Layout.preferredWidth: countText.implicitWidth + Config.spacing
+                        Layout.preferredHeight: countText.implicitHeight + Config.small_spacing
+                        radius: height/2
+                        color: Colors.primaryContainer
+                        border.width: Config.border_width
+                        border.color: Colors.primary
+                        Text {
+                            id: countText
+                            anchors.centerIn: parent
+                            text: NotificationS.trackedNotifications.values.length
+                            font.family: Config.font
+                            font.pixelSize: Config.screen_height_to_font_tiny(root.screen.height)
+                            font.bold: true
+                            color: Colors.primaryContainer_fg
+                        }
+                    }
+
+                    Item { Layout.preferredWidth: Config.spacing; Layout.preferredHeight: 1; Layout.alignment: Qt.AlignVCenter }
+
+                    // mute toggle (moved from NotificationButton)
+                    Rectangle {
+                        id: muteBtn
+                        Layout.preferredWidth: muteText.implicitWidth + Config.spacing*2
+                        Layout.preferredHeight: muteText.implicitHeight + Config.spacing
+                        Layout.alignment: Qt.AlignVCenter
+                        radius: Config.radius_fun(height)*2
+                        color: muteArea.containsMouse ? Colors.tertiaryContainer : (NotificationS.soundEnabled ? Colors.secondaryContainer : Colors.errorContainer)
+                        border.width: Config.border_width
+                        border.color: muteArea.containsMouse ? Colors.tertiary : (NotificationS.soundEnabled ? Colors.secondary : Colors.error)
+                        Text {
+                            id: muteText
+                            anchors.centerIn: parent
+                            text: NotificationS.soundEnabled ? "󰂚" : "󰂛"
+                            font.family: Config.font
+                            font.pixelSize: Config.screen_height_to_font_small(root.screen.height)
+                            color: muteArea.containsMouse ? Colors.tertiary_fg : (NotificationS.soundEnabled ? Colors.secondary : Colors.error_fg)
+                        }
+                        MouseArea {
+                            id: muteArea
+                            anchors.fill: parent
+                            hoverEnabled: true
+                            cursorShape: Qt.PointingHandCursor
+                            onClicked: function(mouse) {
+                                NotificationS.soundEnabled = !NotificationS.soundEnabled
+                                mouse.accepted = true
+                            }
+                        }
+                    }
+
+                    // clear all
+                    Rectangle {
+                        id: clearAllBtn
+                        Layout.preferredWidth: clearAllText.implicitWidth + Config.spacing*2
+                        Layout.preferredHeight: muteText.implicitHeight + Config.spacing
+                        Layout.alignment: Qt.AlignVCenter
+                        radius: Config.radius_fun(height)*2
+                        visible: NotificationS.trackedNotifications.values.length > 0
+                        color: clearAllArea.containsMouse ? Colors.errorContainer : Colors.surfaceContainerHighest
+                        border.width: Config.border_width
+                        border.color: clearAllArea.containsMouse ? Colors.error : Colors.outline
+                        Text {
+                            id: clearAllText
+                            anchors.centerIn: parent
+                            text: "Clear all"
+                            font.family: Config.font
+                            font.pixelSize: Config.screen_height_to_font_tiny(root.screen.height)
+                            color: clearAllArea.containsMouse ? Colors.error_fg : Colors.primary
+                        }
+                        MouseArea {
+                            id: clearAllArea
+                            anchors.fill: parent
+                            hoverEnabled: true
+                            cursorShape: Qt.PointingHandCursor
+                            onClicked: function(mouse) {
+                                root.clearAll()
+                                mouse.accepted = true
+                            }
+                        }
+                    }
+
+                    Item { Layout.fillWidth: true; Layout.preferredWidth: 8; Layout.preferredHeight: 1 }
+
+                    // close X
+                    Rectangle {
+                        id: closeBtn
+                        Layout.preferredWidth: closeText.implicitHeight + Config.spacing
+                        Layout.preferredHeight: closeText.implicitHeight + Config.spacing
+                        Layout.alignment: Qt.AlignVCenter
+                        radius: Config.radius
+                        color: closeArea.containsMouse ? Colors.errorContainer : "transparent"
+                        border.width: Config.border_width
+                        border.color: closeArea.containsMouse ? Colors.error : Colors.outlineVariant
+                        Text {
+                            id: closeText
+                            anchors.centerIn: parent
+                            text: "✕"
+                            font.family: Config.font
+                            font.pixelSize: Config.screen_height_to_font_small(root.screen.height)
+                            color: closeArea.containsMouse ? Colors.error_fg : Colors.primary
+                        }
+                        MouseArea {
+                            id: closeArea
+                            anchors.fill: parent
+                            hoverEnabled: true
+                            cursorShape: Qt.PointingHandCursor
+                            onClicked: function(mouse) {
+                                root.closeOverview()
+                                mouse.accepted = true
+                            }
+                        }
+                    }
+                }
+            }
+
+            // ───── Scrollable grouped list ─────
+            Flickable {
+                id: flick
+                width: parent.width
+                height: panel.height - header.height - panelColumn.spacing - Config.spacing*2
+                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
+
+                    // empty placeholder
+                    Rectangle {
+                        width: parent.width
+                        height: 80
+                        radius: Config.small_radius
+                        color: Qt.alpha(Colors.surfaceContainerLow, 0.6)
+                        border.width: Config.border_width
+                        border.color: Colors.outlineVariant
+                        visible: NotificationS.trackedNotifications.values.length === 0
+                        Text {
+                            anchors.centerIn: parent
+                            text: "No notifications"
+                            font.family: Config.font
+                            font.pixelSize: Config.screen_height_to_font_small(root.screen.height)
+                            color: Colors.outline
+                        }
+                    }
+
+                    Repeater {
+                        id: groupRepeater
+                        model: root.grouped
+
+                        delegate: Column {
+                            id: groupColumn
+                            required property var modelData
+                            required property int index
+
+                            property string appName: modelData.appName
+                            property var notes: modelData.notes
+                            property bool isExpanded: root.expandedGroups[appName] === true
+                            property int count: notes.length
+                            // pick representative icon from first notification
+                            property var repNote: notes.length > 0 ? notes[0] : null
+
+                            width: contentColumn.width
+                            spacing: Config.spacing / 2
+
+                            // ── Group header ──
+                            Rectangle {
+                                id: groupHeader
+                                width: parent.width
+                                height: Math.max(headerContent.implicitHeight + Config.spacing*2, 48)
+                                radius: Config.small_radius
+                                color: groupHeaderArea.containsMouse ? Colors.secondaryContainer : Colors.surfaceContainerHigh
+                                border.width: Config.border_width
+                                border.color: groupColumn.isExpanded ? Colors.primary : Colors.outlineVariant
+
+                                Row {
+                                    id: headerContent
+                                    anchors.fill: parent
+                                    anchors.margins: Config.spacing
+                                    spacing: Config.spacing
+                                    anchors.verticalCenter: parent.verticalCenter
+
+                                    // app icon
+                                    Image {
+                                        id: groupIcon
+                                        width: 28
+                                        height: 28
+                                        anchors.verticalCenter: parent.verticalCenter
+                                        asynchronous: true
+                                        fillMode: Image.PreserveAspectFit
+                                        source: {
+                                            if (!groupColumn.repNote) return Quickshell.iconPath("notifications")
+                                            if (groupColumn.repNote.image) return groupColumn.repNote.image
+                                            if (groupColumn.repNote.appIcon) return Quickshell.iconPath(groupColumn.repNote.appIcon)
+                                            const entry = groupColumn.repNote.desktopEntry ? DesktopEntries.byId(groupColumn.repNote.desktopEntry) : null
+                                            if (entry && entry.icon) {
+                                                const p = Quickshell.iconPath(entry.icon)
+                                                if (p && p !== "") return p
+                                            }
+                                            return Quickshell.iconPath("notifications")
+                                        }
+                                    }
+
+                                    Column {
+                                        anchors.verticalCenter: parent.verticalCenter
+                                        spacing: 2
+                                        width: groupHeader.width - groupIcon.width - expandArrow.width - clearGroupBtn.width - badge.width - headerContent.spacing*4 - Config.spacing*2
+
+                                        Text {
+                                            text: groupColumn.appName
+                                            width: parent.width
+                                            elide: Text.ElideRight
+                                            font.family: Config.font
+                                            font.pixelSize: Config.screen_height_to_font_small(root.screen.height)
+                                            font.bold: true
+                                            color: Colors.primary
+                                        }
+                                        Text {
+                                            text: groupColumn.count + (groupColumn.count === 1 ? " notification" : " notifications")
+                                            font.family: Config.font
+                                            font.pixelSize: Config.screen_height_to_font_tiny(root.screen.height)
+                                            color: Colors.outline
+                                        }
+                                    }
+
+                                    Rectangle {
+                                        id: badge
+                                        width: badgeText.implicitWidth + Config.spacing
+                                        height: badgeText.implicitHeight + 4
+                                        anchors.verticalCenter: parent.verticalCenter
+                                        radius: height/2
+                                        color: groupColumn.isExpanded ? Colors.primary : Colors.secondaryContainer
+                                        border.width: Config.border_width
+                                        border.color: groupColumn.isExpanded ? Colors.primary_fg : Colors.outlineVariant
+                                        Text {
+                                            id: badgeText
+                                            anchors.centerIn: parent
+                                            text: groupColumn.count
+                                            font.family: Config.font
+                                            font.pixelSize: Config.screen_height_to_font_tiny(root.screen.height)
+                                            font.bold: true
+                                            color: groupColumn.isExpanded ? Colors.primary_fg : Colors.secondary
+                                        }
+                                    }
+
+                                    Text {
+                                        id: expandArrow
+                                        anchors.verticalCenter: parent.verticalCenter
+                                        text: groupColumn.isExpanded ? "▼" : "▶"
+                                        font.family: Config.font
+                                        font.pixelSize: Config.screen_height_to_font_tiny(root.screen.height)
+                                        color: Colors.primary
+                                    }
+
+                                    // clear group button
+                                    Rectangle {
+                                        id: clearGroupBtn
+                                        width: clearGroupText.implicitWidth + Config.spacing
+                                        height: clearGroupText.implicitHeight + Config.spacing/2
+                                        anchors.verticalCenter: parent.verticalCenter
+                                        radius: Config.radius_fun(height)
+                                        color: clearGroupArea.containsMouse ? Colors.errorContainer : Qt.alpha(Colors.surfaceContainerHighest, 0.8)
+                                        border.width: Config.border_width
+                                        border.color: clearGroupArea.containsMouse ? Colors.error : Colors.outlineVariant
+                                        Text {
+                                            id: clearGroupText
+                                            anchors.centerIn: parent
+                                            text: "✕"
+                                            font.family: Config.font
+                                            font.pixelSize: Config.screen_height_to_font_tiny(root.screen.height)
+                                            color: clearGroupArea.containsMouse ? Colors.error_fg : Colors.outline
+                                        }
+                                        MouseArea {
+                                            id: clearGroupArea
+                                            anchors.fill: parent
+                                            hoverEnabled: true
+                                            cursorShape: Qt.PointingHandCursor
+                                            onClicked: function(mouse) {
+                                                mouse.accepted = true
+                                                root.clearGroup(groupColumn.appName)
+                                            }
+                                        }
+                                    }
+                                }
+
+                                MouseArea {
+                                    id: groupHeaderArea
+                                    anchors.fill: parent
+                                    hoverEnabled: true
+                                    cursorShape: Qt.PointingHandCursor
+                                    // don't steal click when hitting clear button
+                                    onClicked: function(mouse) {
+                                        // if clear button contains mouse, ignore
+                                        if (clearGroupArea.containsMouse) return
+                                        mouse.accepted = true
+                                        root.toggleGroup(groupColumn.appName)
+                                    }
+                                }
+                            }
+
+                            // ── Group notifications (collapsed by default) ──
+                            Column {
+                                id: groupNotesColumn
+                                width: parent.width
+                                spacing: Config.spacing/2
+                                visible: groupColumn.isExpanded
+                                // keep clipped and animate? simple visible
+                                Repeater {
+                                    id: notesRepeater
+                                    model: groupColumn.notes
+                                    delegate: Rectangle {
+                                        id: histCard
+                                        required property var modelData
+                                        required property int index
+                                        property var notification: modelData
+                                        property int urgency: (notification.urgency ?? notification.hints["urgency"]) != null ? (notification.urgency ?? notification.hints["urgency"]) + 1 : 0
+                                        property color textColor: urgency !== 3 ? Colors.primary : Colors.tertiary
+                                        property color textBGColor: urgency !== 3 ? Qt.alpha(Colors.primaryContainer, 0.92) : Qt.alpha(Colors.tertiaryContainer, 0.92)
+
+                                        width: groupNotesColumn.width
+                                        // height determined by content
+                                        implicitHeight: cardInnerColumn.implicitHeight + Config.spacing*2
+                                        radius: Config.small_radius
+                                        color: textBGColor
+                                        border.width: Config.border_width
+                                        border.color: textColor
+                                        clip: true
+
+                                        Column {
+                                            id: cardInnerColumn
+                                            width: parent.width
+                                            spacing: 0
+
+                                            // content row
+                                            Rectangle {
+                                                id: cardContentRect
+                                                width: parent.width
+                                                // height based on max of icon vs text
+                                                implicitHeight: Math.max(iconCol.implicitHeight, bodyCol.implicitHeight) + Config.spacing*2
+                                                color: "transparent"
+
+                                                // close per-notification
+                                                MouseArea {
+                                                    id: cardCloseArea
+                                                    anchors.top: parent.top
+                                                    anchors.right: parent.right
+                                                    anchors.margins: Config.spacing/2
+                                                    width: cardCloseText.implicitHeight + Config.spacing
+                                                    height: width
+                                                    hoverEnabled: true
+                                                    cursorShape: Qt.PointingHandCursor
+                                                    Rectangle {
+                                                        anchors.fill: parent
+                                                        radius: Config.small_radius
+                                                        color: cardCloseArea.containsMouse ? Colors.errorContainer : "transparent"
+                                                        border.width: Config.border_width
+                                                        border.color: cardCloseArea.containsMouse ? Colors.error : histCard.textColor
+                                                        Text {
+                                                            id: cardCloseText
+                                                            anchors.centerIn: parent
+                                                            text: "✕"
+                                                            font.family: Config.font
+                                                            font.pixelSize: Config.screen_height_to_font_tiny(root.screen.height)
+                                                            color: cardCloseArea.containsMouse ? Colors.error_fg : histCard.textColor
+                                                        }
+                                                    }
+                                                    onClicked: function(mouse) {
+                                                        mouse.accepted = true
+                                                        if (histCard.notification.tracked) histCard.notification.dismiss()
+                                                        else histCard.notification.close()
+                                                    }
+                                                }
+
+                                                Row {
+                                                    id: cardRow
+                                                    anchors.fill: parent
+                                                    anchors.margins: Config.spacing
+                                                    anchors.rightMargin: cardCloseArea.width + Config.spacing
+                                                    spacing: Config.spacing
+
+                                                    // icon side
+                                                    Rectangle {
+                                                        id: iconColWrapper
+                                                        width: 1.25 * iconImg.width
+                                                        height: Math.max(iconCol.implicitHeight, bodyCol.implicitHeight)
+                                                        color: "transparent"
+                                                        Column {
+                                                            id: iconCol
+                                                            width: parent.width
+                                                            spacing: Config.spacing/2
+                                                            Image {
+                                                                id: iconImg
+                                                                width: root.screen.width / 32
+                                                                height: width
+                                                                anchors.horizontalCenter: parent.horizontalCenter
+                                                                asynchronous: true
+                                                                fillMode: Image.PreserveAspectFit
+                                                                source: {
+                                                                    if (histCard.notification.image) return histCard.notification.image
+                                                                    if (histCard.notification.appIcon) return Quickshell.iconPath(histCard.notification.appIcon)
+                                                                    const entry = histCard.notification.desktopEntry ? DesktopEntries.byId(histCard.notification.desktopEntry) : null
+                                                                    if (entry && entry.icon) {
+                                                                        const p = Quickshell.iconPath(entry.icon)
+                                                                        if (p && p !== "") return p
+                                                                    }
+                                                                    return Quickshell.iconPath("notifications")
+                                                                }
+                                                            }
+                                                            Text {
+                                                                id: histSummary
+                                                                text: histCard.notification.summary
+                                                                visible: histCard.notification.summary ? true : false
+                                                                width: parent.width
+                                                                font.family: Config.font
+                                                                font.pixelSize: Config.screen_height_to_font_tiny(root.screen.height)
+                                                                font.bold: true
+                                                                color: histCard.textColor
+                                                                wrapMode: Text.Wrap
+                                                                horizontalAlignment: Text.AlignHCenter
+                                                            }
+                                                        }
+                                                    }
+
+                                                    // body side
+                                                    Rectangle {
+                                                        id: bodyWrapper
+                                                        width: parent.width - iconColWrapper.width - cardRow.spacing
+                                                        height: Math.max(iconCol.implicitHeight, bodyCol.implicitHeight)
+                                                        color: "transparent"
+                                                        Column {
+                                                            id: bodyCol
+                                                            width: parent.width
+                                                            spacing: Config.spacing/2
+                                                            Text {
+                                                                id: bodyTitle
+                                                                text: {
+                                                                    if (histCard.notification.image) return histCard.notification.appName.charAt(0).toUpperCase() + histCard.notification.appName.slice(1)
+                                                                    return histCard.notification.appName ? histCard.notification.appName : "Message:"
+                                                                }
+                                                                font.family: Config.font
+                                                                font.bold: true
+                                                                font.pixelSize: Config.screen_height_to_font_tiny(root.screen.height)
+                                                                color: histCard.textColor
+                                                                elide: Text.ElideRight
+                                                                width: parent.width
+                                                            }
+                                                            Text {
+                                                                id: bodyText
+                                                                text: histCard.notification.body
+                                                                visible: histCard.notification.body ? true : false
+                                                                width: parent.width
+                                                                font.family: Config.font
+                                                                font.pixelSize: Config.screen_height_to_font_tiny(root.screen.height)
+                                                                color: histCard.textColor
+                                                                wrapMode: Text.Wrap
+                                                                textFormat: Text.RichText
+                                                            }
+                                                            Text {
+                                                                text: {
+                                                                    // time hint if available, else empty
+                                                                    if (histCard.notification.hints["x-dunst-stack-tag"]) return ""
+                                                                    return ""
+                                                                }
+                                                                visible: false
+                                                                font.family: Config.font
+                                                                font.pixelSize: Config.screen_height_to_font_tiny(root.screen.height)
+                                                                color: Colors.outline
+                                                            }
+                                                        }
+                                                    }
+                                                }
+                                            }
+
+                                            // actions row
+                                            Rectangle {
+                                                id: histActionRowRect
+                                                width: parent.width
+                                                height: Config.screen_height_to_font_tiny(root.screen.height)+2*Config.spacing
+                                                color: "transparent"
+                                                border.width: Config.border_width
+                                                border.color: histCard.textColor
+                                                visible: histCard.notification.actions.length > 0
+                                                Row {
+                                                    id: histActionsRow
+                                                    spacing: Config.spacing
+                                                    anchors.fill: parent
+                                                    anchors.margins: Config.spacing
+                                                    property var cardRoot: histCard
+                                                    Repeater {
+                                                        id: histActionRepeater
+                                                        model: histCard.notification.actions
+                                                        delegate: MouseArea {
+                                                            required property var modelData
+                                                            id: histActionArea
+                                                            width: histActionsRow.width / histActionsRow.cardRoot.notification.actions.length
+                                                            height: histActionRect.height
+                                                            anchors.verticalCenter: parent.verticalCenter
+                                                            hoverEnabled: true
+                                                            cursorShape: Qt.PointingHandCursor
+                                                            Rectangle {
+                                                                id: histActionRect
+                                                                width: parent.width
+                                                                height: histActionRow.height + Config.spacing
+                                                                color: histActionArea.containsMouse ? Colors.secondaryContainer_fg : Colors.secondaryContainer
+                                                                border.color: histActionArea.containsMouse ? Colors.secondary_fg : Colors.secondary
+                                                                border.width: Config.border_width
+                                                                radius: Config.radius_fun(histActionRect.height)*2
+                                                                Row {
+                                                                    id: histActionRow
+                                                                    anchors.centerIn: parent
+                                                                    spacing: Config.spacing/2
+                                                                    Text {
+                                                                        text: modelData.text
+                                                                        width: Math.min(histActionRect.width - Config.spacing*2, implicitWidth)
+                                                                        elide: Text.ElideRight
+                                                                        font.family: Config.font
+                                                                        font.pixelSize: Config.screen_height_to_font_tiny(root.screen.height)
+                                                                        color: histActionArea.containsMouse ? Colors.secondary_fg : Colors.secondary
+                                                                    }
+                                                                }
+                                                            }
+                                                            onClicked: function(mouse) {
+                                                                mouse.accepted = true
+                                                                modelData.invoke()
+                                                                // after invoke, dismiss if not resident handled by server
+                                                                if (histCard.notification.tracked && !histCard.notification.resident) {
+                                                                    // optionally keep in history; don't auto dismiss
+                                                                }
+                                                            }
+                                                        }
+                                                    }
+                                                }
+                                            }
+
+                                            // inline reply
+                                            Rectangle {
+                                                id: histInlineRect
+                                                width: parent.width
+                                                height: Config.screen_height_to_font_small(root.screen.height)+2*Config.spacing
+                                                color: "transparent"
+                                                border.width: Config.border_width
+                                                border.color: histCard.textColor
+                                                visible: histCard.notification.hasInlineReply
+                                                function sendReply(message) {
+                                                    histCard.notification.sendInlineReply(message)
+                                                    inlineField.focus = false
+                                                    // keep notification in history; optionally dismiss?
+                                                }
+                                                Row {
+                                                    id: histInlineRow
+                                                    spacing: Config.spacing
+                                                    anchors.fill: parent
+                                                    anchors.margins: Config.spacing
+                                                    TextField {
+                                                        id: inlineField
+                                                        width: parent.width - inlineSendArea.width - Config.spacing
+                                                        height: inlineSendText.height + Config.spacing
+                                                        anchors.verticalCenter: parent.verticalCenter
+                                                        hoverEnabled: true
+                                                        activeFocusOnTab: true
+                                                        placeholderText: histCard.notification.hints["x-kde-reply-placeholder-text"] != null ? histCard.notification.hints["x-kde-reply-placeholder-text"] : histCard.notification.inlineReplyPlaceholder
+                                                        placeholderTextColor: inlineField.activeFocus ? Colors.secondary_fg : Colors.secondary
+                                                        font.family: Config.font
+                                                        leftPadding: Config.spacing
+                                                        background: Rectangle {
+                                                            radius: Config.radius
+                                                            color: inlineField.activeFocus ? Colors.tertiary_fg : Colors.primary_fg
+                                                            border.color: inlineField.activeFocus ? Colors.tertiary : Colors.primary
+                                                            border.width: Config.border_width
+                                                        }
+                                                        onAccepted: {
+                                                            histInlineRect.sendReply(text)
+                                                        }
+                                                    }
+                                                    MouseArea {
+                                                        id: inlineSendArea
+                                                        width: inlineSendText.width + 2*Config.spacing
+                                                        height: inlineSendText.height + Config.spacing
+                                                        anchors.verticalCenter: parent.verticalCenter
+                                                        hoverEnabled: true
+                                                        cursorShape: Qt.PointingHandCursor
+                                                        Rectangle {
+                                                            anchors.fill: parent
+                                                            radius: height*0.5
+                                                            color: inlineSendArea.containsMouse ? Colors.secondaryContainer_fg : Colors.secondaryContainer
+                                                            border.color: inlineSendArea.containsMouse ? Colors.secondary_fg : Colors.secondary
+                                                            border.width: Config.border_width
+                                                            Text {
+                                                                id: inlineSendText
+                                                                text: "SEND"
+                                                                anchors.centerIn: parent
+                                                                font.family: Config.font
+                                                                font.pixelSize: Config.screen_height_to_font_tiny(root.screen.height)
+                                                                color: inlineSendArea.containsMouse ? Colors.secondary_fg : Colors.secondary
+                                                            }
+                                                        }
+                                                        onClicked: function(mouse) {
+                                                            mouse.accepted = true
+                                                            histInlineRect.sendReply(inlineField.text)
+                                                        }
+                                                    }
+                                                }
+                                            }
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    // debug
+    Component.onCompleted: {
+        Config.debug == "Notification" && console.log("[NotificationOverview " + Hyprland.monitorFor(screen).activeWorkspace.id + "] completed")
+    }
+}

modules/notification/NotificationOverviewLoader.qml

@@ -0,0 +1,42 @@
+import QtQuick
+import Quickshell
+import Quickshell.Hyprland
+import "./notificationServer"
+
+Item {
+    id: overviewLoaderRoot
+
+    // Per-screen PanelWindows for the overview.
+    // Uses Loader so windows are only created when overviewVisible is true.
+    Repeater {
+        model: Quickshell.screens
+        delegate: Loader {
+            id: screenLoader
+            required property var modelData
+            active: NotificationS.overviewVisible
+            sourceComponent: NotificationOverview {
+                screen: modelData
+            }
+            // optional: hide on screen removed
+            onActiveChanged: {
+                if (active) {
+                    console.log("[NotificationOverviewLoader] opening overview on screen", Hyprland.monitorFor(modelData).activeWorkspace.id)
+                }
+            }
+        }
+    }
+
+    // Global shortcut to toggle overview (optional)
+    GlobalShortcut {
+        name: "NotificationOverview"
+        description: "Toggle notification history overview"
+        onPressed: {
+            NotificationS.toggleOverview()
+            console.log("[NotificationOverviewLoader] shortcut toggle, now", NotificationS.overviewVisible)
+        }
+    }
+
+    Component.onCompleted: {
+        console.log("[NotificationOverviewLoader] completed, overviewVisible:", NotificationS.overviewVisible)
+    }
+}

modules/notification/notificationServer/NotificationServer.qml

@@ -12,23 +12,15 @@ Item {
 
     property var focusedMonitor: null
     property var newestNotification: null
-    property bool notificationPopupEnabled: true
+    property bool soundEnabled: true
-
+    property bool overviewVisible: false
     property alias trackedNotifications: notificationServer.trackedNotifications
-    property int notificationNum: trackedNotifications.values.length
 
     signal notificationReceived(var notification)
 
-    // ── Hover state for history auto-close ──
+    function toggleOverview() {
-    // Updated by NotificationHistory.qml (PanelWindow hover) and NotificationButton.qml (bar button hover)
+        overviewVisible = !overviewVisible
-    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)
@@ -69,7 +61,7 @@ Item {
             //     return
             // }
             notification.tracked = true
-            !notification.lastGeneration && Config.debug == "Notification" && console.log(
+            Config.debug == "Notification" && console.log(
                 "[NotificationServer] Notification received:",
                 notification.appName, notification.id, notification.summary, notification.body
             )
@@ -94,9 +86,9 @@ Item {
             repeat: false
 
             onTriggered: {
-                if((!notification.lastGeneration && notificationServerState.notificationPopupEnabled) || Config.debug == "Notification"){
+                focusedMonitor = Hyprland.focusedMonitor
-                    focusedMonitor = Hyprland.focusedMonitor
+                notificationReceived(notification)
-                    notificationReceived(notification)
+                if(!notification.lastGeneration && notificationServerState.soundEnabled){
                     notificationSound.play()
                 }
 

shell.qml

@@ -19,9 +19,7 @@ ShellRoot {
 
     // Notifications
     NotificationLoader {}
-    NotificationHistoryLoader {
+    NotificationOverviewLoader {}
-        id: nHistoryLoader
-    }
 
     //Wallpaper picker
     WallpaperPickerLoader {}
@@ -44,10 +42,6 @@ ShellRoot {
         wlLoader.openWlogout()
     }
 
-    function toggleNotificationHistory() {
-        nHistoryLoader.toggleNHistory()
-    }
-
     GlobalShortcut {
         name: "QsReload"