From a44f1dc384c0e73e615739320e1be2f64a9d65c1 Mon Sep 17 00:00:00 2001
From: Creeperkatze <178587183+Creeperkatze@users.noreply.github.com>
Date: Mon, 2 Feb 2026 01:14:41 +0100
Subject: [PATCH 01/32] Add notifications icon

---
 apps/frontend/src/layouts/default.vue | 47 +++++++++++++++++++++++++++
 1 file changed, 47 insertions(+)

diff --git a/apps/frontend/src/layouts/default.vue b/apps/frontend/src/layouts/default.vue
index d9451cc468..9f42c909b9 100644
--- a/apps/frontend/src/layouts/default.vue
+++ b/apps/frontend/src/layouts/default.vue
@@ -423,6 +423,27 @@
 						</template>
 					</OverflowMenu>
 				</ButtonStyled>
+				<ButtonStyled v-if="auth.user" type="transparent">
+					<nuxt-link
+						to="/dashboard/notifications"
+						class="btn-dropdown-animation relative mr-2 flex items-center gap-1 rounded-xl bg-transparent px-2 py-1"
+						:aria-label="formatMessage(commonMessages.notificationsLabel)"
+						@click="
+							() => {
+								isMobileMenuOpen = false
+								isBrowseMenuOpen = false
+							}
+						"
+					>
+						<BellIcon aria-hidden="true" />
+						<div
+							v-if="unreadNotificationsCount > 0"
+							class="absolute right-0 top-0 flex h-4 w-4 items-center justify-center rounded-full bg-brand text-[10px] font-bold text-brand-inverted"
+						>
+							{{ unreadNotificationsCount }}
+						</div>
+					</nuxt-link>
+				</ButtonStyled>
 				<OverflowMenu
 					v-if="auth.user"
 					:dropdown-id="`${basePopoutId}-user`"
@@ -759,6 +780,32 @@ const { data: payoutBalance } = await useAsyncData('payout/balance', () => {
 	return useBaseFetch('payout/balance', { apiVersion: 3 })
 })
 
