From ed36a08bad70d613ddf85eb138fdca6e0325e59e Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Tue, 1 Aug 2023 07:38:25 +0000
Subject: [PATCH 01/23] fix

---
 packages/frontend/src/components/MkPopupMenu.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/frontend/src/components/MkPopupMenu.vue b/packages/frontend/src/components/MkPopupMenu.vue
index afd95a94c1..4930d51cd9 100644
--- a/packages/frontend/src/components/MkPopupMenu.vue
+++ b/packages/frontend/src/components/MkPopupMenu.vue
@@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<MkModal ref="modal" v-slot="{ type, maxHeight }" :zPriority="'high'" :src="src" :transparentBg="true" @click="close" @close="emit('closing')" @closed="emit('closed')">
+<MkModal ref="modal" v-slot="{ type, maxHeight }" :manualShowing="manualShowing" :zPriority="'high'" :src="src" :transparentBg="true" @click="close" @close="emit('closing')" @closed="emit('closed')">
 	<MkMenu :items="items" :align="align" :width="width" :max-height="maxHeight" :asDrawer="type === 'drawer'" :class="{ [$style.drawer]: type === 'drawer' }" @close="close" @hide="manualShowing = false"/>
 </MkModal>
 </template>

From d60aa72c63315b0ac990488fccea2bfec69f043a Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Tue, 1 Aug 2023 11:17:27 +0000
Subject: [PATCH 02/23] noCache

---
 packages/frontend/src/components/MkMenu.vue    | 9 ++++++---
 packages/frontend/src/scripts/get-user-menu.ts | 1 +
 packages/frontend/src/types/menu.ts            | 4 ++--
 3 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/packages/frontend/src/components/MkMenu.vue b/packages/frontend/src/components/MkMenu.vue
