リモートの絵文字インポートに情報メニューの追加

packages/frontend/src/components/MkCustomEmojiDetailedDialog.vue

@@ -4,7 +4,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<MkModalWindow ref="dialogEl" @close="cancel()" @closed="$emit('closed')">
+<MkWindow
+	ref="dialogEl"
+	:initialHeight="500"
+	:canResize="true"
+	@close="cancel()"
+	@closed="emit('closed')"
+>
 	<template #header>:{{ emoji.name }}:</template>
 	<template #default>
 		<MkSpacer>
@@ -16,6 +22,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<template #key>{{ i18n.ts.name }}</template>
 					<template #value>{{ emoji.name }}</template>
 				</MkKeyValue>
+				<MkKeyValue v-if="licenseToTop">
+					<template #key>{{ i18n.ts.license }}</template>
+					<template #value><Mfm :text="emoji.license ?? i18n.ts.none"/></template>
+				</MkKeyValue>
 				<MkKeyValue>
 					<template #key>{{ i18n.ts.tags }}</template>
 					<template #value>
@@ -39,7 +49,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<template #key>{{ i18n.ts.localOnly }}</template>
 					<template #value>{{ emoji.localOnly ? i18n.ts.yes : i18n.ts.no }}</template>
 				</MkKeyValue>
-				<MkKeyValue>
+				<MkKeyValue v-if="!licenseToTop">
 					<template #key>{{ i18n.ts.license }}</template>
 					<template #value><Mfm :text="emoji.license ?? i18n.ts.none"/></template>
 				</MkKeyValue>
@@ -52,28 +62,31 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</div>
 		</MkSpacer>
 	</template>
-</MkModalWindow>
+</mkwindow>
 </template>
 
 <script lang="ts" setup>
 import * as Misskey from 'misskey-js';
 import { defineProps, shallowRef } from 'vue';
 import MkLink from '@/components/MkLink.vue';
 import { i18n } from '@/i18n.js';
-import MkModalWindow from '@/components/MkModalWindow.vue';
+import MkWindow from '@/components/MkWindow.vue';
 import MkKeyValue from '@/components/MkKeyValue.vue';
 
-const props = defineProps<{
-  emoji: Misskey.entities.EmojiDetailed,
-}>();
+const props = withDefaults(defineProps<{
+    emoji: Misskey.entities.EmojiDetailed;
+    licenseToTop: boolean; // 新しく追加したプロパティ
+  }>(), {
+	licenseToTop: false, // デフォルト値を設定
+});
 
 const emit = defineEmits<{
 	(ev: 'ok', cropped: Misskey.entities.DriveFile): void;
 	(ev: 'cancel'): void;
 	(ev: 'closed'): void;
 }>();
 
-const dialogEl = shallowRef<InstanceType<typeof MkModalWindow>>();
+const dialogEl = shallowRef<InstanceType<typeof MkWindow>>();
 
 function cancel() {
 	emit('cancel');

packages/frontend/src/pages/custom-emojis-manager.vue

@@ -86,6 +86,7 @@ import { misskeyApi } from '@/scripts/misskey-api.js';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { importEmojiMeta } from '@/scripts/import-emoji.js';
+import MkCustomEmojiDetailedDialog from '@/components/MkCustomEmojiDetailedDialog.vue';
 
 const emojisPaginationComponent = shallowRef<InstanceType<typeof MkPagination>>();
 
@@ -159,6 +160,17 @@ const edit = (emoji) => {
 	});
 };
 
+const aboutEmoji = async(emoji) => {
+	let remoteEmoji = { ...await importEmojiMeta(emoji, emoji.host) };
+	remoteEmoji.name = `${remoteEmoji.name}@${remoteEmoji.host}`;
+	const { dispose } = os.popup(MkCustomEmojiDetailedDialog, {
+		emoji: remoteEmoji,
+		licenseToTop: true,
+	}, {
+		closed: () => dispose(),
+	});
+};
+
 const importEmoji = async(emoji) => {
 	let res = await os.apiWithDialog('admin/emoji/copy', {
 		emojiId: emoji.id,
@@ -175,6 +187,10 @@ const remoteMenu = (emoji, ev: MouseEvent) => {
 		text: i18n.ts.import,
 		icon: 'ti ti-plus',
 		action: () => { importEmoji(emoji); },
+	}, {
+		text: i18n.ts.about,
+		icon: 'ti ti-info-circle',
+		action: () => { aboutEmoji(emoji); },
 	}], ev.currentTarget ?? ev.target);
 };