From c29ec98e3bdfecbe0aebc2ee352b53480d73b3c6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=81=BE=E3=81=A3=E3=81=A1=E3=82=83=E3=81=A8=E3=83=BC?=
 =?UTF-8?q?=E3=81=AB=E3=82=85?=
 <17376330+u1-liquid@users.noreply.github.com>
Date: Fri, 3 Nov 2023 01:54:47 +0900
Subject: [PATCH] =?UTF-8?q?=E7=B5=B5=E6=96=87=E5=AD=97=E3=83=94=E3=83=83?=
 =?UTF-8?q?=E3=82=AB=E3=83=BC=E3=81=AE=E3=82=AB=E3=83=86=E3=82=B4=E3=83=AA?=
 =?UTF-8?q?=E3=81=AE=E3=83=95=E3=82=A9=E3=83=AB=E3=83=80=E5=88=86=E3=81=91?=
 =?UTF-8?q?=E3=81=AE=E6=9D=A1=E4=BB=B6=E3=81=AE=E5=A4=89=E6=9B=B4=E3=83=BB?=
 =?UTF-8?q?=E9=95=B7=E3=81=84=E3=82=AB=E3=83=86=E3=82=B4=E3=83=AA=E5=90=8D?=
 =?UTF-8?q?=E3=81=AE=E8=A1=A8=E7=A4=BA=E8=AA=BF=E6=95=B4=E3=83=BB=E3=82=BB?=
 =?UTF-8?q?=E3=82=AF=E3=82=B7=E3=83=A7=E3=83=B3=E3=81=AE=E8=83=8C=E6=99=AF?=
 =?UTF-8?q?=E3=81=AE=E8=BF=BD=E5=8A=A0=20(MisskeyIO#204)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* ネストした場合にパネルでどこまでがどのフォルダのものかをわかりやすくした
Co-authored-by: meronmks <meronmks.8914@gmail.com>
---
 .../src/components/MkEmojiPicker.section.vue  |  8 ++++----
 .../frontend/src/components/MkEmojiPicker.vue | 20 +++++++++----------
 packages/frontend/src/scripts/emojilist.ts    |  1 -
 3 files changed, 13 insertions(+), 16 deletions(-)

diff --git a/packages/frontend/src/components/MkEmojiPicker.section.vue b/packages/frontend/src/components/MkEmojiPicker.section.vue
index 6f99fa9200..c745c6b3fa 100644
--- a/packages/frontend/src/components/MkEmojiPicker.section.vue
+++ b/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">
diff --git a/packages/frontend/src/components/MkEmojiPicker.vue b/packages/frontend/src/components/MkEmojiPicker.vue
index 9ebd352170..df74571415 100644
--- a/packages/frontend/src/components/MkEmojiPicker.vue
+++ b/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('/');
+	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: currentNode.category ? `${currentNode.category}/${part}` : part,
+				category: path,
 				children: [],
 			};
 			currentNode.children.push(newNode);
@@ -616,8 +615,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 8885bf4b7f..0e5f4f0c0b 100644
--- a/packages/frontend/src/scripts/emojilist.ts
+++ b/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[];
 }