Merge remote-tracking branch 'misskey/release/2024.5.0' into future-2024-04-25-post

packages/frontend/src/components/MkAbuseReport.vue

@@ -20,7 +20,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	</div>
 	<div class="detail">
 		<div>
-			<Mfm :text="report.comment"/>
+			<Mfm :text="report.comment" :linkNavigationBehavior="'window'"/>
 		</div>
 		<hr/>
 		<div>{{ i18n.ts.reporter }}: <MkA :to="`/admin/user/${report.reporter.id}`" class="_link" :behavior="'window'">@{{ report.reporter.username }}</MkA></div>

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

@@ -4,7 +4,10 @@
  */
 
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
+import { action } from '@storybook/addon-actions';
 import { StoryObj } from '@storybook/vue3';
+import { HttpResponse, http } from 'msw';
+import { commonHandlers } from '../../.storybook/mocks.js';
 import { userDetailed } from '../../.storybook/fakes.js';
 import MkAccountMoved from './MkAccountMoved.vue';
 export const Default = {
@@ -29,10 +32,18 @@ export const Default = {
 		};
 	},
 	args: {
-		username: userDetailed().username,
-		host: userDetailed().host,
+		movedTo: userDetailed().id,
 	},
 	parameters: {
 		layout: 'centered',
+		msw: {
+			handlers: [
+				...commonHandlers,
+				http.post('/api/users/show', async ({ request }) => {
+					action('POST /api/users/show')(await request.json());
+					return HttpResponse.json(userDetailed());
+				}),
+			],
+		},
 	},
 } satisfies StoryObj<typeof MkAccountMoved>;

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

@@ -4,7 +4,10 @@
  */
 
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
+import { action } from '@storybook/addon-actions';
 import { StoryObj } from '@storybook/vue3';
+import { HttpResponse, http } from 'msw';
+import { commonHandlers } from '../../.storybook/mocks.js';
 import MkAnnouncementDialog from './MkAnnouncementDialog.vue';
 export const Default = {
 	render(args) {
@@ -23,8 +26,13 @@ export const Default = {
 						...this.args,
 					};
 				},
+				events() {
+					return {
+						closed: action('closed'),
+					};
+				},
 			},
-			template: '<MkAnnouncementDialog v-bind="props" />',
+			template: '<MkAnnouncementDialog v-bind="props" v-on="events" />',
 		};
 	},
 	args: {
@@ -38,10 +46,20 @@ export const Default = {
 			imageUrl: null,
 			display: 'dialog',
 			needConfirmationToRead: false,
+			silence: false,
 			forYou: true,
 		},
 	},
 	parameters: {
 		layout: 'centered',
+		msw: {
+			handlers: [
+				...commonHandlers,
+				http.post('/api/i/read-announcement', async ({ request }) => {
+					action('POST /api/i/read-announcement')(await request.json());
+					return HttpResponse.json();
+				}),
+			],
+		},
 	},
 } satisfies StoryObj<typeof MkAnnouncementDialog>;

packages/frontend/src/components/MkAsUi.vue

@@ -44,6 +44,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 			:instant="true"
 			:initialText="c.form?.text"
 			:initialCw="c.form?.cw"
+			:initialVisibility="c.form?.visibility"
+			:initialLocalOnly="c.form?.localOnly"
 		/>
 	</div>
 	<MkFolder v-else-if="c.type === 'folder'" :defaultOpen="c.opened">
@@ -111,6 +113,8 @@ function openPostForm() {
 	os.post({
 		initialText: form.text,
 		initialCw: form.cw,
+		initialVisibility: form.visibility,
+		initialLocalOnly: form.localOnly,
 		instant: true,
 	});
 }

packages/frontend/src/components/MkFeaturedPhotos.vue

