From bf9089209d22fd4a18a652f3c50c44be78219db3 Mon Sep 17 00:00:00 2001
From: tar_bin <tar.bin.master@gmail.com>
Date: Fri, 11 Aug 2023 19:04:15 +0900
Subject: [PATCH] =?UTF-8?q?=E3=82=AB=E3=82=B9=E3=82=BF=E3=83=A0=E7=B5=B5?=
 =?UTF-8?q?=E6=96=87=E5=AD=97=E4=B8=80=E8=A6=A7=E3=82=92=E4=B8=80=E8=A6=A7?=
 =?UTF-8?q?=E3=80=81=E6=96=B0=E7=9D=80=E3=80=81=E7=94=B3=E8=AB=8B=E4=B8=AD?=
 =?UTF-8?q?=E3=81=AB=E5=88=86=E9=9B=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

(cherry picked from commit 5c464cd1bc177f0276397a686160c5c77e774d10)
---
 locales/index.d.ts                           |  1 +
 locales/ja-JP.yml                            |  1 +
 packages/frontend/src/pages/about.emojis.vue | 87 ++++++++++++++------
 packages/frontend/src/pages/about.vue        |  4 +-
 4 files changed, 65 insertions(+), 28 deletions(-)

diff --git a/locales/index.d.ts b/locales/index.d.ts
index 504df64250..7c440d9119 100644
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@@ -824,6 +824,7 @@ export interface Locale {
     "high": string;
     "middle": string;
     "low": string;
+    "list": string;
     "emailNotConfiguredWarning": string;
     "ratio": string;
     "previewNoteText": string;
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 367233c13c..dcf413be13 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -823,6 +823,7 @@ priority: "優先度"
 high: "高"
 middle: "中"
 low: "低"
+list: "一覧"
 emailNotConfiguredWarning: "メールアドレスの設定がされていません。"
 ratio: "比率"
 previewNoteText: "本文をプレビュー"
diff --git a/packages/frontend/src/pages/about.emojis.vue b/packages/frontend/src/pages/about.emojis.vue
index a00d2e3219..805662065c 100644
--- a/packages/frontend/src/pages/about.emojis.vue
+++ b/packages/frontend/src/pages/about.emojis.vue
@@ -4,51 +4,88 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<div class="_gaps">
-	<MkButton v-if="$i && ($i.isModerator || $i.policies.canManageCustomEmojis)" primary link to="/custom-emojis-manager">{{ i18n.ts.manageCustomEmojis }}</MkButton>
-	<MkButton v-if="$i && (!$i.isModerator && !$i.policies.canManageCustomEmojis && $i.policies.canRequestCustomEmojis)" primary @click="edit">{{ i18n.ts.requestCustomEmojis }}</MkButton>
+<MkStickyContainer>
+	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
+	<MkSpacer v-if="tab === 'emojis'" :contentMax="1000" :marginMin="20">
+		<MkButton v-if="$i && ($i.isModerator || $i.policies.canManageCustomEmojis)" primary link to="/custom-emojis-manager">{{ i18n.ts.manageCustomEmojis }}</MkButton>
+		<MkButton v-if="$i && (!$i.isModerator && !$i.policies.canManageCustomEmojis && $i.policies.canRequestCustomEmojis)" primary @click="edit">{{ i18n.ts.requestCustomEmojis }}</MkButton>
 
-	<div class="query">
-		<MkInput v-model="q" class="" :placeholder="i18n.ts.search">
-			<template #prefix><i class="ti ti-search"></i></template>
-		</MkInput>
+		<div class="query" style="margin-top: 10px;">
+			<MkInput v-model="q" class="" :placeholder="i18n.ts.search">
+				<template #prefix><i class="ti ti-search"></i></template>
+			</MkInput>
 
-		<!-- たくさんあると邪魔
-		<div class="tags">
-			<span class="tag _button" v-for="tag in customEmojiTags" :class="{ active: selectedTags.has(tag) }" @click="toggleTag(tag)">{{ tag }}</span>
+			<!-- たくさんあると邪魔
+			<div class="tags">
+				<span class="tag _button" v-for="tag in customEmojiTags" :class="{ active: selectedTags.has(tag) }" @click="toggleTag(tag)">{{ tag }}</span>
+			</div>
+			-->
 		</div>
-		-->
-	</div>
 
-	<MkFoldableSection v-if="searchEmojis">
-		<template #header>{{ i18n.ts.searchResult }}</template>
+		<MkFoldableSection v-if="searchEmojis">
+			<template #header>{{ i18n.ts.searchResult }}</template>
+			<div :class="$style.emojis">
+				<XEmoji v-for="emoji in searchEmojis" :key="emoji.name" :emoji="emoji" :draft="emoji.draft"/>
+			</div>
+		</MkFoldableSection>
+
+		<MkFoldableSection v-for="category in customEmojiCategories" v-once :key="category">
+			<template #header>{{ category || i18n.ts.other }}</template>
+			<div :class="$style.emojis">
+				<XEmoji v-for="emoji in customEmojis.filter(e => e.category === category && !e.draft)" :key="emoji.name" :emoji="emoji" :draft="emoji.draft"/>
+			</div>
+		</MkFoldableSection>
+	</MkSpacer>
+	<MkSpacer v-if="tab === 'new'" :contentMax="1000" :marginMin="20">
 		<div :class="$style.emojis">
-			<XEmoji v-for="emoji in searchEmojis" :key="emoji.name" :emoji="emoji" :draft="emoji.draft"/>
+			<XEmoji v-for="emoji in newEmojis" :key="emoji.name" :emoji="emoji" :draft="emoji.draft"/>
 		</div>
-	</MkFoldableSection>
-
-	<MkFoldableSection v-for="category in customEmojiCategories" v-once :key="category">
-		<template #header>{{ category || i18n.ts.other }}</template>
+	</MkSpacer>
+	<MkSpacer v-if="tab === 'draft'" :contentMax="1000" :marginMin="20">
 		<div :class="$style.emojis">
-			<XEmoji v-for="emoji in customEmojis.filter(e => e.category === category)" :key="emoji.name" :emoji="emoji" :draft="emoji.draft"/>
+            <XEmoji v-for="emoji in draftEmojis" :key="emoji.name" :emoji="emoji" :draft="emoji.draft"/>
 		</div>
-	</MkFoldableSection>
-</div>
+	</MkSpacer>
+</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { watch, defineAsyncComponent } from 'vue';
+import { watch, defineAsyncComponent, ref, computed } from 'vue';
 import * as Misskey from 'misskey-js';
 import XEmoji from './emojis.emoji.vue';
 import MkButton from '@/components/MkButton.vue';
 import MkInput from '@/components/MkInput.vue';
 import MkFoldableSection from '@/components/MkFoldableSection.vue';
-import { customEmojis, customEmojiCategories, getCustomEmojiTags } from '@/custom-emojis.js';
+import { customEmojis, customEmojiCategories } from '@/custom-emojis.js';
 import { i18n } from '@/i18n.js';
 import * as os from '@/os';
 import { $i } from '@/account.js';
+import { definePageMetadata } from '@/scripts/page-metadata';
+
+let tab = $ref('emojis');
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => [{
+	key: 'emojis',
+	title: i18n.ts.list,
+}, {
+	key: 'new',
+	title: i18n.ts.newEmojis,
+}, {
+	key: 'draft',
+	title: i18n.ts.draftEmojis,
+}]);
+
+definePageMetadata(ref({}));
+
+const pagination = {
+	endpoint: 'admin/emoji/list' as const,
+	limit: 30,
+	params: computed(() => ({
+		query: (query.value && query.value !== '') ? query.value : null,
+	})),
+};
 
-const customEmojiTags = getCustomEmojiTags();
 let q = $ref('');
 let searchEmojis = $ref<Misskey.entities.CustomEmoji[]>(null);
 let selectedTags = $ref(new Set());
diff --git a/packages/frontend/src/pages/about.vue b/packages/frontend/src/pages/about.vue
index ee4043f9a5..d889d989e2 100644
--- a/packages/frontend/src/pages/about.vue
+++ b/packages/frontend/src/pages/about.vue
@@ -89,9 +89,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</FormSection>
 		</div>
 	</MkSpacer>
-	<MkSpacer v-else-if="tab === 'emojis'" :contentMax="1000" :marginMin="20">
-		<XEmojis/>
-	</MkSpacer>
+	<XEmojis v-else-if="tab === 'emojis'"/>
 	<MkSpacer v-else-if="tab === 'federation'" :contentMax="1000" :marginMin="20">
 		<XFederation/>
 	</MkSpacer>