Merge branch 'develop' into feat-1714

packages/frontend/src/components/MkChannelFollowButton.stories.impl.ts

@@ -12,14 +12,12 @@ import { expect, userEvent, within } from '@storybook/test';
 import { channel } from '../../.storybook/fakes.js';
 import { commonHandlers } from '../../.storybook/mocks.js';
 import MkChannelFollowButton from './MkChannelFollowButton.vue';
-import { semaphore } from '@/scripts/test-utils.js';
 import { i18n } from '@/i18n.js';
 
 function sleep(ms: number) {
 	return new Promise(resolve => setTimeout(resolve, ms));
 }
 
-const s = semaphore();
 export const Default = {
 	render(args) {
 		return {
@@ -46,17 +44,13 @@ export const Default = {
 		full: true,
 	},
 	async play({ canvasElement }) {
-		await s.acquire();
-		await sleep(1000);
 		const canvas = within(canvasElement);
 		const buttonElement = canvas.getByRole<HTMLButtonElement>('button');
 		await expect(buttonElement).toHaveTextContent(i18n.ts.follow);
 		await userEvent.click(buttonElement);
 		await sleep(1000);
 		await expect(buttonElement).toHaveTextContent(i18n.ts.unfollow);
-		await sleep(100);
 		await userEvent.click(buttonElement);
-		s.release();
 	},
 	parameters: {
 		layout: 'centered',

packages/frontend/src/components/MkClickerGame.stories.impl.ts

@@ -8,7 +8,7 @@
 import { StoryObj } from '@storybook/vue3';
 import { HttpResponse, http } from 'msw';
 import { action } from '@storybook/addon-actions';
-import { expect, within } from '@storybook/test';
+import { expect, userEvent, within } from '@storybook/test';
 import { commonHandlers } from '../../.storybook/mocks.js';
 import MkClickerGame from './MkClickerGame.vue';
 
@@ -41,12 +41,10 @@ export const Default = {
 		await sleep(1000);
 		const canvas = within(canvasElement);
 		const count = canvas.getByTestId('count');
-		// NOTE: flaky なので N/A も通しておく
-		await expect(count).toHaveTextContent(/^(0|N\/A)$/);
-		// FIXME: flaky
-		// const buttonElement = canvas.getByRole<HTMLButtonElement>('button');
-		// await userEvent.click(buttonElement);
-		// await expect(count).toHaveTextContent('1');
+		await expect(count).toHaveTextContent('0');
+		const buttonElement = canvas.getByRole<HTMLButtonElement>('button');
+		await userEvent.click(buttonElement);
+		await expect(count).toHaveTextContent('1');
 	},
 	parameters: {
 		layout: 'centered',

packages/frontend/src/components/MkClickerGame.vue

@@ -35,7 +35,9 @@ const prevCookies = ref(0);
 function onClick(ev: MouseEvent) {
 	const x = ev.clientX;
 	const y = ev.clientY;
-	os.popup(MkPlusOneEffect, { x, y }, {}, 'end');
+	const { dispose } = os.popup(MkPlusOneEffect, { x, y }, {
+		end: () => dispose(),
+	});
 
 	saveData.value!.cookies++;
 	saveData.value!.totalCookies++;

packages/frontend/src/components/MkCwButton.stories.impl.ts

@@ -11,13 +11,6 @@ import { expect, userEvent, within } from '@storybook/test';
 import { file } from '../../.storybook/fakes.js';
 import MkCwButton from './MkCwButton.vue';
 import { i18n } from '@/i18n.js';
-import { semaphore } from '@/scripts/test-utils.js';
-
-function sleep(ms: number) {
-	return new Promise(resolve => setTimeout(resolve, ms));
-}
-
-const s = semaphore();
 
 export const Default = {
 	render(args) {
@@ -54,8 +47,6 @@ export const Default = {
 		text: 'Some CW content',
 	},
 	async play({ canvasElement }) {
-		await s.acquire();
-		await sleep(1000);
 		const canvas = within(canvasElement);
 		const buttonElement = canvas.getByRole<HTMLButtonElement>('button');
 		await expect(buttonElement).toHaveTextContent(i18n.ts._cw.show);
@@ -63,7 +54,6 @@ export const Default = {
 		await userEvent.click(buttonElement);
 		await expect(buttonElement).toHaveTextContent(i18n.ts._cw.hide);
 		await userEvent.click(buttonElement);
-		s.release();
 	},
 	parameters: {
 		chromatic: {

packages/frontend/src/components/MkDrive.folder.vue

@@ -257,10 +257,11 @@ function onContextmenu(ev: MouseEvent) {
 		text: i18n.ts.openInWindow,
 		icon: 'ti ti-app-window',
 		action: () => {
-			os.popup(defineAsyncComponent(() => import('@/components/MkDriveWindow.vue')), {
+			const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkDriveWindow.vue')), {
 				initialFolder: props.folder,
 			}, {
-			}, 'closed');
+				closed: () => dispose(),
+			});
 		},
 	}, { type: 'divider' }, {
 		text: i18n.ts.rename,

packages/frontend/src/components/MkEmojiPicker.vue

@@ -402,7 +402,9 @@ function chosen(emoji: any, ev?: MouseEvent) {
 		const rect = el.getBoundingClientRect();
 		const x = rect.left + (el.offsetWidth / 2);
 		const y = rect.top + (el.offsetHeight / 2);
-		os.popup(MkRippleEffect, { x, y }, {}, 'end');
+		const { dispose } = os.popup(MkRippleEffect, { x, y }, {
+			end: () => dispose(),
+		});
 	}
 
 	const key = getKey(emoji);

packages/frontend/src/components/MkLink.vue

@@ -37,11 +37,13 @@ const el = ref<HTMLElement | { $el: HTMLElement }>();
 
 if (isEnabledUrlPreview.value) {
 	useTooltip(el, (showing) => {
-		os.popup(defineAsyncComponent(() => import('@/components/MkUrlPreviewPopup.vue')), {
+		const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkUrlPreviewPopup.vue')), {
 			showing,
 			url: props.url,
 			source: el.value instanceof HTMLElement ? el.value : el.value?.$el,
-		}, {}, 'closed');
+		}, {
+			closed: () => dispose(),
+		});
 	});
 }
 </script>

packages/frontend/src/components/MkNote.vue

@@ -355,12 +355,14 @@ if (!props.mock && !inEmbedPage) {
 
 		if (users.length < 1) return;
 
-		os.popup(MkUsersTooltip, {
+		const { dispose } = os.popup(MkUsersTooltip, {
 			showing,
 			users,
 			count: appearNote.value.renoteCount,
 			targetElement: renoteButton.value,
-		}, {}, 'closed');
+		}, {
+			closed: () => dispose(),
+		});
 	});
 
 	if (appearNote.value.reactionAcceptance === 'likeOnly') {
@@ -375,13 +377,15 @@ if (!props.mock && !inEmbedPage) {
 
 			if (users.length < 1) return;
 
-			os.popup(MkReactionsViewerDetails, {
+			const { dispose } = os.popup(MkReactionsViewerDetails, {
 				showing,
 				reaction: '❤️',
 				users,
 				count: appearNote.value.reactionCount,
 				targetElement: reactButton.value!,
-			}, {}, 'closed');
+			}, {
+				closed: () => dispose(),
+			});
 		});
 	}
 }
@@ -429,7 +433,9 @@ function react(viaKeyboard = false): void {
 			const rect = el.getBoundingClientRect();
 			const x = rect.left + (el.offsetWidth / 2);
 			const y = rect.top + (el.offsetHeight / 2);
-			os.popup(MkRippleEffect, { x, y }, {}, 'end');
+			const { dispose } = os.popup(MkRippleEffect, { x, y }, {
+				end: () => dispose(),
+			});
 		}
 	} else {
 		blur();

packages/frontend/src/components/MkNoteDetailed.vue

@@ -400,12 +400,14 @@ useTooltip(renoteButton, async (showing) => {
 
 	if (users.length < 1) return;
 
-	os.popup(MkUsersTooltip, {
+	const { dispose } = os.popup(MkUsersTooltip, {
 		showing,
 		users,
 		count: appearNote.value.renoteCount,
 		targetElement: renoteButton.value,
-	}, {}, 'closed');
+	}, {
+		closed: () => dispose(),
+	});
 });
 
 if (appearNote.value.reactionAcceptance === 'likeOnly') {
@@ -420,13 +422,15 @@ if (appearNote.value.reactionAcceptance === 'likeOnly') {
 
 		if (users.length < 1) return;
 
-		os.popup(MkReactionsViewerDetails, {
+		const { dispose } = os.popup(MkReactionsViewerDetails, {
 			showing,
 			reaction: '❤️',
 			users,
 			count: appearNote.value.reactionCount,
 			targetElement: reactButton.value!,
-		}, {}, 'closed');
+		}, {
+			closed: () => dispose(),
+		});
 	});
 }
 
@@ -467,7 +471,9 @@ function react(viaKeyboard = false): void {
 			const rect = el.getBoundingClientRect();
 			const x = rect.left + (el.offsetWidth / 2);
 			const y = rect.top + (el.offsetHeight / 2);
-			os.popup(MkRippleEffect, { x, y }, {}, 'end');
+			const { dispose } = os.popup(MkRippleEffect, { x, y }, {
+				end: () => dispose(),
+			});
 		}
 	} else {
 		blur();

packages/frontend/src/components/MkPostForm.vue

@@ -463,7 +463,7 @@ function setVisibility() {
 		return;
 	}
 
-	os.popup(defineAsyncComponent(() => import('@/components/MkVisibilityPicker.vue')), {
+	const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkVisibilityPicker.vue')), {
 		currentVisibility: visibility.value,
 		isSilenced: $i.isSilenced,
 		localOnly: localOnly.value,
@@ -476,7 +476,8 @@ function setVisibility() {
 				defaultStore.set('visibility', visibility.value);
 			}
 		},
-	}, 'closed');
+		closed: () => dispose(),
+	});
 }
 
 async function toggleLocalOnly() {
@@ -624,8 +625,8 @@ async function onPaste(ev: ClipboardEvent) {
 				return;
 			}
 
-			const fileName = formatTimeString(new Date(), defaultStore.state.pastedFileName).replace(/{{number}}/g, "0");
-			const file = new File([paste], `${fileName}.txt`, { type: "text/plain" });
+			const fileName = formatTimeString(new Date(), defaultStore.state.pastedFileName).replace(/{{number}}/g, '0');
+			const file = new File([paste], `${fileName}.txt`, { type: 'text/plain' });
 			upload(file, `${fileName}.txt`);
 		});
 	}
