feat(ui): undo dismiss notification

Dismissing a notification now optimistically collapses it with a 280
ms animation and shows an "Undo" bar for 4 s before the DELETE request
is actually fired. The item is kept out of the polling refresh during
that grace period so it doesn't reappear and then vanish again.

* NotificationItem.vue: dismiss now emits a "dismiss" event with the
  notification instead of issuing the DELETE itself
* NotificationsApp.vue: handles the dismiss/undo state machine, tracks
  collapsing IDs, filters the polling response while a dismiss is
  pending, and re-inserts in order if the user undoes after the
  collapse timer already removed the item
* onRemove(index) becomes onRemove(notification) so it can also be
  called from the dismiss flush path where index is unknown
* styles.scss: undo bar + collapse keyframe

Signed-off-by: Frank Karlitschek <frank@nextcloud.com>
Signed-off-by: Frank Karlitschek <karlitschek@users.noreply.github.com>

Author: karlitschek

src/Components/NotificationItem.vue

@@ -95,7 +95,6 @@ import axios from '@nextcloud/axios'
 import { showError } from '@nextcloud/dialogs'
 import { emit } from '@nextcloud/event-bus'
 import { t } from '@nextcloud/l10n'
-import { generateOcsUrl } from '@nextcloud/router'
 import NcButton from '@nextcloud/vue/components/NcButton'
 import NcDateTime from '@nextcloud/vue/components/NcDateTime'
 import NcRichText from '@nextcloud/vue/components/NcRichText'
@@ -154,7 +153,7 @@ export default {
 		},
 	},
 
-	emits: ['remove'],
+	emits: ['remove', 'dismiss'],
 
 	data() {
 		return {
@@ -271,14 +270,7 @@ export default {
 		},
 
 		onDismissNotification() {
-			axios
-				.delete(generateOcsUrl('apps/notifications/api/v2/notifications/{id}', { id: this.notification.notificationId }))
-				.then(() => {
-					this.$emit('remove')
-				})
-				.catch(() => {
-					showError(t('notifications', 'Failed to dismiss notification'))
-				})
+			this.$emit('dismiss', this.notification)
 		},
 	},
 }

src/NotificationsApp.vue

@@ -32,11 +32,12 @@
 						:key="-2016"
 						:notification="fairUsePolicyNotification" />
 					<NotificationItem
-						v-for="(notification, index) in notifications"
+						v-for="notification in notifications"
 						:key="notification.notificationId"
-						:class="{ 'notification--new': notification.notificationId > lastOpenMaxId }"
+						:class="{ 'notification--new': notification.notificationId > lastOpenMaxId, 'notification--collapsing': collapsingIds.has(notification.notificationId) }"
 						:notification="notification"
-						@remove="onRemove(index)" />
+						@remove="onRemove(notification)"
+						@dismiss="onDismiss" />
 				</transition-group>
 
 				<!-- No notifications -->
@@ -79,6 +80,16 @@
 				</NcEmptyContent>
 			</transition>
 
+			<!-- Undo dismiss bar -->
+			<transition name="fade">
+				<div v-if="pendingUndo" class="notification-undo-bar">
+					<span>{{ t('notifications', 'Notification dismissed') }}</span>
+					<NcButton variant="tertiary" @click="onUndoDismiss">
+						{{ t('notifications', 'Undo') }}
+					</NcButton>
+				</div>
+			</transition>
+
 			<!-- Dismiss all -->
 			<div v-if="notifications.length > 0" class="dismiss-all">
 				<NcButton
@@ -208,6 +219,10 @@ export default {
 			lastOpenMaxId: 0,
 			/** True for 5 s after all notifications are cleared — inbox zero celebration */
 			showInboxZero: false,
+			/** Pending optimistic dismiss: { notification, execute, timerId, collapseTimerId } */
+			pendingUndo: null,
+			/** Set of notification IDs currently playing collapse animation */
+			collapsingIds: new Set(),
 		}
 	},
 
@@ -379,8 +394,64 @@ export default {
 				})
 		},
 
