Feat:emoji picker folder select

locales/en-US.yml

@@ -311,6 +311,7 @@ folderName: "Folder name"
 createFolder: "Create a folder"
 renameFolder: "Rename this folder"
 deleteFolder: "Delete this folder"
+Folder: "Folder"
 addFile: "Add a file"
 emptyDrive: "Your Drive is empty"
 emptyFolder: "This folder is empty"

locales/index.d.ts

@@ -314,6 +314,7 @@ export interface Locale {
     "createFolder": string;
     "renameFolder": string;
     "deleteFolder": string;
+    "Folder": string;
     "addFile": string;
     "emptyDrive": string;
     "emptyFolder": string;

locales/ja-JP.yml

@@ -311,6 +311,7 @@ folderName: "フォルダー名"
 createFolder: "フォルダーを作成"
 renameFolder: "フォルダー名を変更"
 deleteFolder: "フォルダーを削除"
+Folder: "フォルダー"
 addFile: "ファイルを追加"
 emptyDrive: "ドライブは空です"
 emptyFolder: "フォルダーは空です"

packages/frontend/src/components/MkEmojiPicker.section.vue

@@ -5,7 +5,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <!-- このコンポーネントの要素のclassは親から利用されるのでむやみに弄らないこと -->
-<section>
+<!-- フォルダの中にはカスタム絵文字だけ（Unicode絵文字もこっち） -->
+<section v-if="!isChildrenExits">
 	<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 }})
 	</header>
@@ -23,15 +24,54 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</button>
 	</div>
 </section>
+<!-- フォルダの中にはカスタム絵文字やフォルダがある -->
+<section v-else>
+  <header class="_acrylic" @click="shown = !shown">
+    <i class="toggle ti-fw" :class="shown ? 'ti ti-chevron-down' : 'ti ti-chevron-up'"></i> <slot></slot> ({{ i18n.ts.Folder }} : {{customEmojiTree.length}} {{ i18n.ts.customEmojis}} : {{emojis.length}})
+  </header>
+  <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>
+  <div v-if="shown" style="padding-left: 18px;">
+    <!-- TODO: 再帰へのイベントの渡し方が微妙なのか反応はするがエフェクトが出ない -->
+    <MkEmojiPickerSection
+        v-if="shown"
+        v-for="child in customEmojiTree"
+        :key="`custom:${child.value}`"
+        :initialShown="initialShown"
+        :emojis="computed(() => customEmojis.filter(e => e.category === child.category).map(e => `:${e.name}:`))"
+        :isChildrenExits="child.children.length!==0"
+        :customEmojiTree="child.children"
+        @chosen="emit('chosen', $event)"
+    >
+      {{ child.value }}
+    </MkEmojiPickerSection>
+  </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;
+  isChildrenExits?: boolean;
+  customEmojiTree?: CustomEmojiFolderTree[];
 }>();
 
 const emit = defineEmits<{
@@ -48,5 +88,4 @@ function computeButtonTitle(ev: MouseEvent): void {
 	const emoji = elm.dataset.emoji as string;
 	elm.title = getEmojiName(emoji) ?? emoji;
 }
-
 </script>

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 === i18n.ts.other ? (e.category === 'null' || !e.category) : e.category === child.value).filter(filterAvailable).map(e => `:${e.name}:`))"
+        :isChildrenExits="child.children.length!==0"
+        :customEmojiTree="child.children"
 				@chosen="chosen"
 			>
-				{{ category || i18n.ts.other }}
+				{{ child.value }}
 			</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) ?? []" :isChildrenExits="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,43 @@ 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('/');
+  var category = ""
+  let currentNode: CustomEmojiFolderTree = root;
+
+  for (const part of parts) {
+    if (part) {
+      category += `/${part}`;
+      category = category.replace(/^\//, '');
+      let existingNode = currentNode.children.find((node) => node.value === part);
+
+      if (!existingNode) {
+        const newNode: CustomEmojiFolderTree = { value: part, category, children: [] };
+        currentNode.children.push(newNode);
+        existingNode = newNode;
+      }
+
+      currentNode = existingNode;
+    }
+  }
+
+  return currentNode;
+}
+
+customEmojiCategories.value.forEach(e => {
+  if (e !== null){
+    parseAndMergeCategories(e, customEmojiFolderRoot);
+  }
+});
+
+parseAndMergeCategories(i18n.ts.other, customEmojiFolderRoot);
+
+console.log(customEmojiFolderRoot)
+
 watch(q, () => {
 	if (emojisEl.value) emojisEl.value.scrollTop = 0;
 

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[];
+}