@@ -731,7 +732,9 @@ async function post(ev?: MouseEvent) {
 			const rect = el.getBoundingClientRect();
 			const x = rect.left + (el.offsetWidth / 2);
 			const y = rect.top + (el.offsetHeight / 2);
-			os.popup(MkRippleEffect, { x, y }, {}, 'end');
+			const { dispose } = os.popup(MkRippleEffect, { x, y }, {
+				end: () => dispose(),
+			});
 		}
 	}
 

packages/frontend/src/components/MkPostFormAttaches.vue

@@ -108,7 +108,7 @@ async function rename(file) {
 async function describe(file) {
 	if (mock) return;
 
-	os.popup(defineAsyncComponent(() => import('@/components/MkFileCaptionEditWindow.vue')), {
+	const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkFileCaptionEditWindow.vue')), {
 		default: file.comment !== null ? file.comment : '',
 		file: file,
 	}, {
@@ -121,7 +121,8 @@ async function describe(file) {
 				file.comment = comment;
 			});
 		},
-	}, 'closed');
+		closed: () => dispose(),
+	});
 }
 
 async function crop(file: Misskey.entities.DriveFile): Promise<void> {

packages/frontend/src/components/MkRange.vue

@@ -101,17 +101,19 @@ const steps = computed(() => {
 	}
 });
 
