Merge branch 'develop' into pr/12141

CHANGELOG.md

@@ -21,6 +21,7 @@
 		- 最大でも黄色いエリア内にデコレーションを収めることを推奨します。
 		- 画像は512x512pxを推奨します。
 - Enhance: すでにフォローしたすべての人の返信をTLに追加できるように
+- Enhance: 未読の通知数を表示できるように
 - Enhance: ローカリゼーションの更新
 - Enhance: 依存関係の更新
 
@@ -54,6 +55,7 @@
 - Enhance: フォローしているチャンネルをフォロー解除した時（またはその逆）、タイムラインに反映される間隔を改善
 - Enhance: プロフィールの自己紹介欄のMFMが連合するようになりました
 	- 相手がMisskey v2023.11.0以降である必要があります
+- Enhance: チャンネル取得時のパフォーマンスを向上
 - Fix: リストTLに自分のフォロワー限定投稿が含まれない問題を修正
 - Fix: ローカルタイムラインに投稿者自身の投稿への返信が含まれない問題を修正
 - Fix: 自分のフォローしているユーザーの自分のフォローしていないユーザーの visibility: followers な投稿への返信がストリーミングで流れてくる問題を修正
@@ -64,6 +66,7 @@
 - Fix: リノートをリノートできるのを修正
 - Fix: アクセストークンを削除すると、通知が取得できなくなる場合がある問題を修正
 - Fix: 自身の宛先なしダイレクト投稿がストリーミングで流れてこない問題を修正
+- Fix: サーバーサイドからのテスト通知を正しく行えるように修正
 
 ## 2023.10.2
 

package.json

@@ -48,14 +48,14 @@
 		"cssnano": "6.0.1",
 		"js-yaml": "4.1.0",
 		"postcss": "8.4.31",
-		"terser": "5.22.0",
+		"terser": "5.24.0",
 		"typescript": "5.2.2"
 	},
 	"devDependencies": {
-		"@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",
 		"cross-env": "7.0.3",
-		"cypress": "13.3.3",
+		"cypress": "13.4.0",
 		"eslint": "8.52.0",
 		"start-server-and-test": "2.0.1"
 	},

packages/backend/package.json

@@ -66,17 +66,17 @@
 		"@discordapp/twemoji": "14.1.2",
 		"@fastify/accepts": "4.2.0",
 		"@fastify/cookie": "9.1.0",
-		"@fastify/cors": "8.4.0",
+		"@fastify/cors": "8.4.1",
 		"@fastify/express": "2.3.0",
 		"@fastify/http-proxy": "9.2.1",
 		"@fastify/multipart": "8.0.0",
-		"@fastify/static": "6.11.2",
+		"@fastify/static": "6.12.0",
 		"@fastify/view": "8.2.0",
 		"@nestjs/common": "10.2.7",
 		"@nestjs/core": "10.2.7",
 		"@nestjs/testing": "10.2.7",
 		"@peertube/http-signature": "1.7.0",
-		"@simplewebauthn/server": "8.3.4",
+		"@simplewebauthn/server": "8.3.5",
 		"@sinonjs/fake-timers": "11.2.2",
 		"@swc/cli": "0.1.62",
 		"@swc/core": "1.3.95",
@@ -87,7 +87,7 @@
 		"bcryptjs": "2.4.3",
 		"blurhash": "2.0.5",
 		"body-parser": "1.20.2",
-		"bullmq": "4.12.6",
+		"bullmq": "4.12.7",
 		"cacheable-lookup": "7.0.0",
 		"cbor": "9.0.1",
 		"chalk": "5.3.0",
@@ -138,7 +138,7 @@
 		"probe-image-size": "7.2.3",
 		"promise-limit": "2.7.0",
 		"pug": "3.0.2",
-		"punycode": "2.3.0",
+		"punycode": "2.3.1",
 		"pureimage": "0.3.17",
 		"qrcode": "1.5.3",
 		"random-seed": "0.3.0",
@@ -175,7 +175,7 @@
 		"@simplewebauthn/typescript-types": "8.3.4",
 		"@swc/jest": "0.2.29",
 		"@types/accepts": "1.3.6",
