Merge pull request #12132 from misskey-dev/misskey

locales/en-US.yml

@@ -367,7 +367,6 @@ 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"

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

@@ -6,9 +6,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <!-- このコンポーネントの要素のclassは親から利用されるのでむやみに弄らないこと -->
 <!-- フォルダの中にはカスタム絵文字だけ（Unicode絵文字もこっち） -->
-<section v-if="!isChildrenExits">
+<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 ti-fw"></i>:{{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
@@ -25,10 +25,23 @@ 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 ti-fw"></i>:{{customEmojiTree.length}} <i class="ti ti-icons ti-fw"></i>:{{emojis.length}})
+    <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"
@@ -42,34 +55,21 @@ SPDX-License-Identifier: AGPL-3.0-only
       <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"
-        :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="nestedChosen"
-    >
-      {{ child.value }}
-    </MkEmojiPickerSection>
-  </div>
 </section>
 </template>
 
 <script lang="ts" setup>
 import { ref, computed, Ref } from 'vue';
 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";
+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[];
+	hasChildSection?: boolean;
+	customEmojiTree?: CustomEmojiFolderTree[];
 }>();
 
 const emit = defineEmits<{

packages/frontend/src/components/MkEmojiPicker.vue

@@ -77,17 +77,17 @@ SPDX-License-Identifier: AGPL-3.0-only
 				v-for="child in customEmojiFolderRoot.children"
 				:key="`custom:${child.value}`"
 				:initialShown="false"
-				: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"
+				: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"
 			>
-				{{ child.value }}
+				{{ 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) ?? []" :isChildrenExits="false" @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">
@@ -157,27 +157,22 @@ 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('/');
-  let category = "";
-  let currentNode: CustomEmojiFolderTree = root;
+	const parts = input.split('/').map(p => p.trim());
+	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);
+	for (const part of parts) {
+		let existingNode = currentNode.children.find((node) => node.value === part);
 
-      if (!existingNode) {
-        const newNode: CustomEmojiFolderTree = { value: part, category, children: [] };
-        currentNode.children.push(newNode);
-        existingNode = newNode;
-      }
+		if (!existingNode) {
+			const newNode: CustomEmojiFolderTree = { value: part, category: input, children: [] };
+			currentNode.children.push(newNode);
+			existingNode = newNode;
+		}
 
-      currentNode = existingNode;
-    }
-  }
+		currentNode = existingNode;
+	}
 
-  return currentNode;
+	return currentNode;
 }
 
 customEmojiCategories.value.forEach(ec => {
@@ -186,7 +181,7 @@ customEmojiCategories.value.forEach(ec => {
   }
 });
 
-parseAndMergeCategories(i18n.ts.other, customEmojiFolderRoot);
+parseAndMergeCategories('', customEmojiFolderRoot);
 
 watch(q, () => {
 	if (emojisEl.value) emojisEl.value.scrollTop = 0;
@@ -616,8 +611,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;