-const onMousedown = (ev: MouseEvent | TouchEvent) => {
+function onMousedown(ev: MouseEvent | TouchEvent) {
 	ev.preventDefault();
 
 	const tooltipShowing = ref(true);
-	os.popup(defineAsyncComponent(() => import('@/components/MkTooltip.vue')), {
+	const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkTooltip.vue')), {
 		showing: tooltipShowing,
 		text: computed(() => {
 			return props.textConverter(finalValue.value);
 		}),
 		targetElement: thumbEl,
-	}, {}, 'closed');
+	}, {
+		closed: () => dispose(),
+	});
 
 	const style = document.createElement('style');
 	style.appendChild(document.createTextNode('* { cursor: grabbing !important; } body * { pointer-events: none !important; }'));
@@ -152,7 +154,7 @@ const onMousedown = (ev: MouseEvent | TouchEvent) => {
 	window.addEventListener('touchmove', onDrag);
 	window.addEventListener('mouseup', onMouseup, { once: true });
 	window.addEventListener('touchend', onMouseup, { once: true });
-};
+}
 </script>
 
 <style lang="scss" scoped>

packages/frontend/src/components/MkReactionIcon.vue

@@ -24,11 +24,13 @@ const elRef = shallowRef();
 
 if (props.withTooltip) {
 	useTooltip(elRef, (showing) => {
-		os.popup(defineAsyncComponent(() => import('@/components/MkReactionTooltip.vue')), {
+		const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkReactionTooltip.vue')), {
 			showing,
 			reaction: props.reaction.replace(/^:(\w+):$/, ':$1@.:'),
 			targetElement: elRef.value.$el,
-		}, {}, 'closed');
+		}, {
+			closed: () => dispose(),
+		});
 	});
 }
 </script>

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

