feat(frontend): 絵文字ピッカーの実装 (#12617)

* 絵文字デッキの作成

* 細かい不備を修正

* fix lint

* fix

* fix CHANGELOG.md

* fix setTimeout -> nextTick

* fix https://github.com/misskey-dev/misskey/pull/12617#issuecomment-1848952862

* fix bug

* fix CHANGELOG.md

* fix CHANGELOG.md

* wip

* Update CHANGELOG.md

* Update CHANGELOG.md

* wip

---------

Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>

4 files changed, 282 insertions, 167 deletions

diff --git a/packages/frontend/src/pages/settings/emoji-picker.vue b/packages/frontend/src/pages/settings/emoji-picker.vue
new file mode 100644
index 0000000000..f3f974a96f
--- /dev/null
+++ b/packages/frontend/src/pages/settings/emoji-picker.vue
@@ -0,0 +1,274 @@
+<!--
+SPDX-FileCopyrightText: syuilo and other misskey contributors
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<div class="_gaps_m">
+	<MkFolder :defaultOpen="true">
+		<template #icon><i class="ti ti-pin"></i></template>
+		<template #label>{{ i18n.ts.pinned }} ({{ i18n.ts.reaction }})</template>
+		<template #caption>{{ i18n.ts.pinnedEmojisForReactionSettingDescription }}</template>
+
+		<div class="_gaps">
+			<div>
+				<div v-panel style="border-radius: 6px;">
+					<Sortable
+						v-model="pinnedEmojisForReaction"
+						:class="$style.emojis"
+						:itemKey="item => item"
+						:animation="150"
+						:delay="100"
+						:delayOnTouchOnly="true"
+					>
+						<template #item="{element}">
+							<button class="_button" :class="$style.emojisItem" @click="removeReaction(element, $event)">
+								<MkCustomEmoji v-if="element[0] === ':'" :name="element" :normal="true"/>
+								<MkEmoji v-else :emoji="element" :normal="true"/>
+							</button>
+						</template>
+						<template #footer>
+							<button class="_button" :class="$style.emojisAdd" @click="chooseReaction">
+								<i class="ti ti-plus"></i>
+							</button>
+						</template>
+					</Sortable>
+				</div>
+				<div :class="$style.editorCaption">{{ i18n.ts.reactionSettingDescription2 }}</div>
+			</div>
+
+			<div class="_buttons">
+				<MkButton inline @click="previewReaction"><i class="ti ti-eye"></i> {{ i18n.ts.preview }}</MkButton>
+				<MkButton inline danger @click="setDefaultReaction"><i class="ti ti-reload"></i> {{ i18n.ts.default }}</MkButton>
+				<MkButton inline danger @click="copyFromPinnedEmojis"><i class="ti ti-copy"></i> {{ i18n.ts.copyFromPinnedEmojis }}</MkButton>
+			</div>
+		</div>
+	</MkFolder>
+
+	<MkFolder>
+		<template #icon><i class="ti ti-pin"></i></template>
+		<template #label>{{ i18n.ts.pinned }} ({{ i18n.ts.general }})</template>
+		<template #caption>{{ i18n.ts.pinnedEmojisSettingDescription }}</template>
+
+		<div class="_gaps">
+			<div>
+				<div v-panel style="border-radius: 6px;">
+					<Sortable
+						v-model="pinnedEmojis"
+						:class="$style.emojis"
+						:itemKey="item => item"
+						:animation="150"
+						:delay="100"
+						:delayOnTouchOnly="true"
+					>
+						<template #item="{element}">
+							<button class="_button" :class="$style.emojisItem" @click="removeEmoji(element, $event)">
+								<MkCustomEmoji v-if="element[0] === ':'" :name="element" :normal="true"/>
+								<MkEmoji v-else :emoji="element" :normal="true"/>
+							</button>
+						</template>
+						<template #footer>
+							<button class="_button" :class="$style.emojisAdd" @click="chooseEmoji">
+								<i class="ti ti-plus"></i>
+							</button>
+						</template>
+					</Sortable>
+				</div>
+				<div :class="$style.editorCaption">{{ i18n.ts.reactionSettingDescription2 }}</div>
+			</div>
+
+			<div class="_buttons">
+				<MkButton inline @click="previewEmoji"><i class="ti ti-eye"></i> {{ i18n.ts.preview }}</MkButton>
+				<MkButton inline danger @click="setDefaultEmoji"><i class="ti ti-reload"></i> {{ i18n.ts.default }}</MkButton>
+				<MkButton inline danger @click="copyFromPinnedEmojisForReaction"><i class="ti ti-copy"></i> {{ i18n.ts.copyFromPinnedEmojisForReaction }}</MkButton>
+			</div>
+		</div>
+	</MkFolder>
+
+	<FormSection>
+		<template #label>{{ i18n.ts.emojiPickerDisplay }}</template>
+
+		<div class="_gaps_m">
+			<MkRadios v-model="emojiPickerScale">
+				<template #label>{{ i18n.ts.size }}</template>
+				<option :value="1">{{ i18n.ts.small }}</option>
+				<option :value="2">{{ i18n.ts.medium }}</option>
+				<option :value="3">{{ i18n.ts.large }}</option>
+			</MkRadios>
+
+			<MkRadios v-model="emojiPickerWidth">
+				<template #label>{{ i18n.ts.numberOfColumn }}</template>
+				<option :value="1">5</option>
+				<option :value="2">6</option>
+				<option :value="3">7</option>
+				<option :value="4">8</option>
+				<option :value="5">9</option>
+			</MkRadios>
+
+			<MkRadios v-model="emojiPickerHeight">
+				<template #label>{{ i18n.ts.height }}</template>
+				<option :value="1">{{ i18n.ts.small }}</option>
+				<option :value="2">{{ i18n.ts.medium }}</option>
+				<option :value="3">{{ i18n.ts.large }}</option>
+				<option :value="4">{{ i18n.ts.large }}+</option>
+			</MkRadios>
+
+			<MkSwitch v-model="emojiPickerUseDrawerForMobile">
+				{{ i18n.ts.useDrawerReactionPickerForMobile }}
+				<template #caption>{{ i18n.ts.needReloadToApply }}</template>
+			</MkSwitch>
+		</div>
+	</FormSection>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref, Ref, watch } from 'vue';
+import Sortable from 'vuedraggable';
+import MkRadios from '@/components/MkRadios.vue';
+import MkButton from '@/components/MkButton.vue';
+import FormSection from '@/components/form/section.vue';
+import MkSwitch from '@/components/MkSwitch.vue';
+import * as os from '@/os.js';
+import { defaultStore } from '@/store.js';
+import { i18n } from '@/i18n.js';
+import { definePageMetadata } from '@/scripts/page-metadata.js';
+import { deepClone } from '@/scripts/clone.js';
+import { reactionPicker } from '@/scripts/reaction-picker.js';
+import { emojiPicker } from '@/scripts/emoji-picker.js';
+import MkCustomEmoji from '@/components/global/MkCustomEmoji.vue';
+import MkEmoji from '@/components/global/MkEmoji.vue';
+import MkFolder from '@/components/MkFolder.vue';
+
+const pinnedEmojisForReaction: Ref<string[]> = ref(deepClone(defaultStore.state.reactions));
+const pinnedEmojis: Ref<string[]> = ref(deepClone(defaultStore.state.pinnedEmojis));
+
+const emojiPickerScale = computed(defaultStore.makeGetterSetter('emojiPickerScale'));
+const emojiPickerWidth = computed(defaultStore.makeGetterSetter('emojiPickerWidth'));
+const emojiPickerHeight = computed(defaultStore.makeGetterSetter('emojiPickerHeight'));
+const emojiPickerUseDrawerForMobile = computed(defaultStore.makeGetterSetter('emojiPickerUseDrawerForMobile'));
+
+const removeReaction = (reaction: string, ev: MouseEvent) => remove(pinnedEmojisForReaction, reaction, ev);
+const chooseReaction = (ev: MouseEvent) => pickEmoji(pinnedEmojisForReaction, ev);
+const setDefaultReaction = () => setDefault(pinnedEmojisForReaction);
+
+const removeEmoji = (reaction: string, ev: MouseEvent) => remove(pinnedEmojis, reaction, ev);
+const chooseEmoji = (ev: MouseEvent) => pickEmoji(pinnedEmojis, ev);
+const setDefaultEmoji = () => setDefault(pinnedEmojis);
+
+function previewReaction(ev: MouseEvent) {
+	reactionPicker.show(getHTMLElement(ev));
+}
+
+function previewEmoji(ev: MouseEvent) {
+	emojiPicker.show(getHTMLElement(ev));
+}
+
+async function copyFromPinnedEmojis() {
+	const { canceled } = await os.confirm({
+		type: 'warning',
+		text: 'a',
+	});
+
+	if (canceled) {
+		return;
+	}
+
+	pinnedEmojisForReaction.value = [...pinnedEmojis.value];
+}
+
+async function copyFromPinnedEmojisForReaction() {
+	const { canceled } = await os.confirm({
+		type: 'warning',
+		text: 'a',
+	});
+
+	if (canceled) {
+		return;
+	}
+
+	pinnedEmojis.value = [...pinnedEmojisForReaction.value];
+}
+
+function remove(itemsRef: Ref<string[]>, reaction: string, ev: MouseEvent) {
+	os.popupMenu([{
+		text: i18n.ts.remove,
+		action: () => {
+			itemsRef.value = itemsRef.value.filter(x => x !== reaction);
+		},
+	}], getHTMLElement(ev));
+}
+
+async function setDefault(itemsRef: Ref<string[]>) {
+	const { canceled } = await os.confirm({
+		type: 'warning',
+		text: i18n.ts.resetAreYouSure,
+	});
+	if (canceled) return;
+
+	itemsRef.value = deepClone(defaultStore.def.reactions.default);
+}
+
+async function pickEmoji(itemsRef: Ref<string[]>, ev: MouseEvent) {
+	os.pickEmoji(getHTMLElement(ev), {
+		showPinned: false,
+	}).then(it => {
+		const emoji = it as string;
+		if (!itemsRef.value.includes(emoji)) {
+			itemsRef.value.push(emoji);
+		}
+	});
+}
+
+function getHTMLElement(ev: MouseEvent): HTMLElement {
+	const target = ev.currentTarget ?? ev.target;
+	return target as HTMLElement;
+}
+
+watch(pinnedEmojisForReaction, () => {
+	defaultStore.set('reactions', pinnedEmojisForReaction.value);
+}, {
+	deep: true,
+});
+
+watch(pinnedEmojis, () => {
+	defaultStore.set('pinnedEmojis', pinnedEmojis.value);
+}, {
+	deep: true,
+});
+
+definePageMetadata({
+	title: i18n.ts.emojiPicker,
+	icon: 'ti ti-mood-happy',
+});
+</script>
+
+<style lang="scss" module>
+.tab {
+	margin: calc(var(--margin) / 2) 0;
+	padding: calc(var(--margin) / 2) 0;
+	background: var(--bg);
+}
+
+.emojis {
+  padding: 12px;
+  font-size: 1.1em;
+}
+
+.emojisItem {
+  display: inline-block;
+  padding: 8px;
+  cursor: move;
+}
+
+.emojisAdd {
+  display: inline-block;
+  padding: 8px;
+}
+
+.editorCaption {
+	font-size: 0.85em;
+	padding: 8px 0 0 0;
+	color: var(--fgTransparentWeak);
+}
+</style>
diff --git a/packages/frontend/src/pages/settings/index.vue b/packages/frontend/src/pages/settings/index.vue
index 633ee894a9..e533f4420b 100644
--- a/packages/frontend/src/pages/settings/index.vue
+++ b/packages/frontend/src/pages/settings/index.vue
@@ -74,9 +74,9 @@ const menuDef = computed(() => [{
 		active: currentPage.value?.route.name === 'privacy',
 	}, {
 		icon: 'ti ti-mood-happy',
-		text: i18n.ts.reaction,
-		to: '/settings/reaction',
-		active: currentPage.value?.route.name === 'reaction',
+		text: i18n.ts.emojiPicker,
+		to: '/settings/emoji-picker',
+		active: currentPage.value?.route.name === 'emojiPicker',
 	}, {
 		icon: 'ti ti-cloud',
 		text: i18n.ts.drive,
@@ -236,7 +236,7 @@ provideMetadataReceiver((info) => {
 		childInfo.value = null;
 	} else {
 		childInfo.value = info;
-		INFO.value.needWideArea = info.value?.needWideArea ?? undefined;
+		INFO.value.needWideArea = info.value.needWideArea ?? undefined;
 	}
 });
 
diff --git a/packages/frontend/src/pages/settings/preferences-backups.vue b/packages/frontend/src/pages/settings/preferences-backups.vue
index 66c549930b..cc6223218f 100644
--- a/packages/frontend/src/pages/settings/preferences-backups.vue
+++ b/packages/frontend/src/pages/settings/preferences-backups.vue
@@ -83,10 +83,10 @@ const defaultStoreSaveKeys: (keyof typeof defaultStore['state'])[] = [
 	'useReactionPickerForContextMenu',
 	'showGapBetweenNotesInTimeline',
 	'instanceTicker',
-	'reactionPickerSize',
-	'reactionPickerWidth',
-	'reactionPickerHeight',
-	'reactionPickerUseDrawerForMobile',
+	'emojiPickerScale',
+	'emojiPickerWidth',
+	'emojiPickerHeight',
+	'emojiPickerUseDrawerForMobile',
 	'defaultSideView',
 	'menuDisplay',
 	'reportError',
diff --git a/packages/frontend/src/pages/settings/reaction.vue b/packages/frontend/src/pages/settings/reaction.vue
deleted file mode 100644
index fe5d9fc443..0000000000
--- a/packages/frontend/src/pages/settings/reaction.vue
+++ /dev/null
@@ -1,159 +0,0 @@
-<!--
-SPDX-FileCopyrightText: syuilo and other misskey contributors
-SPDX-License-Identifier: AGPL-3.0-only
--->
-
-<template>
-<div class="_gaps_m">
-	<FromSlot>
-		<template #label>{{ i18n.ts.reactionSettingDescription }}</template>
-		<div v-panel style="border-radius: 6px;">
-			<Sortable v-model="reactions" :class="$style.reactions" :itemKey="item => item" :animation="150" :delay="100" :delayOnTouchOnly="true">
-				<template #item="{element}">
-					<button class="_button" :class="$style.reactionsItem" @click="remove(element, $event)">
-						<MkCustomEmoji v-if="element[0] === ':'" :name="element" :normal="true"/>
-						<MkEmoji v-else :emoji="element" :normal="true"/>
-					</button>
-				</template>
-				<template #footer>
-					<button class="_button" :class="$style.reactionsAdd" @click="chooseEmoji"><i class="ti ti-plus"></i></button>
-				</template>
-			</Sortable>
-		</div>
-		<template #caption>{{ i18n.ts.reactionSettingDescription2 }} <button class="_textButton" @click="preview">{{ i18n.ts.preview }}</button></template>
-	</FromSlot>
-
-	<MkRadios v-model="reactionPickerSize">
-		<template #label>{{ i18n.ts.size }}</template>
-		<option :value="1">{{ i18n.ts.small }}</option>
-		<option :value="2">{{ i18n.ts.medium }}</option>
-		<option :value="3">{{ i18n.ts.large }}</option>
-	</MkRadios>
-	<MkRadios v-model="reactionPickerWidth">
-		<template #label>{{ i18n.ts.numberOfColumn }}</template>
-		<option :value="1">5</option>
-		<option :value="2">6</option>
-		<option :value="3">7</option>
-		<option :value="4">8</option>
-		<option :value="5">9</option>
-	</MkRadios>
-	<MkRadios v-model="reactionPickerHeight">
-		<template #label>{{ i18n.ts.height }}</template>
-		<option :value="1">{{ i18n.ts.small }}</option>
-		<option :value="2">{{ i18n.ts.medium }}</option>
-		<option :value="3">{{ i18n.ts.large }}</option>
-		<option :value="4">{{ i18n.ts.large }}+</option>
-	</MkRadios>
-
-	<MkSwitch v-model="reactionPickerUseDrawerForMobile">
-		{{ i18n.ts.useDrawerReactionPickerForMobile }}
-		<template #caption>{{ i18n.ts.needReloadToApply }}</template>
-	</MkSwitch>
-
-	<FormSection>
-		<div class="_buttons">
-			<MkButton inline @click="preview"><i class="ti ti-eye"></i> {{ i18n.ts.preview }}</MkButton>
-			<MkButton inline danger @click="setDefault"><i class="ti ti-reload"></i> {{ i18n.ts.default }}</MkButton>
-		</div>
-	</FormSection>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { defineAsyncComponent, watch, ref, computed } from 'vue';
-import Sortable from 'vuedraggable';
-import MkRadios from '@/components/MkRadios.vue';
-import FromSlot from '@/components/form/slot.vue';
-import MkButton from '@/components/MkButton.vue';
-import FormSection from '@/components/form/section.vue';
-import MkSwitch from '@/components/MkSwitch.vue';
-import * as os from '@/os.js';
-import { defaultStore } from '@/store.js';
-import { i18n } from '@/i18n.js';
-import { definePageMetadata } from '@/scripts/page-metadata.js';
-import { deepClone } from '@/scripts/clone.js';
-
-const reactions = ref(deepClone(defaultStore.state.reactions));
-
-const reactionPickerSize = computed(defaultStore.makeGetterSetter('reactionPickerSize'));
-const reactionPickerWidth = computed(defaultStore.makeGetterSetter('reactionPickerWidth'));
-const reactionPickerHeight = computed(defaultStore.makeGetterSetter('reactionPickerHeight'));
-const reactionPickerUseDrawerForMobile = computed(defaultStore.makeGetterSetter('reactionPickerUseDrawerForMobile'));
-
-function save() {
-	defaultStore.set('reactions', reactions.value);
-}
-
-function remove(reaction, ev: MouseEvent) {
-	os.popupMenu([{
-		text: i18n.ts.remove,
-		action: () => {
-			reactions.value = reactions.value.filter(x => x !== reaction);
-		},
-	}], ev.currentTarget ?? ev.target);
-}
-
-function preview(ev: MouseEvent) {
-	os.popup(defineAsyncComponent(() => import('@/components/MkEmojiPickerDialog.vue')), {
-		asReactionPicker: true,
-		src: ev.currentTarget ?? ev.target,
-	}, {}, 'closed');
-}
-
-async function setDefault() {
-	const { canceled } = await os.confirm({
-		type: 'warning',
-		text: i18n.ts.resetAreYouSure,
-	});
-	if (canceled) return;
-
-	reactions.value = deepClone(defaultStore.def.reactions.default);
-}
-
-function chooseEmoji(ev: MouseEvent) {
-	os.pickEmoji(ev.currentTarget ?? ev.target, {
-		showPinned: false,
-	}).then(emoji => {
-		if (!reactions.value.includes(emoji)) {
-			reactions.value.push(emoji);
-		}
-	});
-}
-
-watch(reactions, () => {
-	save();
-}, {
-	deep: true,
-});
-
-const headerActions = computed(() => []);
-
-const headerTabs = computed(() => []);
-
-definePageMetadata({
-	title: i18n.ts.reaction,
-	icon: 'ti ti-mood-happy',
-	action: {
-		icon: 'ti ti-eye',
-		handler: preview,
-	},
-});
-</script>
-
-<style lang="scss" module>
-.reactions {
-	padding: 12px;
-	font-size: 1.1em;
-}
-
-.reactionsItem {
-	display: inline-block;
-	padding: 8px;
-	cursor: move;
-}
-
-.reactionsAdd {
-	display: inline-block;
-	padding: 8px;
-}
-</style>