cleanup code

locales/ja-JP.yml

@@ -896,6 +896,9 @@ shuffle: "シャッフル"
 account: "アカウント"
 move: "移動"
 deckOld: "旧デッキ"
+pakuruConfirm: "パクりますか？"
+pakuru: "パクる"
+duplicateEmoji: "同じ名前の絵文字が存在します。インポートしますか？"
 
 _sensitiveMediaDetection:
   description: "機械学習を使って自動でセンシティブなメディアを検出し、モデレーションに役立てることができます。サーバーの負荷が少し増えます。"

locales/ja-NY.yml

@@ -839,6 +839,7 @@ emojiApproval: "絵文字を登録"
 deckOld: "旧デッキ"
 pakuruConfirm: "パクりますか？"
 pakuru: "パクる"
+duplicateEmoji: "同じ名前の絵文字が存在します。インポートしますか？"
 
 
 _emailUnavailable:

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "misskey",
-	"version": "12.119.0-simkey-v3",
+	"version": "12.119.0-simkey-v7",
 	"codename": "indigo",
 	"repository": {
 		"type": "git",

packages/client/.eslintrc.js

@@ -24,7 +24,6 @@ module.exports = {
 		// window の禁止理由: グローバルスコープと衝突し、予期せぬ結果を招くため
 		// e の禁止理由: error や event など、複数のキーワードの頭文字であり分かりにくいため
 		'id-denylist': ['error', 'window', 'e'],
-		"forceConsistentCasingInFileNames": true,
 		'no-shadow': ['warn'],
 		'vue/attributes-order': ['error', {
 			'alphabetical': false,

packages/client/package.json

@@ -37,6 +37,7 @@
 		"katex": "0.15.6",
 		"matter-js": "0.18.0",
 		"mfm-js": "0.23.0",
+		"misetehoshii": "https://github.com/melt-adzuki/misetehoshii",
 		"misskey-js": "0.0.14",
 		"photoswipe": "5.3.2",
 		"prismjs": "1.29.0",

packages/client/src/components/MkNoteDetailed.vue

@@ -215,7 +215,7 @@ function react(viaKeyboard = false): void {
 	reactionPicker.show(reactButton.value, reaction => {
 		os.api('notes/reactions/create', {
 			noteId: appearNote.id,
-			reaction: reaction,
+			reaction: reaction.reaction,
 		});
 	}, () => {
 		focus();

packages/client/src/components/MkPageWindow.vue

@@ -141,4 +141,7 @@ defineExpose({
 	min-height: 100%;
 	background: var(--bg);
 }
+.yrolvcoq:has(.fill) {
+	height: 100%;
+}
 </style>

packages/client/src/components/MkReactionsViewer.reaction.vue

@@ -6,6 +6,7 @@
 	class="hkzvhatu _button"
 	:class="{ reacted: note.myReaction == reaction, canToggle }"
 	@click="toggleReaction()"
+	@contextmenu.stop="onContextmenu"
 >
 	<XReactionIcon class="icon" :reaction="reaction" :custom-emojis="note.emojis"/>
 	<span class="count">{{ count }}</span>
@@ -13,13 +14,14 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted, ref, watch } from 'vue';
+import { computed, defineAsyncComponent, onMounted, ref, watch } from 'vue';
 import * as misskey from 'misskey-js';
 import XDetails from '@/components/MkReactionsViewer.details.vue';
 import XReactionIcon from '@/components/MkReactionIcon.vue';
 import * as os from '@/os';
 import { useTooltip } from '@/scripts/use-tooltip';
 import { $i } from '@/account';
+import { openReactionImportMenu } from '@/scripts/reactionImportMenu';
 
 const props = defineProps<{
 	reaction: string;
@@ -88,6 +90,11 @@ useTooltip(buttonRef, async (showing) => {
 		targetElement: buttonRef.value,
 	}, {}, 'closed');
 }, 100);
+
+const onContextmenu = (e: MouseEvent) => {
+	e.preventDefault();
+	openReactionImportMenu(e, props.reaction);
+};
 </script>
 
 <style lang="scss" scoped>

packages/client/src/components/MkUrlPreview.vue

@@ -10,7 +10,7 @@
 	<transition :name="$store.state.animation ? 'zoom' : ''" mode="out-in">
 		<component :is="self ? 'MkA' : 'a'" v-if="!fetching" class="link" :class="{ compact }" :[attr]="self ? url.substr(local.length) : url" rel="nofollow noopener" :target="target" :title="url">
 			<div v-if="thumbnail" class="thumbnail" :style="`background-image: url('${thumbnail}')`">
-				<button v-if="!playerEnabled && player.url" class="_button" :title="i18n.ts.enablePlayer" @click.prevent="playerEnabled = true"><i class="fas fa-play-circle"></i></button>
+				<button v-if="!playerEnabled && player.url" class="_button" :title="i18n.ts.enablePlayer" @click.prevent="isMobile? playerEnabled = true : openPlayer()"><i class="fas fa-play-circle"></i></button>
 			</div>
 			<article>
 				<header>
@@ -36,6 +36,8 @@
 import { onMounted, onUnmounted } from 'vue';
 import { url as local, lang } from '@/config';
 import { i18n } from '@/i18n';
+import * as os from '@/os';
+import { deviceKind } from '@/scripts/device-kind';
 
 const props = withDefaults(defineProps<{
 	url: string;
@@ -46,6 +48,9 @@ const props = withDefaults(defineProps<{
 	compact: false,
 });
 
+const MOBILE_THRESHOLD = 500;
+const isMobile = $ref(deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD);
+
 const self = props.url.startsWith(local);
 const attr = self ? 'to' : 'href';
 const target = self ? null : '_blank';
@@ -103,6 +108,10 @@ function adjustTweetHeight(message: any) {
 	if (height) tweetHeight = height;
 }
 
+const openPlayer = () => {
+	os.pageWindow(`/ytplayer/${encodeURIComponent(requestUrl.href)}`);
+};
+
 (window as any).addEventListener('message', adjustTweetHeight);
 
 onUnmounted(() => {

packages/client/src/pages/admin/emojigen.vue

@@ -1,76 +1,109 @@
 <template>
-<MkSpacer :content-max="700" :margin-min="16" :margin-max="32">
-	<div class="cwepdizn _formRoot">
-		<FormSection>
-			<template #label>{{ $ts.preview }}</template>
-			<p><img :src="previewUrl" class="img" :alt="emojiName" /></p>
-		</FormSection>
-		<FormButton primary class="_formBlock" @click="uploadEmoji">{{ $ts.emojiApproval }}</FormButton>
-		<FormSection>
-			<template #label>{{ $ts.settings }}</template>
-			<FormInput v-model="emojiName" class="_formBlock">
-				<template #label>{{ $ts.emojiName }}</template>
-			</FormInput>
+<MkStickyContainer>
+	<template #header><XHeader v-model:tab="tab" :tabs="headerTabs" /></template>
+		<MkSpacer :content-max="700" :margin-min="16" :margin-max="32">
+			<div class="cwepdizn _formRoot">
+				<div v-if="tab === 'string'" class="local">
+					<FormSection>
+						<template #label>{{ $ts.preview }}</template>
+						<p><img :src="previewUrl" class="img" :alt="emojiName" /></p>
+					</FormSection>
+					<FormButton primary class="_formBlock" @click="uploadEmoji('url')">{{ $ts.emojiApproval }}</FormButton>
+					<FormSection>
+						<template #label>{{ $ts.settings }}</template>
+						<FormInput v-model="emojiName" class="_formBlock">
+							<template #label>{{ $ts.emojiName }}</template>
+						</FormInput>
 
-			<FormTextarea v-model="text" class="_formBlock">
-				<template #label>{{ $ts.text }}</template>
-			</FormTextarea>
+						<FormTextarea v-model="text" class="_formBlock">
+							<template #label>{{ $ts.text }}</template>
+						</FormTextarea>
 
-			<FormRadios v-model="emojiAlign" class="_formBlock">
-				<template #label>{{ $ts.emojiAlign }}</template>
-				<option value="left"><i class="fas fa-align-left"/></option>
-				<option value="center"><i class="fas fa-align-center"></i></option>
-				<option value="right"><i class="fas fa-align-right"/></option>
-			</FormRadios>
+						<FormRadios v-model="emojiAlign" class="_formBlock">
+							<template #label>{{ $ts.emojiAlign }}</template>
+							<option value="left"><i class="fas fa-align-left"/></option>
+							<option value="center"><i class="fas fa-align-center"></i></option>
+							<option value="right"><i class="fas fa-align-right"/></option>
+						</FormRadios>
 
-			<FormFolder :default-open="false" class="_formBlock">
-				<template #label>{{ $ts.emojiSizeSetting }}</template>
-				<FormSection>
-					<FormSwitch v-model="emojiSizeFixed" class="_formBlock">
-						<template #label>{{ $ts.emojiSizeFixed }}</template>
-					</FormSwitch>
+						<FormFolder :default-open="false" class="_formBlock">
+							<template #label>{{ $ts.emojiSizeSetting }}</template>
+							<FormSection>
+								<FormSwitch v-model="emojiSizeFixed" class="_formBlock">
+									<template #label>{{ $ts.emojiSizeFixed }}</template>
+								</FormSwitch>
 
-					<FormSwitch v-model="emojiStretch" class="_formBlock">
-						<template #label>{{ $ts.emojiStretch }}</template>
-					</FormSwitch>
-				</FormSection>
-			</FormFolder>
+								<FormSwitch v-model="emojiStretch" class="_formBlock">
+									<template #label>{{ $ts.emojiStretch }}</template>
+								</FormSwitch>
+							</FormSection>
+						</FormFolder>
 
-			<FormFolder :default-open="false" class="_formBlock">
-				<template #label>{{ $ts._pages.font }}</template>
-				<FormRadios v-model="font" class="_formBlock">
-					<option value="notosans-mono-bold">Noto Sans Mono CJK JP Bold</option>
-					<option value="mplus-1p-black">M+ 1p black</option>
-					<option value="rounded-x-mplus-1p-black">Rounded M+ 1p black</option>
-					<option value="ipamjm">IPAmj明朝</option>
-					<option value="aoyagireisyoshimo">青柳隷書しも</option>
-					<option value="LinLibertine_RBah">LinLibertine Bold</option>
-				</FormRadios>
-			</FormFolder>
+						<FormFolder :default-open="false" class="_formBlock">
+							<template #label>{{ $ts._pages.font }}</template>
+							<FormRadios v-model="font" class="_formBlock">
+								<option value="notosans-mono-bold">Noto Sans Mono CJK JP Bold</option>
+								<option value="mplus-1p-black">M+ 1p black</option>
+								<option value="rounded-x-mplus-1p-black">Rounded M+ 1p black</option>
+								<option value="ipamjm">IPAmj明朝</option>
+								<option value="aoyagireisyoshimo">青柳隷書しも</option>
+								<option value="LinLibertine_RBah">LinLibertine Bold</option>
+							</FormRadios>
+						</FormFolder>
 
 
-			<FormFolder :default-open="false" class="_formBlock">
-				<template #label>{{ $ts.emojiColor }}</template>
-				<FormSection>
-					<div class="cwepdizn-colors">
-						<div class="row">
-							<button v-for="color in accentColors" :key="color" class="color rounded _button" @click="setAccentColor(color)">
-								<div class="preview" :style="{ background: color }"></div>
-							</button>
+						<FormFolder :default-open="false" class="_formBlock">
+							<template #label>{{ $ts.emojiColor }}</template>
+							<FormSection>
+								<div class="cwepdizn-colors">
+									<div class="row">
+										<button v-for="color in accentColors" :key="color" class="color rounded _button" @click="setAccentColor(color)">
+											<div class="preview" :style="{ background: color }"></div>
+										</button>
+									</div>
+								</div>
+
+								<FormInput v-model="emojiColor" class="_formBlock" :style="{ color: '#' + emojiColor }">
+									<template #prefix><i class="fas fa-palette"></i></template>
+									<template #label @click="colorPick()">{{ $ts.emojiColor }}</template>
+									<template #caption>#RRGGBB</template>
+								</FormInput>
+								<FormButton @click="colorPick()">{{ $ts.colorPicker }}</FormButton>
+							</FormSection>
+						</FormFolder>
+					</FormSection>
+				</div>
+
+				<div v-else-if="tab === 'misetehoshii'" class="remote">
+					<FormSection>
+						<template #label>{{ $ts.preview }}</template>
+						<canvas class="preview__content" ref="canvas" width="64" height="30" />
+					</FormSection>
+					<FormButton primary class="_formBlock" @click="uploadEmoji('')">{{ $ts.emojiApproval }}</FormButton>
+					<FormSection>
+						<template #label>{{ $ts.settings }}</template>
+						<FormInput v-model="emojiName" class="_formBlock">
+							<template #label>{{ $ts.emojiName }}</template>
+						</FormInput>
+
+						<FormTextarea v-model="text" value="見せてほしい" class="_formBlock">
+							<template #label>{{ $ts.text }}</template>
+						</FormTextarea>
+
+						<FormRadios v-model="backColor" class="_formBlock">
+							<template #label>{{ $ts._theme.color }}</template>
+							<option v-for="c in backColors" v-bind:value="c">{{c}}</option>
+						</FormRadios>
+					</FormSection>
+					<FormSection>
+						<template #label>見せてほしいメーカー</template>
+						<div>Powered by <MkLink url="https://github.com/melt-adzuki/misetehoshii">misetehoshii</MkLink>
 						</div>
-					</div>
-
-					<FormInput v-model="emojiColor" class="_formBlock" :style="{ color: '#' + emojiColor }">
-						<template #prefix><i class="fas fa-palette"></i></template>
-						<template #label @click="colorPick()">{{ $ts.emojiColor }}</template>
-						<template #caption>#RRGGBB</template>
-					</FormInput>
-					<FormButton @click="colorPick()">{{ $ts.colorPicker }}</FormButton>
-				</FormSection>
-			</FormFolder>
-		</FormSection>
-	</div>
-</MkSpacer>
+					</FormSection>
+				</div>
+			</div>
+		</MkSpacer>
+</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
@@ -80,6 +113,10 @@ import * as os from '@/os';
 import { i18n } from '@/i18n';
 import { defaultStore } from '@/store';
 import { stream } from '@/stream';
+import { uploadFile } from '@/scripts/upload';
+import XHeader from './_header_.vue';
+import MkTab from '@/components/MkTab.vue';
+import MkLink from '@/components/MkLink.vue';
 import FormSection from '@/components/form/section.vue';
 import FormInput from '@/components/form/input.vue';
 import FormSwitch from '@/components/form/switch.vue';
@@ -88,6 +125,22 @@ import FormRadios from '@/components/form/radios.vue';
 import FormTextarea from '@/components/form/textarea.vue';
 import FormFolder from '@/components/form/folder.vue';
 import { definePageMetadata } from '@/scripts/page-metadata';
+import { buttonImages } from "misetehoshii/src/assets";
+import { draw } from "misetehoshii/src/canvas"
+
+definePageMetadata(computed(() => ({
+	title: i18n.ts.emojiGen,
+	icon: 'fas fa-kiss-wink-heart',
+})));
+
+const tab = ref('string');
+const headerTabs = $computed(() => [{
+	key: 'string',
+	title: 'もじもじ',
+}, {
+	key: 'misetehoshii',
+	title: '見せてほしい',
+}]);
 
 const font = ref('rounded-x-mplus-1p-black');
 const text = ref('');
@@ -111,8 +164,27 @@ const accentColors = [
 	'#8080ff',
 ];
 
-watch([font, text, emojiAlign, emojiSizeFixed, emojiStretch, emojiColor], () => {
+const backColor = ref('blue')
+const canvas = ref<HTMLCanvasElement>()
+const buttonImage = computed(() => buttonImages[backColor.value])
+const backColors = [
+	'blue',
+	'peacockGreen',
+	'green',
+	'yellow',
+	'red',
+	'pink',
+	'disabled',
+];
+
+const updateCanvas = (): void => {
+	const context = canvas.value!.getContext("2d")!
+	draw({ context, text: text.value, button: buttonImage.value })
+}
+
+watch([font, text, emojiAlign, emojiSizeFixed, emojiStretch, emojiColor, backColor], () => {
 	preview();
+	updateCanvas();
 });
 
 const colorPick = (): void => {
@@ -197,33 +269,57 @@ const getEmojiObject = emojiId => new Promise<Record<string, any> | null>(async
 	resolve(id[0]);
 });
 
-const uploadEmoji = async () => {
-	const emojiUrl = makeUrl();
-	const fileId = await uploadFileFromUrlWithId(emojiUrl);
+const uploadEmoji = async (type: string) => {
 
-	// ドライブにアップロードされたファイルをリネーム
-	await os.api('drive/files/update', {
-		fileId,
-		name: emojiName.value + '.png',
-	});
+	if (type == 'url') {
+		const emojiUrl = makeUrl();
+		const fileId = await uploadFileFromUrlWithId(emojiUrl);
 
-	const emojiId = await os.api('admin/emoji/add', { fileId });
-	const emoji = await getEmojiObject(emojiId);
-
-	if (!emoji) {
-		os.alert({
-			type: 'error',
-			text: i18n.ts.failedToUploadEmoji,
+		// ドライブにアップロードされたファイルをリネーム
+		await os.api('drive/files/update', {
+			fileId,
+			name: emojiName.value + '.png',
 		});
+
+		const emojiId = await os.api('admin/emoji/add', { fileId });
+		const emoji = await getEmojiObject(emojiId);
+
+		if (!emoji) {
+			os.alert({
+				type: 'error',
+				text: i18n.ts.failedToUploadEmoji,
+			});
+		}
+		os.popup(defineAsyncComponent(() => import('./emoji-edit-dialog.vue')), { emoji });
+	} else {
+		const canvasImg = new Promise<Blob>(resolve => {
+			canvas.value!.toBlob(blob => resolve(blob?.slice(0, blob.size, 'image/png') as Blob));
+		})
+		const file = new File([await canvasImg], emojiName.value + '.png', { type: 'image/png' });
+		const fileId = (await uploadFile(file, defaultStore.state.uploadFolder, undefined, true)).id
+
+		// ドライブにアップロードされたファイルをリネーム
+		await os.api('drive/files/update', {
+			fileId,
+			name: emojiName.value + '.png',
+		});
+
+		const emojiId = await os.api('admin/emoji/add', { fileId });
+		const emoji = await getEmojiObject(emojiId);
+
+		if (!emoji) {
+			os.alert({
+				type: 'error',
+				text: i18n.ts.failedToUploadEmoji,
+			});
+		}
+		os.popup(defineAsyncComponent(() => import('./emoji-edit-dialog.vue')), { emoji });
 	}
 
-	os.popup(defineAsyncComponent(() => import('./emoji-edit-dialog.vue')), { emoji });
+
 };
 
-definePageMetadata(computed(() => ({
-	title: i18n.ts.emojiGen,
-	icon: 'fas fa-kiss-wink-heart',
-})));
+
 </script>
 
 <style lang="scss" scoped>

packages/client/src/pages/ytplayer.vue

@@ -0,0 +1,83 @@
+<template>
+	<div class="poamfof fill">
+		<transition :name="$store.state.animation ? 'fade' : ''" mode="out-in">
+			<div v-if="player.url" class="player">
+				<iframe v-if="!fetching" :src="player.url + (player.url.match(/\?/) ? '&autoplay=1&auto_play=1' : '?autoplay=1&auto_play=1')" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen/>
+			</div>
+		</transition>
+		<MkLoading v-if="fetching" />
+		<MkError v-else-if="!player.url" @retry="ytFetch()" />
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { definePageMetadata } from '@/scripts/page-metadata';
+import { computed } from 'vue';
+import { lang } from '@/config';
+
+const props = defineProps<{
+    url: string;
+}>();
+
+const requestUrl = new URL(props.url);
+
+let fetching = $ref(true);
+let title = $ref<string | null>(null);
+let player = $ref({
+    url: null,
+    width: null,
+    height: null,
+});
+
+const requestLang = (lang || 'ja-JP').replace('ja-KS', 'ja-JP');
+
+const ytFetch = () => {
+	fetching = true;
+	fetch(`/url?url=${encodeURIComponent(requestUrl.href)}&lang=${requestLang}`).then(res => {
+		res.json().then(info => {
+			if (info.url == null) return;
+			title = info.title;
+			fetching = false;
+			player = info.player;
+		});
+	});
+};
+
+ytFetch();
+
+definePageMetadata(computed(() => props.url ? {
+	title: title?.toString() || 'Youtube Player',
+	path: `/notes/${props.url}`,
+	icon: 'fa-brands fa-youtube'
+} : null));
+
+</script>
+
+<style lang="scss">
+.poamfof {
+	position: relative;
+	overflow: hidden;
+	min-height: 64px;
+
+	.player {
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		height: calc(100% - 10px);
+		width: calc(100% - 10px);
+		padding: 5px;
+
+		iframe {
+			width: 100%;
+			height: 100%;
+			border-radius: 0 0 var(--radius) var(--radius);
+		}
+	}
+}
+
+.fill {
+	height: 100%;
+}
+</style>

packages/client/src/router.ts

@@ -449,6 +449,9 @@ export const routes = [{
 	path: '/timeline/antenna/:antennaId',
 	component: page(() => import('./pages/antenna-timeline.vue')),
 	loginRequired: true,
+}, {
+	path: '/ytplayer/:url',
+	component: page(() => import('./pages/ytplayer.vue')),
 }, {
 	name: 'index',
 	path: '/',

packages/client/src/scripts/reactionImportMenu.ts

@@ -0,0 +1,114 @@
+import { defineAsyncComponent } from 'vue';
+import { $i } from '@/account';
+import { i18n } from '@/i18n';
+import * as os from '@/os';
+import copyToClipboard from '@/scripts/copy-to-clipboard';
+import { MenuItem } from '@/types/menu';
+
+export async function openReactionImportMenu(ev: MouseEvent, reaction: string): Promise<void> {
+	if (!reaction) return;
+
+	const host = reaction.match(/(?<=@).*\.*(?=:)/g)?.[0];
+	const name = reaction.match(/(?<=:).*(?=@.*\.*(?=:))/g)?.[0];
+	const isLocal = (host === null || host === '.');
+	const isCustom = reaction.startsWith(':');
+
+	const getEmojiObject = (emojiId): Promise<Record<string, any> | null> => new Promise<Record<string, any> | null>(async resolve => {
+		const sinceId = await os.api('admin/emoji/list', {
+			limit: 1,
+			untilId: emojiId.id,
+		});
+
+		if (!sinceId || !sinceId[0] || !sinceId[0].id) {
+			resolve(null);
+			return;
+		}
+
+		const id = await os.api('admin/emoji/list', {
+			limit: 1,
+			sinceId: sinceId[0].id,
+		});
+
+		if (!id || !id[0]) {
+			resolve(null);
+			return;
+		}
+
+		resolve(id[0]);
+	});
+
+	const getEmojiId = async (): Promise<string | null> => {
+		if (isLocal) return null;
+		if (!host || !name) return null;
+
+		const resList: Record<string, any>[] = await os.api('admin/emoji/list-remote', {
+			host,
+			query: name,
+			limit: 100,
+		});
+
+		const emojiId = await resList.find(emoji => emoji.name === name && emoji.host === host)?.id;
+
+		return emojiId;
+	};
+
+	const importEmoji = async (): Promise<void> => {
+		const emojiId = await getEmojiId();
+		if (!await emojiId) return;
+		os.api('admin/emoji/copy', {
+			emojiId: emojiId,
+		}).then(async emoji => os.popup(defineAsyncComponent(() => import('@/pages/admin/emoji-edit-dialog.vue')), {
+			emoji: await getEmojiObject(emoji),
+		}));
+	};
+
+	const menuItems: MenuItem[] = [{
+		type: 'label',
+		text: reaction,
+	}, {
+		type: 'button',
+		icon: 'fas fa-copy',
+		text: i18n.ts.copy,
+		action: (): void => {
+			copyToClipboard(isCustom ? `:${name}:` : reaction);
+		},
+	}];
+
+	const emojiId = await getEmojiId() ? await getEmojiId() : reaction;
+
+	if (
+		isCustom &&
+		emojiId &&
+		($i?.isAdmin || $i?.isModerator) &&
+		!isLocal
+	) {
+		menuItems.push({
+			type: 'button',
+			icon: 'fas fa-download',
+			text: i18n.ts.import,
+			action: async () => {
+				const duplication: boolean = await os.api('meta').then(meta => {
+					const emojis = meta.emojis;
+					return emojis.some((emoji) => {
+						return (emoji.name === name);
+					});
+				});
+
+				if (await duplication) {
+					os.confirm({
+						type: 'warning',
+						text: i18n.ts.duplicateEmoji,
+					}).then(res => {
+						if (res.canceled) return;
+						importEmoji();
+					});
+				} else {
+					importEmoji();
+				}
+			},
+		});
+	}
+
+	os.contextMenu(menuItems, ev);
+}
+

packages/client/yarn.lock

@@ -1226,6 +1226,11 @@ delayed-stream@~1.0.0:
   resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
   integrity sha1-3zrhmayt+31ECqrgsp4icrJOxhk=
 
+destyle.css@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/destyle.css/-/destyle.css-3.0.2.tgz#80c331db91f02337040b62dc534ab4f3dc075546"
+  integrity sha512-OUzuAlridP01YP0seHxx+FgwhdXF07Ls9NxnJpR8EI7ADioswoR7VKkBd/s1hNw/G4ILasLSA0k2Kw1M57r1kA==
+
 detect-node@2.1.0, detect-node@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/detect-node/-/detect-node-2.1.0.tgz#c9c70775a49c3d03bc2c06d9a73be550f978f8b1"
@@ -2616,6 +2621,13 @@ minimist@^1.2.0, minimist@^1.2.5, minimist@^1.2.6:
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.6.tgz#8637a5b759ea0d6e98702cfb3a9283323c93af44"
   integrity sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==
 
+"misetehoshii@https://github.com/melt-adzuki/misetehoshii":
+  version "0.0.0"
+  resolved "https://github.com/melt-adzuki/misetehoshii#d00f51529e390808f92172000f960b4f1314f37c"
+  dependencies:
+    destyle.css "^3.0.2"
+    vue "^3.2.37"
+
 misskey-js@0.0.14:
   version "0.0.14"
   resolved "https://registry.yarnpkg.com/misskey-js/-/misskey-js-0.0.14.tgz#1a616bdfbe81c6ee6900219eaf425bb5c714dd4d"
@@ -3621,7 +3633,7 @@ vue-prism-editor@2.0.0-alpha.2:
   resolved "https://registry.yarnpkg.com/vue-prism-editor/-/vue-prism-editor-2.0.0-alpha.2.tgz#aa53a88efaaed628027cbb282c2b1d37fc7c5c69"
   integrity sha512-Gu42ba9nosrE+gJpnAEuEkDMqG9zSUysIR8SdXUw8MQKDjBnnNR9lHC18uOr/ICz7yrA/5c7jHJr9lpElODC7w==
 
-vue@3.2.39:
+vue@3.2.39, vue@^3.2.37:
   version "3.2.39"
   resolved "https://registry.yarnpkg.com/vue/-/vue-3.2.39.tgz#de071c56c4c32c41cbd54e55f11404295c0dd62d"
   integrity sha512-tRkguhRTw9NmIPXhzk21YFBqXHT2t+6C6wPOgQ50fcFVWnPdetmRqbmySRHznrYjX2E47u0cGlKGcxKZJ38R/g==