enhance(frontend): ミュートした絵文字をデバイス間で同期できるように

Resolve #16158

2 files changed, 49 insertions, 23 deletions

diff --git a/packages/frontend/src/pages/settings/mute-block.emoji-mute.vue b/packages/frontend/src/pages/settings/mute-block.emoji-mute.vue
index 601ca7ee49..ea131381a1 100644
--- a/packages/frontend/src/pages/settings/mute-block.emoji-mute.vue
+++ b/packages/frontend/src/pages/settings/mute-block.emoji-mute.vue
@@ -4,33 +4,45 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<div :class="$style.emojis">
-	<div v-for="emoji in emojis" :key="`emojiMute-${emoji}`" :class="$style.emoji" @click="onEmojiClick($event, emoji)">
-		<MkCustomEmoji
-			v-if="emoji.startsWith(':')"
-			:name="customEmojiName(emoji)"
-			:host="customEmojiHost(emoji)"
-			:normal="true"
-			:menu="false"
-			:menuReaction="false"
-			:ignoreMuted="true"
-		/>
-		<MkEmoji
-			v-else
-			:emoji="emoji"
-			:menu="false"
-			:menuReaction="false"
-			:ignoreMuted="true"
-		></MkEmoji>
+<div class="_gaps_m">
+	<div :class="$style.emojis">
+		<div v-for="emoji in emojis" :key="`emojiMute-${emoji}`" :class="$style.emoji" @click="onEmojiClick($event, emoji)">
+			<MkCustomEmoji
+				v-if="emoji.startsWith(':')"
+				:name="customEmojiName(emoji)"
+				:host="customEmojiHost(emoji)"
+				:normal="true"
+				:menu="false"
+				:menuReaction="false"
+				:ignoreMuted="true"
+			/>
+			<MkEmoji
+				v-else
+				:emoji="emoji"
+				:menu="false"
+				:menuReaction="false"
+				:ignoreMuted="true"
+			></MkEmoji>
+		</div>
 	</div>
-</div>
 
-<MkButton primary inline @click="add"><i class="ti ti-plus"></i> {{ i18n.ts.add }}</MkButton>
+	<MkButton primary inline @click="add"><i class="ti ti-plus"></i> {{ i18n.ts.add }}</MkButton>
+
+	<hr>
+
+	<SearchMarker :keywords="['sync', 'devices']">
+		<MkSwitch :modelValue="syncEnabled" @update:modelValue="changeSyncEnabled">
+			<template #label><i class="ti ti-cloud-cog"></i> <SearchLabel>{{ i18n.ts.syncBetweenDevices }}</SearchLabel></template>
+		</MkSwitch>
+	</SearchMarker>
+</div>
 </template>
 
 <script lang="ts" setup>
+import { ref } from 'vue';
 import type { MenuItem } from '@/types/menu';
 import MkButton from '@/components/MkButton.vue';
+import MkSwitch from '@/components/MkSwitch.vue';
 import * as os from '@/os.js';
 import { i18n } from '@/i18n.js';
 import { prefer } from '@/preferences.js';
@@ -79,7 +91,23 @@ function unmute(emoji: string) {
 		unmuteEmoji(emoji);
 	});
 }
+
+const syncEnabled = ref(prefer.isSyncEnabled('mutingEmojis'));
+
+function changeSyncEnabled(value: boolean) {
+	if (value) {
+		prefer.enableSync('mutingEmojis').then((res) => {
+			if (res == null) return;
+			if (res.enabled) syncEnabled.value = true;
+		});
+	} else {
+		prefer.disableSync('mutingEmojis');
+		syncEnabled.value = false;
+	}
+}
+
 </script>
+
 <style module>
 .emojis {
 	display: flex;
diff --git a/packages/frontend/src/pages/settings/mute-block.vue b/packages/frontend/src/pages/settings/mute-block.vue
index 9b24501cce..9407845923 100644
--- a/packages/frontend/src/pages/settings/mute-block.vue
+++ b/packages/frontend/src/pages/settings/mute-block.vue
@@ -57,9 +57,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<template #icon><i class="ti ti-mood-off"></i></template>
 					<template #label>{{ i18n.ts.emojiMute }}</template>
 
-					<div class="_gaps_m">
-						<XEmojiMute/>
-					</div>
+					<XEmojiMute/>
 				</mkfolder>
 			</SearchMarker>