import QtQuick import Quickshell import Quickshell.Services.Notifications import "." as M M.HoverPanel { id: menuWindow popupMode: true contentWidth: 350 // Header: title + clear all + DND toggle Item { width: menuWindow.contentWidth height: 32 Text { anchors.left: parent.left anchors.leftMargin: 12 anchors.verticalCenter: parent.verticalCenter text: "Notifications" color: M.Theme.base05 font.pixelSize: M.Theme.fontSize + 1 font.family: M.Theme.fontFamily font.bold: true } Row { anchors.right: parent.right anchors.rightMargin: 8 anchors.verticalCenter: parent.verticalCenter spacing: 8 // DND toggle Text { text: M.NotifService.dnd ? "\uDB82\uDE93" : "\uDB80\uDC9C" color: M.NotifService.dnd ? M.Theme.base09 : M.Theme.base04 font.pixelSize: M.Theme.fontSize font.family: M.Theme.iconFontFamily anchors.verticalCenter: parent.verticalCenter MouseArea { anchors.fill: parent cursorShape: Qt.PointingHandCursor onClicked: M.NotifService.toggleDnd() } } // Clear all Text { text: "\uF1F8" color: clearArea.containsMouse ? M.Theme.base08 : M.Theme.base04 font.pixelSize: M.Theme.fontSize font.family: M.Theme.iconFontFamily anchors.verticalCenter: parent.verticalCenter visible: M.NotifService.count > 0 MouseArea { id: clearArea anchors.fill: parent hoverEnabled: true cursorShape: Qt.PointingHandCursor onClicked: menuWindow._cascadeDismiss() } } } } property var _pendingDismissIds: [] // Group notifications by appName, sorted by max urgency desc then most recent time desc readonly property var _groups: { const map = {}; for (const n of M.NotifService.list) { const key = n.appName || ""; if (!map[key]) map[key] = { appName: key, appIcon: n.appIcon, notifs: [], maxUrgency: 0, maxTime: 0 }; map[key].notifs.push(n); if (n.urgency > map[key].maxUrgency) map[key].maxUrgency = n.urgency; if (n.time > map[key].maxTime) map[key].maxTime = n.time; } return Object.values(map).sort((a, b) => { if (b.maxUrgency !== a.maxUrgency) return b.maxUrgency - a.maxUrgency; return b.maxTime - a.maxTime; }); } // Flat model: group header followed by its notifications readonly property var _flatModel: { const arr = []; for (const g of _groups) { arr.push({ type: "header", appName: g.appName, appIcon: g.appIcon, count: g.notifs.length }); for (const n of g.notifs) arr.push({ type: "notif", data: n }); } return arr; } // Collect visible (non-dismissing) notif delegates, optionally filtered by appName function _getVisibleNotifDelegates(appName) { const result = []; for (let i = 0; i < _flatModel.length; i++) { const item = _flatModel[i]; if (item.type !== "notif") continue; if (appName !== undefined && item.data.appName !== appName) continue; const d = notifList.itemAtIndex(i); if (d && d._type === "notif" && d._notif?.state !== "dismissing") result.push(d); } return result; } function _startCascade(visibles, ids) { _pendingDismissIds = ids; if (visibles.length === 0) { _finishCascade(); return; } for (let i = 0; i < visibles.length; i++) { _cascadeTimer.createObject(menuWindow, { _target: visibles[i], _delay: i * 60, _isLast: i === visibles.length - 1 }); } } function _cascadeDismiss() { if (M.NotifService.list.length === 0) return; const ids = M.NotifService.list.map(n => n.id); _startCascade(_getVisibleNotifDelegates(), ids); } function _cascadeGroupDismiss(appName) { const ids = M.NotifService.list.filter(n => n.appName === appName).map(n => n.id); if (ids.length === 0) return; _startCascade(_getVisibleNotifDelegates(appName), ids); } function _finishCascade() { const ids = _pendingDismissIds; _pendingDismissIds = []; for (const id of ids) M.NotifService.dismiss(id); } property Component _cascadeTimer: Component { Timer { property var _target property int _delay property bool _isLast interval: _delay running: true onTriggered: { if (_target && _target.dismissVisualOnly) _target.dismissVisualOnly(); if (_isLast) _bulkTimer.createObject(menuWindow, {}); destroy(); } } } property Component _bulkTimer: Component { Timer { interval: 400 // swipe (200) + collapse (150) + margin running: true onTriggered: { menuWindow._finishCascade(); destroy(); } } } // Separator Rectangle { width: menuWindow.contentWidth - 16 height: 1 anchors.horizontalCenter: parent.horizontalCenter color: M.Theme.base03 } // Notification list (scrollable) ListView { id: notifList width: menuWindow.contentWidth height: Math.min(contentHeight, 60 * (M.Modules.notifications.maxVisible || 10)) clip: true boundsBehavior: Flickable.StopAtBounds model: menuWindow._flatModel delegate: Item { id: notifDelegate required property var modelData required property int index readonly property string _type: modelData.type readonly property var _notif: _type === "notif" ? modelData.data : null width: menuWindow.contentWidth height: _targetHeight * _heightScale clip: true opacity: 0 readonly property real _targetHeight: _type === "header" ? 28 : (notifContent.implicitHeight + 12) property real _heightScale: 1 property bool _skipDismiss: false function dismiss() { if (_type !== "notif" || _notif.state === "dismissing") return; _notif.beginDismiss(); _dismissAnim.start(); } function dismissVisualOnly() { if (_type !== "notif" || _notif.state === "dismissing") return; _notif.beginDismiss(); _skipDismiss = true; _dismissAnim.start(); } Component.onCompleted: fadeIn.start() NumberAnimation { id: fadeIn target: notifDelegate property: "opacity" to: 1 duration: 150 easing.type: Easing.OutCubic } // ---- Group header ---- Item { visible: notifDelegate._type === "header" anchors.fill: parent Image { id: _headerIcon anchors.left: parent.left anchors.leftMargin: 10 anchors.verticalCenter: parent.verticalCenter width: M.Theme.fontSize + 2 height: M.Theme.fontSize + 2 source: { if (notifDelegate._type !== "header") return ""; const ic = notifDelegate.modelData.appIcon; if (!ic) return ""; return ic.startsWith("/") ? ic : Quickshell.iconPath(ic, "dialog-information"); } visible: status === Image.Ready fillMode: Image.PreserveAspectFit sourceSize: Qt.size(M.Theme.fontSize + 2, M.Theme.fontSize + 2) asynchronous: true } Text { anchors.left: _headerIcon.visible ? _headerIcon.right : parent.left anchors.leftMargin: _headerIcon.visible ? 6 : 10 anchors.right: _groupDismissBtn.left anchors.rightMargin: 6 anchors.verticalCenter: parent.verticalCenter text: notifDelegate._type === "header" ? (notifDelegate.modelData.appName || "Unknown") : "" color: M.Theme.base05 font.pixelSize: M.Theme.fontSize - 1 font.family: M.Theme.fontFamily font.bold: true elide: Text.ElideRight } Text { id: _groupDismissBtn anchors.right: parent.right anchors.rightMargin: 10 anchors.verticalCenter: parent.verticalCenter text: "\uF1F8" color: _groupDismissArea.containsMouse ? M.Theme.base08 : M.Theme.base04 font.pixelSize: M.Theme.fontSize - 1 font.family: M.Theme.iconFontFamily MouseArea { id: _groupDismissArea anchors.fill: parent anchors.margins: -4 hoverEnabled: true cursorShape: Qt.PointingHandCursor onClicked: { if (notifDelegate._type === "header") menuWindow._cascadeGroupDismiss(notifDelegate.modelData.appName); } } } } // ---- Individual notification ---- Item { id: _notifRow visible: notifDelegate._type === "notif" anchors.fill: parent // Hover + progress bar background Rectangle { anchors.fill: parent anchors.leftMargin: 4 anchors.rightMargin: 4 color: notifArea.containsMouse ? M.Theme.base02 : "transparent" radius: M.Theme.radius Rectangle { visible: (notifDelegate._notif?.hints?.value ?? -1) >= 0 anchors.top: parent.top anchors.bottom: parent.bottom anchors.left: parent.left width: parent.width * Math.min(1, Math.max(0, (notifDelegate._notif?.hints?.value ?? 0) / 100)) color: M.Theme.base02 radius: parent.radius Behavior on width { NumberAnimation { duration: 200 } } } } // Urgency accent bar Rectangle { anchors.left: parent.left anchors.leftMargin: 4 anchors.top: parent.top anchors.topMargin: 4 anchors.bottom: parent.bottom anchors.bottomMargin: 4 width: 2 radius: 1 color: { const u = notifDelegate._notif?.urgency ?? NotificationUrgency.Normal; return u === NotificationUrgency.Critical ? M.Theme.base08 : u === NotificationUrgency.Low ? M.Theme.base04 : M.Theme.base0D; } } // App icon / image Image { id: ncIcon anchors.left: parent.left anchors.leftMargin: 14 anchors.top: parent.top anchors.topMargin: 6 width: 24 height: 24 source: { if (notifDelegate._type !== "notif") return ""; const img = notifDelegate._notif?.image; if (img) return img; const ic = notifDelegate._notif?.appIcon; if (!ic) return ""; return ic.startsWith("/") ? ic : Quickshell.iconPath(ic, "dialog-information"); } visible: status === Image.Ready fillMode: Image.PreserveAspectFit sourceSize: Qt.size(24, 24) asynchronous: true } Column { id: notifContent anchors.left: ncIcon.visible ? ncIcon.right : parent.left anchors.right: dismissBtn.left anchors.top: parent.top anchors.leftMargin: ncIcon.visible ? 6 : 14 anchors.topMargin: 6 spacing: 1 // Summary + time on the same row Row { width: parent.width Text { text: notifDelegate._notif?.summary ?? "" color: M.Theme.base05 font.pixelSize: M.Theme.fontSize font.family: M.Theme.fontFamily font.bold: true elide: Text.ElideRight width: parent.width - _notifTime.implicitWidth - 4 } Text { id: _notifTime text: notifDelegate._notif?.timeStr ?? "" color: M.Theme.base03 font.pixelSize: M.Theme.fontSize - 2 font.family: M.Theme.fontFamily } } Text { width: parent.width text: notifDelegate._notif?.body ?? "" color: M.Theme.base04 font.pixelSize: M.Theme.fontSize - 1 font.family: M.Theme.fontFamily wrapMode: Text.WordWrap maximumLineCount: 2 elide: Text.ElideRight visible: text !== "" } // Actions Row { spacing: 4 visible: !!(notifDelegate._notif?.actions?.length) Repeater { model: notifDelegate._notif?.actions ?? [] delegate: Rectangle { required property var modelData width: actText.implicitWidth + 10 height: actText.implicitHeight + 4 radius: M.Theme.radius color: actArea.containsMouse ? M.Theme.base02 : "transparent" border.color: M.Theme.base03 border.width: 1 Text { id: actText anchors.centerIn: parent text: parent.modelData.text color: M.Theme.base0D font.pixelSize: M.Theme.fontSize - 2 font.family: M.Theme.fontFamily } MouseArea { id: actArea anchors.fill: parent hoverEnabled: true cursorShape: Qt.PointingHandCursor onClicked: { parent.modelData.invoke(); M.NotifService.dismiss(notifDelegate._notif.id); } } } } } } // Per-notification dismiss button Text { id: dismissBtn anchors.right: parent.right anchors.rightMargin: 10 anchors.top: parent.top anchors.topMargin: 8 text: "\uF00D" color: dismissArea.containsMouse ? M.Theme.base08 : M.Theme.base03 font.pixelSize: M.Theme.fontSize - 1 font.family: M.Theme.iconFontFamily MouseArea { id: dismissArea anchors.fill: parent anchors.margins: -4 hoverEnabled: true cursorShape: Qt.PointingHandCursor onClicked: notifDelegate.dismiss() } } // Right-click to dismiss MouseArea { id: notifArea anchors.fill: parent z: -1 hoverEnabled: true acceptedButtons: Qt.RightButton onClicked: notifDelegate.dismiss() } } SequentialAnimation { id: _dismissAnim ParallelAnimation { NumberAnimation { target: notifDelegate property: "x" to: menuWindow.contentWidth duration: 200 easing.type: Easing.InCubic } NumberAnimation { target: notifDelegate property: "opacity" to: 0 duration: 200 easing.type: Easing.InCubic } } NumberAnimation { target: notifDelegate property: "_heightScale" to: 0 duration: 150 easing.type: Easing.OutCubic } ScriptAction { script: { if (notifDelegate._notif && !notifDelegate._skipDismiss) M.NotifService.dismiss(notifDelegate._notif.id); } } } } } // Empty state Text { visible: M.NotifService.count === 0 width: menuWindow.contentWidth height: 48 horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter text: "No notifications" color: M.Theme.base04 font.pixelSize: M.Theme.fontSize font.family: M.Theme.fontFamily } }