diff --git a/CHANGELOG.md b/CHANGELOG.md
index 090c34900c..5d0d0ae555 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -31,6 +31,7 @@
 - Fix: コードエディタが正しく表示されない問題を修正
 - Fix: プロフィールの「ファイル」にセンシティブな画像がある際のデザインを修正
 - Fix: 一度に大量の通知が入った際に通知音が音割れする問題を修正
+- Fix: 通知のグルーピング設定を変更してもリロードされるまで表示が変わらない問題を修正 #12470
 
 ### Server
 - Enhance: MFM `$[ruby ]` が他ソフトウェアと連合されるように
diff --git a/packages/backend/src/models/json-schema/note.ts b/packages/backend/src/models/json-schema/note.ts
index 392fa7e1cb..aa749943f0 100644
--- a/packages/backend/src/models/json-schema/note.ts
+++ b/packages/backend/src/models/json-schema/note.ts
@@ -186,6 +186,10 @@ export const packedNoteSchema = {
 				optional: false, nullable: false,
 			},
 		},
+		clippedCount: {
+			type: 'number',
+			optional: true, nullable: false,
+		},
 
 		myReaction: {
 			type: 'object',
diff --git a/packages/frontend/src/boot/common.ts b/packages/frontend/src/boot/common.ts
index 594fe64230..6e216a78b4 100644
--- a/packages/frontend/src/boot/common.ts
+++ b/packages/frontend/src/boot/common.ts
@@ -202,20 +202,24 @@ export async function common(createVue: () => App<Element>) {
 		}
 	}, { immediate: true });
 
-	if (defaultStore.state.keepScreenOn) {
-		if ('wakeLock' in navigator) {
-			navigator.wakeLock.request('screen')
-			.then(() => {
-				document.addEventListener('visibilitychange', async () => {
-					if (document.visibilityState === 'visible') {
-						navigator.wakeLock.request('screen');
-					}
-				});
-			})
-			.catch(() => {
-				// If Permission fails on an AppleDevice such as Safari
-			});
+	// Keep screen on
+	const onVisibilityChange = () => document.addEventListener('visibilitychange', () => {
+		if (document.visibilityState === 'visible') {
+			navigator.wakeLock.request('screen');
 		}
+	});
+	if (defaultStore.state.keepScreenOn && 'wakeLock' in navigator) {
+		navigator.wakeLock.request('screen')
+			.then(onVisibilityChange)
+			.catch(() => {
+				// On WebKit-based browsers, user activation is required to send wake lock request
+				// https://webkit.org/blog/13862/the-user-activation-api/
+				document.addEventListener(
+					'click',
+					() => navigator.wakeLock.request('screen').then(onVisibilityChange),
+					{ once: true },
+				);
+			});
 	}
 
 	//#region Fetch user
diff --git a/packages/frontend/src/components/MkNotifications.vue b/packages/frontend/src/components/MkNotifications.vue
index 7b072fa492..2a0082204a 100644
--- a/packages/frontend/src/components/MkNotifications.vue
+++ b/packages/frontend/src/components/MkNotifications.vue
@@ -24,7 +24,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { onUnmounted, onDeactivated, onMounted, computed, shallowRef, onActivated } from 'vue';
+import { onUnmounted, onDeactivated, onMounted, computed, shallowRef, onActivated, watch } from 'vue';
 import MkPagination, { Paging } from '@/components/MkPagination.vue';
 import XNotification from '@/components/MkNotification.vue';
 import MkDateSeparatedList from '@/components/MkDateSeparatedList.vue';
@@ -43,7 +43,7 @@ const props = defineProps<{
 
 const pagingComponent = shallowRef<InstanceType<typeof MkPagination>>();
 
-const pagination: Paging = defaultStore.state.useGroupedNotifications ? {
+let pagination = $computed(() => defaultStore.reactiveState.useGroupedNotifications.value ? {
 	endpoint: 'i/notifications-grouped' as const,
 	limit: 20,
 	params: computed(() => ({
@@ -55,7 +55,7 @@ const pagination: Paging = defaultStore.state.useGroupedNotifications ? {
 	params: computed(() => ({
 		excludeTypes: props.excludeTypes ?? undefined,
 	})),
-};
+});
 
 function onNotification(notification) {
 	const isMuted = props.excludeTypes ? props.excludeTypes.includes(notification.type) : false;
diff --git a/packages/frontend/src/components/MkPagination.vue b/packages/frontend/src/components/MkPagination.vue
index e7796dfcb5..2c59e6d4e8 100644
--- a/packages/frontend/src/components/MkPagination.vue
+++ b/packages/frontend/src/components/MkPagination.vue
@@ -186,7 +186,7 @@ watch([$$(backed), $$(contentEl)], () => {
 });
 
 // パラメータに何らかの変更があった際、再読込したい（チャンネル等のIDが変わったなど）
-watch(() => props.pagination.params, init, { deep: true });
+watch(() => [props.pagination.endpoint, props.pagination.params], init, { deep: true });
 
 watch(queue, (a, b) => {
 	if (a.size === 0 && b.size === 0) return;
diff --git a/packages/frontend/src/scripts/sound.ts b/packages/frontend/src/scripts/sound.ts
index a4c6967d18..2f7545ef0d 100644
--- a/packages/frontend/src/scripts/sound.ts
+++ b/packages/frontend/src/scripts/sound.ts
@@ -161,7 +161,7 @@ export function play(operationType: OperationType) {
 	if (sound.type == null || !canPlay) return;
 
 	canPlay = false;
-	playFile(sound).then(() => {
+	playFile(sound).finally(() => {
 		// ごく短時間に音が重複しないように
 		setTimeout(() => {
 			canPlay = true;
diff --git a/packages/frontend/vite.config.ts b/packages/frontend/vite.config.ts
index da976b7917..4d2bb00e33 100644
--- a/packages/frontend/vite.config.ts
+++ b/packages/frontend/vite.config.ts
@@ -150,10 +150,14 @@ export function getConfig(): UserConfig {
 		test: {
 			environment: 'happy-dom',
 			deps: {
-				inline: [
-					// XXX: misskey-dev/browser-image-resizer has no "type": "module"
-					'browser-image-resizer',
-				],
+				optimizer: {
+					web: {
+						include: [
+							// XXX: misskey-dev/browser-image-resizer has no "type": "module"
+							'browser-image-resizer',
+						],
+					},
+				},
 			},
 		},
 	};