From 781cd5dd6de774a673b148f8507ed51388363ce6 Mon Sep 17 00:00:00 2001
From: mattyatea <mattyacocacora0@gmail.com>
Date: Wed, 18 Oct 2023 23:21:14 +0900
Subject: [PATCH] fix

---
 .../src/components/MkEmojiPicker.section.vue  |  20 +-
 .../frontend/src/components/MkEmojiPicker.vue | 997 +++++++++---------
 2 files changed, 496 insertions(+), 521 deletions(-)

diff --git a/packages/frontend/src/components/MkEmojiPicker.section.vue b/packages/frontend/src/components/MkEmojiPicker.section.vue
index 3be1b2bf37..dc5708f0e8 100644
--- a/packages/frontend/src/components/MkEmojiPicker.section.vue
+++ b/packages/frontend/src/components/MkEmojiPicker.section.vue
@@ -6,14 +6,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
     <!-- このコンポーネントの要素のclassは親から利用されるのでむやみに弄らないこと -->
     <section>
-        <!-- categoryが定義されてない(Unicodeの絵文字とか) -->
+
+
         <header v-if="!category" class="_acrylic" @click="shown = !shown">
             <i class="toggle ti-fw" :class="shown ? 'ti ti-chevron-down' : 'ti ti-chevron-up'"></i>
             <slot></slot>
             ({{ emojis.length }})
         </header>
-
-        <!-- categoryが定義されてるけど中身が1つしかない -->
         <header v-else-if="category.length === 1" class="_acrylic" @click="shown = !shown">
             <i class="toggle ti-fw" :class="shown ? 'ti ti-chevron-down' : 'ti ti-chevron-up'"></i>
             {{ category[0] }}
@@ -21,8 +20,6 @@ SPDX-License-Identifier: AGPL-3.0-only
                 emojis.filter(e => category === null ? (e.category === 'null' || !e.category) : e.category === category[0]).length
             }})
         </header>
-
-        <!-- categoryに1つ以上要素がある(フォルダが有る) -->
         <header v-else class="_acrylic" style="top:unset;" @click="toggleShown_fol">
             <i class="toggle ti-fw" :class="shown_fol? 'ti ti-chevron-down' : 'ti ti-chevron-up'"></i>
             {{ category[0] || i18n.ts.other }}
@@ -32,16 +29,13 @@ SPDX-License-Identifier: AGPL-3.0-only
             <template v-else>
                 ({{
                     emojis.filter(e => category === null ? (e.category === 'null' || !e.category) : e.category === category[0]).length
-                }})
+                }}) 2
             </template>
         </header>
-        <!-- フォルダが有るときのフォルダと絵文字表示する部分 -->
         <template v-for="(n, index) in category" v-if="shown_fol">
-
-            <!-- フォルダの部分 -->
             <header
                     v-if="emojis.filter(e => category === null ? (e.category === 'null' || !e.category) : e.category === category[0]).length !== 0 || index!==0"
-                    style="padding-left: 18px;"
+                    style="top:unset;padding-left: 18px;"
                     class="_acrylic"
                     @click="toggleShown(index)"
             >
@@ -51,8 +45,6 @@ SPDX-License-Identifier: AGPL-3.0-only
                     emojis.filter(e => category === null ? (e.category === 'null' || !e.category) : e.category === (index === 0 && category !== undefined ? category[0] : `${category[0]}/${n}`)).length
                 }})
             </header>
-
-            <!-- 絵文字の部分 -->
             <div v-if="shown_fold[index]" class="body">
                 <button
                         v-for="emoji in emojis.filter(e => category === null ? (e.category === 'null' || !e.category) : e.category ===( index === 0 && category !== undefined ? category[0] : `${category[0]}/${n}`)).map(e => `:${e.name}:`)"
@@ -68,7 +60,6 @@ SPDX-License-Identifier: AGPL-3.0-only
             </div>
         </template>
 
-        <!-- categoryが1つしかないときのフォルダと絵文字表示する部分 -->
         <div v-if="shown && category" class="body">
             <button
                     v-for="emoji in emojis.filter(e => e.category === category[0]).map(e => `:${e.name}:`)"
@@ -82,8 +73,6 @@ SPDX-License-Identifier: AGPL-3.0-only
                 <MkEmoji v-else class="emoji" :emoji="emoji" :normal="true"/>
             </button>
         </div>
-
-        <!-- Unicodeのやつ -->
         <div v-else-if="shown && !category" class="body">
             <button
                     v-for="emoji in emojis"
