From 1a2f1a5bfb12c69215ed58cc4f80ad5d49e21753 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Sun, 20 Oct 2024 16:26:39 +0900
Subject: [PATCH 1/8] =?UTF-8?q?enhance(frontend):=20=E6=8A=95=E7=A8=BF?=
 =?UTF-8?q?=E3=83=95=E3=82=A9=E3=83=BC=E3=83=A0=E3=81=AE=E8=A8=AD=E5=AE=9A?=
 =?UTF-8?q?=E3=83=A1=E3=83=8B=E3=83=A5=E3=83=BC=E3=82=92=E6=94=B9=E8=89=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 locales/index.d.ts                            |   8 +
 locales/ja-JP.yml                             |   2 +
 .../frontend/src/components/MkPostForm.vue    |  49 +--
 .../src/components/MkPostFormOtherMenu.vue    | 321 ++++++++++++++++++
 packages/frontend/src/filters/number.ts       |   2 +-
 5 files changed, 361 insertions(+), 21 deletions(-)
 create mode 100644 packages/frontend/src/components/MkPostFormOtherMenu.vue

diff --git a/locales/index.d.ts b/locales/index.d.ts
index b5af5909a3..5af999b16b 100644
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@@ -5190,6 +5190,14 @@ export interface Locale extends ILocale {
      * 名前に禁止されている文字列が含まれています。この名前を使用したい場合は、サーバー管理者にお問い合わせください。
      */
     "yourNameContainsProhibitedWordsDescription": string;
+    /**
+     * 文字数
+     */
+    "textCount": string;
+    /**
+     * リセット
+     */
+    "reset": string;
     "_abuseUserReport": {
         /**
          * 転送
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index c448d4d50a..d4b2d8dcc8 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -1293,6 +1293,8 @@ prohibitedWordsForNameOfUser: "禁止ワード（ユーザーの名前）"
 prohibitedWordsForNameOfUserDescription: "このリストに含まれる文字列がユーザーの名前に含まれる場合、ユーザーの名前の変更を拒否します。モデレーター権限を持つユーザーはこの制限の影響を受けません。"
 yourNameContainsProhibitedWords: "変更しようとした名前に禁止された文字列が含まれています"
 yourNameContainsProhibitedWordsDescription: "名前に禁止されている文字列が含まれています。この名前を使用したい場合は、サーバー管理者にお問い合わせください。"
+textCount: "文字数"
+reset: "リセット"
 
 _abuseUserReport:
   forward: "転送"
diff --git a/packages/frontend/src/components/MkPostForm.vue b/packages/frontend/src/components/MkPostForm.vue
index 76a6e4212a..29c306ea35 100644
--- a/packages/frontend/src/components/MkPostForm.vue
+++ b/packages/frontend/src/components/MkPostForm.vue
@@ -20,7 +20,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</div>
 		<div :class="$style.headerRight">
 			<template v-if="!(channel != null && fixed)">
-				<button v-if="channel == null" ref="visibilityButton" v-click-anime v-tooltip="i18n.ts.visibility" :class="['_button', $style.headerRightItem, $style.visibility]" @click="setVisibility">
+				<button v-if="channel == null" ref="visibilityButton" v-tooltip="i18n.ts.visibility" :class="['_button', $style.headerRightItem, $style.visibility]" @click="setVisibility">
 					<span v-if="visibility === 'public'"><i class="ti ti-world"></i></span>
 					<span v-if="visibility === 'home'"><i class="ti ti-home"></i></span>
 					<span v-if="visibility === 'followers'"><i class="ti ti-lock"></i></span>
@@ -32,15 +32,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<span :class="$style.headerRightButtonText">{{ channel.name }}</span>
 				</button>
 			</template>
-			<button v-click-anime v-tooltip="i18n.ts._visibility.disableFederation" class="_button" :class="[$style.headerRightItem, { [$style.danger]: localOnly }]" :disabled="channel != null || visibility === 'specified'" @click="toggleLocalOnly">
+			<button v-tooltip="i18n.ts._visibility.disableFederation" class="_button" :class="[$style.headerRightItem, { [$style.danger]: localOnly }]" :disabled="channel != null || visibility === 'specified'" @click="toggleLocalOnly">
 				<span v-if="!localOnly"><i class="ti ti-rocket"></i></span>
 				<span v-else><i class="ti ti-rocket-off"></i></span>
 			</button>
-			<button v-click-anime v-tooltip="i18n.ts.reactionAcceptance" class="_button" :class="[$style.headerRightItem, { [$style.danger]: reactionAcceptance === 'likeOnly' }]" @click="toggleReactionAcceptance">
-				<span v-if="reactionAcceptance === 'likeOnly'"><i class="ti ti-heart"></i></span>
-				<span v-else-if="reactionAcceptance === 'likeOnlyForRemote'"><i class="ti ti-heart-plus"></i></span>
-				<span v-else><i class="ti ti-icons"></i></span>
-			</button>
+			<button ref="otherSettingsButton" v-tooltip="i18n.ts.other" class="_button" :class="$style.headerRightItem" @click="showOtherSettings"><i class="ti ti-dots"></i></button>
 			<button v-click-anime class="_button" :class="$style.submit" :disabled="!canPost" data-cy-open-post-form-submit @click="post">
 				<div :class="$style.submitInner">
 					<template v-if="posted"></template>
@@ -174,6 +170,7 @@ const textareaEl = shallowRef<HTMLTextAreaElement | null>(null);
 const cwInputEl = shallowRef<HTMLInputElement | null>(null);
 const hashtagsInputEl = shallowRef<HTMLInputElement | null>(null);
 const visibilityButton = shallowRef<HTMLElement>();
+const otherSettingsButton = shallowRef<HTMLElement>();
 
 const posting = ref(false);
 const posted = ref(false);
@@ -527,20 +524,32 @@ async function toggleLocalOnly() {
 	}
 }
 
-async function toggleReactionAcceptance() {
-	const select = await os.select({
-		title: i18n.ts.reactionAcceptance,
-		items: [
-			{ value: null, text: i18n.ts.all },
-			{ value: 'likeOnlyForRemote' as const, text: i18n.ts.likeOnlyForRemote },
-			{ value: 'nonSensitiveOnly' as const, text: i18n.ts.nonSensitiveOnly },
-			{ value: 'nonSensitiveOnlyForLocalLikeOnlyForRemote' as const, text: i18n.ts.nonSensitiveOnlyForLocalLikeOnlyForRemote },
-			{ value: 'likeOnly' as const, text: i18n.ts.likeOnly },
-		],
-		default: reactionAcceptance.value,
+function showOtherSettings() {
+	const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkPostFormOtherMenu.vue')), {
+		currentReactionAcceptance: reactionAcceptance.value,
+		textLength: textLength.value,
+		src: otherSettingsButton.value,
+	}, {
+		changeReactionAcceptance: (value: Misskey.entities.Note['reactionAcceptance']) => {
+			reactionAcceptance.value = value;
+		},
+		reset: () => {
+			reset();
+		},
+		closed: () => dispose(),
 	});
-	if (select.canceled) return;
-	reactionAcceptance.value = select.result;
+}
+
+function reset() {
+	text.value = '';
+	cw.value = null;
+	useCw.value = false;
+	visibility.value = defaultStore.state.rememberNoteVisibility ? defaultStore.state.visibility : defaultStore.state.defaultNoteVisibility;
+	localOnly.value = defaultStore.state.rememberNoteVisibility ? defaultStore.state.localOnly : defaultStore.state.defaultNoteLocalOnly;
+	files.value = [];
+	poll.value = null;
+	quoteId.value = null;
+	reactionAcceptance.value = defaultStore.state.reactionAcceptance;
 }
 
 function pushVisibleUser(user: Misskey.entities.UserDetailed) {
diff --git a/packages/frontend/src/components/MkPostFormOtherMenu.vue b/packages/frontend/src/components/MkPostFormOtherMenu.vue
new file mode 100644
index 0000000000..7d0406d562
--- /dev/null
+++ b/packages/frontend/src/components/MkPostFormOtherMenu.vue
@@ -0,0 +1,321 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<MkModal ref="modal" v-slot="{ type }" :zPriority="'high'" :src="src" :transparentBg="true" @click="modal?.close()" @closed="emit('closed')" @esc="modal?.close()">
+	<div class="_popup _shadow" :class="{ [$style.root]: true, [$style.asDrawer]: type === 'drawer' }">
+		<div :class="$style.textCountRoot">
+			<div :class="$style.textCountLabel">{{ i18n.ts.textCount }}</div>
+			<div
+				:class="[$style.textCount,
+					{ [$style.danger]: textCountPercentage > 100 },
+					{ [$style.warning]: textCountPercentage > 90 && textCountPercentage <= 100 },
+				]"
+			>
+				<div :class="$style.textCountGraph"></div>
+				<div><span :class="$style.textCountCurrent">{{ number(textLength) }}</span> / {{ number(maxTextLength) }}</div>
+			</div>
+		</div>
+		<div :class="$style.menuRoot">
+			<button
+				role="menuitem"
+				tabindex="0"
+				:class="['_button', $style.item]"
+				@click.prevent="toggleReactionAcceptance"
+			>
+				<i
+					class="ti-fw"
+					:class="[$style.icon, {
+						'ti ti-heart': props.currentReactionAcceptance === 'likeOnly',
+						[$style.danger]: props.currentReactionAcceptance === 'likeOnly',
+						'ti ti-heart-plus': props.currentReactionAcceptance === 'likeOnlyForRemote',
+						'ti ti-icons': props.currentReactionAcceptance == null || !['likeOnly', 'likeOnlyForRemote'].includes(props.currentReactionAcceptance),
+					}]"
+				></i>
+				<div :class="$style.menuItem_content">
+					<span :class="$style.menuItem_content_text">{{ i18n.ts.reactionAcceptance }}</span>
+				</div>
+			</button>
+			<div role="separator" tabindex="-1" :class="$style.divider"></div>
+			<button
+				role="menuitem"
+				tabindex="0"
+				:class="['_button', $style.item, $style.danger]"
+				@click.prevent="reset"
+			>
+				<i
+					class="ti-fw ti ti-trash"
+					:class="$style.icon"
+				></i>
+				<div :class="$style.menuItem_content">
+					<span :class="$style.menuItem_content_text">{{ i18n.ts.reset }}</span>
+				</div>
+			</button>
+		</div>
+	</div>
+</MkModal>
+</template>
+
+<script lang="ts" setup>
+import { shallowRef, computed } from 'vue';
+import * as Misskey from 'misskey-js';
+import MkModal from '@/components/MkModal.vue';
+import { instance } from '@/instance.js';
+import { i18n } from '@/i18n.js';
+import * as os from '@/os.js';
+import number from '@/filters/number.js';
+
+const modal = shallowRef<InstanceType<typeof MkModal>>();
+
+const props = defineProps<{
+	currentReactionAcceptance: Misskey.entities.Note['reactionAcceptance'];
+	textLength: number;
+	src?: HTMLElement;
+}>();
+
+const emit = defineEmits<{
+	(ev: 'changeReactionAcceptance', value: Misskey.entities.Note['reactionAcceptance']): void;
+	(ev: 'reset'): void;
+	(ev: 'closed'): void;
+}>();
+
+const maxTextLength = computed(() => {
+	return instance ? instance.maxNoteTextLength : 1000;
+});
+
+const textCountPercentage = computed(() => {
+	return props.textLength / maxTextLength.value * 100;
+});
+
+async function toggleReactionAcceptance() {
+	const select = await os.select({
+		title: i18n.ts.reactionAcceptance,
+		items: [
+			{ value: null, text: i18n.ts.all },
+			{ value: 'likeOnlyForRemote' as const, text: i18n.ts.likeOnlyForRemote },
+			{ value: 'nonSensitiveOnly' as const, text: i18n.ts.nonSensitiveOnly },
+			{ value: 'nonSensitiveOnlyForLocalLikeOnlyForRemote' as const, text: i18n.ts.nonSensitiveOnlyForLocalLikeOnlyForRemote },
+			{ value: 'likeOnly' as const, text: i18n.ts.likeOnly },
+		],
+		default: props.currentReactionAcceptance,
+	});
+	if (select.canceled) return;
+	emit('changeReactionAcceptance', select.result);
+	modal.value?.close();
+}
+
+async function reset() {
+	const { canceled } = await os.confirm({
+		type: 'question',
+		text: i18n.ts.resetAreYouSure,
+	});
+	if (canceled) return;
+
+	emit('reset');
+	modal.value?.close();
+}
+</script>
+
+<style lang="scss" module>
+.root {
+	min-width: 200px;
+
+	&.asDrawer {
+		width: 100%;
+		border-radius: 24px;
+		border-bottom-right-radius: 0;
+		border-bottom-left-radius: 0;
+
+		.textCountRoot {
+			padding: 12px 24px;
+		}
+
+		.menuRoot {
+			padding-bottom: max(env(safe-area-inset-bottom, 0px), 12px);
+
+			> .item {
+				font-size: 1em;
+				padding: 12px 24px;
+
+				&::before {
+					width: calc(100% - 24px);
+					border-radius: 12px;
+				}
+
+				> .icon {
+					margin-right: 14px;
+					width: 24px;
+				}
+			}
+
+			> .divider {
+				margin: 12px 0;
+			}
+		}
+	}
+}
+
+.textCountRoot {
+	--textCountBg: color-mix(in srgb, var(--MI_THEME-panel), var(--MI_THEME-fg) 15%);
+	background-color: var(--textCountBg);
+	padding: 10px 14px;
+}
+
+.textCountLabel {
+	font-size: 11px;
+	opacity: 0.8;
+	margin-bottom: 4px;
+}
+
+.textCount {
+	display: flex;
+	gap: var(--MI-marginHalf);
+	align-items: center;
+	font-size: 12px;
+	--countColor: var(--MI_THEME-accent);
+
+	&.danger {
+		--countColor: var(--MI_THEME-error);
+	}
+
+	&.warning {
+		--countColor: var(--MI_THEME-warn);
+	}
+
+	.textCountGraph {
+		position: relative;
+		width: 24px;
+		height: 24px;
+		border-radius: 50%;
+		background-image: conic-gradient(
+			var(--countColor) 0% v-bind("Math.min(100, textCountPercentage) + '%'"),
+			rgba(0, 0, 0, .2) v-bind("Math.min(100, textCountPercentage) + '%'") 100%
+		);
+
+		&::after {
+			content: '';
+			position: absolute;
+			width: 16px;
+			height: 16px;
+			border-radius: 50%;
+			background-color: var(--textCountBg);
+			top: 50%;
+			left: 50%;
+			transform: translate(-50%, -50%);
+		}
+	}
+
+	.textCountCurrent {
+		color: var(--countColor);
+		font-weight: 700;
+		font-size: 18px;
+	}
+}
+
+.menuRoot {
+	padding: 8px 0;
+
+	> .item {
+		display: flex;
+		align-items: center;
+		position: relative;
+		padding: 5px 16px;
+		width: 100%;
+		box-sizing: border-box;
+		white-space: nowrap;
+		font-size: 0.9em;
+		line-height: 20px;
+		text-align: left;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		text-decoration: none !important;
+		color: var(--menuFg, var(--MI_THEME-fg));
+
+		&::before {
+			content: "";
+			display: block;
+			position: absolute;
+			z-index: -1;
+			top: 0;
+			left: 0;
+			right: 0;
+			margin: auto;
+			width: calc(100% - 16px);
+			height: 100%;
+			border-radius: 6px;
+		}
+
+		&:focus-visible {
+			outline: none;
+
+			&:not(:hover):not(:active)::before {
+				outline: var(--MI_THEME-focus) solid 2px;
+				outline-offset: -2px;
+			}
+		}
+
+		&:hover,
+		&:focus-visible:active,
+		&:focus-visible.active {
+			color: var(--menuHoverFg, var(--MI_THEME-accent));
+
+			&::before {
+				background-color: var(--menuHoverBg, var(--MI_THEME-accentedBg));
+			}
+		}
+
+		&:not(:focus-visible):active,
+		&:not(:focus-visible).active {
+			color: var(--menuActiveFg, var(--MI_THEME-fgOnAccent));
+
+			&::before {
+				background-color: var(--menuActiveBg, var(--MI_THEME-accent));
+			}
+		}
+
+		&:disabled {
+			cursor: not-allowed;
+		}
+
+		&.danger {
+			--menuFg: #ff2a2a;
+			--menuHoverFg: #fff;
+			--menuHoverBg: #ff4242;
+			--menuActiveFg: #fff;
+			--menuActiveBg: #d42e2e;
+		}
+
+		.icon {
+			margin-right: 8px;
+			line-height: 1;
+		}
+
+		.icon.danger {
+			color: var(--MI_THEME-error);
+		}
+	}
+
+	> .divider {
+		margin: 8px 0;
+		border-top: solid 0.5px var(--MI_THEME-divider);
+	}
+}
+
+.menuItem_content {
+	width: 100%;
+	max-width: 100vw;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 8px;
+	text-overflow: ellipsis;
+}
+
+.menuItem_content_text {
+	max-width: calc(100vw - 4rem);
+	text-overflow: ellipsis;
+	overflow: hidden;
+}
+</style>
diff --git a/packages/frontend/src/filters/number.ts b/packages/frontend/src/filters/number.ts
index 10fb64deb4..479afd58d4 100644
--- a/packages/frontend/src/filters/number.ts
+++ b/packages/frontend/src/filters/number.ts
@@ -5,4 +5,4 @@
 
 import { numberFormat } from '@@/js/intl-const.js';
 
-export default n => n == null ? 'N/A' : numberFormat.format(n);
+export default (n?: number) => n == null ? 'N/A' : numberFormat.format(n);

From c43c7fee57eda42e1b25f999b6f1eb05fe2bbd01 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Sun, 20 Oct 2024 16:27:48 +0900
Subject: [PATCH 2/8] Update Changelog

---
 CHANGELOG.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c3a5e41787..2ed7180003 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,9 @@
 ### Client
 - Enhance: Bull DashboardでRelationship Queueの状態も確認できるように  
   (Cherry-picked from https://github.com/MisskeyIO/misskey/pull/751)
+- Enhance: 投稿フォームの設定メニューを改良
+  - 投稿フォームをリセットできるように
+	- 文字数カウントを復活
 
 ### Server
 -

From 869777983c9665d4fdd013dc8c208ecadbc19e24 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Sun, 20 Oct 2024 16:38:37 +0900
Subject: [PATCH 3/8] indent

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2ed7180003..aaf2d2ac03 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,7 +8,7 @@
   (Cherry-picked from https://github.com/MisskeyIO/misskey/pull/751)
 - Enhance: 投稿フォームの設定メニューを改良
   - 投稿フォームをリセットできるように
-	- 文字数カウントを復活
+  - 文字数カウントを復活
 
 ### Server
 -

From ce3679798c5b642dd0e47056f70657e46b382b5e Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Sun, 20 Oct 2024 17:46:33 +0900
Subject: [PATCH 4/8] =?UTF-8?q?MkMenu=E3=81=AEitem=E3=82=92=E5=88=87?=
 =?UTF-8?q?=E3=82=8A=E5=87=BA=E3=81=97=E3=81=A6=E5=85=B1=E9=80=9A=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../frontend/src/components/MkMenu.item.vue   | 420 ++++++++++++++++++
 packages/frontend/src/components/MkMenu.vue   | 394 +---------------
 packages/frontend/src/components/MkModal.vue  |   3 +-
 .../frontend/src/components/MkPostForm.vue    |  14 +-
 .../src/components/MkPostFormOtherMenu.vue    | 191 ++------
 packages/frontend/src/style.scss              |   4 +
 packages/frontend/src/types/menu.ts           |   2 +
 7 files changed, 483 insertions(+), 545 deletions(-)
 create mode 100644 packages/frontend/src/components/MkMenu.item.vue

diff --git a/packages/frontend/src/components/MkMenu.item.vue b/packages/frontend/src/components/MkMenu.item.vue
new file mode 100644
index 0000000000..0d51cbc2f4
--- /dev/null
+++ b/packages/frontend/src/components/MkMenu.item.vue
@@ -0,0 +1,420 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template :class="{ [$style.asDrawer]: asDrawer, [$style.big]: big, [$style.center]: center }">
+<div v-if="item.type === 'divider'" role="separator" tabindex="-1" :class="$style.divider"></div>
+<span v-else-if="item.type === 'label'" role="menuitem" tabindex="-1" :class="[$style.label, $style.item]">
+	<span style="opacity: 0.7;">{{ item.text }}</span>
+</span>
+<span v-else-if="item.type === 'pending'" role="menuitem" tabindex="0" :class="[$style.pending, $style.item]">
+	<span><MkEllipsis/></span>
+</span>
+<MkA
+	v-else-if="item.type === 'link'"
+	role="menuitem"
+	tabindex="0"
+	:class="['_button', $style.item]"
+	:to="item.to"
+	@click.passive="close(true)"
+	@mouseenter.passive="onItemMouseEnter"
+	@mouseleave.passive="onItemMouseLeave"
+>
+	<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i>
+	<MkAvatar v-if="item.avatar" :user="item.avatar" :class="$style.avatar"/>
+	<div :class="$style.item_content">
+		<span :class="$style.item_content_text">{{ item.text }}</span>
+		<span v-if="item.indicate" :class="$style.indicator" class="_blink"><i class="_indicatorCircle"></i></span>
+	</div>
+</MkA>
+<a
+	v-else-if="item.type === 'a'"
+	role="menuitem"
+	tabindex="0"
+	:class="['_button', $style.item]"
+	:href="item.href"
+	:target="item.target"
+	:rel="item.target === '_blank' ? 'noopener noreferrer' : undefined"
+	:download="item.download"
+	@click.passive="close(true)"
+	@mouseenter.passive="onItemMouseEnter"
+	@mouseleave.passive="onItemMouseLeave"
+>
+	<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i>
+	<div :class="$style.item_content">
+		<span :class="$style.item_content_text">{{ item.text }}</span>
+		<span v-if="item.indicate" :class="$style.indicator" class="_blink"><i class="_indicatorCircle"></i></span>
+	</div>
+</a>
+<button
+	v-else-if="item.type === 'user'"
+	role="menuitem"
+	tabindex="0"
+	:class="['_button', $style.item, { [$style.active]: item.active }]"
+	@click.prevent="item.active ? close(false) : clicked(item.action, $event)"
+	@mouseenter.passive="onItemMouseEnter"
+	@mouseleave.passive="onItemMouseLeave"
+>
+	<MkAvatar :user="item.user" :class="$style.avatar"/><MkUserName :user="item.user"/>
+	<div v-if="item.indicate" :class="$style.item_content">
+		<span :class="$style.indicator" class="_blink"><i class="_indicatorCircle"></i></span>
+	</div>
+</button>
+<button
+	v-else-if="item.type === 'switch'"
+	role="menuitemcheckbox"
+	tabindex="0"
+	:class="['_button', $style.item]"
+	:disabled="unref(item.disabled)"
+	@click.prevent="switchItem(item)"
+	@mouseenter.passive="onItemMouseEnter"
+	@mouseleave.passive="onItemMouseLeave"
+>
+	<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i>
+	<MkSwitchButton v-else :class="$style.switchButton" :checked="item.ref" :disabled="item.disabled" @toggle="switchItem(item)"/>
+	<div :class="$style.item_content">
+		<span :class="[$style.item_content_text, { [$style.switchText]: !item.icon }]">{{ item.text }}</span>
+		<MkSwitchButton v-if="item.icon" :class="[$style.switchButton, $style.caret]" :checked="item.ref" :disabled="item.disabled" @toggle="switchItem(item)"/>
+	</div>
+</button>
+<button
+	v-else-if="item.type === 'radio'"
+	role="menuitem"
+	tabindex="0"
+	:class="['_button', $style.item, $style.parent, { [$style.active]: childShowingItem === item }]"
+	:disabled="unref(item.disabled)"
+	@mouseenter.prevent="preferClick ? null : showRadioOptions(item, $event)"
+	@keydown.enter.prevent="preferClick ? null : showRadioOptions(item, $event)"
+	@click.prevent="!preferClick ? null : showRadioOptions(item, $event)"
+>
+	<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]" style="pointer-events: none;"></i>
+	<div :class="$style.item_content">
+		<span :class="$style.item_content_text" style="pointer-events: none;">{{ item.text }}</span>
+		<span :class="$style.caret" style="pointer-events: none;"><i class="ti ti-chevron-right ti-fw"></i></span>
+	</div>
+</button>
+<button
+	v-else-if="item.type === 'radioOption'"
+	role="menuitemradio"
+	tabindex="0"
+	:class="['_button', $style.item, $style.radio, { [$style.active]: unref(item.active) }]"
+	@click.prevent="unref(item.active) ? null : clicked(item.action, $event, false)"
+	@mouseenter.passive="onItemMouseEnter"
+	@mouseleave.passive="onItemMouseLeave"
+>
+	<div :class="$style.icon">
+		<span :class="[$style.radioIcon, { [$style.radioChecked]: unref(item.active) }]"></span>
+	</div>
+	<div :class="$style.item_content">
+		<span :class="$style.item_content_text">{{ item.text }}</span>
+	</div>
+</button>
+<button
+	v-else-if="item.type === 'parent'"
+	role="menuitem"
+	tabindex="0"
+	:class="['_button', $style.item, $style.parent, { [$style.active]: childShowingItem === item }]"
+	@mouseenter.prevent="preferClick ? null : showChildren(item, $event)"
+	@keydown.enter.prevent="preferClick ? null : showChildren(item, $event)"
+	@click.prevent="!preferClick ? null : showChildren(item, $event)"
+>
+	<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]" style="pointer-events: none;"></i>
+	<div :class="$style.item_content">
+		<span :class="$style.item_content_text" style="pointer-events: none;">{{ item.text }}</span>
+		<span :class="$style.caret" style="pointer-events: none;"><i class="ti ti-chevron-right ti-fw"></i></span>
+	</div>
+</button>
+<button
+	v-else role="menuitem"
+	tabindex="0"
+	:class="['_button', $style.item, { [$style.danger]: item.danger, [$style.active]: unref(item.active) }]"
+	@click.prevent="unref(item.active) ? close(false) : clicked(item.action, $event)"
+	@mouseenter.passive="onItemMouseEnter"
+	@mouseleave.passive="onItemMouseLeave"
+>
+	<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i>
+	<MkAvatar v-if="item.avatar" :user="item.avatar" :class="$style.avatar"/>
+	<div :class="$style.item_content">
+		<span :class="$style.item_content_text">{{ item.text }}</span>
+		<span v-if="item.indicate" :class="$style.indicator" class="_blink"><i class="_indicatorCircle"></i></span>
+	</div>
+</button>
+</template>
+
+<script setup lang="ts">
+import { unref } from 'vue';
+import type { MenuItem, InnerMenuItem, MenuAction, MenuParent, MenuRadio, MenuSwitch } from '@/types/menu.js';
+import MkSwitchButton from '@/components/MkSwitch.button.vue';
+import { isTouchUsing } from '@/scripts/touch';
+
+const props = withDefaults(defineProps<{
+	item: InnerMenuItem;
+	childShowingItem: MenuItem | null;
+
+	asDrawer?: boolean;
+	big?: boolean;
+	center?: boolean;
+}>(), {
+	asDrawer: false,
+	big: false,
+	center: false,
+});
+
+let preferClick = isTouchUsing || props.asDrawer;
+
+const emit = defineEmits<{
+	(ev: 'close', value: boolean): void;
+	(ev: 'showRadioOptions', item: MenuRadio, event: MouseEvent | KeyboardEvent): void;
+	(ev: 'showChildren', item: MenuParent, event: MouseEvent | KeyboardEvent): Promise<void>;
+	(ev: 'onItemMouseEnter', rawEv: MouseEvent): void;
+	(ev: 'onItemMouseLeave', rawEv: MouseEvent): void;
+}>();
+
+function close(value: boolean) {
+	emit('close', value);
+}
+
+function clicked(fn: MenuAction, ev: MouseEvent, doClose: boolean = true) {
+	fn(ev);
+
+	if (!doClose) return;
+	close(true);
+}
+
+function showRadioOptions(item: MenuRadio, ev: MouseEvent | KeyboardEvent) {
+	emit('showRadioOptions', item, ev);
+}
+
+function showChildren(item: MenuParent, ev: MouseEvent | KeyboardEvent) {
+	emit('showChildren', item, ev);
+}
+
+function switchItem(item: MenuSwitch & { ref: any }) {
+	if (item.disabled !== undefined && (typeof item.disabled === 'boolean' ? item.disabled : item.disabled.value)) return;
+	item.ref = !item.ref;
+}
+
+function onItemMouseEnter(ev: MouseEvent) {
+	emit('onItemMouseEnter', ev);
+}
+
+function onItemMouseLeave(ev: MouseEvent) {
+	emit('onItemMouseLeave', ev);
+}
+
+</script>
+
+<style module lang="scss">
+.center.item {
+	text-align: center;
+}
+
+.big:not(.asDrawer).item {
+	padding: 6px 20px;
+	font-size: 0.95em;
+	line-height: 24px;
+}
+
+.asDrawer {
+	&.item {
+		font-size: 1em;
+		padding: 12px 24px;
+
+		&::before {
+			width: calc(100% - 24px);
+			border-radius: 12px;
+		}
+
+		> .icon {
+			margin-right: 14px;
+			width: 24px;
+		}
+	}
+
+	&.divider {
+		margin: 12px 0;
+	}
+}
+
+.item {
+	display: flex;
+	align-items: center;
+	position: relative;
+	padding: 5px 16px;
+	width: 100%;
+	box-sizing: border-box;
+	white-space: nowrap;
+	font-size: 0.9em;
+	line-height: 20px;
+	text-align: left;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	text-decoration: none !important;
+	color: var(--menuFg, var(--MI_THEME-fg));
+
+	&::before {
+		content: "";
+		display: block;
+		position: absolute;
+		z-index: -1;
+		top: 0;
+		left: 0;
+		right: 0;
+		margin: auto;
+		width: calc(100% - 16px);
+		height: 100%;
+		border-radius: 6px;
+	}
+
+	&:focus-visible {
+		outline: none;
+
+		&:not(:hover):not(:active)::before {
+			outline: var(--MI_THEME-focus) solid 2px;
+			outline-offset: -2px;
+		}
+	}
+
+	&:not(:disabled) {
+		&:hover,
+		&:focus-visible:active,
+		&:focus-visible.active {
+			color: var(--menuHoverFg, var(--MI_THEME-accent));
+
+			&::before {
+				background-color: var(--menuHoverBg, var(--MI_THEME-accentedBg));
+			}
+		}
+
+		&:not(:focus-visible):active,
+		&:not(:focus-visible).active {
+			color: var(--menuActiveFg, var(--MI_THEME-fgOnAccent));
+
+			&::before {
+				background-color: var(--menuActiveBg, var(--MI_THEME-accent));
+			}
+		}
+	}
+
+	&:disabled {
+		cursor: not-allowed;
+	}
+
+	&.danger {
+		--menuFg: #ff2a2a;
+		--menuHoverFg: #fff;
+		--menuHoverBg: #ff4242;
+		--menuActiveFg: #fff;
+		--menuActiveBg: #d42e2e;
+	}
+
+	&.radio {
+		--menuActiveFg: var(--MI_THEME-accent);
+		--menuActiveBg: var(--MI_THEME-accentedBg);
+	}
+
+	&.parent {
+		--menuActiveFg: var(--MI_THEME-accent);
+		--menuActiveBg: var(--MI_THEME-accentedBg);
+	}
+
+	&.label {
+		pointer-events: none;
+		font-size: 0.7em;
+		padding-bottom: 4px;
+	}
+
+	&.pending {
+		pointer-events: none;
+		opacity: 0.7;
+	}
+
+	&.none {
+		pointer-events: none;
+		opacity: 0.7;
+	}
+}
+
+.item_content {
+	width: 100%;
+	max-width: 100vw;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 8px;
+	text-overflow: ellipsis;
+}
+
+.item_content_text {
+	max-width: calc(100vw - 4rem);
+	text-overflow: ellipsis;
+	overflow: hidden;
+}
+
+.switchButton {
+	margin-left: -2px;
+	--height: 1.35em;
+}
+
+.switchText {
+	margin-left: 8px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.icon {
+	margin-right: 8px;
+	line-height: 1;
+}
+
+.caret {
+	margin-left: auto;
+}
+
+.avatar {
+	margin-right: 5px;
+	width: 20px;
+	height: 20px;
+}
+
+.indicator {
+	display: flex;
+	align-items: center;
+	color: var(--MI_THEME-indicator);
+	font-size: 12px;
+}
+
+.divider {
+	margin: 8px 0;
+	border-top: solid 0.5px var(--MI_THEME-divider);
+}
+
+.radioIcon {
+	display: inline-block;
+	position: relative;
+	width: 1em;
+	height: 1em;
+	vertical-align: -0.125em;
+	border-radius: 50%;
+	border: solid 2px var(--MI_THEME-divider);
+	background-color: var(--MI_THEME-panel);
+
+	&.radioChecked {
+		border-color: var(--MI_THEME-accent);
+
+		&::after {
+			content: "";
+			display: block;
+			position: absolute;
+			top: 50%;
+			left: 50%;
+			transform: translate(-50%, -50%);
+			width: 50%;
+			height: 50%;
+			border-radius: 50%;
+			background-color: var(--MI_THEME-accent);
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/MkMenu.vue b/packages/frontend/src/components/MkMenu.vue
index 13a65e411f..2db3d0b227 100644
--- a/packages/frontend/src/components/MkMenu.vue
+++ b/packages/frontend/src/components/MkMenu.vue
@@ -8,8 +8,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 	role="menu"
 	:class="{
 		[$style.root]: true,
-		[$style.center]: align === 'center',
-		[$style.big]: big,
 		[$style.asDrawer]: asDrawer,
 	}"
 	@focusin.passive.stop="() => {}"
@@ -27,144 +25,19 @@ SPDX-License-Identifier: AGPL-3.0-only
 		@keydown.stop="() => {}"
 		@contextmenu.self.prevent="() => {}"
 	>
-		<template v-for="item in (items2 ?? [])">
-			<div v-if="item.type === 'divider'" role="separator" tabindex="-1" :class="$style.divider"></div>
-			<span v-else-if="item.type === 'label'" role="menuitem" tabindex="-1" :class="[$style.label, $style.item]">
-				<span style="opacity: 0.7;">{{ item.text }}</span>
-			</span>
-			<span v-else-if="item.type === 'pending'" role="menuitem" tabindex="0" :class="[$style.pending, $style.item]">
-				<span><MkEllipsis/></span>
-			</span>
-			<MkA
-				v-else-if="item.type === 'link'"
-				role="menuitem"
-				tabindex="0"
-				:class="['_button', $style.item]"
-				:to="item.to"
-				@click.passive="close(true)"
-				@mouseenter.passive="onItemMouseEnter"
-				@mouseleave.passive="onItemMouseLeave"
-			>
-				<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i>
-				<MkAvatar v-if="item.avatar" :user="item.avatar" :class="$style.avatar"/>
-				<div :class="$style.item_content">
-					<span :class="$style.item_content_text">{{ item.text }}</span>
-					<span v-if="item.indicate" :class="$style.indicator" class="_blink"><i class="_indicatorCircle"></i></span>
-				</div>
-			</MkA>
-			<a
-				v-else-if="item.type === 'a'"
-				role="menuitem"
-				tabindex="0"
-				:class="['_button', $style.item]"
-				:href="item.href"
-				:target="item.target"
-				:rel="item.target === '_blank' ? 'noopener noreferrer' : undefined"
-				:download="item.download"
-				@click.passive="close(true)"
-				@mouseenter.passive="onItemMouseEnter"
-				@mouseleave.passive="onItemMouseLeave"
-			>
-				<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i>
-				<div :class="$style.item_content">
-					<span :class="$style.item_content_text">{{ item.text }}</span>
-					<span v-if="item.indicate" :class="$style.indicator" class="_blink"><i class="_indicatorCircle"></i></span>
-				</div>
-			</a>
-			<button
-				v-else-if="item.type === 'user'"
-				role="menuitem"
-				tabindex="0"
-				:class="['_button', $style.item, { [$style.active]: item.active }]"
-				@click.prevent="item.active ? close(false) : clicked(item.action, $event)"
-				@mouseenter.passive="onItemMouseEnter"
-				@mouseleave.passive="onItemMouseLeave"
-			>
-				<MkAvatar :user="item.user" :class="$style.avatar"/><MkUserName :user="item.user"/>
-				<div v-if="item.indicate" :class="$style.item_content">
-					<span :class="$style.indicator" class="_blink"><i class="_indicatorCircle"></i></span>
-				</div>
-			</button>
-			<button
-				v-else-if="item.type === 'switch'"
-				role="menuitemcheckbox"
-				tabindex="0"
-				:class="['_button', $style.item]"
-				:disabled="unref(item.disabled)"
-				@click.prevent="switchItem(item)"
-				@mouseenter.passive="onItemMouseEnter"
-				@mouseleave.passive="onItemMouseLeave"
-			>
-				<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i>
-				<MkSwitchButton v-else :class="$style.switchButton" :checked="item.ref" :disabled="item.disabled" @toggle="switchItem(item)"/>
-				<div :class="$style.item_content">
-					<span :class="[$style.item_content_text, { [$style.switchText]: !item.icon }]">{{ item.text }}</span>
-					<MkSwitchButton v-if="item.icon" :class="[$style.switchButton, $style.caret]" :checked="item.ref" :disabled="item.disabled" @toggle="switchItem(item)"/>
-				</div>
-			</button>
-			<button
-				v-else-if="item.type === 'radio'"
-				role="menuitem"
-				tabindex="0"
-				:class="['_button', $style.item, $style.parent, { [$style.active]: childShowingItem === item }]"
-				:disabled="unref(item.disabled)"
-				@mouseenter.prevent="preferClick ? null : showRadioOptions(item, $event)"
-				@keydown.enter.prevent="preferClick ? null : showRadioOptions(item, $event)"
-				@click.prevent="!preferClick ? null : showRadioOptions(item, $event)"
-			>
-				<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]" style="pointer-events: none;"></i>
-				<div :class="$style.item_content">
-					<span :class="$style.item_content_text" style="pointer-events: none;">{{ item.text }}</span>
-					<span :class="$style.caret" style="pointer-events: none;"><i class="ti ti-chevron-right ti-fw"></i></span>
-				</div>
-			</button>
-			<button
-				v-else-if="item.type === 'radioOption'"
-				role="menuitemradio"
-				tabindex="0"
-				:class="['_button', $style.item, $style.radio, { [$style.active]: unref(item.active) }]"
-				@click.prevent="unref(item.active) ? null : clicked(item.action, $event, false)"
-				@mouseenter.passive="onItemMouseEnter"
-				@mouseleave.passive="onItemMouseLeave"
-			>
-				<div :class="$style.icon">
-					<span :class="[$style.radioIcon, { [$style.radioChecked]: unref(item.active) }]"></span>
-				</div>
-				<div :class="$style.item_content">
-					<span :class="$style.item_content_text">{{ item.text }}</span>
-				</div>
-			</button>
-			<button
-				v-else-if="item.type === 'parent'"
-				role="menuitem"
-				tabindex="0"
-				:class="['_button', $style.item, $style.parent, { [$style.active]: childShowingItem === item }]"
-				@mouseenter.prevent="preferClick ? null : showChildren(item, $event)"
-				@keydown.enter.prevent="preferClick ? null : showChildren(item, $event)"
-				@click.prevent="!preferClick ? null : showChildren(item, $event)"
-			>
-				<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]" style="pointer-events: none;"></i>
-				<div :class="$style.item_content">
-					<span :class="$style.item_content_text" style="pointer-events: none;">{{ item.text }}</span>
-					<span :class="$style.caret" style="pointer-events: none;"><i class="ti ti-chevron-right ti-fw"></i></span>
-				</div>
-			</button>
-			<button
-				v-else role="menuitem"
-				tabindex="0"
-				:class="['_button', $style.item, { [$style.danger]: item.danger, [$style.active]: unref(item.active) }]"
-				@click.prevent="unref(item.active) ? close(false) : clicked(item.action, $event)"
-				@mouseenter.passive="onItemMouseEnter"
-				@mouseleave.passive="onItemMouseLeave"
-			>
-				<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i>
-				<MkAvatar v-if="item.avatar" :user="item.avatar" :class="$style.avatar"/>
-				<div :class="$style.item_content">
-					<span :class="$style.item_content_text">{{ item.text }}</span>
-					<span v-if="item.indicate" :class="$style.indicator" class="_blink"><i class="_indicatorCircle"></i></span>
-				</div>
-			</button>
-		</template>
+		<XItem
+			v-for="item in items2 ?? []"
+			:item="item"
+			:childShowingItem="childShowingItem"
+			:asDrawer="asDrawer"
+			:big="big"
+			:center="align === 'center'"
+			@close="close"
+			@showRadioOptions="showRadioOptions"
+			@showChildren="showChildren"
+			@onItemMouseEnter="onItemMouseEnter"
+			@onItemMouseLeave="onItemMouseLeave"
+		/>
 		<span v-if="items2 == null || items2.length === 0" tabindex="-1" :class="[$style.none, $style.item]">
 			<span>{{ i18n.ts.none }}</span>
 		</span>
@@ -176,9 +49,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts">
-import { computed, defineAsyncComponent, inject, nextTick, onBeforeUnmount, onMounted, ref, shallowRef, unref, watch } from 'vue';
-import MkSwitchButton from '@/components/MkSwitch.button.vue';
-import { MenuItem, InnerMenuItem, MenuPending, MenuAction, MenuSwitch, MenuRadio, MenuRadioOption, MenuParent } from '@/types/menu.js';
+import { computed, defineAsyncComponent, inject, nextTick, onBeforeUnmount, onMounted, ref, shallowRef, watch } from 'vue';
+import { MenuItem, InnerMenuItem, MenuPending, MenuRadio, MenuRadioOption, MenuParent } from '@/types/menu.js';
 import * as os from '@/os.js';
 import { i18n } from '@/i18n.js';
 import { isTouchUsing } from '@/scripts/touch.js';
@@ -190,6 +62,8 @@ const childrenCache = new WeakMap<MenuParent, MenuItem[]>();
 </script>
 
 <script lang="ts" setup>
+import XItem from '@/components/MkMenu.item.vue';
+
 const XChild = defineAsyncComponent(() => import('./MkMenu.child.vue'));
 
 const props = defineProps<{
@@ -232,8 +106,6 @@ const keymap = {
 
 const childShowingItem = ref<MenuItem | null>();
 
-let preferClick = isTouchUsing || props.asDrawer;
-
 watch(() => props.items, () => {
 	const items = [...props.items].filter(item => item !== undefined) as (NonNullable<MenuItem> | MenuPending)[];
 
@@ -333,13 +205,6 @@ async function showChildren(item: MenuParent, ev: Event) {
 	}
 }
 
-function clicked(fn: MenuAction, ev: MouseEvent, doClose = true) {
-	fn(ev);
-
-	if (!doClose) return;
-	close(true);
-}
-
 function close(actioned = false) {
 	disposeHandlers();
 	nextTick(() => {
@@ -348,11 +213,6 @@ function close(actioned = false) {
 	});
 }
 
-function switchItem(item: MenuSwitch & { ref: any }) {
-	if (item.disabled !== undefined && (typeof item.disabled === 'boolean' ? item.disabled : item.disabled.value)) return;
-	item.ref = !item.ref;
-}
-
 function focusUp() {
 	if (disposed) return;
 	if (!itemsEl.value?.contains(document.activeElement)) return;
@@ -427,26 +287,6 @@ onBeforeUnmount(() => {
 
 <style lang="scss" module>
 .root {
-	&.center {
-		> .menu {
-			> .item {
-				text-align: center;
-			}
-		}
-	}
-
-	&.big:not(.asDrawer) {
-		> .menu {
-			min-width: 230px;
-
-			> .item {
-				padding: 6px 20px;
-				font-size: 0.95em;
-				line-height: 24px;
-			}
-		}
-	}
-
 	&.asDrawer {
 		max-width: 600px;
 		margin: auto;
@@ -457,25 +297,6 @@ onBeforeUnmount(() => {
 			border-radius: 24px;
 			border-bottom-right-radius: 0;
 			border-bottom-left-radius: 0;
-
-			> .item {
-				font-size: 1em;
-				padding: 12px 24px;
-
-				&::before {
-					width: calc(100% - 24px);
-					border-radius: 12px;
-				}
-
-				> .icon {
-					margin-right: 14px;
-					width: 24px;
-				}
-			}
-
-			> .divider {
-				margin: 12px 0;
-			}
 		}
 	}
 }
@@ -492,185 +313,4 @@ onBeforeUnmount(() => {
 		outline: none;
 	}
 }
-
-.item {
-	display: flex;
-	align-items: center;
-	position: relative;
-	padding: 5px 16px;
-	width: 100%;
-	box-sizing: border-box;
-	white-space: nowrap;
-	font-size: 0.9em;
-	line-height: 20px;
-	text-align: left;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	text-decoration: none !important;
-	color: var(--menuFg, var(--MI_THEME-fg));
-
-	&::before {
-		content: "";
-		display: block;
-		position: absolute;
-		z-index: -1;
-		top: 0;
-		left: 0;
-		right: 0;
-		margin: auto;
-		width: calc(100% - 16px);
-		height: 100%;
-		border-radius: 6px;
-	}
-
-	&:focus-visible {
-		outline: none;
-
-		&:not(:hover):not(:active)::before {
-			outline: var(--MI_THEME-focus) solid 2px;
-			outline-offset: -2px;
-		}
-	}
-
-	&:not(:disabled) {
-		&:hover,
-		&:focus-visible:active,
-		&:focus-visible.active {
-			color: var(--menuHoverFg, var(--MI_THEME-accent));
-
-			&::before {
-				background-color: var(--menuHoverBg, var(--MI_THEME-accentedBg));
-			}
-		}
-
-		&:not(:focus-visible):active,
-		&:not(:focus-visible).active {
-			color: var(--menuActiveFg, var(--MI_THEME-fgOnAccent));
-
-			&::before {
-				background-color: var(--menuActiveBg, var(--MI_THEME-accent));
-			}
-		}
-	}
-
-	&:disabled {
-		cursor: not-allowed;
-	}
-
-	&.danger {
-		--menuFg: #ff2a2a;
-		--menuHoverFg: #fff;
-		--menuHoverBg: #ff4242;
-		--menuActiveFg: #fff;
-		--menuActiveBg: #d42e2e;
-	}
-
-	&.radio {
-		--menuActiveFg: var(--MI_THEME-accent);
-		--menuActiveBg: var(--MI_THEME-accentedBg);
-	}
-
-	&.parent {
-		--menuActiveFg: var(--MI_THEME-accent);
-		--menuActiveBg: var(--MI_THEME-accentedBg);
-	}
-
-	&.label {
-		pointer-events: none;
-		font-size: 0.7em;
-		padding-bottom: 4px;
-	}
-
-	&.pending {
-		pointer-events: none;
-		opacity: 0.7;
-	}
-
-	&.none {
-		pointer-events: none;
-		opacity: 0.7;
-	}
-}
-
-.item_content {
-	width: 100%;
-	max-width: 100vw;
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: 8px;
-	text-overflow: ellipsis;
-}
-
-.item_content_text {
-	max-width: calc(100vw - 4rem);
-	text-overflow: ellipsis;
-	overflow: hidden;
-}
-
-.switchButton {
-	margin-left: -2px;
-	--height: 1.35em;
-}
-
-.switchText {
-	margin-left: 8px;
-	overflow: hidden;
-	text-overflow: ellipsis;
-}
-
-.icon {
-	margin-right: 8px;
-	line-height: 1;
-}
-
-.caret {
-	margin-left: auto;
-}
-
-.avatar {
-	margin-right: 5px;
-	width: 20px;
-	height: 20px;
-}
-
-.indicator {
-	display: flex;
-	align-items: center;
-	color: var(--MI_THEME-indicator);
-	font-size: 12px;
-}
-
-.divider {
-	margin: 8px 0;
-	border-top: solid 0.5px var(--MI_THEME-divider);
-}
-
-.radioIcon {
-	display: inline-block;
-	position: relative;
-	width: 1em;
-	height: 1em;
-	vertical-align: -0.125em;
-	border-radius: 50%;
-	border: solid 2px var(--MI_THEME-divider);
-	background-color: var(--MI_THEME-panel);
-
-	&.radioChecked {
-		border-color: var(--MI_THEME-accent);
-
-		&::after {
-			content: "";
-			display: block;
-			position: absolute;
-			top: 50%;
-			left: 50%;
-			transform: translate(-50%, -50%);
-			width: 50%;
-			height: 50%;
-			border-radius: 50%;
-			background-color: var(--MI_THEME-accent);
-		}
-	}
-}
 </style>
diff --git a/packages/frontend/src/components/MkModal.vue b/packages/frontend/src/components/MkModal.vue
index c766a33823..30004e93c7 100644
--- a/packages/frontend/src/components/MkModal.vue
+++ b/packages/frontend/src/components/MkModal.vue
@@ -42,7 +42,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { nextTick, normalizeClass, onMounted, onUnmounted, provide, watch, ref, shallowRef, computed } from 'vue';
+import { nextTick, normalizeClass, onMounted, onUnmounted, provide, watch, ref, shallowRef, computed, readonly } from 'vue';
 import * as os from '@/os.js';
 import { isTouchUsing } from '@/scripts/touch.js';
 import { defaultStore } from '@/store.js';
@@ -349,6 +349,7 @@ onUnmounted(() => {
 });
 
 defineExpose({
+	type: readonly(type),
 	close,
 });
 </script>
diff --git a/packages/frontend/src/components/MkPostForm.vue b/packages/frontend/src/components/MkPostForm.vue
index 29c306ea35..ccf3700608 100644
--- a/packages/frontend/src/components/MkPostForm.vue
+++ b/packages/frontend/src/components/MkPostForm.vue
@@ -534,24 +534,12 @@ function showOtherSettings() {
 			reactionAcceptance.value = value;
 		},
 		reset: () => {
-			reset();
+			clear();
 		},
 		closed: () => dispose(),
 	});
 }
 
-function reset() {
-	text.value = '';
-	cw.value = null;
-	useCw.value = false;
-	visibility.value = defaultStore.state.rememberNoteVisibility ? defaultStore.state.visibility : defaultStore.state.defaultNoteVisibility;
-	localOnly.value = defaultStore.state.rememberNoteVisibility ? defaultStore.state.localOnly : defaultStore.state.defaultNoteLocalOnly;
-	files.value = [];
-	poll.value = null;
-	quoteId.value = null;
-	reactionAcceptance.value = defaultStore.state.reactionAcceptance;
-}
-
 function pushVisibleUser(user: Misskey.entities.UserDetailed) {
 	if (!visibleUsers.value.some(u => u.username === user.username && u.host === user.host)) {
 		visibleUsers.value.push(user);
diff --git a/packages/frontend/src/components/MkPostFormOtherMenu.vue b/packages/frontend/src/components/MkPostFormOtherMenu.vue
index 7d0406d562..f0389c6a3b 100644
--- a/packages/frontend/src/components/MkPostFormOtherMenu.vue
+++ b/packages/frontend/src/components/MkPostFormOtherMenu.vue
@@ -19,40 +19,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</div>
 		</div>
 		<div :class="$style.menuRoot">
-			<button
-				role="menuitem"
-				tabindex="0"
-				:class="['_button', $style.item]"
-				@click.prevent="toggleReactionAcceptance"
-			>
-				<i
-					class="ti-fw"
-					:class="[$style.icon, {
-						'ti ti-heart': props.currentReactionAcceptance === 'likeOnly',
-						[$style.danger]: props.currentReactionAcceptance === 'likeOnly',
-						'ti ti-heart-plus': props.currentReactionAcceptance === 'likeOnlyForRemote',
-						'ti ti-icons': props.currentReactionAcceptance == null || !['likeOnly', 'likeOnlyForRemote'].includes(props.currentReactionAcceptance),
-					}]"
-				></i>
-				<div :class="$style.menuItem_content">
-					<span :class="$style.menuItem_content_text">{{ i18n.ts.reactionAcceptance }}</span>
-				</div>
-			</button>
-			<div role="separator" tabindex="-1" :class="$style.divider"></div>
-			<button
-				role="menuitem"
-				tabindex="0"
-				:class="['_button', $style.item, $style.danger]"
-				@click.prevent="reset"
-			>
-				<i
-					class="ti-fw ti ti-trash"
-					:class="$style.icon"
-				></i>
-				<div :class="$style.menuItem_content">
-					<span :class="$style.menuItem_content_text">{{ i18n.ts.reset }}</span>
-				</div>
-			</button>
+			<MkMenuItem
+				v-for="item in menuDef"
+				:item="item"
+				:childShowingItem="null"
+				:asDrawer="type === 'drawer'"
+			/>
 		</div>
 	</div>
 </MkModal>
@@ -61,12 +33,17 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { shallowRef, computed } from 'vue';
 import * as Misskey from 'misskey-js';
+
 import MkModal from '@/components/MkModal.vue';
+import MkMenuItem from '@/components/MkMenu.item.vue';
+
 import { instance } from '@/instance.js';
 import { i18n } from '@/i18n.js';
 import * as os from '@/os.js';
 import number from '@/filters/number.js';
 
+import type { NonModalCompatibleInnerMenuItem } from '@/types/menu.js';
+
 const modal = shallowRef<InstanceType<typeof MkModal>>();
 
 const props = defineProps<{
@@ -89,6 +66,32 @@ const textCountPercentage = computed(() => {
 	return props.textLength / maxTextLength.value * 100;
 });
 
+// actionを発火した瞬間にMkMenuItemからcloseイベントが出るが、それを利用すると正しくemitできないため、action内で別途closeを呼ぶ
+const menuDef = computed<NonModalCompatibleInnerMenuItem[]>(() => {
+	let reactionAcceptanceIcon = 'ti ti-icons';
+
+	if (props.currentReactionAcceptance === 'likeOnly') {
+		reactionAcceptanceIcon = 'ti ti-heart _love';
+	} else if (props.currentReactionAcceptance === 'likeOnlyForRemote') {
+		reactionAcceptanceIcon = 'ti ti-heart-plus';
+	}
+
+	return [{
+		icon: reactionAcceptanceIcon,
+		text: i18n.ts.reactionAcceptance,
+		action: () => {
+			toggleReactionAcceptance();
+		},
+	}, { type: 'divider' }, {
+		icon: 'ti ti-trash',
+		text: i18n.ts.reset,
+		danger: true,
+		action: () => {
+			reset();
+		},
+	}];
+});
+
 async function toggleReactionAcceptance() {
 	const select = await os.select({
 		title: i18n.ts.reactionAcceptance,
@@ -134,25 +137,6 @@ async function reset() {
 
 		.menuRoot {
 			padding-bottom: max(env(safe-area-inset-bottom, 0px), 12px);
-
-			> .item {
-				font-size: 1em;
-				padding: 12px 24px;
-
-				&::before {
-					width: calc(100% - 24px);
-					border-radius: 12px;
-				}
-
-				> .icon {
-					margin-right: 14px;
-					width: 24px;
-				}
-			}
-
-			> .divider {
-				margin: 12px 0;
-			}
 		}
 	}
 }
@@ -216,106 +200,5 @@ async function reset() {
 
 .menuRoot {
 	padding: 8px 0;
-
-	> .item {
-		display: flex;
-		align-items: center;
-		position: relative;
-		padding: 5px 16px;
-		width: 100%;
-		box-sizing: border-box;
-		white-space: nowrap;
-		font-size: 0.9em;
-		line-height: 20px;
-		text-align: left;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		text-decoration: none !important;
-		color: var(--menuFg, var(--MI_THEME-fg));
-
-		&::before {
-			content: "";
-			display: block;
-			position: absolute;
-			z-index: -1;
-			top: 0;
-			left: 0;
-			right: 0;
-			margin: auto;
-			width: calc(100% - 16px);
-			height: 100%;
-			border-radius: 6px;
-		}
-
-		&:focus-visible {
-			outline: none;
-
-			&:not(:hover):not(:active)::before {
-				outline: var(--MI_THEME-focus) solid 2px;
-				outline-offset: -2px;
-			}
-		}
-
-		&:hover,
-		&:focus-visible:active,
-		&:focus-visible.active {
-			color: var(--menuHoverFg, var(--MI_THEME-accent));
-
-			&::before {
-				background-color: var(--menuHoverBg, var(--MI_THEME-accentedBg));
-			}
-		}
-
-		&:not(:focus-visible):active,
-		&:not(:focus-visible).active {
-			color: var(--menuActiveFg, var(--MI_THEME-fgOnAccent));
-
-			&::before {
-				background-color: var(--menuActiveBg, var(--MI_THEME-accent));
-			}
-		}
-
-		&:disabled {
-			cursor: not-allowed;
-		}
-
-		&.danger {
-			--menuFg: #ff2a2a;
-			--menuHoverFg: #fff;
-			--menuHoverBg: #ff4242;
-			--menuActiveFg: #fff;
-			--menuActiveBg: #d42e2e;
-		}
-
-		.icon {
-			margin-right: 8px;
-			line-height: 1;
-		}
-
-		.icon.danger {
-			color: var(--MI_THEME-error);
-		}
-	}
-
-	> .divider {
-		margin: 8px 0;
-		border-top: solid 0.5px var(--MI_THEME-divider);
-	}
-}
-
-.menuItem_content {
-	width: 100%;
-	max-width: 100vw;
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: 8px;
-	text-overflow: ellipsis;
-}
-
-.menuItem_content_text {
-	max-width: calc(100vw - 4rem);
-	text-overflow: ellipsis;
-	overflow: hidden;
 }
 </style>
diff --git a/packages/frontend/src/style.scss b/packages/frontend/src/style.scss
index 4204c5af59..ad99f87994 100644
--- a/packages/frontend/src/style.scss
+++ b/packages/frontend/src/style.scss
@@ -423,6 +423,10 @@ rt {
 	color: var(--MI_THEME-link);
 }
 
+._love {
+	color: var(--MI_THEME-love);
+}
+
 ._caption {
 	font-size: 0.8em;
 	opacity: 0.7;
diff --git a/packages/frontend/src/types/menu.ts b/packages/frontend/src/types/menu.ts
index 138eb7dd62..1ba72fc0c6 100644
--- a/packages/frontend/src/types/menu.ts
+++ b/packages/frontend/src/types/menu.ts
@@ -28,3 +28,5 @@ type OuterMenuItem = MenuDivider | MenuNull | MenuLabel | MenuLink | MenuA | Men
 type OuterPromiseMenuItem = Promise<MenuLabel | MenuLink | MenuA | MenuUser | MenuSwitch | MenuButton | MenuParent>;
 export type MenuItem = OuterMenuItem | OuterPromiseMenuItem;
 export type InnerMenuItem = MenuDivider | MenuPending | MenuLabel | MenuLink | MenuA | MenuUser | MenuSwitch | MenuButton | MenuRadio | MenuRadioOption | MenuParent;
+
+export type NonModalCompatibleInnerMenuItem = Exclude<InnerMenuItem, MenuParent | MenuRadio>;

From d4329979ef9bb1fa9426e988b95be60118351b3b Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Sun, 20 Oct 2024 20:55:45 +0900
Subject: [PATCH 5/8] remove unused expose

---
 packages/frontend/src/components/MkModal.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/frontend/src/components/MkModal.vue b/packages/frontend/src/components/MkModal.vue
index 30004e93c7..c766a33823 100644
--- a/packages/frontend/src/components/MkModal.vue
+++ b/packages/frontend/src/components/MkModal.vue
@@ -42,7 +42,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { nextTick, normalizeClass, onMounted, onUnmounted, provide, watch, ref, shallowRef, computed, readonly } from 'vue';
+import { nextTick, normalizeClass, onMounted, onUnmounted, provide, watch, ref, shallowRef, computed } from 'vue';
 import * as os from '@/os.js';
 import { isTouchUsing } from '@/scripts/touch.js';
 import { defaultStore } from '@/store.js';
@@ -349,7 +349,6 @@ onUnmounted(() => {
 });
 
 defineExpose({
-	type: readonly(type),
 	close,
 });
 </script>

From f722dddd75f82bbf8bad1d8ddd5c21825c2c18c9 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Mon, 21 Oct 2024 23:23:57 +0900
Subject: [PATCH 6/8] =?UTF-8?q?fix:=20=E3=83=89=E3=83=AD=E3=83=AF=E3=83=BC?=
 =?UTF-8?q?=E3=81=AA=E3=81=A9=E3=81=AEOption=E3=81=8C=E5=BD=93=E3=81=9F?=
 =?UTF-8?q?=E3=82=89=E3=81=AA=E3=81=84=E5=95=8F=E9=A1=8C=E3=82=92=E4=BF=AE?=
 =?UTF-8?q?=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../frontend/src/components/MkMenu.item.vue   | 282 +++++++++---------
 1 file changed, 142 insertions(+), 140 deletions(-)

diff --git a/packages/frontend/src/components/MkMenu.item.vue b/packages/frontend/src/components/MkMenu.item.vue
index 0d51cbc2f4..0b7367d5d2 100644
--- a/packages/frontend/src/components/MkMenu.item.vue
+++ b/packages/frontend/src/components/MkMenu.item.vue
@@ -3,143 +3,145 @@ SPDX-FileCopyrightText: syuilo and misskey-project
 SPDX-License-Identifier: AGPL-3.0-only
 -->
 
-<template :class="{ [$style.asDrawer]: asDrawer, [$style.big]: big, [$style.center]: center }">
-<div v-if="item.type === 'divider'" role="separator" tabindex="-1" :class="$style.divider"></div>
-<span v-else-if="item.type === 'label'" role="menuitem" tabindex="-1" :class="[$style.label, $style.item]">
-	<span style="opacity: 0.7;">{{ item.text }}</span>
-</span>
-<span v-else-if="item.type === 'pending'" role="menuitem" tabindex="0" :class="[$style.pending, $style.item]">
-	<span><MkEllipsis/></span>
-</span>
-<MkA
-	v-else-if="item.type === 'link'"
-	role="menuitem"
-	tabindex="0"
-	:class="['_button', $style.item]"
-	:to="item.to"
-	@click.passive="close(true)"
-	@mouseenter.passive="onItemMouseEnter"
-	@mouseleave.passive="onItemMouseLeave"
->
-	<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i>
-	<MkAvatar v-if="item.avatar" :user="item.avatar" :class="$style.avatar"/>
-	<div :class="$style.item_content">
-		<span :class="$style.item_content_text">{{ item.text }}</span>
-		<span v-if="item.indicate" :class="$style.indicator" class="_blink"><i class="_indicatorCircle"></i></span>
-	</div>
-</MkA>
-<a
-	v-else-if="item.type === 'a'"
-	role="menuitem"
-	tabindex="0"
-	:class="['_button', $style.item]"
-	:href="item.href"
-	:target="item.target"
-	:rel="item.target === '_blank' ? 'noopener noreferrer' : undefined"
-	:download="item.download"
-	@click.passive="close(true)"
-	@mouseenter.passive="onItemMouseEnter"
-	@mouseleave.passive="onItemMouseLeave"
->
-	<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i>
-	<div :class="$style.item_content">
-		<span :class="$style.item_content_text">{{ item.text }}</span>
-		<span v-if="item.indicate" :class="$style.indicator" class="_blink"><i class="_indicatorCircle"></i></span>
-	</div>
-</a>
-<button
-	v-else-if="item.type === 'user'"
-	role="menuitem"
-	tabindex="0"
-	:class="['_button', $style.item, { [$style.active]: item.active }]"
-	@click.prevent="item.active ? close(false) : clicked(item.action, $event)"
-	@mouseenter.passive="onItemMouseEnter"
-	@mouseleave.passive="onItemMouseLeave"
->
-	<MkAvatar :user="item.user" :class="$style.avatar"/><MkUserName :user="item.user"/>
-	<div v-if="item.indicate" :class="$style.item_content">
-		<span :class="$style.indicator" class="_blink"><i class="_indicatorCircle"></i></span>
-	</div>
-</button>
-<button
-	v-else-if="item.type === 'switch'"
-	role="menuitemcheckbox"
-	tabindex="0"
-	:class="['_button', $style.item]"
-	:disabled="unref(item.disabled)"
-	@click.prevent="switchItem(item)"
-	@mouseenter.passive="onItemMouseEnter"
-	@mouseleave.passive="onItemMouseLeave"
->
-	<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i>
-	<MkSwitchButton v-else :class="$style.switchButton" :checked="item.ref" :disabled="item.disabled" @toggle="switchItem(item)"/>
-	<div :class="$style.item_content">
-		<span :class="[$style.item_content_text, { [$style.switchText]: !item.icon }]">{{ item.text }}</span>
-		<MkSwitchButton v-if="item.icon" :class="[$style.switchButton, $style.caret]" :checked="item.ref" :disabled="item.disabled" @toggle="switchItem(item)"/>
-	</div>
-</button>
-<button
-	v-else-if="item.type === 'radio'"
-	role="menuitem"
-	tabindex="0"
-	:class="['_button', $style.item, $style.parent, { [$style.active]: childShowingItem === item }]"
-	:disabled="unref(item.disabled)"
-	@mouseenter.prevent="preferClick ? null : showRadioOptions(item, $event)"
-	@keydown.enter.prevent="preferClick ? null : showRadioOptions(item, $event)"
-	@click.prevent="!preferClick ? null : showRadioOptions(item, $event)"
->
-	<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]" style="pointer-events: none;"></i>
-	<div :class="$style.item_content">
-		<span :class="$style.item_content_text" style="pointer-events: none;">{{ item.text }}</span>
-		<span :class="$style.caret" style="pointer-events: none;"><i class="ti ti-chevron-right ti-fw"></i></span>
-	</div>
-</button>
-<button
-	v-else-if="item.type === 'radioOption'"
-	role="menuitemradio"
-	tabindex="0"
-	:class="['_button', $style.item, $style.radio, { [$style.active]: unref(item.active) }]"
-	@click.prevent="unref(item.active) ? null : clicked(item.action, $event, false)"
-	@mouseenter.passive="onItemMouseEnter"
-	@mouseleave.passive="onItemMouseLeave"
->
-	<div :class="$style.icon">
-		<span :class="[$style.radioIcon, { [$style.radioChecked]: unref(item.active) }]"></span>
-	</div>
-	<div :class="$style.item_content">
-		<span :class="$style.item_content_text">{{ item.text }}</span>
-	</div>
-</button>
-<button
-	v-else-if="item.type === 'parent'"
-	role="menuitem"
-	tabindex="0"
-	:class="['_button', $style.item, $style.parent, { [$style.active]: childShowingItem === item }]"
-	@mouseenter.prevent="preferClick ? null : showChildren(item, $event)"
-	@keydown.enter.prevent="preferClick ? null : showChildren(item, $event)"
-	@click.prevent="!preferClick ? null : showChildren(item, $event)"
->
-	<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]" style="pointer-events: none;"></i>
-	<div :class="$style.item_content">
-		<span :class="$style.item_content_text" style="pointer-events: none;">{{ item.text }}</span>
-		<span :class="$style.caret" style="pointer-events: none;"><i class="ti ti-chevron-right ti-fw"></i></span>
-	</div>
-</button>
-<button
-	v-else role="menuitem"
-	tabindex="0"
-	:class="['_button', $style.item, { [$style.danger]: item.danger, [$style.active]: unref(item.active) }]"
-	@click.prevent="unref(item.active) ? close(false) : clicked(item.action, $event)"
-	@mouseenter.passive="onItemMouseEnter"
-	@mouseleave.passive="onItemMouseLeave"
->
-	<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i>
-	<MkAvatar v-if="item.avatar" :user="item.avatar" :class="$style.avatar"/>
-	<div :class="$style.item_content">
-		<span :class="$style.item_content_text">{{ item.text }}</span>
-		<span v-if="item.indicate" :class="$style.indicator" class="_blink"><i class="_indicatorCircle"></i></span>
-	</div>
-</button>
+<template>
+	<div :class="{ [$style.asDrawer]: asDrawer, [$style.big]: big, [$style.center]: center }">
+	<div v-if="item.type === 'divider'" role="separator" tabindex="-1" :class="$style.divider"></div>
+	<span v-else-if="item.type === 'label'" role="menuitem" tabindex="-1" :class="[$style.label, $style.item]">
+		<span style="opacity: 0.7;">{{ item.text }}</span>
+	</span>
+	<span v-else-if="item.type === 'pending'" role="menuitem" tabindex="0" :class="[$style.pending, $style.item]">
+		<span><MkEllipsis/></span>
+	</span>
+	<MkA
+		v-else-if="item.type === 'link'"
+		role="menuitem"
+		tabindex="0"
+		:class="['_button', $style.item]"
+		:to="item.to"
+		@click.passive="close(true)"
+		@mouseenter.passive="onItemMouseEnter"
+		@mouseleave.passive="onItemMouseLeave"
+	>
+		<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i>
+		<MkAvatar v-if="item.avatar" :user="item.avatar" :class="$style.avatar"/>
+		<div :class="$style.item_content">
+			<span :class="$style.item_content_text">{{ item.text }}</span>
+			<span v-if="item.indicate" :class="$style.indicator" class="_blink"><i class="_indicatorCircle"></i></span>
+		</div>
+	</MkA>
+	<a
+		v-else-if="item.type === 'a'"
+		role="menuitem"
+		tabindex="0"
+		:class="['_button', $style.item]"
+		:href="item.href"
+		:target="item.target"
+		:rel="item.target === '_blank' ? 'noopener noreferrer' : undefined"
+		:download="item.download"
+		@click.passive="close(true)"
+		@mouseenter.passive="onItemMouseEnter"
+		@mouseleave.passive="onItemMouseLeave"
+	>
+		<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i>
+		<div :class="$style.item_content">
+			<span :class="$style.item_content_text">{{ item.text }}</span>
+			<span v-if="item.indicate" :class="$style.indicator" class="_blink"><i class="_indicatorCircle"></i></span>
+		</div>
+	</a>
+	<button
+		v-else-if="item.type === 'user'"
+		role="menuitem"
+		tabindex="0"
+		:class="['_button', $style.item, { [$style.active]: item.active }]"
+		@click.prevent="item.active ? close(false) : clicked(item.action, $event)"
+		@mouseenter.passive="onItemMouseEnter"
+		@mouseleave.passive="onItemMouseLeave"
+	>
+		<MkAvatar :user="item.user" :class="$style.avatar"/><MkUserName :user="item.user"/>
+		<div v-if="item.indicate" :class="$style.item_content">
+			<span :class="$style.indicator" class="_blink"><i class="_indicatorCircle"></i></span>
+		</div>
+	</button>
+	<button
+		v-else-if="item.type === 'switch'"
+		role="menuitemcheckbox"
+		tabindex="0"
+		:class="['_button', $style.item]"
+		:disabled="unref(item.disabled)"
+		@click.prevent="switchItem(item)"
+		@mouseenter.passive="onItemMouseEnter"
+		@mouseleave.passive="onItemMouseLeave"
+	>
+		<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i>
+		<MkSwitchButton v-else :class="$style.switchButton" :checked="item.ref" :disabled="item.disabled" @toggle="switchItem(item)"/>
+		<div :class="$style.item_content">
+			<span :class="[$style.item_content_text, { [$style.switchText]: !item.icon }]">{{ item.text }}</span>
+			<MkSwitchButton v-if="item.icon" :class="[$style.switchButton, $style.caret]" :checked="item.ref" :disabled="item.disabled" @toggle="switchItem(item)"/>
+		</div>
+	</button>
+	<button
+		v-else-if="item.type === 'radio'"
+		role="menuitem"
+		tabindex="0"
+		:class="['_button', $style.item, $style.parent, { [$style.active]: childShowingItem === item }]"
+		:disabled="unref(item.disabled)"
+		@mouseenter.prevent="preferClick ? null : showRadioOptions(item, $event)"
+		@keydown.enter.prevent="preferClick ? null : showRadioOptions(item, $event)"
+		@click.prevent="!preferClick ? null : showRadioOptions(item, $event)"
+	>
+		<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]" style="pointer-events: none;"></i>
+		<div :class="$style.item_content">
+			<span :class="$style.item_content_text" style="pointer-events: none;">{{ item.text }}</span>
+			<span :class="$style.caret" style="pointer-events: none;"><i class="ti ti-chevron-right ti-fw"></i></span>
+		</div>
+	</button>
+	<button
+		v-else-if="item.type === 'radioOption'"
+		role="menuitemradio"
+		tabindex="0"
+		:class="['_button', $style.item, $style.radio, { [$style.active]: unref(item.active) }]"
+		@click.prevent="unref(item.active) ? null : clicked(item.action, $event, false)"
+		@mouseenter.passive="onItemMouseEnter"
+		@mouseleave.passive="onItemMouseLeave"
+	>
+		<div :class="$style.icon">
+			<span :class="[$style.radioIcon, { [$style.radioChecked]: unref(item.active) }]"></span>
+		</div>
+		<div :class="$style.item_content">
+			<span :class="$style.item_content_text">{{ item.text }}</span>
+		</div>
+	</button>
+	<button
+		v-else-if="item.type === 'parent'"
+		role="menuitem"
+		tabindex="0"
+		:class="['_button', $style.item, $style.parent, { [$style.active]: childShowingItem === item }]"
+		@mouseenter.prevent="preferClick ? null : showChildren(item, $event)"
+		@keydown.enter.prevent="preferClick ? null : showChildren(item, $event)"
+		@click.prevent="!preferClick ? null : showChildren(item, $event)"
+	>
+		<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]" style="pointer-events: none;"></i>
+		<div :class="$style.item_content">
+			<span :class="$style.item_content_text" style="pointer-events: none;">{{ item.text }}</span>
+			<span :class="$style.caret" style="pointer-events: none;"><i class="ti ti-chevron-right ti-fw"></i></span>
+		</div>
+	</button>
+	<button
+		v-else role="menuitem"
+		tabindex="0"
+		:class="['_button', $style.item, { [$style.danger]: item.danger, [$style.active]: unref(item.active) }]"
+		@click.prevent="unref(item.active) ? close(false) : clicked(item.action, $event)"
+		@mouseenter.passive="onItemMouseEnter"
+		@mouseleave.passive="onItemMouseLeave"
+	>
+		<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i>
+		<MkAvatar v-if="item.avatar" :user="item.avatar" :class="$style.avatar"/>
+		<div :class="$style.item_content">
+			<span :class="$style.item_content_text">{{ item.text }}</span>
+			<span v-if="item.indicate" :class="$style.indicator" class="_blink"><i class="_indicatorCircle"></i></span>
+		</div>
+	</button>
+</div>
 </template>
 
 <script setup lang="ts">
@@ -210,14 +212,14 @@ function onItemMouseLeave(ev: MouseEvent) {
 	text-align: center;
 }
 
-.big:not(.asDrawer).item {
+.big:not(.asDrawer) .item {
 	padding: 6px 20px;
 	font-size: 0.95em;
 	line-height: 24px;
 }
 
 .asDrawer {
-	&.item {
+	> .item {
 		font-size: 1em;
 		padding: 12px 24px;
 
@@ -232,7 +234,7 @@ function onItemMouseLeave(ev: MouseEvent) {
 		}
 	}
 
-	&.divider {
+	> .divider {
 		margin: 12px 0;
 	}
 }

From 77d5f39a07221d57b959ec9c25b81ae2b8e403a7 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Mon, 21 Oct 2024 23:29:16 +0900
Subject: [PATCH 7/8] =?UTF-8?q?=E4=BB=96=E3=81=AEpopupMenu=E3=81=AE?=
 =?UTF-8?q?=E9=A0=85=E7=9B=AE=E9=81=B8=E6=8A=9E=E6=99=82=E3=81=A8=E6=8C=99?=
 =?UTF-8?q?=E5=8B=95=E3=82=92=E3=81=82=E3=82=8F=E3=81=9B=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../frontend/src/components/MkPostFormOtherMenu.vue | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/frontend/src/components/MkPostFormOtherMenu.vue b/packages/frontend/src/components/MkPostFormOtherMenu.vue
index f0389c6a3b..cfa356b0a2 100644
--- a/packages/frontend/src/components/MkPostFormOtherMenu.vue
+++ b/packages/frontend/src/components/MkPostFormOtherMenu.vue
@@ -104,8 +104,11 @@ async function toggleReactionAcceptance() {
 		],
 		default: props.currentReactionAcceptance,
 	});
-	if (select.canceled) return;
-	emit('changeReactionAcceptance', select.result);
+
+	if (!select.canceled) {
+		emit('changeReactionAcceptance', select.result);
+	}
+
 	modal.value?.close();
 }
 
@@ -114,9 +117,11 @@ async function reset() {
 		type: 'question',
 		text: i18n.ts.resetAreYouSure,
 	});
-	if (canceled) return;
 
-	emit('reset');
+	if (!canceled) {
+		emit('reset');
+	}
+
 	modal.value?.close();
 }
 </script>

From cf58b4dc2e0de5d7c7010eb8568a6cb414742fd5 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Fri, 25 Oct 2024 11:33:39 +0900
Subject: [PATCH 8/8] =?UTF-8?q?=E3=83=81=E3=83=A5=E3=83=BC=E3=83=88?=
 =?UTF-8?q?=E3=83=AA=E3=82=A2=E3=83=AB=E3=81=A7=E8=A9=B0=E3=82=80=E5=95=8F?=
 =?UTF-8?q?=E9=A1=8C=E3=82=92=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/frontend/src/components/MkPostFormOtherMenu.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/frontend/src/components/MkPostFormOtherMenu.vue b/packages/frontend/src/components/MkPostFormOtherMenu.vue
index cfa356b0a2..0db4d98266 100644
--- a/packages/frontend/src/components/MkPostFormOtherMenu.vue
+++ b/packages/frontend/src/components/MkPostFormOtherMenu.vue
@@ -31,7 +31,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { shallowRef, computed } from 'vue';
+import { shallowRef, computed, inject } from 'vue';
 import * as Misskey from 'misskey-js';
 
 import MkModal from '@/components/MkModal.vue';
@@ -44,6 +44,8 @@ import number from '@/filters/number.js';
 
 import type { NonModalCompatibleInnerMenuItem } from '@/types/menu.js';
 
+const mock = inject<boolean>('mock', false);
+
 const modal = shallowRef<InstanceType<typeof MkModal>>();
 
 const props = defineProps<{
@@ -87,6 +89,7 @@ const menuDef = computed<NonModalCompatibleInnerMenuItem[]>(() => {
 		text: i18n.ts.reset,
 		danger: true,
 		action: () => {
+			if (mock) return;
 			reset();
 		},
 	}];