Feat: 未読通知数を表示できるように (#11982)

* 未読通知数を表示できるように

* Update Changelog

* オプトインにする

* Fix lint

* (add) テスト通知のプッシュ通知を追加

* add test

* フロントエンドの表示上限を99に変更

* Make it default on

* 共通スタイルをくくりだす

* Update Changelog

* tweak

* Update UserEntityService.ts

* rename

* Update navbar-for-mobile.vue

---------

Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>

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>