index d41ff56d7d..5fed6ed657 100644
--- a/packages/frontend/src/components/MkMenu.vue
+++ b/packages/frontend/src/components/MkMenu.vue
@@ -61,7 +61,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </div>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts">
 import { defineAsyncComponent, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
 import { focusPrev, focusNext } from '@/scripts/focus';
 import MkSwitchButton from '@/components/MkSwitch.button.vue';
@@ -69,6 +69,10 @@ import { MenuItem, InnerMenuItem, OuterMenuItem, MenuPending, MenuAction, MenuSw
 import * as os from '@/os';
 import { i18n } from '@/i18n';
 
+const childrenCache = new WeakMap<MenuParent, OuterMenuItem[]>();
+</script>
+
+<script lang="ts" setup>
 const XChild = defineAsyncComponent(() => import('./MkMenu.child.vue'));
 
 const props = defineProps<{
@@ -147,10 +151,9 @@ function onItemMouseLeave(item) {
 	if (childCloseTimer) window.clearTimeout(childCloseTimer);
 }
 
-let childrenCache = new WeakMap<MenuParent, OuterMenuItem[]>();
 async function showChildren(item: MenuParent, ev: MouseEvent) {
 	const children = ref<OuterMenuItem[]>([]);
-	if (childrenCache.has(item)) {
+	if (!item.noCache && childrenCache.has(item)) {
 		children.value = childrenCache.get(item)!;
 	} else {
 		if (typeof item.children === 'function') {
diff --git a/packages/frontend/src/scripts/get-user-menu.ts b/packages/frontend/src/scripts/get-user-menu.ts
index 445560b0c3..b0f97f74ce 100644
--- a/packages/frontend/src/scripts/get-user-menu.ts
+++ b/packages/frontend/src/scripts/get-user-menu.ts
@@ -168,6 +168,7 @@ export function getUserMenu(user: misskey.entities.UserDetailed, router: Router
 		type: 'parent',
 		icon: 'ti ti-list',
 		text: i18n.ts.addToList,
+		noCache: true,
 		children: async () => {
 			const lists = await userListsCache.fetch(() => os.api('users/lists/list'));
 			return lists.map(list => {
diff --git a/packages/frontend/src/types/menu.ts b/packages/frontend/src/types/menu.ts
index b2ba6290c4..365f179492 100644
--- a/packages/frontend/src/types/menu.ts
+++ b/packages/frontend/src/types/menu.ts
@@ -16,11 +16,11 @@ export type MenuA = { type: 'a', href: string, target?: string, download?: strin
 export type MenuUser = { type: 'user', user: Misskey.entities.User, active?: boolean, indicate?: boolean, action: MenuAction };
 export type MenuSwitch = { type: 'switch', ref: Ref<boolean>, text: string, disabled?: boolean };
 export type MenuButton = { type?: 'button', text: string, icon?: string, indicate?: boolean, danger?: boolean, active?: boolean, avatar?: Misskey.entities.User; action: MenuAction };
-export type MenuParent = { type: 'parent', text: string, icon?: string, children: OuterMenuItem[] | (() => Promise<OuterMenuItem[]> | OuterMenuItem[]) };
+export type MenuParent = { type: 'parent', text: string, icon?: string, noCache?: boolean, children: OuterMenuItem[] | (() => Promise<OuterMenuItem[]> | OuterMenuItem[]) };
 
 export type MenuPending = { type: 'pending' };
 
-type OuterMenuItem = MenuDivider | MenuNull | MenuLabel | MenuLink | MenuA | MenuUser | MenuSwitch | MenuButton | MenuParent;
+export type OuterMenuItem = MenuDivider | MenuNull | MenuLabel | MenuLink | MenuA | MenuUser | MenuSwitch | MenuButton | MenuParent;
 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 | MenuParent;

From 39d686ad11bb1a9e08327f639b6aaded1925dbb9 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Tue, 1 Aug 2023 11:24:37 +0000
Subject: [PATCH 03/23] :v:

---
 packages/frontend/src/components/MkMenu.vue | 10 +++++-----
 packages/frontend/src/types/menu.ts         |  4 ++--
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/frontend/src/components/MkMenu.vue b/packages/frontend/src/components/MkMenu.vue
index 5fed6ed657..7e7e717385 100644
--- a/packages/frontend/src/components/MkMenu.vue
+++ b/packages/frontend/src/components/MkMenu.vue
@@ -62,14 +62,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts">
-import { defineAsyncComponent, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { Ref, defineAsyncComponent, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
 import { focusPrev, focusNext } from '@/scripts/focus';
 import MkSwitchButton from '@/components/MkSwitch.button.vue';
-import { MenuItem, InnerMenuItem, OuterMenuItem, MenuPending, MenuAction, MenuSwitch, MenuParent } from '@/types/menu';
+import { MenuItem, InnerMenuItem, MenuPending, MenuAction, MenuSwitch, MenuParent } from '@/types/menu';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
 
-const childrenCache = new WeakMap<MenuParent, OuterMenuItem[]>();
+const childrenCache = new WeakMap<MenuParent, MenuItem[]>();
 </script>
 
 <script lang="ts" setup>
@@ -152,7 +152,7 @@ function onItemMouseLeave(item) {
 }
 
 async function showChildren(item: MenuParent, ev: MouseEvent) {
-	const children = ref<OuterMenuItem[]>([]);
+	const children: Ref<(MenuItem | MenuPending)[]> = ref([]);
 	if (!item.noCache && childrenCache.has(item)) {
 		children.value = childrenCache.get(item)!;
 	} else {
@@ -170,7 +170,7 @@ async function showChildren(item: MenuParent, ev: MouseEvent) {
 	}
 
 	if (props.asDrawer) {
-		os.popupMenu(children, ev.currentTarget ?? ev.target, {
+		os.popupMenu(children.value as MenuItem[], ev.currentTarget ?? ev.target, {
 			onClosing: () => {
 				close();
 			}
diff --git a/packages/frontend/src/types/menu.ts b/packages/frontend/src/types/menu.ts
index 365f179492..0f0dbda8c3 100644
--- a/packages/frontend/src/types/menu.ts
+++ b/packages/frontend/src/types/menu.ts
@@ -16,11 +16,11 @@ export type MenuA = { type: 'a', href: string, target?: string, download?: strin
 export type MenuUser = { type: 'user', user: Misskey.entities.User, active?: boolean, indicate?: boolean, action: MenuAction };
 export type MenuSwitch = { type: 'switch', ref: Ref<boolean>, text: string, disabled?: boolean };
 export type MenuButton = { type?: 'button', text: string, icon?: string, indicate?: boolean, danger?: boolean, active?: boolean, avatar?: Misskey.entities.User; action: MenuAction };
-export type MenuParent = { type: 'parent', text: string, icon?: string, noCache?: boolean, children: OuterMenuItem[] | (() => Promise<OuterMenuItem[]> | OuterMenuItem[]) };
+export type MenuParent = { type: 'parent', text: string, icon?: string, noCache?: boolean, children: MenuItem[] | (() => Promise<MenuItem[]> | MenuItem[]) };
 
 export type MenuPending = { type: 'pending' };
 
-export type OuterMenuItem = MenuDivider | MenuNull | MenuLabel | MenuLink | MenuA | MenuUser | MenuSwitch | MenuButton | MenuParent;
+type OuterMenuItem = MenuDivider | MenuNull | MenuLabel | MenuLink | MenuA | MenuUser | MenuSwitch | MenuButton | MenuParent;
 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 | MenuParent;

From 93e8317da196c33ba86a7da5fa649d8376ea2d49 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Tue, 1 Aug 2023 12:09:21 +0000
Subject: [PATCH 04/23] fix

---
 packages/frontend/src/components/MkMenu.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/src/components/MkMenu.vue b/packages/frontend/src/components/MkMenu.vue
index 7e7e717385..b2e6e51a3b 100644
--- a/packages/frontend/src/components/MkMenu.vue
+++ b/packages/frontend/src/components/MkMenu.vue
@@ -170,7 +170,7 @@ async function showChildren(item: MenuParent, ev: MouseEvent) {
 	}
 
 	if (props.asDrawer) {
-		os.popupMenu(children.value as MenuItem[], ev.currentTarget ?? ev.target, {
+		os.popupMenu(children as Ref<MenuItem[]>, ev.currentTarget ?? ev.target, {
 			onClosing: () => {
 				close();
 			}
@@ -178,7 +178,7 @@ async function showChildren(item: MenuParent, ev: MouseEvent) {
 		emit('hide');
 	} else {
 		childTarget = ev.currentTarget ?? ev.target;
-		childMenu = children;
+		childMenu = children as Ref<MenuItem[]>;
 		childShowingItem = item;
 	}
 }

From 485f89d2629d48c3f7510ba6b63121da17b56344 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Tue, 1 Aug 2023 14:28:44 +0000
Subject: [PATCH 05/23] ????

---
 packages/frontend/src/components/MkMenu.vue   | 10 ++++----
 packages/frontend/src/components/MkModal.vue  | 23 ++++++++++++++++---
 .../frontend/src/components/MkPopupMenu.vue   | 14 +++++++++--
 packages/frontend/src/os.ts                   |  1 +
 .../frontend/src/scripts/get-user-menu.ts     |  2 +-
 5 files changed, 39 insertions(+), 11 deletions(-)

diff --git a/packages/frontend/src/components/MkMenu.vue b/packages/frontend/src/components/MkMenu.vue
index b2e6e51a3b..d0a965157b 100644
--- a/packages/frontend/src/components/MkMenu.vue
+++ b/packages/frontend/src/components/MkMenu.vue
@@ -39,7 +39,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<MkSwitchButton :class="$style.switchButton" :checked="item.ref" :disabled="item.disabled" @toggle="switchItem(item)" />
 				<span :class="$style.switchText">{{ item.text }}</span>
 			</button>
-			<button v-else-if="item.type === 'parent'" role="menuitem" :tabindex="i" class="_button" :class="[$style.item, $style.parent, { [$style.childShowing]: childShowingItem === item }]" @mouseenter="showChildren(item, $event)">
+			<button v-else-if="item.type === 'parent'" class="_button" role="menuitem" :tabindex="i" :class="[$style.item, $style.parent, { [$style.childShowing]: childShowingItem === item }]" @mouseenter.stop="showChildren(item, $event)">
 				<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i>
 				<span>{{ item.text }}</span>
 				<span :class="$style.caret"><i class="ti ti-chevron-right ti-fw"></i></span>
@@ -170,10 +170,9 @@ async function showChildren(item: MenuParent, ev: MouseEvent) {
 	}
 
 	if (props.asDrawer) {
-		os.popupMenu(children as Ref<MenuItem[]>, ev.currentTarget ?? ev.target, {
-			onClosing: () => {
-				close();
-			}
+		os.popupMenu(children as Ref<MenuItem[]>, ev.currentTarget ?? ev.target).finally(() => {
+			console.log('child drawer close');
+			emit('close');
 		});
 		emit('hide');
 	} else {
@@ -356,6 +355,7 @@ onBeforeUnmount(() => {
 	}
 
 	&.parent {
+		pointer-events: auto;
 		display: flex;
 		align-items: center;
 		cursor: default;
diff --git a/packages/frontend/src/components/MkModal.vue b/packages/frontend/src/components/MkModal.vue
index 4ba078d4eb..ef27b2b676 100644
--- a/packages/frontend/src/components/MkModal.vue
+++ b/packages/frontend/src/components/MkModal.vue
@@ -30,7 +30,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		[$style.transition_modal_leaveTo]: transitionName === 'modal',
 		[$style.transition_send_leaveTo]: transitionName === 'send',
 	})"
-	:duration="transitionDuration" appear @afterLeave="emit('closed')" @enter="emit('opening')" @afterEnter="onOpened"
+	:duration="transitionDuration" appear @afterLeave="afterLeave" @enter="emit('opening')" @afterEnter="onOpened"
 >
 	<div v-show="manualShowing != null ? manualShowing : showing" v-hotkey.global="keymap" :class="[$style.root, { [$style.drawer]: type === 'drawer', [$style.dialog]: type === 'dialog', [$style.popup]: type === 'popup' }]" :style="{ zIndex, pointerEvents: (manualShowing != null ? manualShowing : showing) ? 'auto' : 'none', '--transformOrigin': transformOrigin }">
 		<div data-cy-bg :data-cy-transparent="isEnableBgTransparent" class="_modalBg" :class="[$style.bg, { [$style.bgTransparent]: isEnableBgTransparent }]" :style="{ zIndex }" @click="onBgClick" @mousedown="onBgClick" @contextmenu.prevent.stop="() => {}"></div>
@@ -42,7 +42,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { nextTick, normalizeClass, onMounted, onUnmounted, provide, watch } from 'vue';
+import { nextTick, normalizeClass, onMounted, onUnmounted, onBeforeUnmount, provide, watch } from 'vue';
 import * as os from '@/os';
 import { isTouchUsing } from '@/scripts/touch';
 import { defaultStore } from '@/store';
@@ -61,7 +61,12 @@ function getFixedContainer(el: Element | null): Element | null {
 type ModalTypes = 'popup' | 'dialog' | 'drawer';
 
 const props = withDefaults(defineProps<{
+	/**
+	 * 手動で表示/非表示を切り替える
+	 * falseに切り替えてもclosedは発火されないため、closeを呼ぶ必要がある
+	 */
 	manualShowing?: boolean | null;
+
 	anchor?: { x: string; y: string; };
 	src?: HTMLElement | null;
 	preferType?: ModalTypes | 'auto';
@@ -85,6 +90,7 @@ const emit = defineEmits<{
 	(ev: 'esc'): void;
 	(ev: 'close'): void;
 	(ev: 'closed'): void;
+	(ev: 'hide'): void; // afterLeaveで必ず発火する
 }>();
 
 provide('modal', true);
@@ -93,6 +99,7 @@ let maxHeight = $ref<number>();
 let fixed = $ref(false);
 let transformOrigin = $ref('center');
 let showing = $ref(true);
+let manuallyClosed = $ref(false);
 let content = $shallowRef<HTMLElement>();
 const zIndex = os.claimZIndex(props.zPriority);
 let useSendAnime = $ref(false);
@@ -141,10 +148,20 @@ function close(opts: { useSendAnimation?: boolean } = {}) {
 	// eslint-disable-next-line vue/no-mutating-props
 	if (props.src) props.src.style.pointerEvents = 'auto';
 	showing = false;
+	manuallyClosed = true;
 	emit('close');
 }
 
-function onBgClick() {
+function afterLeave() {
+	emit('hide');
+	console.log('closed?', props.manualShowing, manuallyClosed);
+	if (props.manualShowing === null || manuallyClosed) {
+		emit('closed');
+	}
+}
+
+function onBgClick(e) {
+	console.log(e);
 	if (contentClicking) return;
 	emit('click');
 }
diff --git a/packages/frontend/src/components/MkPopupMenu.vue b/packages/frontend/src/components/MkPopupMenu.vue
index 4930d51cd9..1c72d0dbb5 100644
--- a/packages/frontend/src/components/MkPopupMenu.vue
+++ b/packages/frontend/src/components/MkPopupMenu.vue
@@ -4,8 +4,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<MkModal ref="modal" v-slot="{ type, maxHeight }" :manualShowing="manualShowing" :zPriority="'high'" :src="src" :transparentBg="true" @click="close" @close="emit('closing')" @closed="emit('closed')">
-	<MkMenu :items="items" :align="align" :width="width" :max-height="maxHeight" :asDrawer="type === 'drawer'" :class="{ [$style.drawer]: type === 'drawer' }" @close="close" @hide="manualShowing = false"/>
+<MkModal ref="modal" v-slot="{ type, maxHeight }" :manualShowing="manualShowing" :zPriority="'high'" :src="src" :transparentBg="true" @click="click" @close="emit('closing')" @closed="emit('closed')">
+	<MkMenu :items="items" :align="align" :width="width" :max-height="maxHeight" :asDrawer="type === 'drawer'" :class="{ [$style.drawer]: type === 'drawer' }" @close="_close" @hide="manualShowing = false"/>
 </MkModal>
 </template>
 
@@ -31,6 +31,16 @@ const emit = defineEmits<{
 let modal = $shallowRef<InstanceType<typeof MkModal>>();
 const manualShowing = ref(true);
 
+function click() {
+	console.log('popup menu click');
+	close();
+}
+
+function _close() {
+	console.log('popup menu close event');
+	close();
+}
+
 function close() {
 	if (!modal) return;
 	manualShowing.value = false;
diff --git a/packages/frontend/src/os.ts b/packages/frontend/src/os.ts
index 2e80e3d8df..72de0346d7 100644
--- a/packages/frontend/src/os.ts
+++ b/packages/frontend/src/os.ts
@@ -550,6 +550,7 @@ export function popupMenu(items: MenuItem[] | Ref<MenuItem[]>, src?: HTMLElement
 			viaKeyboard: options?.viaKeyboard,
 		}, {
 			closed: () => {
+				console.log('closed detected');
 				resolve();
 				dispose();
 			},
diff --git a/packages/frontend/src/scripts/get-user-menu.ts b/packages/frontend/src/scripts/get-user-menu.ts
index b0f97f74ce..f55766fb22 100644
--- a/packages/frontend/src/scripts/get-user-menu.ts
+++ b/packages/frontend/src/scripts/get-user-menu.ts
@@ -330,7 +330,7 @@ export function getUserMenu(user: misskey.entities.UserDetailed, router: Router
 	}
 
 	const cleanup = () => {
-		if (_DEV_) console.log('user menu cleanup', cleanups);
+		console.log('user menu cleanup', cleanups);
 		cleanups.forEach(cleanup => cleanup());
 	};
 

From 718021f15c7845bf3ae36b9cdb35b6d1316b7fb4 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Wed, 2 Aug 2023 01:12:28 +0000
Subject: [PATCH 06/23] a

---
 packages/frontend/src/components/MkMenu.vue  | 12 ++++++++++--
 packages/frontend/src/components/MkModal.vue |  9 ++++++---
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/packages/frontend/src/components/MkMenu.vue b/packages/frontend/src/components/MkMenu.vue
index d0a965157b..f974aa1675 100644
--- a/packages/frontend/src/components/MkMenu.vue
+++ b/packages/frontend/src/components/MkMenu.vue
@@ -39,11 +39,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<MkSwitchButton :class="$style.switchButton" :checked="item.ref" :disabled="item.disabled" @toggle="switchItem(item)" />
 				<span :class="$style.switchText">{{ item.text }}</span>
 			</button>
-			<button v-else-if="item.type === 'parent'" class="_button" role="menuitem" :tabindex="i" :class="[$style.item, $style.parent, { [$style.childShowing]: childShowingItem === item }]" @mouseenter.stop="showChildren(item, $event)">
+			<div v-else-if="item.type === 'parent'" role="menuitem" :tabindex="i" :class="[$style.item, $style.parent, { [$style.childShowing]: childShowingItem === item }]" @mousedown.stop="showChildren(item, $event)">
 				<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i>
 				<span>{{ item.text }}</span>
 				<span :class="$style.caret"><i class="ti ti-chevron-right ti-fw"></i></span>
-			</button>
+			</div>
 			<button v-else :tabindex="i" class="_button" role="menuitem" :class="[$style.item, { [$style.danger]: item.danger, [$style.active]: item.active }]" :disabled="item.active" @click="clicked(item.action, $event)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)">
 				<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"/>
@@ -136,6 +136,7 @@ function childActioned() {
 }
 
 function onGlobalMousedown(event: MouseEvent) {
+	console.log('globalmousedown')
 	if (childTarget && (event.target === childTarget || childTarget.contains(event.target))) return;
 	if (child && child.checkHit(event)) return;
 	closeChild();
@@ -152,6 +153,8 @@ function onItemMouseLeave(item) {
 }
 
 async function showChildren(item: MenuParent, ev: MouseEvent) {
+	console.log(ev);
+	if (props.asDrawer && childrenCache.has(item)) return;
 	const children: Ref<(MenuItem | MenuPending)[]> = ref([]);
 	if (!item.noCache && childrenCache.has(item)) {
 		children.value = childrenCache.get(item)!;
@@ -171,6 +174,7 @@ async function showChildren(item: MenuParent, ev: MouseEvent) {
 
 	if (props.asDrawer) {
 		os.popupMenu(children as Ref<MenuItem[]>, ev.currentTarget ?? ev.target).finally(() => {
+			childrenCache.delete(item);
 			console.log('child drawer close');
 			emit('close');
 		});
@@ -182,6 +186,10 @@ async function showChildren(item: MenuParent, ev: MouseEvent) {
 	}
 }
 
+function onmousedown(ev: MouseEvent) {
+	ev.stopImmediatePropagation();
+}
+
 function clicked(fn: MenuAction, ev: MouseEvent) {
 	fn(ev);
 	close(true);
diff --git a/packages/frontend/src/components/MkModal.vue b/packages/frontend/src/components/MkModal.vue
index ef27b2b676..44a8b3c8b5 100644
--- a/packages/frontend/src/components/MkModal.vue
+++ b/packages/frontend/src/components/MkModal.vue
@@ -33,7 +33,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	:duration="transitionDuration" appear @afterLeave="afterLeave" @enter="emit('opening')" @afterEnter="onOpened"
 >
 	<div v-show="manualShowing != null ? manualShowing : showing" v-hotkey.global="keymap" :class="[$style.root, { [$style.drawer]: type === 'drawer', [$style.dialog]: type === 'dialog', [$style.popup]: type === 'popup' }]" :style="{ zIndex, pointerEvents: (manualShowing != null ? manualShowing : showing) ? 'auto' : 'none', '--transformOrigin': transformOrigin }">
-		<div data-cy-bg :data-cy-transparent="isEnableBgTransparent" class="_modalBg" :class="[$style.bg, { [$style.bgTransparent]: isEnableBgTransparent }]" :style="{ zIndex }" @click="onBgClick" @mousedown="onBgClick" @contextmenu.prevent.stop="() => {}"></div>
+		<div data-cy-bg :data-cy-transparent="isEnableBgTransparent" class="_modalBg" :class="[$style.bg, { [$style.bgTransparent]: isEnableBgTransparent }]" :style="{ zIndex }" @click="onBgClick" @mousedown.self="onBgClick" @contextmenu.prevent.stop="() => {}"></div>
 		<div ref="content" :class="[$style.content, { [$style.fixed]: fixed }]" :style="{ zIndex }" @click.self="onBgClick">
 			<slot :max-height="maxHeight" :type="type"></slot>
 		</div>
@@ -161,7 +161,7 @@ function afterLeave() {
 }
 
 function onBgClick(e) {
-	console.log(e);
+	console.log(e, contentClicking);
 	if (contentClicking) return;
 	emit('click');
 }
@@ -296,14 +296,17 @@ const onOpened = () => {
 	// モーダルコンテンツにマウスボタンが押され、コンテンツ外でマウスボタンが離されたときにモーダルバックグラウンドクリックと判定させないためにマウスイベントを監視しフラグ管理する
 	const el = content!.children[0];
 	el.addEventListener('mousedown', ev => {
+		ev.stopPropagation();
+		console.log('mousedown');
 		contentClicking = true;
 		window.addEventListener('mouseup', ev => {
+			console.log('mouseup');
 			// click イベントより先に mouseup イベントが発生するかもしれないのでちょっと待つ
 			window.setTimeout(() => {
 				contentClicking = false;
 			}, 100);
 		}, { passive: true, once: true });
-	}, { passive: true });
+	}, { passive: true, capture: true });
 };
 
 const alignObserver = new ResizeObserver((entries, observer) => {

From 225eabb19d474da2f2585847984fc7c6aa397e4f Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Thu, 3 Aug 2023 02:11:27 +0000
Subject: [PATCH 07/23] a

---
 packages/frontend/src/components/MkMenu.vue   | 14 +++++------
 packages/frontend/src/components/MkModal.vue  |  3 +--
 .../frontend/src/components/MkPopupMenu.vue   | 25 ++++++++++++++-----
 3 files changed, 27 insertions(+), 15 deletions(-)

diff --git a/packages/frontend/src/components/MkMenu.vue b/packages/frontend/src/components/MkMenu.vue
index f974aa1675..5082205b5b 100644
--- a/packages/frontend/src/components/MkMenu.vue
+++ b/packages/frontend/src/components/MkMenu.vue
@@ -39,7 +39,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<MkSwitchButton :class="$style.switchButton" :checked="item.ref" :disabled="item.disabled" @toggle="switchItem(item)" />
 				<span :class="$style.switchText">{{ item.text }}</span>
 			</button>
-			<div v-else-if="item.type === 'parent'" role="menuitem" :tabindex="i" :class="[$style.item, $style.parent, { [$style.childShowing]: childShowingItem === item }]" @mousedown.stop="showChildren(item, $event)">
+			<div v-else-if="item.type === 'parent'" role="menuitem" :tabindex="i" :class="[$style.item, $style.parent, { [$style.childShowing]: childShowingItem === item }]" @mouseenter="showChildren(item, $event)" @click.stop="showChildren(item, $event)">
 				<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i>
 				<span>{{ item.text }}</span>
 				<span :class="$style.caret"><i class="ti ti-chevron-right ti-fw"></i></span>
@@ -135,8 +135,12 @@ function childActioned() {
 	close(true);
 }
 
-function onGlobalMousedown(event: MouseEvent) {
-	console.log('globalmousedown')
+const onGlobalMousedown = (event: MouseEvent) => {
+	console.log('globalmousedown', itemsEl);
+	if (!itemsEl || !document.body.contains(itemsEl)) {
+		document.removeEventListener('mousedown', onGlobalMousedown);
+		return;
+	}
 	if (childTarget && (event.target === childTarget || childTarget.contains(event.target))) return;
 	if (child && child.checkHit(event)) return;
 	closeChild();
@@ -186,10 +190,6 @@ async function showChildren(item: MenuParent, ev: MouseEvent) {
 	}
 }
 
-function onmousedown(ev: MouseEvent) {
-	ev.stopImmediatePropagation();
-}
-
 function clicked(fn: MenuAction, ev: MouseEvent) {
 	fn(ev);
 	close(true);
diff --git a/packages/frontend/src/components/MkModal.vue b/packages/frontend/src/components/MkModal.vue
index 44a8b3c8b5..08ee30e441 100644
--- a/packages/frontend/src/components/MkModal.vue
+++ b/packages/frontend/src/components/MkModal.vue
@@ -296,7 +296,6 @@ const onOpened = () => {
 	// モーダルコンテンツにマウスボタンが押され、コンテンツ外でマウスボタンが離されたときにモーダルバックグラウンドクリックと判定させないためにマウスイベントを監視しフラグ管理する
 	const el = content!.children[0];
 	el.addEventListener('mousedown', ev => {
-		ev.stopPropagation();
 		console.log('mousedown');
 		contentClicking = true;
 		window.addEventListener('mouseup', ev => {
@@ -306,7 +305,7 @@ const onOpened = () => {
 				contentClicking = false;
 			}, 100);
 		}, { passive: true, once: true });
-	}, { passive: true, capture: true });
+	}, { passive: true });
 };
 
 const alignObserver = new ResizeObserver((entries, observer) => {
diff --git a/packages/frontend/src/components/MkPopupMenu.vue b/packages/frontend/src/components/MkPopupMenu.vue
index 1c72d0dbb5..e44622a741 100644
--- a/packages/frontend/src/components/MkPopupMenu.vue
+++ b/packages/frontend/src/components/MkPopupMenu.vue
@@ -4,8 +4,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<MkModal ref="modal" v-slot="{ type, maxHeight }" :manualShowing="manualShowing" :zPriority="'high'" :src="src" :transparentBg="true" @click="click" @close="emit('closing')" @closed="emit('closed')">
-	<MkMenu :items="items" :align="align" :width="width" :max-height="maxHeight" :asDrawer="type === 'drawer'" :class="{ [$style.drawer]: type === 'drawer' }" @close="_close" @hide="manualShowing = false"/>
+<MkModal ref="modal" v-slot="{ type, maxHeight }" :manualShowing="manualShowing" :zPriority="'high'" :src="src" :transparentBg="true" @click="click" @close="onModalClose" @closed="closed">
+	<MkMenu :items="items" :align="align" :width="width" :max-height="maxHeight" :asDrawer="type === 'drawer'" :class="{ [$style.drawer]: type === 'drawer' }" @close="onMenuClose" @hide="manualShowing = false"/>
 </MkModal>
 </template>
 
@@ -15,7 +15,7 @@ import MkModal from './MkModal.vue';
 import MkMenu from './MkMenu.vue';
 import { MenuItem } from '@/types/menu';
 
-defineProps<{
+const props = defineProps<{
 	items: MenuItem[];
 	align?: 'center' | string;
 	width?: number;
@@ -28,20 +28,33 @@ const emit = defineEmits<{
 	(ev: 'closing'): void;
 }>();
 
+console.log('popup menu modal setup', props.items);
+
 let modal = $shallowRef<InstanceType<typeof MkModal>>();
 const manualShowing = ref(true);
 
 function click() {
-	console.log('popup menu click');
+	console.log('popup menu modal click', props.items);
 	close();
 }
 
-function _close() {
-	console.log('popup menu close event');
+function onModalClose() {
+	console.log('popup menu modal close', props.items);
+	emit('closing');
+}
+
+function onMenuClose() {
+	console.log('popup menu menu click', props.items);
 	close();
 }
 
+function closed() {
+	console.log('popup menu modal closed', props.items);
+	emit('closed');
+}
+
 function close() {
+	console.log('popup menu close', props.items);
 	if (!modal) return;
 	manualShowing.value = false;
 	modal.close();

From 615e25f4fa15f87f3630e3d0751822052ad4ce6d Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Thu, 3 Aug 2023 03:07:28 +0000
Subject: [PATCH 08/23] :v:

---
 packages/frontend/src/components/MkMenu.vue   | 43 ++++++++-----------
 packages/frontend/src/components/MkModal.vue  |  9 ++--
 .../frontend/src/components/MkPopupMenu.vue   |  8 ----
 packages/frontend/src/os.ts                   |  1 -
 .../frontend/src/scripts/get-user-menu.ts     |  2 +-
 5 files changed, 24 insertions(+), 39 deletions(-)

diff --git a/packages/frontend/src/components/MkMenu.vue b/packages/frontend/src/components/MkMenu.vue
index 5082205b5b..5d08f773e1 100644
--- a/packages/frontend/src/components/MkMenu.vue
+++ b/packages/frontend/src/components/MkMenu.vue
@@ -39,7 +39,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<MkSwitchButton :class="$style.switchButton" :checked="item.ref" :disabled="item.disabled" @toggle="switchItem(item)" />
 				<span :class="$style.switchText">{{ item.text }}</span>
 			</button>
-			<div v-else-if="item.type === 'parent'" role="menuitem" :tabindex="i" :class="[$style.item, $style.parent, { [$style.childShowing]: childShowingItem === item }]" @mouseenter="showChildren(item, $event)" @click.stop="showChildren(item, $event)">
+			<div v-else-if="item.type === 'parent'" role="menuitem" :tabindex="i" :class="[$style.item, $style.parent, { [$style.childShowing]: childShowingItem === item }]" @mouseenter="isTouchUsing ? null : showChildren(item, $event)" @click="!isTouchUsing ? null : showChildren(item, $event)">
 				<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i>
 				<span>{{ item.text }}</span>
 				<span :class="$style.caret"><i class="ti ti-chevron-right ti-fw"></i></span>
@@ -68,8 +68,9 @@ import MkSwitchButton from '@/components/MkSwitch.button.vue';
 import { MenuItem, InnerMenuItem, MenuPending, MenuAction, MenuSwitch, MenuParent } from '@/types/menu';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
+import { isTouchUsing } from '@/scripts/touch';
 
-const childrenCache = new WeakMap<MenuParent, MenuItem[]>();
+const childrenCache = new WeakMap<MenuParent, Ref<(MenuItem | MenuPending)[]>>();
 </script>
 
 <script lang="ts" setup>
@@ -136,11 +137,6 @@ function childActioned() {
 }
 
 const onGlobalMousedown = (event: MouseEvent) => {
-	console.log('globalmousedown', itemsEl);
-	if (!itemsEl || !document.body.contains(itemsEl)) {
-		document.removeEventListener('mousedown', onGlobalMousedown);
-		return;
-	}
 	if (childTarget && (event.target === childTarget || childTarget.contains(event.target))) return;
 	if (child && child.checkHit(event)) return;
 	closeChild();
@@ -156,30 +152,29 @@ function onItemMouseLeave(item) {
 	if (childCloseTimer) window.clearTimeout(childCloseTimer);
 }
 
-async function showChildren(item: MenuParent, ev: MouseEvent) {
-	console.log(ev);
+function showChildren(item: MenuParent, ev: MouseEvent) {
 	if (props.asDrawer && childrenCache.has(item)) return;
-	const children: Ref<(MenuItem | MenuPending)[]> = ref([]);
-	if (!item.noCache && childrenCache.has(item)) {
-		children.value = childrenCache.get(item)!;
-	} else {
-		if (typeof item.children === 'function') {
-			children.value = [{
-				type: 'pending',
-			}];
-			Promise.resolve(item.children()).then(x => {
-				children.value = x;
-				childrenCache.set(item, x);
-			});
+
+	const children = (() => {
+		if (!item.noCache && childrenCache.has(item)) {
+			return childrenCache.get(item)!;
 		} else {
-			children.value = item.children;
+			if (typeof item.children === 'function') {
+				const result: Ref<(MenuItem | MenuPending)[]> = ref([{ type: 'pending' }]);
+				childrenCache.set(item, result);
+				Promise.resolve(item.children()).then(x => {
+					result.value = x;
+				});
+				return result;
+			} else {
+				return ref(item.children) as Ref<(MenuItem | MenuPending)[]>;
+			}
 		}
-	}
+	})();
 
 	if (props.asDrawer) {
 		os.popupMenu(children as Ref<MenuItem[]>, ev.currentTarget ?? ev.target).finally(() => {
 			childrenCache.delete(item);
-			console.log('child drawer close');
 			emit('close');
 		});
 		emit('hide');
diff --git a/packages/frontend/src/components/MkModal.vue b/packages/frontend/src/components/MkModal.vue
index 08ee30e441..8368e45d2c 100644
--- a/packages/frontend/src/components/MkModal.vue
+++ b/packages/frontend/src/components/MkModal.vue
@@ -32,7 +32,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	})"
 	:duration="transitionDuration" appear @afterLeave="afterLeave" @enter="emit('opening')" @afterEnter="onOpened"
 >
-	<div v-show="manualShowing != null ? manualShowing : showing" v-hotkey.global="keymap" :class="[$style.root, { [$style.drawer]: type === 'drawer', [$style.dialog]: type === 'dialog', [$style.popup]: type === 'popup' }]" :style="{ zIndex, pointerEvents: (manualShowing != null ? manualShowing : showing) ? 'auto' : 'none', '--transformOrigin': transformOrigin }">
+	<div v-show="manualShowing != null ? (manuallyClosed ? false : manualShowing) : showing" v-hotkey.global="keymap" :class="[$style.root, { [$style.drawer]: type === 'drawer', [$style.dialog]: type === 'dialog', [$style.popup]: type === 'popup' }]" :style="{ zIndex, pointerEvents: (manualShowing != null ? manualShowing : showing) ? 'auto' : 'none', '--transformOrigin': transformOrigin }">
 		<div data-cy-bg :data-cy-transparent="isEnableBgTransparent" class="_modalBg" :class="[$style.bg, { [$style.bgTransparent]: isEnableBgTransparent }]" :style="{ zIndex }" @click="onBgClick" @mousedown.self="onBgClick" @contextmenu.prevent.stop="() => {}"></div>
 		<div ref="content" :class="[$style.content, { [$style.fixed]: fixed }]" :style="{ zIndex }" @click.self="onBgClick">
 			<slot :max-height="maxHeight" :type="type"></slot>
@@ -150,18 +150,19 @@ function close(opts: { useSendAnimation?: boolean } = {}) {
 	showing = false;
 	manuallyClosed = true;
 	emit('close');
+	if (props.manualShowing === false) {
+		afterLeave();
+	}
 }
 
 function afterLeave() {
 	emit('hide');
-	console.log('closed?', props.manualShowing, manuallyClosed);
 	if (props.manualShowing === null || manuallyClosed) {
 		emit('closed');
 	}
 }
 
 function onBgClick(e) {
-	console.log(e, contentClicking);
 	if (contentClicking) return;
 	emit('click');
 }
@@ -296,10 +297,8 @@ const onOpened = () => {
 	// モーダルコンテンツにマウスボタンが押され、コンテンツ外でマウスボタンが離されたときにモーダルバックグラウンドクリックと判定させないためにマウスイベントを監視しフラグ管理する
 	const el = content!.children[0];
 	el.addEventListener('mousedown', ev => {
-		console.log('mousedown');
 		contentClicking = true;
 		window.addEventListener('mouseup', ev => {
-			console.log('mouseup');
 			// click イベントより先に mouseup イベントが発生するかもしれないのでちょっと待つ
 			window.setTimeout(() => {
 				contentClicking = false;
diff --git a/packages/frontend/src/components/MkPopupMenu.vue b/packages/frontend/src/components/MkPopupMenu.vue
index e44622a741..85b3eb459c 100644
--- a/packages/frontend/src/components/MkPopupMenu.vue
+++ b/packages/frontend/src/components/MkPopupMenu.vue
@@ -28,35 +28,27 @@ const emit = defineEmits<{
 	(ev: 'closing'): void;
 }>();
 
-console.log('popup menu modal setup', props.items);
-
 let modal = $shallowRef<InstanceType<typeof MkModal>>();
 const manualShowing = ref(true);
 
 function click() {
-	console.log('popup menu modal click', props.items);
 	close();
 }
 
 function onModalClose() {
-	console.log('popup menu modal close', props.items);
 	emit('closing');
 }
 
 function onMenuClose() {
-	console.log('popup menu menu click', props.items);
 	close();
 }
 
 function closed() {
-	console.log('popup menu modal closed', props.items);
 	emit('closed');
 }
 
 function close() {
-	console.log('popup menu close', props.items);
 	if (!modal) return;
-	manualShowing.value = false;
 	modal.close();
 }
 </script>
diff --git a/packages/frontend/src/os.ts b/packages/frontend/src/os.ts
index 72de0346d7..2e80e3d8df 100644
--- a/packages/frontend/src/os.ts
+++ b/packages/frontend/src/os.ts
@@ -550,7 +550,6 @@ export function popupMenu(items: MenuItem[] | Ref<MenuItem[]>, src?: HTMLElement
 			viaKeyboard: options?.viaKeyboard,
 		}, {
 			closed: () => {
-				console.log('closed detected');
 				resolve();
 				dispose();
 			},
diff --git a/packages/frontend/src/scripts/get-user-menu.ts b/packages/frontend/src/scripts/get-user-menu.ts
index f55766fb22..b0f97f74ce 100644
--- a/packages/frontend/src/scripts/get-user-menu.ts
+++ b/packages/frontend/src/scripts/get-user-menu.ts
@@ -330,7 +330,7 @@ export function getUserMenu(user: misskey.entities.UserDetailed, router: Router
 	}
 
 	const cleanup = () => {
-		console.log('user menu cleanup', cleanups);
+		if (_DEV_) console.log('user menu cleanup', cleanups);
 		cleanups.forEach(cleanup => cleanup());
 	};
 

From 01ff597e65fed5e558bce334c62b26fffa72c834 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Thu, 3 Aug 2023 03:57:27 +0000
Subject: [PATCH 09/23] fix emoji picker

---
 .../src/components/MkEmojiPickerDialog.vue         | 14 +++++++++++---
 packages/frontend/src/components/MkPopupMenu.vue   |  2 +-
 packages/frontend/src/scripts/reaction-picker.ts   |  6 +++++-
 3 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/packages/frontend/src/components/MkEmojiPickerDialog.vue b/packages/frontend/src/components/MkEmojiPickerDialog.vue
index 855d82c064..e1128b2fdb 100644
--- a/packages/frontend/src/components/MkEmojiPickerDialog.vue
+++ b/packages/frontend/src/components/MkEmojiPickerDialog.vue
@@ -12,10 +12,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 	:transparentBg="true"
 	:manualShowing="manualShowing"
 	:src="src"
-	@click="modal?.close()"
+	@click="click"
 	@opening="opening"
 	@close="emit('close')"
 	@closed="emit('closed')"
+	@hide="emit('hide')"
 >
 	<MkEmojiPicker
 		ref="picker"
@@ -36,7 +37,7 @@ import MkModal from '@/components/MkModal.vue';
 import MkEmojiPicker from '@/components/MkEmojiPicker.vue';
 import { defaultStore } from '@/store';
 
-withDefaults(defineProps<{
+const props = withDefaults(defineProps<{
 	manualShowing?: boolean | null;
 	src?: HTMLElement;
 	showPinned?: boolean;
@@ -51,6 +52,8 @@ const emit = defineEmits<{
 	(ev: 'done', v: any): void;
 	(ev: 'close'): void;
 	(ev: 'closed'): void;
+	(ev: 'click'): void;
+	(ev: 'hide'): void;
 }>();
 
 const modal = shallowRef<InstanceType<typeof MkModal>>();
@@ -58,7 +61,7 @@ const picker = shallowRef<InstanceType<typeof MkEmojiPicker>>();
 
 function chosen(emoji: any) {
 	emit('done', emoji);
-	modal.value?.close();
+	if (props.manualShowing === null) modal.value?.close();
 }
 
 function opening() {
@@ -70,6 +73,11 @@ function opening() {
 		picker.value?.focus();
 	}, 10);
 }
+
+function click() {
+	emit('click');
+	if (props.manualShowing === null) modal.value?.close();
+}
 </script>
 
 <style lang="scss" module>
diff --git a/packages/frontend/src/components/MkPopupMenu.vue b/packages/frontend/src/components/MkPopupMenu.vue
index 85b3eb459c..452222d7ed 100644
--- a/packages/frontend/src/components/MkPopupMenu.vue
+++ b/packages/frontend/src/components/MkPopupMenu.vue
@@ -15,7 +15,7 @@ import MkModal from './MkModal.vue';
 import MkMenu from './MkMenu.vue';
 import { MenuItem } from '@/types/menu';
 
-const props = defineProps<{
+defineProps<{
 	items: MenuItem[];
 	align?: 'center' | string;
 	width?: number;
diff --git a/packages/frontend/src/scripts/reaction-picker.ts b/packages/frontend/src/scripts/reaction-picker.ts
index 919c566e3f..bd74271dcd 100644
--- a/packages/frontend/src/scripts/reaction-picker.ts
+++ b/packages/frontend/src/scripts/reaction-picker.ts
@@ -24,14 +24,18 @@ class ReactionPicker {
 		}, {
 			done: reaction => {
 				this.onChosen!(reaction);
+				this.manualShowing.value = false;
 			},
 			close: () => {
 				this.manualShowing.value = false;
 			},
-			closed: () => {
+			hide: () => {
 				this.src.value = null;
 				this.onClosed!();
 			},
+			click: () => {
+				this.manualShowing.value = false;
+			}
 		});
 	}
 

From da3ca548febf8c7f869a7e239f499316134b7aa4 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Thu, 3 Aug 2023 05:16:25 +0000
Subject: [PATCH 10/23] ?????

---
 packages/frontend/src/components/MkEmojiPickerDialog.vue | 4 ++--
 packages/frontend/src/scripts/reaction-picker.ts         | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/frontend/src/components/MkEmojiPickerDialog.vue b/packages/frontend/src/components/MkEmojiPickerDialog.vue
index e1128b2fdb..acfc330c39 100644
--- a/packages/frontend/src/components/MkEmojiPickerDialog.vue
+++ b/packages/frontend/src/components/MkEmojiPickerDialog.vue
@@ -52,7 +52,7 @@ const emit = defineEmits<{
 	(ev: 'done', v: any): void;
 	(ev: 'close'): void;
 	(ev: 'closed'): void;
-	(ev: 'click'): void;
+	(ev: 'bgclick'): void;
 	(ev: 'hide'): void;
 }>();
 
@@ -75,7 +75,7 @@ function opening() {
 }
 
 function click() {
-	emit('click');
+	emit('bgclick');
 	if (props.manualShowing === null) modal.value?.close();
 }
 </script>
diff --git a/packages/frontend/src/scripts/reaction-picker.ts b/packages/frontend/src/scripts/reaction-picker.ts
index bd74271dcd..93bf4fe7de 100644
--- a/packages/frontend/src/scripts/reaction-picker.ts
+++ b/packages/frontend/src/scripts/reaction-picker.ts
@@ -33,7 +33,7 @@ class ReactionPicker {
 				this.src.value = null;
 				this.onClosed!();
 			},
-			click: () => {
+			bgclick: () => {
 				this.manualShowing.value = false;
 			}
 		});

From ba6399fac6b9c3e179e227461cdc1426846f41ca Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Fri, 4 Aug 2023 07:09:23 +0000
Subject: [PATCH 11/23] close

---
 packages/frontend/src/components/MkMenu.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/frontend/src/components/MkMenu.vue b/packages/frontend/src/components/MkMenu.vue
index 5d08f773e1..26f283bc8b 100644
--- a/packages/frontend/src/components/MkMenu.vue
+++ b/packages/frontend/src/components/MkMenu.vue
@@ -56,7 +56,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</span>
 	</div>
 	<div v-if="childMenu">
-		<XChild ref="child" :items="childMenu" :targetElement="childTarget" :rootElement="itemsEl" showing @actioned="childActioned"/>
+		<XChild ref="child" :items="childMenu" :targetElement="childTarget" :rootElement="itemsEl" showing @actioned="childActioned" @close="close(false)"/>
 	</div>
 </div>
 </template>

From f7511ac93c73f208b2d364b417bb3fb81350c668 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Fri, 4 Aug 2023 12:05:07 +0000
Subject: [PATCH 12/23] 1

---
 packages/frontend/src/components/MkModal.vue | 28 ++++----------------
 1 file changed, 5 insertions(+), 23 deletions(-)

diff --git a/packages/frontend/src/components/MkModal.vue b/packages/frontend/src/components/MkModal.vue
index 8368e45d2c..4ba078d4eb 100644
--- a/packages/frontend/src/components/MkModal.vue
+++ b/packages/frontend/src/components/MkModal.vue
@@ -30,10 +30,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 		[$style.transition_modal_leaveTo]: transitionName === 'modal',
 		[$style.transition_send_leaveTo]: transitionName === 'send',
 	})"
-	:duration="transitionDuration" appear @afterLeave="afterLeave" @enter="emit('opening')" @afterEnter="onOpened"
+	:duration="transitionDuration" appear @afterLeave="emit('closed')" @enter="emit('opening')" @afterEnter="onOpened"
 >
-	<div v-show="manualShowing != null ? (manuallyClosed ? false : manualShowing) : showing" v-hotkey.global="keymap" :class="[$style.root, { [$style.drawer]: type === 'drawer', [$style.dialog]: type === 'dialog', [$style.popup]: type === 'popup' }]" :style="{ zIndex, pointerEvents: (manualShowing != null ? manualShowing : showing) ? 'auto' : 'none', '--transformOrigin': transformOrigin }">
-		<div data-cy-bg :data-cy-transparent="isEnableBgTransparent" class="_modalBg" :class="[$style.bg, { [$style.bgTransparent]: isEnableBgTransparent }]" :style="{ zIndex }" @click="onBgClick" @mousedown.self="onBgClick" @contextmenu.prevent.stop="() => {}"></div>
+	<div v-show="manualShowing != null ? manualShowing : showing" v-hotkey.global="keymap" :class="[$style.root, { [$style.drawer]: type === 'drawer', [$style.dialog]: type === 'dialog', [$style.popup]: type === 'popup' }]" :style="{ zIndex, pointerEvents: (manualShowing != null ? manualShowing : showing) ? 'auto' : 'none', '--transformOrigin': transformOrigin }">
+		<div data-cy-bg :data-cy-transparent="isEnableBgTransparent" class="_modalBg" :class="[$style.bg, { [$style.bgTransparent]: isEnableBgTransparent }]" :style="{ zIndex }" @click="onBgClick" @mousedown="onBgClick" @contextmenu.prevent.stop="() => {}"></div>
 		<div ref="content" :class="[$style.content, { [$style.fixed]: fixed }]" :style="{ zIndex }" @click.self="onBgClick">
 			<slot :max-height="maxHeight" :type="type"></slot>
 		</div>
@@ -42,7 +42,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { nextTick, normalizeClass, onMounted, onUnmounted, onBeforeUnmount, provide, watch } from 'vue';
+import { nextTick, normalizeClass, onMounted, onUnmounted, provide, watch } from 'vue';
 import * as os from '@/os';
 import { isTouchUsing } from '@/scripts/touch';
 import { defaultStore } from '@/store';
@@ -61,12 +61,7 @@ function getFixedContainer(el: Element | null): Element | null {
 type ModalTypes = 'popup' | 'dialog' | 'drawer';
 
 const props = withDefaults(defineProps<{
-	/**
-	 * 手動で表示/非表示を切り替える
-	 * falseに切り替えてもclosedは発火されないため、closeを呼ぶ必要がある
-	 */
 	manualShowing?: boolean | null;
-
 	anchor?: { x: string; y: string; };
 	src?: HTMLElement | null;
 	preferType?: ModalTypes | 'auto';
@@ -90,7 +85,6 @@ const emit = defineEmits<{
 	(ev: 'esc'): void;
 	(ev: 'close'): void;
 	(ev: 'closed'): void;
-	(ev: 'hide'): void; // afterLeaveで必ず発火する
 }>();
 
 provide('modal', true);
@@ -99,7 +93,6 @@ let maxHeight = $ref<number>();
 let fixed = $ref(false);
 let transformOrigin = $ref('center');
 let showing = $ref(true);
-let manuallyClosed = $ref(false);
 let content = $shallowRef<HTMLElement>();
 const zIndex = os.claimZIndex(props.zPriority);
 let useSendAnime = $ref(false);
@@ -148,21 +141,10 @@ function close(opts: { useSendAnimation?: boolean } = {}) {
 	// eslint-disable-next-line vue/no-mutating-props
 	if (props.src) props.src.style.pointerEvents = 'auto';
 	showing = false;
-	manuallyClosed = true;
 	emit('close');
-	if (props.manualShowing === false) {
-		afterLeave();
-	}
 }
 
-function afterLeave() {
-	emit('hide');
-	if (props.manualShowing === null || manuallyClosed) {
-		emit('closed');
-	}
-}
-
-function onBgClick(e) {
+function onBgClick() {
 	if (contentClicking) return;
 	emit('click');
 }

From d25c38911d5baff03948acec701a680c29cfcf96 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Fri, 4 Aug 2023 12:05:52 +0000
Subject: [PATCH 13/23] fix2

---
 packages/frontend/src/scripts/reaction-picker.ts | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/packages/frontend/src/scripts/reaction-picker.ts b/packages/frontend/src/scripts/reaction-picker.ts
index 93bf4fe7de..919c566e3f 100644
--- a/packages/frontend/src/scripts/reaction-picker.ts
+++ b/packages/frontend/src/scripts/reaction-picker.ts
@@ -24,18 +24,14 @@ class ReactionPicker {
 		}, {
 			done: reaction => {
 				this.onChosen!(reaction);
-				this.manualShowing.value = false;
 			},
 			close: () => {
 				this.manualShowing.value = false;
 			},
-			hide: () => {
+			closed: () => {
 				this.src.value = null;
 				this.onClosed!();
 			},
-			bgclick: () => {
-				this.manualShowing.value = false;
-			}
 		});
 	}
 

From 8a3dbc1c99b2c90d21f2c8644ba2a0694336a3e4 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Fri, 4 Aug 2023 12:46:45 +0000
Subject: [PATCH 14/23] :v:

---
 packages/frontend/src/components/MkPopupMenu.vue | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/frontend/src/components/MkPopupMenu.vue b/packages/frontend/src/components/MkPopupMenu.vue
index 452222d7ed..73484be481 100644
--- a/packages/frontend/src/components/MkPopupMenu.vue
+++ b/packages/frontend/src/components/MkPopupMenu.vue
@@ -41,10 +41,17 @@ function onModalClose() {
 
 function onMenuClose() {
 	close();
+	if (manualShowing.value === false) {
+		// 先にhideが来ていたらclosedを発火
+		emit('closed');
+	}
 }
 
 function closed() {
-	emit('closed');
+	if (manualShowing.value === true) {
+		// hideが来ていない場合のみclosedを発火
+		emit('closed');
+	}
 }
 
 function close() {

From c73ec739208977d2ecf7a49bb9542d348cb733dc Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Fri, 4 Aug 2023 12:48:11 +0000
Subject: [PATCH 15/23] fix

---
 .../src/components/MkEmojiPickerDialog.vue         | 14 +++-----------
 1 file changed, 3 insertions(+), 11 deletions(-)

diff --git a/packages/frontend/src/components/MkEmojiPickerDialog.vue b/packages/frontend/src/components/MkEmojiPickerDialog.vue
index acfc330c39..855d82c064 100644
--- a/packages/frontend/src/components/MkEmojiPickerDialog.vue
+++ b/packages/frontend/src/components/MkEmojiPickerDialog.vue
@@ -12,11 +12,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 	:transparentBg="true"
 	:manualShowing="manualShowing"
 	:src="src"
-	@click="click"
+	@click="modal?.close()"
 	@opening="opening"
 	@close="emit('close')"
 	@closed="emit('closed')"
-	@hide="emit('hide')"
 >
 	<MkEmojiPicker
 		ref="picker"
@@ -37,7 +36,7 @@ import MkModal from '@/components/MkModal.vue';
 import MkEmojiPicker from '@/components/MkEmojiPicker.vue';
 import { defaultStore } from '@/store';
 
-const props = withDefaults(defineProps<{
+withDefaults(defineProps<{
 	manualShowing?: boolean | null;
 	src?: HTMLElement;
 	showPinned?: boolean;
@@ -52,8 +51,6 @@ const emit = defineEmits<{
 	(ev: 'done', v: any): void;
 	(ev: 'close'): void;
 	(ev: 'closed'): void;
-	(ev: 'bgclick'): void;
-	(ev: 'hide'): void;
 }>();
 
 const modal = shallowRef<InstanceType<typeof MkModal>>();
@@ -61,7 +58,7 @@ const picker = shallowRef<InstanceType<typeof MkEmojiPicker>>();
 
 function chosen(emoji: any) {
 	emit('done', emoji);
-	if (props.manualShowing === null) modal.value?.close();
+	modal.value?.close();
 }
 
 function opening() {
@@ -73,11 +70,6 @@ function opening() {
 		picker.value?.focus();
 	}, 10);
 }
-
-function click() {
-	emit('bgclick');
-	if (props.manualShowing === null) modal.value?.close();
-}
 </script>
 
 <style lang="scss" module>

From 1294f5f06f159d5f07792499010dd2c669bd7a2e Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Fri, 4 Aug 2023 12:56:06 +0000
Subject: [PATCH 16/23] :v:

---
 .../frontend/src/components/MkPopupMenu.vue   | 21 ++++++++++---------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/packages/frontend/src/components/MkPopupMenu.vue b/packages/frontend/src/components/MkPopupMenu.vue
index 73484be481..ce0248e235 100644
--- a/packages/frontend/src/components/MkPopupMenu.vue
+++ b/packages/frontend/src/components/MkPopupMenu.vue
@@ -4,8 +4,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<MkModal ref="modal" v-slot="{ type, maxHeight }" :manualShowing="manualShowing" :zPriority="'high'" :src="src" :transparentBg="true" @click="click" @close="onModalClose" @closed="closed">
-	<MkMenu :items="items" :align="align" :width="width" :max-height="maxHeight" :asDrawer="type === 'drawer'" :class="{ [$style.drawer]: type === 'drawer' }" @close="onMenuClose" @hide="manualShowing = false"/>
+<MkModal ref="modal" v-slot="{ type, maxHeight }" :manualShowing="manualShowing" :zPriority="'high'" :src="src" :transparentBg="true" @click="click" @close="onModalClose" @closed="onModalClosed">
+	<MkMenu :items="items" :align="align" :width="width" :max-height="maxHeight" :asDrawer="type === 'drawer'" :class="{ [$style.drawer]: type === 'drawer' }" @close="onMenuClose" @hide="hide"/>
 </MkModal>
 </template>
 
@@ -30,6 +30,7 @@ const emit = defineEmits<{
 
 let modal = $shallowRef<InstanceType<typeof MkModal>>();
 const manualShowing = ref(true);
+const hiding = ref(false);
 
 function click() {
 	close();
@@ -41,22 +42,22 @@ function onModalClose() {
 
 function onMenuClose() {
 	close();
-	if (manualShowing.value === false) {
-		// 先にhideが来ていたらclosedを発火
-		emit('closed');
-	}
 }
 
-function closed() {
-	if (manualShowing.value === true) {
+function onModalClosed() {
+	if (!hiding.value) {
 		// hideが来ていない場合のみclosedを発火
 		emit('closed');
 	}
 }
 
+function hide() {
+	manualShowing.value = false;
+	hiding.value = true;
+}
+
 function close() {
-	if (!modal) return;
-	modal.close();
+	manualShowing.value = false;
 }
 </script>
 

From 6eaadfac7b12f22d6a8b8b37992b695e798ef9e5 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Fri, 4 Aug 2023 13:01:26 +0000
Subject: [PATCH 17/23] :v:

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

diff --git a/packages/frontend/src/components/MkPopupMenu.vue b/packages/frontend/src/components/MkPopupMenu.vue
index ce0248e235..73afcc1fab 100644
--- a/packages/frontend/src/components/MkPopupMenu.vue
+++ b/packages/frontend/src/components/MkPopupMenu.vue
@@ -42,11 +42,15 @@ function onModalClose() {
 
 function onMenuClose() {
 	close();
+	if (hiding.value) {
+		// hidingであればclosedを発火
+		emit('closed');
+	}
 }
 
 function onModalClosed() {
 	if (!hiding.value) {
-		// hideが来ていない場合のみclosedを発火
+		// hidingでなければclosedを発火
 		emit('closed');
 	}
 }

From 9165dc4493a802d17c13ba362ac675ac2712c128 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Fri, 4 Aug 2023 13:09:25 +0000
Subject: [PATCH 18/23] :v:

---
 packages/frontend/src/scripts/get-user-menu.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/frontend/src/scripts/get-user-menu.ts b/packages/frontend/src/scripts/get-user-menu.ts
index b0f97f74ce..445560b0c3 100644
--- a/packages/frontend/src/scripts/get-user-menu.ts
+++ b/packages/frontend/src/scripts/get-user-menu.ts
@@ -168,7 +168,6 @@ export function getUserMenu(user: misskey.entities.UserDetailed, router: Router
 		type: 'parent',
 		icon: 'ti ti-list',
 		text: i18n.ts.addToList,
-		noCache: true,
 		children: async () => {
 			const lists = await userListsCache.fetch(() => os.api('users/lists/list'));
 			return lists.map(list => {

From 68a2d9675f61d6740e8db52b4e5744fbe3617b8f Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Fri, 4 Aug 2023 13:18:11 +0000
Subject: [PATCH 19/23] preferClick

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

diff --git a/packages/frontend/src/components/MkMenu.vue b/packages/frontend/src/components/MkMenu.vue
index 26f283bc8b..bbb63c0c23 100644
--- a/packages/frontend/src/components/MkMenu.vue
+++ b/packages/frontend/src/components/MkMenu.vue
@@ -39,7 +39,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<MkSwitchButton :class="$style.switchButton" :checked="item.ref" :disabled="item.disabled" @toggle="switchItem(item)" />
 				<span :class="$style.switchText">{{ item.text }}</span>
 			</button>
-			<div v-else-if="item.type === 'parent'" role="menuitem" :tabindex="i" :class="[$style.item, $style.parent, { [$style.childShowing]: childShowingItem === item }]" @mouseenter="isTouchUsing ? null : showChildren(item, $event)" @click="!isTouchUsing ? null : showChildren(item, $event)">
+			<div v-else-if="item.type === 'parent'" role="menuitem" :tabindex="i" :class="[$style.item, $style.parent, { [$style.childShowing]: childShowingItem === item }]" @mouseenter="preferClick ? null : showChildren(item, $event)" @click="!preferClick ? null : showChildren(item, $event)">
 				<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i>
 				<span>{{ item.text }}</span>
 				<span :class="$style.caret"><i class="ti ti-chevron-right ti-fw"></i></span>
@@ -104,6 +104,8 @@ let keymap = $computed(() => ({
 
 let childShowingItem = $ref<MenuItem | null>();
 
+let preferClick = isTouchUsing || props.asDrawer;
+
 watch(() => props.items, () => {
 	const items: (MenuItem | MenuPending)[] = [...props.items].filter(item => item !== undefined);
 

From 5a3d7f9ef882eb08110aebce81241e90d8051cd2 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Fri, 4 Aug 2023 14:14:09 +0000
Subject: [PATCH 20/23] :v:

---
 packages/frontend/src/components/MkPopupMenu.vue | 6 ++++++
 packages/frontend/src/scripts/get-note-menu.ts   | 4 +++-
 packages/frontend/src/scripts/get-user-menu.ts   | 4 +++-
 3 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/src/components/MkPopupMenu.vue b/packages/frontend/src/components/MkPopupMenu.vue
index 73afcc1fab..ee7dbecf05 100644
--- a/packages/frontend/src/components/MkPopupMenu.vue
+++ b/packages/frontend/src/components/MkPopupMenu.vue
@@ -58,10 +58,16 @@ function onModalClosed() {
 function hide() {
 	manualShowing.value = false;
 	hiding.value = true;
+
+	// closeは呼ぶ必要がある
+	modal?.close();
 }
 
 function close() {
 	manualShowing.value = false;
+
+	// closeは呼ぶ必要がある
+	modal?.close();
 }
 </script>
 
diff --git a/packages/frontend/src/scripts/get-note-menu.ts b/packages/frontend/src/scripts/get-note-menu.ts
index 20cea45ee3..8e29fc0c9b 100644
--- a/packages/frontend/src/scripts/get-note-menu.ts
+++ b/packages/frontend/src/scripts/get-note-menu.ts
@@ -418,7 +418,9 @@ export function getNoteMenu(props: {
 
 	const cleanup = () => {
 		if (_DEV_) console.log('note menu cleanup', cleanups);
-		cleanups.forEach(cleanup => cleanup());
+		for (const cl of cleanups) {
+			cl();
+		}
 	};
 
 	return {
diff --git a/packages/frontend/src/scripts/get-user-menu.ts b/packages/frontend/src/scripts/get-user-menu.ts
index 445560b0c3..69a6f75c12 100644
--- a/packages/frontend/src/scripts/get-user-menu.ts
+++ b/packages/frontend/src/scripts/get-user-menu.ts
@@ -330,7 +330,9 @@ export function getUserMenu(user: misskey.entities.UserDetailed, router: Router
 
 	const cleanup = () => {
 		if (_DEV_) console.log('user menu cleanup', cleanups);
-		cleanups.forEach(cleanup => cleanup());
+		for (const cl of cleanups) {
+			cl();
+		}
 	};
 
 	return {

From 58894838f0e834e1e1f990d2cce2515b6bf99336 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Fri, 4 Aug 2023 14:53:47 +0000
Subject: [PATCH 21/23] fix lint

---
 packages/frontend/src/components/MkMenu.vue | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/frontend/src/components/MkMenu.vue b/packages/frontend/src/components/MkMenu.vue
index bbb63c0c23..3a1041acf6 100644
--- a/packages/frontend/src/components/MkMenu.vue
+++ b/packages/frontend/src/components/MkMenu.vue
@@ -125,7 +125,7 @@ watch(() => props.items, () => {
 	immediate: true,
 });
 
-let childMenu = ref<MenuItem[] | null>();
+const childMenu = ref<MenuItem[] | null>();
 let childTarget = $shallowRef<HTMLElement | null>();
 
 function closeChild() {
@@ -142,7 +142,7 @@ const onGlobalMousedown = (event: MouseEvent) => {
 	if (childTarget && (event.target === childTarget || childTarget.contains(event.target))) return;
 	if (child && child.checkHit(event)) return;
 	closeChild();
-}
+};
 
 let childCloseTimer: null | number = null;
 function onItemMouseEnter(item) {
@@ -182,7 +182,8 @@ function showChildren(item: MenuParent, ev: MouseEvent) {
 		emit('hide');
 	} else {
 		childTarget = ev.currentTarget ?? ev.target;
-		childMenu = children as Ref<MenuItem[]>;
+		// これでもリアクティビティは保たれる
+		childMenu.value = children.value as MenuItem[];
 		childShowingItem = item;
 	}
 }
@@ -212,7 +213,7 @@ function switchItem(item: MenuSwitch & { ref: any }) {
 onMounted(() => {
 	if (props.viaKeyboard) {
 		nextTick(() => {
-			focusNext(itemsEl.children[0], true, false);
+			if (itemsEl) focusNext(itemsEl.children[0], true, false);
 		});
 	}
 

From fe04bc6fb1821eee492d79eac7558ad5db18256f Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sat, 5 Aug 2023 13:16:32 +0000
Subject: [PATCH 22/23] a

---
 packages/frontend/src/components/MkMenu.vue | 28 +++++++++------------
 1 file changed, 12 insertions(+), 16 deletions(-)

diff --git a/packages/frontend/src/components/MkMenu.vue b/packages/frontend/src/components/MkMenu.vue
index 3a1041acf6..de9cf4e0a4 100644
--- a/packages/frontend/src/components/MkMenu.vue
+++ b/packages/frontend/src/components/MkMenu.vue
@@ -70,7 +70,7 @@ import * as os from '@/os';
 import { i18n } from '@/i18n';
 import { isTouchUsing } from '@/scripts/touch';
 
-const childrenCache = new WeakMap<MenuParent, Ref<(MenuItem | MenuPending)[]>>();
+const childrenCache = new WeakMap<MenuParent, MenuItem[]>();
 </script>
 
 <script lang="ts" setup>
@@ -154,36 +154,32 @@ function onItemMouseLeave(item) {
 	if (childCloseTimer) window.clearTimeout(childCloseTimer);
 }
 
-function showChildren(item: MenuParent, ev: MouseEvent) {
-	if (props.asDrawer && childrenCache.has(item)) return;
-
-	const children = (() => {
-		if (!item.noCache && childrenCache.has(item)) {
+async function showChildren(item: MenuParent, ev: MouseEvent) {
+	const children = await (async () => {
+		if (childrenCache.has(item)) {
 			return childrenCache.get(item)!;
 		} else {
 			if (typeof item.children === 'function') {
-				const result: Ref<(MenuItem | MenuPending)[]> = ref([{ type: 'pending' }]);
-				childrenCache.set(item, result);
-				Promise.resolve(item.children()).then(x => {
-					result.value = x;
-				});
-				return result;
+				return Promise.resolve(item.children());
 			} else {
-				return ref(item.children) as Ref<(MenuItem | MenuPending)[]>;
+				return item.children;
 			}
 		}
 	})();
 
+	if (!item.noCache) {
+		childrenCache.set(item, children);
+	}
+
 	if (props.asDrawer) {
-		os.popupMenu(children as Ref<MenuItem[]>, ev.currentTarget ?? ev.target).finally(() => {
-			childrenCache.delete(item);
+		os.popupMenu(children, ev.currentTarget ?? ev.target).finally(() => {
 			emit('close');
 		});
 		emit('hide');
 	} else {
 		childTarget = ev.currentTarget ?? ev.target;
 		// これでもリアクティビティは保たれる
-		childMenu.value = children.value as MenuItem[];
+		childMenu.value = children;
 		childShowingItem = item;
 	}
 }

From fb924e6dc3dfa86abd52e038bd690cf775a7abc6 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sun, 6 Aug 2023 12:41:53 +0000
Subject: [PATCH 23/23] rm nocache

---
 packages/frontend/src/components/MkMenu.vue | 4 +---
 packages/frontend/src/types/menu.ts         | 2 +-
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/frontend/src/components/MkMenu.vue b/packages/frontend/src/components/MkMenu.vue
index de9cf4e0a4..3b20856e12 100644
--- a/packages/frontend/src/components/MkMenu.vue
+++ b/packages/frontend/src/components/MkMenu.vue
@@ -167,9 +167,7 @@ async function showChildren(item: MenuParent, ev: MouseEvent) {
 		}
 	})();
 
-	if (!item.noCache) {
-		childrenCache.set(item, children);
-	}
+	childrenCache.set(item, children);
 
 	if (props.asDrawer) {
 		os.popupMenu(children, ev.currentTarget ?? ev.target).finally(() => {
diff --git a/packages/frontend/src/types/menu.ts b/packages/frontend/src/types/menu.ts
index 0f0dbda8c3..66061fcd70 100644
--- a/packages/frontend/src/types/menu.ts
+++ b/packages/frontend/src/types/menu.ts
@@ -16,7 +16,7 @@ export type MenuA = { type: 'a', href: string, target?: string, download?: strin
 export type MenuUser = { type: 'user', user: Misskey.entities.User, active?: boolean, indicate?: boolean, action: MenuAction };
 export type MenuSwitch = { type: 'switch', ref: Ref<boolean>, text: string, disabled?: boolean };
 export type MenuButton = { type?: 'button', text: string, icon?: string, indicate?: boolean, danger?: boolean, active?: boolean, avatar?: Misskey.entities.User; action: MenuAction };
-export type MenuParent = { type: 'parent', text: string, icon?: string, noCache?: boolean, children: MenuItem[] | (() => Promise<MenuItem[]> | MenuItem[]) };
+export type MenuParent = { type: 'parent', text: string, icon?: string, children: MenuItem[] | (() => Promise<MenuItem[]> | MenuItem[]) };
 
 export type MenuPending = { type: 'pending' };