From e9ffc0192966f529d8c6d511ebb293a3fe517140 Mon Sep 17 00:00:00 2001
From: mattyatea <mattyatea@pm.me>
Date: Wed, 6 Mar 2024 13:46:27 +0900
Subject: [PATCH] a

---
 .../frontend/src/components/MkEmojiPicker.vue | 180 +++++++++---------
 1 file changed, 90 insertions(+), 90 deletions(-)

diff --git a/packages/frontend/src/components/MkEmojiPicker.vue b/packages/frontend/src/components/MkEmojiPicker.vue
index 7d1aed4949..cbfb3294ac 100644
--- a/packages/frontend/src/components/MkEmojiPicker.vue
+++ b/packages/frontend/src/components/MkEmojiPicker.vue
@@ -4,107 +4,107 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-	<div class="omfetrab" :class="['s' + size, 'w' + width, 'h' + height, { asDrawer, asWindow }]" :style="{ maxHeight: maxHeight ? maxHeight + 'px' : undefined }">
-		<input ref="searchEl" :value="q" class="search" data-prevent-emoji-insert :class="{ filled: q != null && q != '' }" :placeholder="i18n.ts.search" type="search" autocapitalize="off" @input="input()" @paste.stop="paste" @keydown.stop.prevent.enter="onEnter">
-		<!-- FirefoxのTabフォーカスが想定外の挙動となるためtabindex="-1"を追加 https://github.com/misskey-dev/misskey/issues/10744 -->
-		<div ref="emojisEl" class="emojis" tabindex="-1">
-			<section class="result">
-				<div v-if="searchResultCustom.length > 0" class="body">
+<div class="omfetrab" :class="['s' + size, 'w' + width, 'h' + height, { asDrawer, asWindow }]" :style="{ maxHeight: maxHeight ? maxHeight + 'px' : undefined }">
+	<input ref="searchEl" :value="q" class="search" data-prevent-emoji-insert :class="{ filled: q != null && q != '' }" :placeholder="i18n.ts.search" type="search" autocapitalize="off" @input="input()" @paste.stop="paste" @keydown.stop.prevent.enter="onEnter">
+	<!-- FirefoxのTabフォーカスが想定外の挙動となるためtabindex="-1"を追加 https://github.com/misskey-dev/misskey/issues/10744 -->
+	<div ref="emojisEl" class="emojis" tabindex="-1">
+		<section class="result">
+			<div v-if="searchResultCustom.length > 0" class="body">
+				<button
+					v-for="emoji in searchResultCustom"
+					:key="emoji.name"
+					class="_button item"
+					:disabled="!canReact(emoji)"
+					:title="emoji.name"
+					tabindex="0"
+					@click="chosen(emoji, $event)"
+				>
+					<MkCustomEmoji class="emoji" :name="emoji.name" :fallbackToImage="true"/>
+				</button>
+			</div>
+			<div v-if="searchResultUnicode.length > 0" class="body">
+				<button
+					v-for="emoji in searchResultUnicode"
+					:key="emoji.name"
+					class="_button item"
+					:title="emoji.name"
+					tabindex="0"
+					@click="chosen(emoji, $event)"
+				>
+					<MkEmoji class="emoji" :emoji="emoji.char"/>
+				</button>
+			</div>
+		</section>
+
+		<div v-if="tab === 'index'" class="group index">
+			<section v-if="showPinned">
+				<div style="display: flex; ">
+					<div v-for="a in profileMax" :key="a" :title="defaultStore.state[`pickerProfileName${a > 1 ? a - 1 : ''}`]" class="sllfktkhgl" :class="{ active: activeIndex === a || isDefaultProfile === a }" @click="pinnedProfileSelect(a)">
+						{{ defaultStore.state[`pickerProfileName${a > 1 ? a - 1 : ''}`] }}
+					</div>
+				</div>
+				<div class="body">
 					<button
-						v-for="emoji in searchResultCustom"
-						:key="emoji.name"
+						v-for="emoji in pinnedEmojisDef"
+						:key="getKey(emoji)"
+						:data-emoji="getKey(emoji)"
 						class="_button item"
 						:disabled="!canReact(emoji)"
