fix(frontend): まれにリアクション・絵文字ピッカーが動作しなくなる問題を修正 (#17349)

* Revert "fix(frontend): popupのりアクティビティがチャンクをまたいで切れる事がある問題を修正"

This reverts commit 0a93f526dd.

* fix: iOS PWA でリアクション・絵文字ピッカーが動作しない問題を修正

Agent-Logs-Url: https://github.com/lqvp/misskey-tempura/sessions/44526368-0e6a-4a94-8991-fcdc094d2b96

Co-authored-by: lqvp <183242690+lqvp@users.noreply.github.com>

* refactor

* fix

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: lqvp <183242690+lqvp@users.noreply.github.com>

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

@@ -3,9 +3,9 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { defineAsyncComponent, ref, watch } from 'vue';
-import type { Ref } from 'vue';
-import { popup } from '@/os.js';
+import { markRaw, shallowRef, ref, watch } from 'vue';
+import type MkEmojiPickerDialog__TypeReferenceOnly from '@/components/MkEmojiPickerDialog.vue';
+import { popup, popupAsyncWithDialog } from '@/os.js';
 import { prefer } from '@/preferences.js';
 
 /**
@@ -15,53 +15,77 @@ import { prefer } from '@/preferences.js';
  * 一度表示したダイアログを連続で使用できることが望ましいシーンでの利用が想定される。
  */
 class EmojiPicker {
-	private anchorElement: Ref<HTMLElement | null> = ref(null);
-	private manualShowing = ref(false);
-	private onChosen?: (emoji: string) => void;
-	private onClosed?: () => void;
+	private loadedComponent: typeof MkEmojiPickerDialog__TypeReferenceOnly | null = null;
+	private emojisRef = ref<string[]>([]);
 
 	constructor() {
 		// nop
 	}
 
-	public async init() {
-		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,
+	public init() {
+		// コンポーネントをプリロードしてキャッシュしておく。
+		// iOS PWA では await を挟むとユーザーアクティベーションが失われfocusが効かなくなるため、
+		// show() 呼び出し時には同期的に popup() できるよう事前にコンポーネントを解決しておく。
+		import('@/components/MkEmojiPickerDialog.vue').then(m => {
+			this.loadedComponent = markRaw(m.default);
+		}).catch(err => {
+			console.error('[EmojiPicker] Failed to preload MkEmojiPickerDialog:', err);
 		});
 
-		await popup(defineAsyncComponent(() => import('@/components/MkEmojiPickerDialog.vue')), {
-			anchorElement: this.anchorElement,
-			pinnedEmojis: emojisRef,
-			asReactionPicker: false,
-			manualShowing: this.manualShowing,
-			choseAndClose: false,
+		watch([prefer.r.emojiPaletteForMain, prefer.r.emojiPalettes], () => {
+			this.emojisRef.value = prefer.s.emojiPaletteForMain == null ? prefer.s.emojiPalettes[0].emojis : prefer.s.emojiPalettes.find(palette => palette.id === prefer.s.emojiPaletteForMain)?.emojis ?? [];
 		}, {
-			done: emoji => {
-				if (this.onChosen) this.onChosen(emoji);
-			},
-			close: () => {
-				this.manualShowing.value = false;
-			},
-			closed: () => {
-				this.anchorElement.value = null;
-				if (this.onClosed) this.onClosed();
-			},
+			immediate: true,
 		});
 	}
 
 	public show(
 		anchorElement: HTMLElement,
-		onChosen?: EmojiPicker['onChosen'],
-		onClosed?: EmojiPicker['onClosed'],
+		onChosen?: (emoji: string) => void,
+		onClosed?: () => void,
 	) {
-		this.anchorElement.value = anchorElement;
-		this.manualShowing.value = true;
-		this.onChosen = onChosen;
-		this.onClosed = onClosed;
+		const anchorRef = shallowRef(anchorElement);
+
+		if (this.loadedComponent) {
+			// コンポーネント解決済みのため同期的に popup() できる。
+			// ユーザーアクティベーションコンテキストが維持されiOSでもfocusが機能する。
+			const { dispose } = popup(this.loadedComponent, {
+				anchorElement: anchorRef,
+				pinnedEmojis: this.emojisRef,
+				asReactionPicker: false,
+				choseAndClose: false,
+			}, {
+				done: (emoji: string) => {
+					if (onChosen) onChosen(emoji);
+				},
+				closed: () => {
+					if (onClosed) onClosed();
+					dispose();
+				},
+			});
+		} else {
+			// フォールバック: 初回タップがプリロード完了前
+			popupAsyncWithDialog(
+				import('@/components/MkEmojiPickerDialog.vue').then(m => {
+					this.loadedComponent = markRaw(m.default);
+					return this.loadedComponent;
+				}),
+				{
+					anchorElement: anchorRef,
+					pinnedEmojis: this.emojisRef,
+					asReactionPicker: false,
+					choseAndClose: false,
+				},
+				{
+					done: (emoji: string) => {
+						if (onChosen) onChosen(emoji);
+					},
+					closed: () => {
+						if (onClosed) onClosed();
+					},
+				},
+			);
+		}
 	}
 }