enhance(frontend): 追加の絵文字用辞書をダウンロードできるように

Resolve #10921

locales/ja-JP.yml

@@ -1060,6 +1060,7 @@ cancelReactionConfirm: "リアクションを取り消しますか？"
 changeReactionConfirm: "リアクションを変更しますか？"
 later: "あとで"
 goToMisskey: "Misskeyへ"
+additionalEmojiDictionary: "絵文字の追加辞書"
 
 _initialAccountSetting:
   accountCreated: "アカウントの作成が完了しました！"

packages/frontend/src/components/MkAutocomplete.vue

@@ -42,7 +42,7 @@ import { acct } from '@/filters/user';
 import * as os from '@/os';
 import { MFM_TAGS } from '@/scripts/mfm-tags';
 import { defaultStore } from '@/store';
-import { emojilist } from '@/scripts/emojilist';
+import { emojilist, getEmojiName } from '@/scripts/emojilist';
 import { i18n } from '@/i18n';
 import { miLocalStorage } from '@/local-storage';
 import { customEmojis } from '@/custom-emojis';
@@ -71,6 +71,19 @@ const emojiDb = computed(() => {
 		url: char2path(x.char),
 	}));
 
+	for (const index of Object.values(defaultStore.state.additionalUnicodeEmojiIndexes)) {
+		for (const [emoji, keywords] of Object.entries(index)) {
+			for (const k of keywords) {
+				unicodeEmojiDB.push({
+					emoji: emoji,
+					name: k,
+					aliasOf: getEmojiName(emoji)!,
+					url: char2path(emoji),
+				});
+			}
+		}
+	}
+
 	unicodeEmojiDB.sort((a, b) => a.name.length - b.name.length);
 	//#endregion
 

packages/frontend/src/components/MkEmojiPicker.vue

@@ -224,7 +224,6 @@ watch(q, () => {
 		if (newQ.includes(' ')) { // AND検索
 			const keywords = newQ.split(' ');
 
-			// 名前にキーワードが含まれている
 			for (const emoji of emojis) {
 				if (keywords.every(keyword => emoji.name.includes(keyword))) {
 					matches.add(emoji);
@@ -233,13 +232,14 @@ watch(q, () => {
 			}
 			if (matches.size >= max) return matches;
 
-			// 名前にキーワードが含まれている
+			for (const index of Object.values(defaultStore.state.additionalUnicodeEmojiIndexes)) {
 				for (const emoji of emojis) {
-				if (keywords.every(keyword => emoji.name.includes(keyword))) {
+					if (keywords.every(keyword => index[emoji.char].some(k => k.includes(keyword)))) {
 						matches.add(emoji);
 						if (matches.size >= max) break;
 					}
 				}
+			}
 		} else {
 			for (const emoji of emojis) {
 				if (emoji.name.startsWith(newQ)) {
@@ -249,6 +249,15 @@ watch(q, () => {
 			}
 			if (matches.size >= max) return matches;
 
+			for (const index of Object.values(defaultStore.state.additionalUnicodeEmojiIndexes)) {
+				for (const emoji of emojis) {
+					if (index[emoji.char].some(k => k.startsWith(newQ))) {
+						matches.add(emoji);
+						if (matches.size >= max) break;
+					}
+				}
+			}
+
 			for (const emoji of emojis) {
 				if (emoji.name.includes(newQ)) {
 					matches.add(emoji);
@@ -256,6 +265,15 @@ watch(q, () => {
 				}
 			}
 			if (matches.size >= max) return matches;
+
+			for (const index of Object.values(defaultStore.state.additionalUnicodeEmojiIndexes)) {
+				for (const emoji of emojis) {
+					if (index[emoji.char].some(k => k.includes(newQ))) {
+						matches.add(emoji);
+						if (matches.size >= max) break;
+					}
+				}
+			}
 		}
 
 		return matches;

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

@@ -147,6 +147,10 @@
 		<template #label>{{ i18n.ts.other }}</template>
 
 		<div class="_gaps">
+			<MkFolder>
+				<template #label>{{ i18n.ts.additionalEmojiDictionary }}</template>
+				<MkButton @click="downloadEmojiIndex('en-US')"><i class="ti ti-download"></i> en-US</MkButton>
+			</MkFolder>
 			<MkSwitch v-model="showTimelineReplies">{{ i18n.ts.flagShowTimelineReplies }}<template #caption>{{ i18n.ts.flagShowTimelineRepliesDescription }} {{ i18n.ts.reflectMayTakeTime }}</template></MkSwitch>
 			<FormLink to="/settings/deck">{{ i18n.ts.deck }}</FormLink>
 			<FormLink to="/settings/custom-css"><template #icon><i class="ti ti-code"></i></template>{{ i18n.ts.customCss }}</FormLink>
@@ -161,6 +165,8 @@ import MkSwitch from '@/components/MkSwitch.vue';
 import MkSelect from '@/components/MkSelect.vue';
 import MkRadios from '@/components/MkRadios.vue';
 import MkRange from '@/components/MkRange.vue';
+import MkFolder from '@/components/MkFolder.vue';
+import MkButton from '@/components/MkButton.vue';
 import FormSection from '@/components/form/section.vue';
 import FormLink from '@/components/form/link.vue';
 import MkLink from '@/components/MkLink.vue';
@@ -253,6 +259,22 @@ watch([
 	await reloadAsk();
 });
 
+async function downloadEmojiIndex(lang: string) {
+	async function main() {
+		const currentIndexes = defaultStore.state.additionalUnicodeEmojiIndexes;
+		function download() {
+			switch (lang) {
+				case 'en-US': return import('../../unicode-emoji-indexes/en-US.json').then(x => x.default);
+				default: throw new Error('unrecognized lang: ' + lang);
+			}
+		}
+		currentIndexes[lang] = await download();
+		defaultStore.set('additionalUnicodeEmojiIndexes', currentIndexes);
+	}
+
+	os.promiseDialog(main());
+}
+
 const headerActions = $computed(() => []);
 
 const headerTabs = $computed(() => []);

packages/frontend/src/store.ts

@@ -338,6 +338,10 @@ export const defaultStore = markRaw(new Storage('base', {
 		where: 'device',
 		default: true,
 	},
+	additionalUnicodeEmojiIndexes: {
+		where: 'device',
+		default: {} as Record<string, Record<string, string[]>>,
+	},
 }));
 
 // TODO: 他のタブと永続化されたstateを同期