-					:title="emoji.name"
 						tabindex="0"
+						@pointerenter="computeButtonTitle"
 						@click="chosen(emoji, $event)"
 					>
-						<MkCustomEmoji class="emoji" :name="emoji.name" :fallbackToImage="true"/>
-					</button>
-				</div>
-				<div v-if="searchResultUnicode.length > 0" class="body">
-					<button
-						v-for="emoji in searchResultUnicode"
-						:key="emoji.name"
-						class="_button item"
-						:title="emoji.name"
-						tabindex="0"
-						@click="chosen(emoji, $event)"
-					>
-						<MkEmoji class="emoji" :emoji="emoji.char"/>
+						<MkCustomEmoji v-if="!emoji.hasOwnProperty('char')" class="emoji" :name="getKey(emoji)" :normal="true"/>
+						<MkEmoji v-else class="emoji" :emoji="getKey(emoji)" :normal="true"/>
 					</button>
 				</div>
 			</section>
 
-			<div v-if="tab === 'index'" class="group index">
-				<section v-if="showPinned && (pinned && pinned.length > 0)">
-					<div style="display: flex; ">
-						<div v-for="a in profileMax" :key="a" :title="defaultStore.state[`pickerProfileName${a > 1 ? a - 1 : ''}`]" class="sllfktkhgl" :class="{ active: activeIndex === a || isDefaultProfile === a }" @click="pinnedProfileSelect(a)">
-							{{ defaultStore.state[`pickerProfileName${a > 1 ? a - 1 : ''}`] }}
-						</div>
-					</div>
-					<div class="body">
-						<button
-							v-for="emoji in pinnedEmojisDef"
-							:key="getKey(emoji)"
-							:data-emoji="getKey(emoji)"
-							class="_button item"
-							:disabled="!canReact(emoji)"
-							tabindex="0"
-							@pointerenter="computeButtonTitle"
-							@click="chosen(emoji, $event)"
-						>
-							<MkCustomEmoji v-if="!emoji.hasOwnProperty('char')" class="emoji" :name="getKey(emoji)" :normal="true"/>
-							<MkEmoji v-else class="emoji" :emoji="getKey(emoji)" :normal="true"/>
-						</button>
-					</div>
-				</section>
-
-				<section>
-					<header class="_acrylic"><i class="ti ti-clock ti-fw"></i> {{ i18n.ts.recentUsed }}</header>
-					<div class="body">
-						<button
-							v-for="emoji in recentlyUsedEmojisDef"
-							:key="getKey(emoji)"
-							class="_button item"
+			<section>
+				<header class="_acrylic"><i class="ti ti-clock ti-fw"></i> {{ i18n.ts.recentUsed }}</header>
+				<div class="body">
+					<button
+						v-for="emoji in recentlyUsedEmojisDef"
+						:key="getKey(emoji)"
+						class="_button item"
 						:disabled="!canReact(emoji)"
