diff --git a/locales/index.d.ts b/locales/index.d.ts index d90f8fa6f2..09a17ce870 100644 --- a/locales/index.d.ts +++ b/locales/index.d.ts @@ -1138,6 +1138,7 @@ export interface Locale { "privacyPolicy": string; "privacyPolicyUrl": string; "tosAndPrivacyPolicy": string; + "showUnreadNotificationCount": string; "_announcement": { "forExistingUsers": string; "forExistingUsersDescription": string; diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index c92d834366..287a89ec09 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -1135,6 +1135,7 @@ impressumDescription: "ドイツなどの一部の国と地域では表示が義 privacyPolicy: "プライバシーポリシー" privacyPolicyUrl: "プライバシーポリシーURL" tosAndPrivacyPolicy: "利用規約・プライバシーポリシー" +showUnreadNotificationCount: "未読の通知の数を表示する" _announcement: forExistingUsers: "既存ユーザーのみ" diff --git a/packages/frontend/src/components/MkLaunchPad.vue b/packages/frontend/src/components/MkLaunchPad.vue index 96df713a64..d7c83390f6 100644 --- a/packages/frontend/src/components/MkLaunchPad.vue +++ b/packages/frontend/src/components/MkLaunchPad.vue @@ -8,16 +8,16 @@ SPDX-License-Identifier: AGPL-3.0-only
diff --git a/packages/frontend/src/pages/settings/general.vue b/packages/frontend/src/pages/settings/general.vue index 55de53fb07..642f4fd384 100644 --- a/packages/frontend/src/pages/settings/general.vue +++ b/packages/frontend/src/pages/settings/general.vue @@ -119,6 +119,7 @@ SPDX-License-Identifier: AGPL-3.0-only {{ i18n.ts.useSystemFont }} {{ i18n.ts.disableDrawer }} {{ i18n.ts.forceShowAds }} + {{ i18n.ts.showUnreadNotificationCount }} {{ i18n.ts.dataSaver }}
@@ -249,6 +250,7 @@ const mediaListWithOneImageAppearance = computed(defaultStore.makeGetterSetter(' const notificationPosition = computed(defaultStore.makeGetterSetter('notificationPosition')); const notificationStackAxis = computed(defaultStore.makeGetterSetter('notificationStackAxis')); const keepScreenOn = computed(defaultStore.makeGetterSetter('keepScreenOn')); +const showUnreadNotificationCount = computed(defaultStore.makeGetterSetter('showUnreadNotificationCount')); watch(lang, () => { miLocalStorage.setItem('lang', lang.value as string); @@ -285,6 +287,7 @@ watch([ reactionsDisplaySize, highlightSensitiveMedia, keepScreenOn, + showUnreadNotificationCount, ], async () => { await reloadAsk(); }); diff --git a/packages/frontend/src/store.ts b/packages/frontend/src/store.ts index 58730c7cef..aeacb30fc4 100644 --- a/packages/frontend/src/store.ts +++ b/packages/frontend/src/store.ts @@ -357,6 +357,10 @@ export const defaultStore = markRaw(new Storage('base', { where: 'device', default: false, }, + showUnreadNotificationCount: { + where: 'deviceAccount', + default: false, + }, })); // TODO: 他のタブと永続化されたstateを同期 diff --git a/packages/frontend/src/ui/_common_/navbar-for-mobile.vue b/packages/frontend/src/ui/_common_/navbar-for-mobile.vue index aa4a8c4145..534ab4981c 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 {{ navbarItemDef[item].title }} - {{ navbarItemDef[item].indicateValue }} + {{ navbarItemDef[item].indicateValue }} diff --git a/packages/frontend/src/ui/_common_/navbar.vue b/packages/frontend/src/ui/_common_/navbar.vue index 5c8346016f..6c0cfdb487 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 > {{ navbarItemDef[item].title }} - {{ navbarItemDef[item].indicateValue }} + {{ navbarItemDef[item].indicateValue }} diff --git a/packages/frontend/src/ui/classic.sidebar.vue b/packages/frontend/src/ui/classic.sidebar.vue index 9172d51893..77711707e3 100644 --- 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
{{ navbarItemDef[item].title }} - + + {{ navbarItemDef[item].indicateValue }} + +
@@ -218,6 +221,30 @@ watch(defaultStore.reactiveState.menuDisplay, () => { color: var(--navIndicator); font-size: 8px; animation: blink 1s infinite; + + &:has(.itemIndicateValueIcon) { + animation: none; + left: auto; + right: 20px; + } + + & > .itemIndicateValueIcon { + display: inline-flex; + color: var(--fgOnAccent); + font-weight: 700; + background: var(--navIndicator); + height: 1.5em; + min-width: 1.5em; + align-items: center; + justify-content: center; + border-radius: 99rem; + + & > span { + display: inline-block; + padding: 0 .25em; + line-height: 1.5em; + } + } } &:hover { diff --git a/packages/frontend/src/ui/deck.vue b/packages/frontend/src/ui/deck.vue index 39fc8a162f..3605b87f4b 100644 --- a/packages/frontend/src/ui/deck.vue +++ b/packages/frontend/src/ui/deck.vue @@ -55,7 +55,7 @@ SPDX-License-Identifier: AGPL-3.0-only diff --git a/packages/frontend/src/ui/universal.vue b/packages/frontend/src/ui/universal.vue index befd6ed257..1e111427d8 100644 --- a/packages/frontend/src/ui/universal.vue +++ b/packages/frontend/src/ui/universal.vue @@ -30,7 +30,7 @@ SPDX-License-Identifier: AGPL-3.0-only