From 51c9d799708ac866e3443209628c62d160d4f92d Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Wed, 1 Nov 2023 12:04:28 +0900
Subject: [PATCH] tweak

---
 locales/index.d.ts                                      | 1 -
 locales/ja-JP.yml                                       | 1 -
 packages/frontend/src/components/MkLaunchPad.vue        | 6 +++---
 packages/frontend/src/pages/settings/general.vue        | 3 ---
 packages/frontend/src/store.ts                          | 4 ----
 packages/frontend/src/style.scss                        | 8 +-------
 packages/frontend/src/ui/_common_/navbar-for-mobile.vue | 2 +-
 packages/frontend/src/ui/_common_/navbar.vue            | 7 ++++---
 packages/frontend/src/ui/classic.sidebar.vue            | 2 +-
 packages/frontend/src/ui/deck.vue                       | 3 +--
 packages/frontend/src/ui/universal.vue                  | 3 +--
 11 files changed, 12 insertions(+), 28 deletions(-)

diff --git a/locales/index.d.ts b/locales/index.d.ts
index d7646c66f4..8bc073d1e5 100644
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@@ -1148,7 +1148,6 @@ export interface Locale {
     "privacyPolicyUrl": string;
     "tosAndPrivacyPolicy": string;
     "avatarDecorations": string;
-    "showUnreadNotificationCount": string;
     "attach": string;
     "detach": string;
     "angle": string;
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index bcb8fb973b..035cecd25a 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -1145,7 +1145,6 @@ privacyPolicy: "プライバシーポリシー"
 privacyPolicyUrl: "プライバシーポリシーURL"
 tosAndPrivacyPolicy: "利用規約・プライバシーポリシー"
 avatarDecorations: "アイコンデコレーション"
-showUnreadNotificationCount: "未読の通知の数を表示する"
 attach: "付ける"
 detach: "外す"
 angle: "角度"
diff --git a/packages/frontend/src/components/MkLaunchPad.vue b/packages/frontend/src/components/MkLaunchPad.vue
index 804defd021..87f15a110f 100644
--- a/packages/frontend/src/components/MkLaunchPad.vue
+++ b/packages/frontend/src/components/MkLaunchPad.vue
@@ -11,13 +11,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<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 && item.indicateValue && defaultStore.state.showUnreadNotificationCount" class="_indicateCounter indicatorWithValue"><span>{{ item.indicateValue }}</span></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 && item.indicateValue && defaultStore.state.showUnreadNotificationCount" class="_indicateCounter indicatorWithValue"><span>{{ item.indicateValue }}</span></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>
@@ -29,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';
 
diff --git a/packages/frontend/src/pages/settings/general.vue b/packages/frontend/src/pages/settings/general.vue
index e105c41726..85d038e3d1 100644
--- a/packages/frontend/src/pages/settings/general.vue
+++ b/packages/frontend/src/pages/settings/general.vue
@@ -121,7 +121,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<MkSwitch v-model="useSystemFont">{{ i18n.ts.useSystemFont }}</MkSwitch>
 				<MkSwitch v-model="disableDrawer">{{ i18n.ts.disableDrawer }}</MkSwitch>
 				<MkSwitch v-model="forceShowAds">{{ i18n.ts.forceShowAds }}</MkSwitch>
-				<MkSwitch v-model="showUnreadNotificationCount">{{ i18n.ts.showUnreadNotificationCount }}</MkSwitch>
 				<MkSwitch v-model="enableDataSaverMode">{{ i18n.ts.dataSaver }}</MkSwitch>
 			</div>
 			<div>
@@ -255,7 +254,6 @@ const notificationPosition = computed(defaultStore.makeGetterSetter('notificatio
 const notificationStackAxis = computed(defaultStore.makeGetterSetter('notificationStackAxis'));
 const keepScreenOn = computed(defaultStore.makeGetterSetter('keepScreenOn'));
 const defaultWithReplies = computed(defaultStore.makeGetterSetter('defaultWithReplies'));
-const showUnreadNotificationCount = computed(defaultStore.makeGetterSetter('showUnreadNotificationCount'));
 const disableStreamingTimeline = computed(defaultStore.makeGetterSetter('disableStreamingTimeline'));
 
 watch(lang, () => {
@@ -293,7 +291,6 @@ watch([
 	reactionsDisplaySize,
 	highlightSensitiveMedia,
 	keepScreenOn,
-	showUnreadNotificationCount,
 	disableStreamingTimeline,
 ], async () => {
 	await reloadAsk();
diff --git a/packages/frontend/src/store.ts b/packages/frontend/src/store.ts
index cf09fee195..803f2f648d 100644
--- a/packages/frontend/src/store.ts
+++ b/packages/frontend/src/store.ts
@@ -369,10 +369,6 @@ export const defaultStore = markRaw(new Storage('base', {
 		where: 'account',
 		default: false,
 	},
-	showUnreadNotificationCount: {
-		where: 'deviceAccount',
-		default: true,
-	},
 	disableStreamingTimeline: {
 		where: 'device',
 		default: false,
diff --git a/packages/frontend/src/style.scss b/packages/frontend/src/style.scss
index af0f6de926..28fb5ba2a5 100644
--- a/packages/frontend/src/style.scss
+++ b/packages/frontend/src/style.scss
@@ -165,13 +165,7 @@ hr {
 	align-items: center;
 	justify-content: center;
 	border-radius: 99rem;
-
-	> span {
-		display: inline-block;
-		padding: .125em .25em;
-		line-height: 1.5em;
-		font-size: 1em;
-	}
+	padding: 0.3em 0.5em;
 }
 
 ._noSelect {
diff --git a/packages/frontend/src/ui/_common_/navbar-for-mobile.vue b/packages/frontend/src/ui/_common_/navbar-for-mobile.vue
index 534ab4981c..aa4a8c4145 100644
--- a/packages/frontend/src/ui/_common_/navbar-for-mobile.vue
+++ b/packages/frontend/src/ui/_common_/navbar-for-mobile.vue
@@ -20,7 +20,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<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">
-					<span v-if="navbarItemDef[item].indicateValue && defaultStore.state.showUnreadNotificationCount" :class="$style.itemIndicateValueIcon"><span>{{ navbarItemDef[item].indicateValue }}</span></span>
+					<span v-if="navbarItemDef[item].indicateValue" :class="$style.itemIndicateValueIcon"><span>{{ navbarItemDef[item].indicateValue }}</span></span>
 					<i v-else class="_indicatorCircle"></i>
 				</span>
 			</component>
diff --git a/packages/frontend/src/ui/_common_/navbar.vue b/packages/frontend/src/ui/_common_/navbar.vue
index 9a23584f08..bd554ad8be 100644
--- a/packages/frontend/src/ui/_common_/navbar.vue
+++ b/packages/frontend/src/ui/_common_/navbar.vue
@@ -30,7 +30,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				>
 					<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">
-						<span v-if="navbarItemDef[item].indicateValue && defaultStore.state.showUnreadNotificationCount" class="_indicateCounter" :class="$style.itemIndicateValueIcon"><span>{{ navbarItemDef[item].indicateValue }}</span></span>
+						<span v-if="navbarItemDef[item].indicateValue" class="_indicateCounter" :class="$style.itemIndicateValueIcon">{{ navbarItemDef[item].indicateValue }}</span>
 						<i v-else class="_indicatorCircle"></i>
 					</span>
 				</component>
@@ -109,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);
@@ -489,7 +489,8 @@ function more(ev: MouseEvent) {
 		&:has(.itemIndicateValueIcon) {
 			animation: none;
 			top: 4px;
-			left: 20px;
+			left: auto;
+			right: 4px;
 			font-size: 10px;
 		}
 	}
diff --git a/packages/frontend/src/ui/classic.sidebar.vue b/packages/frontend/src/ui/classic.sidebar.vue
index abcedfa920..01dbf1c9c0 100644
--- a/packages/frontend/src/ui/classic.sidebar.vue
+++ b/packages/frontend/src/ui/classic.sidebar.vue
@@ -22,7 +22,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<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">
-				<span v-if="navbarItemDef[item].indicateValue && defaultStore.state.showUnreadNotificationCount" class="_indicateCounter itemIndicateValueIcon"><span>{{ navbarItemDef[item].indicateValue }}</span></span>
+				<span v-if="navbarItemDef[item].indicateValue" class="_indicateCounter itemIndicateValueIcon">{{ navbarItemDef[item].indicateValue }}</span>
 				<i v-else class="_indicatorCircle"></i>
 			</span>
 		</component>
diff --git a/packages/frontend/src/ui/deck.vue b/packages/frontend/src/ui/deck.vue
index 13d6b23eb8..69f1613e62 100644
--- a/packages/frontend/src/ui/deck.vue
+++ b/packages/frontend/src/ui/deck.vue
@@ -55,8 +55,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<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 v-if="$i?.unreadNotificationCount && defaultStore.state.showUnreadNotificationCount" class="_indicateCounter" :class="$style.itemIndicateValueIcon"><span>{{ $i.unreadNotificationCount > 99 ? '99+' : $i.unreadNotificationCount }}</span></span>
-				<i v-else class="_indicatorCircle"></i>
+				<span class="_indicateCounter" :class="$style.itemIndicateValueIcon">{{ $i.unreadNotificationCount > 99 ? '99+' : $i.unreadNotificationCount }}</span>
 			</span>
 		</button>
 		<button :class="$style.postButton" class="_button" @click="os.post()"><i :class="$style.navButtonIcon" class="ti ti-pencil"></i></button>
diff --git a/packages/frontend/src/ui/universal.vue b/packages/frontend/src/ui/universal.vue
index da79ebea1b..2dafd4e6eb 100644
--- a/packages/frontend/src/ui/universal.vue
+++ b/packages/frontend/src/ui/universal.vue
@@ -30,8 +30,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<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 v-if="$i?.unreadNotificationCount && defaultStore.state.showUnreadNotificationCount" class="_indicateCounter" :class="$style.itemIndicateValueIcon"><span>{{ $i.unreadNotificationCount > 99 ? '99+' : $i.unreadNotificationCount }}</span></span>
-				<i v-else class="_indicatorCircle"></i>
+				<span class="_indicateCounter" :class="$style.itemIndicateValueIcon">{{ $i.unreadNotificationCount > 99 ? '99+' : $i.unreadNotificationCount }}</span>
 			</span>
 		</button>
 		<button :class="$style.navButton" class="_button" @click="widgetsShowing = true"><i :class="$style.navButtonIcon" class="ti ti-apps"></i></button>