feat: make it toggleable whether to disable emojis in notifications (#9880)

I talked about feature #9865 on my fedi account and received a comment like, "I don't care about emoji reactions in my timelines, but I do care what reactions I get!"

Adding too many options is bad, but I agreed that making it toggleable whether to disable emojis in notifications is helpful, so I added this feature. This allows you to check emoji reactions to your posts in notifications while using the simple UI. I'd say this provides an experience that neither Mastodon nor Misskey has.

The new setting item shows up only when you disable emoji reactions.

Co-authored-by: naskya <m@naskya.net>
Reviewed-on: https://codeberg.org/calckey/calckey/pulls/9880
Co-authored-by: naskya <naskya@noreply.codeberg.org>
Co-committed-by: naskya <naskya@noreply.codeberg.org>

locales/en-US.yml

@@ -115,6 +115,7 @@ sensitive: "NSFW"
 add: "Add"
 reaction: "Reactions"
 enableEmojiReactions: "Enable emoji reactions"
+showEmojisInReactionNotifications: "Show emojis in reaction notifications"
 reactionSetting: "Reactions to show in the reaction picker"
 reactionSettingDescription2: "Drag to reorder, click to delete, press \"+\" to add."
 rememberNoteVisibility: "Remember post visibility settings"

locales/ja-JP.yml

@@ -110,6 +110,7 @@ sensitive: "閲覧注意"
 add: "追加"
 reaction: "リアクション"
 enableEmojiReactions: "絵文字リアクションを有効にする"
+showEmojisInReactionNotifications: "自分の投稿に対するリアクションの通知で絵文字を表示する"
 reactionSetting: "ピッカーに表示するリアクション"
 reactionSettingDescription2: "ドラッグして並び替え、クリックして削除、＋を押して追加します。"
 rememberNoteVisibility: "公開範囲を記憶する"

locales/zh-CN.yml

@@ -108,6 +108,7 @@ sensitive: "敏感内容"
 add: "添加"
 reaction: "回应"
 enableEmojiReaction: "启用表情符号回应"
+showEmojisInReactionNotifications: "在回应通知中显示表情符号"
 reactionSetting: "在选择器中显示的回应"
 reactionSettingDescription2: "拖动重新排序，单击删除，点击 + 添加。"
 rememberNoteVisibility: "保存上次设置的可见性"

locales/zh-TW.yml

@@ -108,6 +108,7 @@ sensitive: "敏感內容"
 add: "新增"
 reaction: "情感"
 enableEmojiReaction: "啟用表情符號反應"
+showEmojisInReactionNotifications: "在反應通知中顯示表情符號"
 reactionSetting: "在選擇器中顯示反應"
 reactionSettingDescription2: "拖動以重新列序，點擊以刪除，按下 + 添加。"
 rememberNoteVisibility: "記住貼文可見性"

packages/client/src/components/MkNotification.vue

@@ -66,8 +66,7 @@
 				<!-- notification.reaction が null になることはまずないが、ここでoptional chaining使うと一部ブラウザで刺さるので念の為 -->
 				<XReactionIcon
 					v-else-if="
-						notification.type === 'reaction' &&
-						defaultStore.state.enableEmojiReactions
+						showEmojiReactions && notification.type === 'reaction'
 					"
 					ref="reactionRef"
 					:reaction="
@@ -83,8 +82,7 @@
 				/>
 				<XReactionIcon
 					v-else-if="
-						notification.type === 'reaction' &&
-						!defaultStore.state.enableEmojiReactions
+						!showEmojiReactions && notification.type === 'reaction'
 					"
 					:reaction="defaultReaction"
 					:no-style="true"
@@ -301,6 +299,9 @@ const props = withDefaults(
 const elRef = ref<HTMLElement>(null);
 const reactionRef = ref(null);
 
+const showEmojiReactions =
+	defaultStore.state.enableEmojiReactions ||
+	defaultStore.state.showEmojisInReactionNotifications;
 const defaultReaction = ["⭐", "👍", "❤️"].includes(instance.defaultReaction)
 	? instance.defaultReaction
 	: "⭐";

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

@@ -115,6 +115,7 @@ const defaultStoreSaveKeys: (keyof (typeof defaultStore)["state"])[] = [
 	"showAdminUpdates",
 	"enableCustomKaTeXMacro",
 	"enableEmojiReactions",
+	"showEmojisInReactionNotifications",
 ];
 const coldDeviceStorageSaveKeys: (keyof typeof ColdDeviceStorage.default)[] = [
 	"lightTheme",

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

@@ -86,6 +86,14 @@
 				</div>
 			</FormSection>
 		</div>
+		<div v-else>
+			<FormSwitch
+				v-model="showEmojisInReactionNotifications"
+				class="_formBlock"
+			>
+				{{ i18n.ts.showEmojisInReactionNotifications }}
+			</FormSwitch>
+		</div>
 	</div>
 </template>
 
@@ -132,6 +140,9 @@ const reactionPickerUseDrawerForMobile = $computed(
 const enableEmojiReactions = $computed(
 	defaultStore.makeGetterSetter("enableEmojiReactions")
 );
+const showEmojisInReactionNotifications = $computed(
+	defaultStore.makeGetterSetter("showEmojisInReactionNotifications")
+);
 
 function save() {
 	defaultStore.set("reactions", reactions);

packages/client/src/store.ts

@@ -298,6 +298,10 @@ export const defaultStore = markRaw(
 			where: "account",
 			default: true,
 		},
+		showEmojisInReactionNotifications: {
+			where: "account",
+			default: true,
+		},
 	}),
 );