Merge branch 'develop' of https://github.com/misskey-dev/misskey into develop

packages/frontend/.storybook/changes.ts

@@ -1,7 +1,10 @@
 import fs from 'node:fs/promises';
+import { fileURLToPath } from 'node:url';
 import path from 'node:path';
 import micromatch from 'micromatch';
-import main from './main';
+import main from './main.js';
+
+const __dirname = fileURLToPath(new URL('.', import.meta.url));
 
 interface Stats {
 	readonly modules: readonly {
@@ -13,8 +16,8 @@ interface Stats {
 	}[];
 }
 
-fs.readFile(
-	path.resolve(__dirname, '../storybook-static/preview-stats.json')
+await fs.readFile(
+	new URL('../storybook-static/preview-stats.json', import.meta.url)
 ).then((buffer) => {
 	const stats: Stats = JSON.parse(buffer.toString());
 	const keys = new Set(stats.modules.map((stat) => stat.id));

packages/frontend/.storybook/main.ts

@@ -1,7 +1,11 @@
 import { resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
 import type { StorybookConfig } from '@storybook/vue3-vite';
 import { type Plugin, mergeConfig } from 'vite';
 import turbosnap from 'vite-plugin-turbosnap';
+
+const dirname = fileURLToPath(new URL('.', import.meta.url));
+
 const config = {
 	stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
 	addons: [
@@ -9,7 +13,7 @@ const config = {
 		'@storybook/addon-interactions',
 		'@storybook/addon-links',
 		'@storybook/addon-storysource',
-		resolve(__dirname, '../node_modules/storybook-addon-misskey-theme'),
+		resolve(dirname, '../node_modules/storybook-addon-misskey-theme'),
 	],
 	framework: {
 		name: '@storybook/vue3-vite',
@@ -28,7 +32,8 @@ const config = {
 		}
 		return mergeConfig(config, {
 			plugins: [
-				turbosnap({
+				// XXX: https://github.com/IanVS/vite-plugin-turbosnap/issues/8
+				(turbosnap as any as typeof turbosnap['default'])({
 					rootDir: config.root ?? process.cwd(),
 				}),
 			],

packages/frontend/.storybook/package.json

@@ -0,0 +1,3 @@
+{
+	"type": "module"
+}

packages/frontend/.storybook/preload-locale.ts

@@ -1,9 +1,8 @@
 import { writeFile } from 'node:fs/promises';
-import { resolve } from 'node:path';
-import * as locales from '../../../locales';
+import locales from '../../../locales/index.js';
 
-writeFile(
-	resolve(__dirname, 'locale.ts'),
+await writeFile(
+	new URL('locale.ts', import.meta.url),
 	`export default ${JSON.stringify(locales['ja-JP'], undefined, 2)} as const;`,
 	'utf8',
 )

packages/frontend/.storybook/preload-theme.ts

@@ -1,6 +1,5 @@
 import { readFile, writeFile } from 'node:fs/promises';
-import { resolve } from 'node:path';
-import * as JSON5 from 'json5';
+import JSON5 from 'json5';
 
 const keys = [
 	'_dark',
@@ -26,9 +25,9 @@ const keys = [
 	'd-u0',
 ]
 
-Promise.all(keys.map((key) => readFile(resolve(__dirname, `../src/themes/${key}.json5`), 'utf8'))).then((sources) => {
+await Promise.all(keys.map((key) => readFile(new URL(`../src/themes/${key}.json5`, import.meta.url), 'utf8'))).then((sources) => {
 	writeFile(
-		resolve(__dirname, './themes.ts'),
+		new URL('./themes.ts', import.meta.url),
 		`export default ${JSON.stringify(
 			Object.fromEntries(sources.map((source, i) => [keys[i], JSON5.parse(source)])),
 			undefined,

packages/frontend/.storybook/preview.ts

@@ -3,10 +3,10 @@ import { FORCE_REMOUNT } from '@storybook/core-events';
 import { type Preview, setup } from '@storybook/vue3';
 import isChromatic from 'chromatic/isChromatic';
 import { initialize, mswDecorator } from 'msw-storybook-addon';
-import { userDetailed } from './fakes';
-import locale from './locale';
-import { commonHandlers, onUnhandledRequest } from './mocks';
-import themes from './themes';
+import { userDetailed } from './fakes.js';
+import locale from './locale.js';
+import { commonHandlers, onUnhandledRequest } from './mocks.js';
+import themes from './themes.js';
 import '../src/style.scss';
 
 const appInitialized = Symbol();

packages/frontend/.storybook/tsconfig.json

@@ -1,5 +1,7 @@
 {
 	"compilerOptions": {
+		"target": "es2022",
+		"module": "Node16",
 		"strict": true,
 		"allowUnusedLabels": false,
 		"allowUnreachableCode": false,

packages/frontend/src/cache.ts

@@ -4,3 +4,4 @@ import { Cache } from '@/scripts/cache';
 export const clipsCache = new Cache<misskey.entities.Clip[]>(Infinity);
 export const rolesCache = new Cache(Infinity);
 export const userListsCache = new Cache<misskey.entities.UserList[]>(Infinity);
+export const antennasCache = new Cache<misskey.entities.Antenna[]>(Infinity);

packages/frontend/src/components/MkAvatars.vue

@@ -1,24 +1,29 @@
 <template>
 <div>
-	<div v-for="user in users" :key="user.id" style="display:inline-block;width:32px;height:32px;margin-right:8px;">
+	<div v-for="user in users.slice(0, limit)" :key="user.id" style="display:inline-block;width:32px;height:32px;margin-right:8px;">
 		<MkAvatar :user="user" style="width:32px; height:32px;" indicator link preview/>
 	</div>
+	<div v-if="users.length > limit" style="display: inline-block;">...</div>
 </div>
 </template>
 
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
 import * as os from '@/os';
+import { UserLite } from 'misskey-js/built/entities';
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
 	userIds: string[];
-}>();
+	limit?: number;
+}>(), {
+	limit: Infinity,
+});
 
-const users = ref([]);
+const users = ref<UserLite[]>([]);
 
 onMounted(async () => {
 	users.value = await os.api('users/show', {
 		userIds: props.userIds,
-	});
+	}) as unknown as UserLite[];
 });
 </script>

packages/frontend/src/components/MkMediaList.vue

@@ -113,7 +113,7 @@ onMounted(() => {
 			right: 0,
 		},
 		imageClickAction: 'close',
-		tapAction: 'toggle-controls',
+		tapAction: 'close',
 		bgOpacity: 1,
 		showAnimationDuration: 100,
 		hideAnimationDuration: 100,

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

@@ -29,11 +29,11 @@ export const Default = {
 		const canvas = within(canvasElement);
 		const a = canvas.getByRole<HTMLAnchorElement>('link');
 		await expect(a.href).toMatch(/^https?:\/\/.*#test$/);
-		await userEvent.click(a, { button: 2 });
+		await userEvent.pointer({ keys: '[MouseRight]', target: a });
 		await tick();
 		const menu = canvas.getByRole('menu');
 		await expect(menu).toBeInTheDocument();
-		await userEvent.click(a, { button: 0 });
+		await userEvent.click(a);
 		a.blur();
 		await tick();
 		await expect(menu).not.toBeInTheDocument();

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

@@ -1,9 +1,9 @@
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
 import { expect } from '@storybook/jest';
-import { userEvent, within } from '@storybook/testing-library';
+import { userEvent, waitFor, within } from '@storybook/testing-library';
 import { StoryObj } from '@storybook/vue3';
-import { i18n } from '@/i18n';
 import MkAd from './MkAd.vue';
+import { i18n } from '@/i18n';
 const common = {
 	render(args) {
 		return {
@@ -36,6 +36,7 @@ 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(a).not.toBeInTheDocument();
 		await expect(i).not.toBeInTheDocument();
 		buttons = canvas.getAllByRole<HTMLButtonElement>('button');
@@ -49,6 +50,7 @@ const common = {
 		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();
 		}

packages/frontend/src/pages/channel.vue

@@ -87,7 +87,7 @@ const props = defineProps<{
 	channelId: string;
 }>();
 
-let tab = $ref('timeline');
+let tab = $ref('overview');
 let channel = $ref(null);
 let favorited = $ref(false);
 let searchQuery = $ref('');
@@ -107,6 +107,9 @@ watch(() => props.channelId, async () => {
 		channelId: props.channelId,
 	});
 	favorited = channel.isFavorited;
+	if (favorited || channel.isFollowing) {
+		tab = 'timeline';
+	}
 }, { immediate: true });
 
 function edit() {

packages/frontend/src/pages/custom-emojis-manager.vue

@@ -18,7 +18,7 @@
 						<MkButton inline @click="setTagBulk">Set tag</MkButton>
 						<MkButton inline @click="addTagBulk">Add tag</MkButton>
 						<MkButton inline @click="removeTagBulk">Remove tag</MkButton>
-						<MkButton inline @click="setLisenceBulk">Set Lisence</MkButton>
+						<MkButton inline @click="setLicenseBulk">Set License</MkButton>
 						<MkButton inline danger @click="delBulk">Delete</MkButton>
 					</div>
 					<MkPagination ref="emojisPaginationComponent" :pagination="pagination">
@@ -221,7 +221,7 @@ const setCategoryBulk = async () => {
 	emojisPaginationComponent.value.reload();
 };
 
-const setLisenceBulk = async () => {
+const setLicenseBulk = async () => {
 	const { canceled, result } = await os.inputText({
 		title: 'License',
 	});

packages/frontend/src/pages/my-antennas/create.vue

@@ -9,6 +9,7 @@ import XAntenna from './editor.vue';
 import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';
 import { useRouter } from '@/router';
+import { antennasCache } from '@/cache';
 
 const router = useRouter();
 
@@ -26,13 +27,10 @@ let draft = $ref({
 });
 
 function onAntennaCreated() {
+	antennasCache.delete();
 	router.push('/my/antennas');
 }
 
-const headerActions = $computed(() => []);
-
-const headerTabs = $computed(() => []);
-
 definePageMetadata({
 	title: i18n.ts.manageAntennas,
 	icon: 'ti ti-antenna',

packages/frontend/src/pages/my-antennas/edit.vue

@@ -10,6 +10,7 @@ import * as os from '@/os';
 import { i18n } from '@/i18n';
 import { useRouter } from '@/router';
 import { definePageMetadata } from '@/scripts/page-metadata';
+import { antennasCache } from '@/cache';
 
 const router = useRouter();
 
@@ -20,6 +21,7 @@ const props = defineProps<{
 }>();
 
 function onAntennaUpdated() {
+	antennasCache.delete();
 	router.push('/my/antennas');
 }
 
@@ -27,10 +29,6 @@ os.api('antennas/show', { antennaId: props.antennaId }).then((antennaResponse) =
 	antenna = antennaResponse;
 });
 
-const headerActions = $computed(() => []);
-
-const headerTabs = $computed(() => []);
-
 definePageMetadata({
 	title: i18n.ts.manageAntennas,
 	icon: 'ti ti-antenna',

packages/frontend/src/pages/my-antennas/index.vue

@@ -2,15 +2,20 @@
 <MkStickyContainer>
 	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :contentMax="700">
-		<div class="ieepwinx">
-			<MkButton :link="true" to="/my/antennas/create" primary class="add"><i class="ti ti-plus"></i> {{ i18n.ts.add }}</MkButton>
+		<div>
+			<div v-if="antennas.length === 0" class="empty">
+				<div class="_fullinfo">
+					<img :src="infoImageUrl" class="_ghost"/>
+					<div>{{ i18n.ts.nothing }}</div>
+				</div>
+			</div>
 
-			<div class="">
-				<MkPagination v-slot="{items}" ref="list" :pagination="pagination">
-					<MkA v-for="antenna in items" :key="antenna.id" class="ljoevbzj" :to="`/my/antennas/${antenna.id}`">
-						<div class="name">{{ antenna.name }}</div>
-					</MkA>
-				</MkPagination>
+			<MkButton :link="true" to="/my/antennas/create" primary :class="$style.add"><i class="ti ti-plus"></i> {{ i18n.ts.add }}</MkButton>
+
+			<div v-if="antennas.length > 0" class="_gaps">
+				<MkA v-for="antenna in antennas" :key="antenna.id" :class="$style.antenna" :to="`/my/antennas/${antenna.id}`">
+					<div class="name">{{ antenna.name }}</div>
+				</MkA>
 			</div>
 		</div>
 	</MkSpacer>
@@ -18,19 +23,31 @@
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import MkPagination from '@/components/MkPagination.vue';
 import MkButton from '@/components/MkButton.vue';
 import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';
+import { antennasCache } from '@/cache';
+import { api } from '@/os';
+import { onActivated } from 'vue';
+import { infoImageUrl } from '@/instance';
 
-const pagination = {
-	endpoint: 'antennas/list' as const,
-	noPaging: true,
-	limit: 10,
-};
+const antennas = $computed(() => antennasCache.value.value ?? []);
 
-const headerActions = $computed(() => []);
+function fetch() {
+	antennasCache.fetch(() => api('antennas/list'));
+}
+
+fetch();
+
+const headerActions = $computed(() => [{
+	asFullButton: true,
+	icon: 'ti ti-refresh',
+	text: i18n.ts.reload,
+	handler: () => {
+		antennasCache.delete();
+		fetch();
+	},
+}]);
 
 const headerTabs = $computed(() => []);
 
@@ -38,30 +55,30 @@ definePageMetadata({
 	title: i18n.ts.manageAntennas,
 	icon: 'ti ti-antenna',
 });
+
+onActivated(() => {
+	antennasCache.fetch(() => api('antennas/list'));
+});
 </script>
 
-<style lang="scss" scoped>
-.ieepwinx {
+<style lang="scss" module>
+.add {
+	margin: 0 auto 16px auto;
+}
 
-	> .add {
-		margin: 0 auto 16px auto;
-	}
+.antenna {
+	display: block;
+	padding: 16px;
+	border: solid 1px var(--divider);
+	border-radius: 6px;
 
-	.ljoevbzj {
-		display: block;
-		padding: 16px;
-		margin-bottom: 8px;
-		border: solid 1px var(--divider);
-		border-radius: 6px;
-
-		&:hover {
-			border: solid 1px var(--accent);
-			text-decoration: none;
-		}
-
-		> .name {
-			font-weight: bold;
-		}
+	&:hover {
+		border: solid 1px var(--accent);
+		text-decoration: none;
 	}
 }
+
+.name {
+	font-weight: bold;
+}
 </style>

packages/frontend/src/pages/my-lists/index.vue

@@ -3,38 +3,43 @@
 	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :contentMax="700">
 		<div class="_gaps">
+			<div v-if="items.length === 0" class="empty">
+				<div class="_fullinfo">
+					<img :src="infoImageUrl" class="_ghost"/>
+					<div>{{ i18n.ts.nothing }}</div>
+				</div>
+			</div>
+
 			<MkButton primary rounded style="margin: 0 auto;" @click="create"><i class="ti ti-plus"></i> {{ i18n.ts.createList }}</MkButton>
 
-			<MkPagination v-slot="{items}" ref="pagingComponent" :pagination="pagination">
-				<div class="_gaps">
-					<MkA v-for="list in items" :key="list.id" class="_panel" :class="$style.list" :to="`/my/lists/${ list.id }`">
-						<div style="margin-bottom: 4px;">{{ list.name }}</div>
-						<MkAvatars :userIds="list.userIds"/>
-					</MkA>
-				</div>
-			</MkPagination>
+			<div v-if="items.length > 0" class="_gaps">
+				<MkA v-for="list in items" :key="list.id" class="_panel" :class="$style.list" :to="`/my/lists/${ list.id }`">
+					<div style="margin-bottom: 4px;">{{ list.name }}</div>
+					<MkAvatars :userIds="list.userIds" :limit="10"/>
+				</MkA>
+			</div>
 		</div>
 	</MkSpacer>
 </MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import MkPagination from '@/components/MkPagination.vue';
+import { onActivated } from 'vue';
 import MkButton from '@/components/MkButton.vue';
 import MkAvatars from '@/components/MkAvatars.vue';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';
 import { userListsCache } from '@/cache';
+import { infoImageUrl } from '@/instance';
 
-const pagingComponent = $shallowRef<InstanceType<typeof MkPagination>>();
+const items = $computed(() => userListsCache.value.value ?? []);
 
-const pagination = {
-	endpoint: 'users/lists/list' as const,
-	noPaging: true,
-	limit: 10,
-};
+function fetch() {
+	userListsCache.fetch(() => os.api('users/lists/list'));
+}
+
+fetch();
 
 async function create() {
 	const { canceled, result: name } = await os.inputText({
@@ -43,10 +48,18 @@ async function create() {
 	if (canceled) return;
 	await os.apiWithDialog('users/lists/create', { name: name });
 	userListsCache.delete();
-	pagingComponent.reload();
+	fetch();
 }
 
-const headerActions = $computed(() => []);
+const headerActions = $computed(() => [{
+	asFullButton: true,
+	icon: 'ti ti-refresh',
+	text: i18n.ts.reload,
+	handler: () => {
+		userListsCache.delete();
+		fetch();
+	},
+}]);
 
 const headerTabs = $computed(() => []);
 
@@ -58,6 +71,10 @@ definePageMetadata({
 		handler: create,
 	},
 });
+
+onActivated(() => {
+	fetch();
+});
 </script>
 
 <style lang="scss" module>

packages/frontend/src/pages/settings/index.vue

@@ -166,7 +166,7 @@ const menuDef = computed(() => [{
 		active: currentPage?.route.name === 'import-export',
 	}, {
 		icon: 'ti ti-plane',
-		text: `${i18n.ts.accountMigration} (${i18n.ts.experimental})`,
+		text: `${i18n.ts.accountMigration}`,
 		to: '/settings/migration',
 		active: currentPage?.route.name === 'migration',
 	}, {

packages/frontend/src/pages/settings/migration.vue

@@ -1,8 +1,5 @@
 <template>
 <div class="_gaps_m">
-	<FormInfo warn>
-		{{ i18n.ts.thisIsExperimentalFeature }}
-	</FormInfo>
 	<MkFolder :defaultOpen="true">
 		<template #icon><i class="ti ti-plane-arrival"></i></template>
 		<template #label>{{ i18n.ts._accountMigration.moveFrom }}</template>

packages/frontend/src/scripts/cache.ts

@@ -1,7 +1,8 @@
+import { ref } from "vue";
 
 export class Cache<T> {
 	private cachedAt: number | null = null;
-	private value: T | undefined;
+	public value = ref<T | undefined>();
 	private lifetime: number;
 
 	constructor(lifetime: Cache<never>['lifetime']) {
@@ -10,21 +11,20 @@ export class Cache<T> {
 
 	public set(value: T): void {
 		this.cachedAt = Date.now();
-		this.value = value;
+		this.value.value = value;
 	}
 
-	public get(): T | undefined {
+	private get(): T | undefined {
 		if (this.cachedAt == null) return undefined;
 		if ((Date.now() - this.cachedAt) > this.lifetime) {
-			this.value = undefined;
+			this.value.value = undefined;
 			this.cachedAt = null;
 			return undefined;
 		}
-		return this.value;
+		return this.value.value;
 	}
 
 	public delete() {
-		this.value = undefined;
 		this.cachedAt = null;
 	}
 

packages/frontend/src/scripts/get-user-menu.ts

@@ -1,14 +1,15 @@
+import { toUnicode } from 'punycode';
 import { defineAsyncComponent } from 'vue';
 import * as misskey from 'misskey-js';
 import { i18n } from '@/i18n';
 import copyToClipboard from '@/scripts/copy-to-clipboard';
-import { host } from '@/config';
+import { host, url } from '@/config';
 import * as os from '@/os';
 import { defaultStore, userActions } from '@/store';
 import { $i, iAmModerator } from '@/account';
 import { mainRouter } from '@/router';
 import { Router } from '@/nirax';
-import { rolesCache, userListsCache } from '@/cache';
+import { antennasCache, rolesCache, userListsCache } from '@/cache';
 
 export function getUserMenu(user: misskey.entities.UserDetailed, router: Router = mainRouter) {
 	const meId = $i ? $i.id : null;
@@ -137,6 +138,13 @@ export function getUserMenu(user: misskey.entities.UserDetailed, router: Router
 		action: () => {
 			copyToClipboard(`${user.host ?? host}/@${user.username}.atom`);
 		},
+	}, {
+		icon: 'ti ti-share',
+		text: i18n.ts.copyProfileUrl,
+		action: () => {
+			const canonical = user.host === null ? `@${user.username}` : `@${user.username}@${toUnicode(user.host)}`;
+			copyToClipboard(`${url}/${canonical}`);
+		},
 	}, {
 		icon: 'ti ti-mail',
 		text: i18n.ts.sendMessage,
@@ -158,11 +166,39 @@ export function getUserMenu(user: misskey.entities.UserDetailed, router: Router
 
 			return lists.map(list => ({
 				text: list.name,
-				action: () => {
-					os.apiWithDialog('users/lists/push', {
+				action: async () => {
+					await os.apiWithDialog('users/lists/push', {
 						listId: list.id,
 						userId: user.id,
 					});
+					userListsCache.delete();
+				},
+			}));
+		},
+	}, {
+		type: 'parent',
+		icon: 'ti ti-antenna',
+		text: i18n.ts.addToAntenna,
+		children: async () => {
+			const antennas = await antennasCache.fetch(() => os.api('antennas/list'));
+			const canonical = user.host === null ? `@${user.username}` : `@${user.username}@${toUnicode(user.host)}`;
+			return antennas.filter((a) => a.src === 'users').map(antenna => ({
+				text: antenna.name,
+				action: async () => {
+					await os.apiWithDialog('antennas/update', {
+						antennaId: antenna.id,
+						name: antenna.name,
+						keywords: antenna.keywords,
+						excludeKeywords: antenna.excludeKeywords,
+						src: antenna.src,
+						userListId: antenna.userListId,
+						users: [...antenna.users, canonical],
+						caseSensitive: antenna.caseSensitive,
+						withReplies: antenna.withReplies,
+						withFile: antenna.withFile,
+						notify: antenna.notify,
+					});
+					antennasCache.delete();
 				},
 			}));
 		},

packages/frontend/src/style.scss

@@ -72,7 +72,7 @@ html {
 	}
 
 	&.useSystemFont {
-		font-family: 'Hiragino Maru Gothic Pro', sans-serif;
+		font-family: system-ui;
 	}
 }