絵文字ピッカーのカテゴリのフォルダ分けの条件の変更・長いカテゴリ名の表示調整・セクションの背景の追加 (MisskeyIO#204)

* ネストした場合にパネルでどこまでがどのフォルダのものかをわかりやすくした
Co-authored-by: meronmks <meronmks.8914@gmail.com>

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

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <!-- このコンポーネントの要素のclassは親から利用されるのでむやみに弄らないこと -->
 <!-- フォルダの中にはカスタム絵文字だけ（Unicode絵文字もこっち） -->
-<section v-if="!hasChildSection">
+<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> (<i class="ti ti-icons"></i>:{{ emojis.length }})
 	</header>
@@ -25,21 +25,21 @@ SPDX-License-Identifier: AGPL-3.0-only
 	</div>
 </section>
 <!-- フォルダの中にはカスタム絵文字やフォルダがある -->
-<section v-else>
+<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"></i>:{{ customEmojiTree.length }} <i class="ti ti-icons"></i>:{{ emojis.length }})
   </header>
   <div v-if="shown" style="padding-left: 9px;">
     <MkEmojiPickerSection
         v-for="child in customEmojiTree"
-        :key="`custom:${child.value}`"
+        :key="`custom:${child.category}`"
         :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 }}
+      {{ child.category || i18n.ts.other }}
     </MkEmojiPickerSection>
   </div>
   <div v-if="shown" class="body">

packages/frontend/src/components/MkEmojiPicker.vue

@@ -74,14 +74,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<header class="_acrylic">{{ i18n.ts.customEmojis }}</header>
 			<XSection
 				v-for="child in customEmojiFolderRoot.children"
-				:key="`custom:${child.value}`"
+				:key="`custom:${child.category}`"
 				:initialShown="false"
-				:emojis="computed(() => customEmojis.filter(e => child.value === '' ? (e.category === 'null' || !e.category) : e.category === child.value).filter(filterAvailable).map(e => `:${e.name}:`))"
+				:emojis="computed(() => customEmojis.filter(e => child.category === '' ? (e.category === 'null' || !e.category) : e.category === child.category).filter(filterAvailable).map(e => `:${e.name}:`))"
         :hasChildSection="child.children.length !== 0"
         :customEmojiTree="child.children"
 				@chosen="chosen"
 			>
-				{{ child.value || i18n.ts.other }}
+				{{ child.category || i18n.ts.other }}
 			</XSection>
 		</div>
 		<div v-once class="group">
@@ -153,20 +153,19 @@ const searchResultCustom = ref<Misskey.entities.CustomEmoji[]>([]);
 const searchResultUnicode = ref<UnicodeEmojiDef[]>([]);
 const tab = ref<'index' | 'custom' | 'unicode' | 'tags'>('index');
 
-const customEmojiFolderRoot: CustomEmojiFolderTree = { value: "", category: "", children: [] };
+const customEmojiFolderRoot: CustomEmojiFolderTree = { category: "", children: [] };
 
 function parseAndMergeCategories(input: string, root: CustomEmojiFolderTree): CustomEmojiFolderTree {
 	const parts = (input && input !== 'null' ? input : '').split(' / ');
 	let currentNode: CustomEmojiFolderTree = root;
 
 	for (const part of parts) {
-		const path = currentNode.value ? `${currentNode.value}/${part.trim()}` : part.trim();
+		const path = currentNode.category ? `${currentNode.category} / ${part}` : part;
 
-		let existingNode = currentNode.children.find((node) => node.value === path);
+		let existingNode = currentNode.children.find((node) => node.category === path);
 		if (!existingNode) {
 			const newNode: CustomEmojiFolderTree = {
-				value: path,
+				category: path,
-				category: currentNode.category ? `${currentNode.category}/${part}` : part,
 				children: [],
 			};
 			currentNode.children.push(newNode);
@@ -616,8 +615,7 @@ defineExpose({
 				position: sticky;
 				top: 0;
 				left: 0;
-				height: 32px;
+				line-height: 28px;
-				line-height: 32px;
 				z-index: 1;
 				padding: 0 8px;
 				font-size: 12px;

packages/frontend/src/scripts/emojilist.ts

@@ -45,7 +45,6 @@ export function getEmojiName(char: string): string | null {
 }
 
 export interface CustomEmojiFolderTree {
-	value: string;
 	category: string;
 	children: CustomEmojiFolderTree[];
 }