Salastil/DankMaterialShell
1
0
Fork 0
mirror of https://github.com/AvengeMedia/DankMaterialShell.git synced 2025-12-08 14:35:39 -05:00
Code Packages Releases Activity

Level up notifications

Browse Source
This commit is contained in:
purian23
2025-07-23 00:04:16 -04:00
parent e94d2af9ae
commit 5b40396a8a
4 changed files with 1060 additions and 3266 deletions
Download Patch File Download Diff File Expand all files Collapse all files

461
Modules/NotificationCenter.qml
View File

@@ -299,26 +299,19 @@ PanelWindow {
delegate: Rectangle {
required property var modelData
readonly property bool expanded: NotificationService.expandedGroups[modelData.key] || false
readonly property string groupKey: modelData.key
width: ListView.view.width
height: {
if (expanded) {
// Calculate expanded height: header (48) + spacing (16) + individual notifications
let headerHeight = 48 + Theme.spacingM;
let notificationHeight = modelData.notifications.length * (60 + Theme.spacingS); // Each notification ~60px + spacing
let totalExpandedHeight = headerHeight + notificationHeight + Theme.spacingL * 2;
return Math.max(totalExpandedHeight, 200); // Minimum expanded height
} else {
// Collapsed height: icon + content + quick reply (if any)
let collapsedHeight = 72 + Theme.spacingS * 2;
// Header height + spacing
if (modelData.latestNotification.notification.hasInlineReply)
collapsedHeight += 36 + Theme.spacingS;
return collapsedHeight + Theme.spacingL * 2;
if (expanded && modelData.count >= 1) {
const baseHeight = (116 * modelData.count) + (12 * (modelData.count - 1));
// Add extra bottom margin for expanded groups
const bottomMargin = modelData.count === 1 ? 50 : (modelData.count < 3 ? 40 : 20);
return baseHeight + bottomMargin;
}
return 116;
}
radius: Theme.cornerRadiusLarge
radius: 12
color: Theme.popupBackground()
border.color: modelData.latestNotification.urgency === 2 ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.3) : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
border.width: modelData.latestNotification.urgency === 2 ? 2 : 1
@@ -336,63 +329,50 @@ PanelWindow {
visible: modelData.latestNotification.urgency === 2
}
// Collapsed view - shows app header and latest notification
Column {
// Collapsed view - show latest notification using popup style
Item {
id: collapsedContent
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
anchors.topMargin: 14 // Reduced from Theme.spacingL (16px) by 10%
anchors.bottomMargin: 14 // Reduced from Theme.spacingL (16px) by 10%
anchors.leftMargin: Theme.spacingL
anchors.rightMargin: Theme.spacingL
spacing: Theme.spacingS
anchors.topMargin: 12
anchors.leftMargin: 16
anchors.rightMargin: 16
height: 92
visible: !expanded
// App header with group info
Item {
width: parent.width
height: 72
// App icon with proper fallback handling
Item {
Rectangle {
id: iconContainer
width: 48
height: 48
readonly property bool hasNotificationImage: modelData.latestNotification.image && modelData.latestNotification.image !== ""
readonly property bool appIconIsImage: modelData.latestNotification.appIcon && (modelData.latestNotification.appIcon.startsWith("file://") || modelData.latestNotification.appIcon.startsWith("http://") || modelData.latestNotification.appIcon.startsWith("https://"))
width: 55
height: 55
radius: 27.5
color: Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.1)
border.color: "transparent"
border.width: 0
anchors.left: parent.left
anchors.verticalCenter: parent.verticalCenter
Rectangle {
width: 48
height: 48
radius: 24
color: Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.1)
border.color: Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.3)
border.width: 1
clip: true
readonly property bool hasNotificationImage: modelData.latestNotification.image && modelData.latestNotification.image !== ""
IconImage {
anchors.fill: parent
anchors.margins: 2
source: {
// Priority 1: Use notification image if available
if (parent.hasNotificationImage) {
if (parent.hasNotificationImage)
return modelData.latestNotification.cleanImage;
}
// Priority 2: Use appIcon - handle URLs directly, use iconPath for icon names
if (modelData.latestNotification.appIcon) {
const appIcon = modelData.latestNotification.appIcon;
if (appIcon.startsWith("file://") || appIcon.startsWith("http://") || appIcon.startsWith("https://")) {
if (appIcon.startsWith("file://") || appIcon.startsWith("http://") || appIcon.startsWith("https://"))
return appIcon;
}
return Quickshell.iconPath(appIcon, "");
}
return "";
}
visible: status === Image.Ready
@@ -410,9 +390,6 @@ PanelWindow {
color: Theme.primaryText
}
}
// Count badge for multiple notifications
Rectangle {
width: 18
height: 18
@@ -431,22 +408,36 @@ PanelWindow {
font.pixelSize: 9
font.weight: Font.Bold
}
}
}
}
Rectangle {
id: textContainer
// Content area with proper spacing
Column {
anchors.left: iconContainer.right
anchors.leftMargin: Theme.spacingM
anchors.leftMargin: 12
anchors.right: controlsContainer.left
anchors.rightMargin: 8 // Reduced to align text with close button
anchors.rightMargin: 0
anchors.top: parent.top
anchors.topMargin: Theme.spacingS
spacing: 6 // Reduced from Theme.spacingS (8px) by 2px
anchors.bottom: parent.bottom
anchors.bottomMargin: 8
color: "transparent"
opacity: 1
border.color: "transparent"
border.width: 0
Item {
width: parent.width
height: parent.height
anchors.top: parent.top
anchors.topMargin: 2
Column {
id: textContent
width: parent.width
spacing: 2
// App name and timestamp
Text {
width: parent.width
text: {
@@ -462,11 +453,10 @@ PanelWindow {
maximumLineCount: 1
}
// Latest notification title (emphasized)
Text {
text: modelData.latestNotification.summary
color: Theme.surfaceText
font.pixelSize: Theme.fontSizeMedium + 1
font.pixelSize: Theme.fontSizeMedium
font.weight: Font.Medium
width: parent.width
elide: Text.ElideRight
@@ -474,78 +464,94 @@ PanelWindow {
visible: text.length > 0
}
// Latest notification body
Text {
text: modelData.latestNotification.body
property bool hasUrls: {
const urlRegex = /(https?:\/\/[^\s]+)/g;
return urlRegex.test(modelData.latestNotification.body);
}
text: {
// Auto-detect and make URLs clickable, with truncation for center notifications
let bodyText = modelData.latestNotification.body;
// No truncation for notification center - show full text
const urlRegex = /(https?:\/\/[^\s]+)/g;
return bodyText.replace(urlRegex, '<a href="$1" style="color: ' + Theme.primary + '; text-decoration: underline;">$1</a>');
}
color: Theme.surfaceVariantText
font.pixelSize: Theme.fontSizeSmall
width: parent.width
elide: Text.ElideRight
maximumLineCount: modelData.count > 1 ? 1 : 2
maximumLineCount: modelData.count > 1 ? 2 : 3
wrapMode: Text.WordWrap
visible: text.length > 0
textFormat: Text.RichText
onLinkActivated: function(link) {
Qt.openUrlExternally(link);
}
}
}
}
}
}
// Controls aligned with app name and timestamp row
Item {
id: controlsContainer
width: 72
height: 32
anchors.right: parent.right
anchors.rightMargin: 0
anchors.top: parent.top
anchors.topMargin: 8
anchors.topMargin: 0
width: modelData.count > 1 ? 40 : 20 // Dynamic width: 40px for expand+close, 20px for close only
height: 24
// Expand button - always takes up space but only visible when needed
Rectangle {
width: 32
height: 32
radius: 16
id: collapsedExpandButton
anchors.left: parent.left
anchors.top: parent.top
width: 20
height: 20
radius: 10
color: expandArea.containsMouse ? Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.08) : "transparent"
visible: modelData.count > 1
DankIcon {
anchors.centerIn: parent
name: "expand_more"
size: 18
name: expanded ? "expand_less" : "expand_more"
size: 14
color: Theme.surfaceText
rotation: expanded ? 180 : 0
Behavior on rotation {
NumberAnimation {
duration: Theme.shortDuration
easing.type: Theme.standardEasing
}
}
}
MouseArea {
id: expandArea
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onClicked: NotificationService.toggleGroupExpansion(modelData.key)
}
}
// Close button - always positioned at the right edge
Rectangle {
width: 32
height: 32
radius: 16
id: closeButton
property bool isHovered: false
anchors.right: parent.right
color: dismissArea.containsMouse ? Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.08) : "transparent"
anchors.top: parent.top
width: 20
height: 20
radius: 10
color: isHovered ? Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.08) : "transparent"
z: 10
DankIcon {
anchors.centerIn: parent
id: closeIcon
name: "close"
size: 16
color: Theme.surfaceText
size: 14
color: closeButton.isHovered ? Theme.primary : Theme.surfaceText
anchors.centerIn: parent
}
MouseArea {
@@ -554,140 +560,19 @@ PanelWindow {
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
z: 11
onEntered: {
closeButton.isHovered = true;
}
onExited: {
closeButton.isHovered = false;
}
onClicked: NotificationService.dismissGroup(modelData.key)
}
}
}
}
// Action buttons for collapsed view
Row {
width: parent.width
spacing: Theme.spacingS
visible: modelData.latestNotification.actions && modelData.latestNotification.actions.length > 0 && !modelData.latestNotification.notification.hasInlineReply && !expanded
Repeater {
model: modelData.latestNotification.actions ? modelData.latestNotification.actions.slice(0, 2) : []
delegate: Rectangle {
width: Math.min((parent.width - (parent.spacing * (parent.children.length - 1))) / parent.children.length, 120)
height: 32
radius: 16
color: collapsedActionArea.containsMouse ? Theme.primary : Theme.surfaceContainer
border.color: collapsedActionArea.containsMouse ? "transparent" : Theme.outline
border.width: 1
Text {
anchors.centerIn: parent
text: modelData.text || ""
color: collapsedActionArea.containsMouse ? Theme.primaryText : Theme.surfaceText
font.pixelSize: Theme.fontSizeSmall
font.weight: Font.Medium
elide: Text.ElideRight
maximumLineCount: 1
width: parent.width - 16
horizontalAlignment: Text.AlignHCenter
}
MouseArea {
id: collapsedActionArea
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onClicked: {
if (modelData.invoke) {
modelData.invoke();
}
}
}
Behavior on color {
ColorAnimation {
duration: Theme.shortDuration
easing.type: Theme.standardEasing
}
}
}
}
}
// Enhanced quick reply for conversations
Row {
width: parent.width
spacing: Theme.spacingS
visible: modelData.latestNotification.notification.hasInlineReply && !expanded
Rectangle {
width: parent.width - 60
height: 36
radius: 18
color: Theme.surfaceContainer
border.color: quickReplyField.activeFocus ? Theme.primary : Theme.outline
border.width: 1
TextField {
id: quickReplyField
anchors.fill: parent
anchors.margins: Theme.spacingS
placeholderText: modelData.latestNotification.notification.inlineReplyPlaceholder || "Quick reply..."
color: Theme.surfaceText
font.pixelSize: Theme.fontSizeSmall
onAccepted: {
if (text.length > 0) {
modelData.latestNotification.notification.sendInlineReply(text);
text = "";
}
}
background: Item {
}
}
}
Rectangle {
width: 52
height: 36
radius: 18
color: quickReplyField.text.length > 0 ? Theme.primary : Theme.surfaceContainer
border.color: quickReplyField.text.length > 0 ? "transparent" : Theme.outline
border.width: quickReplyField.text.length > 0 ? 0 : 1
DankIcon {
anchors.centerIn: parent
name: "send"
size: 16
color: quickReplyField.text.length > 0 ? Theme.primaryText : Theme.surfaceVariantText
}
MouseArea {
anchors.fill: parent
enabled: quickReplyField.text.length > 0
cursorShape: enabled ? Qt.PointingHandCursor : Qt.ArrowCursor
onClicked: {
modelData.latestNotification.notification.sendInlineReply(quickReplyField.text);
quickReplyField.text = "";
}
}
Behavior on color {
ColorAnimation {
duration: Theme.shortDuration
easing.type: Theme.standardEasing
}
}
}
}
}
// Expanded view - shows all notifications stacked
Column {
id: expandedContent
@@ -737,27 +622,29 @@ PanelWindow {
font.pixelSize: 10
font.weight: Font.Bold
}
}
}
// Controls container - fixed position on right
Item {
width: 72
height: 32
width: 48
height: 24
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
Rectangle {
width: 32
height: 32
radius: 16
width: 20
height: 20
radius: 10
anchors.left: parent.left
color: collapseAreaTop.containsMouse ? Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.08) : "transparent"
DankIcon {
anchors.centerIn: parent
name: "expand_less"
size: 18
size: 14
color: Theme.surfaceText
}
@@ -773,16 +660,16 @@ PanelWindow {
}
Rectangle {
width: 32
height: 32
radius: 16
width: 20
height: 20
radius: 10
anchors.right: parent.right
color: dismissAllAreaTop.containsMouse ? Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.08) : "transparent"
DankIcon {
anchors.centerIn: parent
name: "close"
size: 16
size: 14
color: Theme.surfaceText
}
@@ -798,8 +685,8 @@ PanelWindow {
}
}
}
}
// Individual notifications
Column {
@@ -830,6 +717,8 @@ PanelWindow {
height: Math.max(32, contentColumn.height)
Rectangle {
readonly property bool hasNotificationImage: modelData.image && modelData.image !== ""
width: 32
height: 32
radius: 16
@@ -839,26 +728,22 @@ PanelWindow {
border.color: Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.2)
border.width: 1
readonly property bool hasNotificationImage: modelData.image && modelData.image !== ""
IconImage {
anchors.fill: parent
anchors.margins: 1
source: {
// Priority 1: Use notification image if available
if (parent.hasNotificationImage) {
if (parent.hasNotificationImage)
return modelData.cleanImage;
}
// Priority 2: Use appIcon - handle URLs directly, use iconPath for icon names
if (modelData.appIcon) {
const appIcon = modelData.appIcon;
if (appIcon.startsWith("file://") || appIcon.startsWith("http://") || appIcon.startsWith("https://")) {
if (appIcon.startsWith("file://") || appIcon.startsWith("http://") || appIcon.startsWith("https://"))
return appIcon;
}
return Quickshell.iconPath(appIcon, "");
}
return "";
}
visible: status === Image.Ready
@@ -889,19 +774,19 @@ PanelWindow {
// Expand/collapse button for 2nd tier
Rectangle {
width: 24
height: 24
radius: 12
color: individualExpandArea.containsMouse ? Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.08) : "transparent"
visible: modelData.body && modelData.body.length > 50 // Only show if body text is long enough
property bool isExpanded: NotificationService.expandedMessages[modelData.notification.id] || false
width: 20
height: 20
radius: 10
color: individualExpandArea.containsMouse ? Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.08) : "transparent"
visible: (modelData.body || "").length > 80 // Only show if body text is long enough
DankIcon {
anchors.centerIn: parent
name: parent.isExpanded ? "expand_less" : "expand_more"
size: 12
color: Theme.surfaceVariantText
color: Theme.surfaceText
}
MouseArea {
@@ -912,20 +797,21 @@ PanelWindow {
cursorShape: Qt.PointingHandCursor
onClicked: NotificationService.toggleMessageExpansion(modelData.notification.id)
}
}
// Individual dismiss button
Rectangle {
width: 24
height: 24
radius: 12
width: 20
height: 20
radius: 10
color: individualDismissArea.containsMouse ? Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.08) : "transparent"
DankIcon {
anchors.centerIn: parent
name: "close"
size: 12
color: Theme.surfaceVariantText
color: individualDismissArea.containsMouse ? Theme.primary : Theme.surfaceText
}
MouseArea {
@@ -936,34 +822,39 @@ PanelWindow {
cursorShape: Qt.PointingHandCursor
onClicked: NotificationService.dismissNotification(modelData)
}
}
}
Column {
id: contentColumn
}
Item {
anchors.left: parent.left
anchors.leftMargin: 44
anchors.right: parent.right
anchors.rightMargin: 24 // Align text with close button
anchors.top: parent.top
spacing: 2 // Reduced from Theme.spacingXS (4px) by 2px
height: contentColumn.height
Column {
id: contentColumn
property bool isMessageExpanded: NotificationService.expandedMessages[modelData.notification.id] || false
width: parent.width
spacing: 2 // Reduced from Theme.spacingXS (4px) by 2px
// Title • timestamp format
Text {
text: {
const summary = modelData.summary || "";
const timeStr = modelData.timeStr || "";
if (summary && timeStr) {
if (summary && timeStr)
return summary + " • " + timeStr;
} else if (summary) {
else if (summary)
return summary;
} else {
else
return "Message • " + timeStr;
}
}
color: Theme.surfaceText
font.pixelSize: Theme.fontSizeSmall
font.weight: Font.Medium
@@ -984,57 +875,28 @@ PanelWindow {
visible: text.length > 0
}
// Individual action buttons
Row {
width: parent.width
spacing: Theme.spacingXS
visible: modelData.actions && modelData.actions.length > 0 && !modelData.notification.hasInlineReply
Repeater {
model: modelData.actions ? modelData.actions.slice(0, 2) : []
delegate: Rectangle {
width: Math.min((parent.width - (parent.spacing * (parent.children.length - 1))) / parent.children.length, 80)
height: 24
radius: 12
color: expandedActionArea.containsMouse ? Theme.primary : Theme.surfaceContainer
border.color: expandedActionArea.containsMouse ? "transparent" : Theme.outline
border.width: 1
Text {
anchors.centerIn: parent
text: modelData.text || ""
color: expandedActionArea.containsMouse ? Theme.primaryText : Theme.surfaceText
font.pixelSize: 10
font.weight: Font.Medium
elide: Text.ElideRight
maximumLineCount: 1
width: parent.width - 8
horizontalAlignment: Text.AlignHCenter
}
// Clickable area for View action on individual message
MouseArea {
id: expandedActionArea
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onClicked: {
if (modelData.invoke) {
modelData.invoke();
}
}
}
// Find and invoke the View action
if (modelData.actions) {
for (const action of modelData.actions) {
if (action.text && action.text.toLowerCase() === "view") {
if (action.invoke)
action.invoke();
Behavior on color {
ColorAnimation {
duration: Theme.shortDuration
easing.type: Theme.standardEasing
break;
}
}
}
}
}
// Individual inline reply
// COMMENTED OUT: Individual inline reply
/*
Row {
width: parent.width
spacing: Theme.spacingS
@@ -1096,8 +958,10 @@ PanelWindow {
}
}
*/
}
}
}
@@ -1140,7 +1004,6 @@ PanelWindow {
Item {
width: parent.width
height: 200
anchors.centerIn: parent
visible: NotificationService.notifications.length === 0
Column {

782
Modules/NotificationPopup.qml
View File

@@ -16,7 +16,7 @@ PanelWindow {
WlrLayershell.keyboardFocus: WlrKeyboardFocus.None
color: "transparent"
implicitWidth: 400
implicitHeight: notificationsList.height + 32
implicitHeight: Math.min(500, notificationsList.height + 32)
anchors {
top: true
@@ -28,25 +28,56 @@ PanelWindow {
right: 12
}
Column {
id: notificationsList
Rectangle {
anchors.top: parent.top
anchors.right: parent.right
anchors.topMargin: 16
anchors.rightMargin: 16
spacing: Theme.spacingM
anchors.bottomMargin: 16
width: 380
height: Math.min(500 - 32, notificationsList.height + 32) // Match notification center height minus margins
color: "transparent"
radius: 12
clip: true
ScrollView {
anchors.fill: parent
clip: true
Column {
id: notificationsList
width: parent.width
spacing: 12
Repeater {
model: NotificationService.groupedPopups
delegate: Rectangle {
required property var modelData
readonly property bool expanded: NotificationService.expandedGroups[modelData.key] || false
readonly property string groupKey: modelData.key
readonly property bool isPopup: modelData.latestNotification.popup
readonly property int expireTimeout: modelData.latestNotification.notification.expireTimeout
property string stableGroupKey: ""
Component.onCompleted: {
stableGroupKey = modelData.key;
}
width: parent.width
height: content.height + Theme.spacingL * 2
radius: Theme.cornerRadiusLarge
height: {
if (expanded && modelData.count >= 1) {
const baseHeight = (116 * modelData.count) + (12 * (modelData.count - 1));
// Add extra bottom margin for View/Dismiss buttons when there are fewer than 3 messages
const bottomMargin = modelData.count === 1 ? 70 : (modelData.count < 3 ? 50 : 0);
return baseHeight + bottomMargin;
}
return 116;
}
radius: 12
color: Theme.popupBackground()
border.color: modelData.latestNotification.urgency === 2 ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.3) : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
border.width: modelData.latestNotification.urgency === 2 ? 2 : 1
@@ -63,48 +94,50 @@ PanelWindow {
visible: modelData.latestNotification.urgency === 2
}
Row {
id: content
// Collapsed view - show only latest notification
Item {
id: collapsedContent
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
anchors.margins: Theme.spacingL
spacing: Theme.spacingM
height: Math.max(48, textContent.height)
anchors.topMargin: 12
anchors.leftMargin: 16
anchors.rightMargin: 16
height: 86
visible: !expanded
Rectangle {
width: 48
height: 48
radius: 24
color: Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.1)
border.color: Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.3)
border.width: 1
anchors.verticalCenter: parent.verticalCenter
id: iconContainer
readonly property bool hasNotificationImage: modelData.latestNotification.image && modelData.latestNotification.image !== ""
readonly property bool appIconIsImage: modelData.latestNotification.appIcon &&
(modelData.latestNotification.appIcon.startsWith("file://") ||
modelData.latestNotification.appIcon.startsWith("http://") ||
modelData.latestNotification.appIcon.startsWith("https://"))
readonly property bool appIconIsImage: modelData.latestNotification.appIcon && (modelData.latestNotification.appIcon.startsWith("file://") || modelData.latestNotification.appIcon.startsWith("http://") || modelData.latestNotification.appIcon.startsWith("https://"))
width: 55
height: 55
radius: 27.5
color: Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.1)
border.color: "transparent"
border.width: 0
anchors.left: parent.left
anchors.verticalCenter: parent.verticalCenter
IconImage {
anchors.fill: parent
anchors.margins: 2
source: {
// Priority 1: Use notification image if available
if (parent.hasNotificationImage) {
if (parent.hasNotificationImage)
return modelData.latestNotification.cleanImage;
}
// Priority 2: Use appIcon - handle URLs directly, use iconPath for icon names
if (modelData.latestNotification.appIcon) {
const appIcon = modelData.latestNotification.appIcon;
if (appIcon.startsWith("file://") || appIcon.startsWith("http://") || appIcon.startsWith("https://")) {
if (appIcon.startsWith("file://") || appIcon.startsWith("http://") || appIcon.startsWith("https://"))
return appIcon;
}
return Quickshell.iconPath(appIcon, "");
}
return "";
}
visible: status === Image.Ready
@@ -143,11 +176,32 @@ PanelWindow {
}
}
Rectangle {
id: textContainer
anchors.left: iconContainer.right
anchors.leftMargin: 12
anchors.right: controlsContainer.left
anchors.rightMargin: 0
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.bottomMargin: 8
color: "transparent"
opacity: 1
border.color: "transparent"
border.width: 0
Item {
width: parent.width
height: parent.height
anchors.top: parent.top
anchors.topMargin: 2
Column {
id: textContent
anchors.verticalCenter: parent.verticalCenter
spacing: 4
width: parent.width - 48 - Theme.spacingM - controls.width - Theme.spacingS
width: parent.width
spacing: 2
Text {
width: parent.width
@@ -176,7 +230,21 @@ PanelWindow {
}
Text {
text: modelData.latestNotification.body
property bool hasUrls: {
const urlRegex = /(https?:\/\/[^\s]+)/g;
return urlRegex.test(modelData.latestNotification.body);
}
text: {
// Auto-detect and make URLs clickable, with truncation for popups
let bodyText = modelData.latestNotification.body;
// Truncate to 108 characters max for popup notifications
if (bodyText.length > 105)
bodyText = bodyText.substring(0, 102) + "...";
const urlRegex = /(https?:\/\/[^\s]+)/g;
return bodyText.replace(urlRegex, '<a href="$1" style="color: ' + Theme.primary + '; text-decoration: underline;">$1</a>');
}
color: Theme.surfaceVariantText
font.pixelSize: Theme.fontSizeSmall
width: parent.width
@@ -184,140 +252,40 @@ PanelWindow {
maximumLineCount: modelData.count > 1 ? 1 : 2
wrapMode: Text.WordWrap
visible: text.length > 0
}
// Action buttons
Row {
width: parent.width
spacing: Theme.spacingS
visible: modelData.latestNotification.actions && modelData.latestNotification.actions.length > 0 && !modelData.latestNotification.notification.hasInlineReply
Repeater {
model: modelData.latestNotification.actions ? modelData.latestNotification.actions.slice(0, 3) : []
delegate: Rectangle {
width: Math.min((parent.width - (parent.spacing * (parent.children.length - 1))) / parent.children.length, 120)
height: 32
radius: 16
color: actionArea.containsMouse ? Theme.primary : Theme.surfaceContainer
border.color: actionArea.containsMouse ? "transparent" : Theme.outline
border.width: 1
Text {
anchors.centerIn: parent
text: modelData.text || ""
color: actionArea.containsMouse ? Theme.primaryText : Theme.surfaceText
font.pixelSize: Theme.fontSizeSmall
font.weight: Font.Medium
elide: Text.ElideRight
maximumLineCount: 1
width: parent.width - 16
horizontalAlignment: Text.AlignHCenter
}
MouseArea {
id: actionArea
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onClicked: {
if (modelData.invoke) {
modelData.invoke();
}
}
}
Behavior on color {
ColorAnimation {
duration: Theme.shortDuration
easing.type: Theme.standardEasing
textFormat: Text.RichText
onLinkActivated: function(link) {
Qt.openUrlExternally(link);
}
}
}
}
}
// Inline reply
Row {
width: parent.width
spacing: Theme.spacingS
visible: modelData.latestNotification.notification.hasInlineReply
Item {
id: controlsContainer
anchors.right: parent.right
anchors.rightMargin: 0
anchors.top: parent.top
anchors.topMargin: 0
width: modelData.count > 1 ? 40 : 20 // Dynamic width: 40px for expand+close, 20px for close only
height: 24
// Expand button - always takes up space but only visible when needed
Rectangle {
width: parent.width - 60
height: 36
radius: 18
color: Theme.surfaceContainer
border.color: quickReplyField.activeFocus ? Theme.primary : Theme.outline
border.width: 1
TextField {
id: quickReplyField
anchors.fill: parent
anchors.margins: Theme.spacingS
placeholderText: modelData.latestNotification.notification.inlineReplyPlaceholder || "Quick reply..."
color: Theme.surfaceText
font.pixelSize: Theme.fontSizeSmall
onAccepted: {
if (text.length > 0) {
modelData.latestNotification.notification.sendInlineReply(text);
text = "";
}
}
background: Item {}
}
}
Rectangle {
width: 52
height: 36
radius: 18
color: quickReplyField.text.length > 0 ? Theme.primary : Theme.surfaceContainer
border.color: quickReplyField.text.length > 0 ? "transparent" : Theme.outline
border.width: quickReplyField.text.length > 0 ? 0 : 1
DankIcon {
anchors.centerIn: parent
name: "send"
size: 16
color: quickReplyField.text.length > 0 ? Theme.primaryText : Theme.surfaceVariantText
}
MouseArea {
anchors.fill: parent
enabled: quickReplyField.text.length > 0
cursorShape: enabled ? Qt.PointingHandCursor : Qt.ArrowCursor
onClicked: {
modelData.latestNotification.notification.sendInlineReply(quickReplyField.text);
quickReplyField.text = "";
}
}
Behavior on color {
ColorAnimation {
duration: Theme.shortDuration
easing.type: Theme.standardEasing
}
}
}
}
}
Row {
id: controls
anchors.verticalCenter: parent.verticalCenter
spacing: 8
Rectangle {
width: 32
height: 32
radius: 16
id: collapsedExpandButton
anchors.left: parent.left
anchors.top: parent.top
width: 20
height: 20
radius: 10
color: expandArea.containsMouse ? Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.08) : "transparent"
visible: modelData.count > 1
DankIcon {
anchors.centerIn: parent
name: "expand_more"
size: 18
name: expanded ? "expand_less" : "expand_more"
size: 14
color: Theme.surfaceText
}
@@ -330,21 +298,145 @@ PanelWindow {
}
}
// Close button - always positioned at the right edge
Rectangle {
width: 32
height: 32
radius: 16
color: dismissArea.containsMouse ? Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.08) : "transparent"
id: closeButton
property bool isHovered: false
anchors.right: parent.right
anchors.top: parent.top
width: 20
height: 20
radius: 10
color: isHovered ? Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.08) : "transparent"
z: 10
DankIcon {
anchors.centerIn: parent
id: closeIcon
name: "close"
size: 16
color: Theme.surfaceText
size: 14
color: closeButton.isHovered ? Theme.primary : Theme.surfaceText
anchors.centerIn: parent
}
MouseArea {
id: dismissArea
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
z: 11
onEntered: {
closeButton.isHovered = true;
dismissTimer.stop();
}
onExited: {
closeButton.isHovered = false;
if (modelData.latestNotification.popup && !cardHoverArea.containsMouse) {
dismissTimer.restart();
}
}
onClicked: NotificationService.dismissGroup(modelData.key)
}
}
}
}
// Expanded view - show all notifications in group
Item {
anchors.fill: parent
anchors.margins: 16
visible: expanded
Column {
id: expandedColumn
width: parent.width
spacing: 8
// Header with app name and count
Item {
width: parent.width
height: 32
Row {
anchors.left: parent.left
anchors.verticalCenter: parent.verticalCenter
spacing: 8
Text {
text: modelData.appName
color: Theme.surfaceText
font.pixelSize: Theme.fontSizeLarge
font.weight: Font.Bold
}
Rectangle {
width: 20
height: 20
radius: 10
color: Theme.primary
visible: modelData.count > 1
Text {
anchors.centerIn: parent
text: modelData.count.toString()
color: Theme.primaryText
font.pixelSize: 10
font.weight: Font.Bold
}
}
}
Item {
id: expandedControls
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
width: 56
height: 24
Row {
anchors.fill: parent
spacing: 8
Rectangle {
width: 20
height: 20
radius: 10
color: expandedExpandArea.containsMouse ? Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.08) : "transparent"
DankIcon {
anchors.centerIn: parent
name: "expand_less"
size: 14
color: Theme.surfaceText
}
MouseArea {
id: expandedExpandArea
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onClicked: NotificationService.toggleGroupExpansion(modelData.key)
}
}
Rectangle {
width: 20
height: 20
radius: 10
color: expandedCloseArea.containsMouse ? Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.08) : "transparent"
DankIcon {
anchors.centerIn: parent
name: "close"
size: 14
color: expandedCloseArea.containsMouse ? Theme.primary : Theme.surfaceText
}
MouseArea {
id: expandedCloseArea
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
@@ -353,32 +445,390 @@ PanelWindow {
}
}
}
}
// Scrollable list of individual notifications
Rectangle {
width: parent.width
height: Math.min(400, modelData.notifications.length * 90) // Fixed height constraint for inner scroll
radius: 8
color: "transparent"
border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.1)
border.width: 1
clip: true
ScrollView {
anchors.fill: parent
clip: true
Column {
width: parent.width
spacing: 8
Repeater {
model: modelData.notifications
delegate: Rectangle {
required property var modelData
readonly property bool messageExpanded: NotificationService.expandedMessages[modelData.notification.id] || false
width: parent.width
height: messageExpanded ? Math.min(120, 50 + (bodyText.contentHeight || 0)) : 80
radius: 8
color: Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b, 0.3)
border.color: "transparent"
border.width: 0
Item {
anchors.fill: parent
anchors.margins: 12
// Small icon for individual message
Rectangle {
id: messageIcon
width: 32
height: 32
radius: 16
color: Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.1)
anchors.left: parent.left
anchors.top: parent.top
readonly property bool hasNotificationImage: modelData.image && modelData.image !== ""
readonly property bool appIconIsImage: modelData.appIcon && (modelData.appIcon.startsWith("file://") || modelData.appIcon.startsWith("http://") || modelData.appIcon.startsWith("https://"))
IconImage {
anchors.fill: parent
anchors.margins: 2
source: {
// Priority 1: Use notification image if available
if (parent.hasNotificationImage)
return modelData.cleanImage;
// Priority 2: Use appIcon - handle URLs directly, use iconPath for icon names
if (modelData.appIcon) {
const appIcon = modelData.appIcon;
if (appIcon.startsWith("file://") || appIcon.startsWith("http://") || appIcon.startsWith("https://"))
return appIcon;
return Quickshell.iconPath(appIcon, "");
}
return "";
}
visible: status === Image.Ready
}
Text {
anchors.centerIn: parent
visible: !parent.hasNotificationImage && (!modelData.appIcon || modelData.appIcon === "")
text: {
const appName = modelData.appName || "?";
return appName.charAt(0).toUpperCase();
}
font.pixelSize: 14
font.weight: Font.Bold
color: Theme.primaryText
}
}
// Message content
Column {
anchors.left: messageIcon.right
anchors.leftMargin: 12
anchors.right: messageControls.left
anchors.rightMargin: 0
anchors.top: parent.top
spacing: 4
// App Title • Timestamp line
Text {
width: parent.width
text: {
const appName = modelData.appName || "";
const timeStr = modelData.timeStr || "";
if (timeStr.length > 0) {
return appName + " • " + timeStr;
} else {
return appName;
}
}
color: Theme.surfaceVariantText
font.pixelSize: Theme.fontSizeSmall
font.weight: Font.Medium
elide: Text.ElideRight
maximumLineCount: 1
}
// Summary line (if exists)
Text {
width: parent.width
text: modelData.summary || ""
color: Theme.surfaceText
font.pixelSize: Theme.fontSizeMedium
font.weight: Font.Medium
elide: Text.ElideRight
maximumLineCount: 1
visible: text.length > 0
}
// Body text with expand capability
Text {
id: bodyText
width: parent.width
text: {
const body = modelData.body || "";
if (messageExpanded) {
// Show up to 500 characters when expanded
return body.length > 500 ? body.substring(0, 497) + "..." : body;
} else {
// Show truncated version when collapsed
return body.length > 80 ? body.substring(0, 77) + "..." : body;
}
}
color: Theme.surfaceVariantText
font.pixelSize: Theme.fontSizeSmall
elide: messageExpanded ? Text.ElideNone : Text.ElideRight
maximumLineCount: messageExpanded ? -1 : 2
wrapMode: Text.WordWrap
visible: text.length > 0
}
}
// Message controls (expand and close buttons)
Row {
id: messageControls
anchors.right: parent.right
anchors.top: parent.top
spacing: 4
// Expand/collapse button for individual message
Rectangle {
id: expandButton
width: 20
height: 20
radius: 10
color: expandMessageArea.containsMouse ? Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.08) : "transparent"
visible: (modelData.body || "").length > 80
DankIcon {
anchors.centerIn: parent
name: messageExpanded ? "expand_less" : "expand_more"
size: 12
color: Theme.surfaceText
}
MouseArea {
id: expandMessageArea
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onClicked: NotificationService.toggleMessageExpansion(modelData.notification.id)
}
}
// Close button for individual message
Rectangle {
width: 20
height: 20
radius: 10
color: closeMessageArea.containsMouse ? Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.08) : "transparent"
DankIcon {
anchors.centerIn: parent
name: "close"
size: 12
color: closeMessageArea.containsMouse ? Theme.primary : Theme.surfaceText
}
MouseArea {
id: closeMessageArea
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onClicked: NotificationService.dismissNotification(modelData)
}
}
}
}
Behavior on height {
NumberAnimation {
duration: Theme.shortDuration
easing.type: Theme.standardEasing
}
}
}
}
}
}
}
}
}
// Main hover area for persistence
MouseArea {
id: cardHoverArea
anchors.fill: parent
hoverEnabled: true
acceptedButtons: Qt.NoButton
propagateComposedEvents: true
onEntered: dismissTimer.stop()
z: 0
onEntered: {
dismissTimer.stop();
}
onExited: {
if (modelData.latestNotification.popup)
if (modelData.latestNotification.popup) {
dismissTimer.restart();
}
}
}
// View button positioned at bottom-right of notification card
Rectangle {
id: viewButton
property bool isHovered: false
anchors.right: dismissButton.left
anchors.rightMargin: 4
anchors.bottom: parent.bottom
anchors.bottomMargin: 8
width: viewText.width + 16
height: viewText.height + 8
radius: 6
color: isHovered ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.1) : "transparent"
z: 10
Text {
id: viewText
text: "View"
color: viewButton.isHovered ? Theme.primary : Theme.surfaceVariantText
font.pixelSize: Theme.fontSizeSmall
font.weight: Font.Medium
anchors.centerIn: parent
}
MouseArea {
id: viewArea
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
z: 11
onEntered: {
viewButton.isHovered = true;
dismissTimer.stop();
}
onExited: {
viewButton.isHovered = false;
if (modelData.latestNotification.popup && !cardHoverArea.containsMouse) {
dismissTimer.restart();
}
}
onClicked: {
// Handle navigation to source message
if (modelData.latestNotification.actions) {
for (const action of modelData.latestNotification.actions) {
if (action.text && action.text.toLowerCase() === "view") {
if (action.invoke) {
action.invoke();
return;
}
}
}
// If no View action, try the first available action
if (modelData.latestNotification.actions.length > 0) {
const firstAction = modelData.latestNotification.actions[0];
if (firstAction.invoke) {
firstAction.invoke();
}
}
}
}
}
}
// Dismiss button positioned at bottom-right of notification card
Rectangle {
id: dismissButton
property bool isHovered: false
anchors.right: parent.right
anchors.rightMargin: 16
anchors.bottom: parent.bottom
anchors.bottomMargin: 8
width: dismissText.width + 16
height: dismissText.height + 8
radius: 6
color: isHovered ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.1) : "transparent"
z: 10
Text {
id: dismissText
text: "Dismiss"
color: dismissButton.isHovered ? Theme.primary : Theme.surfaceVariantText
font.pixelSize: Theme.fontSizeSmall
font.weight: Font.Medium
anchors.centerIn: parent
}
MouseArea {
id: popupDismissArea
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
z: 11
onEntered: {
dismissButton.isHovered = true;
dismissTimer.stop();
}
onExited: {
dismissButton.isHovered = false;
if (modelData.latestNotification.popup && !cardHoverArea.containsMouse) {
dismissTimer.restart();
}
}
onClicked: {
// Move to notification center (don't close)
const groupKey = stableGroupKey || modelData.key;
console.log("Manually hiding notification group from popup:", groupKey);
modelData.latestNotification.popup = false;
// Clear expansion state when manually hiding from popup
NotificationService.clearGroupExpansionState(groupKey);
}
}
}
Timer {
id: dismissTimer
running: modelData.latestNotification.popup
interval: modelData.latestNotification.notification.expireTimeout > 0 ? modelData.latestNotification.notification.expireTimeout * 1000 : 5000
running: isPopup
interval: 5000 // Fixed 5-second timer for all notifications
onTriggered: {
if (!parent.children[parent.children.length - 2].containsMouse) {
// Move to notification center (don't dismiss completely)
const groupKey = stableGroupKey || modelData.key;
console.log("Auto-hiding notification group from popup:", groupKey);
modelData.latestNotification.popup = false;
// Clear expansion state when hiding from popup
NotificationService.clearGroupExpansionState(groupKey);
}
}
// Watch for changes to latest notification (new message joins group)
property var currentLatestNotification: modelData.latestNotification
onCurrentLatestNotificationChanged: {
if (isPopup && !cardHoverArea.containsMouse) {
dismissTimer.restart();
}
}
transform: Translate {
x: root.visible ? 0 : 400
Behavior on x {
NumberAnimation {
duration: 350
@@ -396,6 +846,8 @@ PanelWindow {
}
}
}
}
}
Behavior on implicitHeight {
NumberAnimation {

94
Services/NotificationService.qml
View File

@@ -60,6 +60,8 @@ Singleton {
});
if (wrapper) {
const groupKey = getGroupKey(wrapper);
console.log("New notification added to group:", groupKey, "Expansion state:", expandedGroups[groupKey] || false);
// Handle media notification replacement
if (wrapper.isMedia) {
handleMediaNotification(wrapper);
@@ -67,19 +69,7 @@ Singleton {
root.notifications.push(wrapper);
}
// Auto-expand conversation groups with new messages
if (wrapper.isConversation && notifications.length > 1) {
const groupKey = getGroupKey(wrapper);
const existingGroup = groupedNotifications.find(group => group.key === groupKey);
if (existingGroup && existingGroup.count > 1) {
let newExpandedGroups = {};
for (const key in expandedGroups) {
newExpandedGroups[key] = expandedGroups[key];
}
newExpandedGroups[groupKey] = true;
expandedGroups = newExpandedGroups;
}
}
// Don't auto-expand groups - let user control expansion state
// Add to persistent storage (only for non-transient notifications)
if (!notif.transient) {
@@ -216,18 +206,7 @@ Singleton {
readonly property Timer timer: Timer {
running: wrapper.popup
interval: {
if (wrapper.notification.expireTimeout > 0) {
return wrapper.notification.expireTimeout * 1000;
}
return NotificationSettings.getAppTimeout(wrapper.appName);
}
onTriggered: {
wrapper.popup = false;
}
}
readonly property Connections conn: Connections {
target: wrapper.notification.Retainable
@@ -235,7 +214,19 @@ Singleton {
function onDropped(): void {
const index = root.notifications.indexOf(wrapper);
if (index !== -1) {
// Get the group key before removing the notification
const groupKey = getGroupKey(wrapper);
root.notifications.splice(index, 1);
// Check if this group now has no notifications left
const remainingInGroup = root.notifications.filter(n => getGroupKey(n) === groupKey);
if (remainingInGroup.length === 0) {
// Immediately clear expansion state for empty group
clearGroupExpansionState(groupKey);
}
// Clean up all expansion states
cleanupExpansionStates();
}
}
@@ -257,6 +248,7 @@ Singleton {
for (const notif of notificationsCopy) {
notif.notification.dismiss();
}
// Note: Expansion states will be cleaned up by onDropped as notifications are removed
}
function dismissNotification(wrapper) {
@@ -411,13 +403,57 @@ Singleton {
}
function dismissGroup(groupKey) {
// Use array iteration to avoid spread operator issues
for (let i = notifications.length - 1; i >= 0; i--) {
const notif = notifications[i];
if (getGroupKey(notif) === groupKey) {
console.log("Completely dismissing group:", groupKey);
const group = groupedNotifications.find(g => g.key === groupKey);
if (group) {
for (const notif of group.notifications) {
notif.notification.dismiss();
}
}
// Note: Expansion state will be cleaned up by onDropped when notifications are removed
}
function clearGroupExpansionState(groupKey) {
// Immediately remove expansion state for a specific group
let newExpandedGroups = {};
for (const key in expandedGroups) {
if (key !== groupKey && expandedGroups[key]) {
newExpandedGroups[key] = true;
}
}
expandedGroups = newExpandedGroups;
console.log("Cleared expansion state for group:", groupKey);
}
function cleanupExpansionStates() {
// Get all current group keys and message IDs
const currentGroupKeys = new Set(groupedNotifications.map(g => g.key));
const currentMessageIds = new Set();
for (const group of groupedNotifications) {
for (const notif of group.notifications) {
currentMessageIds.add(notif.notification.id);
}
}
// Clean up expanded groups that no longer exist
let newExpandedGroups = {};
for (const key in expandedGroups) {
if (currentGroupKeys.has(key) && expandedGroups[key]) {
newExpandedGroups[key] = true;
}
}
expandedGroups = newExpandedGroups;
// Clean up expanded messages that no longer exist
let newExpandedMessages = {};
for (const messageId in expandedMessages) {
if (currentMessageIds.has(messageId) && expandedMessages[messageId]) {
newExpandedMessages[messageId] = true;
}
}
expandedMessages = newExpandedMessages;
}
function toggleMessageExpansion(messageId) {

2557
Tests/Notifications.md
View File

File diff suppressed because it is too large Load Diff