+const { data: notificationsData, refresh: refreshNotifications } = await useAsyncData(
+	'header-notifications',
+	async () => {
+		if (!auth.value.user) return null
+
+		// TODO: Remove mock data
+		const mockNotifications = [
+			{ id: '1', read: false, type: 'project_update' },
+			{ id: '2', read: false, type: 'project_update' },
+			{ id: '3', read: true, type: 'project_update' },
+		]
+
+		return mockNotifications
+
+		// return useBaseFetch(`user/${auth.value.user.id}/notifications`)
+	},
+	{
+		watch: [auth],
+	},
+)
+
+const unreadNotificationsCount = computed(() => {
+	if (!notificationsData.value) return 0
+	return notificationsData.value.filter((n) => !n.read).length
+})
+
 const showTaxComplianceBanner = computed(() => {
 	if (flags.value.testTaxForm && auth.value.user) return true
 	const bal = payoutBalance.value

From dab79b842b00619b69f7282ceb9ea9040229b05c Mon Sep 17 00:00:00 2001
From: Creeperkatze <178587183+Creeperkatze@users.noreply.github.com>
Date: Mon, 2 Feb 2026 02:49:18 +0100
Subject: [PATCH 02/32] Add popout

---
 .../src/helpers/platform-notifications.ts     |  61 +++++++
 apps/frontend/src/layouts/default.vue         | 171 +++++++++++++++---
 2 files changed, 208 insertions(+), 24 deletions(-)

diff --git a/apps/frontend/src/helpers/platform-notifications.ts b/apps/frontend/src/helpers/platform-notifications.ts
index e151d583a5..bc961a993b 100644
--- a/apps/frontend/src/helpers/platform-notifications.ts
+++ b/apps/frontend/src/helpers/platform-notifications.ts
@@ -2,6 +2,67 @@ import type { Organization, Project, Report, User, Version } from '@modrinth/uti
 
 type Thread = { id: string }
 
+// TODO: Remove mock data when API is ready
+export const mockNotifications: PlatformNotification[] = [
+	{
+		id: '1',
+		user_id: 'mock-user-id',
+		type: 'project_update',
+		title: 'New project created',
+		text: 'Your project was successfully created',
+		link: '/project/test-project',
+		read: false,
+		created: new Date().toISOString(),
+		actions: [],
+		body: { project_id: 'mock-project-id' },
+		extra_data: {
+			project: {
+				slug: 'test-project',
+				icon_url:
+					'https://cdn.modrinth.com/data/AANobbMI/295862f4724dc3f78df3447ad6072b2dcd3ef0c9_96.webp',
+			},
+		},
+	},
+	{
+		id: '2',
+		user_id: 'mock-user-id',
+		type: 'team_invite',
+		title: 'Invited to join team',
+		text: 'You have been invited to join a project team',
+		link: '/project/invited-project',
+		read: false,
+		created: new Date().toISOString(),
+		actions: [],
+		body: { team_id: 'test-team-id', project_id: 'invited-project-id' },
+		extra_data: {
+			project: {
+				slug: 'invited-project',
+				icon_url:
+					'https://cdn.modrinth.com/data/AANobbMI/295862f4724dc3f78df3447ad6072b2dcd3ef0c9_96.webp',
+			},
+		},
+	},
+	{
+		id: '3',
+		user_id: 'mock-user-id',
+		type: 'organization_invite',
+		title: 'Organization invitation',
+		text: 'You have been invited to join an organization',
+		link: '/organization/test-org',
+		read: false,
+		created: new Date().toISOString(),
+		actions: [],
+		body: { organization_id: 'test-org-id', invited_by: 'inviter-id' },
+		extra_data: {
+			organization: {
+				slug: 'test-org',
+				icon_url:
+					'https://cdn.modrinth.com/data/AANobbMI/295862f4724dc3f78df3447ad6072b2dcd3ef0c9_96.webp',
+			},
+		},
+	},
+]
+
 export type PlatformNotificationAction = {
 	title: string
 	action_route: [string, string]
diff --git a/apps/frontend/src/layouts/default.vue b/apps/frontend/src/layouts/default.vue
index 9f42c909b9..80b5cd9ace 100644
--- a/apps/frontend/src/layouts/default.vue
+++ b/apps/frontend/src/layouts/default.vue
@@ -424,25 +424,93 @@
 					</OverflowMenu>
 				</ButtonStyled>
 				<ButtonStyled v-if="auth.user" type="transparent">
-					<nuxt-link
-						to="/dashboard/notifications"
-						class="btn-dropdown-animation relative mr-2 flex items-center gap-1 rounded-xl bg-transparent px-2 py-1"
-						:aria-label="formatMessage(commonMessages.notificationsLabel)"
-						@click="
-							() => {
-								isMobileMenuOpen = false
-								isBrowseMenuOpen = false
-							}
-						"
+					<OverflowMenu
+						:dropdown-id="`${basePopoutId}-notifications`"
+						class="btn-dropdown-animation relative flex items-center gap-1 rounded-xl bg-transparent px-2 py-1"
+						:options="[]"
+						@dblclick="router.push('/dashboard/notifications')"
 					>
-						<BellIcon aria-hidden="true" />
-						<div
-							v-if="unreadNotificationsCount > 0"
-							class="absolute right-0 top-0 flex h-4 w-4 items-center justify-center rounded-full bg-brand text-[10px] font-bold text-brand-inverted"
-						>
-							{{ unreadNotificationsCount }}
+						<div class="relative flex h-5 flex-shrink-0 items-center justify-center">
+							<BellIcon aria-hidden="true" class="h-5 w-5" />
+							<div
+								v-if="unreadNotificationsCount > 0"
+								class="absolute -right-2 -top-2 flex h-4 w-4 items-center justify-center rounded-full bg-brand text-[10px] font-bold text-brand-inverted"
+							>
+								{{ unreadNotificationsCount }}
+							</div>
 						</div>
-					</nuxt-link>
+						<DropdownIcon aria-hidden="true" class="h-5 w-5 text-secondary" />
+						<template #menu-header>
+							<div class="notifications-dropdown flex min-w-[300px] flex-col gap-2 p-2">
+								<div class="flex items-center justify-between gap-2 rounded-lg">
+									<button class="iconified-button" @click="router.push('/dashboard/notifications')">
+										<BellIcon aria-hidden="true" />
+										View all
+									</button>
+									<button
+										v-if="unreadNotificationsCount > 0"
+										class="iconified-button"
+										@click.stop="handleMarkAllAsRead"
+									>
+										<CheckCheckIcon />
+										Mark all as read
+									</button>
+								</div>
+								<div class="border-t border-divider"></div>
+								<div
+									v-for="notif in recentNotifications"
+									:key="notif.id"
+									class="universal-card recessed group !mb-0 flex items-center gap-2 !p-4 transition-colors hover:bg-button-bg"
+								>
+									<NuxtLink
+										v-if="notif.extra_data?.project"
+										:to="`/project/${notif.extra_data.project.slug}`"
+										class="flex-shrink-0"
+									>
+										<Avatar size="xs" :src="notif.extra_data.project.icon_url" aria-hidden="true" />
+									</NuxtLink>
+									<div class="min-w-0 flex-1 pr-2">
+										<div class="font-semibold text-contrast">
+											{{ notif.title }}
+										</div>
+										<div class="mt-1 flex items-center gap-1 text-sm text-secondary">
+											<CalendarIcon aria-hidden="true" />
+											{{ formatRelativeTime(notif.created) }}
+										</div>
+									</div>
+									<div class="flex gap-2">
+										<button
+											v-if="
+												(notif.type === 'team_invite' || notif.type === 'organization_invite') &&
+												!notif.read
+											"
+											class="iconified-button square-button brand-button"
+											@click.stop="handleAcceptInvite(notif)"
+										>
+											<CheckIcon />
+										</button>
+										<button
+											v-if="
+												(notif.type === 'team_invite' || notif.type === 'organization_invite') &&
+												!notif.read
+											"
+											class="iconified-button square-button danger-button"
+											@click.stop="handleDeclineInvite(notif)"
+										>
+											<XIcon />
+										</button>
+										<button
+											v-else-if="!notif.read"
+											class="iconified-button square-button"
+											@click.stop="handleMarkAsRead(notif)"
+										>
+											<CheckIcon />
+										</button>
+									</div>
+								</div>
+							</div>
+						</template>
+					</OverflowMenu>
 				</ButtonStyled>
 				<OverflowMenu
 					v-if="auth.user"
@@ -698,7 +766,10 @@ import {
 	BellIcon,
 	BoxIcon,
 	BracesIcon,
+	CalendarIcon,
 	ChartIcon,
+	CheckCheckIcon,
+	CheckIcon,
 	CollectionIcon,
 	CompassIcon,
 	CurrencyIcon,
@@ -738,6 +809,7 @@ import {
 	commonProjectTypeCategoryMessages,
 	defineMessages,
 	OverflowMenu,
+	useRelativeTime,
 	useVIntl,
 } from '@modrinth/ui'
 import { isAdmin, isStaff, UserBadge } from '@modrinth/utils'
@@ -758,6 +830,8 @@ import ProjectCreateModal from '~/components/ui/create/ProjectCreateModal.vue'
 import ModrinthFooter from '~/components/ui/ModrinthFooter.vue'
 import TeleportOverflowMenu from '~/components/ui/servers/TeleportOverflowMenu.vue'
 import { errors as generatedStateErrors } from '~/generated/state.json'
+import { markAsRead, mockNotifications } from '~/helpers/platform-notifications'
+import { acceptTeamInvite, removeSelfFromTeam } from '~/helpers/teams'
 import { getProjectTypeMessage } from '~/utils/i18n-project-type.ts'
 
 const country = useUserCountry()
@@ -785,13 +859,6 @@ const { data: notificationsData, refresh: refreshNotifications } = await useAsyn
 	async () => {
 		if (!auth.value.user) return null
 
-		// TODO: Remove mock data
-		const mockNotifications = [
-			{ id: '1', read: false, type: 'project_update' },
-			{ id: '2', read: false, type: 'project_update' },
-			{ id: '3', read: true, type: 'project_update' },
-		]
-
 		return mockNotifications
 
 		// return useBaseFetch(`user/${auth.value.user.id}/notifications`)
@@ -806,6 +873,11 @@ const unreadNotificationsCount = computed(() => {
 	return notificationsData.value.filter((n) => !n.read).length
 })
 
+const recentNotifications = computed(() => {
+	if (!notificationsData.value) return []
+	return notificationsData.value.slice(0, 5)
+})
+
 const showTaxComplianceBanner = computed(() => {
 	if (flags.value.testTaxForm && auth.value.user) return true
 	const bal = payoutBalance.value
@@ -1241,6 +1313,53 @@ function toggleBrowseMenu() {
 }
 
 const { cycle: changeTheme } = useTheme()
+
+function getNotificationTypeLabel(notif) {
+	if (notif.type === 'team_invite') return 'Team invitation'
+	if (notif.type === 'organization_invite') return 'Organization invitation'
+	return ''
+}
+
+const formatRelativeTime = useRelativeTime()
+
+async function handleAcceptInvite(notif) {
+	try {
+		await acceptTeamInvite(notif.body.team_id)
+		await markAsRead([notif.id])
+		await refreshNotifications()
+	} catch (err) {
+		console.error('Error accepting invite:', err)
+	}
+}
+
+async function handleDeclineInvite(notif) {
+	try {
+		await removeSelfFromTeam(notif.body.team_id)
+		await markAsRead([notif.id])
+		await refreshNotifications()
+	} catch (err) {
+		console.error('Error declining invite:', err)
+	}
+}
+
+async function handleMarkAsRead(notif) {
+	try {
+		await markAsRead([notif.id])
+		await refreshNotifications()
+	} catch (err) {
+		console.error('Error marking as read:', err)
+	}
+}
+
+async function handleMarkAllAsRead() {
+	try {
+		const ids = notificationsData.value?.map((n) => n.id) || []
+		await markAsRead(ids)
+		await refreshNotifications()
+	} catch (err) {
+		console.error('Error marking all as read:', err)
+	}
+}
 </script>
 
 <style lang="scss">
@@ -1604,5 +1723,9 @@ const { cycle: changeTheme } = useTheme()
 		transform: translateY(0);
 	}
 }
+
+.notifications-dropdown .iconified-button.square-button svg {
+	margin-right: 0;
+}
 </style>
 <style src="vue-multiselect/dist/vue-multiselect.css"></style>

From b9a6865660950238f5d8eae4e750359afaa1573d Mon Sep 17 00:00:00 2001
From: Creeperkatze <178587183+Creeperkatze@users.noreply.github.com>
Date: Mon, 2 Feb 2026 02:57:35 +0100
Subject: [PATCH 03/32] Make strings translatable, make icons consistent with
 the notifications page

---
 apps/frontend/src/layouts/default.vue      | 90 +++++++++++++++++++---
 apps/frontend/src/locales/en-US/index.json |  6 ++
 2 files changed, 87 insertions(+), 9 deletions(-)

diff --git a/apps/frontend/src/layouts/default.vue b/apps/frontend/src/layouts/default.vue
index 80b5cd9ace..b7841dce07 100644
--- a/apps/frontend/src/layouts/default.vue
+++ b/apps/frontend/src/layouts/default.vue
@@ -445,7 +445,7 @@
 								<div class="flex items-center justify-between gap-2 rounded-lg">
 									<button class="iconified-button" @click="router.push('/dashboard/notifications')">
 										<BellIcon aria-hidden="true" />
-										View all
+										{{ formatMessage(messages.viewAllNotifications) }}
 									</button>
 									<button
 										v-if="unreadNotificationsCount > 0"
@@ -453,7 +453,7 @@
 										@click.stop="handleMarkAllAsRead"
 									>
 										<CheckCheckIcon />
-										Mark all as read
+										{{ formatMessage(messages.markAllAsRead) }}
 									</button>
 								</div>
 								<div class="border-t border-divider"></div>
@@ -462,13 +462,64 @@
 									:key="notif.id"
 									class="universal-card recessed group !mb-0 flex items-center gap-2 !p-4 transition-colors hover:bg-button-bg"
 								>
-									<NuxtLink
-										v-if="notif.extra_data?.project"
-										:to="`/project/${notif.extra_data.project.slug}`"
-										class="flex-shrink-0"
-									>
-										<Avatar size="xs" :src="notif.extra_data.project.icon_url" aria-hidden="true" />
-									</NuxtLink>
+									<DoubleIcon class="flex-shrink-0">
+										<template #primary>
+											<NuxtLink
+												v-if="notif.extra_data?.project"
+												:to="`/project/${notif.extra_data.project.slug}`"
+												tabindex="-1"
+											>
+												<Avatar size="xs" :src="notif.extra_data.project.icon_url" aria-hidden="true" />
+											</NuxtLink>
+											<NuxtLink
+												v-else-if="notif.extra_data?.organization"
+												:to="`/organization/${notif.extra_data.organization.slug}`"
+												tabindex="-1"
+											>
+												<Avatar
+													size="xs"
+													:src="notif.extra_data.organization.icon_url"
+													aria-hidden="true"
+												/>
+											</NuxtLink>
+											<NuxtLink
+												v-else-if="notif.extra_data?.user"
+												:to="`/user/${notif.extra_data.user.username}`"
+												tabindex="-1"
+											>
+												<Avatar
+													size="xs"
+													:src="notif.extra_data.user.avatar_url"
+													aria-hidden="true"
+												/>
+											</NuxtLink>
+											<Avatar v-else size="xs" aria-hidden="true" />
+										</template>
+										<template #secondary>
+											<ScaleIcon
+												v-if="notif.type === 'moderator_message' || notif.type === 'status_change'"
+												class="moderation-color"
+											/>
+											<UserPlusIcon
+												v-else-if="notif.type === 'team_invite' && notif.extra_data?.project"
+												class="creator-color"
+											/>
+											<UserPlusIcon
+												v-else-if="
+													notif.type === 'organization_invite' && notif.extra_data?.organization
+												"
+												class="creator-color"
+											/>
+											<VersionIcon
+												v-else-if="
+													notif.type === 'project_update' &&
+													notif.extra_data?.project &&
+													notif.extra_data?.version
+												"
+											/>
+											<BellIcon v-else />
+										</template>
+									</DoubleIcon>
 									<div class="min-w-0 flex-1 pr-2">
 										<div class="font-semibold text-contrast">
 											{{ notif.title }}
@@ -799,7 +850,9 @@ import {
 	SunIcon,
 	TransferIcon,
 	UserIcon,
+	UserPlusIcon,
 	UserSearchIcon,
+	VersionIcon,
 	XIcon,
 } from '@modrinth/assets'
 import {
@@ -808,6 +861,7 @@ import {
 	commonMessages,
 	commonProjectTypeCategoryMessages,
 	defineMessages,
+	DoubleIcon,
 	OverflowMenu,
 	useRelativeTime,
 	useVIntl,
@@ -1034,6 +1088,14 @@ const messages = defineMessages({
 		id: 'layout.mobile.close-menu',
 		defaultMessage: 'Close menu',
 	},
+	viewAllNotifications: {
+		id: 'layout.notifications.view-all',
+		defaultMessage: 'View all',
+	},
+	markAllAsRead: {
+		id: 'layout.notifications.mark-all-read',
+		defaultMessage: 'Mark all as read',
+	},
 })
 
 useHead({
@@ -1727,5 +1789,15 @@ async function handleMarkAllAsRead() {
 .notifications-dropdown .iconified-button.square-button svg {
 	margin-right: 0;
 }
+
+.notifications-dropdown {
+	.moderation-color {
+		color: var(--color-orange);
+	}
+
+	.creator-color {
+		color: var(--color-blue);
+	}
+}
 </style>
 <style src="vue-multiselect/dist/vue-multiselect.css"></style>
diff --git a/apps/frontend/src/locales/en-US/index.json b/apps/frontend/src/locales/en-US/index.json
index f9dc3f10b4..73a49d1c8d 100644
--- a/apps/frontend/src/locales/en-US/index.json
+++ b/apps/frontend/src/locales/en-US/index.json
@@ -1658,6 +1658,12 @@
   "layout.nav.upgrade-to-modrinth-plus": {
     "message": "Upgrade to Modrinth+"
   },
+  "layout.notifications.mark-all-read": {
+    "message": "Mark all as read"
+  },
+  "layout.notifications.view-all": {
+    "message": "View all"
+  },
   "moderation.moderate": {
     "message": "Moderate"
   },

From 0cc5abc9944931552c814307afa8739214ca6289 Mon Sep 17 00:00:00 2001
From: Creeperkatze <178587183+Creeperkatze@users.noreply.github.com>
Date: Mon, 2 Feb 2026 03:03:33 +0100
Subject: [PATCH 04/32] Close on button press

---
 apps/frontend/src/layouts/default.vue | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/apps/frontend/src/layouts/default.vue b/apps/frontend/src/layouts/default.vue
index b7841dce07..a8d6ca0dfb 100644
--- a/apps/frontend/src/layouts/default.vue
+++ b/apps/frontend/src/layouts/default.vue
@@ -425,6 +425,7 @@
 				</ButtonStyled>
 				<ButtonStyled v-if="auth.user" type="transparent">
 					<OverflowMenu
+						ref="notificationsOverflow"
 						:dropdown-id="`${basePopoutId}-notifications`"
 						class="btn-dropdown-animation relative flex items-center gap-1 rounded-xl bg-transparent px-2 py-1"
 						:options="[]"
@@ -443,14 +444,17 @@
 						<template #menu-header>
 							<div class="notifications-dropdown flex min-w-[300px] flex-col gap-2 p-2">
 								<div class="flex items-center justify-between gap-2 rounded-lg">
-									<button class="iconified-button" @click="router.push('/dashboard/notifications')">
+									<button
+										class="iconified-button"
+										@click="handleViewAllNotifications"
+									>
 										<BellIcon aria-hidden="true" />
 										{{ formatMessage(messages.viewAllNotifications) }}
 									</button>
 									<button
 										v-if="unreadNotificationsCount > 0"
 										class="iconified-button"
-										@click.stop="handleMarkAllAsRead"
+										@click="handleMarkAllAsRead"
 									>
 										<CheckCheckIcon />
 										{{ formatMessage(messages.markAllAsRead) }}
@@ -951,6 +955,7 @@ const showTinMismatchBanner = computed(() => {
 })
 
 const basePopoutId = useId()
+const notificationsOverflow = ref(null)
 
 const navMenuMessages = defineMessages({
 	home: {
@@ -1413,11 +1418,17 @@ async function handleMarkAsRead(notif) {
 	}
 }
 
+function handleViewAllNotifications() {
+	notificationsOverflow.value?.close()
+	router.push('/dashboard/notifications')
+}
+
 async function handleMarkAllAsRead() {
 	try {
 		const ids = notificationsData.value?.map((n) => n.id) || []
 		await markAsRead(ids)
 		await refreshNotifications()
+		notificationsOverflow.value?.close()
 	} catch (err) {
 		console.error('Error marking all as read:', err)
 	}

From ded30a04058a91b1658221a74c3665932b7725be Mon Sep 17 00:00:00 2001
From: Creeperkatze <178587183+Creeperkatze@users.noreply.github.com>
Date: Mon, 2 Feb 2026 23:21:14 +0100
Subject: [PATCH 05/32] Remove add button

---
 apps/frontend/src/layouts/default.vue | 50 ++++-----------------------
 1 file changed, 6 insertions(+), 44 deletions(-)

diff --git a/apps/frontend/src/layouts/default.vue b/apps/frontend/src/layouts/default.vue
index a8d6ca0dfb..346cedb1fb 100644
--- a/apps/frontend/src/layouts/default.vue
+++ b/apps/frontend/src/layouts/default.vue
@@ -385,44 +385,6 @@
 						</template>
 					</OverflowMenu>
 				</ButtonStyled>
-				<ButtonStyled type="transparent">
-					<OverflowMenu
-						v-if="auth.user"
-						class="btn-dropdown-animation flex items-center gap-1 rounded-xl bg-transparent px-2 py-1"
-						position="bottom"
-						direction="left"
-						:dropdown-id="`${basePopoutId}-create`"
-						:aria-label="formatMessage(messages.createNew)"
-						:options="[
-							{
-								id: 'new-project',
-								action: (event) => $refs.modal_creation.show(event),
-							},
-							{
-								id: 'new-collection',
-								action: (event) => $refs.modal_collection_creation.show(event),
-							},
-							{ divider: true },
-							{
-								id: 'new-organization',
-								action: (event) => $refs.modal_organization_creation.show(event),
-							},
-						]"
-					>
-						<PlusIcon aria-hidden="true" />
-						<DropdownIcon aria-hidden="true" class="h-5 w-5 text-secondary" />
-						<template #new-project>
-							<BoxIcon aria-hidden="true" /> {{ formatMessage(messages.newProject) }}
-						</template>
-						<!-- <template #import-project> <BoxImportIcon /> Import project </template>-->
-						<template #new-collection>
-							<CollectionIcon aria-hidden="true" /> {{ formatMessage(messages.newCollection) }}
-						</template>
-						<template #new-organization>
-							<OrganizationIcon aria-hidden="true" /> {{ formatMessage(messages.newOrganization) }}
-						</template>
-					</OverflowMenu>
-				</ButtonStyled>
 				<ButtonStyled v-if="auth.user" type="transparent">
 					<OverflowMenu
 						ref="notificationsOverflow"
@@ -444,10 +406,7 @@
 						<template #menu-header>
 							<div class="notifications-dropdown flex min-w-[300px] flex-col gap-2 p-2">
 								<div class="flex items-center justify-between gap-2 rounded-lg">
-									<button
-										class="iconified-button"
-										@click="handleViewAllNotifications"
-									>
+									<button class="iconified-button" @click="handleViewAllNotifications">
 										<BellIcon aria-hidden="true" />
 										{{ formatMessage(messages.viewAllNotifications) }}
 									</button>
@@ -473,7 +432,11 @@
 												:to="`/project/${notif.extra_data.project.slug}`"
 												tabindex="-1"
 											>
-												<Avatar size="xs" :src="notif.extra_data.project.icon_url" aria-hidden="true" />
+												<Avatar
+													size="xs"
+													:src="notif.extra_data.project.icon_url"
+													aria-hidden="true"
+												/>
 											</NuxtLink>
 											<NuxtLink
 												v-else-if="notif.extra_data?.organization"
@@ -825,7 +788,6 @@ import {
 	ChartIcon,
 	CheckCheckIcon,
 	CheckIcon,
-	CollectionIcon,
 	CompassIcon,
 	CurrencyIcon,
 	DownloadIcon,

From eece584047fc713ab256941cdbde937c79eb7db7 Mon Sep 17 00:00:00 2001
From: Creeperkatze <178587183+Creeperkatze@users.noreply.github.com>
Date: Tue, 3 Feb 2026 12:22:25 +0100
Subject: [PATCH 06/32] Use real notifications

---
 apps/frontend/src/layouts/default.vue | 116 +++++++++++++-------------
 1 file changed, 58 insertions(+), 58 deletions(-)

diff --git a/apps/frontend/src/layouts/default.vue b/apps/frontend/src/layouts/default.vue
index 346cedb1fb..7c28d279ac 100644
--- a/apps/frontend/src/layouts/default.vue
+++ b/apps/frontend/src/layouts/default.vue
@@ -778,60 +778,62 @@
 	</div>
 </template>
 <script setup>
-import {
-	AffiliateIcon,
-	ArrowBigUpDashIcon,
-	BellIcon,
-	BoxIcon,
-	BracesIcon,
-	CalendarIcon,
-	ChartIcon,
-	CheckCheckIcon,
-	CheckIcon,
-	CompassIcon,
-	CurrencyIcon,
-	DownloadIcon,
-	DropdownIcon,
-	FileIcon,
-	GlassesIcon,
-	HamburgerIcon,
-	HomeIcon,
-	IssuesIcon,
-	LibraryIcon,
-	LogInIcon,
-	LogOutIcon,
-	ModrinthIcon,
-	MoonIcon,
-	OrganizationIcon,
-	PackageOpenIcon,
-	PaintbrushIcon,
-	PlugIcon,
-	PlusIcon,
-	ReportIcon,
-	ScaleIcon,
-	SearchIcon,
-	ServerIcon,
-	SettingsIcon,
-	ShieldAlertIcon,
-	SunIcon,
-	TransferIcon,
-	UserIcon,
-	UserPlusIcon,
-	UserSearchIcon,
-	VersionIcon,
-	XIcon,
-} from '@modrinth/assets'
-import {
-	Avatar,
-	ButtonStyled,
-	commonMessages,
-	commonProjectTypeCategoryMessages,
-	defineMessages,
-	DoubleIcon,
-	OverflowMenu,
-	useRelativeTime,
-	useVIntl,
-} from '@modrinth/ui'
+import
+	{
+		AffiliateIcon,
+		ArrowBigUpDashIcon,
+		BellIcon,
+		BoxIcon,
+		BracesIcon,
+		CalendarIcon,
+		ChartIcon,
+		CheckCheckIcon,
+		CheckIcon,
+		CompassIcon,
+		CurrencyIcon,
+		DownloadIcon,
+		DropdownIcon,
+		FileIcon,
+		GlassesIcon,
+		HamburgerIcon,
+		HomeIcon,
+		IssuesIcon,
+		LibraryIcon,
+		LogInIcon,
+		LogOutIcon,
+		ModrinthIcon,
+		MoonIcon,
+		OrganizationIcon,
+		PackageOpenIcon,
+		PaintbrushIcon,
+		PlugIcon,
+		PlusIcon,
+		ReportIcon,
+		ScaleIcon,
+		SearchIcon,
+		ServerIcon,
+		SettingsIcon,
+		ShieldAlertIcon,
+		SunIcon,
+		TransferIcon,
+		UserIcon,
+		UserPlusIcon,
+		UserSearchIcon,
+		VersionIcon,
+		XIcon,
+	} from '@modrinth/assets'
+import
+	{
+		Avatar,
+		ButtonStyled,
+		commonMessages,
+		commonProjectTypeCategoryMessages,
+		defineMessages,
+		DoubleIcon,
+		OverflowMenu,
+		useRelativeTime,
+		useVIntl,
+	} from '@modrinth/ui'
 import { isAdmin, isStaff, UserBadge } from '@modrinth/utils'
 
 import TextLogo from '~/components/brand/TextLogo.vue'
@@ -850,7 +852,7 @@ import ProjectCreateModal from '~/components/ui/create/ProjectCreateModal.vue'
 import ModrinthFooter from '~/components/ui/ModrinthFooter.vue'
 import TeleportOverflowMenu from '~/components/ui/servers/TeleportOverflowMenu.vue'
 import { errors as generatedStateErrors } from '~/generated/state.json'
-import { markAsRead, mockNotifications } from '~/helpers/platform-notifications'
+import { markAsRead } from '~/helpers/platform-notifications'
 import { acceptTeamInvite, removeSelfFromTeam } from '~/helpers/teams'
 import { getProjectTypeMessage } from '~/utils/i18n-project-type.ts'
 
@@ -879,9 +881,7 @@ const { data: notificationsData, refresh: refreshNotifications } = await useAsyn
 	async () => {
 		if (!auth.value.user) return null
 
-		return mockNotifications
-
-		// return useBaseFetch(`user/${auth.value.user.id}/notifications`)
+		return useBaseFetch(`user/${auth.value.user.id}/notifications`)
 	},
 	{
 		watch: [auth],

From 123b48565161b31a866567fb440f10f1fe66b134 Mon Sep 17 00:00:00 2001
From: Creeperkatze <178587183+Creeperkatze@users.noreply.github.com>
Date: Tue, 3 Feb 2026 12:55:40 +0100
Subject: [PATCH 07/32] Group notifications, remove mock data

---
 .../src/helpers/platform-notifications.ts     |  61 --------
 apps/frontend/src/layouts/default.vue         | 148 ++++++++++--------
 2 files changed, 79 insertions(+), 130 deletions(-)

diff --git a/apps/frontend/src/helpers/platform-notifications.ts b/apps/frontend/src/helpers/platform-notifications.ts
index bc961a993b..e151d583a5 100644
--- a/apps/frontend/src/helpers/platform-notifications.ts
+++ b/apps/frontend/src/helpers/platform-notifications.ts
@@ -2,67 +2,6 @@ import type { Organization, Project, Report, User, Version } from '@modrinth/uti
 
 type Thread = { id: string }
 
-// TODO: Remove mock data when API is ready
-export const mockNotifications: PlatformNotification[] = [
-	{
-		id: '1',
-		user_id: 'mock-user-id',
-		type: 'project_update',
-		title: 'New project created',
-		text: 'Your project was successfully created',
-		link: '/project/test-project',
-		read: false,
-		created: new Date().toISOString(),
-		actions: [],
-		body: { project_id: 'mock-project-id' },
-		extra_data: {
-			project: {
-				slug: 'test-project',
-				icon_url:
-					'https://cdn.modrinth.com/data/AANobbMI/295862f4724dc3f78df3447ad6072b2dcd3ef0c9_96.webp',
-			},
-		},
-	},
-	{
-		id: '2',
-		user_id: 'mock-user-id',
-		type: 'team_invite',
-		title: 'Invited to join team',
-		text: 'You have been invited to join a project team',
-		link: '/project/invited-project',
-		read: false,
-		created: new Date().toISOString(),
-		actions: [],
-		body: { team_id: 'test-team-id', project_id: 'invited-project-id' },
-		extra_data: {
-			project: {
-				slug: 'invited-project',
-				icon_url:
-					'https://cdn.modrinth.com/data/AANobbMI/295862f4724dc3f78df3447ad6072b2dcd3ef0c9_96.webp',
-			},
-		},
-	},
-	{
-		id: '3',
-		user_id: 'mock-user-id',
-		type: 'organization_invite',
-		title: 'Organization invitation',
-		text: 'You have been invited to join an organization',
-		link: '/organization/test-org',
-		read: false,
-		created: new Date().toISOString(),
-		actions: [],
-		body: { organization_id: 'test-org-id', invited_by: 'inviter-id' },
-		extra_data: {
-			organization: {
-				slug: 'test-org',
-				icon_url:
-					'https://cdn.modrinth.com/data/AANobbMI/295862f4724dc3f78df3447ad6072b2dcd3ef0c9_96.webp',
-			},
-		},
-	},
-]
-
 export type PlatformNotificationAction = {
 	title: string
 	action_route: [string, string]
diff --git a/apps/frontend/src/layouts/default.vue b/apps/frontend/src/layouts/default.vue
index 7c28d279ac..b19e767a12 100644
--- a/apps/frontend/src/layouts/default.vue
+++ b/apps/frontend/src/layouts/default.vue
@@ -464,22 +464,23 @@
 										</template>
 										<template #secondary>
 											<ScaleIcon
-												v-if="notif.type === 'moderator_message' || notif.type === 'status_change'"
-												class="moderation-color"
+												v-if="
+													notif.body?.type === 'moderator_message' ||
+													notif.body?.type === 'status_change'
+												"
 											/>
 											<UserPlusIcon
-												v-else-if="notif.type === 'team_invite' && notif.extra_data?.project"
-												class="creator-color"
+												v-else-if="notif.body?.type === 'team_invite' && notif.extra_data?.project"
 											/>
 											<UserPlusIcon
 												v-else-if="
-													notif.type === 'organization_invite' && notif.extra_data?.organization
+													notif.body?.type === 'organization_invite' &&
+													notif.extra_data?.organization
 												"
-												class="creator-color"
 											/>
 											<VersionIcon
 												v-else-if="
-													notif.type === 'project_update' &&
+													notif.body?.type === 'project_update' &&
 													notif.extra_data?.project &&
 													notif.extra_data?.version
 												"
@@ -499,7 +500,8 @@
 									<div class="flex gap-2">
 										<button
 											v-if="
-												(notif.type === 'team_invite' || notif.type === 'organization_invite') &&
+												(notif.body?.type === 'team_invite' ||
+													notif.body?.type === 'organization_invite') &&
 												!notif.read
 											"
 											class="iconified-button square-button brand-button"
@@ -509,7 +511,8 @@
 										</button>
 										<button
 											v-if="
-												(notif.type === 'team_invite' || notif.type === 'organization_invite') &&
+												(notif.body?.type === 'team_invite' ||
+													notif.body?.type === 'organization_invite') &&
 												!notif.read
 											"
 											class="iconified-button square-button danger-button"
@@ -771,69 +774,67 @@
 			<ProjectCreateModal v-if="auth.user" ref="modal_creation" />
 			<CollectionCreateModal ref="modal_collection_creation" />
 			<OrganizationCreateModal ref="modal_organization_creation" />
-			<BatchCreditModal v-if="auth.user && isAdmin(auth.user)" ref="modal_batch_credit" />
+			<BatchCreditModal v-if="auth.user" ref="modal_batch_credit" />
 			<slot id="main" />
 		</main>
 		<ModrinthFooter />
 	</div>
 </template>
 <script setup>
-import
-	{
-		AffiliateIcon,
-		ArrowBigUpDashIcon,
-		BellIcon,
-		BoxIcon,
-		BracesIcon,
-		CalendarIcon,
-		ChartIcon,
-		CheckCheckIcon,
-		CheckIcon,
-		CompassIcon,
-		CurrencyIcon,
-		DownloadIcon,
-		DropdownIcon,
-		FileIcon,
-		GlassesIcon,
-		HamburgerIcon,
-		HomeIcon,
-		IssuesIcon,
-		LibraryIcon,
-		LogInIcon,
-		LogOutIcon,
-		ModrinthIcon,
-		MoonIcon,
-		OrganizationIcon,
-		PackageOpenIcon,
-		PaintbrushIcon,
-		PlugIcon,
-		PlusIcon,
-		ReportIcon,
-		ScaleIcon,
-		SearchIcon,
-		ServerIcon,
-		SettingsIcon,
-		ShieldAlertIcon,
-		SunIcon,
-		TransferIcon,
-		UserIcon,
-		UserPlusIcon,
-		UserSearchIcon,
-		VersionIcon,
-		XIcon,
-	} from '@modrinth/assets'
-import
-	{
-		Avatar,
-		ButtonStyled,
-		commonMessages,
-		commonProjectTypeCategoryMessages,
-		defineMessages,
-		DoubleIcon,
-		OverflowMenu,
-		useRelativeTime,
-		useVIntl,
-	} from '@modrinth/ui'
+import {
+	AffiliateIcon,
+	ArrowBigUpDashIcon,
+	BellIcon,
+	BoxIcon,
+	BracesIcon,
+	CalendarIcon,
+	ChartIcon,
+	CheckCheckIcon,
+	CheckIcon,
+	CompassIcon,
+	CurrencyIcon,
+	DownloadIcon,
+	DropdownIcon,
+	FileIcon,
+	GlassesIcon,
+	HamburgerIcon,
+	HomeIcon,
+	IssuesIcon,
+	LibraryIcon,
+	LogInIcon,
+	LogOutIcon,
+	ModrinthIcon,
+	MoonIcon,
+	OrganizationIcon,
+	PackageOpenIcon,
+	PaintbrushIcon,
+	PlugIcon,
+	PlusIcon,
+	ReportIcon,
+	ScaleIcon,
+	SearchIcon,
+	ServerIcon,
+	SettingsIcon,
+	ShieldAlertIcon,
+	SunIcon,
+	TransferIcon,
+	UserIcon,
+	UserPlusIcon,
+	UserSearchIcon,
+	VersionIcon,
+	XIcon,
+} from '@modrinth/assets'
+import {
+	Avatar,
+	ButtonStyled,
+	commonMessages,
+	commonProjectTypeCategoryMessages,
+	defineMessages,
+	DoubleIcon,
+	OverflowMenu,
+	useRelativeTime,
+	useVIntl,
+} from '@modrinth/ui'
 import { isAdmin, isStaff, UserBadge } from '@modrinth/utils'
 
 import TextLogo from '~/components/brand/TextLogo.vue'
@@ -852,7 +853,11 @@ import ProjectCreateModal from '~/components/ui/create/ProjectCreateModal.vue'
 import ModrinthFooter from '~/components/ui/ModrinthFooter.vue'
 import TeleportOverflowMenu from '~/components/ui/servers/TeleportOverflowMenu.vue'
 import { errors as generatedStateErrors } from '~/generated/state.json'
-import { markAsRead } from '~/helpers/platform-notifications'
+import {
+	fetchExtraNotificationData,
+	groupNotifications,
+	markAsRead,
+} from '~/helpers/platform-notifications.ts'
 import { acceptTeamInvite, removeSelfFromTeam } from '~/helpers/teams'
 import { getProjectTypeMessage } from '~/utils/i18n-project-type.ts'
 
@@ -881,7 +886,8 @@ const { data: notificationsData, refresh: refreshNotifications } = await useAsyn
 	async () => {
 		if (!auth.value.user) return null
 
-		return useBaseFetch(`user/${auth.value.user.id}/notifications`)
+		const notifs = await useBaseFetch(`user/${auth.value.user.id}/notifications`)
+		return await fetchExtraNotificationData(notifs)
 	},
 	{
 		watch: [auth],
@@ -895,7 +901,7 @@ const unreadNotificationsCount = computed(() => {
 
 const recentNotifications = computed(() => {
 	if (!notificationsData.value) return []
-	return notificationsData.value.slice(0, 5)
+	return groupNotifications(notificationsData.value.slice(0, 5), false)
 })
 
 const showTaxComplianceBanner = computed(() => {
@@ -1771,6 +1777,10 @@ async function handleMarkAllAsRead() {
 	.creator-color {
 		color: var(--color-blue);
 	}
+
+	.double-icon .secondary svg {
+		color: var(--color-text);
+	}
 }
 </style>
 <style src="vue-multiselect/dist/vue-multiselect.css"></style>

From 6b6403a1197df53f70df8c96644bb4feae0c7fed Mon Sep 17 00:00:00 2001
From: Creeperkatze <178587183+Creeperkatze@users.noreply.github.com>
Date: Tue, 3 Feb 2026 12:57:05 +0100
Subject: [PATCH 08/32] Always close on double click

---
 apps/frontend/src/layouts/default.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/frontend/src/layouts/default.vue b/apps/frontend/src/layouts/default.vue
index b19e767a12..10e5151e51 100644
--- a/apps/frontend/src/layouts/default.vue
+++ b/apps/frontend/src/layouts/default.vue
@@ -391,7 +391,7 @@
 						:dropdown-id="`${basePopoutId}-notifications`"
 						class="btn-dropdown-animation relative flex items-center gap-1 rounded-xl bg-transparent px-2 py-1"
 						:options="[]"
-						@dblclick="router.push('/dashboard/notifications')"
+						@dblclick="handleViewAllNotifications"
 					>
 						<div class="relative flex h-5 flex-shrink-0 items-center justify-center">
 							<BellIcon aria-hidden="true" class="h-5 w-5" />

From c140e0e4eb6e942686fa69e4a30b82f0fe9dea7f Mon Sep 17 00:00:00 2001
From: Creeperkatze <178587183+Creeperkatze@users.noreply.github.com>
Date: Tue, 3 Feb 2026 12:57:59 +0100
Subject: [PATCH 09/32] Use grouped count

---
 apps/frontend/src/layouts/default.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/apps/frontend/src/layouts/default.vue b/apps/frontend/src/layouts/default.vue
index 10e5151e51..95fbb53fc9 100644
--- a/apps/frontend/src/layouts/default.vue
+++ b/apps/frontend/src/layouts/default.vue
@@ -896,7 +896,11 @@ const { data: notificationsData, refresh: refreshNotifications } = await useAsyn
 
 const unreadNotificationsCount = computed(() => {
 	if (!notificationsData.value) return 0
-	return notificationsData.value.filter((n) => !n.read).length
+	const grouped = groupNotifications(
+		notificationsData.value.filter((n) => !n.read),
+		false,
+	)
+	return grouped.length
 })
 
 const recentNotifications = computed(() => {

From 80f1c285d5de7fa6b16ccf27d18cd3c1b6173a01 Mon Sep 17 00:00:00 2001
From: Creeperkatze <178587183+Creeperkatze@users.noreply.github.com>
Date: Tue, 3 Feb 2026 13:26:04 +0100
Subject: [PATCH 10/32] More notification count labels

---
 apps/frontend/src/layouts/default.vue | 14 +++--
 apps/frontend/src/pages/dashboard.vue | 76 +++++++++++++++++++--------
 2 files changed, 65 insertions(+), 25 deletions(-)

diff --git a/apps/frontend/src/layouts/default.vue b/apps/frontend/src/layouts/default.vue
index 95fbb53fc9..e92f817d4c 100644
--- a/apps/frontend/src/layouts/default.vue
+++ b/apps/frontend/src/layouts/default.vue
@@ -391,7 +391,6 @@
 						:dropdown-id="`${basePopoutId}-notifications`"
 						class="btn-dropdown-animation relative flex items-center gap-1 rounded-xl bg-transparent px-2 py-1"
 						:options="[]"
-						@dblclick="handleViewAllNotifications"
 					>
 						<div class="relative flex h-5 flex-shrink-0 items-center justify-center">
 							<BellIcon aria-hidden="true" class="h-5 w-5" />
@@ -545,7 +544,16 @@
 						<UserIcon aria-hidden="true" /> {{ formatMessage(messages.profile) }}
 					</template>
 					<template #notifications>
-						<BellIcon aria-hidden="true" /> {{ formatMessage(commonMessages.notificationsLabel) }}
+						<div class="flex items-center gap-2">
+							<BellIcon aria-hidden="true" />
+							<span>{{ formatMessage(commonMessages.notificationsLabel) }}</span>
+							<span
+								v-if="unreadNotificationsCount > 0"
+								class="rounded-full bg-brand-highlight px-2 text-sm font-bold text-brand"
+							>
+								{{ unreadNotificationsCount }}
+							</span>
+						</div>
 					</template>
 					<template #reports>
 						<ReportIcon aria-hidden="true" /> {{ formatMessage(messages.activeReports) }}
@@ -838,6 +846,7 @@ import {
 import { isAdmin, isStaff, UserBadge } from '@modrinth/utils'
 
 import TextLogo from '~/components/brand/TextLogo.vue'
+import TeleportOverflowMenu from '~/components/ui/servers/TeleportOverflowMenu.vue'
 import BatchCreditModal from '~/components/ui/admin/BatchCreditModal.vue'
 import GeneratedStateErrorsBanner from '~/components/ui/banner/GeneratedStateErrorsBanner.vue'
 import PreviewBanner from '~/components/ui/banner/PreviewBanner.vue'
@@ -851,7 +860,6 @@ import CollectionCreateModal from '~/components/ui/create/CollectionCreateModal.
 import OrganizationCreateModal from '~/components/ui/create/OrganizationCreateModal.vue'
 import ProjectCreateModal from '~/components/ui/create/ProjectCreateModal.vue'
 import ModrinthFooter from '~/components/ui/ModrinthFooter.vue'
-import TeleportOverflowMenu from '~/components/ui/servers/TeleportOverflowMenu.vue'
 import { errors as generatedStateErrors } from '~/generated/state.json'
 import {
 	fetchExtraNotificationData,
diff --git a/apps/frontend/src/pages/dashboard.vue b/apps/frontend/src/pages/dashboard.vue
index 5b99a26889..48180d7d69 100644
--- a/apps/frontend/src/pages/dashboard.vue
+++ b/apps/frontend/src/pages/dashboard.vue
@@ -2,28 +2,35 @@
 	<div class="normal-page !mt-8">
 		<div class="normal-page__sidebar">
 			<NavStack
-				:items="[
-					{ type: 'heading', label: 'Dashboard' },
-					{ link: '/dashboard', label: 'Overview', icon: DashboardIcon },
-					{ link: '/dashboard/notifications', label: 'Notifications', icon: NotificationsIcon },
-					{ link: '/dashboard/reports', label: 'Active reports', icon: ReportIcon },
-					{
-						link: '/dashboard/collections',
-						label: formatMessage(commonMessages.collectionsLabel),
-						icon: LibraryIcon,
-					},
-					{ type: 'heading', label: 'Creators' },
-					{ link: '/dashboard/projects', label: 'Projects', icon: ListIcon },
-					{ link: '/dashboard/organizations', label: 'Organizations', icon: OrganizationIcon },
-					{ link: '/dashboard/analytics', label: 'Analytics', icon: ChartIcon },
-					{
-						link: '/dashboard/affiliate-links',
-						label: formatMessage(commonMessages.affiliateLinksButton),
-						icon: AffiliateIcon,
-						shown: isAffiliate,
-					},
-					{ link: '/dashboard/revenue', label: 'Revenue', icon: CurrencyIcon, matchNested: true },
-				]"
+				:items="
+					[
+						{ type: 'heading', label: 'Dashboard' },
+						{ link: '/dashboard', label: 'Overview', icon: DashboardIcon },
+						{
+							link: '/dashboard/notifications',
+							label: 'Notifications',
+							icon: NotificationsIcon,
+							badge: unreadNotificationsCount > 0 ? `${unreadNotificationsCount}` : undefined,
+						},
+						{ link: '/dashboard/reports', label: 'Active reports', icon: ReportIcon },
+						{
+							link: '/dashboard/collections',
+							label: formatMessage(commonMessages.collectionsLabel),
+							icon: LibraryIcon,
+						},
+						{ type: 'heading', label: 'Creators' },
+						{ link: '/dashboard/projects', label: 'Projects', icon: ListIcon },
+						{ link: '/dashboard/organizations', label: 'Organizations', icon: OrganizationIcon },
+						{ link: '/dashboard/analytics', label: 'Analytics', icon: ChartIcon },
+						{
+							link: '/dashboard/affiliate-links',
+							label: formatMessage(commonMessages.affiliateLinksButton),
+							icon: AffiliateIcon,
+							shown: isAffiliate,
+						},
+						{ link: '/dashboard/revenue', label: 'Revenue', icon: CurrencyIcon, matchNested: true },
+					].filter(Boolean)
+				"
 			/>
 		</div>
 		<div class="normal-page__content mt-4 lg:!mt-0">
@@ -47,6 +54,10 @@ import { commonMessages, useVIntl } from '@modrinth/ui'
 import { type User, UserBadge } from '@modrinth/utils'
 
 import NavStack from '~/components/ui/NavStack.vue'
+import {
+	fetchExtraNotificationData,
+	groupNotifications,
+} from '~/helpers/platform-notifications.ts'
 
 const auth = (await useAuth()) as Ref<{ user: User | null }>
 
@@ -65,4 +76,25 @@ useSeoMeta({
 })
 
 const route = useNativeRoute()
+
+const { data: notificationsData } = await useAsyncData(
+	'dashboard-nav-notifications',
+	async () => {
+		if (!auth.value.user) return null
+		const notifs = await useBaseFetch(`user/${auth.value.user.id}/notifications`)
+		return await fetchExtraNotificationData(notifs)
+	},
+	{
+		watch: [auth],
+	},
+)
+
+const unreadNotificationsCount = computed(() => {
+	if (!notificationsData.value) return 0
+	const grouped = groupNotifications(
+		notificationsData.value.filter((n) => !n.read),
+		false,
+	)
+	return grouped.length
+})
 </script>

From d131f3621c09bd4bdba8a0317636d29c76876319 Mon Sep 17 00:00:00 2001
From: Creeperkatze <178587183+Creeperkatze@users.noreply.github.com>
Date: Tue, 3 Feb 2026 13:37:08 +0100
Subject: [PATCH 11/32] Add no notifications text

---
 apps/frontend/src/layouts/default.vue | 138 ++++++++++++++------------
 1 file changed, 76 insertions(+), 62 deletions(-)

diff --git a/apps/frontend/src/layouts/default.vue b/apps/frontend/src/layouts/default.vue
index e92f817d4c..dee5a395dd 100644
--- a/apps/frontend/src/layouts/default.vue
+++ b/apps/frontend/src/layouts/default.vue
@@ -393,7 +393,7 @@
 						:options="[]"
 					>
 						<div class="relative flex h-5 flex-shrink-0 items-center justify-center">
-							<BellIcon aria-hidden="true" class="h-5 w-5" />
+							<BellIcon aria-hidden="true" class="h-5 w-5" style="transform: none" />
 							<div
 								v-if="unreadNotificationsCount > 0"
 								class="absolute -right-2 -top-2 flex h-4 w-4 items-center justify-center rounded-full bg-brand text-[10px] font-bold text-brand-inverted"
@@ -419,6 +419,12 @@
 									</button>
 								</div>
 								<div class="border-t border-divider"></div>
+								<div
+									v-if="recentNotifications.length === 0"
+									class="flex items-center justify-center rounded-lg bg-transparent py-4 text-secondary"
+								>
+									{{ formatMessage(messages.noUnreadNotifications) }}
+								</div>
 								<div
 									v-for="notif in recentNotifications"
 									:key="notif.id"
@@ -789,64 +795,65 @@
 	</div>
 </template>
 <script setup>
-import {
-	AffiliateIcon,
-	ArrowBigUpDashIcon,
-	BellIcon,
-	BoxIcon,
-	BracesIcon,
-	CalendarIcon,
-	ChartIcon,
-	CheckCheckIcon,
-	CheckIcon,
-	CompassIcon,
-	CurrencyIcon,
-	DownloadIcon,
-	DropdownIcon,
-	FileIcon,
-	GlassesIcon,
-	HamburgerIcon,
-	HomeIcon,
-	IssuesIcon,
-	LibraryIcon,
-	LogInIcon,
-	LogOutIcon,
-	ModrinthIcon,
-	MoonIcon,
-	OrganizationIcon,
-	PackageOpenIcon,
-	PaintbrushIcon,
-	PlugIcon,
-	PlusIcon,
-	ReportIcon,
-	ScaleIcon,
-	SearchIcon,
-	ServerIcon,
-	SettingsIcon,
-	ShieldAlertIcon,
-	SunIcon,
-	TransferIcon,
-	UserIcon,
-	UserPlusIcon,
-	UserSearchIcon,
-	VersionIcon,
-	XIcon,
-} from '@modrinth/assets'
-import {
-	Avatar,
-	ButtonStyled,
-	commonMessages,
-	commonProjectTypeCategoryMessages,
-	defineMessages,
-	DoubleIcon,
-	OverflowMenu,
-	useRelativeTime,
-	useVIntl,
-} from '@modrinth/ui'
+import
+	{
+		AffiliateIcon,
+		ArrowBigUpDashIcon,
+		BellIcon,
+		BoxIcon,
+		BracesIcon,
+		CalendarIcon,
+		ChartIcon,
+		CheckCheckIcon,
+		CheckIcon,
+		CompassIcon,
+		CurrencyIcon,
+		DownloadIcon,
+		DropdownIcon,
+		FileIcon,
+		GlassesIcon,
+		HamburgerIcon,
+		HomeIcon,
+		IssuesIcon,
+		LibraryIcon,
+		LogInIcon,
+		LogOutIcon,
+		ModrinthIcon,
+		MoonIcon,
+		OrganizationIcon,
+		PackageOpenIcon,
+		PaintbrushIcon,
+		PlugIcon,
+		PlusIcon,
+		ReportIcon,
+		ScaleIcon,
+		SearchIcon,
+		ServerIcon,
+		SettingsIcon,
+		ShieldAlertIcon,
+		SunIcon,
+		TransferIcon,
+		UserIcon,
+		UserPlusIcon,
+		UserSearchIcon,
+		VersionIcon,
+		XIcon,
+	} from '@modrinth/assets'
+import
+	{
+		Avatar,
+		ButtonStyled,
+		commonMessages,
+		commonProjectTypeCategoryMessages,
+		defineMessages,
+		DoubleIcon,
+		OverflowMenu,
+		useRelativeTime,
+		useVIntl,
+	} from '@modrinth/ui'
 import { isAdmin, isStaff, UserBadge } from '@modrinth/utils'
 
 import TextLogo from '~/components/brand/TextLogo.vue'
-import TeleportOverflowMenu from '~/components/ui/servers/TeleportOverflowMenu.vue'
 import BatchCreditModal from '~/components/ui/admin/BatchCreditModal.vue'
 import GeneratedStateErrorsBanner from '~/components/ui/banner/GeneratedStateErrorsBanner.vue'
 import PreviewBanner from '~/components/ui/banner/PreviewBanner.vue'
@@ -860,12 +867,14 @@ import CollectionCreateModal from '~/components/ui/create/CollectionCreateModal.
 import OrganizationCreateModal from '~/components/ui/create/OrganizationCreateModal.vue'
 import ProjectCreateModal from '~/components/ui/create/ProjectCreateModal.vue'
 import ModrinthFooter from '~/components/ui/ModrinthFooter.vue'
+import TeleportOverflowMenu from '~/components/ui/servers/TeleportOverflowMenu.vue'
 import { errors as generatedStateErrors } from '~/generated/state.json'
-import {
-	fetchExtraNotificationData,
-	groupNotifications,
-	markAsRead,
-} from '~/helpers/platform-notifications.ts'
+import
+	{
+		fetchExtraNotificationData,
+		groupNotifications,
+		markAsRead,
+	} from '~/helpers/platform-notifications.ts'
 import { acceptTeamInvite, removeSelfFromTeam } from '~/helpers/teams'
 import { getProjectTypeMessage } from '~/utils/i18n-project-type.ts'
 
@@ -913,7 +922,8 @@ const unreadNotificationsCount = computed(() => {
 
 const recentNotifications = computed(() => {
 	if (!notificationsData.value) return []
-	return groupNotifications(notificationsData.value.slice(0, 5), false)
+	const unread = notificationsData.value.filter((n) => !n.read)
+	return groupNotifications(unread.slice(0, 5), false)
 })
 
 const showTaxComplianceBanner = computed(() => {
@@ -1081,6 +1091,10 @@ const messages = defineMessages({
 		id: 'layout.notifications.mark-all-read',
 		defaultMessage: 'Mark all as read',
 	},
+	noUnreadNotifications: {
+		id: 'layout.notifications.no-unread',
+		defaultMessage: 'No unread notifications',
+	},
 })
 
 useHead({

From aba7e5ef4e8e30cf7c6ba8e635299df487200cee Mon Sep 17 00:00:00 2001
From: Creeperkatze <178587183+Creeperkatze@users.noreply.github.com>
Date: Tue, 3 Feb 2026 13:39:21 +0100
Subject: [PATCH 12/32] Run fix + prepr

---
 apps/frontend/src/locales/en-US/index.json | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/apps/frontend/src/locales/en-US/index.json b/apps/frontend/src/locales/en-US/index.json
index 73a49d1c8d..9338939502 100644
--- a/apps/frontend/src/locales/en-US/index.json
+++ b/apps/frontend/src/locales/en-US/index.json
@@ -1661,6 +1661,9 @@
   "layout.notifications.mark-all-read": {
     "message": "Mark all as read"
   },
+  "layout.notifications.no-unread": {
+    "message": "No unread notifications"
+  },
   "layout.notifications.view-all": {
     "message": "View all"
   },

From 434f0e8ef4976ba4b98286732d96980b93d2d164 Mon Sep 17 00:00:00 2001
From: Creeperkatze <178587183+Creeperkatze@users.noreply.github.com>
Date: Tue, 3 Feb 2026 13:40:42 +0100
Subject: [PATCH 13/32] Fix double clicking

---
 apps/frontend/src/layouts/default.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/frontend/src/layouts/default.vue b/apps/frontend/src/layouts/default.vue
index dee5a395dd..5e3437c836 100644
--- a/apps/frontend/src/layouts/default.vue
+++ b/apps/frontend/src/layouts/default.vue
@@ -391,6 +391,7 @@
 						:dropdown-id="`${basePopoutId}-notifications`"
 						class="btn-dropdown-animation relative flex items-center gap-1 rounded-xl bg-transparent px-2 py-1"
 						:options="[]"
+						@dblclick="handleViewAllNotifications"
 					>
 						<div class="relative flex h-5 flex-shrink-0 items-center justify-center">
 							<BellIcon aria-hidden="true" class="h-5 w-5" style="transform: none" />

From f168603c51f6790eda8b2783d4e440a105f4374d Mon Sep 17 00:00:00 2001
From: Creeperkatze <178587183+Creeperkatze@users.noreply.github.com>
Date: Tue, 3 Feb 2026 14:09:57 +0100
Subject: [PATCH 14/32] Show max 10 notifications, remove count labels

---
 apps/frontend/src/layouts/default.vue | 8 +-------
 apps/frontend/src/pages/dashboard.vue | 1 -
 2 files changed, 1 insertion(+), 8 deletions(-)

diff --git a/apps/frontend/src/layouts/default.vue b/apps/frontend/src/layouts/default.vue
index 5e3437c836..e74d2ecd67 100644
--- a/apps/frontend/src/layouts/default.vue
+++ b/apps/frontend/src/layouts/default.vue
@@ -554,12 +554,6 @@
 						<div class="flex items-center gap-2">
 							<BellIcon aria-hidden="true" />
 							<span>{{ formatMessage(commonMessages.notificationsLabel) }}</span>
-							<span
-								v-if="unreadNotificationsCount > 0"
-								class="rounded-full bg-brand-highlight px-2 text-sm font-bold text-brand"
-							>
-								{{ unreadNotificationsCount }}
-							</span>
 						</div>
 					</template>
 					<template #reports>
@@ -924,7 +918,7 @@ const unreadNotificationsCount = computed(() => {
 const recentNotifications = computed(() => {
 	if (!notificationsData.value) return []
 	const unread = notificationsData.value.filter((n) => !n.read)
-	return groupNotifications(unread.slice(0, 5), false)
+	return groupNotifications(unread.slice(0, 10), false)
 })
 
 const showTaxComplianceBanner = computed(() => {
diff --git a/apps/frontend/src/pages/dashboard.vue b/apps/frontend/src/pages/dashboard.vue
index 48180d7d69..2a7d78de65 100644
--- a/apps/frontend/src/pages/dashboard.vue
+++ b/apps/frontend/src/pages/dashboard.vue
@@ -10,7 +10,6 @@
 							link: '/dashboard/notifications',
 							label: 'Notifications',
 							icon: NotificationsIcon,
-							badge: unreadNotificationsCount > 0 ? `${unreadNotificationsCount}` : undefined,
 						},
 						{ link: '/dashboard/reports', label: 'Active reports', icon: ReportIcon },
 						{

From 2dc2d2e89490b7d6bafe69e4ef0847d9d4b4dd37 Mon Sep 17 00:00:00 2001
From: Creeperkatze <178587183+Creeperkatze@users.noreply.github.com>
Date: Tue, 3 Feb 2026 14:51:01 +0100
Subject: [PATCH 15/32] Make notifications clickable

---
 apps/frontend/src/layouts/default.vue | 132 +++++++++++++-------------
 1 file changed, 68 insertions(+), 64 deletions(-)

diff --git a/apps/frontend/src/layouts/default.vue b/apps/frontend/src/layouts/default.vue
index e74d2ecd67..f72021ba37 100644
--- a/apps/frontend/src/layouts/default.vue
+++ b/apps/frontend/src/layouts/default.vue
@@ -437,6 +437,7 @@
 												v-if="notif.extra_data?.project"
 												:to="`/project/${notif.extra_data.project.slug}`"
 												tabindex="-1"
+												@click="notificationsOverflow?.close()"
 											>
 												<Avatar
 													size="xs"
@@ -448,6 +449,7 @@
 												v-else-if="notif.extra_data?.organization"
 												:to="`/organization/${notif.extra_data.organization.slug}`"
 												tabindex="-1"
+												@click="notificationsOverflow?.close()"
 											>
 												<Avatar
 													size="xs"
@@ -459,6 +461,7 @@
 												v-else-if="notif.extra_data?.user"
 												:to="`/user/${notif.extra_data.user.username}`"
 												tabindex="-1"
+												@click="notificationsOverflow?.close()"
 											>
 												<Avatar
 													size="xs"
@@ -495,9 +498,13 @@
 										</template>
 									</DoubleIcon>
 									<div class="min-w-0 flex-1 pr-2">
-										<div class="font-semibold text-contrast">
+										<NuxtLink
+											:to="notif.link"
+											class="font-semibold text-contrast"
+											@click="notificationsOverflow?.close()"
+										>
 											{{ notif.title }}
-										</div>
+										</NuxtLink>
 										<div class="mt-1 flex items-center gap-1 text-sm text-secondary">
 											<CalendarIcon aria-hidden="true" />
 											{{ formatRelativeTime(notif.created) }}
@@ -790,62 +797,60 @@
 	</div>
 </template>
 <script setup>
-import
-	{
-		AffiliateIcon,
-		ArrowBigUpDashIcon,
-		BellIcon,
-		BoxIcon,
-		BracesIcon,
-		CalendarIcon,
-		ChartIcon,
-		CheckCheckIcon,
-		CheckIcon,
-		CompassIcon,
-		CurrencyIcon,
-		DownloadIcon,
-		DropdownIcon,
-		FileIcon,
-		GlassesIcon,
-		HamburgerIcon,
-		HomeIcon,
-		IssuesIcon,
-		LibraryIcon,
-		LogInIcon,
-		LogOutIcon,
-		ModrinthIcon,
-		MoonIcon,
-		OrganizationIcon,
-		PackageOpenIcon,
-		PaintbrushIcon,
-		PlugIcon,
-		PlusIcon,
-		ReportIcon,
-		ScaleIcon,
-		SearchIcon,
-		ServerIcon,
-		SettingsIcon,
-		ShieldAlertIcon,
-		SunIcon,
-		TransferIcon,
-		UserIcon,
-		UserPlusIcon,
-		UserSearchIcon,
-		VersionIcon,
-		XIcon,
-	} from '@modrinth/assets'
-import
-	{
-		Avatar,
-		ButtonStyled,
-		commonMessages,
-		commonProjectTypeCategoryMessages,
-		defineMessages,
-		DoubleIcon,
-		OverflowMenu,
-		useRelativeTime,
-		useVIntl,
-	} from '@modrinth/ui'
+import {
+	AffiliateIcon,
+	ArrowBigUpDashIcon,
+	BellIcon,
+	BoxIcon,
+	BracesIcon,
+	CalendarIcon,
+	ChartIcon,
+	CheckCheckIcon,
+	CheckIcon,
+	CompassIcon,
+	CurrencyIcon,
+	DownloadIcon,
+	DropdownIcon,
+	FileIcon,
+	GlassesIcon,
+	HamburgerIcon,
+	HomeIcon,
+	IssuesIcon,
+	LibraryIcon,
+	LogInIcon,
+	LogOutIcon,
+	ModrinthIcon,
+	MoonIcon,
+	OrganizationIcon,
+	PackageOpenIcon,
+	PaintbrushIcon,
+	PlugIcon,
+	PlusIcon,
+	ReportIcon,
+	ScaleIcon,
+	SearchIcon,
+	ServerIcon,
+	SettingsIcon,
+	ShieldAlertIcon,
+	SunIcon,
+	TransferIcon,
+	UserIcon,
+	UserPlusIcon,
+	UserSearchIcon,
+	VersionIcon,
+	XIcon,
+} from '@modrinth/assets'
+import {
+	Avatar,
+	ButtonStyled,
+	commonMessages,
+	commonProjectTypeCategoryMessages,
+	defineMessages,
+	DoubleIcon,
+	OverflowMenu,
+	useRelativeTime,
+	useVIntl,
+} from '@modrinth/ui'
 import { isAdmin, isStaff, UserBadge } from '@modrinth/utils'
 
 import TextLogo from '~/components/brand/TextLogo.vue'
@@ -864,12 +869,11 @@ import ProjectCreateModal from '~/components/ui/create/ProjectCreateModal.vue'
 import ModrinthFooter from '~/components/ui/ModrinthFooter.vue'
 import TeleportOverflowMenu from '~/components/ui/servers/TeleportOverflowMenu.vue'
 import { errors as generatedStateErrors } from '~/generated/state.json'
-import
-	{
-		fetchExtraNotificationData,
-		groupNotifications,
-		markAsRead,
-	} from '~/helpers/platform-notifications.ts'
+import {
+	fetchExtraNotificationData,
+	groupNotifications,
+	markAsRead,
+} from '~/helpers/platform-notifications.ts'
 import { acceptTeamInvite, removeSelfFromTeam } from '~/helpers/teams'
 import { getProjectTypeMessage } from '~/utils/i18n-project-type.ts'
 

From 25454464c59d566b7d0675a58f50ac8c6613cc3f Mon Sep 17 00:00:00 2001
From: Creeperkatze <178587183+Creeperkatze@users.noreply.github.com>
Date: Tue, 3 Feb 2026 17:08:51 +0100
Subject: [PATCH 16/32] Create component, clean up

---
 .../components/ui/NotificationsDropdown.vue   | 287 +++++++++++++++++
 apps/frontend/src/layouts/default.vue         | 288 +-----------------
 2 files changed, 289 insertions(+), 286 deletions(-)
 create mode 100644 apps/frontend/src/components/ui/NotificationsDropdown.vue

diff --git a/apps/frontend/src/components/ui/NotificationsDropdown.vue b/apps/frontend/src/components/ui/NotificationsDropdown.vue
new file mode 100644
index 0000000000..4f41f0def0
--- /dev/null
+++ b/apps/frontend/src/components/ui/NotificationsDropdown.vue
@@ -0,0 +1,287 @@
+<template>
+	<ButtonStyled type="transparent">
+		<OverflowMenu
+			ref="notificationsOverflow"
+			:dropdown-id="effectiveDropdownId"
+			class="btn-dropdown-animation relative flex items-center gap-1 rounded-xl bg-transparent px-2 py-1"
+			:options="[]"
+			@dblclick="handleViewAllNotifications"
+		>
+			<div class="relative flex h-5 flex-shrink-0 items-center justify-center">
+				<BellIcon aria-hidden="true" class="h-5 w-5" style="transform: none" />
+				<div
+					v-if="unreadCount > 0"
+					class="absolute -right-2 -top-2 flex h-4 w-4 items-center justify-center rounded-full bg-brand text-[10px] font-bold text-brand-inverted"
+				>
+					{{ unreadCount }}
+				</div>
+			</div>
+			<DropdownIcon aria-hidden="true" class="h-5 w-5 text-secondary" />
+			<template #menu-header>
+				<div class="notifications-dropdown flex min-w-[300px] flex-col gap-2 p-2">
+					<div class="flex items-center justify-between gap-2 rounded-lg">
+						<button class="iconified-button" @click="handleViewAllNotifications">
+							<BellIcon aria-hidden="true" />
+							{{ formatMessage(messages.viewAllNotifications) }}
+						</button>
+						<button v-if="unreadCount > 0" class="iconified-button" @click="handleMarkAllAsRead">
+							<CheckCheckIcon />
+							{{ formatMessage(messages.markAllAsRead) }}
+						</button>
+					</div>
+					<div class="border-t border-divider"></div>
+					<div
+						v-if="recentNotifications.length === 0"
+						class="flex items-center justify-center rounded-lg bg-transparent py-4 text-secondary"
+					>
+						{{ formatMessage(messages.noUnreadNotifications) }}
+					</div>
+					<div
+						v-for="notif in recentNotifications"
+						:key="notif.id"
+						class="universal-card recessed group !mb-0 flex items-center gap-2 !p-4 transition-colors hover:bg-button-bg"
+					>
+						<DoubleIcon class="flex-shrink-0">
+							<template #primary>
+								<NuxtLink
+									v-if="notif.extra_data?.project"
+									:to="`/project/${notif.extra_data.project.slug}`"
+									tabindex="-1"
+									@click="notificationsOverflow?.close()"
+								>
+									<Avatar size="xs" :src="notif.extra_data.project.icon_url" aria-hidden="true" />
+								</NuxtLink>
+								<NuxtLink
+									v-else-if="notif.extra_data?.organization"
+									:to="`/organization/${notif.extra_data.organization.slug}`"
+									tabindex="-1"
+									@click="notificationsOverflow?.close()"
+								>
+									<Avatar
+										size="xs"
+										:src="notif.extra_data.organization.icon_url"
+										aria-hidden="true"
+									/>
+								</NuxtLink>
+								<NuxtLink
+									v-else-if="notif.extra_data?.user"
+									:to="`/user/${notif.extra_data.user.username}`"
+									tabindex="-1"
+									@click="notificationsOverflow?.close()"
+								>
+									<Avatar size="xs" :src="notif.extra_data.user.avatar_url" aria-hidden="true" />
+								</NuxtLink>
+								<Avatar v-else size="xs" aria-hidden="true" />
+							</template>
+							<template #secondary>
+								<ScaleIcon
+									v-if="
+										notif.body?.type === 'moderator_message' || notif.body?.type === 'status_change'
+									"
+									class="text-contrast"
+								/>
+								<UserPlusIcon
+									v-else-if="notif.body?.type === 'team_invite' && notif.extra_data?.project"
+									class="text-contrast"
+								/>
+								<UserPlusIcon
+									v-else-if="
+										notif.body?.type === 'organization_invite' && notif.extra_data?.organization
+									"
+									class="text-contrast"
+								/>
+								<VersionIcon
+									v-else-if="
+										notif.body?.type === 'project_update' &&
+										notif.extra_data?.project &&
+										notif.extra_data?.version
+									"
+									class="text-contrast"
+								/>
+								<BellIcon v-else class="text-contrast" />
+							</template>
+						</DoubleIcon>
+						<div class="min-w-0 flex-1 pr-2">
+							<NuxtLink
+								:to="notif.link"
+								class="font-semibold text-contrast"
+								@click="notificationsOverflow?.close()"
+							>
+								{{ notif.title }}
+							</NuxtLink>
+							<div class="mt-1 flex items-center gap-1 text-sm text-secondary">
+								<CalendarIcon aria-hidden="true" />
+								{{ formatRelativeTime(notif.created) }}
+							</div>
+						</div>
+						<div class="flex gap-2">
+							<button
+								v-if="
+									(notif.body?.type === 'team_invite' ||
+										notif.body?.type === 'organization_invite') &&
+									!notif.read
+								"
+								class="iconified-button square-button brand-button [&>svg]:mr-0"
+								@click.stop="handleAcceptInvite(notif)"
+							>
+								<CheckIcon />
+							</button>
+							<button
+								v-if="
+									(notif.body?.type === 'team_invite' ||
+										notif.body?.type === 'organization_invite') &&
+									!notif.read
+								"
+								class="iconified-button square-button danger-button [&>svg]:mr-0"
+								@click.stop="handleDeclineInvite(notif)"
+							>
+								<XIcon />
+							</button>
+							<button
+								v-else-if="!notif.read"
+								class="iconified-button square-button [&>svg]:mr-0"
+								@click.stop="handleMarkAsRead(notif)"
+							>
+								<CheckIcon />
+							</button>
+						</div>
+					</div>
+				</div>
+			</template>
+		</OverflowMenu>
+	</ButtonStyled>
+</template>
+
+<script setup>
+import {
+	BellIcon,
+	CalendarIcon,
+	CheckCheckIcon,
+	CheckIcon,
+	DropdownIcon,
+	ScaleIcon,
+	UserPlusIcon,
+	VersionIcon,
+	XIcon,
+} from '@modrinth/assets'
+import {
+	Avatar,
+	ButtonStyled,
+	defineMessages,
+	DoubleIcon,
+	OverflowMenu,
+	useRelativeTime,
+	useVIntl,
+} from '@modrinth/ui'
+import {
+	fetchExtraNotificationData,
+	groupNotifications,
+	markAsRead,
+} from '~/helpers/platform-notifications'
+import { acceptTeamInvite, removeSelfFromTeam } from '~/helpers/teams'
+
+const props = defineProps({
+	dropdownId: {
+		type: String,
+		default: '',
+	},
+})
+
+const { formatMessage } = useVIntl()
+const formatRelativeTime = useRelativeTime()
+const router = useNativeRouter()
+const auth = await useAuth()
+
+const effectiveDropdownId = computed(() => props.dropdownId || `notifications-dropdown-${useId()}`)
+
+const { data: notificationsData, refresh: refreshNotifications } = await useAsyncData(
+	'notifications-dropdown',
+	async () => {
+		if (!auth.value.user) return null
+
+		const notifs = await useBaseFetch(`user/${auth.value.user.id}/notifications`)
+		return await fetchExtraNotificationData(notifs)
+	},
+	{
+		watch: [auth],
+	},
+)
+
+const unreadCount = computed(() => {
+	if (!notificationsData.value) return 0
+	const grouped = groupNotifications(
+		notificationsData.value.filter((n) => !n.read),
+		false,
+	)
+	return grouped.length
+})
+
+const recentNotifications = computed(() => {
+	if (!notificationsData.value) return []
+	const unread = notificationsData.value.filter((n) => !n.read)
+	return groupNotifications(unread.slice(0, 10), false)
+})
+
+const notificationsOverflow = ref(null)
+
+const messages = defineMessages({
+	viewAllNotifications: {
+		id: 'layout.notifications.view-all',
+		defaultMessage: 'View all',
+	},
+	markAllAsRead: {
+		id: 'layout.notifications.mark-all-read',
+		defaultMessage: 'Mark all as read',
+	},
+	noUnreadNotifications: {
+		id: 'layout.notifications.no-unread',
+		defaultMessage: 'No unread notifications',
+	},
+})
+
+async function handleAcceptInvite(notif) {
+	try {
+		await acceptTeamInvite(notif.body.team_id)
+		await markAsRead([notif.id])
+		await refreshNotifications()
+	} catch (err) {
+		console.error('Error accepting invite:', err)
+	}
+}
+
+async function handleDeclineInvite(notif) {
+	try {
+		await removeSelfFromTeam(notif.body.team_id)
+		await markAsRead([notif.id])
+		await refreshNotifications()
+	} catch (err) {
+		console.error('Error declining invite:', err)
+	}
+}
+
+async function handleMarkAsRead(notif) {
+	try {
+		await markAsRead([notif.id])
+		await refreshNotifications()
+	} catch (err) {
+		console.error('Error marking as read:', err)
+	}
+}
+
+function handleViewAllNotifications() {
+	notificationsOverflow.value?.close()
+	router.push('/dashboard/notifications')
+}
+
+async function handleMarkAllAsRead() {
+	try {
+		const ids = notificationsData.value?.map((n) => n.id) || []
+		await markAsRead(ids)
+		await refreshNotifications()
+		notificationsOverflow.value?.close()
+	} catch (err) {
+		console.error('Error marking all as read:', err)
+	}
+}
+</script>
+
diff --git a/apps/frontend/src/layouts/default.vue b/apps/frontend/src/layouts/default.vue
index f72021ba37..d2cb3f5de9 100644
--- a/apps/frontend/src/layouts/default.vue
+++ b/apps/frontend/src/layouts/default.vue
@@ -385,167 +385,7 @@
 						</template>
 					</OverflowMenu>
 				</ButtonStyled>
-				<ButtonStyled v-if="auth.user" type="transparent">
-					<OverflowMenu
-						ref="notificationsOverflow"
-						:dropdown-id="`${basePopoutId}-notifications`"
-						class="btn-dropdown-animation relative flex items-center gap-1 rounded-xl bg-transparent px-2 py-1"
-						:options="[]"
-						@dblclick="handleViewAllNotifications"
-					>
-						<div class="relative flex h-5 flex-shrink-0 items-center justify-center">
-							<BellIcon aria-hidden="true" class="h-5 w-5" style="transform: none" />
-							<div
-								v-if="unreadNotificationsCount > 0"
-								class="absolute -right-2 -top-2 flex h-4 w-4 items-center justify-center rounded-full bg-brand text-[10px] font-bold text-brand-inverted"
-							>
-								{{ unreadNotificationsCount }}
-							</div>
-						</div>
-						<DropdownIcon aria-hidden="true" class="h-5 w-5 text-secondary" />
-						<template #menu-header>
-							<div class="notifications-dropdown flex min-w-[300px] flex-col gap-2 p-2">
-								<div class="flex items-center justify-between gap-2 rounded-lg">
-									<button class="iconified-button" @click="handleViewAllNotifications">
-										<BellIcon aria-hidden="true" />
-										{{ formatMessage(messages.viewAllNotifications) }}
-									</button>
-									<button
-										v-if="unreadNotificationsCount > 0"
-										class="iconified-button"
-										@click="handleMarkAllAsRead"
-									>
-										<CheckCheckIcon />
-										{{ formatMessage(messages.markAllAsRead) }}
-									</button>
-								</div>
-								<div class="border-t border-divider"></div>
-								<div
-									v-if="recentNotifications.length === 0"
-									class="flex items-center justify-center rounded-lg bg-transparent py-4 text-secondary"
-								>
-									{{ formatMessage(messages.noUnreadNotifications) }}
-								</div>
-								<div
-									v-for="notif in recentNotifications"
-									:key="notif.id"
-									class="universal-card recessed group !mb-0 flex items-center gap-2 !p-4 transition-colors hover:bg-button-bg"
-								>
-									<DoubleIcon class="flex-shrink-0">
-										<template #primary>
-											<NuxtLink
-												v-if="notif.extra_data?.project"
-												:to="`/project/${notif.extra_data.project.slug}`"
-												tabindex="-1"
-												@click="notificationsOverflow?.close()"
-											>
-												<Avatar
-													size="xs"
-													:src="notif.extra_data.project.icon_url"
-													aria-hidden="true"
-												/>
-											</NuxtLink>
-											<NuxtLink
-												v-else-if="notif.extra_data?.organization"
-												:to="`/organization/${notif.extra_data.organization.slug}`"
-												tabindex="-1"
-												@click="notificationsOverflow?.close()"
-											>
-												<Avatar
-													size="xs"
-													:src="notif.extra_data.organization.icon_url"
-													aria-hidden="true"
-												/>
-											</NuxtLink>
-											<NuxtLink
-												v-else-if="notif.extra_data?.user"
-												:to="`/user/${notif.extra_data.user.username}`"
-												tabindex="-1"
-												@click="notificationsOverflow?.close()"
-											>
-												<Avatar
-													size="xs"
-													:src="notif.extra_data.user.avatar_url"
-													aria-hidden="true"
-												/>
-											</NuxtLink>
-											<Avatar v-else size="xs" aria-hidden="true" />
-										</template>
-										<template #secondary>
-											<ScaleIcon
-												v-if="
-													notif.body?.type === 'moderator_message' ||
-													notif.body?.type === 'status_change'
-												"
-											/>
-											<UserPlusIcon
-												v-else-if="notif.body?.type === 'team_invite' && notif.extra_data?.project"
-											/>
-											<UserPlusIcon
-												v-else-if="
-													notif.body?.type === 'organization_invite' &&
-													notif.extra_data?.organization
-												"
-											/>
-											<VersionIcon
-												v-else-if="
-													notif.body?.type === 'project_update' &&
-													notif.extra_data?.project &&
-													notif.extra_data?.version
-												"
-											/>
-											<BellIcon v-else />
-										</template>
-									</DoubleIcon>
-									<div class="min-w-0 flex-1 pr-2">
-										<NuxtLink
-											:to="notif.link"
-											class="font-semibold text-contrast"
-											@click="notificationsOverflow?.close()"
-										>
-											{{ notif.title }}
-										</NuxtLink>
-										<div class="mt-1 flex items-center gap-1 text-sm text-secondary">
-											<CalendarIcon aria-hidden="true" />
-											{{ formatRelativeTime(notif.created) }}
-										</div>
-									</div>
-									<div class="flex gap-2">
-										<button
-											v-if="
-												(notif.body?.type === 'team_invite' ||
-													notif.body?.type === 'organization_invite') &&
-												!notif.read
-											"
-											class="iconified-button square-button brand-button"
-											@click.stop="handleAcceptInvite(notif)"
-										>
-											<CheckIcon />
-										</button>
-										<button
-											v-if="
-												(notif.body?.type === 'team_invite' ||
-													notif.body?.type === 'organization_invite') &&
-												!notif.read
-											"
-											class="iconified-button square-button danger-button"
-											@click.stop="handleDeclineInvite(notif)"
-										>
-											<XIcon />
-										</button>
-										<button
-											v-else-if="!notif.read"
-											class="iconified-button square-button"
-											@click.stop="handleMarkAsRead(notif)"
-										>
-											<CheckIcon />
-										</button>
-									</div>
-								</div>
-							</div>
-						</template>
-					</OverflowMenu>
-				</ButtonStyled>
+				<NotificationsDropdown v-if="auth.user" :dropdown-id="`${basePopoutId}-notifications`" />
 				<OverflowMenu
 					v-if="auth.user"
 					:dropdown-id="`${basePopoutId}-user`"
@@ -803,10 +643,7 @@ import {
 	BellIcon,
 	BoxIcon,
 	BracesIcon,
-	CalendarIcon,
 	ChartIcon,
-	CheckCheckIcon,
-	CheckIcon,
 	CompassIcon,
 	CurrencyIcon,
 	DownloadIcon,
@@ -835,9 +672,7 @@ import {
 	SunIcon,
 	TransferIcon,
 	UserIcon,
-	UserPlusIcon,
 	UserSearchIcon,
-	VersionIcon,
 	XIcon,
 } from '@modrinth/assets'
 import {
@@ -846,9 +681,7 @@ import {
 	commonMessages,
 	commonProjectTypeCategoryMessages,
 	defineMessages,
-	DoubleIcon,
 	OverflowMenu,
-	useRelativeTime,
 	useVIntl,
 } from '@modrinth/ui'
 import { isAdmin, isStaff, UserBadge } from '@modrinth/utils'
@@ -867,14 +700,9 @@ import CollectionCreateModal from '~/components/ui/create/CollectionCreateModal.
 import OrganizationCreateModal from '~/components/ui/create/OrganizationCreateModal.vue'
 import ProjectCreateModal from '~/components/ui/create/ProjectCreateModal.vue'
 import ModrinthFooter from '~/components/ui/ModrinthFooter.vue'
+import NotificationsDropdown from '~/components/ui/NotificationsDropdown.vue'
 import TeleportOverflowMenu from '~/components/ui/servers/TeleportOverflowMenu.vue'
 import { errors as generatedStateErrors } from '~/generated/state.json'
-import {
-	fetchExtraNotificationData,
-	groupNotifications,
-	markAsRead,
-} from '~/helpers/platform-notifications.ts'
-import { acceptTeamInvite, removeSelfFromTeam } from '~/helpers/teams'
 import { getProjectTypeMessage } from '~/utils/i18n-project-type.ts'
 
 const country = useUserCountry()
@@ -897,34 +725,6 @@ const { data: payoutBalance } = await useAsyncData('payout/balance', () => {
 	return useBaseFetch('payout/balance', { apiVersion: 3 })
 })
 
-const { data: notificationsData, refresh: refreshNotifications } = await useAsyncData(
-	'header-notifications',
-	async () => {
-		if (!auth.value.user) return null
-
-		const notifs = await useBaseFetch(`user/${auth.value.user.id}/notifications`)
-		return await fetchExtraNotificationData(notifs)
-	},
-	{
-		watch: [auth],
-	},
-)
-
-const unreadNotificationsCount = computed(() => {
-	if (!notificationsData.value) return 0
-	const grouped = groupNotifications(
-		notificationsData.value.filter((n) => !n.read),
-		false,
-	)
-	return grouped.length
-})
-
-const recentNotifications = computed(() => {
-	if (!notificationsData.value) return []
-	const unread = notificationsData.value.filter((n) => !n.read)
-	return groupNotifications(unread.slice(0, 10), false)
-})
-
 const showTaxComplianceBanner = computed(() => {
 	if (flags.value.testTaxForm && auth.value.user) return true
 	const bal = payoutBalance.value
@@ -944,7 +744,6 @@ const showTinMismatchBanner = computed(() => {
 })
 
 const basePopoutId = useId()
-const notificationsOverflow = ref(null)
 
 const navMenuMessages = defineMessages({
 	home: {
@@ -1082,18 +881,6 @@ const messages = defineMessages({
 		id: 'layout.mobile.close-menu',
 		defaultMessage: 'Close menu',
 	},
-	viewAllNotifications: {
-		id: 'layout.notifications.view-all',
-		defaultMessage: 'View all',
-	},
-	markAllAsRead: {
-		id: 'layout.notifications.mark-all-read',
-		defaultMessage: 'Mark all as read',
-	},
-	noUnreadNotifications: {
-		id: 'layout.notifications.no-unread',
-		defaultMessage: 'No unread notifications',
-	},
 })
 
 useHead({
@@ -1373,59 +1160,6 @@ function toggleBrowseMenu() {
 }
 
 const { cycle: changeTheme } = useTheme()
-
-function getNotificationTypeLabel(notif) {
-	if (notif.type === 'team_invite') return 'Team invitation'
-	if (notif.type === 'organization_invite') return 'Organization invitation'
-	return ''
-}
-
-const formatRelativeTime = useRelativeTime()
-
-async function handleAcceptInvite(notif) {
-	try {
-		await acceptTeamInvite(notif.body.team_id)
-		await markAsRead([notif.id])
-		await refreshNotifications()
-	} catch (err) {
-		console.error('Error accepting invite:', err)
-	}
-}
-
-async function handleDeclineInvite(notif) {
-	try {
-		await removeSelfFromTeam(notif.body.team_id)
-		await markAsRead([notif.id])
-		await refreshNotifications()
-	} catch (err) {
-		console.error('Error declining invite:', err)
-	}
-}
-
-async function handleMarkAsRead(notif) {
-	try {
-		await markAsRead([notif.id])
-		await refreshNotifications()
-	} catch (err) {
-		console.error('Error marking as read:', err)
-	}
-}
-
-function handleViewAllNotifications() {
-	notificationsOverflow.value?.close()
-	router.push('/dashboard/notifications')
-}
-
-async function handleMarkAllAsRead() {
-	try {
-		const ids = notificationsData.value?.map((n) => n.id) || []
-		await markAsRead(ids)
-		await refreshNotifications()
-		notificationsOverflow.value?.close()
-	} catch (err) {
-		console.error('Error marking all as read:', err)
-	}
-}
 </script>
 
 <style lang="scss">
@@ -1789,23 +1523,5 @@ async function handleMarkAllAsRead() {
 		transform: translateY(0);
 	}
 }
-
-.notifications-dropdown .iconified-button.square-button svg {
-	margin-right: 0;
-}
-
-.notifications-dropdown {
-	.moderation-color {
-		color: var(--color-orange);
-	}
-
-	.creator-color {
-		color: var(--color-blue);
-	}
-
-	.double-icon .secondary svg {
-		color: var(--color-text);
-	}
-}
 </style>
 <style src="vue-multiselect/dist/vue-multiselect.css"></style>

From 2e1ef88094d2379cc23666162f8a78c0d14f391c Mon Sep 17 00:00:00 2001
From: Creeperkatze <178587183+Creeperkatze@users.noreply.github.com>
Date: Tue, 3 Feb 2026 21:32:06 +0100
Subject: [PATCH 17/32] Make the entire notification item clickable

---
 .../components/ui/NotificationsDropdown.vue   | 33 +++++++++----------
 1 file changed, 15 insertions(+), 18 deletions(-)

diff --git a/apps/frontend/src/components/ui/NotificationsDropdown.vue b/apps/frontend/src/components/ui/NotificationsDropdown.vue
index 4f41f0def0..1ec1ca54a5 100644
--- a/apps/frontend/src/components/ui/NotificationsDropdown.vue
+++ b/apps/frontend/src/components/ui/NotificationsDropdown.vue
@@ -36,10 +36,12 @@
 					>
 						{{ formatMessage(messages.noUnreadNotifications) }}
 					</div>
-					<div
+					<NuxtLink
 						v-for="notif in recentNotifications"
 						:key="notif.id"
+						:to="notif.link"
 						class="universal-card recessed group !mb-0 flex items-center gap-2 !p-4 transition-colors hover:bg-button-bg"
+						@click="notificationsOverflow?.close()"
 					>
 						<DoubleIcon class="flex-shrink-0">
 							<template #primary>
@@ -47,7 +49,7 @@
 									v-if="notif.extra_data?.project"
 									:to="`/project/${notif.extra_data.project.slug}`"
 									tabindex="-1"
-									@click="notificationsOverflow?.close()"
+									@click.stop
 								>
 									<Avatar size="xs" :src="notif.extra_data.project.icon_url" aria-hidden="true" />
 								</NuxtLink>
@@ -55,7 +57,7 @@
 									v-else-if="notif.extra_data?.organization"
 									:to="`/organization/${notif.extra_data.organization.slug}`"
 									tabindex="-1"
-									@click="notificationsOverflow?.close()"
+									@click.stop
 								>
 									<Avatar
 										size="xs"
@@ -67,7 +69,7 @@
 									v-else-if="notif.extra_data?.user"
 									:to="`/user/${notif.extra_data.user.username}`"
 									tabindex="-1"
-									@click="notificationsOverflow?.close()"
+									@click.stop
 								>
 									<Avatar size="xs" :src="notif.extra_data.user.avatar_url" aria-hidden="true" />
 								</NuxtLink>
@@ -102,13 +104,9 @@
 							</template>
 						</DoubleIcon>
 						<div class="min-w-0 flex-1 pr-2">
-							<NuxtLink
-								:to="notif.link"
-								class="font-semibold text-contrast"
-								@click="notificationsOverflow?.close()"
-							>
+							<div class="font-semibold text-contrast">
 								{{ notif.title }}
-							</NuxtLink>
+							</div>
 							<div class="mt-1 flex items-center gap-1 text-sm text-secondary">
 								<CalendarIcon aria-hidden="true" />
 								{{ formatRelativeTime(notif.created) }}
@@ -121,8 +119,8 @@
 										notif.body?.type === 'organization_invite') &&
 									!notif.read
 								"
-								class="iconified-button square-button brand-button [&>svg]:mr-0"
-								@click.stop="handleAcceptInvite(notif)"
+								class="iconified-button square-button brand-button [&>svg]:!mr-0"
+								@click.stop.prevent="handleAcceptInvite(notif)"
 							>
 								<CheckIcon />
 							</button>
@@ -132,20 +130,20 @@
 										notif.body?.type === 'organization_invite') &&
 									!notif.read
 								"
-								class="iconified-button square-button danger-button [&>svg]:mr-0"
-								@click.stop="handleDeclineInvite(notif)"
+								class="iconified-button square-button danger-button [&>svg]:!mr-0"
+								@click.stop.prevent="handleDeclineInvite(notif)"
 							>
 								<XIcon />
 							</button>
 							<button
 								v-else-if="!notif.read"
-								class="iconified-button square-button [&>svg]:mr-0"
-								@click.stop="handleMarkAsRead(notif)"
+								class="iconified-button square-button [&>svg]:!mr-0"
+								@click.stop.prevent="handleMarkAsRead(notif)"
 							>
 								<CheckIcon />
 							</button>
 						</div>
-					</div>
+					</NuxtLink>
 				</div>
 			</template>
 		</OverflowMenu>
@@ -284,4 +282,3 @@ async function handleMarkAllAsRead() {
 	}
 }
 </script>
-

From 78ad6947d4a79e8dab74a75784fee5ff3ee9a4b4 Mon Sep 17 00:00:00 2001
From: Creeperkatze <178587183+Creeperkatze@users.noreply.github.com>
Date: Tue, 3 Feb 2026 21:34:49 +0100
Subject: [PATCH 18/32] Rename component

---
 .../{NotificationsDropdown.vue => NotificationsIndicator.vue} | 0
 apps/frontend/src/layouts/default.vue                         | 4 ++--
 2 files changed, 2 insertions(+), 2 deletions(-)
 rename apps/frontend/src/components/ui/{NotificationsDropdown.vue => NotificationsIndicator.vue} (100%)

diff --git a/apps/frontend/src/components/ui/NotificationsDropdown.vue b/apps/frontend/src/components/ui/NotificationsIndicator.vue
similarity index 100%
rename from apps/frontend/src/components/ui/NotificationsDropdown.vue
rename to apps/frontend/src/components/ui/NotificationsIndicator.vue
diff --git a/apps/frontend/src/layouts/default.vue b/apps/frontend/src/layouts/default.vue
index d2cb3f5de9..3afd269c3e 100644
--- a/apps/frontend/src/layouts/default.vue
+++ b/apps/frontend/src/layouts/default.vue
@@ -385,7 +385,7 @@
 						</template>
 					</OverflowMenu>
 				</ButtonStyled>
-				<NotificationsDropdown v-if="auth.user" :dropdown-id="`${basePopoutId}-notifications`" />
+				<NotificationsIndicator v-if="auth.user" :dropdown-id="`${basePopoutId}-notifications`" />
 				<OverflowMenu
 					v-if="auth.user"
 					:dropdown-id="`${basePopoutId}-user`"
@@ -700,7 +700,7 @@ import CollectionCreateModal from '~/components/ui/create/CollectionCreateModal.
 import OrganizationCreateModal from '~/components/ui/create/OrganizationCreateModal.vue'
 import ProjectCreateModal from '~/components/ui/create/ProjectCreateModal.vue'
 import ModrinthFooter from '~/components/ui/ModrinthFooter.vue'
-import NotificationsDropdown from '~/components/ui/NotificationsDropdown.vue'
+import NotificationsIndicator from '~/components/ui/NotificationsIndicator.vue'
 import TeleportOverflowMenu from '~/components/ui/servers/TeleportOverflowMenu.vue'
 import { errors as generatedStateErrors } from '~/generated/state.json'
 import { getProjectTypeMessage } from '~/utils/i18n-project-type.ts'

From 1c4b4f04d40d3048a2eb5822f0fb78d487fea7c4 Mon Sep 17 00:00:00 2001
From: Creeperkatze <178587183+Creeperkatze@users.noreply.github.com>
Date: Tue, 3 Feb 2026 21:40:23 +0100
Subject: [PATCH 19/32] Add history button, prepr

---
 .../components/ui/NotificationsIndicator.vue  | 21 ++++++++++++++++++-
 apps/frontend/src/locales/en-US/index.json    |  3 +++
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/apps/frontend/src/components/ui/NotificationsIndicator.vue b/apps/frontend/src/components/ui/NotificationsIndicator.vue
index 1ec1ca54a5..af009fd56b 100644
--- a/apps/frontend/src/components/ui/NotificationsIndicator.vue
+++ b/apps/frontend/src/components/ui/NotificationsIndicator.vue
@@ -24,10 +24,18 @@
 							<BellIcon aria-hidden="true" />
 							{{ formatMessage(messages.viewAllNotifications) }}
 						</button>
-						<button v-if="unreadCount > 0" class="iconified-button" @click="handleMarkAllAsRead">
+						<button
+							v-if="unreadCount > 0"
+							class="iconified-button"
+							@click="handleMarkAllAsRead"
+						>
 							<CheckCheckIcon />
 							{{ formatMessage(messages.markAllAsRead) }}
 						</button>
+						<button v-else class="iconified-button" @click="handleViewHistory">
+							<HistoryIcon />
+							{{ formatMessage(messages.viewHistory) }}
+						</button>
 					</div>
 					<div class="border-t border-divider"></div>
 					<div
@@ -157,6 +165,7 @@ import {
 	CheckCheckIcon,
 	CheckIcon,
 	DropdownIcon,
+	HistoryIcon,
 	ScaleIcon,
 	UserPlusIcon,
 	VersionIcon,
@@ -171,6 +180,7 @@ import {
 	useRelativeTime,
 	useVIntl,
 } from '@modrinth/ui'
+
 import {
 	fetchExtraNotificationData,
 	groupNotifications,
@@ -231,6 +241,10 @@ const messages = defineMessages({
 		id: 'layout.notifications.mark-all-read',
 		defaultMessage: 'Mark all as read',
 	},
+	viewHistory: {
+		id: 'layout.notifications.view-history',
+		defaultMessage: 'View history',
+	},
 	noUnreadNotifications: {
 		id: 'layout.notifications.no-unread',
 		defaultMessage: 'No unread notifications',
@@ -271,6 +285,11 @@ function handleViewAllNotifications() {
 	router.push('/dashboard/notifications')
 }
 
+function handleViewHistory() {
+	notificationsOverflow.value?.close()
+	router.push('/dashboard/notifications/history')
+}
+
 async function handleMarkAllAsRead() {
 	try {
 		const ids = notificationsData.value?.map((n) => n.id) || []
diff --git a/apps/frontend/src/locales/en-US/index.json b/apps/frontend/src/locales/en-US/index.json
index eb97f6e598..9abc77efc0 100644
--- a/apps/frontend/src/locales/en-US/index.json
+++ b/apps/frontend/src/locales/en-US/index.json
@@ -1667,6 +1667,9 @@
   "layout.notifications.view-all": {
     "message": "View all"
   },
+  "layout.notifications.view-history": {
+    "message": "View history"
+  },
   "moderation.moderate": {
     "message": "Moderate"
   },

From 6cb1f0cb17c3989b7fda04e859d3638fc9e08b63 Mon Sep 17 00:00:00 2001
From: Creeperkatze <178587183+Creeperkatze@users.noreply.github.com>
Date: Wed, 4 Feb 2026 19:07:16 +0100
Subject: [PATCH 20/32] Optimistic mark as read updating

---
 .../components/ui/NotificationsIndicator.vue  | 72 +++++++++++++++----
 1 file changed, 57 insertions(+), 15 deletions(-)

diff --git a/apps/frontend/src/components/ui/NotificationsIndicator.vue b/apps/frontend/src/components/ui/NotificationsIndicator.vue
index af009fd56b..05cfc3eb80 100644
--- a/apps/frontend/src/components/ui/NotificationsIndicator.vue
+++ b/apps/frontend/src/components/ui/NotificationsIndicator.vue
@@ -24,18 +24,18 @@
 							<BellIcon aria-hidden="true" />
 							{{ formatMessage(messages.viewAllNotifications) }}
 						</button>
+						<button class="iconified-button" @click="handleViewHistory">
+							<HistoryIcon />
+							{{ formatMessage(messages.viewHistory) }}
+						</button>
 						<button
 							v-if="unreadCount > 0"
-							class="iconified-button"
+							class="iconified-button danger-button"
 							@click="handleMarkAllAsRead"
 						>
 							<CheckCheckIcon />
 							{{ formatMessage(messages.markAllAsRead) }}
 						</button>
-						<button v-else class="iconified-button" @click="handleViewHistory">
-							<HistoryIcon />
-							{{ formatMessage(messages.viewHistory) }}
-						</button>
 					</div>
 					<div class="border-t border-divider"></div>
 					<div
@@ -49,7 +49,7 @@
 						:key="notif.id"
 						:to="notif.link"
 						class="universal-card recessed group !mb-0 flex items-center gap-2 !p-4 transition-colors hover:bg-button-bg"
-						@click="notificationsOverflow?.close()"
+						@click="handleNotificationClick(notif)"
 					>
 						<DoubleIcon class="flex-shrink-0">
 							<template #primary>
@@ -120,7 +120,7 @@
 								{{ formatRelativeTime(notif.created) }}
 							</div>
 						</div>
-						<div class="flex gap-2">
+						<div class="flex gap-2" @mousedown.stop>
 							<button
 								v-if="
 									(notif.body?.type === 'team_invite' ||
@@ -253,9 +253,16 @@ const messages = defineMessages({
 
 async function handleAcceptInvite(notif) {
 	try {
+		// Mark as read locally immediately
+		if (notificationsData.value) {
+			const n = notificationsData.value.find((n) => n.id === notif.id)
+			if (n) n.read = true
+		}
+
 		await acceptTeamInvite(notif.body.team_id)
-		await markAsRead([notif.id])
-		await refreshNotifications()
+		markAsRead([notif.id]).catch((err) => {
+			console.error('Error marking as read:', err)
+		})
 	} catch (err) {
 		console.error('Error accepting invite:', err)
 	}
@@ -263,9 +270,16 @@ async function handleAcceptInvite(notif) {
 
 async function handleDeclineInvite(notif) {
 	try {
+		// Mark as read locally immediately
+		if (notificationsData.value) {
+			const n = notificationsData.value.find((n) => n.id === notif.id)
+			if (n) n.read = true
+		}
+
 		await removeSelfFromTeam(notif.body.team_id)
-		await markAsRead([notif.id])
-		await refreshNotifications()
+		markAsRead([notif.id]).catch((err) => {
+			console.error('Error marking as read:', err)
+		})
 	} catch (err) {
 		console.error('Error declining invite:', err)
 	}
@@ -273,8 +287,19 @@ async function handleDeclineInvite(notif) {
 
 async function handleMarkAsRead(notif) {
 	try {
-		await markAsRead([notif.id])
-		await refreshNotifications()
+		const ids = [notif.id, ...(notif.grouped_notifs ? notif.grouped_notifs.map((n) => n.id) : [])]
+
+		// Mark as read locally immediately
+		if (notificationsData.value) {
+			for (const id of ids) {
+				const n = notificationsData.value.find((n) => n.id === id)
+				if (n) n.read = true
+			}
+		}
+
+		markAsRead(ids).catch((err) => {
+			console.error('Error marking as read:', err)
+		})
 	} catch (err) {
 		console.error('Error marking as read:', err)
 	}
@@ -290,11 +315,28 @@ function handleViewHistory() {
 	router.push('/dashboard/notifications/history')
 }
 
+async function handleNotificationClick(notif) {
+	notificationsOverflow.value?.close()
+	if (!notif.read) {
+		handleMarkAsRead(notif)
+	}
+}
+
 async function handleMarkAllAsRead() {
 	try {
 		const ids = notificationsData.value?.map((n) => n.id) || []
-		await markAsRead(ids)
-		await refreshNotifications()
+
+		// Mark all as read locally immediately
+		if (notificationsData.value) {
+			for (const n of notificationsData.value) {
+				n.read = true
+			}
+		}
+
+		markAsRead(ids).catch((err) => {
+			console.error('Error marking all as read:', err)
+		})
+
 		notificationsOverflow.value?.close()
 	} catch (err) {
 		console.error('Error marking all as read:', err)

From a14f07c8d02a26ba2129ff46bbb04131f5113cd1 Mon Sep 17 00:00:00 2001
From: Creeperkatze <178587183+Creeperkatze@users.noreply.github.com>
Date: Wed, 4 Feb 2026 20:20:23 +0100
Subject: [PATCH 21/32] Use modern smart clickable, improve layout

---
 .../components/ui/NotificationsIndicator.vue  | 232 ++++++++++--------
 1 file changed, 125 insertions(+), 107 deletions(-)

diff --git a/apps/frontend/src/components/ui/NotificationsIndicator.vue b/apps/frontend/src/components/ui/NotificationsIndicator.vue
index 05cfc3eb80..bab3d6ffa8 100644
--- a/apps/frontend/src/components/ui/NotificationsIndicator.vue
+++ b/apps/frontend/src/components/ui/NotificationsIndicator.vue
@@ -18,7 +18,7 @@
 			</div>
 			<DropdownIcon aria-hidden="true" class="h-5 w-5 text-secondary" />
 			<template #menu-header>
-				<div class="notifications-dropdown flex min-w-[300px] flex-col gap-2 p-2">
+				<div class="notifications-dropdown flex flex-col p-2">
 					<div class="flex items-center justify-between gap-2 rounded-lg">
 						<button class="iconified-button" @click="handleViewAllNotifications">
 							<BellIcon aria-hidden="true" />
@@ -37,121 +37,138 @@
 							{{ formatMessage(messages.markAllAsRead) }}
 						</button>
 					</div>
-					<div class="border-t border-divider"></div>
+					<div class="mt-2 border-t border-divider"></div>
 					<div
 						v-if="recentNotifications.length === 0"
 						class="flex items-center justify-center rounded-lg bg-transparent py-4 text-secondary"
 					>
 						{{ formatMessage(messages.noUnreadNotifications) }}
 					</div>
-					<NuxtLink
-						v-for="notif in recentNotifications"
-						:key="notif.id"
-						:to="notif.link"
-						class="universal-card recessed group !mb-0 flex items-center gap-2 !p-4 transition-colors hover:bg-button-bg"
-						@click="handleNotificationClick(notif)"
-					>
-						<DoubleIcon class="flex-shrink-0">
-							<template #primary>
-								<NuxtLink
-									v-if="notif.extra_data?.project"
-									:to="`/project/${notif.extra_data.project.slug}`"
-									tabindex="-1"
-									@click.stop
-								>
-									<Avatar size="xs" :src="notif.extra_data.project.icon_url" aria-hidden="true" />
-								</NuxtLink>
-								<NuxtLink
-									v-else-if="notif.extra_data?.organization"
-									:to="`/organization/${notif.extra_data.organization.slug}`"
-									tabindex="-1"
-									@click.stop
-								>
-									<Avatar
-										size="xs"
-										:src="notif.extra_data.organization.icon_url"
-										aria-hidden="true"
-									/>
-								</NuxtLink>
+					<div class="mt-2">
+						<SmartClickable v-for="notif in recentNotifications" :key="notif.id" class="w-full">
+							<template #clickable>
 								<NuxtLink
-									v-else-if="notif.extra_data?.user"
-									:to="`/user/${notif.extra_data.user.username}`"
-									tabindex="-1"
-									@click.stop
-								>
-									<Avatar size="xs" :src="notif.extra_data.user.avatar_url" aria-hidden="true" />
-								</NuxtLink>
-								<Avatar v-else size="xs" aria-hidden="true" />
+									:to="notif.link"
+									class="no-outline no-click-animation rounded-xl"
+									@click="handleNotificationClick(notif)"
+								></NuxtLink>
 							</template>
-							<template #secondary>
-								<ScaleIcon
-									v-if="
-										notif.body?.type === 'moderator_message' || notif.body?.type === 'status_change'
-									"
-									class="text-contrast"
-								/>
-								<UserPlusIcon
-									v-else-if="notif.body?.type === 'team_invite' && notif.extra_data?.project"
-									class="text-contrast"
-								/>
-								<UserPlusIcon
-									v-else-if="
-										notif.body?.type === 'organization_invite' && notif.extra_data?.organization
-									"
-									class="text-contrast"
-								/>
-								<VersionIcon
-									v-else-if="
-										notif.body?.type === 'project_update' &&
-										notif.extra_data?.project &&
-										notif.extra_data?.version
-									"
-									class="text-contrast"
-								/>
-								<BellIcon v-else class="text-contrast" />
-							</template>
-						</DoubleIcon>
-						<div class="min-w-0 flex-1 pr-2">
-							<div class="font-semibold text-contrast">
-								{{ notif.title }}
-							</div>
-							<div class="mt-1 flex items-center gap-1 text-sm text-secondary">
-								<CalendarIcon aria-hidden="true" />
-								{{ formatRelativeTime(notif.created) }}
-							</div>
-						</div>
-						<div class="flex gap-2" @mousedown.stop>
-							<button
-								v-if="
-									(notif.body?.type === 'team_invite' ||
-										notif.body?.type === 'organization_invite') &&
-									!notif.read
-								"
-								class="iconified-button square-button brand-button [&>svg]:!mr-0"
-								@click.stop.prevent="handleAcceptInvite(notif)"
-							>
-								<CheckIcon />
-							</button>
-							<button
-								v-if="
-									(notif.body?.type === 'team_invite' ||
-										notif.body?.type === 'organization_invite') &&
-									!notif.read
-								"
-								class="iconified-button square-button danger-button [&>svg]:!mr-0"
-								@click.stop.prevent="handleDeclineInvite(notif)"
-							>
-								<XIcon />
-							</button>
-							<button
-								v-else-if="!notif.read"
-								class="iconified-button square-button [&>svg]:!mr-0"
-								@click.stop.prevent="handleMarkAsRead(notif)"
+							<div
+								class="universal-card recessed smart-clickable:highlight-on-hover group flex gap-2 !p-4 !mb-0 hover:bg-button-bg"
 							>
-								<CheckIcon />
-							</button>
-						</div>
-					</NuxtLink>
+								<DoubleIcon class="flex-shrink-0">
+									<template #primary>
+										<NuxtLink
+											v-if="notif.extra_data?.project"
+											:to="`/project/${notif.extra_data.project.slug}`"
+											tabindex="-1"
+											class="smart-clickable:allow-pointer-events"
+											@click.stop
+										>
+											<Avatar
+												size="xs"
+												:src="notif.extra_data.project.icon_url"
+												aria-hidden="true"
+											/>
+										</NuxtLink>
+										<NuxtLink
+											v-else-if="notif.extra_data?.organization"
+											:to="`/organization/${notif.extra_data.organization.slug}`"
+											tabindex="-1"
+											class="smart-clickable:allow-pointer-events"
+											@click.stop
+										>
+											<Avatar
+												size="xs"
+												:src="notif.extra_data.organization.icon_url"
+												aria-hidden="true"
+											/>
+										</NuxtLink>
+										<NuxtLink
+											v-else-if="notif.extra_data?.user"
+											:to="`/user/${notif.extra_data.user.username}`"
+											tabindex="-1"
+											class="smart-clickable:allow-pointer-events"
+											@click.stop
+										>
+											<Avatar
+												size="xs"
+												:src="notif.extra_data.user.avatar_url"
+												aria-hidden="true"
+											/>
+										</NuxtLink>
+										<Avatar v-else size="xs" aria-hidden="true" />
+									</template>
+									<template #secondary>
+										<ScaleIcon
+											v-if="
+												notif.body?.type === 'moderator_message' ||
+												notif.body?.type === 'status_change'
+											"
+											class="text-contrast"
+										/>
+										<UserPlusIcon
+											v-else-if="notif.body?.type === 'team_invite' && notif.extra_data?.project"
+											class="text-contrast"
+										/>
+										<UserPlusIcon
+											v-else-if="
+												notif.body?.type === 'organization_invite' && notif.extra_data?.organization
+											"
+											class="text-contrast"
+										/>
+										<VersionIcon
+											v-else-if="
+												notif.body?.type === 'project_update' &&
+												notif.extra_data?.project &&
+												notif.extra_data?.version
+											"
+											class="text-contrast"
+										/>
+										<BellIcon v-else class="text-contrast" />
+									</template>
+								</DoubleIcon>
+								<div class="min-w-0 w-0 flex-1 pr-2">
+									<div class="font-semibold text-contrast break-words">{{ notif.title }}</div>
+									<div class="mt-1 flex items-center gap-1 text-sm text-secondary">
+										<CalendarIcon aria-hidden="true" />
+										{{ formatRelativeTime(notif.created) }}
+									</div>
+								</div>
+								<div class="smart-clickable:allow-pointer-events flex gap-2">
+									<button
+										v-if="
+											(notif.body?.type === 'team_invite' ||
+												notif.body?.type === 'organization_invite') &&
+											!notif.read
+										"
+										class="iconified-button square-button brand-button [&>svg]:!mr-0"
+										@click.stop.prevent="handleAcceptInvite(notif)"
+									>
+										<CheckIcon />
+									</button>
+									<button
+										v-if="
+											(notif.body?.type === 'team_invite' ||
+												notif.body?.type === 'organization_invite') &&
+											!notif.read
+										"
+										class="iconified-button square-button danger-button [&>svg]:!mr-0"
+										@click.stop.prevent="handleDeclineInvite(notif)"
+									>
+										<XIcon />
+									</button>
+									<button
+										v-else-if="!notif.read"
+										class="iconified-button square-button [&>svg]:!mr-0"
+										@click.stop.prevent="handleMarkAsRead(notif)"
+									>
+										<CheckIcon />
+									</button>
+								</div>
+							</div>
+						</SmartClickable>
+					</div>
 				</div>
 			</template>
 		</OverflowMenu>
@@ -177,6 +194,7 @@ import {
 	defineMessages,
 	DoubleIcon,
 	OverflowMenu,
+	SmartClickable,
 	useRelativeTime,
 	useVIntl,
 } from '@modrinth/ui'

From 5621add716d368e2524588bd0e17bbb6d236a90e Mon Sep 17 00:00:00 2001
From: Creeperkatze <178587183+Creeperkatze@users.noreply.github.com>
Date: Wed, 4 Feb 2026 20:30:41 +0100
Subject: [PATCH 22/32] Add auto-refresh interval

---
 .../components/ui/NotificationsIndicator.vue  | 76 +++++++++++--------
 1 file changed, 46 insertions(+), 30 deletions(-)

diff --git a/apps/frontend/src/components/ui/NotificationsIndicator.vue b/apps/frontend/src/components/ui/NotificationsIndicator.vue
index bab3d6ffa8..fc80ddf5c6 100644
--- a/apps/frontend/src/components/ui/NotificationsIndicator.vue
+++ b/apps/frontend/src/components/ui/NotificationsIndicator.vue
@@ -54,7 +54,7 @@
 								></NuxtLink>
 							</template>
 							<div
-								class="universal-card recessed smart-clickable:highlight-on-hover group flex gap-2 !p-4 !mb-0 hover:bg-button-bg"
+								class="universal-card recessed smart-clickable:highlight-on-hover group !mb-0 flex gap-2 !p-4 hover:bg-button-bg"
 							>
 								<DoubleIcon class="flex-shrink-0">
 									<template #primary>
@@ -128,8 +128,8 @@
 										<BellIcon v-else class="text-contrast" />
 									</template>
 								</DoubleIcon>
-								<div class="min-w-0 w-0 flex-1 pr-2">
-									<div class="font-semibold text-contrast break-words">{{ notif.title }}</div>
+								<div class="w-0 min-w-0 flex-1 pr-2">
+									<div class="break-words font-semibold text-contrast">{{ notif.title }}</div>
 									<div class="mt-1 flex items-center gap-1 text-sm text-secondary">
 										<CalendarIcon aria-hidden="true" />
 										{{ formatRelativeTime(notif.created) }}
@@ -176,34 +176,37 @@
 </template>
 
 <script setup>
-import {
-	BellIcon,
-	CalendarIcon,
-	CheckCheckIcon,
-	CheckIcon,
-	DropdownIcon,
-	HistoryIcon,
-	ScaleIcon,
-	UserPlusIcon,
-	VersionIcon,
-	XIcon,
-} from '@modrinth/assets'
-import {
-	Avatar,
-	ButtonStyled,
-	defineMessages,
-	DoubleIcon,
-	OverflowMenu,
-	SmartClickable,
-	useRelativeTime,
-	useVIntl,
-} from '@modrinth/ui'
+import
+	{
+		BellIcon,
+		CalendarIcon,
+		CheckCheckIcon,
+		CheckIcon,
+		DropdownIcon,
+		HistoryIcon,
+		ScaleIcon,
+		UserPlusIcon,
+		VersionIcon,
+		XIcon,
+	} from '@modrinth/assets'
+import
+	{
+		Avatar,
+		ButtonStyled,
+		defineMessages,
+		DoubleIcon,
+		OverflowMenu,
+		SmartClickable,
+		useRelativeTime,
+		useVIntl,
+	} from '@modrinth/ui'
 
-import {
-	fetchExtraNotificationData,
-	groupNotifications,
-	markAsRead,
-} from '~/helpers/platform-notifications'
+import
+	{
+		fetchExtraNotificationData,
+		groupNotifications,
+		markAsRead,
+	} from '~/helpers/platform-notifications'
 import { acceptTeamInvite, removeSelfFromTeam } from '~/helpers/teams'
 
 const props = defineProps({
@@ -248,8 +251,21 @@ const recentNotifications = computed(() => {
 	return groupNotifications(unread.slice(0, 10), false)
 })
 
+// Auto-refresh
+const REFRESH_INTERVAL = 60000 // 1 minute
+
 const notificationsOverflow = ref(null)
 
+const refreshInterval = setInterval(() => {
+	if (notificationsOverflow.value) {
+		refreshNotifications()
+	}
+}, REFRESH_INTERVAL)
+
+onBeforeUnmount(() => {
+	clearInterval(refreshInterval)
+})
+
 const messages = defineMessages({
 	viewAllNotifications: {
 		id: 'layout.notifications.view-all',

From 948f6f7d48498cf8b0720349e8626029c85e3e4b Mon Sep 17 00:00:00 2001
From: Creeperkatze <178587183+Creeperkatze@users.noreply.github.com>
Date: Wed, 4 Feb 2026 20:32:08 +0100
Subject: [PATCH 23/32] Only use interval client side

---
 .../components/ui/NotificationsIndicator.vue   | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/apps/frontend/src/components/ui/NotificationsIndicator.vue b/apps/frontend/src/components/ui/NotificationsIndicator.vue
index fc80ddf5c6..3edb8f1645 100644
--- a/apps/frontend/src/components/ui/NotificationsIndicator.vue
+++ b/apps/frontend/src/components/ui/NotificationsIndicator.vue
@@ -256,14 +256,20 @@ const REFRESH_INTERVAL = 60000 // 1 minute
 
 const notificationsOverflow = ref(null)
 
-const refreshInterval = setInterval(() => {
-	if (notificationsOverflow.value) {
-		refreshNotifications()
-	}
-}, REFRESH_INTERVAL)
+let refreshInterval = null
+
+onMounted(() => {
+	refreshInterval = setInterval(() => {
+		if (notificationsOverflow.value) {
+			refreshNotifications()
+		}
+	}, REFRESH_INTERVAL)
+})
 
 onBeforeUnmount(() => {
-	clearInterval(refreshInterval)
+	if (refreshInterval) {
+		clearInterval(refreshInterval)
+	}
 })
 
 const messages = defineMessages({

From ebbe504de58c12be9aa9f86f8eebcebbc922ccb2 Mon Sep 17 00:00:00 2001
From: Creeperkatze <178587183+Creeperkatze@users.noreply.github.com>
Date: Wed, 4 Feb 2026 20:37:35 +0100
Subject: [PATCH 24/32] Make notification type icon colored

---
 .../src/components/ui/NotificationsIndicator.vue | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/apps/frontend/src/components/ui/NotificationsIndicator.vue b/apps/frontend/src/components/ui/NotificationsIndicator.vue
index 3edb8f1645..a9581f5eb3 100644
--- a/apps/frontend/src/components/ui/NotificationsIndicator.vue
+++ b/apps/frontend/src/components/ui/NotificationsIndicator.vue
@@ -105,17 +105,17 @@
 												notif.body?.type === 'moderator_message' ||
 												notif.body?.type === 'status_change'
 											"
-											class="text-contrast"
+											class="moderation-color"
 										/>
 										<UserPlusIcon
 											v-else-if="notif.body?.type === 'team_invite' && notif.extra_data?.project"
-											class="text-contrast"
+											class="creator-color"
 										/>
 										<UserPlusIcon
 											v-else-if="
 												notif.body?.type === 'organization_invite' && notif.extra_data?.organization
 											"
-											class="text-contrast"
+											class="creator-color"
 										/>
 										<VersionIcon
 											v-else-if="
@@ -383,3 +383,13 @@ async function handleMarkAllAsRead() {
 	}
 }
 </script>
+
+<style scoped>
+.moderation-color {
+	color: var(--color-orange);
+}
+
+.creator-color {
+	color: var(--color-blue);
+}
+</style>

From 9ab3595fdf1f6184a87460c6ebe3fdc48a002e0c Mon Sep 17 00:00:00 2001
From: Creeperkatze <178587183+Creeperkatze@users.noreply.github.com>
Date: Wed, 4 Feb 2026 20:45:14 +0100
Subject: [PATCH 25/32] Fix spacing

---
 .../components/ui/NotificationsIndicator.vue  | 61 +++++++++----------
 1 file changed, 29 insertions(+), 32 deletions(-)

diff --git a/apps/frontend/src/components/ui/NotificationsIndicator.vue b/apps/frontend/src/components/ui/NotificationsIndicator.vue
index a9581f5eb3..259b9e9cc9 100644
--- a/apps/frontend/src/components/ui/NotificationsIndicator.vue
+++ b/apps/frontend/src/components/ui/NotificationsIndicator.vue
@@ -37,14 +37,14 @@
 							{{ formatMessage(messages.markAllAsRead) }}
 						</button>
 					</div>
-					<div class="mt-2 border-t border-divider"></div>
+					<div class="mt-4 border-t border-divider"></div>
 					<div
 						v-if="recentNotifications.length === 0"
 						class="flex items-center justify-center rounded-lg bg-transparent py-4 text-secondary"
 					>
 						{{ formatMessage(messages.noUnreadNotifications) }}
 					</div>
-					<div class="mt-2">
+					<div class="flex flex-col gap-2">
 						<SmartClickable v-for="notif in recentNotifications" :key="notif.id" class="w-full">
 							<template #clickable>
 								<NuxtLink
@@ -176,37 +176,34 @@
 </template>
 
 <script setup>
-import
-	{
-		BellIcon,
-		CalendarIcon,
-		CheckCheckIcon,
-		CheckIcon,
-		DropdownIcon,
-		HistoryIcon,
-		ScaleIcon,
-		UserPlusIcon,
-		VersionIcon,
-		XIcon,
-	} from '@modrinth/assets'
-import
-	{
-		Avatar,
-		ButtonStyled,
-		defineMessages,
-		DoubleIcon,
-		OverflowMenu,
-		SmartClickable,
-		useRelativeTime,
-		useVIntl,
-	} from '@modrinth/ui'
+import {
+	BellIcon,
+	CalendarIcon,
+	CheckCheckIcon,
+	CheckIcon,
+	DropdownIcon,
+	HistoryIcon,
+	ScaleIcon,
+	UserPlusIcon,
+	VersionIcon,
+	XIcon,
+} from '@modrinth/assets'
+import {
+	Avatar,
+	ButtonStyled,
+	defineMessages,
+	DoubleIcon,
+	OverflowMenu,
+	SmartClickable,
+	useRelativeTime,
+	useVIntl,
+} from '@modrinth/ui'
 
-import
-	{
-		fetchExtraNotificationData,
-		groupNotifications,
-		markAsRead,
-	} from '~/helpers/platform-notifications'
+import {
+	fetchExtraNotificationData,
+	groupNotifications,
+	markAsRead,
+} from '~/helpers/platform-notifications'
 import { acceptTeamInvite, removeSelfFromTeam } from '~/helpers/teams'
 
 const props = defineProps({

From 480d44560a137dcb36d23f87824a6d9a3d3034e7 Mon Sep 17 00:00:00 2001
From: Creeperkatze <178587183+Creeperkatze@users.noreply.github.com>
Date: Wed, 4 Feb 2026 21:15:15 +0100
Subject: [PATCH 26/32] Remove changes to dashboard

---
 apps/frontend/src/pages/dashboard.vue | 75 ++++++++-------------------
 1 file changed, 22 insertions(+), 53 deletions(-)

diff --git a/apps/frontend/src/pages/dashboard.vue b/apps/frontend/src/pages/dashboard.vue
index 2a7d78de65..5b99a26889 100644
--- a/apps/frontend/src/pages/dashboard.vue
+++ b/apps/frontend/src/pages/dashboard.vue
@@ -2,34 +2,28 @@
 	<div class="normal-page !mt-8">
 		<div class="normal-page__sidebar">
 			<NavStack
-				:items="
-					[
-						{ type: 'heading', label: 'Dashboard' },
-						{ link: '/dashboard', label: 'Overview', icon: DashboardIcon },
-						{
-							link: '/dashboard/notifications',
-							label: 'Notifications',
-							icon: NotificationsIcon,
-						},
-						{ link: '/dashboard/reports', label: 'Active reports', icon: ReportIcon },
-						{
-							link: '/dashboard/collections',
-							label: formatMessage(commonMessages.collectionsLabel),
-							icon: LibraryIcon,
-						},
-						{ type: 'heading', label: 'Creators' },
-						{ link: '/dashboard/projects', label: 'Projects', icon: ListIcon },
-						{ link: '/dashboard/organizations', label: 'Organizations', icon: OrganizationIcon },
-						{ link: '/dashboard/analytics', label: 'Analytics', icon: ChartIcon },
-						{
-							link: '/dashboard/affiliate-links',
-							label: formatMessage(commonMessages.affiliateLinksButton),
-							icon: AffiliateIcon,
-							shown: isAffiliate,
-						},
-						{ link: '/dashboard/revenue', label: 'Revenue', icon: CurrencyIcon, matchNested: true },
-					].filter(Boolean)
-				"
+				:items="[
+					{ type: 'heading', label: 'Dashboard' },
+					{ link: '/dashboard', label: 'Overview', icon: DashboardIcon },
+					{ link: '/dashboard/notifications', label: 'Notifications', icon: NotificationsIcon },
+					{ link: '/dashboard/reports', label: 'Active reports', icon: ReportIcon },
+					{
+						link: '/dashboard/collections',
+						label: formatMessage(commonMessages.collectionsLabel),
+						icon: LibraryIcon,
+					},
+					{ type: 'heading', label: 'Creators' },
+					{ link: '/dashboard/projects', label: 'Projects', icon: ListIcon },
+					{ link: '/dashboard/organizations', label: 'Organizations', icon: OrganizationIcon },
+					{ link: '/dashboard/analytics', label: 'Analytics', icon: ChartIcon },
+					{
+						link: '/dashboard/affiliate-links',
+						label: formatMessage(commonMessages.affiliateLinksButton),
+						icon: AffiliateIcon,
+						shown: isAffiliate,
+					},
+					{ link: '/dashboard/revenue', label: 'Revenue', icon: CurrencyIcon, matchNested: true },
+				]"
 			/>
 		</div>
 		<div class="normal-page__content mt-4 lg:!mt-0">
@@ -53,10 +47,6 @@ import { commonMessages, useVIntl } from '@modrinth/ui'
 import { type User, UserBadge } from '@modrinth/utils'
 
 import NavStack from '~/components/ui/NavStack.vue'
-import {
-	fetchExtraNotificationData,
-	groupNotifications,
-} from '~/helpers/platform-notifications.ts'
 
 const auth = (await useAuth()) as Ref<{ user: User | null }>
 
@@ -75,25 +65,4 @@ useSeoMeta({
 })
 
 const route = useNativeRoute()
-
-const { data: notificationsData } = await useAsyncData(
-	'dashboard-nav-notifications',
-	async () => {
-		if (!auth.value.user) return null
-		const notifs = await useBaseFetch(`user/${auth.value.user.id}/notifications`)
-		return await fetchExtraNotificationData(notifs)
-	},
-	{
-		watch: [auth],
-	},
-)
-
-const unreadNotificationsCount = computed(() => {
-	if (!notificationsData.value) return 0
-	const grouped = groupNotifications(
-		notificationsData.value.filter((n) => !n.read),
-		false,
-	)
-	return grouped.length
-})
 </script>

From 4d5cbf088aea2e4bf15925bd85b6f8551209238a Mon Sep 17 00:00:00 2001
From: Creeperkatze <178587183+Creeperkatze@users.noreply.github.com>
Date: Wed, 4 Feb 2026 21:29:11 +0100
Subject: [PATCH 27/32] Make mark all as read not close the popout

---
 apps/frontend/src/components/ui/NotificationsIndicator.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/apps/frontend/src/components/ui/NotificationsIndicator.vue b/apps/frontend/src/components/ui/NotificationsIndicator.vue
index 259b9e9cc9..33ddd3c16f 100644
--- a/apps/frontend/src/components/ui/NotificationsIndicator.vue
+++ b/apps/frontend/src/components/ui/NotificationsIndicator.vue
@@ -373,8 +373,6 @@ async function handleMarkAllAsRead() {
 		markAsRead(ids).catch((err) => {
 			console.error('Error marking all as read:', err)
 		})
-
-		notificationsOverflow.value?.close()
 	} catch (err) {
 		console.error('Error marking all as read:', err)
 	}

From 7c052e1b9a7cad4d514e7291de65ec56e266d2fb Mon Sep 17 00:00:00 2001
From: Creeperkatze <178587183+Creeperkatze@users.noreply.github.com>
Date: Wed, 4 Feb 2026 21:30:58 +0100
Subject: [PATCH 28/32] Revert test stuff

---
 apps/frontend/src/layouts/default.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/frontend/src/layouts/default.vue b/apps/frontend/src/layouts/default.vue
index 3afd269c3e..aaa789941e 100644
--- a/apps/frontend/src/layouts/default.vue
+++ b/apps/frontend/src/layouts/default.vue
@@ -630,7 +630,7 @@
 			<ProjectCreateModal v-if="auth.user" ref="modal_creation" />
 			<CollectionCreateModal ref="modal_collection_creation" />
 			<OrganizationCreateModal ref="modal_organization_creation" />
-			<BatchCreditModal v-if="auth.user" ref="modal_batch_credit" />
+			<BatchCreditModal v-if="auth.user && isAdmin(auth.user)" ref="modal_batch_credit" />
 			<slot id="main" />
 		</main>
 		<ModrinthFooter />

From 0cf431e120b91e908b85957876ff230206fa31c1 Mon Sep 17 00:00:00 2001
From: Creeperkatze <178587183+Creeperkatze@users.noreply.github.com>
Date: Wed, 4 Feb 2026 22:02:28 +0100
Subject: [PATCH 29/32] Revert layout changes

---
 apps/frontend/src/layouts/default.vue | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/apps/frontend/src/layouts/default.vue b/apps/frontend/src/layouts/default.vue
index aaa789941e..2714bb3042 100644
--- a/apps/frontend/src/layouts/default.vue
+++ b/apps/frontend/src/layouts/default.vue
@@ -398,10 +398,7 @@
 						<UserIcon aria-hidden="true" /> {{ formatMessage(messages.profile) }}
 					</template>
 					<template #notifications>
-						<div class="flex items-center gap-2">
-							<BellIcon aria-hidden="true" />
-							<span>{{ formatMessage(commonMessages.notificationsLabel) }}</span>
-						</div>
+						<BellIcon aria-hidden="true" /> {{ formatMessage(commonMessages.notificationsLabel) }}
 					</template>
 					<template #reports>
 						<ReportIcon aria-hidden="true" /> {{ formatMessage(messages.activeReports) }}

From 80736b6ce2b659760c58572eb8a1ec0c3417297b Mon Sep 17 00:00:00 2001
From: Creeperkatze <178587183+Creeperkatze@users.noreply.github.com>
Date: Wed, 4 Feb 2026 23:54:38 +0100
Subject: [PATCH 30/32] Use scrollable panel, fix count label

---
 .../components/ui/NotificationsIndicator.vue  | 242 +++++++++---------
 1 file changed, 123 insertions(+), 119 deletions(-)

diff --git a/apps/frontend/src/components/ui/NotificationsIndicator.vue b/apps/frontend/src/components/ui/NotificationsIndicator.vue
index 33ddd3c16f..11bb062860 100644
--- a/apps/frontend/src/components/ui/NotificationsIndicator.vue
+++ b/apps/frontend/src/components/ui/NotificationsIndicator.vue
@@ -11,7 +11,7 @@
 				<BellIcon aria-hidden="true" class="h-5 w-5" style="transform: none" />
 				<div
 					v-if="unreadCount > 0"
-					class="absolute -right-2 -top-2 flex h-4 w-4 items-center justify-center rounded-full bg-brand text-[10px] font-bold text-brand-inverted"
+					class="absolute -top-2 left-3 flex h-4 min-w-4 items-center justify-start rounded-full bg-brand px-1 text-[10px] font-bold text-brand-inverted"
 				>
 					{{ unreadCount }}
 				</div>
@@ -44,131 +44,134 @@
 					>
 						{{ formatMessage(messages.noUnreadNotifications) }}
 					</div>
-					<div class="flex flex-col gap-2">
-						<SmartClickable v-for="notif in recentNotifications" :key="notif.id" class="w-full">
-							<template #clickable>
-								<NuxtLink
-									:to="notif.link"
-									class="no-outline no-click-animation rounded-xl"
-									@click="handleNotificationClick(notif)"
-								></NuxtLink>
-							</template>
-							<div
-								class="universal-card recessed smart-clickable:highlight-on-hover group !mb-0 flex gap-2 !p-4 hover:bg-button-bg"
-							>
-								<DoubleIcon class="flex-shrink-0">
-									<template #primary>
-										<NuxtLink
-											v-if="notif.extra_data?.project"
-											:to="`/project/${notif.extra_data.project.slug}`"
-											tabindex="-1"
-											class="smart-clickable:allow-pointer-events"
-											@click.stop
-										>
-											<Avatar
-												size="xs"
-												:src="notif.extra_data.project.icon_url"
-												aria-hidden="true"
+					<ScrollablePanel class="[&_--_fade-height:1rem] [&__.scrollable-pane]:max-h-[500px]">
+						<div class="flex flex-col gap-2">
+							<SmartClickable v-for="notif in recentNotifications" :key="notif.id" class="w-full">
+								<template #clickable>
+									<NuxtLink
+										:to="notif.link"
+										class="no-outline no-click-animation rounded-xl"
+										@click="handleNotificationClick(notif)"
+									></NuxtLink>
+								</template>
+								<div
+									class="universal-card recessed smart-clickable:highlight-on-hover group !mb-0 flex gap-2 !p-4 hover:bg-button-bg"
+								>
+									<DoubleIcon class="flex-shrink-0">
+										<template #primary>
+											<NuxtLink
+												v-if="notif.extra_data?.project"
+												:to="`/project/${notif.extra_data.project.slug}`"
+												tabindex="-1"
+												class="smart-clickable:allow-pointer-events"
+												@click.stop
+											>
+												<Avatar
+													size="xs"
+													:src="notif.extra_data.project.icon_url"
+													aria-hidden="true"
+												/>
+											</NuxtLink>
+											<NuxtLink
+												v-else-if="notif.extra_data?.organization"
+												:to="`/organization/${notif.extra_data.organization.slug}`"
+												tabindex="-1"
+												class="smart-clickable:allow-pointer-events"
+												@click.stop
+											>
+												<Avatar
+													size="xs"
+													:src="notif.extra_data.organization.icon_url"
+													aria-hidden="true"
+												/>
+											</NuxtLink>
+											<NuxtLink
+												v-else-if="notif.extra_data?.user"
+												:to="`/user/${notif.extra_data.user.username}`"
+												tabindex="-1"
+												class="smart-clickable:allow-pointer-events"
+												@click.stop
+											>
+												<Avatar
+													size="xs"
+													:src="notif.extra_data.user.avatar_url"
+													aria-hidden="true"
+												/>
+											</NuxtLink>
+											<Avatar v-else size="xs" aria-hidden="true" />
+										</template>
+										<template #secondary>
+											<ScaleIcon
+												v-if="
+													notif.body?.type === 'moderator_message' ||
+													notif.body?.type === 'status_change'
+												"
+												class="moderation-color"
 											/>
-										</NuxtLink>
-										<NuxtLink
-											v-else-if="notif.extra_data?.organization"
-											:to="`/organization/${notif.extra_data.organization.slug}`"
-											tabindex="-1"
-											class="smart-clickable:allow-pointer-events"
-											@click.stop
-										>
-											<Avatar
-												size="xs"
-												:src="notif.extra_data.organization.icon_url"
-												aria-hidden="true"
+											<UserPlusIcon
+												v-else-if="notif.body?.type === 'team_invite' && notif.extra_data?.project"
+												class="creator-color"
 											/>
-										</NuxtLink>
-										<NuxtLink
-											v-else-if="notif.extra_data?.user"
-											:to="`/user/${notif.extra_data.user.username}`"
-											tabindex="-1"
-											class="smart-clickable:allow-pointer-events"
-											@click.stop
-										>
-											<Avatar
-												size="xs"
-												:src="notif.extra_data.user.avatar_url"
-												aria-hidden="true"
+											<UserPlusIcon
+												v-else-if="
+													notif.body?.type === 'organization_invite' &&
+													notif.extra_data?.organization
+												"
+												class="creator-color"
 											/>
-										</NuxtLink>
-										<Avatar v-else size="xs" aria-hidden="true" />
-									</template>
-									<template #secondary>
-										<ScaleIcon
+											<VersionIcon
+												v-else-if="
+													notif.body?.type === 'project_update' &&
+													notif.extra_data?.project &&
+													notif.extra_data?.version
+												"
+												class="text-contrast"
+											/>
+											<BellIcon v-else class="text-contrast" />
+										</template>
+									</DoubleIcon>
+									<div class="w-0 min-w-0 flex-1 pr-2">
+										<div class="break-words font-semibold text-contrast">{{ notif.title }}</div>
+										<div class="mt-1 flex items-center gap-1 text-sm text-secondary">
+											<CalendarIcon aria-hidden="true" />
+											{{ formatRelativeTime(notif.created) }}
+										</div>
+									</div>
+									<div class="smart-clickable:allow-pointer-events flex gap-2">
+										<button
 											v-if="
-												notif.body?.type === 'moderator_message' ||
-												notif.body?.type === 'status_change'
-											"
-											class="moderation-color"
-										/>
-										<UserPlusIcon
-											v-else-if="notif.body?.type === 'team_invite' && notif.extra_data?.project"
-											class="creator-color"
-										/>
-										<UserPlusIcon
-											v-else-if="
-												notif.body?.type === 'organization_invite' && notif.extra_data?.organization
+												(notif.body?.type === 'team_invite' ||
+													notif.body?.type === 'organization_invite') &&
+												!notif.read
 											"
-											class="creator-color"
-										/>
-										<VersionIcon
-											v-else-if="
-												notif.body?.type === 'project_update' &&
-												notif.extra_data?.project &&
-												notif.extra_data?.version
+											class="iconified-button square-button brand-button [&>svg]:!mr-0"
+											@click.stop.prevent="handleAcceptInvite(notif)"
+										>
+											<CheckIcon />
+										</button>
+										<button
+											v-if="
+												(notif.body?.type === 'team_invite' ||
+													notif.body?.type === 'organization_invite') &&
+												!notif.read
 											"
-											class="text-contrast"
-										/>
-										<BellIcon v-else class="text-contrast" />
-									</template>
-								</DoubleIcon>
-								<div class="w-0 min-w-0 flex-1 pr-2">
-									<div class="break-words font-semibold text-contrast">{{ notif.title }}</div>
-									<div class="mt-1 flex items-center gap-1 text-sm text-secondary">
-										<CalendarIcon aria-hidden="true" />
-										{{ formatRelativeTime(notif.created) }}
+											class="iconified-button square-button danger-button [&>svg]:!mr-0"
+											@click.stop.prevent="handleDeclineInvite(notif)"
+										>
+											<XIcon />
+										</button>
+										<button
+											v-else-if="!notif.read"
+											class="iconified-button square-button [&>svg]:!mr-0"
+											@click.stop.prevent="handleMarkAsRead(notif)"
+										>
+											<CheckIcon />
+										</button>
 									</div>
 								</div>
-								<div class="smart-clickable:allow-pointer-events flex gap-2">
-									<button
-										v-if="
-											(notif.body?.type === 'team_invite' ||
-												notif.body?.type === 'organization_invite') &&
-											!notif.read
-										"
-										class="iconified-button square-button brand-button [&>svg]:!mr-0"
-										@click.stop.prevent="handleAcceptInvite(notif)"
-									>
-										<CheckIcon />
-									</button>
-									<button
-										v-if="
-											(notif.body?.type === 'team_invite' ||
-												notif.body?.type === 'organization_invite') &&
-											!notif.read
-										"
-										class="iconified-button square-button danger-button [&>svg]:!mr-0"
-										@click.stop.prevent="handleDeclineInvite(notif)"
-									>
-										<XIcon />
-									</button>
-									<button
-										v-else-if="!notif.read"
-										class="iconified-button square-button [&>svg]:!mr-0"
-										@click.stop.prevent="handleMarkAsRead(notif)"
-									>
-										<CheckIcon />
-									</button>
-								</div>
-							</div>
-						</SmartClickable>
-					</div>
+							</SmartClickable>
+						</div>
+					</ScrollablePanel>
 				</div>
 			</template>
 		</OverflowMenu>
@@ -194,6 +197,7 @@ import {
 	defineMessages,
 	DoubleIcon,
 	OverflowMenu,
+	ScrollablePanel,
 	SmartClickable,
 	useRelativeTime,
 	useVIntl,
@@ -245,7 +249,7 @@ const unreadCount = computed(() => {
 const recentNotifications = computed(() => {
 	if (!notificationsData.value) return []
 	const unread = notificationsData.value.filter((n) => !n.read)
-	return groupNotifications(unread.slice(0, 10), false)
+	return groupNotifications(unread, false)
 })
 
 // Auto-refresh

From 644e15559bd7bd5971ff2248c37b70de5b1ac6d6 Mon Sep 17 00:00:00 2001
From: Creeperkatze <178587183+Creeperkatze@users.noreply.github.com>
Date: Thu, 5 Feb 2026 12:35:44 +0100
Subject: [PATCH 31/32] Fix count label positioning

---
 apps/frontend/src/components/ui/NotificationsIndicator.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/frontend/src/components/ui/NotificationsIndicator.vue b/apps/frontend/src/components/ui/NotificationsIndicator.vue
index 11bb062860..10d5f0da4f 100644
--- a/apps/frontend/src/components/ui/NotificationsIndicator.vue
+++ b/apps/frontend/src/components/ui/NotificationsIndicator.vue
@@ -11,7 +11,7 @@
 				<BellIcon aria-hidden="true" class="h-5 w-5" style="transform: none" />
 				<div
 					v-if="unreadCount > 0"
-					class="absolute -top-2 left-3 flex h-4 min-w-4 items-center justify-start rounded-full bg-brand px-1 text-[10px] font-bold text-brand-inverted"
+					class="absolute -top-2 left-3 flex h-4 min-w-4 items-center justify-center rounded-full bg-brand px-1 text-[10px] font-bold text-brand-inverted"
 				>
 					{{ unreadCount }}
 				</div>

From 2b6575051c8889e5e5339568af321095aeaa15f0 Mon Sep 17 00:00:00 2001
From: Creeperkatze <178587183+Creeperkatze@users.noreply.github.com>
Date: Sat, 7 Feb 2026 00:03:31 +0100
Subject: [PATCH 32/32] Use new project button styling

---
 apps/frontend/src/components/ui/NotificationsIndicator.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/frontend/src/components/ui/NotificationsIndicator.vue b/apps/frontend/src/components/ui/NotificationsIndicator.vue
index 10d5f0da4f..5d6400df54 100644
--- a/apps/frontend/src/components/ui/NotificationsIndicator.vue
+++ b/apps/frontend/src/components/ui/NotificationsIndicator.vue
@@ -55,7 +55,7 @@
 									></NuxtLink>
 								</template>
 								<div
-									class="universal-card recessed smart-clickable:highlight-on-hover group !mb-0 flex gap-2 !p-4 hover:bg-button-bg"
+									class="smart-clickable:outline-on-focus smart-clickable:highlight-on-hover group flex gap-2 rounded-2xl border-[1px] border-solid border-surface-4 bg-bg !p-4 transition-all"
 								>
 									<DoubleIcon class="flex-shrink-0">
 										<template #primary>