Merge branch 'develop' into qr

CHANGELOG.md

@@ -54,6 +54,9 @@
 - Fix: 複数のメンションを1行に記述した場合に、サジェストが正しく表示されない問題を修正
 - Fix: メンションとしての条件を満たしていても、特定の条件(`-`が含まれる場合など)で正しくサジェストされない問題を一部修正
 - Fix: ユーザーの前後ノートを閲覧する機能が動作しない問題を修正
+- Fix: 照会ダイアログでap/showでローカルユーザーを解決した際@username@nullに飛ばされる問題を修正
+- Fix: アイコンのデコレーションを付ける際にデコレーションが表示されなくなる問題を修正
+- Fix: 管理中アカウント一覧で正しい表示が行われない問題を修正
 
 ### Server
 - Feat: サーバー管理コマンド

idea/MkAbuseReport.stories.impl.ts

@@ -4,8 +4,8 @@
  */
 
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
-import { StoryObj } from '@storybook/vue3';
+import type { StoryObj } from '@storybook/vue3';
 import { HttpResponse, http } from 'msw';
 import { abuseUserReport } from '../packages/frontend/.storybook/fakes.js';
 import { commonHandlers } from '../packages/frontend/.storybook/mocks.js';

locales/index.d.ts

@@ -12039,6 +12039,10 @@ export interface Locale extends ILocale {
          * 連合を行うと、継続して多くのコンテンツを受信します。自動クリーニングを有効にすると、参照されていない古くなったコンテンツを自動でサーバーから削除し、ストレージを節約できます。
          */
         "remoteContentsCleaning_description": string;
+        /**
+         * ハイパーリンクなど、一部の参照方法はシステム上で検知できません。
+         */
+        "remoteContentsCleaning_description2": string;
         /**
          * 管理者情報
          */

locales/ja-JP.yml

@@ -3218,6 +3218,7 @@ _serverSetupWizard:
   youCanConfigureMoreFederationSettingsLater: "連合可能なサーバーの指定など、高度な設定も後ほど可能です。"
   remoteContentsCleaning: "受信コンテンツの自動クリーニング"
   remoteContentsCleaning_description: "連合を行うと、継続して多くのコンテンツを受信します。自動クリーニングを有効にすると、参照されていない古くなったコンテンツを自動でサーバーから削除し、ストレージを節約できます。"
+  remoteContentsCleaning_description2: "ハイパーリンクなど、一部の参照方法はシステム上で検知できません。"
   adminInfo: "管理者情報"
   adminInfo_description: "問い合わせを受け付けるために使用される管理者情報を設定します。"
   adminInfo_mustBeFilled: "オープンサーバー、または連合がオンの場合は必ず入力が必要です。"

packages/backend/src/core/entities/NoteReactionEntityService.ts

@@ -49,15 +49,12 @@ export class NoteReactionEntityService implements OnModuleInit {
 	public async pack(
 		src: MiNoteReaction['id'] | MiNoteReaction,
 		me?: { id: MiUser['id'] } | null | undefined,
-		options?: {
+		options?: object,
-			withNote: boolean;
-		},
 		hints?: {
 			packedUser?: Packed<'UserLite'>
 		},
 	): Promise<Packed<'NoteReaction'>> {
 		const opts = Object.assign({
-			withNote: false,
 		}, options);
 
 		const reaction = typeof src === 'object' ? src : await this.noteReactionsRepository.findOneByOrFail({ id: src });
@@ -67,9 +64,6 @@ export class NoteReactionEntityService implements OnModuleInit {
 			createdAt: this.idService.parse(reaction.id).date.toISOString(),
 			user: hints?.packedUser ?? await this.userEntityService.pack(reaction.user ?? reaction.userId, me),
 			type: this.reactionService.convertLegacyReaction(reaction.reaction),
-			...(opts.withNote ? {
-				note: await this.noteEntityService.pack(reaction.note ?? reaction.noteId, me),
-			} : {}),
 		};
 	}
 
@@ -77,16 +71,50 @@ export class NoteReactionEntityService implements OnModuleInit {
 	public async packMany(
 		reactions: MiNoteReaction[],
 		me?: { id: MiUser['id'] } | null | undefined,
-		options?: {
+		options?: object,
-			withNote: boolean;
-		},
 	): Promise<Packed<'NoteReaction'>[]> {
 		const opts = Object.assign({
-			withNote: false,
 		}, options);
 		const _users = reactions.map(({ user, userId }) => user ?? userId);
 		const _userMap = await this.userEntityService.packMany(_users, me)
 			.then(users => new Map(users.map(u => [u.id, u])));
 		return Promise.all(reactions.map(reaction => this.pack(reaction, me, opts, { packedUser: _userMap.get(reaction.userId) })));
 	}
+
+	@bindThis
+	public async packWithNote(
+		src: MiNoteReaction['id'] | MiNoteReaction,
+		me?: { id: MiUser['id'] } | null | undefined,
+		options?: object,
+		hints?: {
+			packedUser?: Packed<'UserLite'>
+		},
+	): Promise<Packed<'NoteReactionWithNote'>> {
+		const opts = Object.assign({
+		}, options);
+
+		const reaction = typeof src === 'object' ? src : await this.noteReactionsRepository.findOneByOrFail({ id: src });
+
+		return {
+			id: reaction.id,
+			createdAt: this.idService.parse(reaction.id).date.toISOString(),
+			user: hints?.packedUser ?? await this.userEntityService.pack(reaction.user ?? reaction.userId, me),
+			type: this.reactionService.convertLegacyReaction(reaction.reaction),
+			note: await this.noteEntityService.pack(reaction.note ?? reaction.noteId, me),
+		};
+	}
+
+	@bindThis
+	public async packManyWithNote(
+		reactions: MiNoteReaction[],
+		me?: { id: MiUser['id'] } | null | undefined,
+		options?: object,
+	): Promise<Packed<'NoteReactionWithNote'>[]> {
+		const opts = Object.assign({
+		}, options);
+		const _users = reactions.map(({ user, userId }) => user ?? userId);
+		const _userMap = await this.userEntityService.packMany(_users, me)
+			.then(users => new Map(users.map(u => [u.id, u])));
+		return Promise.all(reactions.map(reaction => this.packWithNote(reaction, me, opts, { packedUser: _userMap.get(reaction.userId) })));
+	}
 }

packages/backend/src/misc/json-schema.ts

@@ -22,7 +22,7 @@ import { packedFollowingSchema } from '@/models/json-schema/following.js';
 import { packedMutingSchema } from '@/models/json-schema/muting.js';
 import { packedRenoteMutingSchema } from '@/models/json-schema/renote-muting.js';
 import { packedBlockingSchema } from '@/models/json-schema/blocking.js';
-import { packedNoteReactionSchema } from '@/models/json-schema/note-reaction.js';
+import { packedNoteReactionSchema, packedNoteReactionWithNoteSchema } from '@/models/json-schema/note-reaction.js';
 import { packedHashtagSchema } from '@/models/json-schema/hashtag.js';
 import { packedInviteCodeSchema } from '@/models/json-schema/invite-code.js';
 import { packedPageBlockSchema, packedPageSchema } from '@/models/json-schema/page.js';
@@ -92,6 +92,7 @@ export const refs = {
 	Note: packedNoteSchema,
 	NoteDraft: packedNoteDraftSchema,
 	NoteReaction: packedNoteReactionSchema,
+	NoteReactionWithNote: packedNoteReactionWithNoteSchema,
 	NoteFavorite: packedNoteFavoriteSchema,
 	Notification: packedNotificationSchema,
 	DriveFile: packedDriveFileSchema,

packages/backend/src/models/json-schema/note-reaction.ts

@@ -10,7 +10,6 @@ export const packedNoteReactionSchema = {
 			type: 'string',
 			optional: false, nullable: false,
 			format: 'id',
-			example: 'xxxxxxxxxx',
 		},
 		createdAt: {
 			type: 'string',
@@ -28,3 +27,33 @@ export const packedNoteReactionSchema = {
 		},
 	},
 } as const;
+
+export const packedNoteReactionWithNoteSchema = {
+	type: 'object',
+	properties: {
+		id: {
+			type: 'string',
+			optional: false, nullable: false,
+			format: 'id',
+		},
+		createdAt: {
+			type: 'string',
+			optional: false, nullable: false,
+			format: 'date-time',
+		},
+		user: {
+			type: 'object',
+			optional: false, nullable: false,
+			ref: 'UserLite',
+		},
+		type: {
+			type: 'string',
+			optional: false, nullable: false,
+		},
+		note: {
+			type: 'object',
+			optional: false, nullable: false,
+			ref: 'Note',
+		},
+	},
+} as const;

packages/backend/src/server/api/endpoints/admin/announcements/list.ts

@@ -49,6 +49,34 @@ export const meta = {
 					type: 'string',
 					optional: false, nullable: false,
 				},
+				icon: {
+					type: 'string',
+					optional: false, nullable: true,
+				},
+				display: {
+					type: 'string',
+					optional: false, nullable: false,
+				},
+				isActive: {
+					type: 'boolean',
+					optional: false, nullable: false,
+				},
+				forExistingUsers: {
+					type: 'boolean',
+					optional: false, nullable: false,
+				},
+				silence: {
+					type: 'boolean',
+					optional: false, nullable: false,
+				},
+				needConfirmationToRead: {
+					type: 'boolean',
+					optional: false, nullable: false,
+				},
+				userId: {
+					type: 'string',
+					optional: false, nullable: true,
+				},
 				imageUrl: {
 					type: 'string',
 					optional: false, nullable: true,

packages/backend/src/server/api/endpoints/flash/update.ts

@@ -73,8 +73,8 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
 				updatedAt: new Date(),
 				...Object.fromEntries(
 					Object.entries(ps).filter(
-						([key, val]) => (key !== 'flashId') && Object.hasOwn(paramDef.properties, key)
+						([key, val]) => (key !== 'flashId') && Object.hasOwn(paramDef.properties, key),
-					)
+					),
 				),
 			});
 		});

packages/backend/src/server/api/endpoints/users/lists/show.ts

@@ -23,6 +23,16 @@ export const meta = {
 		type: 'object',
 		optional: false, nullable: false,
 		ref: 'UserList',
+		properties: {
+			likedCount: {
+				type: 'number',
+				optional: true, nullable: false,
+			},
+			isLiked: {
+				type: 'boolean',
+				optional: true, nullable: false,
+			},
+		},
 	},
 
 	errors: {

packages/backend/src/server/api/endpoints/users/reactions.ts

@@ -28,7 +28,7 @@ export const meta = {
 		items: {
 			type: 'object',
 			optional: false, nullable: false,
-			ref: 'NoteReaction',
+			ref: 'NoteReactionWithNote',
 		},
 	},
 
@@ -120,7 +120,7 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
 				return true;
 			});
 
-			return await this.noteReactionEntityService.packMany(reactions, me, { withNote: true });
+			return await this.noteReactionEntityService.packManyWithNote(reactions, me);
 		});
 	}
 }

packages/frontend-embed/src/theme.ts

@@ -3,6 +3,8 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
+// TODO: (可能な部分を)sharedに抽出して frontend と共通化
+
 import tinycolor from 'tinycolor2';
 import lightTheme from '@@/themes/_light.json5';
 import darkTheme from '@@/themes/_dark.json5';

packages/frontend/.storybook/charts.ts