@@ -115,10 +115,12 @@ async function menu(ev) {
 		text: i18n.ts.info,
 		icon: 'ti ti-info-circle',
 		action: async () => {
-			os.popup(MkCustomEmojiDetailedDialog, {
+			const { dispose } = os.popup(MkCustomEmojiDetailedDialog, {
 				emoji: await misskeyApiGet('emoji', {
 					name: props.reaction.replace(/:/g, '').replace(/@\./, ''),
 				}),
+			}, {
+				closed: () => dispose(),
 			});
 		},
 	}], ev.currentTarget ?? ev.target);
@@ -130,7 +132,9 @@ function anime() {
 	const rect = buttonEl.value.getBoundingClientRect();
 	const x = rect.left + 16;
 	const y = rect.top + (buttonEl.value.offsetHeight / 2);
-	os.popup(MkReactionEffect, { reaction: props.reaction, x, y }, {}, 'end');
+	const { dispose } = os.popup(MkReactionEffect, { reaction: props.reaction, x, y }, {
+		end: () => dispose(),
+	});
 }
 
 watch(() => props.count, (newCount, oldCount) => {
@@ -152,13 +156,15 @@ if (!mock && !inEmbedPage) {
 
 		const users = reactions.map(x => x.user);
 
-		os.popup(XDetails, {
+		const { dispose } = os.popup(XDetails, {
 			showing,
 			reaction: props.reaction,
 			users,
 			count: props.count,
 			targetElement: buttonEl.value,
-		}, {}, 'closed');
+		}, {
+			closed: () => dispose(),
+		});
 	}, 100);
 }
 </script>

packages/frontend/src/components/MkSignin.vue

@@ -218,8 +218,9 @@ function loginFailed(err: any): void {
 }
 
 function resetPassword(): void {
-	os.popup(defineAsyncComponent(() => import('@/components/MkForgotPassword.vue')), {}, {
-	}, 'closed');
+	const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkForgotPassword.vue')), {}, {
+		closed: () => dispose(),
+	});
 }
 </script>
 

packages/frontend/src/components/MkSystemWebhookEditor.impl.ts

