fix: iroiro

Signed-off-by: mattyatea <mattyacocacora0@gmail.com>

カスタム絵文字一覧を一覧、新着、申請中に分離

(cherry picked from commit 5c464cd1bc177f0276397a686160c5c77e774d10)

fix: 絵文字管理画面の表示不具合の修正

(cherry picked from commit 5300ff763bb008699b35dc6e219b50ac1c4fd7af)
Signed-off-by: mattyatea <mattyacocacora0@gmail.com>

Fix:draftが2重に宣言されてた

Signed-off-by: mattyatea <mattyacocacora0@gmail.com>

packages/frontend/src/components/MkCustomEmojiEditRemote.vue

@@ -0,0 +1,110 @@
+<template>
+<FormSplit>
+	<MkInput v-model="queryRemote" :debounce="true" type="search">
+		<template #prefix><i class="ti ti-search"></i></template>
+		<template #label>{{ i18n.ts.search }}</template>
+	</MkInput>
+	<MkInput v-model="host" :debounce="true">
+		<template #label>{{ i18n.ts.host }}</template>
+	</MkInput>
+</FormSplit>
+<MkPagination :pagination="remotePagination" :displayLimit="100">
+	<template #empty><span>{{ i18n.ts.noCustomEmojis }}</span></template>
+	<template #default="{items}">
+		<div class="ldhfsamy">
+			<div v-for="emoji in items" :key="emoji.id" class="emoji _panel _button" @click="remoteMenu(emoji, $event)">
+				<img :src="emoji.url" class="img" :alt="emoji.name"/>
+				<div class="body">
+					<div class="name _monospace">{{ emoji.name }}</div>
+					<div class="info">{{ emoji.host }}</div>
+				</div>
+			</div>
+		</div>
+	</template>
+</MkPagination>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+import MkInput from '@/components/MkInput.vue';
+import MkPagination from '@/components/MkPagination.vue';
+import FormSplit from '@/components/form/split.vue';
+import * as os from '@/os';
+import { i18n } from '@/i18n';
+
+const queryRemote = ref(null);
+const host = ref(null);
+
+const remotePagination = {
+	endpoint: 'admin/emoji/list-remote' as const,
+	limit: 30,
+	params: computed(() => ({
+		query: (queryRemote.value && queryRemote.value !== '') ? queryRemote.value : null,
+		host: (host.value && host.value !== '') ? host.value : null,
+	})),
+};
+
+const im = (emoji) => {
+	os.apiWithDialog('admin/emoji/copy', {
+		emojiId: emoji.id,
+	});
+};
+
+const remoteMenu = (emoji, ev: MouseEvent) => {
+	os.popupMenu([{
+		type: 'label',
+		text: ':' + emoji.name + ':',
+	}, {
+		text: i18n.ts.import,
+		icon: 'ti ti-plus',
+		action: () => { im(emoji); },
+	}], ev.currentTarget ?? ev.target);
+};
+</script>
+
+<style lang="scss" scoped>
+.empty {
+	margin: var(--margin);
+}
+
+.ldhfsamy {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
+	grid-gap: 12px;
+	margin: var(--margin) 0;
+
+	> .emoji {
+		display: flex;
+		align-items: center;
+		padding: 12px;
+		text-align: left;
+
+		&:hover {
+			color: var(--accent);
+		}
+
+		> .img {
+			width: 32px;
+			height: 32px;
+		}
+
+		> .body {
+			padding: 0 0 0 8px;
+			white-space: nowrap;
+			overflow: hidden;
+
+			> .name {
+				text-overflow: ellipsis;
+				overflow: hidden;
+			}
+
+			> .info {
+				opacity: 0.5;
+				font-size: 90%;
+				text-overflow: ellipsis;
+				overflow: hidden;
+			}
+		}
+	}
+}
+</style>