feat: Added options to 'show note count' and 'not show notifications' in new note notifications

CHANGELOG_CHERRYPICK.md

@@ -23,6 +23,7 @@
 - 클라이언트: welcomeBack 알림에 프로필 아이콘 추가
 - 클라이언트: 알림을 옆으로 스와이프 하거나 x 버튼을 눌러(데스크톱 전용) 지울 수 있도록 개선 (thanks to @groundpolis)
 - 클라이언트: 알림 디자인 개선
+- 클라이언트: 새 노트 알림에 노트 수 표시 및 알림 표시하지 않음 옵션 추가
 
 ### Bugfixes
 - 클라이언트: 채팅방에서 메시지를 입력하고 있을 때 움직이지 않는 온점(.)이 표시되는 문제

locales/en-US.yml

@@ -1,5 +1,6 @@
 ---
 _lang_: "English"
+newNoteRecivedNotification: "New note notification"
 disableRightClick: "Prohibit right click"
 useEnterToSend: "Press Enter to send"
 useEnterToSendDescription: "When the option is enabled, you can use the Shift+Enter key for line break."
@@ -896,6 +897,10 @@ navbar: "Navigation bar"
 shuffle: "Shuffle"
 account: "Account"
 move: "Move"
+_newNoteRecivedNotificationBehavior:
+  default: "Default"
+  count: "Show number of notes"
+  none: "None"
 _sensitiveMediaDetection:
   description: "Reduces the effort of server moderation through automatically recognizing NSFW media via Machine Learning. This will slightly increase the load on the server."
   sensitivity: "Detection sensitivity"

locales/ja-JP.yml

@@ -1,5 +1,6 @@
 _lang_: "日本語"
 
+newNoteRecivedNotification: "新しいノート通知"
 disableRightClick: "右クリックを禁止"
 useEnterToSend: "Enterキーを押して送信"
 useEnterToSendDescription: "オプションを有効にすると、行替えはShift＋Enterキーでできます。"
@@ -897,6 +898,11 @@ shuffle: "シャッフル"
 account: "アカウント"
 move: "移動"
 
+_newNoteRecivedNotificationBehavior:
+  default: "デフォルト"
+  count: "ノート数表示"
+  none: "表示なし"
+
 _sensitiveMediaDetection:
   description: "機械学習を使って自動でセンシティブなメディアを検出し、モデレーションに役立てることができます。サーバーの負荷が少し増えます。"
   sensitivity: "検出感度"

locales/ko-KR.yml

@@ -1,5 +1,6 @@
 ---
 _lang_: "한국어"
+newNoteRecivedNotification: "새 노트 알림"
 disableRightClick: "우클릭 방지"
 useEnterToSend: "Enter 키를 눌러 보내기"
 useEnterToSendDescription: "옵션을 활성화하면 줄 바꿈은 Shift + Enter 키로 할 수 있어요."
@@ -507,6 +508,7 @@ serverLogs: "서버 로그"
 deleteAll: "모두 삭제"
 showFixedPostForm: "타임라인 상단에 글 작성란 표시"
 newNoteRecived: "새 노트가 있어요!"
+newNoteRecivedCount: "{n}개의 새 노트가 있어요!"
 sounds: "소리"
 listen: "듣기"
 none: "없음"
@@ -896,6 +898,10 @@ navbar: "네비게이션 바"
 shuffle: "셔플"
 account: "계정"
 move: "이동"
+_newNoteRecivedNotificationBehavior:
+  default: "기본"
+  count: "노트 수 표시"
+  none: "표시하지 않음"
 _sensitiveMediaDetection:
   description: "기계학습을 통해 자동으로 민감한 미디어를 탐지하여, 모더레이션에 참고할 수 있도록 하지만, 서버의 부하가 약간 증가하게 돼요."
   sensitivity: "탐지 민감도"

packages/client/src/pages/settings/general.vue

@@ -59,6 +59,13 @@
 		</FormSwitch>
 		<FormSwitch v-model="disableDrawer" class="_formBlock">{{ i18n.ts.disableDrawer }}</FormSwitch>
 
+		<FormSelect v-model="newNoteRecivedNotificationBehavior" class="_formBlock">
+			<template #label>{{ $ts.newNoteRecivedNotification }}</template>
+			<option value="default">{{ $ts._newNoteRecivedNotificationBehavior.default }}</option>
+			<option value="count">{{ $ts._newNoteRecivedNotificationBehavior.count }}</option>
+			<option value="none">{{ $ts._newNoteRecivedNotificationBehavior.none }}</option>
+		</FormSelect>
+
 		<FormRadios v-model="fontSize" class="_formBlock">
 			<template #label>{{ i18n.ts.fontSize }}</template>
 			<option value="1"><span style="font-size: 12px;">Aa</span></option>
@@ -151,6 +158,7 @@ const useReactionPickerForContextMenu = computed(defaultStore.makeGetterSetter('
 const squareAvatars = computed(defaultStore.makeGetterSetter('squareAvatars'));
 const aiChanMode = computed(defaultStore.makeGetterSetter('aiChanMode'));
 const useEnterToSend = computed(defaultStore.makeGetterSetter('useEnterToSend'));
+const newNoteRecivedNotificationBehavior = computed(defaultStore.makeGetterSetter('newNoteRecivedNotificationBehavior'));
 
 watch(lang, () => {
 	localStorage.setItem('lang', lang.value as string);

packages/client/src/pages/settings/preferences-backups.vue

@@ -83,6 +83,7 @@ const defaultStoreSaveKeys: (keyof typeof defaultStore['state'])[] = [
 	'numberOfPageCache',
 	'aiChanMode',
 	'useEnterToSend',
+	'newNoteRecivedNotificationBehavior',
 ];
 const coldDeviceStorageSaveKeys: (keyof typeof ColdDeviceStorage.default)[] = [
 	'lightTheme',

packages/client/src/pages/timeline.vue

@@ -10,7 +10,8 @@
 			<XTutorial v-if="$store.reactiveState.tutorial.value != -1" class="tutorial _block"/>
 			<XPostForm v-if="$store.reactiveState.showFixedPostForm.value" class="post-form _block" fixed/>
 
-			<div v-if="queue > 0" class="new"><button class="_buttonPrimary" @click="top()"><i class="fas fa-arrow-up"></i>{{ i18n.ts.newNoteRecived }}</button></div>
+			<div v-if="queue > 0 && $store.state.newNoteRecivedNotificationBehavior === 'default'" class="new"><button class="_buttonPrimary" @click="top()"><i class="fas fa-arrow-up"></i>{{ i18n.ts.newNoteRecived }}</button></div>
+			<div v-if="queue > 0 && $store.state.newNoteRecivedNotificationBehavior === 'count'" class="new"><button class="_buttonPrimary" @click="top()"><i class="fas fa-arrow-up"></i><I18n :src="i18n.ts.newNoteRecivedCount" text-tag="span"><template #n>{{ queue }}</template></I18n></button></div>
 			<div class="tl _block">
 				<XTimeline
 					ref="tl" :key="src"

packages/client/src/store.ts

@@ -255,6 +255,10 @@ export const defaultStore = markRaw(new Storage('base', {
 		where: 'device',
 		default: false,
 	},
+	newNoteRecivedNotificationBehavior: {
+		where: 'device',
+		default: 'count' as 'default' | 'count' | 'none',
+	},
 }));
 
 // TODO: 他のタブと永続化されたstateを同期