-		"@types/archiver": "5.3.4",
+		"@types/archiver": "6.0.0",
 		"@types/bcryptjs": "2.4.5",
 		"@types/body-parser": "1.19.4",
 		"@types/cbor": "6.0.0",
@@ -183,14 +183,14 @@
 		"@types/content-disposition": "0.5.7",
 		"@types/fluent-ffmpeg": "2.1.23",
 		"@types/http-link-header": "1.0.4",
-		"@types/jest": "29.5.6",
+		"@types/jest": "29.5.7",
 		"@types/js-yaml": "4.0.8",
 		"@types/jsdom": "21.1.4",
 		"@types/jsonld": "1.5.11",
 		"@types/jsrsasign": "10.5.11",
 		"@types/mime-types": "2.1.3",
 		"@types/ms": "0.7.33",
-		"@types/node": "20.8.9",
+		"@types/node": "20.8.10",
 		"@types/node-fetch": "3.0.3",
 		"@types/nodemailer": "6.4.13",
 		"@types/oauth": "0.9.3",
@@ -213,8 +213,8 @@
 		"@types/vary": "1.1.2",
 		"@types/web-push": "3.6.2",
 		"@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",
 		"aws-sdk-client-mock": "3.0.0",
 		"cross-env": "7.0.3",
 		"eslint": "8.52.0",

packages/backend/src/config.ts

@@ -258,7 +258,7 @@ export function loadConfig(): Config {
 		clientEntry: clientManifest['src/_boot_.ts'],
 		clientManifestExists: clientManifestExists,
 		perChannelMaxNoteCacheCount: config.perChannelMaxNoteCacheCount ?? 1000,
-		perUserNotificationsMaxCount: config.perUserNotificationsMaxCount ?? 300,
+		perUserNotificationsMaxCount: config.perUserNotificationsMaxCount ?? 500,
 		deactivateAntennaThreshold: config.deactivateAntennaThreshold ?? (1000 * 60 * 60 * 24 * 7),
 		pidFile: config.pidFile,
 	};

packages/backend/src/core/NotificationService.ts

