From 2cf77d8ac0cca50717b53c16f801a325ae68a772 Mon Sep 17 00:00:00 2001
From: Frank Karlitschek <karlitschek@users.noreply.github.com>
Date: Tue, 28 Apr 2026 15:02:02 +0200
Subject: [PATCH] feat(ui): group notifications by app with optional filter
 tabs
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The notification list is now rendered as one collapsible <ul> per app
instead of a flat transition-group, with a per-group count badge in
the header. Group headers are only shown when there is more than one
app, so single-app users see the same flat list as before.

A row of filter tabs (All / Mentions / Files / Other) appears when
notifications span at least three categories. Switching filter rebuilds
the groups; if the active filter ends up empty, it falls back to "All".

Group expand/collapse is local UI state only — collapsed items remain
in the DOM (v-show) so toggling stays cheap. Items also get a subtle
staggered entrance animation via a CSS variable `--anim-index`.

* NotificationsApp.vue: notificationGroups, filterTabs, showFilterTabs
  computed; collapsedGroups, activeFilter data; toggleGroup,
  formatAppName, visibleIndex helpers; watcher resets stale filters
* onRemove(index) becomes onRemove(notification) since the v-for now
  iterates groups, not the flat array
* styles.scss: filter tabs, group header, staggered item animation

Note: this PR has known performance implications on accounts with
many notifications and the grouping logic is expected to move to the
server side. Tracked as follow-up.

Signed-off-by: Frank Karlitschek <frank@nextcloud.com>
---
 src/NotificationsApp.vue | 131 ++++++++++++++++++++++++++++++++++-----
 src/styles/styles.scss   | 124 ++++++++++++++++++++++++++++++++++++
 2 files changed, 238 insertions(+), 17 deletions(-)

diff --git a/src/NotificationsApp.vue b/src/NotificationsApp.vue
index d494e609a..ef67c0396 100644
--- a/src/NotificationsApp.vue
+++ b/src/NotificationsApp.vue
@@ -21,22 +21,50 @@
 
 		<!-- Notifications list content -->
 		<div class="notification-container">
+			<!-- Filter tabs: only shown when notifications span 3+ categories -->
+			<div v-if="showFilterTabs" class="notification-filter-tabs" role="tablist">
+				<button
+					v-for="tab in filterTabs"
+					:key="tab.id"
+					role="tab"
+					:aria-selected="activeFilter === tab.id"
+					:class="['notification-filter-tab', { 'notification-filter-tab--active': activeFilter === tab.id }]"
+					@click="activeFilter = tab.id">
+					{{ tab.label }}
+					<span v-if="tab.count" class="notification-filter-count">{{ tab.count }}</span>
+				</button>
+			</div>
+
 			<transition name="fade" mode="out-in">
-				<transition-group
-					v-if="notifications.length > 0"
-					class="notification-wrapper"
-					name="list"
-					tag="ul">
+				<ul v-if="notificationGroups.length > 0" class="notification-wrapper">
 					<NotificationItem
 						v-if="hasThrottledPushNotifications"
-						:key="-2016"
 						:notification="fairUsePolicyNotification" />
-					<NotificationItem
-						v-for="(notification, index) in notifications"
-						:key="notification.notificationId"
-						:notification="notification"
-						@remove="onRemove(index)" />
-				</transition-group>
+					<template v-for="(group, groupIdx) in notificationGroups" :key="group.app">
+						<!-- Group header: only shown when there are multiple apps -->
+						<li
+							v-if="notificationGroups.length > 1"
+							class="notification-group-header"
+							role="button"
+							tabindex="0"
+							@click="toggleGroup(group.app)"
+							@keydown.enter="toggleGroup(group.app)"
+							@keydown.space.prevent="toggleGroup(group.app)">
+							<span class="notification-group-name">{{ formatAppName(group.app) }}</span>
+							<span class="notification-group-badge">{{ group.items.length }}</span>
+							<IconChevronDown
+								:size="14"
+								:class="{ 'notification-group-chevron--collapsed': collapsedGroups.has(group.app) }" />
+						</li>
+						<NotificationItem
+							v-for="(notification, itemIdx) in group.items"
+							v-show="!collapsedGroups.has(group.app)"
+							:key="`${notification.notificationId}-${activeFilter}`"
+							:style="{ '--anim-index': visibleIndex(groupIdx, itemIdx) }"
+							:notification="notification"
+							@remove="onRemove(notification)" />
+					</template>
+				</ul>
 
 				<!-- No notifications -->
 				<NcEmptyContent
