Merge remote-tracking branch 'mi-dev/develop' into emoji-req

# Conflicts: # packages/misskey-js/etc/misskey-js.api.md
2023-11-03 03:15:23 +09:00 · 2023-11-03 03:15:23 +09:00 · ed261d3b99
commit ed261d3b99
parent 1d30c51d77 f1903b26a5
76 changed files with 1895 additions and 1029 deletions
--- a/packages/frontend/package.json
+++ b/packages/frontend/package.json
@ -10,7 +10,7 @@
 		"build-storybook": "pnpm build-storybook-pre && storybook build",
 		"chromatic": "chromatic",
 		"test": "vitest --run",
-		"test-and-coverage": "vitest --run --coverage",
+		"test-and-coverage": "vitest --run --coverage --globals",
 		"typecheck": "vue-tsc --noEmit",
 		"eslint": "eslint --quiet \"src/**/*.{ts,vue}\"",
 		"lint": "pnpm typecheck && pnpm eslint"
@ -20,7 +20,7 @@
 		"@github/webauthn-json": "2.1.1",
 		"@rollup/plugin-alias": "5.0.1",
 		"@rollup/plugin-json": "6.0.1",
-		"@rollup/plugin-replace": "5.0.4",
+		"@rollup/plugin-replace": "5.0.5",
 		"@rollup/pluginutils": "5.0.5",
 		"@syuilo/aiscript": "0.16.0",
 		"@tabler/icons-webfont": "2.37.0",
@ -30,7 +30,7 @@
 		"astring": "1.8.6",
 		"autosize": "6.0.1",
 		"aiscript-vscode": "github:aiscript-dev/aiscript-vscode#v0.0.5",
-		"broadcast-channel": "5.5.1",
+		"broadcast-channel": "6.0.0",
 		"browser-image-resizer": "github:misskey-dev/browser-image-resizer#v2.2.1-misskey.3",
 		"buraha": "0.0.1",
 		"canvas-confetti": "1.6.1",
@ -39,7 +39,7 @@
 		"chartjs-chart-matrix": "2.0.1",
 		"chartjs-plugin-gradient": "0.6.1",
 		"chartjs-plugin-zoom": "2.0.1",
-		"chromatic": "7.5.4",
+		"chromatic": "7.6.0",
 		"compare-versions": "6.1.0",
 		"cropperjs": "2.0.0-beta.4",
 		"date-fns": "2.30.0",
@ -55,9 +55,9 @@
 		"mfm-js": "0.23.3",
 		"misskey-js": "workspace:*",
 		"photoswipe": "5.4.2",
-		"punycode": "2.3.0",
+		"punycode": "2.3.1",
 		"querystring": "0.2.1",
-		"rollup": "4.1.4",
+		"rollup": "4.2.0",
 		"sanitize-html": "2.11.0",
 		"shiki": "^0.14.5",
 		"sass": "1.69.5",
