enhance(frontend): 投稿フォームの絵文字ピッカーに独立したウィンドウを使用できるように

CHANGELOG.md

@@ -6,6 +6,7 @@
 ### Client
 - Enhance: 投稿フォームの「迷惑になる可能性があります」のダイアログを表示する条件においてCWを考慮するように
 - Enhance: アンテナ、リスト等の名前をカラム名のデフォルト値にするように `#13992`
+- Enhance: 投稿フォームの絵文字ピッカーに独立したウィンドウを使用できるように
 
 ### Server
 -

locales/index.d.ts

@@ -130,6 +130,10 @@ export interface Locale extends ILocale {
      * ウィンドウで開く
      */
     "openInWindow": string;
+    /**
+     * ウィンドウ
+     */
+    "window": string;
     /**
      * プロフィール
      */
@@ -3186,10 +3190,6 @@ export interface Locale extends ILocale {
      * 設定はページリロード後に反映されます。
      */
     "reloadToApplySetting": string;
-    /**
-     * 反映には再起動が必要です。
-     */
-    "needReloadToApply": string;
     /**
      * タイトルバーを表示する
      */

locales/ja-JP.yml

@@ -28,6 +28,7 @@ notificationSettings: "通知の設定"
 basicSettings: "基本設定"
 otherSettings: "その他の設定"
 openInWindow: "ウィンドウで開く"
+window: "ウィンドウ"
 profile: "プロフィール"
 timeline: "タイムライン"
 noAccountDescription: "自己紹介はありません"
@@ -792,7 +793,6 @@ center: "中央"
 wide: "広い"
 narrow: "狭い"
 reloadToApplySetting: "設定はページリロード後に反映されます。"
-needReloadToApply: "反映には再起動が必要です。"
 showTitlebar: "タイトルバーを表示する"
 clearCache: "キャッシュをクリア"
 onlineUsersCount: "{n}人がオンライン"

packages/frontend/src/components/MkEmojiPickerWindow.stories.impl.ts

@@ -0,0 +1,7 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import MkEmojiPickerWindow from './MkEmojiPickerWindow.vue';
+void MkEmojiPickerWindow;

packages/frontend/src/components/MkEmojiPickerWindow.vue

@@ -0,0 +1,72 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<MkWindow
+	ref="window"
+	:initialWidth="300"
+	:initialHeight="290"
+	:canResize="true"
+	:mini="true"
+	:front="true"
+	@closed="emit('closed')"
+>
+	<MkEmojiPicker
+		:showPinned="showPinned"
+		:asReactionPicker="asReactionPicker"
+		:targetNote="targetNote"
+		asWindow
+		:class="$style.picker"
+		@chosen="chosen"
+	/>
+</MkWindow>
+</template>
+
+<script lang="ts" setup>
+import { onBeforeUnmount, onMounted, useTemplateRef } from 'vue';
+import * as Misskey from 'misskey-js';
+import { globalEvents } from '@/events.js';
+import MkWindow from '@/components/MkWindow.vue';
+import MkEmojiPicker from '@/components/MkEmojiPicker.vue';
+
+withDefaults(defineProps<{
+	src?: HTMLElement;
+	showPinned?: boolean;
+	pinnedEmojis?: string[];
+	asReactionPicker?: boolean;
+	targetNote?: Misskey.entities.Note;
+}>(), {
+	showPinned: true,
+});
+
+const emit = defineEmits<{
+	(ev: 'chosen', v: string): void;
+	(ev: 'closed'): void;
+}>();
+
+function chosen(emoji: string) {
+	emit('chosen', emoji);
+}
+
+const windowEl = useTemplateRef('window');
+
+function onCloseRequested() {
+	windowEl.value?.close();
+}
+
+onMounted(() => {
+	globalEvents.on('requestCloseEmojiPickerWindow', onCloseRequested);
+});
+
+onBeforeUnmount(() => {
+	globalEvents.off('requestCloseEmojiPickerWindow', onCloseRequested);
+});
+</script>
+
+<style lang="scss" module>
+.picker {
+	height: 100%;
+}
+</style>

packages/frontend/src/components/MkPostForm.vue

@@ -100,7 +100,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { inject, watch, nextTick, onMounted, defineAsyncComponent, provide, shallowRef, ref, computed } from 'vue';
+import { inject, watch, nextTick, onMounted, onBeforeUnmount, defineAsyncComponent, provide, shallowRef, ref, computed } from 'vue';
 import type { ShallowRef } from 'vue';
 import * as mfm from 'mfm-js';
 import * as Misskey from 'misskey-js';
@@ -129,6 +129,7 @@ import { uploadFile } from '@/scripts/upload.js';
 import { deepClone } from '@/scripts/clone.js';
 import MkRippleEffect from '@/components/MkRippleEffect.vue';
 import { miLocalStorage } from '@/local-storage.js';
+import { globalEvents } from '@/events.js';
 import { claimAchievement } from '@/scripts/achievements.js';
 import { emojiPicker } from '@/scripts/emoji-picker.js';
 import { mfmFunctionPicker } from '@/scripts/mfm-function-picker.js';
@@ -919,20 +920,20 @@ async function insertEmoji(ev: MouseEvent) {
 
 	let pos = textareaEl.value?.selectionStart ?? 0;
 	let posEnd = textareaEl.value?.selectionEnd ?? text.value.length;
-	emojiPicker.show(
-		target as HTMLElement,
-		emoji => {
+	emojiPicker.show({
+		src: target as HTMLElement,
+		onChosen: emoji => {
 			const textBefore = text.value.substring(0, pos);
 			const textAfter = text.value.substring(posEnd);
 			text.value = textBefore + emoji + textAfter;
 			pos += emoji.length;
 			posEnd += emoji.length;
 		},
-		() => {
+		onClosed: () => {
 			textAreaReadOnly.value = false;
 			nextTick(() => focus());
 		},
-	);
+	});
 }
 
 async function insertMfmFunction(ev: MouseEvent) {
@@ -1047,6 +1048,12 @@ onMounted(() => {
 	});
 });
 
+onBeforeUnmount(() => {
+	// MkPostFormDialogでも発火しているが、Dialogではない場合は呼ばれないためこちらでも呼ぶ必要がある
+	// なのでDialogの場合は2回発火されるが、ウィンドウを閉じる指示のため悪影響はない
+	globalEvents.emit('requestCloseEmojiPickerWindow');
+});
+
 defineExpose({
 	clear,
 });

packages/frontend/src/components/MkPostFormDialog.vue

@@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<MkModal ref="modal" :preferType="'dialog'" @click="modal?.close()" @closed="onModalClosed()" @esc="modal?.close()">
+<MkModal ref="modal" :preferType="'dialog'" @click="modal?.close()" @close="onModalClose()" @closed="onModalClosed()" @esc="modal?.close()">
 	<MkPostForm ref="form" :class="$style.form" v-bind="props" autofocus freezeAfterPosted @posted="onPosted" @cancel="modal?.close()" @esc="modal?.close()"/>
 </MkModal>
 </template>
@@ -13,6 +13,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { shallowRef } from 'vue';
 import MkModal from '@/components/MkModal.vue';
 import MkPostForm from '@/components/MkPostForm.vue';
+import { globalEvents } from '@/events.js';
 import type { PostFormProps } from '@/types/post-form.js';
 
 const props = withDefaults(defineProps<PostFormProps & {
@@ -36,6 +37,13 @@ function onPosted() {
 	});
 }
 
+function onModalClose() {
+	// MkPostFormでもonBeforeUnmountで発火しているが、Dialogの場合は閉じるまでのトランジションがあるので
+	// 閉じるボタンが押された瞬間に先に発火する
+	// なのでDialogの場合は2回発火されるが、ウィンドウを閉じる指示のため悪影響はない
+	globalEvents.emit('requestCloseEmojiPickerWindow');
+}
+
 function onModalClosed() {
 	emit('closed');
 }

packages/frontend/src/events.ts

@@ -10,4 +10,5 @@ export const globalEvents = new EventEmitter<{
 	themeChanged: () => void;
 	clientNotification: (notification: Misskey.entities.Notification) => void;
 	requestClearPageCache: () => void;
+	requestCloseEmojiPickerWindow: () => void;
 }>();

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

@@ -115,10 +115,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 			<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>
+				<option value="window">{{ i18n.ts.window }}</option>
 			</MkSelect>
 		</div>
 	</FormSection>
@@ -140,6 +140,7 @@ 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 { reloadAsk } from '@/scripts/reload-ask.js';
 import MkCustomEmoji from '@/components/global/MkCustomEmoji.vue';
 import MkEmoji from '@/components/global/MkEmoji.vue';
 import MkFolder from '@/components/MkFolder.vue';
@@ -165,7 +166,9 @@ function previewReaction(ev: MouseEvent) {
 }
 
 function previewEmoji(ev: MouseEvent) {
-	emojiPicker.show(getHTMLElement(ev));
+	emojiPicker.show({
+		src: getHTMLElement(ev),
+	});
 }
 
 async function overwriteFromPinnedEmojis() {
@@ -241,6 +244,10 @@ watch(pinnedEmojis, () => {
 	deep: true,
 });
 
+watch(emojiPickerStyle, async () => {
+	await reloadAsk({ reason: i18n.ts.reloadToApplySetting, unison: true });
+});
+
 definePageMetadata(() => ({
 	title: i18n.ts.emojiPicker,
 	icon: 'ti ti-mood-happy',

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

@@ -16,7 +16,12 @@ import { defaultStore } from '@/store.js';
  */
 class EmojiPicker {
 	private src: Ref<HTMLElement | null> = ref(null);
-	private manualShowing = ref(false);
+
+	private isWindow: boolean = false;
+	private windowShowing: boolean = false;
+
+	private dialogShowing = ref(false);
+
 	private onChosen?: (emoji: string) => void;
 	private onClosed?: () => void;
 
@@ -26,35 +31,61 @@ class EmojiPicker {
 
 	public async init() {
 		const emojisRef = defaultStore.reactiveState.pinnedEmojis;
-		await popup(defineAsyncComponent(() => import('@/components/MkEmojiPickerDialog.vue')), {
-			src: this.src,
-			pinnedEmojis: emojisRef,
-			asReactionPicker: false,
-			manualShowing: this.manualShowing,
-			choseAndClose: false,
-		}, {
-			done: emoji => {
-				if (this.onChosen) this.onChosen(emoji);
-			},
-			close: () => {
-				this.manualShowing.value = false;
-			},
-			closed: () => {
-				this.src.value = null;
-				if (this.onClosed) this.onClosed();
-			},
-		});
+		if (defaultStore.state.emojiPickerStyle === 'window') {
+			// init後にemojiPickerStyleが変わった場合、drawer/popup用の初期化をスキップするため、
+			// 正常に絵文字ピッカーが表示されない。
+			// なので一度initされたらwindow表示で固定する（設定を変更したら要リロード）
+			this.isWindow = true;
+		} else {
+			await popup(defineAsyncComponent(() => import('@/components/MkEmojiPickerDialog.vue')), {
+				src: this.src,
+				pinnedEmojis: emojisRef,
+				asReactionPicker: false,
+				manualShowing: this.dialogShowing,
+				choseAndClose: false,
+			}, {
+				done: emoji => {
+					if (this.onChosen) this.onChosen(emoji);
+				},
+				close: () => {
+					this.dialogShowing.value = false;
+				},
+				closed: () => {
+					this.src.value = null;
+					if (this.onClosed) this.onClosed();
+				},
+			});
+		}
 	}
 
-	public show(
+	public show(opts: {
 		src: HTMLElement,
 		onChosen?: EmojiPicker['onChosen'],
 		onClosed?: EmojiPicker['onClosed'],
-	) {
-		this.src.value = src;
-		this.manualShowing.value = true;
-		this.onChosen = onChosen;
-		this.onClosed = onClosed;
+	}) {
+		if (this.isWindow) {
+			if (this.windowShowing) return;
+			this.windowShowing = true;
+			const { dispose } = popup(defineAsyncComponent(() => import('@/components/MkEmojiPickerWindow.vue')), {
+				src: opts.src,
+				pinnedEmojis: defaultStore.reactiveState.pinnedEmojis,
+				asReactionPicker: false,
+			}, {
+				chosen: (emoji) => {
+					if (opts.onChosen) opts.onChosen(emoji);
+				},
+				closed: () => {
+					if (opts.onClosed) opts.onClosed();
+					this.windowShowing = false;
+					dispose();
+				},
+			});
+		} else {
+			this.src.value = opts.src;
+			this.dialogShowing.value = true;
+			this.onChosen = opts.onChosen;
+			this.onClosed = opts.onClosed;
+		}
 	}
 }
 

packages/frontend/src/store.ts

@@ -131,7 +131,7 @@ export const defaultStore = markRaw(new Storage('base', {
 	},
 	pinnedEmojis: {
 		where: 'account',
-		default: [],
+		default: [] as string[],
 	},
 	reactionAcceptance: {
 		where: 'account',
@@ -313,7 +313,7 @@ export const defaultStore = markRaw(new Storage('base', {
 	},
 	emojiPickerStyle: {
 		where: 'device',
-		default: 'auto' as 'auto' | 'popup' | 'drawer',
+		default: 'auto' as 'auto' | 'popup' | 'drawer' | 'window',
 	},
 	recentlyUsedEmojis: {
 		where: 'device',