@@ -4,19 +4,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<div v-if="meta" :class="$style.root" :style="{ backgroundImage: `url(${ meta.backgroundImageUrl })` }"></div>
+<div v-if="instance" :class="$style.root" :style="{ backgroundImage: `url(${ instance.backgroundImageUrl })` }"></div>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
-import * as Misskey from 'misskey-js';
-import { misskeyApi } from '@/scripts/misskey-api.js';
-
-const meta = ref<Misskey.entities.MetaResponse>();
-
-misskeyApi('meta', { detail: true }).then(gotMeta => {
-	meta.value = gotMeta;
-});
+import { instance } from '@/instance.js';
 </script>
 
 <style lang="scss" module>

packages/frontend/src/components/MkLink.vue

@@ -6,6 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <component
 	:is="self ? 'MkA' : 'a'" ref="el" style="word-break: break-all;" class="_link" :[attr]="self ? url.substring(local.length) : url" :rel="rel ?? 'nofollow noopener'" :target="target"
+	:behavior="props.navigationBehavior"
 	:title="url"
 	@click.stop
 >
@@ -20,10 +21,12 @@ import { url as local } from '@/config.js';
 import { useTooltip } from '@/scripts/use-tooltip.js';
 import * as os from '@/os.js';
 import { isEnabledUrlPreview } from '@/instance.js';
+import { MkABehavior } from '@/components/global/MkA.vue';
 
 const props = withDefaults(defineProps<{
 	url: string;
 	rel?: null | string;
+	navigationBehavior?: MkABehavior;
 }>(), {
 });
 

packages/frontend/src/components/MkMention.vue

@@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<MkA v-user-preview="canonical" :class="[$style.root, { [$style.isMe]: isMe }]" :to="url" :style="{ background: bgCss }">
+<MkA v-user-preview="canonical" :class="[$style.root, { [$style.isMe]: isMe }]" :to="url" :style="{ background: bgCss }" :behavior="navigationBehavior">
 	<img :class="$style.icon" :src="avatarUrl" alt="">
 	<span>
 		<span>@{{ username }}</span>
@@ -21,10 +21,12 @@ import { host as localHost } from '@/config.js';
 import { $i } from '@/account.js';
 import { defaultStore } from '@/store.js';
 import { getStaticImageUrl } from '@/scripts/media-proxy.js';
+import { MkABehavior } from '@/components/global/MkA.vue';
 
 const props = defineProps<{
 	username: string;
 	host: string;
+	navigationBehavior?: MkABehavior;
 }>();
 
 const canonical = props.host === localHost ? `@${props.username}` : `@${props.username}@${toUnicode(props.host)}`;

packages/frontend/src/components/MkNotification.vue

@@ -61,8 +61,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<span v-else-if="notification.type === 'achievementEarned'">{{ i18n.ts._notification.achievementEarned }}</span>
 			<span v-else-if="notification.type === 'test'">{{ i18n.ts._notification.testNotification }}</span>
 			<MkA v-else-if="notification.type === 'follow' || notification.type === 'mention' || notification.type === 'reply' || notification.type === 'renote' || notification.type === 'quote' || notification.type === 'reaction' || notification.type === 'receiveFollowRequest' || notification.type === 'followRequestAccepted'" v-user-preview="notification.user.id" :class="$style.headerName" :to="userPage(notification.user)"><MkUserName :user="notification.user"/></MkA>
-			<span v-else-if="notification.type === 'reaction:grouped' && notification.note.reactionAcceptance === 'likeOnly'">{{ i18n.tsx._notification.likedBySomeUsers({ n: notification.reactions.length }) }}</span>
-			<span v-else-if="notification.type === 'reaction:grouped'">{{ i18n.tsx._notification.reactedBySomeUsers({ n: notification.reactions.length }) }}</span>
+			<span v-else-if="notification.type === 'reaction:grouped' && notification.note.reactionAcceptance === 'likeOnly'">{{ i18n.tsx._notification.likedBySomeUsers({ n: getActualReactedUsersCount(notification) }) }}</span>
+			<span v-else-if="notification.type === 'reaction:grouped'">{{ i18n.tsx._notification.reactedBySomeUsers({ n: getActualReactedUsersCount(notification) }) }}</span>
 			<span v-else-if="notification.type === 'renote:grouped'">{{ i18n.tsx._notification.renotedBySomeUsers({ n: notification.users.length }) }}</span>
 			<span v-else-if="notification.type === 'app'">{{ notification.header }}</span>
 			<span v-else-if="notification.type === 'edited'">{{ i18n.ts._notification.edited }}</span>
