From b882a1908c62350c0977dd294d9b337e71769b53 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Thu, 16 Jan 2025 20:20:30 +0900
Subject: [PATCH] =?UTF-8?q?Revert=20"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?=
 =?UTF-8?q?"?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This reverts commit ce3679798c5b642dd0e47056f70657e46b382b5e.
---
 .../frontend/src/components/MkMenu.item.vue   | 422 ------------------
 packages/frontend/src/components/MkMenu.vue   | 394 +++++++++++++++-
 .../src/components/MkPostFormOtherMenu.vue    | 168 ++++++-
 packages/frontend/src/types/menu.ts           |   2 -
 4 files changed, 533 insertions(+), 453 deletions(-)
 delete 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
deleted file mode 100644
index 0b7367d5d2..0000000000
--- a/packages/frontend/src/components/MkMenu.item.vue
+++ /dev/null
@@ -1,422 +0,0 @@
-<!--
-SPDX-FileCopyrightText: syuilo and misskey-project
-SPDX-License-Identifier: AGPL-3.0-only
--->
-
-<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">
-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 2db3d0b227..13a65e411f 100644
--- a/packages/frontend/src/components/MkMenu.vue
+++ b/packages/frontend/src/components/MkMenu.vue
@@ -8,6 +8,8 @@ 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="() => {}"
@@ -25,19 +27,144 @@ SPDX-License-Identifier: AGPL-3.0-only
 		@keydown.stop="() => {}"
 		@contextmenu.self.prevent="() => {}"
 	>
-		<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"
-		/>
+		<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>
 		<span v-if="items2 == null || items2.length === 0" tabindex="-1" :class="[$style.none, $style.item]">
 			<span>{{ i18n.ts.none }}</span>
 		</span>
@@ -49,8 +176,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts">
-import { computed, defineAsyncComponent, inject, nextTick, onBeforeUnmount, onMounted, ref, shallowRef, watch } from 'vue';
-import { MenuItem, InnerMenuItem, MenuPending, MenuRadio, MenuRadioOption, MenuParent } from '@/types/menu.js';
+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 * as os from '@/os.js';
 import { i18n } from '@/i18n.js';
 import { isTouchUsing } from '@/scripts/touch.js';
@@ -62,8 +190,6 @@ 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<{
@@ -106,6 +232,8 @@ 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)[];
 
@@ -205,6 +333,13 @@ 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(() => {
@@ -213,6 +348,11 @@ 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;
@@ -287,6 +427,26 @@ 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;
@@ -297,6 +457,25 @@ 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;
+			}
 		}
 	}
 }
@@ -313,4 +492,185 @@ 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/MkPostFormOtherMenu.vue b/packages/frontend/src/components/MkPostFormOtherMenu.vue
index 0db4d98266..4dbdeeab1c 100644
--- a/packages/frontend/src/components/MkPostFormOtherMenu.vue
+++ b/packages/frontend/src/components/MkPostFormOtherMenu.vue
@@ -19,12 +19,40 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</div>
 		</div>
 		<div :class="$style.menuRoot">
-			<MkMenuItem
-				v-for="item in menuDef"
-				:item="item"
-				:childShowingItem="null"
-				:asDrawer="type === 'drawer'"
-			/>
+			<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>
@@ -33,16 +61,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { shallowRef, computed, inject } 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';
+import type { MenuItem } from '@/types/menu.js';
 
 const mock = inject<boolean>('mock', false);
 
@@ -69,7 +93,7 @@ const textCountPercentage = computed(() => {
 });
 
 // actionを発火した瞬間にMkMenuItemからcloseイベントが出るが、それを利用すると正しくemitできないため、action内で別途closeを呼ぶ
-const menuDef = computed<NonModalCompatibleInnerMenuItem[]>(() => {
+const menuDef = computed<MenuItem[]>(() => {
 	let reactionAcceptanceIcon = 'ti ti-icons';
 
 	if (props.currentReactionAcceptance === 'likeOnly') {
@@ -145,6 +169,25 @@ 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;
+			}
 		}
 	}
 }
@@ -208,5 +251,106 @@ 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/types/menu.ts b/packages/frontend/src/types/menu.ts
index 1ba72fc0c6..138eb7dd62 100644
--- a/packages/frontend/src/types/menu.ts
+++ b/packages/frontend/src/types/menu.ts
@@ -28,5 +28,3 @@ 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>;