@@ -6,7 +6,7 @@
 import { HttpResponse, http } from 'msw';
 import type { DefaultBodyType, HttpResponseResolver, JsonBodyType, PathParams } from 'msw';
 import seedrandom from 'seedrandom';
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 
 function getChartArray(seed: string, limit: number, option?: { accumulate?: boolean, mul?: number }): number[] {
 	const rng = seedrandom(seed);

packages/frontend/.vscode/storybook.code-snippets

@@ -42,7 +42,7 @@
 		"prefix": "storyimplevent",
 		"body": [
 			"/* eslint-disable @typescript-eslint/explicit-function-return-type */",
-			"import { action } from '@storybook/addon-actions';",
+			"import { action } from 'storybook/actions';",
 			"import { StoryObj } from '@storybook/vue3';",
 			"import $1 from './$1.vue';",
 			"export const Default = {",

packages/frontend/package.json

@@ -85,7 +85,6 @@
 	},
 	"devDependencies": {
 		"@misskey-dev/summaly": "5.2.3",
-		"@storybook/addon-actions": "9.0.8",
 		"@storybook/addon-essentials": "8.6.14",
 		"@storybook/addon-interactions": "8.6.14",
 		"@storybook/addon-links": "9.1.3",

packages/frontend/src/accounts.ts

@@ -23,7 +23,7 @@ export async function getAccounts(): Promise<{
 	host: string;
 	id: Misskey.entities.User['id'];
 	username: Misskey.entities.User['username'];
-	user?: Misskey.entities.User | null;
+	user?: Misskey.entities.MeDetailed | null;
 	token: string | null;
 }[]> {
 	const tokens = store.s.accountTokens;
@@ -38,7 +38,7 @@ export async function getAccounts(): Promise<{
 	}));
 }
 