@@ -25,15 +25,15 @@ export type MkSystemWebhookResult = {
 
 export async function showSystemWebhookEditorDialog(props: MkSystemWebhookEditorProps): Promise<MkSystemWebhookResult | null> {
 	const { dispose, result } = await new Promise<{ dispose: () => void, result: MkSystemWebhookResult | null }>(async resolve => {
-		const res = await os.popup(
+		const { dispose: _dispose } = os.popup(
 			defineAsyncComponent(() => import('@/components/MkSystemWebhookEditor.vue')),
 			props,
 			{
 				submitted: (ev: MkSystemWebhookResult) => {
-					resolve({ dispose: res.dispose, result: ev });
+					resolve({ dispose: _dispose, result: ev });
 				},
 				closed: () => {
-					resolve({ dispose: res.dispose, result: null });
+					resolve({ dispose: _dispose, result: null });
 				},
 			},
 		);

packages/frontend/src/components/MkUrlPreview.vue

@@ -188,11 +188,13 @@ function adjustTweetHeight(message: any) {
 	if (height) tweetHeight.value = height;
 }
 
-const openPlayer = (): void => {
-	os.popup(defineAsyncComponent(() => import('@/components/MkYouTubePlayer.vue')), {
+function openPlayer(): void {
+	const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkYouTubePlayer.vue')), {
 		url: requestUrl.href,
+	}, {
+		// TODO
 	});
-};
+}
 
 (window as any).addEventListener('message', adjustTweetHeight);
 

packages/frontend/src/components/MkUserSetupDialog.vue

@@ -176,9 +176,11 @@ function setupComplete() {
 function launchTutorial() {
 	setupComplete();
 	nextTick(() => {
-		os.popup(defineAsyncComponent(() => import('@/components/MkTutorialDialog.vue')), {
+		const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkTutorialDialog.vue')), {
 			initialPage: 1,
-		}, {}, 'closed');
+		}, {
+			closed: () => dispose(),
+		});
 	});
 }
 

packages/frontend/src/components/MkVisitorDashboard.vue

@@ -74,15 +74,19 @@ misskeyApi('stats', {}).then((res) => {
 });
 
 function signin() {
-	os.popup(XSigninDialog, {
+	const { dispose } = os.popup(XSigninDialog, {
 		autoSet: true,
-	}, {}, 'closed');
+	}, {
+		closed: () => dispose(),
+	});
 }
 
 function signup() {
-	os.popup(XSignupDialog, {
+	const { dispose } = os.popup(XSignupDialog, {
 		autoSet: true,
-	}, {}, 'closed');
+	}, {
+		closed: () => dispose(),
+	});
 }
 
 function showMenu(ev) {

packages/frontend/src/components/global/MkA.stories.impl.ts

@@ -35,12 +35,10 @@ export const Default = {
 		// FIXME: 通るけどその後落ちるのでコメントアウト
 		// await expect(a.href).toMatch(/^https?:\/\/.*#test$/);
 		await userEvent.pointer({ keys: '[MouseRight]', target: a });
-		await tick();
 		const menu = canvas.getByRole('menu');
 		await expect(menu).toBeInTheDocument();
 		await userEvent.click(a);
 		a.blur();
-		await tick();
 		await expect(menu).not.toBeInTheDocument();
 	},
 	args: {

packages/frontend/src/components/global/MkAd.stories.impl.ts

@@ -9,12 +9,6 @@ import { StoryObj } from '@storybook/vue3';
 import MkAd from './MkAd.vue';
 import { i18n } from '@/i18n.js';
 
-let lock: Promise<undefined> | undefined;
-
-function sleep(ms: number) {
-	return new Promise(resolve => setTimeout(resolve, ms));
-}
-
 const common = {
 	render(args) {
 		return {
@@ -37,56 +31,41 @@ const common = {
 		};
 	},
 	async play({ canvasElement, args }) {
-		if (lock) {
-			console.warn('This test is unexpectedly running twice in parallel, fix it!');
-			console.warn('See also: https://github.com/misskey-dev/misskey/issues/11267');
-			await lock;
+		const canvas = within(canvasElement);
+		const a = canvas.getByRole<HTMLAnchorElement>('link');
+		// FIXME: 通るけどその後落ちるのでコメントアウト
+		// await expect(a.href).toMatch(/^https?:\/\/.*#test$/);
+		const img = within(a).getByRole('img');
+		await expect(img).toBeInTheDocument();
+		let buttons = canvas.getAllByRole<HTMLButtonElement>('button');
+		await expect(buttons).toHaveLength(1);
+		const i = buttons[0];
+		await expect(i).toBeInTheDocument();
+		await userEvent.click(i);
+		await expect(canvasElement).toHaveTextContent(i18n.ts._ad.back);
+		await expect(a).not.toBeInTheDocument();
+		await expect(i).not.toBeInTheDocument();
+		buttons = canvas.getAllByRole<HTMLButtonElement>('button');
+		const hasReduceFrequency = args.specify?.ratio !== 0;
+		await expect(buttons).toHaveLength(hasReduceFrequency ? 2 : 1);
+		const reduce = hasReduceFrequency ? buttons[0] : null;
+		const back = buttons[hasReduceFrequency ? 1 : 0];
+		if (reduce) {
+			await expect(reduce).toBeInTheDocument();
+			await expect(reduce).toHaveTextContent(i18n.ts._ad.reduceFrequencyOfThisAd);
 		}
-
-		let resolve: (value?: any) => void;
-		lock = new Promise(r => resolve = r);
-
-		try {
-			// NOTE: sleep しないと何故か落ちる
-			await sleep(100);
-			const canvas = within(canvasElement);
-			const a = canvas.getByRole<HTMLAnchorElement>('link');
-			// await expect(a.href).toMatch(/^https?:\/\/.*#test$/);
-			const img = within(a).getByRole('img');
-			await expect(img).toBeInTheDocument();
-			let buttons = canvas.getAllByRole<HTMLButtonElement>('button');
-			await expect(buttons).toHaveLength(1);
-			const i = buttons[0];
-			await expect(i).toBeInTheDocument();
-			await userEvent.click(i);
-			await expect(canvasElement).toHaveTextContent(i18n.ts._ad.back);
-			await expect(a).not.toBeInTheDocument();
-			await expect(i).not.toBeInTheDocument();
-			buttons = canvas.getAllByRole<HTMLButtonElement>('button');
-			const hasReduceFrequency = args.specify?.ratio !== 0;
-			await expect(buttons).toHaveLength(hasReduceFrequency ? 2 : 1);
-			const reduce = hasReduceFrequency ? buttons[0] : null;
-			const back = buttons[hasReduceFrequency ? 1 : 0];
-			if (reduce) {
-				await expect(reduce).toBeInTheDocument();
-				await expect(reduce).toHaveTextContent(i18n.ts._ad.reduceFrequencyOfThisAd);
-			}
-			await expect(back).toBeInTheDocument();
-			await expect(back).toHaveTextContent(i18n.ts._ad.back);
-			await userEvent.click(back);
-			await waitFor(() => expect(canvas.queryByRole('img')).toBeTruthy());
-			if (reduce) {
-				await expect(reduce).not.toBeInTheDocument();
-			}
-			await expect(back).not.toBeInTheDocument();
-			const aAgain = canvas.getByRole<HTMLAnchorElement>('link');
-			await expect(aAgain).toBeInTheDocument();
-			const imgAgain = within(aAgain).getByRole('img');
-			await expect(imgAgain).toBeInTheDocument();
-		} finally {
-			resolve!();
-			lock = undefined;
+		await expect(back).toBeInTheDocument();
+		await expect(back).toHaveTextContent(i18n.ts._ad.back);
+		await userEvent.click(back);
+		await waitFor(() => expect(canvas.queryByRole('img')).toBeTruthy());
+		if (reduce) {
+			await expect(reduce).not.toBeInTheDocument();
 		}
+		await expect(back).not.toBeInTheDocument();
+		const aAgain = canvas.getByRole<HTMLAnchorElement>('link');
+		await expect(aAgain).toBeInTheDocument();
+		const imgAgain = within(aAgain).getByRole('img');
+		await expect(imgAgain).toBeInTheDocument();
 	},
 	args: {
 		prefer: [],

packages/frontend/src/components/global/MkCustomEmoji.vue

@@ -106,12 +106,12 @@ function onClick(ev: MouseEvent) {
 			text: i18n.ts.info,
 			icon: 'ti ti-info-circle',
 			action: async () => {
-				os.popup(MkCustomEmojiDetailedDialog, {
+				const { dispose } = os.popup(MkCustomEmojiDetailedDialog, {
 					emoji: await misskeyApiGet('emoji', {
 						name: customEmojiName.value,
 					}),
 				}, {
-					anchor: ev.target,
+					closed: () => dispose(),
 				});
 			},
 		}], ev.currentTarget ?? ev.target);

packages/frontend/src/components/global/MkUrl.vue

@@ -50,11 +50,13 @@ const el = ref();
 
 if (props.showUrlPreview && isEnabledUrlPreview.value) {
 	useTooltip(el, (showing) => {
-		os.popup(defineAsyncComponent(() => import('@/components/MkUrlPreviewPopup.vue')), {
+		const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkUrlPreviewPopup.vue')), {
 			showing,
 			url: props.url,
 			source: el.value instanceof HTMLElement ? el.value : el.value?.$el,
-		}, {}, 'closed');
+		}, {
+			closed: () => dispose(),
+		});
 	});
 }