-							:data-emoji="getKey(emoji)"
-							@pointerenter="computeButtonTitle"
-							@click="chosen(emoji, $event)"
-						>
-							<MkCustomEmoji v-if="!emoji.hasOwnProperty('char')" class="emoji" :name="getKey(emoji)" :normal="true"/>
-							<MkEmoji v-else class="emoji" :emoji="getKey(emoji)" :normal="true"/>
-						</button>
-					</div>
-				</section>
-			</div>
-			<div v-once class="group">
-				<header class="_acrylic">{{ i18n.ts.customEmojis }}</header>
-				<XSection
-					v-for="child in customEmojiFolderRoot.children"
-					:key="`custom:${child.value}`"
-					:initialShown="false"
-					:emojis="computed(() => customEmojis.filter(e => filterCategory(e, child.value)).map(e => `:${e.name}:`))"
-				:disabledEmojis="computed(() => customEmojis.filter(e => filterCategory(e, child.value && !customEmojis.some(emoji => emoji.category !== null && emoji.category.includes(e.category+'/')) || e.category === child.category+'/'+child.category && !e.category)).filter(e => !canReact(e)).map(e => `:${e.name}:`))"
-					:hasChildSection="child.children.length !== 0"
-					:customEmojiTree="child.children"
-					@chosen="chosen"
-				>
-					{{ 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) ?? []" :hasChildSection="false" @chosen="chosen">{{ category }}</XSection>
-			</div>
+						:data-emoji="getKey(emoji)"
+						@pointerenter="computeButtonTitle"
+						@click="chosen(emoji, $event)"
+					>
+						<MkCustomEmoji v-if="!emoji.hasOwnProperty('char')" class="emoji" :name="getKey(emoji)" :normal="true"/>
+						<MkEmoji v-else class="emoji" :emoji="getKey(emoji)" :normal="true"/>
+					</button>
+				</div>
+			</section>
 		</div>
-		<div class="tabs">
-			<button class="_button tab" :class="{ active: tab === 'index' }" @click="tab = 'index'"><i class="ti ti-asterisk ti-fw"></i></button>
-			<button class="_button tab" :class="{ active: tab === 'custom' }" @click="tab = 'custom'"><i class="ti ti-mood-happy ti-fw"></i></button>
-			<button class="_button tab" :class="{ active: tab === 'unicode' }" @click="tab = 'unicode'"><i class="ti ti-leaf ti-fw"></i></button>
-			<button class="_button tab" :class="{ active: tab === 'tags' }" @click="tab = 'tags'"><i class="ti ti-hash ti-fw"></i></button>
+		<div v-once class="group">
+			<header class="_acrylic">{{ i18n.ts.customEmojis }}</header>
+			<XSection
+				v-for="child in customEmojiFolderRoot.children"
+				:key="`custom:${child.value}`"
+				:initialShown="false"
+				:emojis="computed(() => customEmojis.filter(e => filterCategory(e, child.value)).map(e => `:${e.name}:`))"
+				:disabledEmojis="computed(() => customEmojis.filter(e => filterCategory(e, child.value && !customEmojis.some(emoji => emoji.category !== null && emoji.category.includes(e.category+'/')) || e.category === child.category+'/'+child.category && !e.category)).filter(e => !canReact(e)).map(e => `:${e.name}:`))"
+				:hasChildSection="child.children.length !== 0"
+				:customEmojiTree="child.children"
+				@chosen="chosen"
+			>
+				{{ 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) ?? []" :hasChildSection="false" @chosen="chosen">{{ category }}</XSection>
 		</div>
 	</div>
+	<div class="tabs">
+		<button class="_button tab" :class="{ active: tab === 'index' }" @click="tab = 'index'"><i class="ti ti-asterisk ti-fw"></i></button>
+		<button class="_button tab" :class="{ active: tab === 'custom' }" @click="tab = 'custom'"><i class="ti ti-mood-happy ti-fw"></i></button>
+		<button class="_button tab" :class="{ active: tab === 'unicode' }" @click="tab = 'unicode'"><i class="ti ti-leaf ti-fw"></i></button>
+		<button class="_button tab" :class="{ active: tab === 'tags' }" @click="tab = 'tags'"><i class="ti ti-hash ti-fw"></i></button>
+	</div>
+</div>
 </template>
 
 <script lang="ts" setup>
@@ -130,8 +130,8 @@ import { customEmojiCategories, customEmojis, customEmojisMap } from '@/custom-e
 import { signinRequired } from '@/account.js';
 import { checkReactionPermissions } from '@/scripts/check-reaction-permissions.js';
 import { deepClone } from '@/scripts/clone.js';
-import MkCustomEmoji from "@/components/global/MkCustomEmoji.vue";
-import MkEmoji from "@/components/global/MkEmoji.vue";
+import MkCustomEmoji from '@/components/global/MkCustomEmoji.vue';
+import MkEmoji from '@/components/global/MkEmoji.vue';
 const $i = signinRequired();
 const props = withDefaults(defineProps<{
 	showPinned?: boolean;
@@ -163,7 +163,7 @@ const recentlyUsedEmojisDef = computed(() => {
 	return recentlyUsedEmojis.value.map(getDef);
 });
 const pinnedEmojisDef = computed(() => {
-	return pinned.value?.map(getDef);
+	return pinnedEmojis.value?.map(getDef);
 });
 
 const pinned = computed(() => props.pinnedEmojis);