@ -78,30 +78,30 @@
 		"vuedraggable": "next"
 	},
 	"devDependencies": {
-		"@storybook/addon-actions": "7.5.1",
-		"@storybook/addon-essentials": "7.5.1",
-		"@storybook/addon-interactions": "7.5.1",
-		"@storybook/addon-links": "7.5.1",
-		"@storybook/addon-storysource": "7.5.1",
-		"@storybook/addons": "7.5.1",
-		"@storybook/blocks": "7.5.1",
-		"@storybook/core-events": "7.5.1",
+		"@storybook/addon-actions": "7.5.2",
+		"@storybook/addon-essentials": "7.5.2",
+		"@storybook/addon-interactions": "7.5.2",
+		"@storybook/addon-links": "7.5.2",
+		"@storybook/addon-storysource": "7.5.2",
+		"@storybook/addons": "7.5.2",
+		"@storybook/blocks": "7.5.2",
+		"@storybook/core-events": "7.5.2",
 		"@storybook/jest": "0.2.3",
-		"@storybook/manager-api": "7.5.1",
-		"@storybook/preview-api": "7.5.1",
-		"@storybook/react": "7.5.1",
-		"@storybook/react-vite": "7.5.1",
+		"@storybook/manager-api": "7.5.2",
+		"@storybook/preview-api": "7.5.2",
+		"@storybook/react": "7.5.2",
+		"@storybook/react-vite": "7.5.2",
 		"@storybook/testing-library": "0.2.2",
-		"@storybook/theming": "7.5.1",
-		"@storybook/types": "7.5.1",
-		"@storybook/vue3": "7.5.1",
-		"@storybook/vue3-vite": "7.5.1",
-		"@testing-library/vue": "7.0.0",
+		"@storybook/theming": "7.5.2",
+		"@storybook/types": "7.5.2",
+		"@storybook/vue3": "7.5.2",
+		"@storybook/vue3-vite": "7.5.2",
+		"@testing-library/vue": "8.0.0",
 		"@types/escape-regexp": "0.0.2",
-		"@types/estree": "1.0.3",
+		"@types/estree": "1.0.4",
 		"@types/matter-js": "0.19.2",
 		"@types/micromatch": "4.0.4",
-		"@types/node": "20.8.9",
+		"@types/node": "20.8.10",
 		"@types/punycode": "2.1.1",
 		"@types/sanitize-html": "2.9.3",
 		"@types/throttle-debounce": "5.0.1",
@ -109,13 +109,13 @@
 		"@types/uuid": "9.0.6",
 		"@types/websocket": "1.0.8",
 		"@types/ws": "8.5.8",
-		"@typescript-eslint/eslint-plugin": "6.9.0",
-		"@typescript-eslint/parser": "6.9.0",
+		"@typescript-eslint/eslint-plugin": "6.9.1",
+		"@typescript-eslint/parser": "6.9.1",
 		"@vitest/coverage-v8": "0.34.6",
 		"@vue/runtime-core": "3.3.7",
 		"acorn": "8.11.2",
 		"cross-env": "7.0.3",
-		"cypress": "13.3.3",
+		"cypress": "13.4.0",
 		"eslint": "8.52.0",
 		"eslint-plugin-import": "2.29.0",
 		"eslint-plugin-vue": "9.18.1",
@ -129,7 +129,7 @@
 		"react": "18.2.0",
 		"react-dom": "18.2.0",
 		"start-server-and-test": "2.0.1",
-		"storybook": "7.5.1",
+		"storybook": "7.5.2",
 		"storybook-addon-misskey-theme": "github:misskey-dev/storybook-addon-misskey-theme",
 		"summaly": "github:misskey-dev/summaly",
 		"vite-plugin-turbosnap": "1.0.3",
--- a/packages/frontend/src/boot/main-boot.ts
+++ b/packages/frontend/src/boot/main-boot.ts
@ -226,11 +226,18 @@ export async function mainBoot() {
 		});

 		main.on('readAllNotifications', () => {
-			updateAccount({ hasUnreadNotification: false });
+			updateAccount({
+				hasUnreadNotification: false,
+				unreadNotificationsCount: 0,
+			});
 		});

 		main.on('unreadNotification', () => {
-			updateAccount({ hasUnreadNotification: true });
+			const unreadNotificationsCount = ($i?.unreadNotificationsCount ?? 0) + 1;
+			updateAccount({
+				hasUnreadNotification: true,
+				unreadNotificationsCount,
+			});
 		});

 		main.on('unreadMention', () => {
--- a/packages/frontend/src/components/MkLaunchPad.vue
+++ b/packages/frontend/src/components/MkLaunchPad.vue
@ -7,16 +7,18 @@ SPDX-License-Identifier: AGPL-3.0-only
 <MkModal ref="modal" v-slot="{ type, maxHeight }" :preferType="preferedModalType" :anchor="anchor" :transparentBg="true" :src="src" @click="modal.close()" @closed="emit('closed')">
 	<div class="szkkfdyq _popup _shadow" :class="{ asDrawer: type === 'drawer' }" :style="{ maxHeight: maxHeight ? maxHeight + 'px' : '' }">
 		<div class="main">
-			<template v-for="item in items">
+			<template v-for="item in items" :key="item.text">
 				<button v-if="item.action" v-click-anime class="_button item" @click="$event => { item.action($event); close(); }">
 					<i class="icon" :class="item.icon"></i>
 					<div class="text">{{ item.text }}</div>
-					<span v-if="item.indicate" class="indicator"><i class="_indicatorCircle"></i></span>
+					<span v-if="item.indicate && item.indicateValue" class="_indicateCounter indicatorWithValue">{{ item.indicateValue }}</span>
+					<span v-else-if="item.indicate" class="indicator"><i class="_indicatorCircle"></i></span>
 				</button>
 				<MkA v-else v-click-anime :to="item.to" class="item" @click.passive="close()">
 					<i class="icon" :class="item.icon"></i>
 					<div class="text">{{ item.text }}</div>
-					<span v-if="item.indicate" class="indicator"><i class="_indicatorCircle"></i></span>
+					<span v-if="item.indicate && item.indicateValue" class="_indicateCounter indicatorWithValue">{{ item.indicateValue }}</span>
+					<span v-else-if="item.indicate" class="indicator"><i class="_indicatorCircle"></i></span>
 				</MkA>
 			</template>
 		</div>
@ -27,7 +29,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { } from 'vue';
 import MkModal from '@/components/MkModal.vue';
-import { navbarItemDef } from '@/navbar';
+import { navbarItemDef } from '@/navbar.js';
 import { defaultStore } from '@/store.js';
 import { deviceKind } from '@/scripts/device-kind.js';

@ -57,6 +59,7 @@ const items = Object.keys(navbarItemDef).filter(k => !menu.includes(k)).map(k =>
 	to: def.to,
 	action: def.action,
 	indicate: def.indicated,
+	indicateValue: def.indicateValue,
 }));

 function close() {
@ -116,6 +119,17 @@ function close() {
 				line-height: 1.5em;
 			}

+			> .indicatorWithValue {
+				position: absolute;
+				top: 32px;
+				left: 16px;
+
+				@media (max-width: 500px) {
+					top: 16px;
+					left: 8px;
+				}
+			}
+
 			> .indicator {
 				position: absolute;
 				top: 32px;
--- a/packages/frontend/src/components/MkNote.vue
+++ b/packages/frontend/src/components/MkNote.vue
@ -60,7 +60,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<div :class="$style.text">
 						<span v-if="appearNote.isHidden" style="opacity: 0.5">({{ i18n.ts.private }})</span>
 						<MkA v-if="appearNote.replyId" :class="$style.replyIcon" :to="`/notes/${appearNote.replyId}`"><i class="ti ti-arrow-back-up"></i></MkA>
-						<Mfm v-if="appearNote.text" :text="appearNote.text" :author="appearNote.user" :nyaize="'account'" :i="$i" :emojiUrls="appearNote.emojis"/>
+						<Mfm v-if="appearNote.text" :parsedNodes="parsed" :text="appearNote.text" :author="appearNote.user" :nyaize="'account'" :i="$i" :emojiUrls="appearNote.emojis"/>
 						<div v-if="translating || translation" :class="$style.translation">
 							<MkLoading v-if="translating" mini/>
 							<div v-else>
@ -209,8 +209,9 @@ const clipButton = shallowRef<HTMLElement>();
 let appearNote = $computed(() => isRenote ? note.renote as Misskey.entities.Note : note);
 const isMyRenote = $i && ($i.id === note.userId);
 const showContent = ref(false);
-const urls = appearNote.text ? extractUrlFromMfm(mfm.parse(appearNote.text)) : null;
-const isLong = shouldCollapsed(appearNote);
+const parsed = appearNote.text ? mfm.parse(appearNote.text) : null;
+const urls = parsed ? extractUrlFromMfm(parsed) : null;
+const isLong = shouldCollapsed(appearNote, urls ?? []);
 const collapsed = ref(appearNote.cw == null && isLong);
 const isDeleted = ref(false);
 const muted = ref($i ? checkWordMute(appearNote, $i, $i.mutedWords) : false);
--- a/packages/frontend/src/components/MkNoteDetailed.vue
+++ b/packages/frontend/src/components/MkNoteDetailed.vue
@ -73,7 +73,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<div v-show="appearNote.cw == null || showContent">
 				<span v-if="appearNote.isHidden" style="opacity: 0.5">({{ i18n.ts.private }})</span>
 				<MkA v-if="appearNote.replyId" :class="$style.noteReplyTarget" :to="`/notes/${appearNote.replyId}`"><i class="ti ti-arrow-back-up"></i></MkA>
-				<Mfm v-if="appearNote.text" :text="appearNote.text" :author="appearNote.user" :nyaize="'account'" :i="$i" :emojiUrls="appearNote.emojis"/>
+				<Mfm v-if="appearNote.text" :parsedNodes="parsed" :text="appearNote.text" :author="appearNote.user" :nyaize="'account'" :i="$i" :emojiUrls="appearNote.emojis"/>
 				<a v-if="appearNote.renote != null" :class="$style.rn">RN:</a>
 				<div v-if="translating || translation" :class="$style.translation">
 					<MkLoading v-if="translating" mini/>
@ -260,7 +260,8 @@ const isDeleted = ref(false);
 const muted = ref($i ? checkWordMute(appearNote, $i, $i.mutedWords) : false);
 const translation = ref(null);
 const translating = ref(false);
-const urls = appearNote.text ? extractUrlFromMfm(mfm.parse(appearNote.text)) : null;
+const parsed = appearNote.text ? mfm.parse(appearNote.text) : null;
+const urls = parsed ? extractUrlFromMfm(parsed) : null;
 const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultStore.state.instanceTicker === 'remote' && appearNote.user.instance);
 const conversation = ref<Misskey.entities.Note[]>([]);
 const replies = ref<Misskey.entities.Note[]>([]);
--- a/packages/frontend/src/components/MkNotification.vue
+++ b/packages/frontend/src/components/MkNotification.vue
@ -4,14 +4,16 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->

 <template>
-<div ref="elRef" :class="$style.root">
+<div :class="$style.root">
 	<div :class="$style.head">
 		<MkAvatar v-if="notification.type === 'pollEnded'" :class="$style.icon" :user="notification.note.user" link preview/>
 		<MkAvatar v-else-if="notification.type === 'note'" :class="$style.icon" :user="notification.note.user" link preview/>
 		<MkAvatar v-else-if="notification.type === 'achievementEarned'" :class="$style.icon" :user="$i" link preview/>
+		<div v-else-if="notification.type === 'reaction:grouped'" :class="[$style.icon, $style.icon_reactionGroup]"><i class="ti ti-plus" style="line-height: 1;"></i></div>
+		<div v-else-if="notification.type === 'renote:grouped'" :class="[$style.icon, $style.icon_renoteGroup]"><i class="ti ti-repeat" style="line-height: 1;"></i></div>
 		<img v-else-if="notification.type === 'test'" :class="$style.icon" :src="infoImageUrl"/>
 		<MkAvatar v-else-if="notification.user" :class="$style.icon" :user="notification.user" link preview/>
-		<img v-else-if="notification.icon" :class="$style.icon" :src="notification.icon" alt=""/>
+		<img v-else-if="notification.icon" :class="[$style.icon, $style.icon_app]" :src="notification.icon" alt=""/>
 		<div
 			:class="[$style.subIcon, {
 				[$style.t_follow]: notification.type === 'follow',
@ -37,9 +39,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<!-- notification.reaction が null になることはまずないが、ここでoptional chaining使うと一部ブラウザで刺さるので念の為 -->
 			<MkReactionIcon
 				v-else-if="notification.type === 'reaction'"
-				ref="reactionRef"
+				:withTooltip="true"
 				:reaction="notification.reaction ? notification.reaction.replace(/^:(\w+):$/, ':$1@.:') : notification.reaction"
-				:customEmojis="notification.note.emojis"
 				:noStyle="true"
 				style="width: 100%; height: 100%;"
 			/>
@ -52,16 +53,18 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<span v-else-if="notification.type === 'achievementEarned'">{{ i18n.ts._notification.achievementEarned }}</span>
 			<span v-else-if="notification.type === 'test'">{{ i18n.ts._notification.testNotification }}</span>
 			<MkA v-else-if="notification.user" v-user-preview="notification.user.id" :class="$style.headerName" :to="userPage(notification.user)"><MkUserName :user="notification.user"/></MkA>
+			<span v-else-if="notification.type === 'reaction:grouped'">{{ i18n.t('_notification.reactedBySomeUsers', { n: notification.reactions.length }) }}</span>
+			<span v-else-if="notification.type === 'renote:grouped'">{{ i18n.t('_notification.renotedBySomeUsers', { n: notification.users.length }) }}</span>
 			<span v-else>{{ notification.header }}</span>
 			<MkTime v-if="withTime" :time="notification.createdAt" :class="$style.headerTime"/>
 		</header>
 		<div>
-			<MkA v-if="notification.type === 'reaction'" :class="$style.text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)">
+			<MkA v-if="notification.type === 'reaction' || notification.type === 'reaction:grouped'" :class="$style.text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)">
 				<i class="ti ti-quote" :class="$style.quote"></i>
 				<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="true" :author="notification.note.user"/>
 				<i class="ti ti-quote" :class="$style.quote"></i>
 			</MkA>
-			<MkA v-else-if="notification.type === 'renote'" :class="$style.text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note.renote)">
+			<MkA v-else-if="notification.type === 'renote' || notification.type === 'renote:grouped'" :class="$style.text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note.renote)">
 				<i class="ti ti-quote" :class="$style.quote"></i>
 				<Mfm :text="getNoteSummary(notification.note.renote)" :plain="true" :nowrap="true" :author="notification.note.renote.user"/>
 				<i class="ti ti-quote" :class="$style.quote"></i>
@ -102,6 +105,25 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<span v-else-if="notification.type === 'app'" :class="$style.text">
 				<Mfm :text="notification.body" :nowrap="false"/>
 			</span>
+
+			<div v-if="notification.type === 'reaction:grouped'">
+				<div v-for="reaction of notification.reactions" :class="$style.reactionsItem">
+					<MkAvatar :class="$style.reactionsItemAvatar" :user="reaction.user" link preview/>
+					<div :class="$style.reactionsItemReaction">
+						<MkReactionIcon
+							:withTooltip="true"
+							:reaction="reaction.reaction ? reaction.reaction.replace(/^:(\w+):$/, ':$1@.:') : reaction.reaction"
+							:noStyle="true"
+							style="width: 100%; height: 100%;"
+						/>
+					</div>
+				</div>
+			</div>
+			<div v-else-if="notification.type === 'renote:grouped'">
+				<div v-for="user of notification.users" :class="$style.reactionsItem">
+					<MkAvatar :class="$style.reactionsItemAvatar" :user="user" link preview/>
+				</div>
+			</div>
 		</div>
 	</div>
 </div>
@ -112,14 +134,12 @@ import { ref, shallowRef } from 'vue';
 import * as Misskey from 'misskey-js';
 import MkReactionIcon from '@/components/MkReactionIcon.vue';
 import MkFollowButton from '@/components/MkFollowButton.vue';
-import XReactionTooltip from '@/components/MkReactionTooltip.vue';
 import MkButton from '@/components/MkButton.vue';
 import { getNoteSummary } from '@/scripts/get-note-summary.js';
 import { notePage } from '@/filters/note.js';
 import { userPage } from '@/filters/user.js';
 import { i18n } from '@/i18n.js';
 import * as os from '@/os.js';
-import { useTooltip } from '@/scripts/use-tooltip.js';
 import { $i } from '@/account.js';
 import { infoImageUrl } from '@/instance.js';

@ -132,9 +152,6 @@ const props = withDefaults(defineProps<{
 	full: false,
 });

-const elRef = shallowRef<HTMLElement>(null);
-const reactionRef = ref(null);
-
 const followRequestDone = ref(false);

 const acceptFollowRequest = () => {
@ -146,15 +163,6 @@ const rejectFollowRequest = () => {
 	followRequestDone.value = true;
 	os.api('following/requests/reject', { userId: props.notification.user.id });
 };
-
-useTooltip(reactionRef, (showing) => {
-	os.popup(XReactionTooltip, {
-		showing,
-		reaction: props.notification.reaction ? props.notification.reaction.replace(/^:(\w+):$/, ':$1@.:') : props.notification.reaction,
-		emojis: props.notification.note.emojis,
-		targetElement: reactionRef.value.$el,
-	}, {}, 'closed');
-});
 </script>

 <style lang="scss" module>
@ -181,6 +189,29 @@ useTooltip(reactionRef, (showing) => {
 	display: block;
 	width: 100%;
 	height: 100%;
+}
+
+.icon_reactionGroup,
+.icon_renoteGroup {
+	display: grid;
+	align-items: center;
+	justify-items: center;
+	width: 80%;
+	height: 80%;
+	font-size: 15px;
+	border-radius: 100%;
+	color: #fff;
+}
+
+.icon_reactionGroup {
+	background: #e99a0b;
+}
+
+.icon_renoteGroup {
+	background: #36d298;
+}
+
+.icon_app {
 	border-radius: 6px;
 }

@ -305,6 +336,36 @@ useTooltip(reactionRef, (showing) => {
 	flex: 1;
 }

+.reactionsItem {
+	display: inline-block;
+	position: relative;
+	width: 38px;
+	height: 38px;
+	margin-top: 8px;
+	margin-right: 8px;
+}
+
+.reactionsItemAvatar {
+	width: 100%;
+	height: 100%;
+}
+
+.reactionsItemReaction {
+	position: absolute;
+	z-index: 1;
+	bottom: -2px;
+	right: -2px;
+	width: 20px;
+	height: 20px;
+	box-sizing: border-box;
+	border-radius: 100%;
+	background: var(--panel);
+	box-shadow: 0 0 0 3px var(--panel);
+	font-size: 11px;
+	text-align: center;
+	color: #fff;
+}
+
@container (max-width: 600px) {
 	.root {
 		padding: 16px;
--- a/packages/frontend/src/components/MkNotifications.vue
+++ b/packages/frontend/src/components/MkNotifications.vue
@ -4,25 +4,27 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->

 <template>
-<MkPagination ref="pagingComponent" :pagination="pagination">
-	<template #empty>
-		<div class="_fullinfo">
-			<img :src="infoImageUrl" class="_ghost"/>
-			<div>{{ i18n.ts.noNotifications }}</div>
-		</div>
-	</template>
+<MkPullToRefresh :refresher="() => reload()">
+	<MkPagination ref="pagingComponent" :pagination="pagination">
+		<template #empty>
+			<div class="_fullinfo">
+				<img :src="infoImageUrl" class="_ghost"/>
+				<div>{{ i18n.ts.noNotifications }}</div>
+			</div>
+		</template>

-	<template #default="{ items: notifications }">
-		<MkDateSeparatedList v-slot="{ item: notification }" :class="$style.list" :items="notifications" :noGap="true">
-			<MkNote v-if="['reply', 'quote', 'mention'].includes(notification.type)" :key="notification.id" :note="notification.note"/>
-			<XNotification v-else :key="notification.id" :notification="notification" :withTime="true" :full="true" class="_panel notification"/>
-		</MkDateSeparatedList>
-	</template>
-</MkPagination>
+		<template #default="{ items: notifications }">
+			<MkDateSeparatedList v-slot="{ item: notification }" :class="$style.list" :items="notifications" :noGap="true">
+				<MkNote v-if="['reply', 'quote', 'mention'].includes(notification.type)" :key="notification.id" :note="notification.note"/>
+				<XNotification v-else :key="notification.id" :notification="notification" :withTime="true" :full="true" class="_panel"/>
+			</MkDateSeparatedList>
+		</template>
+	</MkPagination>
+</MkPullToRefresh>
 </template>

 <script lang="ts" setup>
-import { onUnmounted, onMounted, computed, shallowRef } from 'vue';
+import { onUnmounted, onDeactivated, onMounted, computed, shallowRef, onActivated } from 'vue';
 import MkPagination, { Paging } from '@/components/MkPagination.vue';
 import XNotification from '@/components/MkNotification.vue';
 import MkDateSeparatedList from '@/components/MkDateSeparatedList.vue';
@ -32,6 +34,8 @@ import { $i } from '@/account.js';
 import { i18n } from '@/i18n.js';
 import { notificationTypes } from '@/const.js';
 import { infoImageUrl } from '@/instance.js';
+import { defaultStore } from '@/store.js';
+import MkPullToRefresh from '@/components/MkPullToRefresh.vue';

 const props = defineProps<{
 	excludeTypes?: typeof notificationTypes[number][];
@ -39,7 +43,13 @@ const props = defineProps<{

 const pagingComponent = shallowRef<InstanceType<typeof MkPagination>>();

-const pagination: Paging = {
+const pagination: Paging = defaultStore.state.useGroupedNotifications ? {
+	endpoint: 'i/notifications-grouped' as const,
+	limit: 20,
+	params: computed(() => ({
+		excludeTypes: props.excludeTypes ?? undefined,
+	})),
+} : {
 	endpoint: 'i/notifications' as const,
 	limit: 20,
 	params: computed(() => ({
@ -47,7 +57,7 @@ const pagination: Paging = {
 	})),
 };

-const onNotification = (notification) => {
+function onNotification(notification) {
 	const isMuted = props.excludeTypes ? props.excludeTypes.includes(notification.type) : false;
 	if (isMuted || document.visibilityState === 'visible') {
 		useStream().send('readNotification');
@ -56,7 +66,15 @@ const onNotification = (notification) => {
 	if (!isMuted) {
 		pagingComponent.value.prepend(notification);
 	}
-};
+}
+
+function reload() {
+	return new Promise<void>((res) => {
+		pagingComponent.value?.reload().then(() => {
+			res();
+		});
+	});
+}

 let connection;

@ -65,9 +83,19 @@ onMounted(() => {
 	connection.on('notification', onNotification);
 });

+onActivated(() => {
+	pagingComponent.value?.reload();
+	connection = useStream().useChannel('main');
+	connection.on('notification', onNotification);
+});
+
 onUnmounted(() => {
 	if (connection) connection.dispose();
 });
+
+onDeactivated(() => {
+	if (connection) connection.dispose();
+});
 </script>

 <style lang="scss" module>
--- a/packages/frontend/src/components/MkPullToRefresh.vue
+++ b/packages/frontend/src/components/MkPullToRefresh.vue
@ -47,7 +47,13 @@ let scrollEl: HTMLElement | null = null;

 let disabled = false;

-const emits = defineEmits<{
+const props = withDefaults(defineProps<{
+	refresher: () => Promise<void>;
+}>(), {
+	refresher: () => Promise.resolve(),
+});
+
+const emit = defineEmits<{
 	(ev: 'refresh'): void;
 }>();

@ -120,7 +126,12 @@ function moveEnd() {
 		if (isPullEnd) {
 			isPullEnd = false;
 			isRefreshing = true;
-			fixOverContent().then(() => emits('refresh'));
+			fixOverContent().then(() => {
+				emit('refresh');
+				props.refresher().then(() => {
+					refreshFinished();
+				});
+			});
 		} else {
 			closeContent().then(() => isPullStart = false);
 		}
@ -188,7 +199,6 @@ onUnmounted(() => {
 });

 defineExpose({
-	refreshFinished,
 	setDisabled,
 });
 </script>
--- a/packages/frontend/src/components/MkReactionIcon.vue
+++ b/packages/frontend/src/components/MkReactionIcon.vue
@ -4,16 +4,31 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->

 <template>
-<MkCustomEmoji v-if="reaction[0] === ':'" :name="reaction" :normal="true" :noStyle="noStyle" :url="emojiUrl"/>
-<MkEmoji v-else :emoji="reaction" :normal="true" :noStyle="noStyle"/>
+<MkCustomEmoji v-if="reaction[0] === ':'" ref="elRef" :name="reaction" :normal="true" :noStyle="noStyle" :url="emojiUrl"/>
+<MkEmoji v-else ref="elRef" :emoji="reaction" :normal="true" :noStyle="noStyle"/>
 </template>

 <script lang="ts" setup>
-import { } from 'vue';
+import { defineAsyncComponent, shallowRef } from 'vue';
+import { useTooltip } from '@/scripts/use-tooltip.js';
+import * as os from '@/os.js';

 const props = defineProps<{
 	reaction: string;
 	noStyle?: boolean;
 	emojiUrl?: string;
+	withTooltip?: boolean;
 }>();
+
+const elRef = shallowRef();
+
+if (props.withTooltip) {
+	useTooltip(elRef, (showing) => {
+		os.popup(defineAsyncComponent(() => import('@/components/MkReactionTooltip.vue')), {
+			showing,
+			reaction: props.reaction.replace(/^:(\w+):$/, ':$1@.:'),
+			targetElement: elRef.value.$el,
+		}, {}, 'closed');
+	});
+}
 </script>
--- a/packages/frontend/src/components/MkSubNoteContent.vue
+++ b/packages/frontend/src/components/MkSubNoteContent.vue
@ -42,7 +42,7 @@ const props = defineProps<{
 	note: Misskey.entities.Note;
 }>();

-const isLong = shouldCollapsed(props.note);
+const isLong = shouldCollapsed(props.note, []);

 const collapsed = $ref(isLong);
 </script>
--- a/packages/frontend/src/components/MkTimeline.vue
+++ b/packages/frontend/src/components/MkTimeline.vue
@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->

 <template>
-<MkPullToRefresh ref="prComponent" @refresh="() => reloadTimeline(true)">
+<MkPullToRefresh ref="prComponent" :refresher="() => reloadTimeline()">
 	<MkNotes ref="tlComponent" :noGap="!defaultStore.state.showGapBetweenNotesInTimeline" :pagination="pagination" @queue="emit('queue', $event)" @status="prComponent.setDisabled($event)"/>
 </MkPullToRefresh>
 </template>
@ -196,25 +196,18 @@ const pagination = {
 	params: query,
 };

-const reloadTimeline = (fromPR = false) => {
-	tlNotesCount = 0;
+function reloadTimeline() {
+	return new Promise<void>((res) => {
+		tlNotesCount = 0;

-	tlComponent.pagingComponent?.reload().then(() => {
-		reloadStream();
-		if (fromPR) prComponent.refreshFinished();
+		tlComponent.pagingComponent?.reload().then(() => {
+			reloadStream();
+			res();
+		});
 	});
-};
-
-//const pullRefresh = () => reloadTimeline(true);
+}

 defineExpose({
 	reloadTimeline,
 });
-
-/* TODO
-const timetravel = (date?: Date) => {
-	this.date = date;
-	this.$refs.tl.reload();
-};
-*/
 </script>
--- a/packages/frontend/src/components/global/MkFooterSpacer.vue
+++ b/packages/frontend/src/components/global/MkFooterSpacer.vue
@ -0,0 +1,32 @@
+<!--
+SPDX-FileCopyrightText: syuilo and other misskey contributors
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<div :class="[$style.spacer, defaultStore.reactiveState.darkMode.value ? $style.dark : $style.light]"></div>
+</template>
+
+<script lang="ts" setup>
+import { defaultStore } from '@/store.js';
+</script>
+
+<style lang="scss" module>
+.spacer {
+	box-sizing: border-box;
+	padding: 32px;
+	margin: 0 auto;
+	height: 300px;
+	background-clip: content-box;
+	background-size: auto auto;
+	background-color: rgba(255, 255, 255, 0);
+
+	&.light {
+		background-image: repeating-linear-gradient(135deg, transparent, transparent 16px, #00000010 16px, #00000010 20px );
+	}
+
+	&.dark {
+		background-image: repeating-linear-gradient(135deg, transparent, transparent 16px, #FFFFFF16 16px, #FFFFFF16 20px );
+	}
+}
+</style>
--- a/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.ts
+++ b/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.ts
@ -38,6 +38,7 @@ type MfmProps = {
 	emojiUrls?: string[];
 	rootScale?: number;
 	nyaize: boolean | 'account';
+	parsedNodes?: mfm.MfmNode[] | null;
 };

 // eslint-disable-next-line import/no-default-export
@ -48,7 +49,7 @@ export default function(props: MfmProps) {
 	// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
 	if (props.text == null || props.text === '') return;

-	const rootAst = (props.plain ? mfm.parseSimple : mfm.parse)(props.text);
+	const rootAst = props.parsedNodes ?? (props.plain ? mfm.parseSimple : mfm.parse)(props.text);

 	const validTime = (t: string | null | undefined) => {
 		if (t == null) return null;
--- a/packages/frontend/src/components/index.ts
+++ b/packages/frontend/src/components/index.ts
@ -5,7 +5,7 @@

 import { App } from 'vue';

-import Mfm from './global/MkMisskeyFlavoredMarkdown.ts';
+import Mfm from './global/MkMisskeyFlavoredMarkdown.js';
 import MkA from './global/MkA.vue';
 import MkAcct from './global/MkAcct.vue';
 import MkAvatar from './global/MkAvatar.vue';
@ -16,13 +16,14 @@ import MkUserName from './global/MkUserName.vue';
 import MkEllipsis from './global/MkEllipsis.vue';
 import MkTime from './global/MkTime.vue';
 import MkUrl from './global/MkUrl.vue';
-import I18n from './global/i18n';
+import I18n from './global/i18n.js';
 import RouterView from './global/RouterView.vue';
 import MkLoading from './global/MkLoading.vue';
 import MkError from './global/MkError.vue';
 import MkAd from './global/MkAd.vue';
 import MkPageHeader from './global/MkPageHeader.vue';
 import MkSpacer from './global/MkSpacer.vue';
+import MkFooterSpacer from './global/MkFooterSpacer.vue';
 import MkStickyContainer from './global/MkStickyContainer.vue';

 export default function(app: App) {
@ -50,6 +51,7 @@ export const components = {
 	MkAd: MkAd,
 	MkPageHeader: MkPageHeader,
 	MkSpacer: MkSpacer,
+	MkFooterSpacer: MkFooterSpacer,
 	MkStickyContainer: MkStickyContainer,
 };

@ -73,6 +75,7 @@ declare module '@vue/runtime-core' {
 		MkAd: typeof MkAd;
 		MkPageHeader: typeof MkPageHeader;
 		MkSpacer: typeof MkSpacer;
+		MkFooterSpacer: typeof MkFooterSpacer;
 		MkStickyContainer: typeof MkStickyContainer;
 	}
 }
--- a/packages/frontend/src/emojilist.json
+++ b/packages/frontend/src/emojilist.json
@ -1045,7 +1045,7 @@
 	["⌛", "hourglass", 6],
 	["📡", "satellite", 6],
 	["🔋", "battery", 6],
-	["🪫", "battery", 6],
+	["🪫", "low_battery", 6],
 	["🔌", "electric_plug", 6],
 	["💡", "bulb", 6],
 	["🔦", "flashlight", 6],
--- a/packages/frontend/src/navbar.ts
+++ b/packages/frontend/src/navbar.ts
@ -6,7 +6,7 @@
 import { computed, reactive } from 'vue';
 import { $i } from '@/account.js';
 import { miLocalStorage } from '@/local-storage.js';
-import { openInstanceMenu } from '@/ui/_common_/common.js';
+import { openInstanceMenu, openToolsMenu } from '@/ui/_common_/common.js';
 import { lookup } from '@/scripts/lookup.js';
 import * as os from '@/os.js';
 import { i18n } from '@/i18n.js';
@ -19,6 +19,15 @@ export const navbarItemDef = reactive({
 		icon: 'ti ti-bell',
 		show: computed(() => $i != null),
 		indicated: computed(() => $i != null && $i.hasUnreadNotification),
+		indicateValue: computed(() => {
+			if (!$i || $i.unreadNotificationsCount === 0) return '';
+
+			if ($i.unreadNotificationsCount > 99) {
+				return '99+';
+			} else {
+				return $i.unreadNotificationsCount.toString();
+			}
+		}),
 		to: '/my/notifications',
 	},
 	drive: {
@ -142,6 +151,13 @@ export const navbarItemDef = reactive({
 			openInstanceMenu(ev);
 		},
 	},
+	tools: {
+		title: i18n.ts.tools,
+		icon: 'ti ti-tool',
+		action: (ev) => {
+			openToolsMenu(ev);
+		},
+	},
 	reload: {
 		title: i18n.ts.reload,
 		icon: 'ti ti-refresh',
--- a/packages/frontend/src/pages/about.federation.vue
+++ b/packages/frontend/src/pages/about.federation.vue
@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->

 <template>
-<div>
+<div class="_gaps">
 	<div>
 		<MkInput v-model="host" :debounce="true" class="">
 			<template #prefix><i class="ti ti-search"></i></template>
--- a/packages/frontend/src/pages/settings/general.vue
+++ b/packages/frontend/src/pages/settings/general.vue
@ -88,6 +88,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<template #label>{{ i18n.ts.notificationDisplay }}</template>

 		<div class="_gaps_m">
+			<MkSwitch v-model="useGroupedNotifications">{{ i18n.ts.useGroupedNotifications }}</MkSwitch>
+
 			<MkRadios v-model="notificationPosition">
 				<template #label>{{ i18n.ts.position }}</template>
 				<option value="leftTop"><i class="ti ti-align-box-left-top"></i> {{ i18n.ts.leftTop }}</option>
@ -255,6 +257,7 @@ const notificationStackAxis = computed(defaultStore.makeGetterSetter('notificati
 const keepScreenOn = computed(defaultStore.makeGetterSetter('keepScreenOn'));
 const defaultWithReplies = computed(defaultStore.makeGetterSetter('defaultWithReplies'));
 const disableStreamingTimeline = computed(defaultStore.makeGetterSetter('disableStreamingTimeline'));
+const useGroupedNotifications = computed(defaultStore.makeGetterSetter('useGroupedNotifications'));

 watch(lang, () => {
 	miLocalStorage.setItem('lang', lang.value as string);
--- a/packages/frontend/src/pages/settings/index.vue
+++ b/packages/frontend/src/pages/settings/index.vue
@ -23,6 +23,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</div>
 		</div>
 	</MkSpacer>
+	<MkFooterSpacer/>
 </mkstickycontainer>
 </template>

--- a/packages/frontend/src/pages/settings/notifications.vue
+++ b/packages/frontend/src/pages/settings/notifications.vue
@ -74,11 +74,11 @@ let sendReadMessage = $computed(() => pushRegistrationInServer?.sendReadMessage
 const userLists = await os.api('users/lists/list');

 async function readAllUnreadNotes() {
-	await os.api('i/read-all-unread-notes');
+	await os.apiWithDialog('i/read-all-unread-notes');
 }

 async function readAllNotifications() {
-	await os.api('notifications/mark-all-as-read');
+	await os.apiWithDialog('notifications/mark-all-as-read');
 }

 async function updateReceiveConfig(type, value) {
--- a/packages/frontend/src/pages/timeline.vue
+++ b/packages/frontend/src/pages/timeline.vue
@ -140,36 +140,42 @@ function focus(): void {
 	tlComponent.focus();
 }

-const headerActions = $computed(() => [
-	...[deviceKind === 'desktop' ? {
-		icon: 'ti ti-refresh',
-		text: i18n.ts.reload,
-		handler: (ev) => {
-			console.log('called');
-			tlComponent.reloadTimeline();
-		},
-	} : {}], {
-		icon: 'ti ti-dots',
-		text: i18n.ts.options,
-		handler: (ev) => {
-			os.popupMenu([{
-				type: 'switch',
-				text: i18n.ts.showRenotes,
-				icon: 'ti ti-repeat',
-				ref: $$(withRenotes),
-			}, src === 'local' || src === 'social' ? {
-				type: 'switch',
-				text: i18n.ts.showRepliesToOthersInTimeline,
-				ref: $$(withReplies),
-			} : undefined, {
-				type: 'switch',
-				text: i18n.ts.fileAttachedOnly,
-				icon: 'ti ti-photo',
-				ref: $$(onlyFiles),
-			}], ev.currentTarget ?? ev.target);
+const headerActions = $computed(() => {
+	const tmp = [
+		{
+			icon: 'ti ti-dots',
+			text: i18n.ts.options,
+			handler: (ev) => {
+				os.popupMenu([{
+					type: 'switch',
+					text: i18n.ts.showRenotes,
+					icon: 'ti ti-repeat',
+					ref: $$(withRenotes),
+				}, src === 'local' || src === 'social' ? {
+					type: 'switch',
+					text: i18n.ts.showRepliesToOthersInTimeline,
+					ref: $$(withReplies),
+				} : undefined, {
+					type: 'switch',
+					text: i18n.ts.fileAttachedOnly,
+					icon: 'ti ti-photo',
+					ref: $$(onlyFiles),
+				}], ev.currentTarget ?? ev.target);
+			},
 		},
+	];
+	if (deviceKind === 'desktop') {
+		tmp.unshift({
+			icon: 'ti ti-refresh',
+			text: i18n.ts.reload,
+			handler: (ev: Event) => {
+				console.log('called');
+				tlComponent.reloadTimeline();
+			},
+		});
 	}
-]);
+	return tmp;
+});

 const headerTabs = $computed(() => [...(defaultStore.reactiveState.pinnedUserLists.value.map(l => ({
 	key: 'list:' + l.id,
--- a/packages/frontend/src/scripts/collapsed.ts
+++ b/packages/frontend/src/scripts/collapsed.ts
@ -3,12 +3,9 @@
 * SPDX-License-Identifier: AGPL-3.0-only
 */

-import * as mfm from 'mfm-js';
 import * as Misskey from 'misskey-js';
-import { extractUrlFromMfm } from './extract-url-from-mfm.js';

-export function shouldCollapsed(note: Misskey.entities.Note): boolean {
-	const urls = note.text ? extractUrlFromMfm(mfm.parse(note.text)) : null;
+export function shouldCollapsed(note: Misskey.entities.Note, urls: string[]): boolean {
 	const collapsed = note.cw == null && note.text != null && (
 		(note.text.includes('$[x2')) ||
 		(note.text.includes('$[x3')) ||
@ -17,7 +14,7 @@ export function shouldCollapsed(note: Misskey.entities.Note): boolean {
 		(note.text.split('\n').length > 9) ||
 		(note.text.length > 500) ||
 		(note.files.length >= 5) ||
-		(!!urls && urls.length >= 4)
+		(urls.length >= 4)
 	);

 	return collapsed;
--- a/packages/frontend/src/scripts/use-tooltip.ts
+++ b/packages/frontend/src/scripts/use-tooltip.ts
@ -37,7 +37,7 @@ export function useTooltip(
 		};

 		autoHidingTimer = window.setInterval(() => {
-			if (!document.body.contains(elRef.value)) {
+			if (elRef.value == null || !document.body.contains(elRef.value instanceof Element ? elRef.value : elRef.value.$el)) {
 				if (!isHovering) return;
 				isHovering = false;
 				window.clearTimeout(timeoutId);
--- a/packages/frontend/src/scripts/worker-multi-dispatch.ts
+++ b/packages/frontend/src/scripts/worker-multi-dispatch.ts
@ -71,9 +71,11 @@ export class WorkerMultiDispatch<POST = any, RETURN = any> {
 	public isTerminated() {
 		return this.terminated;
 	}
+
 	public getWorkers() {
 		return this.workers;
 	}
+
 	public getSymbol() {
 		return this.symbol;
 	}
--- a/packages/frontend/src/store.ts
+++ b/packages/frontend/src/store.ts
@ -373,6 +373,10 @@ export const defaultStore = markRaw(new Storage('base', {
 		where: 'device',
 		default: false,
 	},
+	useGroupedNotifications: {
+		where: 'device',
+		default: true,
+	},
 }));

 // TODO: 他のタブと永続化されたstateを同期
--- a/packages/frontend/src/style.scss
+++ b/packages/frontend/src/style.scss
@ -155,6 +155,19 @@ hr {
 	background: currentColor;
 }

+._indicateCounter {
+	display: inline-flex;
+	color: var(--fgOnAccent);
+	font-weight: 700;
+	background: var(--indicator);
+	height: 1.5em;
+	min-width: 1.5em;
+	align-items: center;
+	justify-content: center;
+	border-radius: 99rem;
+	padding: 0.3em 0.5em;
+}
+
 ._noSelect {
 	user-select: none;
 	-webkit-user-select: none;
--- a/packages/frontend/src/ui/_common_/common.ts
+++ b/packages/frontend/src/ui/_common_/common.ts
@ -3,12 +3,42 @@
 * SPDX-License-Identifier: AGPL-3.0-only
 */

+import type { MenuItem } from '@/types/menu.js';
 import * as os from '@/os.js';
 import { instance } from '@/instance.js';
 import { host } from '@/config.js';
 import { i18n } from '@/i18n.js';
 import { $i } from '@/account.js';

+function toolsMenuItems(): MenuItem[] {
+	return [{
+		type: 'link',
+		to: '/scratchpad',
+		text: i18n.ts.scratchpad,
+		icon: 'ti ti-terminal-2',
+	}, {
+		type: 'link',
+		to: '/api-console',
+		text: 'API Console',
+		icon: 'ti ti-terminal-2',
+	}, {
+		type: 'link',
+		to: '/clicker',
+		text: '🍪👈',
+		icon: 'ti ti-cookie',
+	}, ($i && ($i.isAdmin || $i.policies.canManageCustomEmojis)) ? {
+		type: 'link',
+		to: '/custom-emojis-manager',
+		text: i18n.ts.manageCustomEmojis,
+		icon: 'ti ti-icons',
+	} : undefined, ($i && ($i.isAdmin || $i.policies.canManageAvatarDecorations)) ? {
+		type: 'link',
+		to: '/avatar-decorations',
+		text: i18n.ts.manageAvatarDecorations,
+		icon: 'ti ti-sparkles',
+	} : undefined];
+}
+
 export function openInstanceMenu(ev: MouseEvent) {
 	os.popupMenu([{
 		text: instance.name ?? host,
@ -47,32 +77,7 @@ export function openInstanceMenu(ev: MouseEvent) {
 		type: 'parent',
 		text: i18n.ts.tools,
 		icon: 'ti ti-tool',
-		children: [{
-			type: 'link',
-			to: '/scratchpad',
-			text: i18n.ts.scratchpad,
-			icon: 'ti ti-terminal-2',
-		}, {
-			type: 'link',
-			to: '/api-console',
-			text: 'API Console',
-			icon: 'ti ti-terminal-2',
-		}, {
-			type: 'link',
-			to: '/clicker',
-			text: '🍪👈',
-			icon: 'ti ti-cookie',
-		}, ($i && ($i.isAdmin || $i.policies.canManageCustomEmojis)) ? {
-			type: 'link',
-			to: '/custom-emojis-manager',
-			text: i18n.ts.manageCustomEmojis,
-			icon: 'ti ti-icons',
-		} : undefined, ($i && ($i.isAdmin || $i.policies.canManageAvatarDecorations)) ? {
-			type: 'link',
-			to: '/avatar-decorations',
-			text: i18n.ts.manageAvatarDecorations,
-			icon: 'ti ti-sparkles',
-		} : undefined],
+		children: toolsMenuItems(),
 	}, null, (instance.impressumUrl) ? {
 		text: i18n.ts.impressum,
 		icon: 'ti ti-file-invoice',
@ -105,3 +110,9 @@ export function openInstanceMenu(ev: MouseEvent) {
 		align: 'left',
 	});
 }
+
+export function openToolsMenu(ev: MouseEvent) {
+	os.popupMenu(toolsMenuItems(), ev.currentTarget ?? ev.target, {
+		align: 'left',
+	});
+}
--- a/packages/frontend/src/ui/_common_/common.vue
+++ b/packages/frontend/src/ui/_common_/common.vue
@ -67,7 +67,8 @@ let notifications = $ref<Misskey.entities.Notification[]>([]);

 function onNotification(notification: Misskey.entities.Notification, isClient = false) {
 	if (document.visibilityState === 'visible') {
-		if (!isClient) {
+		if (!isClient && notification.type !== 'test') {
+			// サーバーサイドのテスト通知の際は自動で既読をつけない（テストできないので）
 			useStream().send('readNotification');
 		}

--- a/packages/frontend/src/ui/_common_/navbar-for-mobile.vue
+++ b/packages/frontend/src/ui/_common_/navbar-for-mobile.vue
@ -19,7 +19,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<div v-if="item === '-'" :class="$style.divider"></div>
 			<component :is="navbarItemDef[item].to ? 'MkA' : 'button'" v-else-if="navbarItemDef[item] && (navbarItemDef[item].show !== false)" class="_button" :class="[$style.item, { [$style.active]: navbarItemDef[item].active }]" :activeClass="$style.active" :to="navbarItemDef[item].to" v-on="navbarItemDef[item].action ? { click: navbarItemDef[item].action } : {}">
 				<i class="ti-fw" :class="[$style.itemIcon, navbarItemDef[item].icon]"></i><span :class="$style.itemText">{{ navbarItemDef[item].title }}</span>
-				<span v-if="navbarItemDef[item].indicated" :class="$style.itemIndicator"><i class="_indicatorCircle"></i></span>
+				<span v-if="navbarItemDef[item].indicated" :class="$style.itemIndicator">
+					<span v-if="navbarItemDef[item].indicateValue" class="_indicateCounter" :class="$style.itemIndicateValueIcon">{{ navbarItemDef[item].indicateValue }}</span>
+					<i v-else class="_indicatorCircle"></i>
+				</span>
 			</component>
 		</template>
 		<div :class="$style.divider"></div>
@ -252,6 +255,12 @@ function more() {
 	color: var(--navIndicator);
 	font-size: 8px;
 	animation: blink 1s infinite;
+
+	&:has(.itemIndicateValueIcon) {
+		animation: none;
+		left: auto;
+		right: 20px;
+	}
 }

 .itemText {
--- a/packages/frontend/src/ui/_common_/navbar.vue
+++ b/packages/frontend/src/ui/_common_/navbar.vue
@ -29,7 +29,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 					v-on="navbarItemDef[item].action ? { click: navbarItemDef[item].action } : {}"
 				>
 					<i class="ti-fw" :class="[$style.itemIcon, navbarItemDef[item].icon]"></i><span :class="$style.itemText">{{ navbarItemDef[item].title }}</span>
-					<span v-if="navbarItemDef[item].indicated" :class="$style.itemIndicator"><i class="_indicatorCircle"></i></span>
+					<span v-if="navbarItemDef[item].indicated" :class="$style.itemIndicator">
+						<span v-if="navbarItemDef[item].indicateValue" class="_indicateCounter" :class="$style.itemIndicateValueIcon">{{ navbarItemDef[item].indicateValue }}</span>
+						<i v-else class="_indicatorCircle"></i>
+					</span>
 				</component>
 			</template>
 			<div :class="$style.divider"></div>
@ -106,7 +109,7 @@ function more(ev: MouseEvent) {
 <style lang="scss" module>
 .root {
 	--nav-width: 250px;
-	--nav-icon-only-width: 72px;
+	--nav-icon-only-width: 80px;

 	flex: 0 0 var(--nav-width);
 	width: var(--nav-width);
@ -312,6 +315,13 @@ function more(ev: MouseEvent) {
 		color: var(--navIndicator);
 		font-size: 8px;
 		animation: blink 1s infinite;
+
+		&:has(.itemIndicateValueIcon) {
+			animation: none;
+			left: auto;
+			right: 40px;
+			font-size: 10px;
+		}
 	}

 	.itemText {
@ -475,6 +485,14 @@ function more(ev: MouseEvent) {
 		color: var(--navIndicator);
 		font-size: 8px;
 		animation: blink 1s infinite;
+
+		&:has(.itemIndicateValueIcon) {
+			animation: none;
+			top: 4px;
+			left: auto;
+			right: 4px;
+			font-size: 10px;
+		}
 	}
 }
 </style>
--- a/packages/frontend/src/ui/classic.sidebar.vue
+++ b/packages/frontend/src/ui/classic.sidebar.vue
@ -21,7 +21,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<div v-if="item === '-'" class="divider"></div>
 		<component :is="navbarItemDef[item].to ? 'MkA' : 'button'" v-else-if="navbarItemDef[item] && (navbarItemDef[item].show !== false)" v-click-anime class="item _button" :class="item" activeClass="active" :to="navbarItemDef[item].to" v-on="navbarItemDef[item].action ? { click: navbarItemDef[item].action } : {}">
 			<i class="ti-fw" :class="navbarItemDef[item].icon"></i><span class="text">{{ navbarItemDef[item].title }}</span>
-			<span v-if="navbarItemDef[item].indicated" class="indicator"><i class="_indicatorCircle"></i></span>
+			<span v-if="navbarItemDef[item].indicated" class="indicator">
+				<span v-if="navbarItemDef[item].indicateValue" class="_indicateCounter itemIndicateValueIcon">{{ navbarItemDef[item].indicateValue }}</span>
+				<i v-else class="_indicatorCircle"></i>
+			</span>
 		</component>
 	</template>
 	<div class="divider"></div>
@ -218,6 +221,12 @@ watch(defaultStore.reactiveState.menuDisplay, () => {
 			color: var(--navIndicator);
 			font-size: 8px;
 			animation: blink 1s infinite;
+
+			&:has(.itemIndicateValueIcon) {
+				animation: none;
+				left: auto;
+				right: 20px;
+			}
 		}

 		&:hover {
--- a/packages/frontend/src/ui/deck.vue
+++ b/packages/frontend/src/ui/deck.vue
@ -52,7 +52,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<div v-if="isMobile" :class="$style.nav">
 		<button :class="$style.navButton" class="_button" @click="drawerMenuShowing = true"><i :class="$style.navButtonIcon" class="ti ti-menu-2"></i><span v-if="menuIndicated" :class="$style.navButtonIndicator"><i class="_indicatorCircle"></i></span></button>
 		<button :class="$style.navButton" class="_button" @click="mainRouter.push('/')"><i :class="$style.navButtonIcon" class="ti ti-home"></i></button>
-		<button :class="$style.navButton" class="_button" @click="mainRouter.push('/my/notifications')"><i :class="$style.navButtonIcon" class="ti ti-bell"></i><span v-if="$i?.hasUnreadNotification" :class="$style.navButtonIndicator"><i class="_indicatorCircle"></i></span></button>
+		<button :class="$style.navButton" class="_button" @click="mainRouter.push('/my/notifications')">
+			<i :class="$style.navButtonIcon" class="ti ti-bell"></i>
+			<span v-if="$i?.hasUnreadNotification" :class="$style.navButtonIndicator">
+				<span class="_indicateCounter" :class="$style.itemIndicateValueIcon">{{ $i.unreadNotificationsCount > 99 ? '99+' : $i.unreadNotificationsCount }}</span>
+			</span>
+		</button>
 		<button :class="$style.postButton" class="_button" @click="os.post()"><i :class="$style.navButtonIcon" class="ti ti-pencil"></i></button>
 	</div>

@ -485,5 +490,10 @@ body {
 	color: var(--indicator);
 	font-size: 16px;
 	animation: blink 1s infinite;
+
+	&:has(.itemIndicateValueIcon) {
+		animation: none;
+		font-size: 12px;
+	}
 }
 </style>
--- a/packages/frontend/src/ui/universal.vue
+++ b/packages/frontend/src/ui/universal.vue
@ -27,7 +27,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<div v-if="isMobile" ref="navFooter" :class="$style.nav">
 		<button :class="$style.navButton" class="_button" @click="drawerMenuShowing = true"><i :class="$style.navButtonIcon" class="ti ti-menu-2"></i><span v-if="menuIndicated" :class="$style.navButtonIndicator"><i class="_indicatorCircle"></i></span></button>
 		<button :class="$style.navButton" class="_button" @click="mainRouter.currentRoute.value.name === 'index' ? top() : mainRouter.push('/')"><i :class="$style.navButtonIcon" class="ti ti-home"></i></button>
-		<button :class="$style.navButton" class="_button" @click="mainRouter.push('/my/notifications')"><i :class="$style.navButtonIcon" class="ti ti-bell"></i><span v-if="$i?.hasUnreadNotification" :class="$style.navButtonIndicator"><i class="_indicatorCircle"></i></span></button>
+		<button :class="$style.navButton" class="_button" @click="mainRouter.push('/my/notifications')">
+			<i :class="$style.navButtonIcon" class="ti ti-bell"></i>
+			<span v-if="$i?.hasUnreadNotification" :class="$style.navButtonIndicator">
+				<span class="_indicateCounter" :class="$style.itemIndicateValueIcon">{{ $i.unreadNotificationsCount > 99 ? '99+' : $i.unreadNotificationsCount }}</span>
+			</span>
+		</button>
 		<button :class="$style.navButton" class="_button" @click="widgetsShowing = true"><i :class="$style.navButtonIcon" class="ti ti-apps"></i></button>
 		<button :class="$style.postButton" class="_button" @click="os.post()"><i :class="$style.navButtonIcon" class="ti ti-pencil"></i></button>
 	</div>
@ -444,6 +449,11 @@ $widgets-hide-threshold: 1090px;
 	color: var(--indicator);
 	font-size: 16px;
 	animation: blink 1s infinite;
+
+	&:has(.itemIndicateValueIcon) {
+		animation: none;
+		font-size: 12px;
+	}
 }

 .menuDrawerBg {