@@ -76,7 +76,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</MkA>
 			<MkA v-else-if="notification.type === 'renote' || notification.type === 'renote:grouped'" :class="$style.text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note.renote)">
 				<i class="ph-quotes ph-bold ph-lg" :class="$style.quote"></i>
-				<Mfm :text="getNoteSummary(notification.note.renote)" :plain="true" :nowrap="true" :author="notification.note.renote.user"/>
+				<Mfm :text="getNoteSummary(notification.note.renote)" :plain="true" :nowrap="true" :author="notification.note.renote?.user"/>
 				<i class="ph-quotes ph-bold ph-lg" :class="$style.quote"></i>
 			</MkA>
 			<MkA v-else-if="notification.type === 'reply'" :class="$style.text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)">
@@ -184,6 +184,11 @@ const rejectFollowRequest = () => {
 	followRequestDone.value = true;
 	misskeyApi('following/requests/reject', { userId: props.notification.user.id });
 };
+
+function getActualReactedUsersCount(notification: Misskey.entities.Notification) {
+	if (notification.type !== 'reaction:grouped') return 0;
+	return new Set(notification.reactions.map((reaction) => reaction.user.id)).size;
+}
 </script>
 
 <style lang="scss" module>

packages/frontend/src/components/MkPostForm.vue

@@ -158,6 +158,7 @@ const props = withDefaults(defineProps<{
 	initialVisibleUsers: () => [],
 	autofocus: true,
 	mock: false,
+	initialLocalOnly: undefined,
 });
 
 provide('mock', props.mock);
@@ -187,8 +188,8 @@ watch(showPreview, () => defaultStore.set('showPreview', showPreview.value));
 const showAddMfmFunction = ref(defaultStore.state.enableQuickAddMfmFunction);
 watch(showAddMfmFunction, () => defaultStore.set('enableQuickAddMfmFunction', showAddMfmFunction.value));
 const cw = ref<string | null>(props.initialCw ?? null);