@@ -118,6 +107,7 @@ const emit = defineEmits<{
 
 const toggleShown = (index) => {
     shown_fold.value[index] = !shown_fold.value[index];
+
 };
 
 const toggleShown_fol = () => {
diff --git a/packages/frontend/src/components/MkEmojiPicker.vue b/packages/frontend/src/components/MkEmojiPicker.vue
index 981ea2f8c9..4d9bd29d37 100644
--- a/packages/frontend/src/components/MkEmojiPicker.vue
+++ b/packages/frontend/src/components/MkEmojiPicker.vue
@@ -4,103 +4,103 @@ 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" @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"
-					:title="emoji.name"
-					tabindex="0"
-					@click="chosen(emoji, $event)"
-				>
-					<MkCustomEmoji class="emoji" :name="emoji.name"/>
-				</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 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" @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"
+                            :title="emoji.name"
+                            tabindex="0"
+                            @click="chosen(emoji, $event)"
+                    >
+                        <MkCustomEmoji class="emoji" :name="emoji.name"/>
+                    </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 class="body">
-					<button
-						v-for="emoji in pinned"
-						:key="emoji"
-						:data-emoji="emoji"
-						class="_button item"
-						tabindex="0"
-						@pointerenter="computeButtonTitle"
-						@click="chosen(emoji, $event)"
-					>
-						<MkCustomEmoji v-if="emoji[0] === ':'" class="emoji" :name="emoji" :normal="true"/>
-						<MkEmoji v-else class="emoji" :emoji="emoji" :normal="true"/>
-					</button>
-				</div>
-			</section>
+            <div v-if="tab === 'index'" class="group index">
+                <section v-if="showPinned">
+                    <div class="body">
+                        <button
+                                v-for="emoji in pinned"
+                                :key="emoji"
+                                :data-emoji="emoji"
+                                class="_button item"
+                                tabindex="0"
+                                @pointerenter="computeButtonTitle"
+                                @click="chosen(emoji, $event)"
+                        >
+                            <MkCustomEmoji v-if="emoji[0] === ':'" class="emoji" :name="emoji" :normal="true"/>
+                            <MkEmoji v-else class="emoji" :emoji="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 recentlyUsedEmojis"
-						:key="emoji"
-						class="_button item"
-						:data-emoji="emoji"
-						@pointerenter="computeButtonTitle"
-						@click="chosen(emoji, $event)"
-					>
-						<MkCustomEmoji v-if="emoji[0] === ':'" class="emoji" :name="emoji" :normal="true"/>
-						<MkEmoji v-else class="emoji" :emoji="emoji" :normal="true"/>
-					</button>
-				</div>
-			</section>
-		</div>
-		<div v-once class="group">
-			<header class="_acrylic">{{ i18n.ts.customEmojis }}</header>
-			<XSection
-				v-for="category in groupedData"
-				:key="`custom:${category}`"
-				:initialShown="false"
-				:emojis="computed(() => customEmojis.filter(emoji => !emoji.draft).filter(e => category === null ? (e.category === 'null' || !e.category) : e.category === category).filter(filterAvailable).map(e => `:${e.name}:`))"
-				@chosen="chosen"
-			>
-				{{ category || 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) ?? []"
-				@chosen="chosen"
-			>{{ category }}
-			</XSection>
+                <section>
+                    <header class="_acrylic"><i class="ti ti-clock ti-fw"></i> {{ i18n.ts.recentUsed }}</header>
+                    <div class="body">
+                        <button
+                                v-for="emoji in recentlyUsedEmojis"
+                                :key="emoji"
+                                class="_button item"
+                                :data-emoji="emoji"
+                                @pointerenter="computeButtonTitle"
+                                @click="chosen(emoji, $event)"
+                        >
+                            <MkCustomEmoji v-if="emoji[0] === ':'" class="emoji" :name="emoji" :normal="true"/>
+                            <MkEmoji v-else class="emoji" :emoji="emoji" :normal="true"/>
+                        </button>
+                    </div>
+                </section>
+            </div>
+            <div v-once class="group">
+                <header class="_acrylic">{{ i18n.ts.customEmojis }}</header>
 
-		</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>
+                <XSection
+                        v-for="category in groupedData"
+                        :key="`custom:${category}`"
+                        :initialShown="false"
+                        :emojis="computed(() => customEmojis.filter(filterAvailable))"
+                        :category="category"
+                        @chosen="chosen"
+                />
+            </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) ?? []"
+                        @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>
@@ -118,29 +118,29 @@ import {customEmojiCategories, customEmojis, customEmojisMap} from '@/custom-emo
 import { $i } from '@/account.js';
 
 const props = withDefaults(defineProps<{
-	showPinned?: boolean;
-	asReactionPicker?: boolean;
-	maxHeight?: number;
-	asDrawer?: boolean;
-	asWindow?: boolean;
+    showPinned?: boolean;
+    asReactionPicker?: boolean;
+    maxHeight?: number;
+    asDrawer?: boolean;
+    asWindow?: boolean;
 }>(), {
-	showPinned: true,
+    showPinned: true,
 });
 
 const emit = defineEmits<{
-	(ev: 'chosen', v: string): void;
+    (ev: 'chosen', v: string): void;
 }>();
 
 const searchEl = shallowRef<HTMLInputElement>();
 const emojisEl = shallowRef<HTMLDivElement>();
 
 const {
-	reactions: pinned,
-	reactionPickerSize,
-	reactionPickerWidth,
-	reactionPickerHeight,
-	disableShowingAnimatedImages,
-	recentlyUsedEmojis,
+    reactions: pinned,
+    reactionPickerSize,
+    reactionPickerWidth,
+    reactionPickerHeight,
+    disableShowingAnimatedImages,
+    recentlyUsedEmojis,
 } = defaultStore.reactiveState;
 
 const size = computed(() => props.asReactionPicker ? reactionPickerSize.value : 1);
@@ -153,521 +153,506 @@ const tab = ref<'index' | 'custom' | 'unicode' | 'tags'>('index');
 let split_categories = [];
 customEmojiCategories.value.forEach(e => {
     if (e !== null){
-        split_categories.push(e.split('/',2))
+        split_categories.push(e.split('/'))
     }
 });
 
 const groupedData = {};
 split_categories.forEach((item) => {
     if (!groupedData[item[0]]) {
-        groupedData[item[0]] = {};
-        groupedData[item[0]][item[0]] = true;
-        if (item.length > 1) {
-            for (let i = 1; i < item.length; i++) {
-                groupedData[item[0]][item[i]] = true;
-            }
-        }
-    } else {
-        if (item.length > 1) {
-            for (let i = 1; i < item.length; i++) {
-                groupedData[item[0]][item[i]] = true;
-            }
-        }
+        groupedData[item[0]] = [];
+        groupedData[item[0]].push(item[0]);
+    }else{
+        groupedData[item[0]].push(item[1]);
     }
 });
-
-// 結果を配列に変換
-for (const key in groupedData) {
-    groupedData[key] = Object.keys(groupedData[key]);
-}
-
-console.log(split_categories,groupedData)
+console.log(groupedData)
 
 watch(q, () => {
-	if (emojisEl.value) emojisEl.value.scrollTop = 0;
+    if (emojisEl.value) emojisEl.value.scrollTop = 0;
 
-	if (q.value === '') {
-		searchResultCustom.value = [];
-		searchResultUnicode.value = [];
-		return;
-	}
+    if (q.value === '') {
+        searchResultCustom.value = [];
+        searchResultUnicode.value = [];
+        return;
+    }
 
-	const newQ = q.value.replace(/:/g, '').toLowerCase();
+    const newQ = q.value.replace(/:/g, '').toLowerCase();
 
-	const searchCustom = () => {
-		const max = 100;
-		const emojis = customEmojis.value.filter(emoji => !emoji.draft);
-		const matches = new Set<Misskey.entities.CustomEmoji>();
+    const searchCustom = () => {
+        const max = 100;
+        const emojis = customEmojis.value;
+        const matches = new Set<Misskey.entities.CustomEmoji>();
 
-		const exactMatch = emojis.find(emoji => emoji.name === newQ);
-		if (exactMatch) matches.add(exactMatch);
+        const exactMatch = emojis.find(emoji => emoji.name === newQ);
+        if (exactMatch) matches.add(exactMatch);
 
-		if (newQ.includes(' ')) { // AND検索
-			const keywords = newQ.split(' ');
+        if (newQ.includes(' ')) { // AND検索
+            const keywords = newQ.split(' ');
 
-			// 名前にキーワードが含まれている
-			for (const emoji of emojis) {
-				if (keywords.every(keyword => emoji.name.includes(keyword))) {
-					matches.add(emoji);
-					if (matches.size >= max) break;
-				}
-			}
-			if (matches.size >= max) return matches;
+            // 名前にキーワードが含まれている
+            for (const emoji of emojis) {
+                if (keywords.every(keyword => emoji.name.includes(keyword))) {
+                    matches.add(emoji);
+                    if (matches.size >= max) break;
+                }
+            }
+            if (matches.size >= max) return matches;
 
-			// 名前またはエイリアスにキーワードが含まれている
-			for (const emoji of emojis) {
-				if (keywords.every(keyword => emoji.name.includes(keyword) || emoji.aliases.some(alias => alias.includes(keyword)))) {
-					matches.add(emoji);
-					if (matches.size >= max) break;
-				}
-			}
-		} else {
-			for (const emoji of emojis) {
-				if (emoji.name.startsWith(newQ)) {
-					matches.add(emoji);
-					if (matches.size >= max) break;
-				}
-			}
-			if (matches.size >= max) return matches;
+            // 名前またはエイリアスにキーワードが含まれている
+            for (const emoji of emojis) {
+                if (keywords.every(keyword => emoji.name.includes(keyword) || emoji.aliases.some(alias => alias.includes(keyword)))) {
+                    matches.add(emoji);
+                    if (matches.size >= max) break;
+                }
+            }
+        } else {
+            for (const emoji of emojis) {
+                if (emoji.name.startsWith(newQ)) {
+                    matches.add(emoji);
+                    if (matches.size >= max) break;
+                }
+            }
+            if (matches.size >= max) return matches;
 
-			for (const emoji of emojis) {
-				if (emoji.aliases.some(alias => alias.startsWith(newQ))) {
-					matches.add(emoji);
-					if (matches.size >= max) break;
-				}
-			}
-			if (matches.size >= max) return matches;
+            for (const emoji of emojis) {
+                if (emoji.aliases.some(alias => alias.startsWith(newQ))) {
+                    matches.add(emoji);
+                    if (matches.size >= max) break;
+                }
+            }
+            if (matches.size >= max) return matches;
 
-			for (const emoji of emojis) {
-				if (emoji.name.includes(newQ)) {
-					matches.add(emoji);
-					if (matches.size >= max) break;
-				}
-			}
-			if (matches.size >= max) return matches;
+            for (const emoji of emojis) {
+                if (emoji.name.includes(newQ)) {
+                    matches.add(emoji);
+                    if (matches.size >= max) break;
+                }
+            }
+            if (matches.size >= max) return matches;
 
-			for (const emoji of emojis) {
-				if (emoji.aliases.some(alias => alias.includes(newQ))) {
-					matches.add(emoji);
-					if (matches.size >= max) break;
-				}
-			}
-		}
+            for (const emoji of emojis) {
+                if (emoji.aliases.some(alias => alias.includes(newQ))) {
+                    matches.add(emoji);
+                    if (matches.size >= max) break;
+                }
+            }
+        }
 
-		return matches;
-	};
+        return matches;
+    };
 
-	const searchUnicode = () => {
-		const max = 100;
-		const emojis = emojilist;
-		const matches = new Set<UnicodeEmojiDef>();
+    const searchUnicode = () => {
+        const max = 100;
+        const emojis = emojilist;
+        const matches = new Set<UnicodeEmojiDef>();
 
-		const exactMatch = emojis.find(emoji => emoji.name === newQ);
-		if (exactMatch) matches.add(exactMatch);
+        const exactMatch = emojis.find(emoji => emoji.name === newQ);
+        if (exactMatch) matches.add(exactMatch);
 
-		if (newQ.includes(' ')) { // AND検索
-			const keywords = newQ.split(' ');
+        if (newQ.includes(' ')) { // AND検索
+            const keywords = newQ.split(' ');
 
-			for (const emoji of emojis) {
-				if (keywords.every(keyword => emoji.name.includes(keyword))) {
-					matches.add(emoji);
-					if (matches.size >= max) break;
-				}
-			}
-			if (matches.size >= max) return matches;
+            for (const emoji of emojis) {
+                if (keywords.every(keyword => emoji.name.includes(keyword))) {
+                    matches.add(emoji);
+                    if (matches.size >= max) break;
+                }
+            }
+            if (matches.size >= max) return matches;
 
-			for (const index of Object.values(defaultStore.state.additionalUnicodeEmojiIndexes)) {
-				for (const emoji of emojis) {
-					if (keywords.every(keyword => index[emoji.char].some(k => k.includes(keyword)))) {
-						matches.add(emoji);
-						if (matches.size >= max) break;
-					}
-				}
-			}
-		} else {
-			for (const emoji of emojis) {
-				if (emoji.name.startsWith(newQ)) {
-					matches.add(emoji);
-					if (matches.size >= max) break;
-				}
-			}
-			if (matches.size >= max) return matches;
+            for (const index of Object.values(defaultStore.state.additionalUnicodeEmojiIndexes)) {
+                for (const emoji of emojis) {
+                    if (keywords.every(keyword => index[emoji.char].some(k => k.includes(keyword)))) {
+                        matches.add(emoji);
+                        if (matches.size >= max) break;
+                    }
+                }
+            }
+        } else {
+            for (const emoji of emojis) {
+                if (emoji.name.startsWith(newQ)) {
+                    matches.add(emoji);
+                    if (matches.size >= max) break;
+                }
+            }
+            if (matches.size >= max) return matches;
 
-			for (const index of Object.values(defaultStore.state.additionalUnicodeEmojiIndexes)) {
-				for (const emoji of emojis) {
-					if (index[emoji.char].some(k => k.startsWith(newQ))) {
-						matches.add(emoji);
-						if (matches.size >= max) break;
-					}
-				}
-			}
+            for (const index of Object.values(defaultStore.state.additionalUnicodeEmojiIndexes)) {
+                for (const emoji of emojis) {
+                    if (index[emoji.char].some(k => k.startsWith(newQ))) {
+                        matches.add(emoji);
+                        if (matches.size >= max) break;
+                    }
+                }
+            }
 
-			for (const emoji of emojis) {
-				if (emoji.name.includes(newQ)) {
-					matches.add(emoji);
-					if (matches.size >= max) break;
-				}
-			}
-			if (matches.size >= max) return matches;
+            for (const emoji of emojis) {
+                if (emoji.name.includes(newQ)) {
+                    matches.add(emoji);
+                    if (matches.size >= max) break;
+                }
+            }
+            if (matches.size >= max) return matches;
 
-			for (const index of Object.values(defaultStore.state.additionalUnicodeEmojiIndexes)) {
-				for (const emoji of emojis) {
-					if (index[emoji.char].some(k => k.includes(newQ))) {
-						matches.add(emoji);
-						if (matches.size >= max) break;
-					}
-				}
-			}
-		}
+            for (const index of Object.values(defaultStore.state.additionalUnicodeEmojiIndexes)) {
+                for (const emoji of emojis) {
+                    if (index[emoji.char].some(k => k.includes(newQ))) {
+                        matches.add(emoji);
+                        if (matches.size >= max) break;
+                    }
+                }
+            }
+        }
 
-		return matches;
-	};
+        return matches;
+    };
 
-	searchResultCustom.value = Array.from(searchCustom()).filter(filterAvailable);
-	searchResultUnicode.value = Array.from(searchUnicode());
+    searchResultCustom.value = Array.from(searchCustom()).filter(filterAvailable);
+    searchResultUnicode.value = Array.from(searchUnicode());
 });
 
 function filterAvailable(emoji: Misskey.entities.CustomEmoji): boolean {
-	return (emoji.roleIdsThatCanBeUsedThisEmojiAsReaction == null || emoji.roleIdsThatCanBeUsedThisEmojiAsReaction.length === 0) || ($i && $i.roles.some(r => emoji.roleIdsThatCanBeUsedThisEmojiAsReaction.includes(r.id)));
+    return (emoji.roleIdsThatCanBeUsedThisEmojiAsReaction == null || emoji.roleIdsThatCanBeUsedThisEmojiAsReaction.length === 0) || ($i && $i.roles.some(r => emoji.roleIdsThatCanBeUsedThisEmojiAsReaction.includes(r.id)));
 }
 
 function focus() {
-	if (!['smartphone', 'tablet'].includes(deviceKind) && !isTouchUsing) {
-		searchEl.value?.focus({
-			preventScroll: true,
-		});
-	}
+    if (!['smartphone', 'tablet'].includes(deviceKind) && !isTouchUsing) {
+        searchEl.value?.focus({
+            preventScroll: true,
+        });
+    }
 }
 
 function reset() {
-	if (emojisEl.value) emojisEl.value.scrollTop = 0;
-	q.value = '';
+    if (emojisEl.value) emojisEl.value.scrollTop = 0;
+    q.value = '';
 }
 
 function getKey(emoji: string | Misskey.entities.CustomEmoji | UnicodeEmojiDef): string {
-	return typeof emoji === 'string' ? emoji : 'char' in emoji ? emoji.char : `:${emoji.name}:`;
+    return typeof emoji === 'string' ? emoji : 'char' in emoji ? emoji.char : `:${emoji.name}:`;
 }
 
 /** @see MkEmojiPicker.section.vue */
 function computeButtonTitle(ev: MouseEvent): void {
-	const elm = ev.target as HTMLElement;
-	const emoji = elm.dataset.emoji as string;
-	elm.title = getEmojiName(emoji) ?? emoji;
+    const elm = ev.target as HTMLElement;
+    const emoji = elm.dataset.emoji as string;
+    elm.title = getEmojiName(emoji) ?? emoji;
 }
 
 function chosen(emoji: any, ev?: MouseEvent) {
-	const el = ev && (ev.currentTarget ?? ev.target) as HTMLElement | null | undefined;
-	if (el) {
-		const rect = el.getBoundingClientRect();
-		const x = rect.left + (el.offsetWidth / 2);
-		const y = rect.top + (el.offsetHeight / 2);
-		os.popup(MkRippleEffect, { x, y }, {}, 'end');
-	}
+    const el = ev && (ev.currentTarget ?? ev.target) as HTMLElement | null | undefined;
+    if (el) {
+        const rect = el.getBoundingClientRect();
+        const x = rect.left + (el.offsetWidth / 2);
+        const y = rect.top + (el.offsetHeight / 2);
+        os.popup(MkRippleEffect, { x, y }, {}, 'end');
+    }
 
-	const key = getKey(emoji);
-	emit('chosen', key);
+    const key = getKey(emoji);
+    emit('chosen', key);
 
-	// 最近使った絵文字更新
-	if (!pinned.value.includes(key)) {
-		let recents = defaultStore.state.recentlyUsedEmojis;
-		recents = recents.filter((emoji: any) => emoji !== key);
-		recents.unshift(key);
-		defaultStore.set('recentlyUsedEmojis', recents.splice(0, 32));
-	}
+    // 最近使った絵文字更新
+    if (!pinned.value.includes(key)) {
+        let recents = defaultStore.state.recentlyUsedEmojis;
+        recents = recents.filter((emoji: any) => emoji !== key);
+        recents.unshift(key);
+        defaultStore.set('recentlyUsedEmojis', recents.splice(0, 32));
+    }
 }
 
 function input(): void {
-	// Using custom input event instead of v-model to respond immediately on
-	// Android, where composition happens on all languages
-	// (v-model does not update during composition)
-	q.value = searchEl.value?.value.trim() ?? '';
+    // Using custom input event instead of v-model to respond immediately on
+    // Android, where composition happens on all languages
+    // (v-model does not update during composition)
+    q.value = searchEl.value?.value.trim() ?? '';
 }
 
 function paste(event: ClipboardEvent): void {
-	const pasted = event.clipboardData?.getData('text') ?? '';
-	if (done(pasted)) {
-		event.preventDefault();
-	}
+    const pasted = event.clipboardData?.getData('text') ?? '';
+    if (done(pasted)) {
+        event.preventDefault();
+    }
 }
 
 function onEnter(ev: KeyboardEvent) {
-	if (ev.isComposing || ev.key === 'Process' || ev.keyCode === 229) return;
-	done();
+    if (ev.isComposing || ev.key === 'Process' || ev.keyCode === 229) return;
+    done();
 }
 
 function done(query?: string): boolean | void {
-	if (query == null) query = q.value;
-	if (query == null || typeof query !== 'string') return;
+    if (query == null) query = q.value;
+    if (query == null || typeof query !== 'string') return;
 
-	const q2 = query.replace(/:/g, '');
-	const exactMatchCustom = customEmojisMap.get(q2);
-	if (exactMatchCustom) {
-		chosen(exactMatchCustom);
-		return true;
-	}
-	const exactMatchUnicode = emojilist.find(emoji => emoji.char === q2 || emoji.name === q2);
-	if (exactMatchUnicode) {
-		chosen(exactMatchUnicode);
-		return true;
-	}
-	if (searchResultCustom.value.length > 0) {
-		chosen(searchResultCustom.value[0]);
-		return true;
-	}
-	if (searchResultUnicode.value.length > 0) {
-		chosen(searchResultUnicode.value[0]);
-		return true;
-	}
+    const q2 = query.replace(/:/g, '');
+    const exactMatchCustom = customEmojisMap.get(q2);
+    if (exactMatchCustom) {
+        chosen(exactMatchCustom);
+        return true;
+    }
+    const exactMatchUnicode = emojilist.find(emoji => emoji.char === q2 || emoji.name === q2);
+    if (exactMatchUnicode) {
+        chosen(exactMatchUnicode);
+        return true;
+    }
+    if (searchResultCustom.value.length > 0) {
+        chosen(searchResultCustom.value[0]);
+        return true;
+    }
+    if (searchResultUnicode.value.length > 0) {
+        chosen(searchResultUnicode.value[0]);
+        return true;
+    }
 }
 
 onMounted(() => {
-	focus();
+    focus();
 });
 
 defineExpose({
-	focus,
-	reset,
+    focus,
+    reset,
 });
 </script>
 
 <style lang="scss" scoped>
 .omfetrab {
-	$pad: 8px;
+  $pad: 8px;
 
-	display: flex;
-	flex-direction: column;
+  display: flex;
+  flex-direction: column;
 
-	&.s1 {
-		--eachSize: 40px;
-	}
+  &.s1 {
+    --eachSize: 40px;
+  }
 
-	&.s2 {
-		--eachSize: 45px;
-	}
+  &.s2 {
+    --eachSize: 45px;
+  }
 
-	&.s3 {
-		--eachSize: 50px;
-	}
+  &.s3 {
+    --eachSize: 50px;
+  }
 
-	&.w1 {
-		width: calc((var(--eachSize) * 5) + (#{$pad} * 2));
-		--columns: 1fr 1fr 1fr 1fr 1fr;
-	}
+  &.w1 {
+    width: calc((var(--eachSize) * 5) + (#{$pad} * 2));
+    --columns: 1fr 1fr 1fr 1fr 1fr;
+  }
 
-	&.w2 {
-		width: calc((var(--eachSize) * 6) + (#{$pad} * 2));
-		--columns: 1fr 1fr 1fr 1fr 1fr 1fr;
-	}
+  &.w2 {
+    width: calc((var(--eachSize) * 6) + (#{$pad} * 2));
+    --columns: 1fr 1fr 1fr 1fr 1fr 1fr;
+  }
 
-	&.w3 {
-		width: calc((var(--eachSize) * 7) + (#{$pad} * 2));
-		--columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
-	}
+  &.w3 {
+    width: calc((var(--eachSize) * 7) + (#{$pad} * 2));
+    --columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
+  }
 
-	&.w4 {
-		width: calc((var(--eachSize) * 8) + (#{$pad} * 2));
-		--columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
-	}
+  &.w4 {
+    width: calc((var(--eachSize) * 8) + (#{$pad} * 2));
+    --columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
+  }
 
-	&.w5 {
-		width: calc((var(--eachSize) * 9) + (#{$pad} * 2));
-		--columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
-	}
+  &.w5 {
+    width: calc((var(--eachSize) * 9) + (#{$pad} * 2));
+    --columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
+  }
 
-	&.h1 {
-		height: calc((var(--eachSize) * 4) + (#{$pad} * 2));
-	}
+  &.h1 {
+    height: calc((var(--eachSize) * 4) + (#{$pad} * 2));
+  }
 
-	&.h2 {
-		height: calc((var(--eachSize) * 6) + (#{$pad} * 2));
-	}
+  &.h2 {
+    height: calc((var(--eachSize) * 6) + (#{$pad} * 2));
+  }
 
-	&.h3 {
-		height: calc((var(--eachSize) * 8) + (#{$pad} * 2));
-	}
+  &.h3 {
+    height: calc((var(--eachSize) * 8) + (#{$pad} * 2));
+  }
 
-	&.h4 {
-		height: calc((var(--eachSize) * 10) + (#{$pad} * 2));
-	}
+  &.h4 {
+    height: calc((var(--eachSize) * 10) + (#{$pad} * 2));
+  }
 
-	&.asDrawer {
-		width: 100% !important;
+  &.asDrawer {
+    width: 100% !important;
 
-		> .emojis {
-			::v-deep(section) {
-				> header {
-					height: 32px;
-					line-height: 32px;
-					padding: 0 12px;
-					font-size: 15px;
-				}
+    > .emojis {
+      ::v-deep(section) {
+        > header {
+          height: 32px;
+          line-height: 32px;
+          padding: 0 12px;
+          font-size: 15px;
+        }
 
-				> .body {
-					display: grid;
-					grid-template-columns: var(--columns);
-					font-size: 30px;
+        > .body {
+          display: grid;
+          grid-template-columns: var(--columns);
+          font-size: 30px;
 
-					> .item {
-						aspect-ratio: 1 / 1;
-						width: auto;
-						height: auto;
-						min-width: 0;
-					}
-				}
-			}
-		}
-	}
+          > .item {
+            aspect-ratio: 1 / 1;
+            width: auto;
+            height: auto;
+            min-width: 0;
+          }
+        }
+      }
+    }
+  }
 
-	&.asWindow {
-		width: 100% !important;
-		height: 100% !important;
+  &.asWindow {
+    width: 100% !important;
+    height: 100% !important;
 
-		> .emojis {
-			::v-deep(section) {
-				> .body {
-					display: grid;
-					grid-template-columns: var(--columns);
-					font-size: 30px;
+    > .emojis {
+      ::v-deep(section) {
+        > .body {
+          display: grid;
+          grid-template-columns: var(--columns);
+          font-size: 30px;
 
-					> .item {
-						aspect-ratio: 1 / 1;
-						width: auto;
-						height: auto;
-						min-width: 0;
-					}
-				}
-			}
-		}
-	}
+          > .item {
+            aspect-ratio: 1 / 1;
+            width: auto;
+            height: auto;
+            min-width: 0;
+          }
+        }
+      }
+    }
+  }
 
-	> .search {
-		width: 100%;
-		padding: 12px;
-		box-sizing: border-box;
-		font-size: 1em;
-		outline: none;
-		border: none;
-		background: transparent;
-		color: var(--fg);
+  > .search {
+    width: 100%;
+    padding: 12px;
+    box-sizing: border-box;
+    font-size: 1em;
+    outline: none;
+    border: none;
+    background: transparent;
+    color: var(--fg);
 
-		&:not(:focus):not(.filled) {
-			margin-bottom: env(safe-area-inset-bottom, 0px);
-		}
+    &:not(:focus):not(.filled) {
+      margin-bottom: env(safe-area-inset-bottom, 0px);
+    }
 
-		&:not(.filled) {
-			order: 1;
-			z-index: 2;
-			box-shadow: 0px -1px 0 0px var(--divider);
-		}
-	}
+    &:not(.filled) {
+      order: 1;
+      z-index: 2;
+      box-shadow: 0px -1px 0 0px var(--divider);
+    }
+  }
 
-	> .tabs {
-		display: flex;
-		display: none;
+  > .tabs {
+    display: flex;
+    display: none;
 
-		> .tab {
-			flex: 1;
-			height: 38px;
-			border-top: solid 0.5px var(--divider);
+    > .tab {
+      flex: 1;
+      height: 38px;
+      border-top: solid 0.5px var(--divider);
 
-			&.active {
-				border-top: solid 1px var(--accent);
-				color: var(--accent);
-			}
-		}
-	}
+      &.active {
+        border-top: solid 1px var(--accent);
+        color: var(--accent);
+      }
+    }
+  }
 
-	> .emojis {
-		height: 100%;
-		overflow-y: auto;
-		overflow-x: hidden;
+  > .emojis {
+    height: 100%;
+    overflow-y: auto;
+    overflow-x: hidden;
 
-		scrollbar-width: none;
+    scrollbar-width: none;
 
-		&::-webkit-scrollbar {
-			display: none;
-		}
+    &::-webkit-scrollbar {
+      display: none;
+    }
 
-		> .group {
-			&:not(.index) {
-				padding: 4px 0 8px 0;
-				border-top: solid 0.5px var(--divider);
-			}
+    > .group {
+      &:not(.index) {
+        padding: 4px 0 8px 0;
+        border-top: solid 0.5px var(--divider);
+      }
 
-			> header {
-				/*position: sticky;
-				top: 0;
-				left: 0;*/
-				height: 32px;
-				line-height: 32px;
-				z-index: 2;
-				padding: 0 8px;
-				font-size: 12px;
-			}
-		}
+      > header {
+        /*position: sticky;
+top: 0;
+left: 0;*/
+        height: 32px;
+        line-height: 32px;
+        z-index: 2;
+        padding: 0 8px;
+        font-size: 12px;
+      }
+    }
 
-		::v-deep(section) {
-			> header {
-				position: sticky;
-				top: 0;
-				left: 0;
-				height: 32px;
-				line-height: 32px;
-				z-index: 1;
-				padding: 0 8px;
-				font-size: 12px;
-				cursor: pointer;
+    ::v-deep(section) {
+      > header {
+        position: sticky;
+        top: 0;
+        left: 0;
+        height: 32px;
+        line-height: 32px;
+        z-index: 1;
+        padding: 0 8px;
+        font-size: 12px;
+        cursor: pointer;
 
-				&:hover {
-					color: var(--accent);
-				}
-			}
+        &:hover {
+          color: var(--accent);
+        }
+      }
 
-			> .body {
-				position: relative;
-				padding: $pad;
+      > .body {
+        position: relative;
+        padding: $pad;
 
-				> .item {
-					position: relative;
-					padding: 0;
-					width: var(--eachSize);
-					height: var(--eachSize);
-					contain: strict;
-					border-radius: 4px;
-					font-size: 24px;
+        > .item {
+          position: relative;
+          padding: 0;
+          width: var(--eachSize);
+          height: var(--eachSize);
+          contain: strict;
+          border-radius: 4px;
+          font-size: 24px;
 
-					&:focus-visible {
-						outline: solid 2px var(--focus);
-						z-index: 1;
-					}
+          &:focus-visible {
+            outline: solid 2px var(--focus);
+            z-index: 1;
+          }
 
-					&:hover {
-						background: rgba(0, 0, 0, 0.05);
-					}
+          &:hover {
+            background: rgba(0, 0, 0, 0.05);
+          }
 
-					&:active {
-						background: var(--accent);
-						box-shadow: inset 0 0.15em 0.3em rgba(27, 31, 35, 0.15);
-					}
+          &:active {
+            background: var(--accent);
+            box-shadow: inset 0 0.15em 0.3em rgba(27, 31, 35, 0.15);
+          }
 
-					> .emoji {
-						height: 1.25em;
-						vertical-align: -.25em;
-						pointer-events: none;
-						width: 100%;
-						object-fit: contain;
-					}
-				}
-			}
+          > .emoji {
+            height: 1.25em;
+            vertical-align: -.25em;
+            pointer-events: none;
+            width: 100%;
+            object-fit: contain;
+          }
+        }
+      }
 
-			&.result {
-				border-bottom: solid 0.5px var(--divider);
+      &.result {
+        border-bottom: solid 0.5px var(--divider);
 
-				&:empty {
-					display: none;
-				}
-			}
-		}
-	}
+        &:empty {
+          display: none;
+        }
+      }
+    }
+  }
 }
 </style>