enhance(frontend): improve emoji picker settings

locales/index.d.ts

@@ -5334,6 +5334,32 @@ export interface Locale extends ILocale {
      * 同期の有効化をキャンセル
      */
     "preferenceSyncConflictChoiceCancel": string;
+    /**
+     * ペースト
+     */
+    "paste": string;
+    /**
+     * 絵文字パレット
+     */
+    "emojiPalette": string;
+    "_emojiPalette": {
+        /**
+         * パレット
+         */
+        "palettes": string;
+        /**
+         * パレットのデバイス間同期を有効にする
+         */
+        "enableSyncBetweenDevicesForPalettes": string;
+        /**
+         * メインで使用するパレット
+         */
+        "paletteForMain": string;
+        /**
+         * リアクションで使用するパレット
+         */
+        "paletteForReaction": string;
+    };
     "_settings": {
         /**
          * ドライブの管理と設定、使用量の確認、ファイルをアップロードする際の設定を行えます。

locales/ja-JP.yml

@@ -1329,6 +1329,14 @@ preferenceSyncConflictText: "同期が有効にされた設定項目は設定値
 preferenceSyncConflictChoiceServer: "サーバーの設定値"
 preferenceSyncConflictChoiceDevice: "デバイスの設定値"
 preferenceSyncConflictChoiceCancel: "同期の有効化をキャンセル"
+paste: "ペースト"
+emojiPalette: "絵文字パレット"
+
+_emojiPalette:
+  palettes: "パレット"
+  enableSyncBetweenDevicesForPalettes: "パレットのデバイス間同期を有効にする"
+  paletteForMain: "メインで使用するパレット"
+  paletteForReaction: "リアクションで使用するパレット"
 
 _settings:
   driveBanner: "ドライブの管理と設定、使用量の確認、ファイルをアップロードする際の設定を行えます。"

packages/frontend/src/boot/main-boot.ts

@@ -176,6 +176,17 @@ export async function mainBoot() {
 				prefer.commit('lightTheme', ColdDeviceStorage.get('lightTheme'));
 				prefer.commit('darkTheme', ColdDeviceStorage.get('darkTheme'));
 				prefer.commit('syncDeviceDarkMode', ColdDeviceStorage.get('syncDeviceDarkMode'));
+				prefer.commit('emojiPalettes', [{
+					id: 'reactions',
+					name: '',
+					emojis: store.s.reactions,
+				}, {
+					id: 'pinnedEmojis',
+					name: '',
+					emojis: store.s.pinnedEmojis,
+				}]);
+				prefer.commit('emojiPaletteForMain', 'pinnedEmojis');
+				prefer.commit('emojiPaletteForReaction', 'reactions');
 				prefer.commit('overridedDeviceKind', store.s.overridedDeviceKind);
 				prefer.commit('widgets', store.s.widgets);
 				prefer.commit('keepCw', store.s.keepCw);

packages/frontend/src/components/MkButton.vue

@@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <button
 	v-if="!link"
 	ref="el" class="_button"
-	:class="[$style.root, { [$style.inline]: inline, [$style.primary]: primary, [$style.gradate]: gradate, [$style.danger]: danger, [$style.rounded]: rounded, [$style.full]: full, [$style.small]: small, [$style.large]: large, [$style.transparent]: transparent, [$style.asLike]: asLike }]"
+	:class="[$style.root, { [$style.inline]: inline, [$style.primary]: primary, [$style.gradate]: gradate, [$style.danger]: danger, [$style.rounded]: rounded, [$style.full]: full, [$style.small]: small, [$style.large]: large, [$style.transparent]: transparent, [$style.asLike]: asLike, [$style.iconOnly]: iconOnly }]"
 	:type="type"
 	:name="name"
 	:value="value"
@@ -22,7 +22,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </button>
 <MkA
 	v-else class="_button"
-	:class="[$style.root, { [$style.inline]: inline, [$style.primary]: primary, [$style.gradate]: gradate, [$style.danger]: danger, [$style.rounded]: rounded, [$style.full]: full, [$style.small]: small, [$style.large]: large, [$style.transparent]: transparent, [$style.asLike]: asLike }]"
+	:class="[$style.root, { [$style.inline]: inline, [$style.primary]: primary, [$style.gradate]: gradate, [$style.danger]: danger, [$style.rounded]: rounded, [$style.full]: full, [$style.small]: small, [$style.large]: large, [$style.transparent]: transparent, [$style.asLike]: asLike, [$style.iconOnly]: iconOnly }]"
 	:to="to ?? '#'"
 	:behavior="linkBehavior"
 	@mousedown="onMousedown"
@@ -57,6 +57,7 @@ const props = defineProps<{
 	name?: string;
 	value?: string;
 	disabled?: boolean;
+	iconOnly?: boolean;
 }>();
 
 const emit = defineEmits<{
@@ -147,6 +148,11 @@ function onMousedown(evt: MouseEvent): void {
 		background: var(--MI_THEME-buttonHoverBg);
 	}
 
+	&.iconOnly {
+		padding: 7px;
+		min-width: auto;
+	}
+
 	&.small {
 		font-size: 90%;
 		padding: 6px 12px;

packages/frontend/src/pages/about-misskey.vue

@@ -143,11 +143,11 @@ import MkInfo from '@/components/MkInfo.vue';
 import { physics } from '@/utility/physics.js';
 import { i18n } from '@/i18n.js';
 import { instance } from '@/instance.js';
-import { store } from '@/store.js';
 import * as os from '@/os.js';
 import { definePage } from '@/page.js';
 import { claimAchievement, claimedAchievements } from '@/utility/achievements.js';
 import { $i } from '@/account.js';
+import { prefer } from '@/preferences.js';
 
 const patronsWithIcon = [{
 	name: 'カイヤン',
@@ -406,7 +406,7 @@ const easterEggEngine = ref<{ stop: () => void } | null>(null);
 const containerEl = shallowRef<HTMLElement>();
 
 function iconLoaded() {
-	const emojis = store.s.reactions;
+	const emojis = prefer.s.emojiPalettes[0].emojis;
 	const containerWidth = containerEl.value.offsetWidth;
 	for (let i = 0; i < 32; i++) {
 		easterEggEmojis.value.push({

packages/frontend/src/pages/settings/deck.vue

@@ -6,7 +6,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <SearchMarker path="/settings/deck" :label="i18n.ts.deck" :keywords="['deck', 'ui']" icon="ti ti-columns">
 	<div class="_gaps_m">
-		<MkSwitch :modelValue="profilesSyncEnabled" @update:modelValue="changeProfilesSyncEnabled">{{ i18n.ts._deck.enableSyncBetweenDevicesForProfiles }}</MkSwitch>
+		<SearchMarker :keywords="['sync', 'profiles', 'devices']">
+			<MkSwitch :modelValue="profilesSyncEnabled" @update:modelValue="changeProfilesSyncEnabled">
+				<template #label><SearchLabel>{{ i18n.ts._deck.enableSyncBetweenDevicesForProfiles }}</SearchLabel></template>
+			</MkSwitch>
+		</SearchMarker>
 
 		<SearchMarker :keywords="['ui', 'root', 'page']">
 			<MkPreferenceContainer k="deck.useSimpleUiForNonRootPages">
@@ -35,7 +39,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<SearchMarker :keywords="['column', 'align']">
 			<MkPreferenceContainer k="deck.columnAlign">
 				<MkRadios v-model="columnAlign">
-					<template #label>{{ i18n.ts._deck.columnAlign }}</template>
+					<template #label><SearchLabel>{{ i18n.ts._deck.columnAlign }}</SearchLabel></template>
 					<option value="left">{{ i18n.ts.left }}</option>
 					<option value="center">{{ i18n.ts.center }}</option>
 				</MkRadios>

packages/frontend/src/pages/settings/emoji-palette.palette.vue

@@ -0,0 +1,166 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<MkFolder :defaultOpen="true">
+	<template #icon><i class="ti ti-palette"></i></template>
+	<template #label>{{ palette.name === '' ? '(' + i18n.ts.noName + ')' : palette.name }}</template>
+	<template #footer>
+		<div class="_buttons">
+			<MkButton @click="rename"><i class="ti ti-pencil"></i> {{ i18n.ts.rename }}</MkButton>
+			<MkButton @click="copy"><i class="ti ti-copy"></i> {{ i18n.ts.copy }}</MkButton>
+			<MkButton danger @click="paste"><i class="ti ti-clipboard"></i> {{ i18n.ts.paste }}</MkButton>
+			<MkButton danger iconOnly style="margin-left: auto;" @click="del"><i class="ti ti-trash"></i></MkButton>
+		</div>
+	</template>
+
+	<div>
+		<div v-panel style="border-radius: 6px;">
+			<Sortable
+				v-model="emojis"
+				:class="$style.emojis"
+				:itemKey="item => item"
+				:animation="150"
+				:delay="100"
+				:delayOnTouchOnly="true"
+				:group="{ name: 'SortableEmojiPalettes' }"
+			>
+				<template #item="{element}">
+					<button class="_button" :class="$style.emojisItem" @click="remove(element, $event)">
+						<MkCustomEmoji v-if="element[0] === ':'" :name="element" :normal="true" :fallbackToImage="true"/>
+						<MkEmoji v-else :emoji="element" :normal="true"/>
+					</button>
+				</template>
+				<template #footer>
+					<button class="_button" :class="$style.emojisAdd" @click="pick">
+						<i class="ti ti-plus"></i>
+					</button>
+				</template>
+			</Sortable>
+		</div>
+		<div :class="$style.editorCaption">{{ i18n.ts.reactionSettingDescription2 }}</div>
+	</div>
+</MkFolder>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch } from 'vue';
+import Sortable from 'vuedraggable';
+import MkButton from '@/components/MkButton.vue';
+import * as os from '@/os.js';
+import { i18n } from '@/i18n.js';
+import { deepClone } from '@/utility/clone.js';
+import MkCustomEmoji from '@/components/global/MkCustomEmoji.vue';
+import MkEmoji from '@/components/global/MkEmoji.vue';
+import MkFolder from '@/components/MkFolder.vue';
+import { copyToClipboard } from '@/utility/copy-to-clipboard.js';
+
+const props = defineProps<{
+	palette: {
+		id: string;
+		name: string;
+		emojis: string[];
+	};
+}>();
+
+const emit = defineEmits<{
+	(ev: 'updateEmojis', emojis: string[]): void,
+	(ev: 'updateName', name: string): void,
+	(ev: 'del'): void,
+}>();
+
+const emojis = ref<string[]>(deepClone(props.palette.emojis));
+
+watch(emojis, () => {
+	emit('updateEmojis', emojis.value);
+}, { deep: true });
+
+function remove(reaction: string, ev: MouseEvent) {
+	os.popupMenu([{
+		text: i18n.ts.remove,
+		action: () => {
+			emojis.value = emojis.value.filter(x => x !== reaction);
+		},
+	}], getHTMLElement(ev));
+}
+
+function pick(ev: MouseEvent) {
+	os.pickEmoji(getHTMLElement(ev), {
+		showPinned: false,
+	}).then(it => {
+		const emoji = it;
+		if (!emojis.value.includes(emoji)) {
+			emojis.value.push(emoji);
+		}
+	});
+}
+
+function getHTMLElement(ev: MouseEvent): HTMLElement {
+	const target = ev.currentTarget ?? ev.target;
+	return target as HTMLElement;
+}
+
+function rename() {
+	os.inputText({
+		title: i18n.ts.rename,
+		default: props.palette.name,
+	}).then(({ canceled, result: name }) => {
+		if (canceled) return;
+		if (name != null) {
+			emit('updateName', name);
+		}
+	});
+}
+
+function copy() {
+	copyToClipboard(emojis.value.join(' '));
+}
+
+function paste() {
+	// TODO: validate
+	navigator.clipboard.readText().then(text => {
+		emojis.value = text.split(' ');
+	});
+}
+
+function del(ev: MouseEvent) {
+	os.popupMenu([{
+		text: i18n.ts.delete,
+		action: () => {
+			emit('del');
+		},
+	}], ev.currentTarget ?? ev.target);
+}
+</script>
+
+<style lang="scss" module>
+.tab {
+	margin: calc(var(--MI-margin) / 2) 0;
+	padding: calc(var(--MI-margin) / 2) 0;
+	background: var(--MI_THEME-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(--MI_THEME-fgTransparentWeak);
+}
+</style>

packages/frontend/src/pages/settings/emoji-palette.vue

@@ -0,0 +1,251 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<SearchMarker path="/settings/emoji-palette" :label="i18n.ts.emojiPalette" :keywords="['emoji', 'palette']" icon="ti ti-mood-happy">
+	<div class="_gaps_m">
+		<FormSection first>
+			<template #label>{{ i18n.ts._emojiPalette.palettes }}</template>
+
+			<div class="_gaps_s">
+				<XPalette
+					v-for="palette in prefer.r.emojiPalettes.value"
+					:key="palette.id"
+					:palette="palette"
+					@updateEmojis="emojis => updatePaletteEmojis(palette.id, emojis)"
+					@updateName="name => updatePaletteName(palette.id, name)"
+					@del="delPalette(palette.id)"
+				/>
+				<MkButton primary rounded style="margin: auto;" @click="addPalette"><i class="ti ti-plus"></i></MkButton>
+			</div>
+		</FormSection>
+
+		<FormSection>
+			<div class="_gaps_m">
+				<SearchMarker :keywords="['sync', 'palettes', 'devices']">
+					<MkSwitch :modelValue="palettesSyncEnabled" @update:modelValue="changePalettesSyncEnabled">
+						<template #label><SearchLabel>{{ i18n.ts._emojiPalette.enableSyncBetweenDevicesForPalettes }}</SearchLabel></template>
+					</MkSwitch>
+				</SearchMarker>
+			</div>
+		</FormSection>
+
+		<FormSection>
+			<div class="_gaps_m">
+				<SearchMarker :keywords="['main', 'palette']">
+					<MkPreferenceContainer k="emojiPaletteForMain">
+						<MkSelect v-model="emojiPaletteForMain">
+							<template #label><SearchLabel>{{ i18n.ts._emojiPalette.paletteForMain }}</SearchLabel></template>
+							<option key="-" :value="null">({{ i18n.ts.auto }})</option>
+							<option v-for="palette in prefer.r.emojiPalettes.value" :key="palette.id" :value="palette.id">{{ palette.name === '' ? '(' + i18n.ts.noName + ')' : palette.name }}</option>
+						</MkSelect>
+					</MkPreferenceContainer>
+				</SearchMarker>
+
+				<SearchMarker :keywords="['reaction', 'palette']">
+					<MkPreferenceContainer k="emojiPaletteForReaction">
+						<MkSelect v-model="emojiPaletteForReaction">
+							<template #label><SearchLabel>{{ i18n.ts._emojiPalette.paletteForReaction }}</SearchLabel></template>
+							<option key="-" :value="null">({{ i18n.ts.auto }})</option>
+							<option v-for="palette in prefer.r.emojiPalettes.value" :key="palette.id" :value="palette.id">{{ palette.name === '' ? '(' + i18n.ts.noName + ')' : palette.name }}</option>
+						</MkSelect>
+					</MkPreferenceContainer>
+				</SearchMarker>
+			</div>
+		</FormSection>
+
+		<SearchMarker :keywords="['emoji', 'picker', 'display']">
+			<FormSection>
+				<template #label><SearchLabel>{{ i18n.ts.emojiPickerDisplay }}</SearchLabel></template>
+
+				<div class="_gaps_m">
+					<SearchMarker :keywords="['emoji', 'picker', 'scale', 'size']">
+						<MkPreferenceContainer k="emojiPickerScale">
+							<MkRadios v-model="emojiPickerScale">
+								<template #label><SearchLabel>{{ i18n.ts.size }}</SearchLabel></template>
+								<option :value="1">{{ i18n.ts.small }}</option>
+								<option :value="2">{{ i18n.ts.medium }}</option>
+								<option :value="3">{{ i18n.ts.large }}</option>
+							</MkRadios>
+						</MkPreferenceContainer>
+					</SearchMarker>
+
+					<SearchMarker :keywords="['emoji', 'picker', 'width', 'column', 'size']">
+						<MkPreferenceContainer k="emojiPickerWidth">
+							<MkRadios v-model="emojiPickerWidth">
+								<template #label><SearchLabel>{{ i18n.ts.numberOfColumn }}</SearchLabel></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>
+						</MkPreferenceContainer>
+					</SearchMarker>
+
+					<SearchMarker :keywords="['emoji', 'picker', 'height', 'size']">
+						<MkPreferenceContainer k="emojiPickerHeight">
+							<MkRadios v-model="emojiPickerHeight">
+								<template #label><SearchLabel>{{ i18n.ts.height }}</SearchLabel></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>
+						</MkPreferenceContainer>
+					</SearchMarker>
+
+					<SearchMarker :keywords="['emoji', 'picker', 'style']">
+						<MkPreferenceContainer k="emojiPickerStyle">
+							<MkSelect v-model="emojiPickerStyle">
+								<template #label><SearchLabel>{{ i18n.ts.style }}</SearchLabel></template>
+								<template #caption>{{ i18n.ts.needReloadToApply }}</template>
+								<option value="auto">{{ i18n.ts.auto }}</option>
+								<option value="popup">{{ i18n.ts.popup }}</option>
+								<option value="drawer">{{ i18n.ts.drawer }}</option>
+							</MkSelect>
+						</MkPreferenceContainer>
+					</SearchMarker>
+
+					<MkButton @click="previewPicker"><i class="ti ti-eye"></i> {{ i18n.ts.preview }}</MkButton>
+				</div>
+			</FormSection>
+		</SearchMarker>
+	</div>
+</SearchMarker>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref, watch } from 'vue';
+import { v4 as uuid } from 'uuid';
+import XPalette from './emoji-palette.palette.vue';
+import MkRadios from '@/components/MkRadios.vue';
+import MkButton from '@/components/MkButton.vue';
+import FormSection from '@/components/form/section.vue';
+import MkSelect from '@/components/MkSelect.vue';
+import * as os from '@/os.js';
+import { i18n } from '@/i18n.js';
+import { definePage } from '@/page.js';
+import MkFolder from '@/components/MkFolder.vue';
+import { prefer } from '@/preferences.js';
+import MkPreferenceContainer from '@/components/MkPreferenceContainer.vue';
+import MkSwitch from '@/components/MkSwitch.vue';
+import { emojiPicker } from '@/utility/emoji-picker.js';
+
+const emojiPaletteForReaction = prefer.model('emojiPaletteForReaction');
+const emojiPaletteForMain = prefer.model('emojiPaletteForMain');
+const emojiPickerScale = prefer.model('emojiPickerScale');
+const emojiPickerWidth = prefer.model('emojiPickerWidth');
+const emojiPickerHeight = prefer.model('emojiPickerHeight');
+const emojiPickerStyle = prefer.model('emojiPickerStyle');
+
+const palettesSyncEnabled = ref(prefer.isSyncEnabled('emojiPalettes'));
+
+function changePalettesSyncEnabled(value: boolean) {
+	if (value) {
+		prefer.enableSync('emojiPalettes').then((res) => {
+			if (res == null) return;
+			if (res.enabled) palettesSyncEnabled.value = true;
+		});
+	} else {
+		prefer.disableSync('emojiPalettes');
+		palettesSyncEnabled.value = false;
+	}
+}
+
+function addPalette() {
+	prefer.commit('emojiPalettes', [
+		...prefer.s.emojiPalettes,
+		{
+			id: uuid(),
+			name: '',
+			emojis: [],
+		},
+	]);
+}
+
+function updatePaletteEmojis(id: string, emojis: string[]) {
+	prefer.commit('emojiPalettes', prefer.s.emojiPalettes.map(palette => {
+		if (palette.id === id) {
+			return {
+				...palette,
+				emojis,
+			};
+		} else {
+			return palette;
+		}
+	}));
+}
+
+function updatePaletteName(id: string, name: string) {
+	prefer.commit('emojiPalettes', prefer.s.emojiPalettes.map(palette => {
+		if (palette.id === id) {
+			return {
+				...palette,
+				name,
+			};
+		} else {
+			return palette;
+		}
+	}));
+}
+
+function delPalette(id: string) {
+	if (prefer.s.emojiPalettes.length === 1) {
+		addPalette();
+	}
+	prefer.commit('emojiPalettes', prefer.s.emojiPalettes.filter(palette => palette.id !== id));
+	if (prefer.s.emojiPaletteForMain === id) {
+		prefer.commit('emojiPaletteForMain', null);
+	}
+	if (prefer.s.emojiPaletteForReaction === id) {
+		prefer.commit('emojiPaletteForReaction', null);
+	}
+}
+
+function getHTMLElement(ev: MouseEvent): HTMLElement {
+	const target = ev.currentTarget ?? ev.target;
+	return target as HTMLElement;
+}
+
+function previewPicker(ev: MouseEvent) {
+	emojiPicker.show(getHTMLElement(ev));
+}
+
+definePage(() => ({
+	title: i18n.ts.emojiPalette,
+	icon: 'ti ti-mood-happy',
+}));
+</script>
+
+<style lang="scss" module>
+.tab {
+	margin: calc(var(--MI-margin) / 2) 0;
+	padding: calc(var(--MI-margin) / 2) 0;
+	background: var(--MI_THEME-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(--MI_THEME-fgTransparentWeak);
+}
+</style>

packages/frontend/src/pages/settings/emoji-picker.vue

@@ -1,288 +0,0 @@
-<!--
-SPDX-FileCopyrightText: syuilo and misskey-project
-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" :fallbackToImage="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="overwriteFromPinnedEmojis"><i class="ti ti-copy"></i> {{ i18n.ts.overwriteFromPinnedEmojis }}</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" :fallbackToImage="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="overwriteFromPinnedEmojisForReaction"><i class="ti ti-copy"></i> {{ i18n.ts.overwriteFromPinnedEmojisForReaction }}</MkButton>
-			</div>
-		</div>
-	</MkFolder>
-
-	<FormSection>
-		<template #label>{{ i18n.ts.emojiPickerDisplay }}</template>
-
-		<div class="_gaps_m">
-			<MkPreferenceContainer k="emojiPickerScale">
-				<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>
-			</MkPreferenceContainer>
-
-			<MkPreferenceContainer k="emojiPickerWidth">
-				<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>
-			</MkPreferenceContainer>
-
-			<MkPreferenceContainer k="emojiPickerHeight">
-				<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>
-			</MkPreferenceContainer>
-
-			<MkPreferenceContainer k="emojiPickerStyle">
-				<MkSelect v-model="emojiPickerStyle">
-					<template #label>{{ i18n.ts.style }}</template>
-					<template #caption>{{ i18n.ts.needReloadToApply }}</template>
-					<option value="auto">{{ i18n.ts.auto }}</option>
-					<option value="popup">{{ i18n.ts.popup }}</option>
-					<option value="drawer">{{ i18n.ts.drawer }}</option>
-				</MkSelect>
-			</MkPreferenceContainer>
-		</div>
-	</FormSection>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { computed, ref, watch } from 'vue';
-import Sortable from 'vuedraggable';
-import type { Ref } from 'vue';
-import MkRadios from '@/components/MkRadios.vue';
-import MkButton from '@/components/MkButton.vue';
-import FormSection from '@/components/form/section.vue';
-import MkSelect from '@/components/MkSelect.vue';
-import * as os from '@/os.js';
-import { store } from '@/store.js';
-import { i18n } from '@/i18n.js';
-import { definePage } from '@/page.js';
-import { deepClone } from '@/utility/clone.js';
-import { reactionPicker } from '@/utility/reaction-picker.js';
-import { emojiPicker } from '@/utility/emoji-picker.js';
-import MkCustomEmoji from '@/components/global/MkCustomEmoji.vue';
-import MkEmoji from '@/components/global/MkEmoji.vue';
-import MkFolder from '@/components/MkFolder.vue';
-import { prefer } from '@/preferences.js';
-import MkPreferenceContainer from '@/components/MkPreferenceContainer.vue';
-
-const pinnedEmojisForReaction: Ref<string[]> = ref(deepClone(store.s.reactions));
-const pinnedEmojis: Ref<string[]> = ref(deepClone(store.s.pinnedEmojis));
-
-const emojiPickerScale = prefer.model('emojiPickerScale');
-const emojiPickerWidth = prefer.model('emojiPickerWidth');
-const emojiPickerHeight = prefer.model('emojiPickerHeight');
-const emojiPickerStyle = prefer.model('emojiPickerStyle');
-
-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), null);
-}
-
-function previewEmoji(ev: MouseEvent) {
-	emojiPicker.show(getHTMLElement(ev));
-}
-
-async function overwriteFromPinnedEmojis() {
-	const { canceled } = await os.confirm({
-		type: 'warning',
-		text: i18n.ts.overwriteContentConfirm,
-	});
-
-	if (canceled) {
-		return;
-	}
-
-	pinnedEmojisForReaction.value = [...pinnedEmojis.value];
-}
-
-async function overwriteFromPinnedEmojisForReaction() {
-	const { canceled } = await os.confirm({
-		type: 'warning',
-		text: i18n.ts.overwriteContentConfirm,
-	});
-
-	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(store.def.reactions.default);
-}
-
-async function pickEmoji(itemsRef: Ref<string[]>, ev: MouseEvent) {
-	os.pickEmoji(getHTMLElement(ev), {
-		showPinned: false,
-	}).then(it => {
-		const emoji = it;
-		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, () => {
-	store.set('reactions', pinnedEmojisForReaction.value);
-}, {
-	deep: true,
-});
-
-watch(pinnedEmojis, () => {
-	store.set('pinnedEmojis', pinnedEmojis.value);
-}, {
-	deep: true,
-});
-
-definePage(() => ({
-	title: i18n.ts.emojiPicker,
-	icon: 'ti ti-mood-happy',
-}));
-</script>
-
-<style lang="scss" module>
-.tab {
-	margin: calc(var(--MI-margin) / 2) 0;
-	padding: calc(var(--MI-margin) / 2) 0;
-	background: var(--MI_THEME-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(--MI_THEME-fgTransparentWeak);
-}
-</style>

packages/frontend/src/pages/settings/index.vue

@@ -86,11 +86,6 @@ const menuDef = computed<SuperMenuDef[]>(() => [{
 		text: i18n.ts.privacy,
 		to: '/settings/privacy',
 		active: currentPage.value?.route.name === 'privacy',
-	}, {
-		icon: 'ti ti-mood-happy',
-		text: i18n.ts.emojiPicker,
-		to: '/settings/emoji-picker',
-		active: currentPage.value?.route.name === 'emojiPicker',
 	}, {
 		icon: 'ti ti-bell',
 		text: i18n.ts.notifications,
@@ -118,6 +113,11 @@ const menuDef = computed<SuperMenuDef[]>(() => [{
 		text: i18n.ts.theme,
 		to: '/settings/theme',
 		active: currentPage.value?.route.name === 'theme',
+	}, {
+		icon: 'ti ti-mood-happy',
+		text: i18n.ts.emojiPalette,
+		to: '/settings/emoji-palette',
+		active: currentPage.value?.route.name === 'emoji-palette',
 	}, {
 		icon: 'ti ti-device-desktop',
 		text: i18n.ts.appearance,

packages/frontend/src/preferences/def.ts

@@ -29,6 +29,8 @@ export type SoundStore = {
 	volume: number;
 };
 
+// NOTE: デフォルト値は他の設定の状態に依存してはならない(依存していた場合、ユーザーがその設定項目単体で「初期値にリセット」した場合不具合の原因になる)
+
 export const PREF_DEF = {
 	pinnedUserLists: {
 		accountDependent: true,
@@ -56,6 +58,27 @@ export const PREF_DEF = {
 		default: [] as DeckProfile[],
 	},
 
+	emojiPalettes: {
+		serverDependent: true,
+		default: [{
+			id: 'a',
+			name: '',
+			emojis: ['👍', '❤️', '😆', '🤔', '😮', '🎉', '💢', '😥', '😇', '🍮'],
+		}] as {
+			id: string;
+			name: string;
+			emojis: string[];
+		}[],
+	},
+	emojiPaletteForReaction: {
+		serverDependent: true,
+		default: null as string | null,
+	},
+	emojiPaletteForMain: {
+		serverDependent: true,
+		default: null as string | null,
+	},
+
 	overridedDeviceKind: {
 		default: null as DeviceKind | null,
 	},
@@ -180,13 +203,13 @@ export const PREF_DEF = {
 		default: 'remote' as 'none' | 'remote' | 'always',
 	},
 	emojiPickerScale: {
-		default: 1,
+		default: 2,
 	},
 	emojiPickerWidth: {
-		default: 1,
+		default: 2,
 	},
 	emojiPickerHeight: {
-		default: 2,
+		default: 3,
 	},
 	emojiPickerStyle: {
 		default: 'auto' as 'auto' | 'popup' | 'drawer',

packages/frontend/src/router/definition.ts

@@ -66,9 +66,9 @@ const routes: RouteDef[] = [{
 		name: 'privacy',
 		component: page(() => import('@/pages/settings/privacy.vue')),
 	}, {
-		path: '/emoji-picker',
+		path: '/emoji-palette',
-		name: 'emojiPicker',
+		name: 'emoji-palette',
-		component: page(() => import('@/pages/settings/emoji-picker.vue')),
+		component: page(() => import('@/pages/settings/emoji-palette.vue')),
 	}, {
 		path: '/drive',
 		name: 'drive',

packages/frontend/src/store.ts

@@ -39,14 +39,6 @@ export const store = markRaw(new Storage('base', {
 		where: 'account',
 		default: null,
 	},
-	reactions: {
-		where: 'account',
-		default: ['👍', '❤️', '😆', '🤔', '😮', '🎉', '💢', '😥', '😇', '🍮'],
-	},
-	pinnedEmojis: {
-		where: 'account',
-		default: [],
-	},
 	reactionAcceptance: {
 		where: 'account',
 		default: 'nonSensitiveOnly' as 'likeOnly' | 'likeOnlyForRemote' | 'nonSensitiveOnly' | 'nonSensitiveOnlyForLocalLikeOnlyForRemote' | null,
@@ -127,6 +119,14 @@ export const store = markRaw(new Storage('base', {
 	},
 
 	//#region TODO: そのうち消す (preferに移行済み)
+	reactions: {
+		where: 'account',
+		default: ['👍', '❤️', '😆', '🤔', '😮', '🎉', '💢', '😥', '😇', '🍮'],
+	},
+	pinnedEmojis: {
+		where: 'account',
+		default: [],
+	},
 	widgets: {
 		where: 'account',
 		default: [] as {

packages/frontend/src/utility/autogen/settings-search-index.ts

@@ -536,6 +536,57 @@ export const searchIndexes: SearchIndexItem[] = [
 		path: '/settings/mute-block',
 		icon: 'ti ti-ban',
 	},
+	{
+		id: 'yR1OSyLiT',
+		children: [
+			{
+				id: 'yMJzyzOUk',
+				label: i18n.ts._emojiPalette.enableSyncBetweenDevicesForPalettes,
+				keywords: ['sync', 'palettes', 'devices'],
+			},
+			{
+				id: 'wCE09vgZr',
+				label: i18n.ts._emojiPalette.paletteForMain,
+				keywords: ['main', 'palette'],
+			},
+			{
+				id: 'uCzRPrSNx',
+				label: i18n.ts._emojiPalette.paletteForReaction,
+				keywords: ['reaction', 'palette'],
+			},
+			{
+				id: 'hgQr28WUk',
+				children: [
+					{
+						id: 'fY04NIHSQ',
+						label: i18n.ts.size,
+						keywords: ['emoji', 'picker', 'scale', 'size'],
+					},
+					{
+						id: '3j7vlaL7t',
+						label: i18n.ts.numberOfColumn,
+						keywords: ['emoji', 'picker', 'width', 'column', 'size'],
+					},
+					{
+						id: 'zPX8z1Bcy',
+						label: i18n.ts.height,
+						keywords: ['emoji', 'picker', 'height', 'size'],
+					},
+					{
+						id: '2CSkZa4tl',
+						label: i18n.ts.style,
+						keywords: ['emoji', 'picker', 'style'],
+					},
+				],
+				label: i18n.ts.emojiPickerDisplay,
+				keywords: ['emoji', 'picker', 'display'],
+			},
+		],
+		label: i18n.ts.emojiPalette,
+		keywords: ['emoji', 'palette'],
+		path: '/settings/emoji-palette',
+		icon: 'ti ti-mood-happy',
+	},
 	{
 		id: '3Tcxw4Fwl',
 		children: [
@@ -608,23 +659,28 @@ export const searchIndexes: SearchIndexItem[] = [
 		id: 'FfZdOs8y',
 		children: [
 			{
-				id: 'lVlkdP4zN',
+				id: 'B1ZU6Ur54',
+				label: i18n.ts._deck.enableSyncBetweenDevicesForProfiles,
+				keywords: ['sync', 'profiles', 'devices'],
+			},
+			{
+				id: 'iEF0gqNAo',
 				label: i18n.ts._deck.useSimpleUiForNonRootPages,
 				keywords: ['ui', 'root', 'page'],
 			},
 			{
-				id: 'avgxEYgsi',
+				id: 'BNdSeWxZn',
 				label: i18n.ts.defaultNavigationBehaviour,
 				keywords: ['default', 'navigation', 'behaviour', 'window'],
 			},
 			{
-				id: 'ma7OSw5JK',
+				id: 'zT9pGm8DF',
 				label: i18n.ts._deck.alwaysShowMainColumn,
 				keywords: ['always', 'show', 'main', 'column'],
 			},
 			{
-				id: 'jjTlUDhJH',
+				id: '5dk2xv1vc',
-				label: 'Unnamed marker',
+				label: i18n.ts._deck.columnAlign,
 				keywords: ['column', 'align'],
 			},
 		],

packages/frontend/src/utility/emoji-picker.ts

@@ -3,10 +3,10 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { defineAsyncComponent, ref } from 'vue';
+import { defineAsyncComponent, ref, watch } from 'vue';
 import type { Ref } from 'vue';
 import { popup } from '@/os.js';
-import { store } from '@/store.js';
+import { prefer } from '@/preferences.js';
 
 /**
  * 絵文字ピッカーを表示する。
@@ -25,7 +25,14 @@ class EmojiPicker {
 	}
 
 	public async init() {
-		const emojisRef = store.r.pinnedEmojis;
+		const emojisRef = ref<string[]>([]);
+
+		watch([prefer.r.emojiPaletteForMain, prefer.r.emojiPalettes], () => {
+			emojisRef.value = prefer.s.emojiPaletteForMain == null ? prefer.s.emojiPalettes[0].emojis : prefer.s.emojiPalettes.find(palette => palette.id === prefer.s.emojiPaletteForMain)?.emojis ?? [];
+		}, {
+			immediate: true,
+		});
+
 		await popup(defineAsyncComponent(() => import('@/components/MkEmojiPickerDialog.vue')), {
 			src: this.src,
 			pinnedEmojis: emojisRef,

packages/frontend/src/utility/reaction-picker.ts

@@ -4,10 +4,10 @@
  */
 
 import * as Misskey from 'misskey-js';
-import { defineAsyncComponent, ref } from 'vue';
+import { defineAsyncComponent, ref, watch } from 'vue';
 import type { Ref } from 'vue';
 import { popup } from '@/os.js';
-import { store } from '@/store.js';
+import { prefer } from '@/preferences.js';
 
 class ReactionPicker {
 	private src: Ref<HTMLElement | null> = ref(null);
@@ -21,7 +21,14 @@ class ReactionPicker {
 	}
 
 	public async init() {
-		const reactionsRef = store.r.reactions;
+		const reactionsRef = ref<string[]>([]);
+
+		watch([prefer.r.emojiPaletteForReaction, prefer.r.emojiPalettes], () => {
+			reactionsRef.value = prefer.s.emojiPaletteForReaction == null ? prefer.s.emojiPalettes[0].emojis : prefer.s.emojiPalettes.find(palette => palette.id === prefer.s.emojiPaletteForReaction)?.emojis ?? [];
+		}, {
+			immediate: true,
+		});
+
 		await popup(defineAsyncComponent(() => import('@/components/MkEmojiPickerDialog.vue')), {
 			src: this.src,
 			pinnedEmojis: reactionsRef,