-async function addAccount(host: string, user: Misskey.entities.User, token: AccountWithToken['token']) {
+async function addAccount(host: string, user: Misskey.entities.MeDetailed, token: AccountWithToken['token']) {
 	if (!prefer.s.accounts.some(x => x[0] === host && x[1].id === user.id)) {
 		store.set('accountTokens', { ...store.s.accountTokens, [host + '/' + user.id]: token });
 		store.set('accountInfos', { ...store.s.accountInfos, [host + '/' + user.id]: user });
@@ -149,9 +149,10 @@ export function updateCurrentAccountPartial(accountData: Partial<Misskey.entitie
 
 export async function refreshCurrentAccount() {
 	if (!$i) return;
+	const me = $i;
 	return fetchAccount($i.token, $i.id).then(updateCurrentAccount).catch(reason => {
 		if (reason === isAccountDeleted) {
-			removeAccount(host, $i.id);
+			removeAccount(host, me.id);
 			if (Object.keys(store.s.accountTokens).length > 0) {
 				login(Object.values(store.s.accountTokens)[0]);
 			} else {
@@ -214,19 +215,37 @@ export async function openAccountMenu(opts: {
 	includeCurrentAccount?: boolean;
 	withExtraOperation: boolean;
 	active?: Misskey.entities.User['id'];
-	onChoose?: (account: Misskey.entities.User) => void;
+	onChoose?: (account: Misskey.entities.MeDetailed) => void;
 }, ev: MouseEvent) {
 	if (!$i) return;
+	const me = $i;
 
-	function createItem(host: string, id: Misskey.entities.User['id'], username: Misskey.entities.User['username'], account: Misskey.entities.User | null | undefined, token: string): MenuItem {
+	const callback = opts.onChoose;
+
+	function createItem(host: string, id: Misskey.entities.User['id'], username: Misskey.entities.User['username'], account: Misskey.entities.MeDetailed | null | undefined, token: string | null): MenuItem {
 		if (account) {
 			return {
 				type: 'user' as const,
 				user: account,
 				active: opts.active != null ? opts.active === id : false,
 				action: async () => {
-					if (opts.onChoose) {
+					if (callback) {
-						opts.onChoose(account);
+						callback(account);
+					} else {
+						switchAccount(host, id);
+					}
+				},
+			};
+		} else if (token != null) {
+			return {
+				type: 'button' as const,
+				text: username,
+				active: opts.active != null ? opts.active === id : false,
+				action: async () => {
+					if (callback) {
+						fetchAccount(token, id).then(account => {
+							callback(account);
+						});
 					} else {
 						switchAccount(host, id);
 					}
@@ -238,13 +257,7 @@ export async function openAccountMenu(opts: {
 				text: username,
 				active: opts.active != null ? opts.active === id : false,
 				action: async () => {
-					if (opts.onChoose) {
+					// TODO
-						fetchAccount(token, id).then(account => {
-							opts.onChoose(account);
-						});
-					} else {
-						switchAccount(host, id);
-					}
 				},
 			};
 		}
@@ -253,7 +266,7 @@ export async function openAccountMenu(opts: {
 	const menuItems: MenuItem[] = [];
 
 	// TODO: $iのホストも比較したいけど通常null
-	const accountItems = (await getAccounts().then(accounts => accounts.filter(x => x.id !== $i.id))).map(a => createItem(a.host, a.id, a.username, a.user, a.token));
+	const accountItems = (await getAccounts().then(accounts => accounts.filter(x => x.id !== me.id))).map(a => createItem(a.host, a.id, a.username, a.user, a.token));
 
 	if (opts.withExtraOperation) {
 		menuItems.push({

packages/frontend/src/boot/main-boot.ts

@@ -368,11 +368,6 @@ export async function mainBoot() {
 				});
 			});
 
-			main.on('unreadAntenna', () => {
-				updateCurrentAccountPartial({ hasUnreadAntenna: true });
-				sound.playMisskeySfx('antenna');
-			});
-
 			main.on('newChatMessage', () => {
 				updateCurrentAccountPartial({ hasUnreadChatMessages: true });
 				sound.playMisskeySfx('chatMessage');

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

@@ -2,14 +2,13 @@
  * SPDX-FileCopyrightText: syuilo and misskey-project
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-
+ 
-/* eslint-disable @typescript-eslint/explicit-function-return-type */
+import { action } from 'storybook/actions';
-import { action } from '@storybook/addon-actions';
-import type { StoryObj } from '@storybook/vue3';
 import { HttpResponse, http } from 'msw';
 import { userDetailed } from '../../.storybook/fakes.js';
 import { commonHandlers } from '../../.storybook/mocks.js';
 import MkAbuseReportWindow from './MkAbuseReportWindow.vue';
+import type { StoryObj } from '@storybook/vue3';
 export const Default = {
 	render(args) {
 		return {

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

@@ -4,7 +4,7 @@
  */
 
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import type { StoryObj } from '@storybook/vue3';
 import { HttpResponse, http } from 'msw';
 import { commonHandlers } from '../../.storybook/mocks.js';

packages/frontend/src/components/MkAchievements.vue

@@ -16,7 +16,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 						[$style.iconFrame_platinum]: ACHIEVEMENT_BADGES[achievement.name].frame === 'platinum',
 					}]"
 				>
-					<div :class="[$style.iconInner]" :style="{ background: ACHIEVEMENT_BADGES[achievement.name].bg }">
+					<div :class="[$style.iconInner]" :style="{ background: ACHIEVEMENT_BADGES[achievement.name].bg ?? '' }">
 						<img :class="$style.iconImg" :src="ACHIEVEMENT_BADGES[achievement.name].img">
 					</div>
 				</div>
@@ -71,7 +71,7 @@ const props = withDefaults(defineProps<{
 const achievements = ref<Misskey.entities.UsersAchievementsResponse | null>(null);
 const lockedAchievements = computed(() => ACHIEVEMENT_TYPES.filter(x => !(achievements.value ?? []).some(a => a.name === x)));
 
-function fetch() {
+function _fetch_() {
 	misskeyApi('users/achievements', { userId: props.user.id }).then(res => {
 		achievements.value = [];
 		for (const t of ACHIEVEMENT_TYPES) {
@@ -84,11 +84,11 @@ function fetch() {
 
 function clickHere() {
 	claimAchievement('clickedClickHere');
-	fetch();
+	_fetch_();
 }
 
 onMounted(() => {
-	fetch();
+	_fetch_();
 });
 </script>
 

packages/frontend/src/components/MkAnimBg.vue

@@ -265,6 +265,8 @@ onUnmounted(() => {
 	if (handle) {
 		window.cancelAnimationFrame(handle);
 	}
+
+	// TODO: WebGLリソースの解放
 });
 </script>
 

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

@@ -4,7 +4,7 @@
  */
 
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import type { StoryObj } from '@storybook/vue3';
 import { HttpResponse, http } from 'msw';
 import { commonHandlers } from '../../.storybook/mocks.js';

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

@@ -4,7 +4,7 @@
  */
 
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import type { StoryObj } from '@storybook/vue3';
 import { HttpResponse, http } from 'msw';
 import { commonHandlers } from '../../.storybook/mocks.js';

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

@@ -4,7 +4,7 @@
  */
 
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import type { StoryObj } from '@storybook/vue3';
 import { HttpResponse, http } from 'msw';
 import { commonHandlers } from '../../.storybook/mocks.js';

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

@@ -4,7 +4,7 @@
  */
 
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import { expect, userEvent, waitFor, within } from '@storybook/test';
 import type { StoryObj } from '@storybook/vue3';
 import { HttpResponse, http } from 'msw';

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

@@ -5,7 +5,7 @@
 
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
 /* eslint-disable import/no-default-export */
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import type { StoryObj } from '@storybook/vue3';
 import MkButton from './MkButton.vue';
 export const Default = {

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

@@ -2,9 +2,9 @@
  * SPDX-FileCopyrightText: syuilo and misskey-project
  * SPDX-License-Identifier: AGPL-3.0-only
  */
- 
+
 import { HttpResponse, http } from 'msw';
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import { expect, userEvent, within } from '@storybook/test';
 import { channel } from '../../.storybook/fakes.js';
 import { commonHandlers } from '../../.storybook/mocks.js';

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

@@ -7,7 +7,7 @@
 /* eslint-disable import/no-default-export */
 import type { StoryObj } from '@storybook/vue3';
 import { HttpResponse, http } from 'msw';
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import { channel } from '../../.storybook/fakes.js';
 import { commonHandlers } from '../../.storybook/mocks.js';
 import MkChannelList from './MkChannelList.vue';

packages/frontend/src/components/MkChart.vue

@@ -589,7 +589,10 @@ const fetchDriveFilesChart = async (): Promise<typeof chartData> => {
 };
 
 const fetchInstanceRequestsChart = async (): Promise<typeof chartData> => {
-	const raw = await misskeyApiGet('charts/instance', { host: props.args?.host, limit: props.limit, span: props.span });
+	const host = props.args?.host;
+	if (host == null) return { series: [] };
+
+	const raw = await misskeyApiGet('charts/instance', { host: host, limit: props.limit, span: props.span });
 	return {
 		series: [{
 			name: 'In',
@@ -611,7 +614,10 @@ const fetchInstanceRequestsChart = async (): Promise<typeof chartData> => {
 };
 
 const fetchInstanceUsersChart = async (total: boolean): Promise<typeof chartData> => {
-	const raw = await misskeyApiGet('charts/instance', { host: props.args?.host, limit: props.limit, span: props.span });
+	const host = props.args?.host;
+	if (host == null) return { series: [] };
+
+	const raw = await misskeyApiGet('charts/instance', { host: host, limit: props.limit, span: props.span });
 	return {
 		series: [{
 			name: 'Users',
@@ -626,7 +632,10 @@ const fetchInstanceUsersChart = async (total: boolean): Promise<typeof chartData
 };
 
 const fetchInstanceNotesChart = async (total: boolean): Promise<typeof chartData> => {
-	const raw = await misskeyApiGet('charts/instance', { host: props.args?.host, limit: props.limit, span: props.span });
+	const host = props.args?.host;
+	if (host == null) return { series: [] };
+
+	const raw = await misskeyApiGet('charts/instance', { host: host, limit: props.limit, span: props.span });
 	return {
 		series: [{
 			name: 'Notes',
@@ -641,7 +650,10 @@ const fetchInstanceNotesChart = async (total: boolean): Promise<typeof chartData
 };
 
 const fetchInstanceFfChart = async (total: boolean): Promise<typeof chartData> => {
-	const raw = await misskeyApiGet('charts/instance', { host: props.args?.host, limit: props.limit, span: props.span });
+	const host = props.args?.host;
+	if (host == null) return { series: [] };
+
+	const raw = await misskeyApiGet('charts/instance', { host: host, limit: props.limit, span: props.span });
 	return {
 		series: [{
 			name: 'Following',
@@ -664,7 +676,10 @@ const fetchInstanceFfChart = async (total: boolean): Promise<typeof chartData> =
 };
 
 const fetchInstanceDriveUsageChart = async (total: boolean): Promise<typeof chartData> => {
-	const raw = await misskeyApiGet('charts/instance', { host: props.args?.host, limit: props.limit, span: props.span });
+	const host = props.args?.host;
+	if (host == null) return { series: [] };
+
+	const raw = await misskeyApiGet('charts/instance', { host: host, limit: props.limit, span: props.span });
 	return {
 		bytes: true,
 		series: [{
@@ -680,7 +695,10 @@ const fetchInstanceDriveUsageChart = async (total: boolean): Promise<typeof char
 };
 
 const fetchInstanceDriveFilesChart = async (total: boolean): Promise<typeof chartData> => {
-	const raw = await misskeyApiGet('charts/instance', { host: props.args?.host, limit: props.limit, span: props.span });
+	const host = props.args?.host;
+	if (host == null) return { series: [] };
+
+	const raw = await misskeyApiGet('charts/instance', { host: host, limit: props.limit, span: props.span });
 	return {
 		series: [{
 			name: 'Drive files',
@@ -695,7 +713,10 @@ const fetchInstanceDriveFilesChart = async (total: boolean): Promise<typeof char
 };
 
 const fetchPerUserNotesChart = async (): Promise<typeof chartData> => {
-	const raw = await misskeyApiGet('charts/user/notes', { userId: props.args?.user?.id, limit: props.limit, span: props.span });
+	const userId = props.args?.user?.id;
+	if (userId == null) return { series: [] };
+
+	const raw = await misskeyApiGet('charts/user/notes', { userId: userId, limit: props.limit, span: props.span });
 	return {
 		series: [...(props.args?.withoutAll ? [] : [{
 			name: 'All',
@@ -727,7 +748,10 @@ const fetchPerUserNotesChart = async (): Promise<typeof chartData> => {
 };
 
 const fetchPerUserPvChart = async (): Promise<typeof chartData> => {
-	const raw = await misskeyApiGet('charts/user/pv', { userId: props.args?.user?.id, limit: props.limit, span: props.span });
+	const userId = props.args?.user?.id;
+	if (userId == null) return { series: [] };
+
+	const raw = await misskeyApiGet('charts/user/pv', { userId: userId, limit: props.limit, span: props.span });
 	return {
 		series: [{
 			name: 'Unique PV (user)',
@@ -754,7 +778,10 @@ const fetchPerUserPvChart = async (): Promise<typeof chartData> => {
 };
 
 const fetchPerUserFollowingChart = async (): Promise<typeof chartData> => {
-	const raw = await misskeyApiGet('charts/user/following', { userId: props.args?.user?.id, limit: props.limit, span: props.span });
+	const userId = props.args?.user?.id;
+	if (userId == null) return { series: [] };
+
+	const raw = await misskeyApiGet('charts/user/following', { userId: userId, limit: props.limit, span: props.span });
 	return {
 		series: [{
 			name: 'Local',
@@ -769,7 +796,10 @@ const fetchPerUserFollowingChart = async (): Promise<typeof chartData> => {
 };
 
 const fetchPerUserFollowersChart = async (): Promise<typeof chartData> => {
-	const raw = await misskeyApiGet('charts/user/following', { userId: props.args?.user?.id, limit: props.limit, span: props.span });
+	const userId = props.args?.user?.id;
+	if (userId == null) return { series: [] };
+
+	const raw = await misskeyApiGet('charts/user/following', { userId: userId, limit: props.limit, span: props.span });
 	return {
 		series: [{
 			name: 'Local',
@@ -784,7 +814,10 @@ const fetchPerUserFollowersChart = async (): Promise<typeof chartData> => {
 };
 
 const fetchPerUserDriveChart = async (): Promise<typeof chartData> => {
-	const raw = await misskeyApiGet('charts/user/drive', { userId: props.args?.user?.id, limit: props.limit, span: props.span });
+	const userId = props.args?.user?.id;
+	if (userId == null) return { series: [] };
+
+	const raw = await misskeyApiGet('charts/user/drive', { userId: userId, limit: props.limit, span: props.span });
 	return {
 		bytes: true,
 		series: [{

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

@@ -4,7 +4,7 @@
  */
 
 import { http, HttpResponse } from 'msw';
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import { chatMessage } from '../../.storybook/fakes';
 import MkChatHistories from './MkChatHistories.vue';
 import type { StoryObj } from '@storybook/vue3';

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

@@ -2,9 +2,9 @@
  * SPDX-FileCopyrightText: syuilo and misskey-project
  * SPDX-License-Identifier: AGPL-3.0-only
  */
- 
+
 import { HttpResponse, http } from 'msw';
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import { expect, userEvent, within } from '@storybook/test';
 import { commonHandlers } from '../../.storybook/mocks.js';
 import MkClickerGame from './MkClickerGame.vue';

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

@@ -6,7 +6,7 @@
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
 /* eslint-disable import/no-default-export */
 import type { StoryObj } from '@storybook/vue3';
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import MkCodeEditor from './MkCodeEditor.vue';
 const code = `for (let i, 100) {
 	<: if (i % 15 == 0) "FizzBuzz"

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

@@ -6,7 +6,7 @@
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
 /* eslint-disable import/no-default-export */
 import type { StoryObj } from '@storybook/vue3';
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import MkColorInput from './MkColorInput.vue';
 export const Default = {
 	render(args) {

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

@@ -4,7 +4,7 @@
  */
 
 import { HttpResponse, http } from 'msw';
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import { file } from '../../.storybook/fakes.js';
 import { commonHandlers } from '../../.storybook/mocks.js';
 import MkCropperDialog from './MkCropperDialog.vue';

packages/frontend/src/components/MkCropperDialog.vue

@@ -29,7 +29,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { onMounted, useTemplateRef, ref } from 'vue';
+import { onMounted, useTemplateRef, ref, onUnmounted } from 'vue';
 import * as Misskey from 'misskey-js';
 import Cropper from 'cropperjs';
 import tinycolor from 'tinycolor2';
@@ -55,17 +55,19 @@ const imgEl = useTemplateRef('imgEl');
 let cropper: Cropper | null = null;
 const loading = ref(true);
 
-const ok = async () => {
+async function ok() {
-	const promise = new Promise<Misskey.entities.DriveFile>(async (res) => {
+	const promise = new Promise<Blob>(async (res) => {
-		const croppedImage = await cropper?.getCropperImage();
+		if (cropper == null) throw new Error('Cropper is not initialized');
-		const croppedSection = await cropper?.getCropperSelection();
+
+		const croppedImage = await cropper.getCropperImage()!;
+		const croppedSection = await cropper.getCropperSelection()!;
 
 		// 拡大率を計算し、(ほぼ)元の大きさに戻す
 		const zoomedRate = croppedImage.getBoundingClientRect().width / croppedImage.clientWidth;
 		const widthToRender = croppedSection.getBoundingClientRect().width / zoomedRate;
 
-		const croppedCanvas = await croppedSection?.$toCanvas({ width: widthToRender });
+		const croppedCanvas = await croppedSection.$toCanvas({ width: widthToRender });
-		croppedCanvas?.toBlob(blob => {
+		croppedCanvas.toBlob(blob => {
 			if (!blob) return;
 			res(blob);
 		});
@@ -74,25 +76,27 @@ const ok = async () => {
 	const f = await promise;
 
 	emit('ok', f);
-	dialogEl.value!.close();
+	if (dialogEl.value != null) dialogEl.value.close();
-};
+}
 
-const cancel = () => {
+function cancel() {
 	emit('cancel');
-	dialogEl.value!.close();
+	if (dialogEl.value != null) dialogEl.value.close();
-};
+}
 
-const onImageLoad = () => {
+function onImageLoad() {
 	loading.value = false;
 
 	if (cropper) {
 		cropper.getCropperImage()!.$center('contain');
 		cropper.getCropperSelection()!.$center();
 	}
-};
+}
 
 onMounted(() => {
-	cropper = new Cropper(imgEl.value!, {
+	if (imgEl.value == null) return; // TSを黙らすため
+
+	cropper = new Cropper(imgEl.value, {
 	});
 
 	const computedStyle = getComputedStyle(window.document.documentElement);
@@ -104,16 +108,22 @@ onMounted(() => {
 	selection.outlined = true;
 
 	window.setTimeout(() => {
-		cropper!.getCropperImage()!.$center('contain');
+		if (cropper == null) return;
+		cropper.getCropperImage()!.$center('contain');
 		selection.$center();
 	}, 100);
 
 	// モーダルオープンアニメーションが終わったあとで再度調整
 	window.setTimeout(() => {
-		cropper!.getCropperImage()!.$center('contain');
+		if (cropper == null) return;
+		cropper.getCropperImage()!.$center('contain');
 		selection.$center();
 	}, 500);
 });
+
+onUnmounted(() => {
+	URL.revokeObjectURL(imgUrl);
+});
 </script>
 
 <style lang="scss" scoped>

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

@@ -6,7 +6,7 @@
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
 /* eslint-disable import/no-default-export */
 import type { StoryObj } from '@storybook/vue3';
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import { expect, userEvent, within } from '@storybook/test';
 import { file } from '../../.storybook/fakes.js';
 import MkCwButton from './MkCwButton.vue';

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

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import { expect, userEvent, waitFor, within } from '@storybook/test';
 import type { StoryObj } from '@storybook/vue3';
 import { i18n } from '@/i18n.js';

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

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import type { StoryObj } from '@storybook/vue3';
 import { onBeforeUnmount } from 'vue';
 import MkDonation from './MkDonation.vue';

packages/frontend/src/components/MkDrive.file.stories.impl.ts

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import type { StoryObj } from '@storybook/vue3';
 import MkDrive_file from './MkDrive.file.vue';
 import { file } from '../../.storybook/fakes.js';

packages/frontend/src/components/MkDrive.folder.stories.impl.ts

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import type { StoryObj } from '@storybook/vue3';
 import { http, HttpResponse } from 'msw';
 import * as Misskey from 'misskey-js';

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

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import type { StoryObj } from '@storybook/vue3';
 import { http, HttpResponse } from 'msw';
 import * as Misskey from 'misskey-js';

packages/frontend/src/components/MkDrive.vue

@@ -293,7 +293,7 @@ function onDragleave() {
 	draghover.value = false;
 }
 
-function onDrop(ev: DragEvent) {
+function onDrop(ev: DragEvent): void | boolean {
 	draghover.value = false;
 
 	if (!ev.dataTransfer) return;

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

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import { expect, userEvent, waitFor, within } from '@storybook/test';
 import type { StoryObj } from '@storybook/vue3';
 import { i18n } from '@/i18n.js';

packages/frontend/src/components/MkEmojiPicker.vue

@@ -152,7 +152,7 @@ const props = withDefaults(defineProps<{
 	asDrawer?: boolean;
 	asWindow?: boolean;
 	asReactionPicker?: boolean; // 今は使われてないが将来的に使いそう
-	targetNote?: Misskey.entities.Note;
+	targetNote?: Misskey.entities.Note | null;
 }>(), {
 	showPinned: true,
 });

packages/frontend/src/components/MkEmojiPickerDialog.vue

@@ -44,11 +44,11 @@ import { prefer } from '@/preferences.js';
 
 const props = withDefaults(defineProps<{
 	manualShowing?: boolean | null;
-	anchorElement?: HTMLElement;
+	anchorElement?: HTMLElement | null;
 	showPinned?: boolean;
 	pinnedEmojis?: string[],
 	asReactionPicker?: boolean;
-	targetNote?: Misskey.entities.Note;
+	targetNote?: Misskey.entities.Note | null;
 	choseAndClose?: boolean;
 }>(), {
 	manualShowing: null,

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

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { StoryObj } from '@storybook/vue3';
+import type { StoryObj } from '@storybook/vue3';
 import { file } from '../../.storybook/fakes.js';
 import MkImgPreviewDialog from './MkImgPreviewDialog.vue';
 export const Default = {

packages/frontend/src/components/MkLink.vue

@@ -39,10 +39,12 @@ const el = ref<HTMLElement | { $el: HTMLElement }>();
 
 if (isEnabledUrlPreview.value) {
 	useTooltip(el, (showing) => {
+		const anchorElement = el.value instanceof HTMLElement ? el.value : el.value?.$el;
+		if (anchorElement == null) return;
 		const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkUrlPreviewPopup.vue')), {
 			showing,
 			url: props.url,
-			anchorElement: el.value instanceof HTMLElement ? el.value : el.value?.$el,
+			anchorElement: anchorElement,
 		}, {
 			closed: () => dispose(),
 		});

packages/frontend/src/components/MkModal.vue

@@ -91,7 +91,7 @@ const emit = defineEmits<{
 	(ev: 'opened'): void;
 	(ev: 'click'): void;
 	(ev: 'esc'): void;
-	(ev: 'close'): void;
+	(ev: 'close'): void; // TODO: (refactor) closing に改名する
 	(ev: 'closed'): void;
 }>();
 
@@ -148,7 +148,6 @@ function close(opts: { useSendAnimation?: boolean } = {}) {
 		useSendAnime.value = true;
 	}
 
-	// eslint-disable-next-line vue/no-mutating-props
 	if (props.anchorElement) props.anchorElement.style.pointerEvents = 'auto';
 	showing.value = false;
 	emit('close');
@@ -319,7 +318,6 @@ const alignObserver = new ResizeObserver((entries, observer) => {
 onMounted(() => {
 	watch(() => props.anchorElement, async () => {
 		if (props.anchorElement) {
-			// eslint-disable-next-line vue/no-mutating-props
 			props.anchorElement.style.pointerEvents = 'none';
 		}
 		fixed.value = (type.value === 'drawer') || (getFixedContainer(props.anchorElement) != null);

packages/frontend/src/components/MkNote.vue

@@ -654,7 +654,7 @@ function showRenoteMenu(): void {
 			getCopyNoteLinkMenu(note, i18n.ts.copyLinkRenote),
 			{ type: 'divider' },
 			getAbuseNoteMenu(note, i18n.ts.reportAbuseRenote),
-			($i?.isModerator || $i?.isAdmin) ? getUnrenote() : undefined,
+			...(($i?.isModerator || $i?.isAdmin) ? [getUnrenote()] : []),
 		], renoteTime.value);
 	}
 }

packages/frontend/src/components/MkNoteDetailed.vue

@@ -392,6 +392,9 @@ const reactionsPaginator = markRaw(new Paginator('notes/reactions', {
 }));
 
 useTooltip(renoteButton, async (showing) => {
+	const anchorElement = renoteButton.value;
+	if (anchorElement == null) return;
+
 	const renotes = await misskeyApi('notes/renotes', {
 		noteId: appearNote.id,
 		limit: 11,
@@ -405,7 +408,7 @@ useTooltip(renoteButton, async (showing) => {
 		showing,
 		users,
 		count: appearNote.renoteCount,
-		anchorElement: renoteButton.value,
+		anchorElement: anchorElement,
 	}, {
 		closed: () => dispose(),
 	});

packages/frontend/src/components/MkPostFormDialog.vue

@@ -57,7 +57,7 @@ async function _close() {
 	modal.value?.close();
 }
 
-function onEsc(ev: KeyboardEvent) {
+function onEsc() {
 	_close();
 }
 

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

@@ -58,18 +58,22 @@ const emit = defineEmits<{
 const buttonEl = useTemplateRef('buttonEl');
 
 const emojiName = computed(() => props.reaction.replace(/:/g, '').replace(/@\./, ''));
-const emoji = computed(() => customEmojisMap.get(emojiName.value) ?? getUnicodeEmoji(props.reaction));
 
 const canToggle = computed(() => {
+	const emoji = customEmojisMap.get(emojiName.value) ?? getUnicodeEmoji(props.reaction);
+
 	// TODO
-	//return !props.reaction.match(/@\w/) && $i && emoji.value && checkReactionPermissions($i, props.note, emoji.value);
+	//return !props.reaction.match(/@\w/) && $i && emoji && checkReactionPermissions($i, props.note, emoji);
-	return !props.reaction.match(/@\w/) && $i && emoji.value;
+	return !props.reaction.match(/@\w/) && $i && emoji;
 });
 const canGetInfo = computed(() => !props.reaction.match(/@\w/) && props.reaction.includes(':'));
 const isLocalCustomEmoji = props.reaction[0] === ':' && props.reaction.includes('@.');
 
 async function toggleReaction() {
 	if (!canToggle.value) return;
+	if ($i == null) return;
+
+	const me = $i;
 
 	const oldReaction = props.myReaction;
 	if (oldReaction) {
@@ -93,7 +97,7 @@ async function toggleReaction() {
 			noteId: props.noteId,
 		}).then(() => {
 			noteEvents.emit(`unreacted:${props.noteId}`, {
-				userId: $i!.id,
+				userId: me.id,
 				reaction: oldReaction,
 			});
 			if (oldReaction !== props.reaction) {
@@ -101,10 +105,12 @@ async function toggleReaction() {
 					noteId: props.noteId,
 					reaction: props.reaction,
 				}).then(() => {
+					const emoji = customEmojisMap.get(emojiName.value);
+					if (emoji == null) return;
 					noteEvents.emit(`reacted:${props.noteId}`, {
-						userId: $i!.id,
+						userId: me.id,
 						reaction: props.reaction,
-						emoji: emoji.value,
+						emoji: emoji,
 					});
 				});
 			}
@@ -131,10 +137,13 @@ async function toggleReaction() {
 			noteId: props.noteId,
 			reaction: props.reaction,
 		}).then(() => {
+			const emoji = customEmojisMap.get(emojiName.value);
+			if (emoji == null) return;
+
 			noteEvents.emit(`reacted:${props.noteId}`, {
-				userId: $i!.id,
+				userId: me.id,
 				reaction: props.reaction,
-				emoji: emoji.value,
+				emoji: emoji,
 			});
 		});
 		// TODO: 上位コンポーネントでやる
@@ -217,6 +226,8 @@ onMounted(() => {
 
 if (!mock) {
 	useTooltip(buttonEl, async (showing) => {
+		if (buttonEl.value == null) return;
+
 		const reactions = await misskeyApiGet('notes/reactions', {
 			noteId: props.noteId,
 			type: props.reaction,

packages/frontend/src/components/MkServerSetupWizard.vue

@@ -66,7 +66,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 			<MkSwitch v-if="q_federation === 'yes'" v-model="q_remoteContentsCleaning">
 				<template #label>{{ i18n.ts._serverSetupWizard.remoteContentsCleaning }}</template>
-				<template #caption>{{ i18n.ts._serverSetupWizard.remoteContentsCleaning_description }}</template>
+				<template #caption>{{ i18n.ts._serverSetupWizard.remoteContentsCleaning_description }} ({{ i18n.ts._serverSetupWizard.remoteContentsCleaning_description2 }})</template>
 			</MkSwitch>
 		</div>
 	</MkFolder>

packages/frontend/src/components/MkStreamingNotesTimeline.vue

@@ -297,76 +297,97 @@ function prepend(note: Misskey.entities.Note & MisskeyEntity) {
 	}
 }
 
-let connection: Misskey.IChannelConnection | null = null;
-let connection2: Misskey.IChannelConnection | null = null;
-
 const stream = store.s.realtimeMode ? useStream() : null;
 
+const connections = {
+	antenna: null as Misskey.IChannelConnection<Misskey.Channels['antenna']> | null,
+	homeTimeline: null as Misskey.IChannelConnection<Misskey.Channels['homeTimeline']> | null,
+	localTimeline: null as Misskey.IChannelConnection<Misskey.Channels['localTimeline']> | null,
+	hybridTimeline: null as Misskey.IChannelConnection<Misskey.Channels['hybridTimeline']> | null,
+	globalTimeline: null as Misskey.IChannelConnection<Misskey.Channels['globalTimeline']> | null,
+	main: null as Misskey.IChannelConnection<Misskey.Channels['main']> | null,
+	userList: null as Misskey.IChannelConnection<Misskey.Channels['userList']> | null,
+	channel: null as Misskey.IChannelConnection<Misskey.Channels['channel']> | null,
+	roleTimeline: null as Misskey.IChannelConnection<Misskey.Channels['roleTimeline']> | null,
+};
+
 function connectChannel() {
 	if (stream == null) return;
 	if (props.src === 'antenna') {
 		if (props.antenna == null) return;
-		connection = stream.useChannel('antenna', {
+		connections.antenna = stream.useChannel('antenna', {
 			antennaId: props.antenna,
 		});
+		connections.antenna.on('note', prepend);
 	} else if (props.src === 'home') {
-		connection = stream.useChannel('homeTimeline', {
+		connections.homeTimeline = stream.useChannel('homeTimeline', {
 			withRenotes: props.withRenotes,
 			withFiles: props.onlyFiles ? true : undefined,
 		});
-		connection2 = stream.useChannel('main');
+		connections.main = stream.useChannel('main');
+		connections.homeTimeline.on('note', prepend);
 	} else if (props.src === 'local') {
-		connection = stream.useChannel('localTimeline', {
+		connections.localTimeline = stream.useChannel('localTimeline', {
 			withRenotes: props.withRenotes,
 			withReplies: props.withReplies,
 			withFiles: props.onlyFiles ? true : undefined,
 		});
+		connections.localTimeline.on('note', prepend);
 	} else if (props.src === 'social') {
-		connection = stream.useChannel('hybridTimeline', {
+		connections.hybridTimeline = stream.useChannel('hybridTimeline', {
 			withRenotes: props.withRenotes,
 			withReplies: props.withReplies,
 			withFiles: props.onlyFiles ? true : undefined,
 		});
+		connections.hybridTimeline.on('note', prepend);
 	} else if (props.src === 'global') {
-		connection = stream.useChannel('globalTimeline', {
+		connections.globalTimeline = stream.useChannel('globalTimeline', {
 			withRenotes: props.withRenotes,
 			withFiles: props.onlyFiles ? true : undefined,
 		});
+		connections.globalTimeline.on('note', prepend);
 	} else if (props.src === 'mentions') {
-		connection = stream.useChannel('main');
+		connections.main = stream.useChannel('main');
-		connection.on('mention', prepend);
+		connections.main.on('mention', prepend);
 	} else if (props.src === 'directs') {
 		const onNote = note => {
 			if (note.visibility === 'specified') {
 				prepend(note);
 			}
 		};
-		connection = stream.useChannel('main');
+		connections.main = stream.useChannel('main');
-		connection.on('mention', onNote);
+		connections.main.on('mention', onNote);
 	} else if (props.src === 'list') {
 		if (props.list == null) return;
-		connection = stream.useChannel('userList', {
+		connections.userList = stream.useChannel('userList', {
 			withRenotes: props.withRenotes,
 			withFiles: props.onlyFiles ? true : undefined,
 			listId: props.list,
 		});
+		connections.userList.on('note', prepend);
 	} else if (props.src === 'channel') {
 		if (props.channel == null) return;
-		connection = stream.useChannel('channel', {
+		connections.channel = stream.useChannel('channel', {
 			channelId: props.channel,
 		});
+		connections.channel.on('note', prepend);
 	} else if (props.src === 'role') {
 		if (props.role == null) return;
-		connection = stream.useChannel('roleTimeline', {
+		connections.roleTimeline = stream.useChannel('roleTimeline', {
 			roleId: props.role,
 		});
+		connections.roleTimeline.on('note', prepend);
 	}
-	if (props.src !== 'directs' && props.src !== 'mentions') connection?.on('note', prepend);
 }
 
 function disconnectChannel() {
-	if (connection) connection.dispose();
+	for (const key in connections) {
-	if (connection2) connection2.dispose();
+		const conn = connections[key as keyof typeof connections];
+		if (conn != null) {
+			conn.dispose();
+			connections[key as keyof typeof connections] = null;
+		}
+	}
 }
 
 if (store.s.realtimeMode) {

packages/frontend/src/components/MkTabs.vue

@@ -39,17 +39,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 export type Tab = {
 	key: string;
 	onClick?: (ev: MouseEvent) => void;
-} & (
+	iconOnly?: boolean;
-	| {
+	title: string;
-		iconOnly?: false;
+	icon?: string;
-		title: string;
+};
-		icon?: string;
-	}
-	| {
-		iconOnly: true;
-		icon: string;
-	}
-);
 </script>
 
 <script lang="ts" setup>

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

@@ -5,7 +5,7 @@
 
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
 /* eslint-disable import/no-default-export */
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import type { StoryObj } from '@storybook/vue3';
 import MkTagItem from './MkTagItem.vue';
 

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

@@ -52,7 +52,7 @@ import { prefer } from '@/preferences.js';
 type Ad = (typeof instance)['ads'][number];
 
 const props = defineProps<{
-	preferForms: string[];
+	preferForms?: string[];
 	specify?: Ad;
 }>();
 
@@ -71,7 +71,7 @@ const choseAd = (): Ad | null => {
 		ratio: 0,
 	} : ad);
 
-	let ads = allAds.filter(ad => props.preferForms.includes(ad.place));
+	let ads = props.preferForms ? allAds.filter(ad => props.preferForms!.includes(ad.place)) : allAds;
 
 	if (ads.length === 0) {
 		ads = allAds.filter(ad => ad.place === 'square');

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

@@ -4,7 +4,7 @@
  */
 
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import { expect, waitFor } from '@storybook/test';
 import type { StoryObj } from '@storybook/vue3';
 import MkError from './MkError.vue';

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

@@ -39,17 +39,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 export type Tab = {
 	key: string;
 	onClick?: (ev: MouseEvent) => void;
-} & (
+	iconOnly?: boolean;
-	| {
+	title: string;
-		iconOnly?: false;
+	icon?: string;
-		title: string;
+};
-		icon?: string;
-	}
-	| {
-		iconOnly: true;
-		icon: string;
-	}
-);
 </script>
 
 <script lang="ts" setup>
@@ -59,7 +52,7 @@ import { prefer } from '@/preferences.js';
 const props = withDefaults(defineProps<{
 	tabs?: Tab[];
 	tab?: string;
-	rootEl?: HTMLElement;
+	rootEl?: HTMLElement | null;
 }>(), {
 	tabs: () => ([] as Tab[]),
 });

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

@@ -1,14 +0,0 @@
-<!--
-SPDX-FileCopyrightText: syuilo and misskey-project
-SPDX-License-Identifier: AGPL-3.0-only
--->
-
-<template>
-<slot></slot>
-</template>
-
-<script lang="ts" setup>
-</script>
-
-<style lang="scss" module>
-</style>

packages/frontend/src/components/grid/MkGrid.stories.impl.ts

@@ -4,7 +4,7 @@
  */
 
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import type { StoryObj } from '@storybook/vue3';
 import { ref } from 'vue';
 import { commonHandlers } from '../../../.storybook/mocks.js';

packages/frontend/src/os.ts

@@ -9,7 +9,7 @@ import { markRaw, ref, defineAsyncComponent, nextTick } from 'vue';
 import { EventEmitter } from 'eventemitter3';
 import * as Misskey from 'misskey-js';
 import type { Component, Ref } from 'vue';
-import type { ComponentProps as CP } from 'vue-component-type-helpers';
+import type { ComponentEmit, ComponentProps as CP } from 'vue-component-type-helpers';
 import type { Form, GetFormResultType } from '@/utility/form.js';
 import type { MenuItem } from '@/types/menu.js';
 import type { PostFormProps } from '@/types/post-form.js';
@@ -157,28 +157,9 @@ export function claimZIndex(priority: keyof typeof zIndexes = 'low'): number {
 	return zIndexes[priority];
 }
 
-// InstanceType<typeof Component>['$emit'] だとインターセクション型が返ってきて
-// 使い物にならないので、代わりに ['$props'] から色々省くことで emit の型を生成する
-// FIXME: 何故か *.ts ファイルからだと型がうまく取れない？ことがあるのをなんとかしたい
-type ComponentEmit<T> = T extends new () => { $props: infer Props }
-	? [keyof Pick<T, Extract<keyof T, `on${string}`>>] extends [never]
-		? Record<string, unknown> // *.ts ファイルから型がうまく取れないとき用（これがないと {} になって型エラーがうるさい）
-		: EmitsExtractor<Props>
-	: T extends (...args: any) => any
-		? ReturnType<T> extends { [x: string]: any; __ctx?: { [x: string]: any; props: infer Props } }
-			? [keyof Pick<T, Extract<keyof T, `on${string}`>>] extends [never]
-				? Record<string, unknown>
-				: EmitsExtractor<Props>
-			: never
-		: never;
-
 // props に ref を許可するようにする
 type ComponentProps<T extends Component> = { [K in keyof CP<T>]: CP<T>[K] | Ref<CP<T>[K]> };
 
-type EmitsExtractor<T> = {
-	[K in keyof T as K extends `onVnode${string}` ? never : K extends `on${infer E}` ? Uncapitalize<E> : K extends string ? never : K]: T[K];
-};
-
 export function popup<T extends Component>(
 	component: T,
 	props: ComponentProps<T>,
@@ -703,7 +684,7 @@ export async function cropImageFile(imageFile: File | Blob, options: {
 	});
 }
 
-export function popupMenu(items: MenuItem[], anchorElement?: HTMLElement | EventTarget | null, options?: {
+export function popupMenu(items: (MenuItem | null)[], anchorElement?: HTMLElement | EventTarget | null, options?: {
 	align?: string;
 	width?: number;
 	onClosing?: () => void;
@@ -715,7 +696,7 @@ export function popupMenu(items: MenuItem[], anchorElement?: HTMLElement | Event
 	let returnFocusTo = getHTMLElementOrNull(anchorElement) ?? getHTMLElementOrNull(window.document.activeElement);
 	return new Promise(resolve => nextTick(() => {
 		const { dispose } = popup(MkPopupMenu, {
-			items,
+			items: items.filter(x => x != null),
 			anchorElement,
 			width: options?.width,
 			align: options?.align,

packages/frontend/src/pages/about.emojis.vue

@@ -26,7 +26,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</div>
 	</MkFoldableSection>
 
-	<MkFoldableSection v-for="category in customEmojiCategories" v-once :key="category">
+	<MkFoldableSection v-for="category in customEmojiCategories" v-once :key="category ?? '___root___'">
 		<template #header>{{ category || i18n.ts.other }}</template>
 		<div :class="$style.emojis">
 			<XEmoji v-for="emoji in customEmojis.filter(e => e.category === category)" :key="emoji.name" :emoji="emoji"/>

packages/frontend/src/pages/about.overview.vue

@@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <div class="_gaps_m">
 	<div :class="$style.banner" :style="{ backgroundImage: `url(${ instance.bannerUrl })` }">
 		<div style="overflow: clip;">
-			<img :src="instance.iconUrl ?? instance.faviconUrl ?? '/favicon.ico'" alt="" :class="$style.bannerIcon"/>
+			<img :src="instance.iconUrl ?? '/favicon.ico'" alt="" :class="$style.bannerIcon"/>
 			<div :class="$style.bannerName">
 				<b>{{ instance.name ?? host }}</b>
 			</div>

packages/frontend/src/pages/admin-file.vue

@@ -111,13 +111,13 @@ const props = defineProps<{
 	fileId: string,
 }>();
 
-async function fetch() {
+async function _fetch_() {
 	file.value = await misskeyApi('drive/files/show', { fileId: props.fileId });
 	info.value = await misskeyApi('admin/drive/show-file', { fileId: props.fileId });
 	isSensitive.value = file.value.isSensitive;
 }
 
-fetch();
+_fetch_();
 
 async function del() {
 	const { canceled } = await os.confirm({
@@ -172,7 +172,7 @@ const headerTabs = computed(() => [{
 	key: 'raw',
 	title: 'Raw data',
 	icon: 'ti ti-code',
-}]);
+}].filter(x => x != null));
 
 definePage(() => ({
 	title: file.value ? `${i18n.ts.file}: ${file.value.name}` : i18n.ts.file,

packages/frontend/src/pages/admin-user.vue

@@ -143,8 +143,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<button v-else class="_button" :class="$style.roleUnassign" disabled><i class="ti ti-ban"></i></button>
 				</div>
 				<div v-if="expandedRoleIds.includes(role.id)" :class="$style.roleItemSub">
-					<div>Assigned: <MkTime :time="info.roleAssigns.find(a => a.roleId === role.id).createdAt" mode="detail"/></div>
+					<div>Assigned: <MkTime :time="info.roleAssigns.find(a => a.roleId === role.id)!.createdAt" mode="detail"/></div>
-					<div v-if="info.roleAssigns.find(a => a.roleId === role.id).expiresAt">Period: {{ new Date(info.roleAssigns.find(a => a.roleId === role.id).expiresAt).toLocaleString() }}</div>
+					<div v-if="info.roleAssigns.find(a => a.roleId === role.id)!.expiresAt">Period: {{ new Date(info.roleAssigns.find(a => a.roleId === role.id)!.expiresAt!).toLocaleString() }}</div>
 					<div v-else>Period: {{ i18n.ts.indefinitely }}</div>
 				</div>
 			</div>

packages/frontend/src/pages/admin/ads.vue

@@ -140,15 +140,15 @@ function toggleDayOfWeek(ad, index) {
 
 function add() {
 	ads.value.unshift({
-		id: null,
+		id: '',
 		memo: '',
 		place: 'square',
 		priority: 'middle',
 		ratio: 1,
 		url: '',
-		imageUrl: null,
+		imageUrl: '',
-		expiresAt: null,
+		expiresAt: new Date().toISOString(),
-		startsAt: null,
+		startsAt: new Date().toISOString(),
 		dayOfWeek: 0,
 	});
 }
@@ -160,7 +160,7 @@ function remove(ad) {
 	}).then(({ canceled }) => {
 		if (canceled) return;
 		ads.value = ads.value.filter(x => x !== ad);
-		if (ad.id == null) return;
+		if (ad.id === '') return;
 		os.apiWithDialog('admin/ad/delete', {
 			id: ad.id,
 		}).then(() => {
@@ -170,7 +170,7 @@ function remove(ad) {
 }
 
 function save(ad) {
-	if (ad.id == null) {
+	if (ad.id === '') {
 		misskeyApi('admin/ad/create', {
 			...ad,
 			expiresAt: new Date(ad.expiresAt).getTime(),
@@ -207,7 +207,7 @@ function save(ad) {
 }
 
 function more() {
-	misskeyApi('admin/ad/list', { untilId: ads.value.reduce((acc, ad) => ad.id != null ? ad : acc).id, publishing: publishing }).then(adsResponse => {
+	misskeyApi('admin/ad/list', { untilId: ads.value.reduce((acc, ad) => ad.id !== '' ? ad : acc).id, publishing: publishing }).then(adsResponse => {
 		if (adsResponse == null) return;
 		ads.value = ads.value.concat(adsResponse.map(r => {
 			const exdate = new Date(r.expiresAt);

packages/frontend/src/pages/admin/moderation.vue

@@ -25,11 +25,19 @@ SPDX-License-Identifier: AGPL-3.0-only
 				</SearchMarker>
 
 				<SearchMarker :keywords="['ugc', 'content', 'visibility', 'visitor', 'guest']">
-					<MkSelect v-model="ugcVisibilityForVisitor" @update:modelValue="onChange_ugcVisibilityForVisitor">
+					<MkSelect
+						v-model="ugcVisibilityForVisitor" :items="[{
+							value: 'all',
+							label: i18n.ts._serverSettings._userGeneratedContentsVisibilityForVisitor.all,
+						}, {
+							value: 'local',
+							label: i18n.ts._serverSettings._userGeneratedContentsVisibilityForVisitor.localOnly + ' (' + i18n.ts.recommended + ')',
+						}, {
+							value: 'none',
+							label: i18n.ts._serverSettings._userGeneratedContentsVisibilityForVisitor.none,
+						}] as const" @update:modelValue="onChange_ugcVisibilityForVisitor"
+					>
 						<template #label><SearchLabel>{{ i18n.ts._serverSettings.userGeneratedContentsVisibilityForVisitor }}</SearchLabel></template>
-						<option value="all">{{ i18n.ts._serverSettings._userGeneratedContentsVisibilityForVisitor.all }}</option>
-						<option value="local">{{ i18n.ts._serverSettings._userGeneratedContentsVisibilityForVisitor.localOnly }} ({{ i18n.ts.recommended }})</option>
-						<option value="none">{{ i18n.ts._serverSettings._userGeneratedContentsVisibilityForVisitor.none }}</option>
 						<template #caption>
 							<div><SearchText>{{ i18n.ts._serverSettings.userGeneratedContentsVisibilityForVisitor_description }}</SearchText></div>
 							<div><i class="ti ti-alert-triangle" style="color: var(--MI_THEME-warn);"></i> <SearchText>{{ i18n.ts._serverSettings.userGeneratedContentsVisibilityForVisitor_description2 }}</SearchText></div>
@@ -158,6 +166,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { ref, computed } from 'vue';
+import * as Misskey from 'misskey-js';
 import XServerRules from './server-rules.vue';
 import MkSwitch from '@/components/MkSwitch.vue';
 import MkInput from '@/components/MkInput.vue';
@@ -212,7 +221,7 @@ function onChange_emailRequiredForSignup(value: boolean) {
 	});
 }
 
-function onChange_ugcVisibilityForVisitor(value: string) {
+function onChange_ugcVisibilityForVisitor(value: Misskey.entities.AdminUpdateMetaRequest['ugcVisibilityForVisitor']) {
 	os.apiWithDialog('admin/update-meta', {
 		ugcVisibilityForVisitor: value,
 	}).then(() => {

packages/frontend/src/pages/admin/modlog.vue

@@ -77,7 +77,7 @@ paginator.init();
 const timeline = computed(() => {
 	return paginator.items.value.map(x => ({
 		id: x.id,
-		timestamp: x.createdAt,
+		timestamp: new Date(x.createdAt).getTime(),
 		data: x,
 	}));
 });

packages/frontend/src/pages/admin/overview.ap-requests.stories.impl.ts

@@ -5,7 +5,7 @@
 
 import type { StoryObj } from '@storybook/vue3';
 import { http, HttpResponse } from 'msw';
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import { commonHandlers } from '../../../.storybook/mocks.js';
 import overview_ap_requests from './overview.ap-requests.vue';
 export const Default = {

packages/frontend/src/pages/announcement.vue

@@ -39,7 +39,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<MkButton primary @click="read(announcement)"><i class="ti ti-check"></i> {{ i18n.ts.gotIt }}</MkButton>
 				</div>
 			</div>
-			<MkError v-else-if="error" @retry="fetch()"/>
+			<MkError v-else-if="error" @retry="_fetch_()"/>
 			<MkLoading v-else/>
 		</Transition>
 	</div>
@@ -66,7 +66,7 @@ const announcement = ref<Misskey.entities.Announcement | null>(null);
 const error = ref<any>(null);
 const path = computed(() => props.announcementId);
 
-function fetch() {
+function _fetch_() {
 	announcement.value = null;
 	misskeyApi('announcements/show', {
 		announcementId: props.announcementId,
@@ -96,7 +96,7 @@ async function read(target: Misskey.entities.Announcement): Promise<void> {
 	}
 }
 
-watch(() => path.value, fetch, { immediate: true });
+watch(() => path.value, _fetch_, { immediate: true });
 
 const headerActions = computed(() => []);
 

packages/frontend/src/pages/auth.vue

@@ -75,14 +75,15 @@ onMounted(async () => {
 	if (!$i) return;
 
 	try {
-		session.value = await misskeyApi('auth/session/show', {
+		const result = await misskeyApi('auth/session/show', {
 			token: props.token,
 		});
+		session.value = result;
 
 		// 既に連携していた場合
-		if (session.value.app.isAuthorized) {
+		if (result.app.isAuthorized) {
 			await misskeyApi('auth/accept', {
-				token: session.value.token,
+				token: result.token,
 			});
 			accepted();
 		} else {

packages/frontend/src/pages/channel-editor.vue

@@ -92,7 +92,7 @@ const props = defineProps<{
 }>();
 
 const channel = ref<Misskey.entities.Channel | null>(null);
-const name = ref<string | null>(null);
+const name = ref<string>('');
 const description = ref<string | null>(null);
 const bannerUrl = ref<string | null>(null);
 const bannerId = ref<string | null>(null);
@@ -114,20 +114,22 @@ watch(() => bannerId.value, async () => {
 async function fetchChannel() {
 	if (props.channelId == null) return;
 
-	channel.value = await misskeyApi('channels/show', {
+	const result = await misskeyApi('channels/show', {
 		channelId: props.channelId,
 	});
 
-	name.value = channel.value.name;
+	name.value = result.name;
-	description.value = channel.value.description;
+	description.value = result.description;
-	bannerId.value = channel.value.bannerId;
+	bannerId.value = result.bannerId;
-	bannerUrl.value = channel.value.bannerUrl;
+	bannerUrl.value = result.bannerUrl;
-	isSensitive.value = channel.value.isSensitive;
+	isSensitive.value = result.isSensitive;
-	pinnedNotes.value = channel.value.pinnedNoteIds.map(id => ({
+	pinnedNotes.value = result.pinnedNoteIds.map(id => ({
 		id,
 	}));
-	color.value = channel.value.color;
+	color.value = result.color;
-	allowRenoteToExternal.value = channel.value.allowRenoteToExternal;
+	allowRenoteToExternal.value = result.allowRenoteToExternal;
+
+	channel.value = result;
 }
 
 fetchChannel();
@@ -154,15 +156,17 @@ function save() {
 		name: name.value,
 		description: description.value,
 		bannerId: bannerId.value,
-		pinnedNoteIds: pinnedNotes.value.map(x => x.id),
 		color: color.value,
 		isSensitive: isSensitive.value,
 		allowRenoteToExternal: allowRenoteToExternal.value,
-	};
+	} satisfies Misskey.entities.ChannelsCreateRequest;
 
-	if (props.channelId) {
+	if (props.channelId != null) {
-		params.channelId = props.channelId;
+		os.apiWithDialog('channels/update', {
-		os.apiWithDialog('channels/update', params);
+			...params,
+			channelId: props.channelId,
+			pinnedNoteIds: pinnedNotes.value.map(x => x.id),
+		});
 	} else {
 		os.apiWithDialog('channels/create', params).then(created => {
 			router.push('/channels/:channelId', {
@@ -175,12 +179,13 @@ function save() {
 }
 
 async function archive() {
+	if (props.channelId == null) return;
+
 	const { canceled } = await os.confirm({
 		type: 'warning',
 		title: i18n.tsx.channelArchiveConfirmTitle({ name: name.value }),
 		text: i18n.ts.channelArchiveConfirmDescription,
 	});
-
 	if (canceled) return;
 
 	misskeyApi('channels/update', {

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

@@ -312,6 +312,7 @@ const headerActions = computed(() => [{
 	handler: add,
 }, {
 	icon: 'ti ti-dots',
+	text: i18n.ts.more,
 	handler: menu,
 }]);
 

packages/frontend/src/pages/drive.file.info.vue

@@ -105,7 +105,7 @@ const folderHierarchy = computed(() => {
 });
 const isImage = computed(() => file.value?.type.startsWith('image/'));
 
-async function fetch() {
+async function _fetch_() {
 	fetching.value = true;
 
 	file.value = await misskeyApi('drive/files/show', {
@@ -119,7 +119,7 @@ async function fetch() {
 }
 
 function postThis() {
-	if (!file.value) return;
+	if (file.value == null) return;
 
 	os.post({
 		initialFiles: [file.value],
@@ -127,26 +127,28 @@ function postThis() {
 }
 
 function move() {
-	if (!file.value) return;
+	if (file.value == null) return;
+
+	const f = file.value;
 
 	selectDriveFolder(null).then(folder => {
 		misskeyApi('drive/files/update', {
-			fileId: file.value.id,
+			fileId: f.id,
 			folderId: folder[0] ? folder[0].id : null,
 		}).then(async () => {
-			await fetch();
+			await _fetch_();
 		});
 	});
 }
 
 function toggleSensitive() {
-	if (!file.value) return;
+	if (file.value == null) return;
 
 	os.apiWithDialog('drive/files/update', {
 		fileId: file.value.id,
 		isSensitive: !file.value.isSensitive,
 	}).then(async () => {
-		await fetch();
+		await _fetch_();
 	}).catch(err => {
 		os.alert({
 			type: 'error',
@@ -157,7 +159,9 @@ function toggleSensitive() {
 }
 
 function rename() {
-	if (!file.value) return;
+	if (file.value == null) return;
+
+	const f = file.value;
 
 	os.inputText({
 		title: i18n.ts.renameFile,
@@ -166,16 +170,18 @@ function rename() {
 	}).then(({ canceled, result: name }) => {
 		if (canceled) return;
 		os.apiWithDialog('drive/files/update', {
-			fileId: file.value.id,
+			fileId: f.id,
 			name: name,
 		}).then(async () => {
-			await fetch();
+			await _fetch_();
 		});
 	});
 }
 
 async function describe() {
-	if (!file.value) return;
+	if (file.value == null) return;
+
+	const f = file.value;
 
 	const { dispose } = await os.popupAsyncWithDialog(import('@/components/MkFileCaptionEditWindow.vue').then(x => x.default), {
 		default: file.value.comment ?? '',
@@ -183,10 +189,10 @@ async function describe() {
 	}, {
 		done: caption => {
 			os.apiWithDialog('drive/files/update', {
-				fileId: file.value.id,
+				fileId: f.id,
 				comment: caption.length === 0 ? null : caption,
 			}).then(async () => {
-				await fetch();
+				await _fetch_();
 			});
 		},
 		closed: () => dispose(),
@@ -194,7 +200,7 @@ async function describe() {
 }
 
 async function deleteFile() {
-	if (!file.value) return;
+	if (file.value == null) return;
 
 	const { canceled } = await os.confirm({
 		type: 'warning',
@@ -212,7 +218,7 @@ async function deleteFile() {
 }
 
 onMounted(async () => {
-	await fetch();
+	await _fetch_();
 });
 </script>
 

packages/frontend/src/pages/explore.vue

@@ -26,18 +26,12 @@ import { definePage } from '@/page.js';
 import { i18n } from '@/i18n.js';
 
 const props = withDefaults(defineProps<{
-	tag?: string;
 	initialTab?: string;
 }>(), {
 	initialTab: 'featured',
 });
 
 const tab = ref(props.initialTab);
-const tagsEl = useTemplateRef('tagsEl');
-
-watch(() => props.tag, () => {
-	if (tagsEl.value) tagsEl.value.toggleContent(props.tag == null);
-});
 
 const headerActions = computed(() => []);
 

packages/frontend/src/pages/flash/flash-edit.vue

@@ -383,7 +383,7 @@ if (props.id) {
 
 const title = ref(flash.value?.title ?? 'New Play');
 const summary = ref(flash.value?.summary ?? '');
-const permissions = ref(flash.value?.permissions ?? []);
+const permissions = ref([]); // not implemented yet
 const visibility = ref<'private' | 'public'>(flash.value?.visibility ?? 'public');
 const script = ref(flash.value?.script ?? PRESET_DEFAULT);
 
@@ -412,9 +412,9 @@ function selectPreset(ev: MouseEvent) {
 }
 
 async function save() {
-	if (flash.value) {
+	if (flash.value != null) {
 		os.apiWithDialog('flash/update', {
-			flashId: props.id,
+			flashId: flash.value.id,
 			title: title.value,
 			summary: summary.value,
 			permissions: permissions.value,
@@ -448,6 +448,8 @@ function show() {
 }
 
 async function del() {
+	if (flash.value == null) return;
+
 	const { canceled } = await os.confirm({
 		type: 'warning',
 		text: i18n.tsx.deleteAreYouSure({ x: flash.value.title }),
@@ -455,7 +457,7 @@ async function del() {
 	if (canceled) return;
 
 	await os.apiWithDialog('flash/delete', {
-		flashId: props.id,
+		flashId: flash.value.id,
 	});
 	router.push('/play');
 }
@@ -468,6 +470,7 @@ definePage(() => ({
 	title: flash.value ? `${i18n.ts._play.edit}: ${flash.value.title}` : i18n.ts._play.new,
 }));
 </script>
+
 <style lang="scss" module>
 .footer {
 	backdrop-filter: var(--MI-blur, blur(15px));

packages/frontend/src/pages/gallery/edit.vue

@@ -16,7 +16,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</MkTextarea>
 
 			<div class="_gaps_s">
-				<div v-for="file in files" :key="file.id" class="wqugxsfx" :style="{ backgroundImage: file ? `url(${ file.thumbnailUrl })` : null }">
+				<div v-for="file in files" :key="file.id" class="wqugxsfx" :style="{ backgroundImage: file ? `url(${ file.thumbnailUrl })` : '' }">
 					<div class="name">{{ file.name }}</div>
 					<button v-tooltip="i18n.ts.remove" class="remove _button" @click="remove(file)"><i class="ti ti-x"></i></button>
 				</div>
@@ -88,7 +88,7 @@ async function save() {
 		router.push('/gallery/:postId', {
 			params: {
 				postId: props.postId,
-			}
+			},
 		});
 	} else {
 		const created = await os.apiWithDialog('gallery/posts/create', {
@@ -100,7 +100,7 @@ async function save() {
 		router.push('/gallery/:postId', {
 			params: {
 				postId: created.id,
-			}
+			},
 		});
 	}
 }

packages/frontend/src/pages/install-extensions.vue

@@ -80,7 +80,7 @@ function close_(): void {
 	}
 }
 
-async function fetch() {
+async function _fetch_() {
 	if (!url.value || !hash.value) {
 		errorKV.value = {
 			title: i18n.ts._externalResourceInstaller._errors._invalidParams.title,
@@ -161,7 +161,7 @@ async function fetch() {
 					},
 					raw: res.data,
 				};
-			} catch (err) {
+			} catch (err: any) {
 				switch (err.message.toLowerCase()) {
 					case 'this theme is already installed':
 						errorKV.value = {
@@ -229,7 +229,7 @@ async function install() {
 const urlParams = new URLSearchParams(window.location.search);
 url.value = urlParams.get('url');
 hash.value = urlParams.get('hash');
-fetch();
+_fetch_();
 
 definePage(() => ({
 	title: i18n.ts._externalResourceInstaller.title,

packages/frontend/src/pages/instance-info.vue

@@ -198,7 +198,7 @@ if (iAmModerator) {
 	});
 }
 
-async function fetch(): Promise<void> {
+async function _fetch_(): Promise<void> {
 	if (iAmAdmin) {
 		meta.value = await misskeyApi('admin/meta');
 	}
@@ -276,7 +276,7 @@ function refreshMetadata(): void {
 	});
 }
 
-fetch();
+_fetch_();
 
 const headerActions = computed(() => [{
 	text: `https://${props.host}`,

packages/frontend/src/pages/list.vue

@@ -103,6 +103,7 @@ definePage(() => ({
 	icon: 'ti ti-list',
 }));
 </script>
+
 <style lang="scss" module>
 .userItem {
 	display: flex;

packages/frontend/src/pages/lookup.vue

@@ -29,7 +29,7 @@ import MkButton from '@/components/MkButton.vue';
 
 const state = ref<'fetching' | 'done'>('fetching');
 
-function fetch() {
+function _fetch_() {
 	const params = new URL(window.location.href).searchParams;
 
 	// acctのほうはdeprecated
@@ -44,20 +44,18 @@ function fetch() {
 	if (uri.startsWith('https://')) {
 		promise = misskeyApi('ap/show', {
 			uri,
-		});
+		}).then(res => {
-
-		promise.then(res => {
 			if (res.type === 'User') {
 				mainRouter.replace('/@:acct/:page?', {
 					params: {
 						acct: res.host != null ? `${res.object.username}@${res.object.host}` : res.object.username,
-					}
+					},
 				});
 			} else if (res.type === 'Note') {
 				mainRouter.replace('/notes/:noteId/:initialTab?', {
 					params: {
 						noteId: res.object.id,
-					}
+					},
 				});
 			} else {
 				os.alert({
@@ -70,12 +68,11 @@ function fetch() {
 		if (uri.startsWith('acct:')) {
 			uri = uri.slice(5);
 		}
-		promise = misskeyApi('users/show', Misskey.acct.parse(uri));
+		promise = misskeyApi('users/show', Misskey.acct.parse(uri)).then(user => {
-		promise.then(user => {
 			mainRouter.replace('/@:acct/:page?', {
 				params: {
 					acct: user.host != null ? `${user.username}@${user.host}` : user.username,
-				}
+				},
 			});
 		});
 	}
@@ -96,7 +93,7 @@ function goToMisskey(): void {
 	window.location.href = '/';
 }
 
-fetch();
+_fetch_();
 
 const headerActions = computed(() => []);
 

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

@@ -30,11 +30,11 @@ import { antennasCache } from '@/cache.js';
 
 const antennas = computed(() => antennasCache.value.value ?? []);
 
-function fetch() {
+function _fetch_() {
 	antennasCache.fetch();
 }
 
-fetch();
+_fetch_();
 
 const headerActions = computed(() => [{
 	asFullButton: true,
@@ -42,7 +42,7 @@ const headerActions = computed(() => [{
 	text: i18n.ts.reload,
 	handler: () => {
 		antennasCache.delete();
-		fetch();
+		_fetch_();
 	},
 }]);
 

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

@@ -17,8 +17,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 			<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 }} <span :class="$style.nUsers">({{ i18n.tsx.nUsers({ n: `${list.userIds.length}/${$i.policies['userEachUserListsLimit']}` }) }})</span></div>
+					<div style="margin-bottom: 4px;">{{ list.name }} <span :class="$style.nUsers">({{ i18n.tsx.nUsers({ n: `${list.userIds!.length}/${$i.policies['userEachUserListsLimit']}` }) }})</span></div>
-					<MkAvatars :userIds="list.userIds" :limit="10"/>
+					<MkAvatars :userIds="list.userIds!" :limit="10"/>
 				</MkA>
 			</div>
 		</div>
@@ -40,20 +40,20 @@ const $i = ensureSignin();
 
 const items = computed(() => userListsCache.value.value ?? []);
 
-function fetch() {
+function _fetch_() {
 	userListsCache.fetch();
 }
 
-fetch();
+_fetch_();
 
 async function create() {
 	const { canceled, result: name } = await os.inputText({
 		title: i18n.ts.enterListName,
 	});
-	if (canceled) return;
+	if (canceled || name == null) return;
 	await os.apiWithDialog('users/lists/create', { name: name });
 	userListsCache.delete();
-	fetch();
+	_fetch_();
 }
 
 const headerActions = computed(() => [{
@@ -62,7 +62,7 @@ const headerActions = computed(() => [{
 	text: i18n.ts.reload,
 	handler: () => {
 		userListsCache.delete();
-		fetch();
+		_fetch_();
 	},
 }]);
 
@@ -74,7 +74,7 @@ definePage(() => ({
 }));
 
 onActivated(() => {
-	fetch();
+	_fetch_();
 });
 </script>
 

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

@@ -24,7 +24,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 			<MkFolder defaultOpen>
 				<template #label>{{ i18n.ts.members }}</template>
-				<template #caption>{{ i18n.tsx.nUsers({ n: `${list.userIds.length}/${$i.policies['userEachUserListsLimit']}` }) }}</template>
+				<template #caption>{{ i18n.tsx.nUsers({ n: `${list.userIds!.length}/${$i.policies['userEachUserListsLimit']}` }) }}</template>
 
 				<div class="_gaps_s">
 					<MkButton rounded primary style="margin: 0 auto;" @click="addUser()">{{ i18n.ts.addUser }}</MkButton>

packages/frontend/src/pages/note.vue

@@ -126,7 +126,7 @@ function fetchNote() {
 		noteId: props.noteId,
 	}).then(res => {
 		note.value = res;
-		const appearNote = getAppearNote(res);
+		const appearNote = getAppearNote(res) ?? res;
 		// 古いノートは被クリップ数をカウントしていないので、2023-10-01以前のものは強制的にnotes/clipsを叩く
 		if ((appearNote.clippedCount ?? 0) > 0 || new Date(appearNote.createdAt).getTime() < new Date('2023-10-01').getTime()) {
 			misskeyApi('notes/clips', {

packages/frontend/src/pages/notifications.vue

@@ -31,7 +31,7 @@ import { Paginator } from '@/utility/paginator.js';
 
 const tab = ref('all');
 const includeTypes = ref<string[] | null>(null);
-const excludeTypes = computed(() => includeTypes.value ? notificationTypes.filter(t => !includeTypes.value.includes(t)) : null);
+const excludeTypes = computed(() => includeTypes.value ? notificationTypes.filter(t => !includeTypes.value!.includes(t)) : null);
 
 const mentionsPaginator = markRaw(new Paginator('notes/mentions', {
 	limit: 10,
@@ -71,7 +71,7 @@ const headerActions = computed(() => [tab.value === 'all' ? {
 	text: i18n.ts.markAllAsRead,
 	icon: 'ti ti-check',
 	handler: () => {
-		os.apiWithDialog('notifications/mark-all-as-read');
+		os.apiWithDialog('notifications/mark-all-as-read', {});
 	},
 } : undefined].filter(x => x !== undefined));
 

packages/frontend/src/pages/registry.value.vue

@@ -62,10 +62,10 @@ const props = defineProps<{
 }>();
 
 const scope = computed(() => props.path.split('/').slice(0, -1));
-const key = computed(() => props.path.split('/').at(-1));
+const key = computed(() => props.path.split('/').at(-1)!);
 
 const value = ref<any>(null);
-const valueForEditor = ref<string | null>(null);
+const valueForEditor = ref<string>('');
 
 function fetchValue() {
 	misskeyApi('i/registry/get-detail', {

packages/frontend/src/pages/registry.vue

@@ -9,7 +9,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<MkButton primary @click="createKey">{{ i18n.ts._registry.createKey }}</MkButton>
 
 		<div v-if="scopesWithDomain" class="_gaps_m">
-			<FormSection v-for="domain in scopesWithDomain" :key="domain.domain">
+			<FormSection v-for="domain in scopesWithDomain" :key="domain.domain ?? 'system'">
 				<template #label>{{ domain.domain ? domain.domain.toUpperCase() : i18n.ts.system }}</template>
 				<div class="_gaps_s">
 					<FormLink v-for="scope in domain.scopes" :to="`/registry/keys/${domain.domain ?? '@'}/${scope.join('/')}`" class="_monospace">{{ scope.length === 0 ? '(root)' : scope.join('/') }}</FormLink>

packages/frontend/src/pages/reset-password.vue

@@ -34,6 +34,7 @@ const props = defineProps<{
 const password = ref('');
 
 async function save() {
+	if (props.token == null) return;
 	await os.apiWithDialog('reset-password', {
 		token: props.token,
 		password: password.value,

packages/frontend/src/pages/settings/2fa.vue

@@ -25,7 +25,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 					<div v-if="$i.twoFactorEnabled" class="_gaps_s">
 						<div v-text="i18n.ts._2fa.alreadyRegistered"/>
-						<template v-if="$i.securityKeysList.length > 0">
+						<template v-if="$i.securityKeysList!.length > 0">
 							<MkButton @click="renewTOTP">{{ i18n.ts._2fa.renewTOTP }}</MkButton>
 							<MkInfo>{{ i18n.ts._2fa.whyTOTPOnlyRenew }}</MkInfo>
 						</template>
@@ -58,7 +58,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 						<template v-else>
 							<MkButton primary @click="addSecurityKey">{{ i18n.ts._2fa.registerSecurityKey }}</MkButton>
-							<MkFolder v-for="key in $i.securityKeysList" :key="key.id">
+							<MkFolder v-for="key in $i.securityKeysList!" :key="key.id">
 								<template #label>{{ key.name }}</template>
 								<template #suffix><I18n :src="i18n.ts.lastUsedAt"><template #t><MkTime :time="key.lastUsed"/></template></I18n></template>
 								<div class="_buttons">
@@ -72,7 +72,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</SearchMarker>
 
 			<SearchMarker :keywords="['password', 'less', 'key', 'passkey', 'login', 'signin']">
-				<MkSwitch :disabled="!$i.twoFactorEnabled || $i.securityKeysList.length === 0" :modelValue="usePasswordLessLogin" @update:modelValue="v => updatePasswordLessLogin(v)">
+				<MkSwitch :disabled="!$i.twoFactorEnabled || $i.securityKeysList!.length === 0" :modelValue="usePasswordLessLogin" @update:modelValue="v => updatePasswordLessLogin(v)">
 					<template #label><SearchLabel>{{ i18n.ts.passwordLessLogin }}</SearchLabel></template>
 					<template #caption><SearchText>{{ i18n.ts.passwordLessLoginDescription }}</SearchText></template>
 				</MkSwitch>

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

@@ -11,7 +11,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<!--<MkButton @click="refreshAllAccounts"><i class="ti ti-refresh"></i></MkButton>-->
 		</div>
 
-		<MkUserCardMini v-for="x in accounts" :key="x[0] + x[1].id" :user="x[1]" :class="$style.user" @click.prevent="menu(x[0], x[1], $event)"/>
+		<template v-for="x in accounts" :key="x.host + x.id">
+			<MkUserCardMini v-if="x.user" :user="x.user" :class="$style.user" @click.prevent="showMenu(x.host, x.id, $event)"/>
+		</template>
 	</div>
 </SearchMarker>
 </template>
@@ -24,29 +26,29 @@ import MkButton from '@/components/MkButton.vue';
 import * as os from '@/os.js';
 import { misskeyApi } from '@/utility/misskey-api.js';
 import { $i } from '@/i.js';
-import { switchAccount, removeAccount, login, getAccountWithSigninDialog, getAccountWithSignupDialog } from '@/accounts.js';
+import { switchAccount, removeAccount, login, getAccountWithSigninDialog, getAccountWithSignupDialog, getAccounts } from '@/accounts.js';
 import { i18n } from '@/i18n.js';
 import { definePage } from '@/page.js';
 import MkUserCardMini from '@/components/MkUserCardMini.vue';
 import { prefer } from '@/preferences.js';
 
-const accounts = prefer.r.accounts;
+const accounts = await getAccounts();
 
 function refreshAllAccounts() {
 	// TODO
 }
 
-function menu(host: string, account: Misskey.entities.UserDetailed, ev: MouseEvent) {
+function showMenu(host: string, id: string, ev: MouseEvent) {
 	let menu: MenuItem[];
 
 	menu = [{
 		text: i18n.ts.switch,
 		icon: 'ti ti-switch-horizontal',
-		action: () => switchAccount(host, account.id),
+		action: () => switchAccount(host, id),
 	}, {
 		text: i18n.ts.remove,
 		icon: 'ti ti-trash',
-		action: () => removeAccount(host, account.id),
+		action: () => removeAccount(host, id),
 	}];
 
 	os.popupMenu(menu, ev.currentTarget ?? ev.target);

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

@@ -16,7 +16,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					</template>
 					<template #label>{{ token.name }}</template>
 					<template #caption>{{ token.description }}</template>
-					<template #suffix><MkTime :time="token.lastUsedAt"/></template>
+					<template v-if="token.lastUsedAt != null" #suffix><MkTime :time="token.lastUsedAt"/></template>
 					<template #footer>
 						<MkButton danger @click="revoke(token)"><i class="ti ti-trash"></i> {{ i18n.ts.delete }}</MkButton>
 					</template>
@@ -28,7 +28,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 								<template #key>{{ i18n.ts.installedDate }}</template>
 								<template #value><MkTime :time="token.createdAt" :mode="'detail'"/></template>
 							</MkKeyValue>
-							<MkKeyValue oneline>
+							<MkKeyValue v-if="token.lastUsedAt != null" oneline>
 								<template #key>{{ i18n.ts.lastUsedDate }}</template>
 								<template #value><MkTime :time="token.lastUsedAt" :mode="'detail'"/></template>
 							</MkKeyValue>

packages/frontend/src/pages/settings/avatar-decoration.vue

@@ -17,13 +17,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<div :class="$style.decorations">
 					<XDecoration
 						v-for="(avatarDecoration, i) in $i.avatarDecorations"
-						:decoration="avatarDecorations.find(d => d.id === avatarDecoration.id)"
+						:decoration="avatarDecorations.find(d => d.id === avatarDecoration.id) ?? { id: '', url: '', name: '?', roleIdsThatCanBeUsedThisDecoration: [] }"
 						:angle="avatarDecoration.angle"
 						:flipH="avatarDecoration.flipH"
 						:offsetX="avatarDecoration.offsetX"
 						:offsetY="avatarDecoration.offsetY"
 						:active="true"
-						@click="openDecoration(avatarDecoration, i)"
+						@click="openAttachedDecoration(i)"
 					/>
 				</div>
 
@@ -50,6 +50,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { ref, defineAsyncComponent, computed } from 'vue';
 import * as Misskey from 'misskey-js';
 import XDecoration from './avatar-decoration.decoration.vue';
+import XDialog from './avatar-decoration.dialog.vue';
 import MkButton from '@/components/MkButton.vue';
 import * as os from '@/os.js';
 import { misskeyApi } from '@/utility/misskey-api.js';
@@ -68,14 +69,24 @@ misskeyApi('get-avatar-decorations').then(_avatarDecorations => {
 	loading.value = false;
 });
 
-async function openDecoration(avatarDecoration, index?: number) {
+function openAttachedDecoration(index: number) {
-	const { dispose } = await os.popupAsyncWithDialog(import('./avatar-decoration.dialog.vue').then(x => x.default), {
+	openDecoration(avatarDecorations.value.find(d => d.id === $i.avatarDecorations[index].id) ?? { id: '', url: '', name: '?', roleIdsThatCanBeUsedThisDecoration: [] }, index);
+}
+
+async function openDecoration(avatarDecoration: {
+	id: string;
+	url: string;
+	name: string;
+	roleIdsThatCanBeUsedThisDecoration: string[];
+}, index?: number) {
+	const { dispose } = os.popup(XDialog, {
 		decoration: avatarDecoration,
-		usingIndex: index,
+		usingIndex: index ?? null,
 	}, {
 		'attach': async (payload) => {
 			const decoration = {
 				id: avatarDecoration.id,
+				url: avatarDecoration.url,
 				angle: payload.angle,
 				flipH: payload.flipH,
 				offsetX: payload.offsetX,
@@ -90,13 +101,14 @@ async function openDecoration(avatarDecoration, index?: number) {
 		'update': async (payload) => {
 			const decoration = {
 				id: avatarDecoration.id,
+				url: avatarDecoration.url,
 				angle: payload.angle,
 				flipH: payload.flipH,
 				offsetX: payload.offsetX,
 				offsetY: payload.offsetY,
 			};
 			const update = [...$i.avatarDecorations];
-			update[index] = decoration;
+			update[index!] = decoration;
 			await os.apiWithDialog('i/update', {
 				avatarDecorations: update,
 			});
@@ -104,7 +116,7 @@ async function openDecoration(avatarDecoration, index?: number) {
 		},
 		'detach': async () => {
 			const update = [...$i.avatarDecorations];
-			update.splice(index, 1);
+			update.splice(index!, 1);
 			await os.apiWithDialog('i/update', {
 				avatarDecorations: update,
 			});

packages/frontend/src/pages/settings/drive.WatermarkItem.vue

@@ -43,7 +43,7 @@ async function edit() {
 	const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkWatermarkEditorDialog.vue')), {
 		preset: deepClone(props.preset),
 	}, {
-		ok: (preset: WatermarkPreset) => {
+		ok: (preset) => {
 			emit('updatePreset', preset);
 		},
 		closed: () => dispose(),

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

@@ -74,7 +74,7 @@ import { instance } from '@/instance.js';
 
 const $i = ensureSignin();
 
-const emailAddress = ref($i.email);
+const emailAddress = ref($i.email ?? '');
 
 const onChangeReceiveAnnouncementEmail = (v) => {
 	misskeyApi('i/update', {

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

@@ -188,6 +188,8 @@ const menuDef = computed<SuperMenuDef[]>(() => [{
 }]);
 
 onMounted(() => {
+	if (el.value == null) return; // TSを黙らすため
+
 	ro.observe(el.value);
 
 	narrow.value = el.value.offsetWidth < NARROW_THRESHOLD;
@@ -198,6 +200,8 @@ onMounted(() => {
 });
 
 onActivated(() => {
+	if (el.value == null) return; // TSを黙らすため
+
 	narrow.value = el.value.offsetWidth < NARROW_THRESHOLD;
 
 	if (!narrow.value && currentPage.value?.route.name == null) {
@@ -215,7 +219,7 @@ watch(router.currentRef, (to) => {
 	}
 });
 
-const emailNotConfigured = computed(() => instance.enableEmail && ($i.email == null || !$i.emailVerified));
+const emailNotConfigured = computed(() => $i && instance.enableEmail && ($i.email == null || !$i.emailVerified));
 
 provideMetadataReceiver((metadataGetter) => {
 	const info = metadataGetter();

packages/frontend/src/pages/settings/mute-block.vue

@@ -159,8 +159,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 									</div>
 									<div v-if="expandedBlockItems.includes(item.id)" :class="$style.userItemSub">
 										<div>Blocked at: <MkTime :time="item.createdAt" mode="detail"/></div>
-										<div v-if="item.expiresAt">Period: {{ new Date(item.expiresAt).toLocaleString() }}</div>
-										<div v-else>Period: {{ i18n.ts.indefinitely }}</div>
 									</div>
 								</div>
 							</div>

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

@@ -43,9 +43,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</FormSection>
 		<FormSection>
 			<div class="_gaps_s">
-				<FormLink @click="readAllNotifications">{{ i18n.ts.markAsReadAllNotifications }}</FormLink>
+				<MkButton @click="readAllNotifications">{{ i18n.ts.markAsReadAllNotifications }}</MkButton>
-				<FormLink @click="testNotification">{{ i18n.ts._notification.sendTestNotification }}</FormLink>
+				<MkButton @click="testNotification">{{ i18n.ts._notification.sendTestNotification }}</MkButton>
-				<FormLink @click="flushNotification">{{ i18n.ts._notification.flushNotification }}</FormLink>
+				<MkButton @click="flushNotification">{{ i18n.ts._notification.flushNotification }}</MkButton>
 			</div>
 		</FormSection>
 		<FormSection>
@@ -76,6 +76,7 @@ import FormLink from '@/components/form/link.vue';
 import FormSection from '@/components/form/section.vue';
 import MkFolder from '@/components/MkFolder.vue';
 import MkSwitch from '@/components/MkSwitch.vue';
+import MkButton from '@/components/MkButton.vue';
 import * as os from '@/os.js';
 import { ensureSignin } from '@/i.js';
 import { misskeyApi } from '@/utility/misskey-api.js';
@@ -96,7 +97,7 @@ const sendReadMessage = computed(() => pushRegistrationInServer.value?.sendReadM
 const userLists = await misskeyApi('users/lists/list');
 
 async function readAllNotifications() {
-	await os.apiWithDialog('notifications/mark-all-as-read');
+	await os.apiWithDialog('notifications/mark-all-as-read', {});
 }
 
 async function updateReceiveConfig(type: typeof notificationTypes[number], value: NotificationConfig) {
@@ -134,7 +135,7 @@ async function flushNotification() {
 
 	if (canceled) return;
 
-	os.apiWithDialog('notifications/flush');
+	os.apiWithDialog('notifications/flush', {});
 }
 
 const headerActions = computed(() => []);

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

@@ -1031,7 +1031,6 @@ function testNotification(): void {
 	const notification: Misskey.entities.Notification = {
 		id: genId(),
 		createdAt: new Date().toUTCString(),
-		isRead: false,
 		type: 'test',
 	};