Improve emoticon picker UI

locales/index.d.ts

@@ -11378,6 +11378,44 @@ export interface Locale extends ILocale {
      * Sort key
      */
     "sortKey": string;
+    "_unicodeEmoji": {
+        /**
+         * Smileys
+         */
+        "face": string;
+        /**
+         * People
+         */
+        "people": string;
+        /**
+         * Animals & nature
+         */
+        "animals_and_nature": string;
+        /**
+         * Food & drink
+         */
+        "food_and_drink": string;
+        /**
+         * Activity
+         */
+        "activity": string;
+        /**
+         * Travel & places
+         */
+        "travel_and_places": string;
+        /**
+         * Objects
+         */
+        "objects": string;
+        /**
+         * Symbols
+         */
+        "symbols": string;
+        /**
+         * Flags
+         */
+        "flags": string;
+    };
 }
 declare const locales: {
     [lang: string]: Locale;

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

@@ -6,9 +6,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <!-- このコンポーネントの要素のclassは親から利用されるのでむやみに弄らないこと -->
 <!-- フォルダの中にはカスタム絵文字だけ（Unicode絵文字もこっち） -->
-<section v-if="!hasChildSection" v-panel style="border-radius: var(--radius-sm); 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="ph-smiley-sticker ph-bold ph-lg"></i>:{{ emojis.length }})
+<section v-if="!hasChildSection" :data-shown="shown" v-panel style="border-radius: var(--radius-sm); border-bottom: 0.5px solid var(--divider);">
+	<header class="_acrylic" :data-shown="shown" @click="shown = !shown">
+		<i class="toggle ti-fw" :class="shown ? 'ph-bold ph-caret-down' : 'ph-bold ph-caret-right'"></i> <slot></slot>
+		<span class="emoji-count"><i class="ph-smiley ph-bold ph-lg"></i> {{ emojis.length }}</span>
 	</header>
 	<div v-if="shown" class="body">
 		<button
@@ -26,9 +27,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 	</div>
 </section>
 <!-- フォルダの中にはカスタム絵文字やフォルダがある -->
-<section v-else v-panel style="border-radius: var(--radius-sm); 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="ph-smiley-sticker ph-bold ph-lg ti-fw"></i>:{{ emojis.length }})
+<section v-else v-panel :data-shown="shown" style="border-radius: var(--radius-sm); border-bottom: 0.5px solid var(--divider);">
+	<header class="_acrylic" :data-shown="shown" @click="shown = !shown">
+		<i class="toggle ti-fw" :class="shown ? 'ph-bold ph-caret-down' : 'ph-bold ph-caret-right'"></i> <slot></slot>
+		<span class="emoji-count"><i class="ph-folder ph-bold"></i> {{ customEmojiTree?.length }}</span>
+		<span class="emoji-count" v-if="emojis.length > 0"><i class="ph-smiley ph-bold"></i> {{ emojis.length }}</span>
 	</header>
 	<div v-if="shown" style="padding-left: 9px;">
 		<MkEmojiPickerSection
@@ -43,7 +46,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			{{ child.value || i18n.ts.other }}
 		</MkEmojiPickerSection>
 	</div>
-	<div v-if="shown" class="body">
+	<div v-if="shown && emojis.length > 0" class="body">
 		<button
 			v-for="emoji in emojis"
 			:key="emoji"

packages/frontend/src/components/MkEmojiPicker.vue

@@ -102,7 +102,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</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) ?? []" :hasChildSection="false" @chosen="chosen">{{ category }}</XSection>
+			<XSection v-for="category in categories" :key="category" :emojis="emojiCharByCategory.get(category) ?? []" :hasChildSection="false" @chosen="chosen">{{ i18n.ts._unicodeEmoji[category] ?? category }}</XSection>
 		</div>
 	</div>
 	<div class="tabs">
@@ -503,6 +503,8 @@ defineExpose({
 
 	display: flex;
 	flex-direction: column;
+	/* Required to make header background blur work */
+	contain: layout style;
 
 	&.s1 {
 		--eachSize: 40px;
@@ -700,18 +702,34 @@ defineExpose({
 
 		::v-deep(section) {
 			> header {
-				position: sticky;
 				top: 0;
 				left: 0;
 				line-height: 28px;
-				z-index: 1;
 				padding: 0 8px;
 				font-size: 12px;
 				cursor: pointer;
 
+				/* Closed sections should not have sticky headers. */
+				&:not([data-shown=false]) {
+					position: sticky;
+					z-index: 1;
+				}
+
 				&:hover {
 					color: var(--accent);
 				}
+
+				> .emoji-count {
+					float: right;
+					margin-left: 8px;
+					color: var(--fgTransparent);
+				}
+			}
+
+			/* Open subsections should have a z-index above the parent's header. This prevents the blur effect from getting muddy. */
+			&[data-shown=true] {
+				position: relative;
+				z-index: 2;
 			}
 
 			> .body {

sharkey-locales/en-US.yml

@@ -399,3 +399,14 @@ _announcement:
   new: "New"
 
 sortKey: "Sort key"
+
+_unicodeEmoji:
+  face: "Smileys"
+  people: "People"
+  animals_and_nature: "Animals & nature"
+  food_and_drink: "Food & drink"
+  activity: "Activity"
+  travel_and_places: "Travel & places"
+  objects: "Objects"
+  symbols: "Symbols"
+  flags: "Flags"