絵文字ピッカーのカテゴリの階層を表示するように・サブカテゴリを絵文字より上に (MisskeyIO#202)

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

@@ -29,19 +29,6 @@ SPDX-License-Identifier: AGPL-3.0-only
   <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"></i>:{{ customEmojiTree.length }} <i class="ti ti-icons"></i>:{{ 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: 9px;">
     <MkEmojiPickerSection
         v-for="child in customEmojiTree"
@@ -55,6 +42,19 @@ SPDX-License-Identifier: AGPL-3.0-only
       {{ 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>
 

packages/frontend/src/components/MkEmojiPicker.vue

@@ -156,13 +156,19 @@ 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());
+	const parts = (input && input !== 'null' ? input : '').split('/');
 	let currentNode: CustomEmojiFolderTree = root;
 
 	for (const part of parts) {
-		let existingNode = currentNode.children.find((node) => node.value === part);
+		const path = currentNode.value ? `${currentNode.value}/${part.trim()}` : part.trim();
+
+		let existingNode = currentNode.children.find((node) => node.value === path);
 		if (!existingNode) {
-			const newNode: CustomEmojiFolderTree = { value: part, category: input, children: [] };
+			const newNode: CustomEmojiFolderTree = {
+				value: path,
+				category: currentNode.category ? `${currentNode.category}/${part}` : part,
+				children: [],
+			};
 			currentNode.children.push(newNode);
 			existingNode = newNode;
 		}