@@ -64,7 +92,7 @@
 			</transition>
 
 			<!-- Dismiss all -->
-			<div v-if="notifications.length > 0" class="dismiss-all">
+			<div v-if="notificationGroups.length > 0" class="dismiss-all">
 				<NcButton
 					variant="tertiary"
 					wide
@@ -93,6 +121,7 @@ import NcButton from '@nextcloud/vue/components/NcButton'
 import NcEmptyContent from '@nextcloud/vue/components/NcEmptyContent'
 import NcHeaderMenu from '@nextcloud/vue/components/NcHeaderMenu'
 import IconBellOutline from 'vue-material-design-icons/BellOutline.vue'
+import IconChevronDown from 'vue-material-design-icons/ChevronDown.vue'
 import IconClose from 'vue-material-design-icons/Close.vue'
 import IconMessageOutline from 'vue-material-design-icons/MessageOutline.vue'
 import IconNotification from './Components/IconNotification.vue'
@@ -132,6 +161,7 @@ export default {
 
 	components: {
 		IconBellOutline,
+		IconChevronDown,
 		IconClose,
 		IconMessageOutline,
 		IconNotification,
@@ -187,6 +217,11 @@ export default {
 			pushEndpoints: null,
 
 			open: false,
+
+			/** Set of app names whose group is currently collapsed */
+			collapsedGroups: new Set(),
+			/** Active filter tab: 'all' | 'mentions' | 'files' | 'other' */
+			activeFilter: 'all',
 		}
 	},
 
@@ -202,11 +237,12 @@ export default {
 			if (this.webNotificationsGranted === null) {
 				return t('notifications', 'Requesting browser permissions to show notifications')
 			}
-
 			if (this.hasThrottledPushNotifications) {
 				return this.fairUsePolicyNotification.subject
 			}
-
+			if (this.activeFilter !== 'all' && this.notifications.length > 0) {
+				return t('notifications', 'No notifications in this category')
+			}
 			return t('notifications', 'No notifications')
 		},
 
@@ -217,6 +253,44 @@ export default {
 
 			return ''
 		},
+
+		notificationGroups() {
+			const groups = new Map()
+			for (const n of this.notifications) {
+				if (this.activeFilter === 'mentions' && n.objectType !== 'mention') continue
+				if (this.activeFilter === 'files' && !['files', 'files_sharing'].includes(n.app)) continue
+				if (this.activeFilter === 'other' && (n.objectType === 'mention' || ['files', 'files_sharing'].includes(n.app))) continue
+				if (!groups.has(n.app)) groups.set(n.app, [])
+				groups.get(n.app).push(n)
+			}
+			return [...groups.entries()].map(([app, items]) => ({ app, items }))
+		},
+
+		filterTabs() {
+			const counts = { mentions: 0, files: 0, other: 0 }
+			for (const n of this.notifications) {
+				if (n.objectType === 'mention') counts.mentions++
+				else if (['files', 'files_sharing'].includes(n.app)) counts.files++
+				else counts.other++
+			}
+			const tabs = [{ id: 'all', label: t('notifications', 'All') }]
+			if (counts.mentions) tabs.push({ id: 'mentions', label: t('notifications', 'Mentions'), count: counts.mentions })
+			if (counts.files) tabs.push({ id: 'files', label: t('notifications', 'Files'), count: counts.files })
+			if (counts.other) tabs.push({ id: 'other', label: t('notifications', 'Other'), count: counts.other })
+			return tabs
+		},
+
+		showFilterTabs() {
+			return this.filterTabs.length > 2
+		},
+	},
+
+	watch: {
+		notificationGroups(groups) {
+			if (groups.length === 0 && this.activeFilter !== 'all') {
+				this.activeFilter = 'all'
+			}
+		},
 	},
 
 	mounted() {
@@ -342,11 +416,34 @@ 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)
 		},
 
