feat(frontend): 絵文字ピッカーのカテゴリを多階層フォルダで分類できるように (#12132)

* Update CHANGELOG.md

* Feat:emoji picker folder select

* Fix: lint error

* Fix: lint error 2

* Fix: lint error 3

* カスタム絵文字のカテゴリ表示部分が長かったので短くした

* エフェクトが壊れて出ないのを修正

* padding 18px -> 9px

* Update CHANGELOG.md

* Revert: en-US.yml

* chg: Folder -> folder

* chg: isChildrenExits -> isChildren

* chg: isChildren -> categoryFolderFlag

* カテゴリ末尾が / の場合ピッカーから消失するので「その他」と扱い対応

* 特定のパターンのカテゴリ名でピッカーに出てこないのを修正

「i18n.ts.other」や「/」始まりの場合壊れる

* chg: categoryFolderFlag -> hasChildSection

* code format

* Del: ti-fw

* fix

* 絵文字とフォルダの表示順序入れ替え

* ネストした場合にパネルでどこまでがどのフォルダのものかをわかりやすくした

* fix lint

* カテゴリの名前が長いと表示がおかしくなる問題を修正

Co-authored-by: まっちゃとーにゅ <17376330+u1-liquid@users.noreply.github.com>

---------

Co-authored-by: tamaina <tamaina@hotmail.co.jp>
Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>
Co-authored-by: atsuchan <83960488+atsu1125@users.noreply.github.com>
Co-authored-by: Masaya Suzuki <15100604+massongit@users.noreply.github.com>
Co-authored-by: Kagami Sascha Rosylight <saschanaz@outlook.com>
Co-authored-by: taiy <53635909+taiyme@users.noreply.github.com>
Co-authored-by: xianon <xianon@hotmail.co.jp>
Co-authored-by: kabo2468 <28654659+kabo2468@users.noreply.github.com>
Co-authored-by: YS <47836716+yszkst@users.noreply.github.com>
Co-authored-by: Khsmty <me@khsmty.com>
Co-authored-by: Soni L <EnderMoneyMod@gmail.com>
Co-authored-by: mei23 <m@m544.net>
Co-authored-by: daima3629 <52790780+daima3629@users.noreply.github.com>
Co-authored-by: Windymelt <1113940+windymelt@users.noreply.github.com>
Co-authored-by: Ebise Lutica <7106976+EbiseLutica@users.noreply.github.com>
Co-authored-by: nenohi <kimutipartylove@gmail.com>
Co-authored-by: Acid Chicken (硫酸鶏) <root@acid-chicken.com>
Co-authored-by: rinsuki <428rinsuki+git@gmail.com>
Co-authored-by: FineArchs <133759614+FineArchs@users.noreply.github.com>
Co-authored-by: まっちゃとーにゅ <17376330+u1-liquid@users.noreply.github.com>

3 files changed, 95 insertions, 11 deletions

diff --git a/packages/frontend/src/components/MkEmojiPicker.section.vue b/packages/frontend/src/components/MkEmojiPicker.section.vue
index 08297ea5ba..35de9bbb5e 100644
--- a/packages/frontend/src/components/MkEmojiPicker.section.vue
+++ b/packages/frontend/src/components/MkEmojiPicker.section.vue
@@ -5,9 +5,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <!-- このコンポーネントの要素のclassは親から利用されるのでむやみに弄らないこと -->
-<section>
+<!-- フォルダの中にはカスタム絵文字だけ（Unicode絵文字もこっち） -->
+<section v-if="!hasChildSection" v-panel style="border-radius: 6px; border-bottom: 0.5px solid var(--divider);">
 	<header class="_acrylic" @click="shown = !shown">
-		<i class="toggle ti-fw" :class="shown ? 'ti ti-chevron-down' : 'ti ti-chevron-up'"></i> <slot></slot> ({{ emojis.length }})
+		<i class="toggle ti-fw" :class="shown ? 'ti ti-chevron-down' : 'ti ti-chevron-up'"></i> <slot></slot> (<i class="ti ti-icons"></i>:{{ emojis.length }})
 	</header>
 	<div v-if="shown" class="body">
 		<button
@@ -23,15 +24,52 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</button>
 	</div>
 </section>
+<!-- フォルダの中にはカスタム絵文字やフォルダがある -->
+<section v-else v-panel style="border-radius: 6px; border-bottom: 0.5px solid var(--divider);">
+  <header class="_acrylic" @click="shown = !shown">
+    <i class="toggle ti-fw" :class="shown ? 'ti ti-chevron-down' : 'ti ti-chevron-up'"></i> <slot></slot> (<i class="ti ti-folder ti-fw"></i>:{{ customEmojiTree.length }} <i class="ti ti-icons ti-fw"></i>:{{ emojis.length }})
+  </header>
+  <div v-if="shown" style="padding-left: 9px;">
+      <MkEmojiPickerSection
+          v-for="child in customEmojiTree"
+          :key="`custom:${child.value}`"
+          :initialShown="initialShown"
+          :emojis="computed(() => customEmojis.filter(e => e.category === child.category).map(e => `:${e.name}:`))"
+          :hasChildSection="child.children.length !== 0"
+          :customEmojiTree="child.children"
+          @chosen="nestedChosen"
+      >
+          {{ child.value || i18n.ts.other }}
+      </MkEmojiPickerSection>
+  </div>
+  <div v-if="shown" class="body">
+    <button
+        v-for="emoji in emojis"
+        :key="emoji"
+        :data-emoji="emoji"
+        class="_button item"
+        @pointerenter="computeButtonTitle"
+        @click="emit('chosen', emoji, $event)"
+    >
+      <MkCustomEmoji v-if="emoji[0] === ':'" class="emoji" :name="emoji" :normal="true"/>
+      <MkEmoji v-else class="emoji" :emoji="emoji" :normal="true"/>
+    </button>
+  </div>
+</section>
 </template>
 
 <script lang="ts" setup>
 import { ref, computed, Ref } from 'vue';
-import { getEmojiName } from '@/scripts/emojilist.js';
+import { CustomEmojiFolderTree, getEmojiName } from '@/scripts/emojilist.js';
+import { i18n } from '../i18n.js';
+import { customEmojis } from '@/custom-emojis.js';
+import MkEmojiPickerSection from '@/components/MkEmojiPicker.section.vue';
 
 const props = defineProps<{
 	emojis: string[] | Ref<string[]>;
 	initialShown?: boolean;
+	hasChildSection?: boolean;
+	customEmojiTree?: CustomEmojiFolderTree[];
 }>();
 
 const emit = defineEmits<{
@@ -49,4 +87,7 @@ function computeButtonTitle(ev: MouseEvent): void {
 	elm.title = getEmojiName(emoji) ?? emoji;
 }
 
+function nestedChosen(emoji: any, ev?: MouseEvent) {
+	emit('chosen', emoji, ev);
+}
 </script>
diff --git a/packages/frontend/src/components/MkEmojiPicker.vue b/packages/frontend/src/components/MkEmojiPicker.vue
index 5b420c499e..603f676d5d 100644
--- a/packages/frontend/src/components/MkEmojiPicker.vue
+++ b/packages/frontend/src/components/MkEmojiPicker.vue
@@ -73,18 +73,20 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<div v-once class="group">
 			<header class="_acrylic">{{ i18n.ts.customEmojis }}</header>
 			<XSection
-				v-for="category in customEmojiCategories"
-				:key="`custom:${category}`"
+				v-for="child in customEmojiFolderRoot.children"
+				:key="`custom:${child.value}`"
 				:initialShown="false"
-				:emojis="computed(() => customEmojis.filter(e => category === null ? (e.category === 'null' || !e.category) : e.category === category).filter(filterAvailable).map(e => `:${e.name}:`))"
+				:emojis="computed(() => customEmojis.filter(e => child.value === '' ? (e.category === 'null' || !e.category) : e.category === child.value).filter(filterAvailable).map(e => `:${e.name}:`))"
+        :hasChildSection="child.children.length !== 0"
+        :customEmojiTree="child.children"
 				@chosen="chosen"
 			>
-				{{ category || i18n.ts.other }}
+				{{ child.value || i18n.ts.other }}
 			</XSection>
 		</div>
 		<div v-once class="group">
 			<header class="_acrylic">{{ i18n.ts.emoji }}</header>
-			<XSection v-for="category in categories" :key="category" :emojis="emojiCharByCategory.get(category) ?? []" @chosen="chosen">{{ category }}</XSection>
+			<XSection v-for="category in categories" :key="category" :emojis="emojiCharByCategory.get(category) ?? []" :hasChildSection="false" @chosen="chosen">{{ category }}</XSection>
 		</div>
 	</div>
 	<div class="tabs">
@@ -100,7 +102,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { ref, shallowRef, computed, watch, onMounted } from 'vue';
 import * as Misskey from 'misskey-js';
 import XSection from '@/components/MkEmojiPicker.section.vue';
-import { emojilist, emojiCharByCategory, UnicodeEmojiDef, unicodeEmojiCategories as categories, getEmojiName } from '@/scripts/emojilist.js';
+import {
+  emojilist,
+  emojiCharByCategory,
+  UnicodeEmojiDef,
+  unicodeEmojiCategories as categories,
+  getEmojiName,
+  CustomEmojiFolderTree
+} from '@/scripts/emojilist.js';
 import MkRippleEffect from '@/components/MkRippleEffect.vue';
 import * as os from '@/os.js';
 import { isTouchUsing } from '@/scripts/touch.js';
@@ -144,6 +153,35 @@ const searchResultCustom = ref<Misskey.entities.CustomEmoji[]>([]);
 const searchResultUnicode = ref<UnicodeEmojiDef[]>([]);
 const tab = ref<'index' | 'custom' | 'unicode' | 'tags'>('index');
 
+const customEmojiFolderRoot: CustomEmojiFolderTree = { value: "", category: "", children: [] };
+
+function parseAndMergeCategories(input: string, root: CustomEmojiFolderTree): CustomEmojiFolderTree {
+	const parts = input.split('/').map(p => p.trim());
+	let currentNode: CustomEmojiFolderTree = root;
+
+	for (const part of parts) {
+		let existingNode = currentNode.children.find((node) => node.value === part);
+
+		if (!existingNode) {
+			const newNode: CustomEmojiFolderTree = { value: part, category: input, children: [] };
+			currentNode.children.push(newNode);
+			existingNode = newNode;
+		}
+
+		currentNode = existingNode;
+	}
+
+	return currentNode;
+}
+
+customEmojiCategories.value.forEach(ec => {
+  if (ec !== null) {
+    parseAndMergeCategories(ec, customEmojiFolderRoot);
+  }
+});
+
+parseAndMergeCategories('', customEmojiFolderRoot);
+
 watch(q, () => {
 	if (emojisEl.value) emojisEl.value.scrollTop = 0;
 
@@ -572,8 +610,7 @@ defineExpose({
 				position: sticky;
 				top: 0;
 				left: 0;
-				height: 32px;
-				line-height: 32px;
+				line-height: 28px;
 				z-index: 1;
 				padding: 0 8px;
 				font-size: 12px;
diff --git a/packages/frontend/src/scripts/emojilist.ts b/packages/frontend/src/scripts/emojilist.ts
index 4159da84c8..8885bf4b7f 100644
--- a/packages/frontend/src/scripts/emojilist.ts
+++ b/packages/frontend/src/scripts/emojilist.ts
@@ -43,3 +43,9 @@ export function getEmojiName(char: string): string | null {
 		return emojilist[idx].name;
 	}
 }
+
+export interface CustomEmojiFolderTree {
+	value: string;
+	category: string;
+	children: CustomEmojiFolderTree[];
+}