-const localOnly = ref<boolean>(props.initialLocalOnly ?? defaultStore.state.rememberNoteVisibility ? defaultStore.state.localOnly : defaultStore.state.defaultNoteLocalOnly);
-const visibility = ref(props.initialVisibility ?? (defaultStore.state.rememberNoteVisibility ? defaultStore.state.visibility : defaultStore.state.defaultNoteVisibility) as typeof Misskey.noteVisibilities[number]);
+const localOnly = ref(props.initialLocalOnly ?? (defaultStore.state.rememberNoteVisibility ? defaultStore.state.localOnly : defaultStore.state.defaultNoteLocalOnly));
+const visibility = ref(props.initialVisibility ?? (defaultStore.state.rememberNoteVisibility ? defaultStore.state.visibility : defaultStore.state.defaultNoteVisibility));
 const visibleUsers = ref<Misskey.entities.UserDetailed[]>([]);
 if (props.initialVisibleUsers) {
 	props.initialVisibleUsers.forEach(pushVisibleUser);
@@ -524,6 +525,9 @@ async function toggleLocalOnly() {
 	}
 
 	localOnly.value = !localOnly.value;
+	if (defaultStore.state.rememberNoteVisibility) {
+		defaultStore.set('localOnly', localOnly.value);
+	}
 }
 
 async function toggleReactionAcceptance() {

packages/frontend/src/components/MkPostFormDialog.vue

@@ -15,7 +15,7 @@ import * as Misskey from 'misskey-js';
 import MkModal from '@/components/MkModal.vue';
 import MkPostForm from '@/components/MkPostForm.vue';
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
 	reply?: Misskey.entities.Note;
 	renote?: Misskey.entities.Note;
 	channel?: any; // TODO
@@ -32,7 +32,9 @@ const props = defineProps<{
 	fixed?: boolean;
 	autofocus?: boolean;
 	editId?: Misskey.entities.Note["id"];
-}>();
+}>(), {
+	initialLocalOnly: undefined,
+});
 
 const emit = defineEmits<{
 	(ev: 'closed'): void;

packages/frontend/src/components/MkSignupDialog.rules.stories.impl.ts

@@ -51,13 +51,16 @@ export const Empty = {
 		expect(buttons.at(-1)).toBeEnabled();
 	},
 	args: {
+		// @ts-expect-error serverRules is for test
 		serverRules: [],
 		tosUrl: null,
 	},
 	decorators: [
 		(_, context) => ({
 			setup() {
+				// @ts-expect-error serverRules is for test
 				instance.serverRules = context.args.serverRules;
+				// @ts-expect-error tosUrl is for test
 				instance.tosUrl = context.args.tosUrl;
 				onBeforeUnmount(() => {
 					// FIXME: 呼び出されない
@@ -76,6 +79,7 @@ export const ServerRulesOnly = {
 	...Empty,
 	args: {
 		...Empty.args,
+		// @ts-expect-error serverRules is for test
 		serverRules: [
 			'ルール',
 		],
@@ -85,6 +89,7 @@ export const TOSOnly = {
 	...Empty,
 	args: {
 		...Empty.args,
+		// @ts-expect-error tosUrl is for test
 		tosUrl: 'https://example.com/tos',
 	},
 } satisfies StoryObj<typeof MkSignupServerRules>;
@@ -92,6 +97,7 @@ export const ServerRulesAndTOS = {
 	...Empty,
 	args: {
 		...Empty.args,
+		// @ts-expect-error serverRules is for test
 		serverRules: ServerRulesOnly.args.serverRules,
 		tosUrl: TOSOnly.args.tosUrl,
 	},

packages/frontend/src/components/MkVisitorDashboard.vue

@@ -4,19 +4,19 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<div v-if="meta" :class="$style.root">
+<div v-if="instance" :class="$style.root">
 	<div :class="[$style.main, $style.panel]">
 		<img :src="instance.iconUrl || '/apple-touch-icon.png'" alt="" :class="$style.mainIcon"/>
 		<button class="_button _acrylic" :class="$style.mainMenu" @click="showMenu"><i class="ph-dots-three ph-bold ph-lg"></i></button>
 		<div :class="$style.mainFg">
 			<h1 :class="$style.mainTitle">
 				<!-- 背景色によってはロゴが見えなくなるのでとりあえず無効に -->
-				<!-- <img class="logo" v-if="meta.logoImageUrl" :src="meta.logoImageUrl"><span v-else class="text">{{ instanceName }}</span> -->
+				<!-- <img class="logo" v-if="instance.logoImageUrl" :src="instance.logoImageUrl"><span v-else class="text">{{ instanceName }}</span> -->
 				<span>{{ instanceName }}</span>
 			</h1>
 			<div :class="$style.mainAbout">
 				<!-- eslint-disable-next-line vue/no-v-html -->
-				<div v-html="sanitizeHtml(meta.description) || i18n.ts.headlineMisskey"></div>
+				<div v-html="sanitizeHtml(instance.description) || i18n.ts.headlineMisskey"></div>
 			</div>
 			<div v-if="instance.disableRegistration" :class="$style.mainWarn">
 				<MkInfo warn>{{ i18n.ts.invitationRequiredToRegister }}</MkInfo>
@@ -69,14 +69,10 @@ import { i18n } from '@/i18n.js';
 import { instance } from '@/instance.js';
 import MkNumber from '@/components/MkNumber.vue';
 import XActiveUsersChart from '@/components/MkVisitorDashboard.ActiveUsersChart.vue';
+import { openInstanceMenu } from '@/ui/_common_/common';
 
-const meta = ref<Misskey.entities.MetaResponse | null>(null);
 const stats = ref<Misskey.entities.StatsResponse | null>(null);
 
-misskeyApi('meta', { detail: true }).then(_meta => {
-	meta.value = _meta;
-});
-
 misskeyApi('stats', {}).then((res) => {
 	stats.value = res;
 });
@@ -94,49 +90,7 @@ function signup() {
 }
 
 function showMenu(ev) {
-	os.popupMenu([{
-		text: i18n.ts.instanceInfo,
-		icon: 'ph-info ph-bold ph-lg',
-		action: () => {
-			os.pageWindow('/about');
-		},
-	}, {
-		text: i18n.ts.aboutMisskey,
-		icon: 'sk-icons sk-shark ph-bold',
-		action: () => {
-			os.pageWindow('/about-sharkey');
-		},
-	}, { type: 'divider' }, (instance.impressumUrl) ? {
-		text: i18n.ts.impressum,
-		icon: 'ph-newspaper-clipping ph-bold ph-lg',
-		action: () => {
-			window.open(instance.impressumUrl!, '_blank', 'noopener');
-		},
-	} : undefined, (instance.tosUrl) ? {
-		text: i18n.ts.termsOfService,
-		icon: 'ph-notebook ph-bold ph-lg',
-		action: () => {
-			window.open(instance.tosUrl!, '_blank', 'noopener');
-		},
-	} : undefined, (instance.privacyPolicyUrl) ? {
-		text: i18n.ts.privacyPolicy,
-		icon: 'ph-shield ph-bold ph-lg',
-		action: () => {
-			window.open(instance.privacyPolicyUrl!, '_blank', 'noopener');
-		},
-	} : undefined, (instance.donationUrl) ? {
-		text: i18n.ts.donation,
-		icon: 'ph-hand-coins ph-bold ph-lg',
-		action: () => {
-			window.open(instance.donationUrl, '_blank', 'noopener');
-		},
-	} : undefined, (!instance.impressumUrl && !instance.tosUrl && !instance.privacyPolicyUrl && !instance.donationUrl) ? undefined : { type: 'divider' }, {
-		text: i18n.ts.help,
-		icon: 'ph-question ph-bold ph-lg',
-		action: () => {
-			window.open('https://misskey-hub.net/docs/for-users/', '_blank', 'noopener');
-		},
-	}], ev.currentTarget ?? ev.target);
+	openInstanceMenu(ev);
 }
 
 function exploreOtherServers() {

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

@@ -9,8 +9,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 </a>
 </template>
 
+<script lang="ts">
+export type MkABehavior = 'window' | 'browser' | null;
+</script>
+
 <script lang="ts" setup>
-import { computed, shallowRef } from 'vue';
+import { computed, inject, shallowRef } from 'vue';
 import * as os from '@/os.js';
 import copyToClipboard from '@/scripts/copy-to-clipboard.js';
 import { url } from '@/config.js';
@@ -20,12 +24,14 @@ import { useRouter } from '@/router/supplier.js';
 const props = withDefaults(defineProps<{
 	to: string;
 	activeClass?: null | string;
-	behavior?: null | 'window' | 'browser';
+	behavior?: MkABehavior;
 }>(), {
 	activeClass: null,
 	behavior: null,
 });
 
+const behavior = props.behavior ?? inject<MkABehavior>('linkNavigationBehavior', null);
+
 const el = shallowRef<HTMLElement>();
 
 defineExpose({ $el: el });
@@ -80,15 +86,13 @@ function openWindow() {
 }
 
 function nav(ev: MouseEvent) {
-	if (props.behavior === 'browser') {
+	if (behavior === 'browser') {
 		location.href = props.to;
 		return;
 	}
 
-	if (props.behavior) {
-		if (props.behavior === 'window') {
-			return openWindow();
-		}
+	if (behavior === 'window') {
+		return openWindow();
 	}
 
 	if (ev.shiftKey) {

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

@@ -4,8 +4,10 @@
  */
 
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
+import { expect, userEvent, waitFor, within } from '@storybook/test';
 import { StoryObj } from '@storybook/vue3';
 import MkAd from './MkAd.vue';
+import { i18n } from '@/i18n.js';
 
 let lock: Promise<undefined> | undefined;
 
@@ -30,7 +32,6 @@ const common = {
 			template: '<MkAd v-bind="props" />',
 		};
 	},
-	/* FIXME: disabled because it still didn’t pass after applying #11267
 	async play({ canvasElement, args }) {
 		if (lock) {
 			console.warn('This test is unexpectedly running twice in parallel, fix it!');
@@ -44,7 +45,7 @@ const common = {
 		try {
 			const canvas = within(canvasElement);
 			const a = canvas.getByRole<HTMLAnchorElement>('link');
-			await expect(a.href).toMatch(/^https?:\/\/.*#test$/);
+			// await expect(a.href).toMatch(/^https?:\/\/.*#test$/);
 			const img = within(a).getByRole('img');
 			await expect(img).toBeInTheDocument();
 			let buttons = canvas.getAllByRole<HTMLButtonElement>('button');
@@ -52,13 +53,14 @@ const common = {
 			const i = buttons[0];
 			await expect(i).toBeInTheDocument();
 			await userEvent.click(i);
-			await waitFor(() => expect(canvasElement).toHaveTextContent(i18n.ts._ad.back));
+			// await expect(canvasElement).toHaveTextContent(i18n.ts._ad.back);
 			await expect(a).not.toBeInTheDocument();
 			await expect(i).not.toBeInTheDocument();
 			buttons = canvas.getAllByRole<HTMLButtonElement>('button');
-			await expect(buttons).toHaveLength(args.__hasReduce ? 2 : 1);
-			const reduce = args.__hasReduce ? buttons[0] : null;
-			const back = buttons[args.__hasReduce ? 1 : 0];
+			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);
@@ -80,15 +82,16 @@ const common = {
 			lock = undefined;
 		}
 	},
-	 */
 	args: {
 		prefer: [],
 		specify: {
 			id: 'someadid',
-			radio: 1,
+			ratio: 1,
 			url: '#test',
+			place: '',
+			imageUrl: '',
+			dayOfWeek: 7,
 		},
-		__hasReduce: true,
 	},
 	parameters: {
 		layout: 'centered',
@@ -138,6 +141,5 @@ export const ZeroRatio = {
 			...Square.args.specify,
 			ratio: 0,
 		},
-		__hasReduce: false,
 	},
 } satisfies StoryObj<typeof MkAd>;

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

@@ -33,7 +33,7 @@ const common = {
 	},
 	decorators: [
 		(Story, context) => ({
-			// eslint-disable-next-line quotes
+			// @ts-expect-error size is for test
 			template: `<div :style="{ display: 'grid', width: '${context.args.size}px', height: '${context.args.size}px' }"><story/></div>`,
 		}),
 	],
@@ -45,6 +45,7 @@ export const ProfilePage = {
 	...common,
 	args: {
 		...common.args,
+		// @ts-expect-error size is for test
 		size: 120,
 		indicator: true,
 	},

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

@@ -28,6 +28,7 @@ export const Default = {
 		};
 	},
 	args: {
+		// @ts-expect-error text is for test
 		text: 'This is a condensed line.',
 	},
 	parameters: {
@@ -41,4 +42,5 @@ export const ContainerIs100px = {
 			template: '<div style="width: 100px;"><story/></div>',
 		}),
 	],
+	// @ts-expect-error text is for test
 } satisfies StoryObj<typeof MkCondensedLine>;

packages/frontend/src/components/global/MkError.stories.meta.ts

@@ -3,8 +3,11 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
+import { Meta } from '@storybook/vue3';
+import MkError from './MkError.vue';
+
 export const argTypes = {
-	retry: {
+	onRetry: {
 		action: 'retry',
 	},
-};
+} satisfies Meta<typeof MkError>['argTypes'];

packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.ts

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { VNode, h, defineAsyncComponent, SetupContext } from 'vue';
+import { VNode, h, defineAsyncComponent, SetupContext, provide } from 'vue';
 import * as mfm from '@transfem-org/sfm-js';
 import * as Misskey from 'misskey-js';
 import MkUrl from '@/components/global/MkUrl.vue';
@@ -16,7 +16,7 @@ import MkCode from '@/components/MkCode.vue';
 import MkCodeInline from '@/components/MkCodeInline.vue';
 import MkGoogle from '@/components/MkGoogle.vue';
 import MkSparkle from '@/components/MkSparkle.vue';
-import MkA from '@/components/global/MkA.vue';
+import MkA, { MkABehavior } from '@/components/global/MkA.vue';
 import { host } from '@/config.js';
 import { defaultStore } from '@/store.js';
 import { nyaize as doNyaize } from '@/scripts/nyaize.js';
@@ -44,6 +44,7 @@ type MfmProps = {
 	enableEmojiMenu?: boolean;
 	enableEmojiMenuReaction?: boolean;
 	isAnim?: boolean;
+	linkNavigationBehavior?: MkABehavior;
 };
 
 type MfmEvents = {
@@ -52,6 +53,8 @@ type MfmEvents = {
 
 // eslint-disable-next-line import/no-default-export
 export default function (props: MfmProps, { emit }: { emit: SetupContext<MfmEvents>['emit'] }) {
+	provide('linkNavigationBehavior', props.linkNavigationBehavior);
+
 	const isNote = props.isNote ?? true;
 	const shouldNyaize = props.nyaize ? props.nyaize === 'respect' ? props.author?.isCat ? props.author.speakAsCat : false : false : false;
 

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

@@ -33,7 +33,6 @@ export const Empty = {
 		await waitFor(async () => await wait);
 	},
 	args: {
-		static: true,
 		tabs: [],
 	},
 	parameters: {
@@ -71,8 +70,8 @@ export const IconOnly = {
 		...Icon.args,
 		tabs: [
 			{
-				...Icon.args.tabs[0],
-				title: undefined,
+				key: Icon.args.tabs[0].key,
+				icon: Icon.args.tabs[0].icon,
 				iconOnly: true,
 			},
 		],

packages/frontend/src/components/global/MkPageHeader.tabs.vue

@@ -38,7 +38,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts">
 export type Tab = {
 	key: string;
-	title: string;
 	onClick?: (ev: MouseEvent) => void;
 } & (
 	| {

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

@@ -60,7 +60,7 @@ export const RelativeFuture = {
 export const AbsoluteFuture = {
 	...Empty,
 	async play({ canvasElement, args }) {
-		await expect(canvasElement).toHaveTextContent(dateTimeFormat.format(args.time));
+		await expect(canvasElement).toHaveTextContent(dateTimeFormat.format(typeof args.time === 'string' ? new Date(args.time) : args.time ?? undefined));
 	},
 	args: {
 		...Empty.args,
@@ -97,7 +97,7 @@ export const RelativeNow = {
 export const AbsoluteNow = {
 	...Empty,
 	async play({ canvasElement, args }) {
-		await expect(canvasElement).toHaveTextContent(dateTimeFormat.format(args.time));
+		await expect(canvasElement).toHaveTextContent(dateTimeFormat.format(typeof args.time === 'string' ? new Date(args.time) : args.time ?? undefined));
 	},
 	args: {
 		...Empty.args,
@@ -136,7 +136,7 @@ export const RelativeOneHourAgo = {
 export const AbsoluteOneHourAgo = {
 	...Empty,
 	async play({ canvasElement, args }) {
-		await expect(canvasElement).toHaveTextContent(dateTimeFormat.format(args.time));
+		await expect(canvasElement).toHaveTextContent(dateTimeFormat.format(typeof args.time === 'string' ? new Date(args.time) : args.time ?? undefined));
 	},
 	args: {
 		...Empty.args,
@@ -175,7 +175,7 @@ export const RelativeOneDayAgo = {
 export const AbsoluteOneDayAgo = {
 	...Empty,
 	async play({ canvasElement, args }) {
-		await expect(canvasElement).toHaveTextContent(dateTimeFormat.format(args.time));
+		await expect(canvasElement).toHaveTextContent(dateTimeFormat.format(typeof args.time === 'string' ? new Date(args.time) : args.time ?? undefined));
 	},
 	args: {
 		...Empty.args,
@@ -214,7 +214,7 @@ export const RelativeOneWeekAgo = {
 export const AbsoluteOneWeekAgo = {
 	...Empty,
 	async play({ canvasElement, args }) {
-		await expect(canvasElement).toHaveTextContent(dateTimeFormat.format(args.time));
+		await expect(canvasElement).toHaveTextContent(dateTimeFormat.format(typeof args.time === 'string' ? new Date(args.time) : args.time ?? undefined));
 	},
 	args: {
 		...Empty.args,
@@ -253,7 +253,7 @@ export const RelativeOneMonthAgo = {
 export const AbsoluteOneMonthAgo = {
 	...Empty,
 	async play({ canvasElement, args }) {
-		await expect(canvasElement).toHaveTextContent(dateTimeFormat.format(args.time));
+		await expect(canvasElement).toHaveTextContent(dateTimeFormat.format(typeof args.time === 'string' ? new Date(args.time) : args.time ?? undefined));
 	},
 	args: {
 		...Empty.args,
@@ -292,7 +292,7 @@ export const RelativeOneYearAgo = {
 export const AbsoluteOneYearAgo = {
 	...Empty,
 	async play({ canvasElement, args }) {
-		await expect(canvasElement).toHaveTextContent(dateTimeFormat.format(args.time));
+		await expect(canvasElement).toHaveTextContent(dateTimeFormat.format(typeof args.time === 'string' ? new Date(args.time) : args.time ?? undefined));
 	},
 	args: {
 		...Empty.args,

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

@@ -6,6 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <component
 	:is="self ? 'MkA' : 'a'" ref="el" :class="$style.root" class="_link" :[attr]="self ? props.url.substring(local.length) : props.url" :rel="rel ?? 'nofollow noopener'" :target="target"
+	:behavior="props.navigationBehavior"
 	@contextmenu.stop="() => {}"
 	@click.stop
 >
@@ -32,11 +33,13 @@ import * as os from '@/os.js';
 import { useTooltip } from '@/scripts/use-tooltip.js';
 import { safeURIDecode } from '@/scripts/safe-uri-decode.js';
 import { isEnabledUrlPreview } from '@/instance.js';
+import { MkABehavior } from '@/components/global/MkA.vue';
 
 const props = withDefaults(defineProps<{
 	url: string;
 	rel?: string;
 	showUrlPreview?: boolean;
+	navigationBehavior?: MkABehavior;
 }>(), {
 	showUrlPreview: true,
 });

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

@@ -30,7 +30,7 @@ export const Default = {
 		};
 	},
 	async play({ canvasElement }) {
-		await expect(canvasElement).toHaveTextContent(userDetailed().name);
+		await expect(canvasElement).toHaveTextContent(userDetailed().name as string);
 	},
 	args: {
 		user: userDetailed(),