-		onRemove(index) {
-			this.notifications.splice(index, 1)
+		onRemove(notification) {
+			const idx = this.notifications.findIndex(n => n.notificationId === notification.notificationId)
+			if (idx !== -1) {
+				this.notifications.splice(idx, 1)
+			}
+			setCurrentTabAsActive(this.tabId)
+		},
+
+		async onDismiss(notification) {
+			// Flush any prior pending dismiss immediately
+			if (this.pendingUndo) {
+				clearTimeout(this.pendingUndo.timerId)
+				clearTimeout(this.pendingUndo.collapseTimerId)
+				const prevIdx = this.notifications.findIndex(n => n.notificationId === this.pendingUndo.notification.notificationId)
+				if (prevIdx !== -1) this.notifications.splice(prevIdx, 1)
+				this.collapsingIds.delete(this.pendingUndo.notification.notificationId)
+				await this.pendingUndo.execute()
+			}
+
+			setCurrentTabAsActive(this.tabId)
+
+			// Trigger collapse animation — item stays in array until animation finishes (280 ms)
+			this.collapsingIds.add(notification.notificationId)
+
+			const execute = () => axios
+				.delete(generateOcsUrl('apps/notifications/api/v2/notifications/{id}', { id: notification.notificationId }))
+				.catch(() => showError(t('notifications', 'Failed to dismiss notification')))
+
+			const collapseTimerId = setTimeout(() => {
+				const idx = this.notifications.findIndex(n => n.notificationId === notification.notificationId)
+				if (idx !== -1) this.notifications.splice(idx, 1)
+				this.collapsingIds.delete(notification.notificationId)
+			}, 280)
+
+			this.pendingUndo = {
+				notification,
+				execute,
+				collapseTimerId,
+				timerId: setTimeout(() => {
+					this.pendingUndo = null
+					execute()
+				}, 4000),
+			}
+		},
+
+		onUndoDismiss() {
+			if (!this.pendingUndo) return
+			clearTimeout(this.pendingUndo.timerId)
+			clearTimeout(this.pendingUndo.collapseTimerId)
+			const { notification } = this.pendingUndo
+			this.pendingUndo = null
+			this.collapsingIds.delete(notification.notificationId)
+			// Re-insert if the collapse timer already removed it from the array
+			if (!this.notifications.find(n => n.notificationId === notification.notificationId)) {
+				const insertIdx = this.notifications.findIndex(n => n.notificationId < notification.notificationId)
+				if (insertIdx === -1) this.notifications.push(notification)
+				else this.notifications.splice(insertIdx, 0, notification)
+			}
 			setCurrentTabAsActive(this.tabId)
 		},
 
@@ -461,8 +532,13 @@ export default {
 				this.userStatus = response.headers['x-nextcloud-user-status']
 				this.lastETag = response.headers.etag
 				this.lastTabId = response.tabId
-				this.notifications = response.data
-				this.processWebNotifications(response.data)
+				// Keep the pending-undo item out of the list during its grace period
+				const pendingId = this.pendingUndo?.notification?.notificationId
+				const data = pendingId
+					? response.data.filter(n => n.notificationId !== pendingId)
+					: response.data
+				this.notifications = data
+				this.processWebNotifications(data)
 				console.debug('Got notification data, restoring default polling interval.')
 				this._setPollingInterval(this.pollIntervalBase)
 				this._updateDocTitleOnNewNotifications(this.notifications)

src/styles/styles.scss

@@ -251,3 +251,37 @@ img.notification-icon {
 	from { transform: rotate(calc(45deg * var(--confetti-i, 0))) translateY(0) scale(1); opacity: 1; }
 	to   { transform: rotate(calc(45deg * var(--confetti-i, 0))) translateY(-34px) scale(0); opacity: .8; }
 }
+
+// Undo dismiss bar — appears below the list during the 4 s grace period
+.notification-undo-bar {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 4px 4px 4px 16px;
+	border-top: 1px solid var(--color-border);
+	background: color-mix(in srgb, var(--color-primary-element) 8%, var(--color-main-background));
+	font-size: 13px;
+}
+
+// Smooth collapse animation while the dismiss is pending
+#notifications .notification.notification--collapsing {
+	overflow: hidden;
+	pointer-events: none;
+	animation: notification-collapse 280ms ease-in both;
+}
+
+@keyframes notification-collapse {
+	0% {
+		opacity: 1;
+		max-height: 600px;
+		padding-bottom: 12px;
+	}
+	45% {
+		opacity: 0;
+	}
+	100% {
+		opacity: 0;
+		max-height: 0;
+		padding-bottom: 0;
+	}
+}