Fix: Suggestedな絵文字がでない問題

Author: mattyatea

packages/frontend/src/components/MkEmojiPicker.vue

@@ -164,7 +164,7 @@ import { isTouchUsing } from '@/utility/touch.js';
 import { deviceKind } from '@/utility/device-kind.js';
 import { i18n } from '@/i18n.js';
 import { store } from '@/store.js';
-import { customEmojiCategories, customEmojis, customEmojisMap } from '@/custom-emojis.js';
+import { customEmojiCategories, customEmojis, customEmojisMap, fetchCustomEmojis } from '@/custom-emojis.js';
 import { $i } from '@/i.js';
 import { checkReactionPermissions } from '@/utility/check-reaction-permissions.js';
 import { prefer } from '@/preferences.js';
@@ -539,6 +539,19 @@ function normalizeSuggestionItems(items: EmojiSuggestionItem[]): Misskey.entitie
 	return emojis;
 }
 
+async function normalizeSuggestionItemsWithRefresh(items: EmojiSuggestionItem[]): Promise<Misskey.entities.EmojiSimple[]> {
+	const emojis = normalizeSuggestionItems(items);
+	if (emojis.length > 0 || items.length === 0) return emojis;
+
+	try {
+		await fetchCustomEmojis(true);
+	} catch (_err) {
+		return emojis;
+	}
+
+	return normalizeSuggestionItems(items);
+}
+
 function isRecord(value: unknown): value is Record<string, unknown> {
 	return typeof value === 'object' && value !== null;
 }
@@ -575,7 +588,7 @@ async function loadSuggestedEmojis(): Promise<void> {
 		if (!isEmojiSuggestionResponse(response)) throw new Error('invalid emoji suggestion response');
 
 		if (suggestionAbortController !== abortController) return;
-		suggestedEmojis.value = normalizeSuggestionItems(response.items ?? []).filter(canReact);
+		suggestedEmojis.value = (await normalizeSuggestionItemsWithRefresh(response.items ?? [])).filter(canReact);
 	} catch {
 		if (suggestionAbortController === abortController) {
 			suggestedEmojis.value = [];

packages/frontend/test/emoji-picker-suggestions.test.ts

@@ -246,13 +246,13 @@ afterEach(() => {
 describe('MkEmojiPicker emoji suggestions QA flows', () => {
 	test('shows eligible public suggestions and emits the existing chosen reaction path', async () => {
 		mockedMisskeyApi.mockResolvedValueOnce({
-				items: [{
-					name: suggestedEmoji.name,
-					score: 0.98,
-					aliases: suggestedEmoji.aliases,
-					category: suggestedEmoji.category,
-				}],
-				reason: 'component-test',
+			items: [{
+				name: suggestedEmoji.name,
+				score: 0.98,
+				aliases: suggestedEmoji.aliases,
+				category: suggestedEmoji.category,
+			}],
+			reason: 'component-test',
 		});
 
 		const result = await renderPicker({
@@ -286,6 +286,42 @@ describe('MkEmojiPicker emoji suggestions QA flows', () => {
 		expect(result.emitted('chosen')).toEqual([[':suggest_smile:']]);
 	});
 
+	test('refreshes stale custom emoji cache before rendering suggestions', async () => {
+		customEmojis.value = [fallbackEmoji];
+		customEmojisMap.clear();
+		customEmojisMap.set(fallbackEmoji.name, fallbackEmoji);
+
+		const uncachedSuggestedEmoji: Misskey.entities.EmojiSimple = {
+			...suggestedEmoji,
+			category: null,
+		};
+
+		mockedMisskeyApi
+			.mockResolvedValueOnce({
+				items: [{
+					name: uncachedSuggestedEmoji.name,
+					score: 0.412465,
+					aliases: [],
+					category: null,
+				}],
+				reason: null,
+			})
+			.mockResolvedValueOnce({
+				emojis: [fallbackEmoji, uncachedSuggestedEmoji],
+			});
+
+		const result = await renderPicker({
+			targetNote: createNote(),
+			pinnedEmojis: [':fallback_ok:'],
+		});
+
+		await waitFor(() => expect(result.getByText('Suggested')).not.toBeNull());
+		await waitFor(() => expect(mockedMisskeyApi).toHaveBeenCalledTimes(2));
+		expect(mockedMisskeyApi.mock.calls[0][0]).toBe('notes/reactions/suggestions');
+		expect(mockedMisskeyApi.mock.calls[1][0]).toBe('emojis');
+		expect(result.container.querySelector('[data-emoji=":suggest_smile:"]')).not.toBeNull();
+	});
+
 	test('does not request suggestions when disabled and pinned picker behavior still works', async () => {
 		setEmojiSuggestionPublicMeta({ enabled: false, maxSuggestions: 4 });