+		formatAppName(app) {
+			return app.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase())
+		},
+
+		toggleGroup(app) {
+			if (this.collapsedGroups.has(app)) {
+				this.collapsedGroups.delete(app)
+			} else {
+				this.collapsedGroups.add(app)
+			}
+		},
+
+		visibleIndex(groupIdx, itemIdx) {
+			let idx = 0
+			for (let g = 0; g < groupIdx; g++) {
+				idx += this.notificationGroups[g].items.length
+			}
+			return idx + itemIdx
+		},
+
 		/**
 		 * Update the title to show * if there are new notifications
 		 *
diff --git a/src/styles/styles.scss b/src/styles/styles.scss
index 96524b4a9..dc15f1979 100644
--- a/src/styles/styles.scss
+++ b/src/styles/styles.scss
@@ -123,3 +123,127 @@ svg {
 		}
 	}
 }
+
+// Filter tabs (only rendered when notifications span 3+ categories)
+.notification-filter-tabs {
+	display: flex;
+	gap: 2px;
+	padding: 6px 8px;
+	border-bottom: 1px solid var(--color-border);
+	overflow-x: auto;
+	scrollbar-width: none;
+
+	&::-webkit-scrollbar { display: none; }
+}
+
+.notification-filter-tab {
+	flex-shrink: 0;
+	display: inline-flex;
+	align-items: center;
+	gap: 5px;
+	padding: 3px 10px;
+	border: none;
+	border-radius: 20px;
+	background: transparent;
+	color: var(--color-text-maxcontrast);
+	font-size: 12px;
+	font-weight: 500;
+	cursor: pointer;
+	transition: background 0.15s ease, color 0.15s ease;
+	white-space: nowrap;
+
+	&:hover {
+		background: var(--color-background-hover);
+		color: var(--color-main-text);
+	}
+
+	&--active {
+		background: var(--color-primary-element);
+		color: var(--color-primary-element-text);
+
+		&:hover { background: var(--color-primary-element); }
+
+		.notification-filter-count {
+			background: rgba(255, 255, 255, 0.25);
+			color: inherit;
+		}
+	}
+}
+
+.notification-filter-count {
+	min-width: 16px;
+	height: 16px;
+	padding: 0 4px;
+	border-radius: 8px;
+	background: var(--color-background-dark);
+	color: var(--color-text-maxcontrast);
+	font-size: 10px;
+	line-height: 16px;
+	text-align: center;
+	box-sizing: border-box;
+}
+
+// Group header — collapsible per-app section title
+.notification-group-header {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	padding: 6px 12px;
+	font-size: 11px;
+	font-weight: 600;
+	text-transform: uppercase;
+	letter-spacing: 0.06em;
+	color: var(--color-text-maxcontrast);
+	background: var(--color-background-hover);
+	cursor: pointer;
+	user-select: none;
+	list-style: none;
+
+	&:hover {
+		background: var(--color-background-dark);
+	}
+
+	.notification-group-name {
+		flex: 1;
+	}
+
+	.notification-group-badge {
+		min-width: 18px;
+		height: 18px;
+		padding: 0 5px;
+		border-radius: 9px;
+		background: var(--color-primary-element);
+		color: var(--color-primary-element-text);
+		font-size: 10px;
+		line-height: 18px;
+		text-align: center;
+		text-transform: none;
+		letter-spacing: 0;
+		box-sizing: border-box;
+	}
+
+	.material-design-icon {
+		transition: transform 0.2s ease;
+
+		&.notification-group-chevron--collapsed {
+			transform: rotate(-90deg);
+		}
+	}
+}
+
+// Subtle staggered entrance animation per notification item
+#notifications.header-menu--opened .notification {
+	animation: nc-notif-item-in 0.3s cubic-bezier(0.2, 0, 0, 1) both;
+	animation-delay: calc(100ms + var(--anim-index, 0) * 40ms);
+}
+
+@keyframes nc-notif-item-in {
+	from {
+		opacity: 0;
+		transform: translateY(8px);
+	}
+	to {
+		opacity: 1;
+		transform: none;
+	}
+}