@@ -144,7 +144,9 @@ export class NotificationService implements OnApplicationShutdown {
 		this.globalEventService.publishMainStream(notifieeId, 'notification', packed);
 
 		// 2秒経っても(今回作成した)通知が既読にならなかったら「未読の通知がありますよ」イベントを発行する
-		setTimeout(2000, 'unread notification', { signal: this.#shutdownController.signal }).then(async () => {
+		// テスト通知の場合は即時発行
+		const interval = notification.type === 'test' ? 0 : 2000;
+		setTimeout(interval, 'unread notification', { signal: this.#shutdownController.signal }).then(async () => {
 			const latestReadNotificationId = await this.redisClient.get(`latestReadNotification:${notifieeId}`);
 			if (latestReadNotificationId && (latestReadNotificationId >= (await redisIdPromise)!)) return;
 

packages/backend/src/core/entities/ChannelEntityService.ts

@@ -5,7 +5,7 @@
 
 import { Inject, Injectable } from '@nestjs/common';
 import { DI } from '@/di-symbols.js';
-import type { ChannelFavoritesRepository, ChannelFollowingsRepository, ChannelsRepository, DriveFilesRepository, NoteUnreadsRepository, NotesRepository } from '@/models/_.js';
+import type { ChannelFavoritesRepository, ChannelFollowingsRepository, ChannelsRepository, DriveFilesRepository, NotesRepository } from '@/models/_.js';
 import type { Packed } from '@/misc/json-schema.js';
 import type { } from '@/models/Blocking.js';
 import type { MiUser } from '@/models/User.js';
@@ -31,9 +31,6 @@ export class ChannelEntityService {
 		@Inject(DI.notesRepository)
 		private notesRepository: NotesRepository,
 
-		@Inject(DI.noteUnreadsRepository)
-		private noteUnreadsRepository: NoteUnreadsRepository,
-
 		@Inject(DI.driveFilesRepository)
 		private driveFilesRepository: DriveFilesRepository,
 
@@ -54,13 +51,6 @@ export class ChannelEntityService {
 
 		const banner = channel.bannerId ? await this.driveFilesRepository.findOneBy({ id: channel.bannerId }) : null;
 
-		const hasUnreadNote = meId ? await this.noteUnreadsRepository.exist({
-			where: {
-				noteChannelId: channel.id,
-				userId: meId,
-			},
-		}) : undefined;
-
 		const isFollowing = meId ? await this.channelFollowingsRepository.exist({
 			where: {
 				followerId: meId,
@@ -99,7 +89,7 @@ export class ChannelEntityService {
 			...(me ? {
 				isFollowing,
 				isFavorited,
-				hasUnreadNote,
+				hasUnreadNote: false, // 後方互換性のため
 			} : {}),
 
 			...(detailed ? {

packages/backend/src/core/entities/UserEntityService.ts

@@ -15,6 +15,7 @@ import { awaitAll } from '@/misc/prelude/await-all.js';
 import { USER_ACTIVE_THRESHOLD, USER_ONLINE_THRESHOLD } from '@/const.js';
 import type { MiLocalUser, MiPartialLocalUser, MiPartialRemoteUser, MiRemoteUser, MiUser } from '@/models/User.js';
 import { birthdaySchema, descriptionSchema, localUsernameSchema, locationSchema, nameSchema, passwordSchema } from '@/models/User.js';
+import { MiNotification } from '@/models/Notification.js';
 import type { UsersRepository, UserSecurityKeysRepository, FollowingsRepository, FollowRequestsRepository, BlockingsRepository, MutingsRepository, DriveFilesRepository, NoteUnreadsRepository, UserNotePiningsRepository, UserProfilesRepository, AnnouncementReadsRepository, AnnouncementsRepository, MiUserProfile, RenoteMutingsRepository, UserMemoRepository } from '@/models/_.js';
 import { bindThis } from '@/decorators.js';
 import { RoleService } from '@/core/RoleService.js';
@@ -235,17 +236,34 @@ export class UserEntityService implements OnModuleInit {
 	}
 
 	@bindThis
-	public async getHasUnreadNotification(userId: MiUser['id']): Promise<boolean> {
+	public async getNotificationsInfo(userId: MiUser['id']): Promise<{
+		hasUnread: boolean;
+		unreadCount: number;
+	}> {
+		const response = {
+			hasUnread: false,
+			unreadCount: 0,
+		};
+
 		const latestReadNotificationId = await this.redisClient.get(`latestReadNotification:${userId}`);
 
-		const latestNotificationIdsRes = await this.redisClient.xrevrange(
-			`notificationTimeline:${userId}`,
-			'+',
-			'-',
-			'COUNT', 1);
-		const latestNotificationId = latestNotificationIdsRes[0]?.[0];
+		if (!latestReadNotificationId) {
+			response.unreadCount = await this.redisClient.xlen(`notificationTimeline:${userId}`);
+		} else {
+			const latestNotificationIdsRes = await this.redisClient.xrevrange(
+				`notificationTimeline:${userId}`,
+				'+',
+				latestReadNotificationId,
+			);
 
-		return latestNotificationId != null && (latestReadNotificationId == null || latestReadNotificationId < latestNotificationId);
+			response.unreadCount = (latestNotificationIdsRes.length - 1 >= 0) ? latestNotificationIdsRes.length - 1 : 0;
+		}
+
+		if (response.unreadCount > 0) {
+			response.hasUnread = true;
+		}
+
+		return response;
 	}
 
 	@bindThis
@@ -331,6 +349,8 @@ export class UserEntityService implements OnModuleInit {
 				...announcement,
 			})) : null;
 
+		const notificationsInfo = isMe && opts.detail ? await this.getNotificationsInfo(user.id) : null;
+
 		const packed = {
 			id: user.id,
 			name: user.name,
@@ -449,8 +469,9 @@ export class UserEntityService implements OnModuleInit {
 				unreadAnnouncements,
 				hasUnreadAntenna: this.getHasUnreadAntenna(user.id),
 				hasUnreadChannel: false, // 後方互換性のため
-				hasUnreadNotification: this.getHasUnreadNotification(user.id),
+				hasUnreadNotification: notificationsInfo?.hasUnread, // 後方互換性のため
 				hasPendingReceivedFollowRequest: this.getHasPendingReceivedFollowRequest(user.id),
+				unreadNotificationsCount: notificationsInfo?.unreadCount,
 				mutedWords: profile!.mutedWords,
 				mutedInstances: profile!.mutedInstances,
 				mutingNotificationTypes: [], // 後方互換性のため

packages/backend/src/models/json-schema/user.ts

@@ -399,6 +399,10 @@ export const packedMeDetailedOnlySchema = {
 			type: 'boolean',
 			nullable: false, optional: false,
 		},
+		unreadNotificationsCount: {
+			type: 'number',
+			nullable: false, optional: false,
+		},
 		mutedWords: {
 			type: 'array',
 			nullable: false, optional: false,

packages/backend/test/e2e/users.ts

@@ -164,6 +164,7 @@ describe('ユーザー', () => {
 			hasUnreadAntenna: user.hasUnreadAntenna,
 			hasUnreadChannel: user.hasUnreadChannel,
 			hasUnreadNotification: user.hasUnreadNotification,
+			unreadNotificationsCount: user.unreadNotificationsCount,
 			hasPendingReceivedFollowRequest: user.hasPendingReceivedFollowRequest,
 			unreadAnnouncements: user.unreadAnnouncements,
 			mutedWords: user.mutedWords,
@@ -414,6 +415,7 @@ describe('ユーザー', () => {
 		assert.strictEqual(response.hasUnreadAntenna, false);
 		assert.strictEqual(response.hasUnreadChannel, false);
 		assert.strictEqual(response.hasUnreadNotification, false);
+		assert.strictEqual(response.unreadNotificationsCount, 0);
 		assert.strictEqual(response.hasPendingReceivedFollowRequest, false);
 		assert.deepStrictEqual(response.unreadAnnouncements, []);
 		assert.deepStrictEqual(response.mutedWords, []);

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",

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', () => {

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;

packages/frontend/src/components/MkNotifications.vue

@@ -22,7 +22,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { onUnmounted, onMounted, computed, shallowRef } from 'vue';
+import { onUnmounted, onDeactivated, onMounted, computed, shallowRef } from 'vue';
 import MkPagination, { Paging } from '@/components/MkPagination.vue';
 import XNotification from '@/components/MkNotification.vue';
 import MkDateSeparatedList from '@/components/MkDateSeparatedList.vue';
@@ -68,6 +68,10 @@ onMounted(() => {
 onUnmounted(() => {
 	if (connection) connection.dispose();
 });
+
+onDeactivated(() => {
+	if (connection) connection.dispose();
+});
 </script>
 
 <style lang="scss" module>

packages/frontend/src/components/global/MkFooterSpacer.vue

@@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<div :class="[$style.spacer, defaultStore.reactiveState.darkMode ? $style.dark : $style.light]"></div>
+<div :class="[$style.spacer, defaultStore.reactiveState.darkMode.value ? $style.dark : $style.light]"></div>
 </template>
 
 <script lang="ts" setup>
@@ -22,7 +22,7 @@ import { defaultStore } from '@/store.js';
 	background-color: rgba(255, 255, 255, 0);
 
 	&.light {
-		background-image: repeating-linear-gradient(135deg, transparent, transparent 16px, #00000026 16px, #00000026 20px );
+		background-image: repeating-linear-gradient(135deg, transparent, transparent 16px, #00000010 16px, #00000010 20px );
 	}
 
 	&.dark {

packages/frontend/src/navbar.ts

@@ -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: {

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) {

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;

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');
 		}
 

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 {

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>

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 {

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>

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 {

packages/misskey-js/etc/misskey-js.api.md

@@ -2488,6 +2488,7 @@ type MeDetailed = UserDetailed & {
     hasUnreadMessagingMessage: boolean;
     hasUnreadNotification: boolean;
     hasUnreadSpecifiedNotes: boolean;
+    unreadNotificationsCount: number;
     hideOnlineStatus: boolean;
     injectFeaturedNote: boolean;
     integrations: Record<string, any>;
@@ -3023,8 +3024,8 @@ type UserSorting = '+follower' | '-follower' | '+createdAt' | '-createdAt' | '+u
 // src/api.types.ts:16:32 - (ae-forgotten-export) The symbol "TODO" needs to be exported by the entry point index.d.ts
 // src/api.types.ts:18:25 - (ae-forgotten-export) The symbol "NoParams" needs to be exported by the entry point index.d.ts
 // src/api.types.ts:633:18 - (ae-forgotten-export) The symbol "ShowUserReq" needs to be exported by the entry point index.d.ts
-// src/entities.ts:115:2 - (ae-forgotten-export) The symbol "notificationTypes_2" needs to be exported by the entry point index.d.ts
-// src/entities.ts:611:2 - (ae-forgotten-export) The symbol "ModerationLogPayloads" needs to be exported by the entry point index.d.ts
+// src/entities.ts:116:2 - (ae-forgotten-export) The symbol "notificationTypes_2" needs to be exported by the entry point index.d.ts
+// src/entities.ts:612:2 - (ae-forgotten-export) The symbol "ModerationLogPayloads" needs to be exported by the entry point index.d.ts
 // src/streaming.types.ts:33:4 - (ae-forgotten-export) The symbol "FIXME" needs to be exported by the entry point index.d.ts
 
 // (No @packageDocumentation comment for this package)

packages/misskey-js/package.json

@@ -20,12 +20,12 @@
 		"url": "git+https://github.com/misskey-dev/misskey.js.git"
 	},
 	"devDependencies": {
-		"@microsoft/api-extractor": "7.38.0",
+		"@microsoft/api-extractor": "7.38.1",
 		"@swc/jest": "0.2.29",
-		"@types/jest": "29.5.6",
-		"@types/node": "20.8.9",
-		"@typescript-eslint/eslint-plugin": "6.9.0",
-		"@typescript-eslint/parser": "6.9.0",
+		"@types/jest": "29.5.7",
+		"@types/node": "20.8.10",
+		"@typescript-eslint/eslint-plugin": "6.9.1",
+		"@typescript-eslint/parser": "6.9.1",
 		"eslint": "8.52.0",
 		"jest": "29.7.0",
 		"jest-fetch-mock": "3.0.3",

packages/misskey-js/src/entities.ts

@@ -106,6 +106,7 @@ export type MeDetailed = UserDetailed & {
 	hasUnreadMessagingMessage: boolean;
 	hasUnreadNotification: boolean;
 	hasUnreadSpecifiedNotes: boolean;
+	unreadNotificationsCount: number;
 	hideOnlineStatus: boolean;
 	injectFeaturedNote: boolean;
 	integrations: Record<string, any>;

packages/sw/package.json

@@ -14,7 +14,7 @@
 		"misskey-js": "workspace:*"
 	},
 	"devDependencies": {
-		"@typescript-eslint/parser": "6.9.0",
+		"@typescript-eslint/parser": "6.9.1",
 		"@typescript/lib-webworker": "npm:@types/serviceworker@0.0.67",
 		"eslint": "8.52.0",
 		"eslint-plugin-import": "2.29.0",

packages/sw/src/scripts/create-notification.ts

@@ -225,6 +225,13 @@ async function composeNotification(data: PushNotificationDataMap[keyof PushNotif
 						data,
 					}];
 
+				case 'test':
+					return [t('_notification.testNotification'), {
+						body: t('_notification.notificationWillBeDisplayedLikeThis'),
+						badge: iconUrl('bell'),
+						data,
+					}];
+		
 				default:
 					return null;
 			}

packages/sw/src/types.ts

@@ -41,6 +41,7 @@ export type BadgeNames =
 	| 'antenna'
 	| 'arrow-back-up'
 	| 'at'
+	| 'bell'
 	| 'chart-arrows'
 	| 'circle-check'
 	| 'medal'