diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index f824432e29..7a1fdee31d 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -48,8 +48,8 @@ Thank you for your PR! Before creating a PR, please check the following:
 - If there is an Issue which will be resolved by this PR, please include a reference to the Issue in the text. Good examples include `Closing: #21` or `Resolves: #21`
 - Check if there are any documents that need to be created or updated due to this change.
 - If you have added a feature or fixed a bug, please add a test case if possible.
-- Please make sure that tests and Lint are passed in advance.
-  - You can run it with `pnpm run test` and `pnpm run lint`. [See more info](#testing)
+- Please make sure that formatting, tests and Lint are passed in advance.
+  - You can run it with `pnpm run format`, `pnpm run test` and `pnpm run lint`. [See more info](#testing)
 - If this PR includes UI changes, please attach a screenshot in the text.
 
 Thanks for your cooperation 🤗
diff --git a/package.json b/package.json
index e990a5851e..3a324fa0b5 100644
--- a/package.json
+++ b/package.json
@@ -27,7 +27,7 @@
 		"e2e": "start-server-and-test start:test http://localhost:61812 cy:run",
 		"mocha": "pnpm --filter backend run mocha",
 		"test": "pnpm run mocha",
-		"format": "gulp format",
+		"format": "pnpm rome format packages/**/* --write && pnpm --filter client run format",
 		"clean": "pnpm node ./scripts/clean.js",
 		"clean-all": "pnpm node ./scripts/clean-all.js",
 		"cleanall": "pnpm run clean-all"
diff --git a/packages/client/.prettierrc b/packages/client/.prettierrc
new file mode 100644
index 0000000000..77a5016a4d
--- /dev/null
+++ b/packages/client/.prettierrc
@@ -0,0 +1,15 @@
+{
+  "tabWidth": 4,
+  "useTabs": true,
+	"singleQuote": false,
+	"vueIndentScriptAndStyle": false,
+	"plugins": ["vue"],
+	"overrides": [
+		{
+			"files": "*.vue",
+			"options": {
+				"parser": "vue"
+			}
+		}
+	]
+}
diff --git a/packages/client/package.json b/packages/client/package.json
index b1da8e0a01..24af5b1431 100644
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -4,7 +4,8 @@
 	"scripts": {
 		"watch": "pnpm vite build --watch --mode development",
 		"build": "pnpm vite build",
-		"lint": "pnpm rome check \"src/**/*.{ts,vue}\""
+		"lint": "pnpm rome check \"src/**/*.{ts,vue}\"",
+		"format": "pnpm prettier --write '**/*.vue'"
 	},
 	"devDependencies": {
 		"@discordapp/twemoji": "14.0.2",
@@ -54,6 +55,8 @@
 		"matter-js": "0.18.0",
 		"mfm-js": "0.23.2",
 		"photoswipe": "5.3.4",
+		"prettier": "2.8.7",
+		"prettier-plugin-vue": "1.1.6",
 		"prismjs": "1.29.0",
 		"punycode": "2.1.1",
 		"querystring": "0.2.1",
diff --git a/packages/client/src/components/MkAbuseReport.vue b/packages/client/src/components/MkAbuseReport.vue
index 9a3464b640..ccb85d7222 100644
--- a/packages/client/src/components/MkAbuseReport.vue
+++ b/packages/client/src/components/MkAbuseReport.vue
@@ -1,64 +1,93 @@
 <template>
-<div class="bcekxzvu _gap _panel">
-	<div class="target">
-		<MkA v-user-preview="report.targetUserId" class="info" :to="`/user-info/${report.targetUserId}`">
-			<MkAvatar class="avatar" :user="report.targetUser" :show-indicator="true" :disable-link="true"/>
-			<div class="names">
-				<MkUserName class="name" :user="report.targetUser"/>
-				<MkAcct class="acct" :user="report.targetUser" style="display: block;"/>
+	<div class="bcekxzvu _gap _panel">
+		<div class="target">
+			<MkA
+				v-user-preview="report.targetUserId"
+				class="info"
+				:to="`/user-info/${report.targetUserId}`"
+			>
+				<MkAvatar
+					class="avatar"
+					:user="report.targetUser"
+					:show-indicator="true"
+					:disable-link="true"
+				/>
+				<div class="names">
+					<MkUserName class="name" :user="report.targetUser" />
+					<MkAcct
+						class="acct"
+						:user="report.targetUser"
+						style="display: block"
+					/>
+				</div>
+			</MkA>
+			<MkKeyValue class="_formBlock">
+				<template #key>{{ i18n.ts.registeredDate }}</template>
+				<template #value
+					>{{
+						new Date(report.targetUser.createdAt).toLocaleString()
+					}}
+					(<MkTime :time="report.targetUser.createdAt" />)</template
+				>
+			</MkKeyValue>
+		</div>
+		<div class="detail">
+			<div>
+				<Mfm :text="report.comment" />
+			</div>
+			<hr />
+			<div>
+				{{ i18n.ts.reporter }}: <MkAcct :user="report.reporter" />
+			</div>
+			<div v-if="report.assignee">
+				{{ i18n.ts.moderator }}:
+				<MkAcct :user="report.assignee" />
+			</div>
+			<div><MkTime :time="report.createdAt" /></div>
+			<div class="action">
+				<MkSwitch
+					v-model="forward"
+					:disabled="
+						report.targetUser.host == null || report.resolved
+					"
+				>
+					{{ i18n.ts.forwardReport }}
+					<template #caption>{{
+						i18n.ts.forwardReportIsAnonymous
+					}}</template>
+				</MkSwitch>
+				<MkButton v-if="!report.resolved" primary @click="resolve">{{
+					i18n.ts.abuseMarkAsResolved
+				}}</MkButton>
 			</div>
-		</MkA>
-		<MkKeyValue class="_formBlock">
-			<template #key>{{ i18n.ts.registeredDate }}</template>
-			<template #value>{{ new Date(report.targetUser.createdAt).toLocaleString() }} (<MkTime :time="report.targetUser.createdAt"/>)</template>
-		</MkKeyValue>
-	</div>
-	<div class="detail">
-		<div>
-			<Mfm :text="report.comment"/>
-		</div>
-		<hr/>
-		<div>{{ i18n.ts.reporter }}: <MkAcct :user="report.reporter"/></div>
-		<div v-if="report.assignee">
-			{{ i18n.ts.moderator }}:
-			<MkAcct :user="report.assignee"/>
-		</div>
-		<div><MkTime :time="report.createdAt"/></div>
-		<div class="action">
-			<MkSwitch v-model="forward" :disabled="report.targetUser.host == null || report.resolved">
-				{{ i18n.ts.forwardReport }}
-				<template #caption>{{ i18n.ts.forwardReportIsAnonymous }}</template>
-			</MkSwitch>
-			<MkButton v-if="!report.resolved" primary @click="resolve">{{ i18n.ts.abuseMarkAsResolved }}</MkButton>
 		</div>
 	</div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import MkButton from '@/components/MkButton.vue';
-import MkSwitch from '@/components/form/switch.vue';
-import MkKeyValue from '@/components/MkKeyValue.vue';
-import { acct, userPage } from '@/filters/user';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
+import MkButton from "@/components/MkButton.vue";
+import MkSwitch from "@/components/form/switch.vue";
+import MkKeyValue from "@/components/MkKeyValue.vue";
+import { acct, userPage } from "@/filters/user";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
 
 const props = defineProps<{
 	report: any;
 }>();
 
 const emit = defineEmits<{
-	(ev: 'resolved', reportId: string): void;
+	(ev: "resolved", reportId: string): void;
 }>();
 
 let forward = $ref(props.report.forwarded);
 
 function resolve() {
-	os.apiWithDialog('admin/resolve-abuse-user-report', {
+	os.apiWithDialog("admin/resolve-abuse-user-report", {
 		forward: forward,
 		reportId: props.report.id,
 	}).then(() => {
-		emit('resolved', props.report.id);
+		emit("resolved", props.report.id);
 	});
 }
 </script>
@@ -81,7 +110,16 @@ function resolve() {
 			padding: 14px;
 			border-radius: 8px;
 			--c: rgb(255 196 0 / 15%);
-			background-image: linear-gradient(45deg, var(--c) 16.67%, transparent 16.67%, transparent 50%, var(--c) 50%, var(--c) 66.67%, transparent 66.67%, transparent 100%);
+			background-image: linear-gradient(
+				45deg,
+				var(--c) 16.67%,
+				transparent 16.67%,
+				transparent 50%,
+				var(--c) 50%,
+				var(--c) 66.67%,
+				transparent 66.67%,
+				transparent 100%
+			);
 			background-size: 16px 16px;
 
 			> .avatar {
diff --git a/packages/client/src/components/MkAbuseReportWindow.vue b/packages/client/src/components/MkAbuseReportWindow.vue
index f1b3ae4312..19b8ba5264 100644
--- a/packages/client/src/components/MkAbuseReportWindow.vue
+++ b/packages/client/src/components/MkAbuseReportWindow.vue
@@ -1,35 +1,52 @@
 <template>
-<XWindow ref="uiWindow" :initial-width="400" :initial-height="500" :can-resize="true" @closed="emit('closed')">
-	<template #header>
-		<i class="ph-warning-circle ph-bold ph-lg" style="margin-right: 0.5em;"></i>
-		<I18n :src="i18n.ts.reportAbuseOf" tag="span">
-			<template #name>
-				<b><MkAcct :user="user"/></b>
-			</template>
-		</I18n>
-	</template>
-	<div class="dpvffvvy _monolithic_">
-		<div class="_section">
-			<MkTextarea v-model="comment">
-				<template #label>{{ i18n.ts.details }}</template>
-				<template #caption>{{ i18n.ts.fillAbuseReportDescription }}</template>
-			</MkTextarea>
+	<XWindow
+		ref="uiWindow"
+		:initial-width="400"
+		:initial-height="500"
+		:can-resize="true"
+		@closed="emit('closed')"
+	>
+		<template #header>
+			<i
+				class="ph-warning-circle ph-bold ph-lg"
+				style="margin-right: 0.5em"
+			></i>
+			<I18n :src="i18n.ts.reportAbuseOf" tag="span">
+				<template #name>
+					<b><MkAcct :user="user" /></b>
+				</template>
+			</I18n>
+		</template>
+		<div class="dpvffvvy _monolithic_">
+			<div class="_section">
+				<MkTextarea v-model="comment">
+					<template #label>{{ i18n.ts.details }}</template>
+					<template #caption>{{
+						i18n.ts.fillAbuseReportDescription
+					}}</template>
+				</MkTextarea>
+			</div>
+			<div class="_section">
+				<MkButton
+					primary
+					full
+					:disabled="comment.length === 0"
+					@click="send"
+					>{{ i18n.ts.send }}</MkButton
+				>
+			</div>
 		</div>
-		<div class="_section">
-			<MkButton primary full :disabled="comment.length === 0" @click="send">{{ i18n.ts.send }}</MkButton>
-		</div>
-	</div>
-</XWindow>
+	</XWindow>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
-import * as Misskey from 'calckey-js';
-import XWindow from '@/components/MkWindow.vue';
-import MkTextarea from '@/components/form/textarea.vue';
-import MkButton from '@/components/MkButton.vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
+import { ref } from "vue";
+import * as Misskey from "calckey-js";
+import XWindow from "@/components/MkWindow.vue";
+import MkTextarea from "@/components/form/textarea.vue";
+import MkButton from "@/components/MkButton.vue";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
 
 const props = defineProps<{
 	user: Misskey.entities.User;
@@ -37,23 +54,27 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-	(ev: 'closed'): void;
+	(ev: "closed"): void;
 }>();
 
 const uiWindow = ref<InstanceType<typeof XWindow>>();
-const comment = ref(props.initialComment || '');
+const comment = ref(props.initialComment || "");
 
 function send() {
-	os.apiWithDialog('users/report-abuse', {
-		userId: props.user.id,
-		comment: comment.value,
-	}, undefined).then(res => {
+	os.apiWithDialog(
+		"users/report-abuse",
+		{
+			userId: props.user.id,
+			comment: comment.value,
+		},
+		undefined
+	).then((res) => {
 		os.alert({
-			type: 'success',
-			text: i18n.ts.abuseReported
+			type: "success",
+			text: i18n.ts.abuseReported,
 		});
 		uiWindow.value?.close();
-		emit('closed');
+		emit("closed");
 	});
 }
 </script>
diff --git a/packages/client/src/components/MkAnalogClock.vue b/packages/client/src/components/MkAnalogClock.vue
index 40ef626aed..43d81f2a96 100644
--- a/packages/client/src/components/MkAnalogClock.vue
+++ b/packages/client/src/components/MkAnalogClock.vue
@@ -1,32 +1,62 @@
 <template>
-<svg class="mbcofsoe" viewBox="0 0 10 10" preserveAspectRatio="none">
-	<template v-if="props.graduations === 'dots'">
-		<circle
-			v-for="(angle, i) in graduationsMajor"
-			:cx="5 + (Math.sin(angle) * (5 - graduationsPadding))"
-			:cy="5 - (Math.cos(angle) * (5 - graduationsPadding))"
-			:r="0.125"
-			:fill="(props.twentyfour ? h : h % 12) === i ? nowColor : majorGraduationColor"
-			:opacity="!props.fadeGraduations || (props.twentyfour ? h : h % 12) === i ? 1 : Math.max(0, 1 - (angleDiff(hAngle, angle) / Math.PI) - numbersOpacityFactor)"
-		/>
-	</template>
-	<template v-else-if="props.graduations === 'numbers'">
-		<text
-			v-for="(angle, i) in texts"
-			:x="5 + (Math.sin(angle) * (5 - textsPadding))"
-			:y="5 - (Math.cos(angle) * (5 - textsPadding))"
-			text-anchor="middle"
-			dominant-baseline="middle"
-			:font-size="(props.twentyfour ? h : h % 12) === i ? 1 : 0.7"
-			:font-weight="(props.twentyfour ? h : h % 12) === i ? 'bold' : 'normal'"
-			:fill="(props.twentyfour ? h : h % 12) === i ? nowColor : 'currentColor'"
-			:opacity="!props.fadeGraduations || (props.twentyfour ? h : h % 12) === i ? 1 : Math.max(0, 1 - (angleDiff(hAngle, angle) / Math.PI) - numbersOpacityFactor)"
-		>
-			{{ i === 0 ? (props.twentyfour ? '24' : '12') : i }}
-		</text>
-	</template>
+	<svg class="mbcofsoe" viewBox="0 0 10 10" preserveAspectRatio="none">
+		<template v-if="props.graduations === 'dots'">
+			<circle
+				v-for="(angle, i) in graduationsMajor"
+				:cx="5 + Math.sin(angle) * (5 - graduationsPadding)"
+				:cy="5 - Math.cos(angle) * (5 - graduationsPadding)"
+				:r="0.125"
+				:fill="
+					(props.twentyfour ? h : h % 12) === i
+						? nowColor
+						: majorGraduationColor
+				"
+				:opacity="
+					!props.fadeGraduations ||
+					(props.twentyfour ? h : h % 12) === i
+						? 1
+						: Math.max(
+								0,
+								1 -
+									angleDiff(hAngle, angle) / Math.PI -
+									numbersOpacityFactor
+						  )
+				"
+			/>
+		</template>
+		<template v-else-if="props.graduations === 'numbers'">
+			<text
+				v-for="(angle, i) in texts"
+				:x="5 + Math.sin(angle) * (5 - textsPadding)"
+				:y="5 - Math.cos(angle) * (5 - textsPadding)"
+				text-anchor="middle"
+				dominant-baseline="middle"
+				:font-size="(props.twentyfour ? h : h % 12) === i ? 1 : 0.7"
+				:font-weight="
+					(props.twentyfour ? h : h % 12) === i ? 'bold' : 'normal'
+				"
+				:fill="
+					(props.twentyfour ? h : h % 12) === i
+						? nowColor
+						: 'currentColor'
+				"
+				:opacity="
+					!props.fadeGraduations ||
+					(props.twentyfour ? h : h % 12) === i
+						? 1
+						: Math.max(
+								0,
+								1 -
+									angleDiff(hAngle, angle) / Math.PI -
+									numbersOpacityFactor
+						  )
+				"
+			>
+				{{ i === 0 ? (props.twentyfour ? "24" : "12") : i }}
+			</text>
+		</template>
 
-	<!--
+		<!--
 	<line
 		:x1="5 - (Math.sin(sAngle) * (sHandLengthRatio * handsTailLength))"
 		:y1="5 + (Math.cos(sAngle) * (sHandLengthRatio * handsTailLength))"
@@ -38,50 +68,61 @@
 	/>
 	-->
 
-	<line
-		class="s"
-		:class="{ animate: !disableSAnimate && sAnimation !== 'none', elastic: sAnimation === 'elastic', easeOut: sAnimation === 'easeOut' }"
-		:x1="5 - (0 * (sHandLengthRatio * handsTailLength))"
-		:y1="5 + (1 * (sHandLengthRatio * handsTailLength))"
-		:x2="5 + (0 * ((sHandLengthRatio * 5) - handsPadding))"
-		:y2="5 - (1 * ((sHandLengthRatio * 5) - handsPadding))"
-		:stroke="sHandColor"
-		:stroke-width="thickness / 2"
-		:style="`transform: rotateZ(${sAngle}rad)`"
-		stroke-linecap="round"
-	/>
+		<line
+			class="s"
+			:class="{
+				animate: !disableSAnimate && sAnimation !== 'none',
+				elastic: sAnimation === 'elastic',
+				easeOut: sAnimation === 'easeOut',
+			}"
+			:x1="5 - 0 * (sHandLengthRatio * handsTailLength)"
+			:y1="5 + 1 * (sHandLengthRatio * handsTailLength)"
+			:x2="5 + 0 * (sHandLengthRatio * 5 - handsPadding)"
+			:y2="5 - 1 * (sHandLengthRatio * 5 - handsPadding)"
+			:stroke="sHandColor"
+			:stroke-width="thickness / 2"
+			:style="`transform: rotateZ(${sAngle}rad)`"
+			stroke-linecap="round"
+		/>
 
-	<line
-		:x1="5 - (Math.sin(mAngle) * (mHandLengthRatio * handsTailLength))"
-		:y1="5 + (Math.cos(mAngle) * (mHandLengthRatio * handsTailLength))"
-		:x2="5 + (Math.sin(mAngle) * ((mHandLengthRatio * 5) - handsPadding))"
-		:y2="5 - (Math.cos(mAngle) * ((mHandLengthRatio * 5) - handsPadding))"
-		:stroke="mHandColor"
-		:stroke-width="thickness"
-		stroke-linecap="round"
-	/>
+		<line
+			:x1="5 - Math.sin(mAngle) * (mHandLengthRatio * handsTailLength)"
+			:y1="5 + Math.cos(mAngle) * (mHandLengthRatio * handsTailLength)"
+			:x2="5 + Math.sin(mAngle) * (mHandLengthRatio * 5 - handsPadding)"
+			:y2="5 - Math.cos(mAngle) * (mHandLengthRatio * 5 - handsPadding)"
+			:stroke="mHandColor"
+			:stroke-width="thickness"
+			stroke-linecap="round"
+		/>
 
-	<line
-		:x1="5 - (Math.sin(hAngle) * (hHandLengthRatio * handsTailLength))"
-		:y1="5 + (Math.cos(hAngle) * (hHandLengthRatio * handsTailLength))"
-		:x2="5 + (Math.sin(hAngle) * ((hHandLengthRatio * 5) - handsPadding))"
-		:y2="5 - (Math.cos(hAngle) * ((hHandLengthRatio * 5) - handsPadding))"
-		:stroke="hHandColor"
-		:stroke-width="thickness"
-		stroke-linecap="round"
-	/>
-</svg>
+		<line
+			:x1="5 - Math.sin(hAngle) * (hHandLengthRatio * handsTailLength)"
+			:y1="5 + Math.cos(hAngle) * (hHandLengthRatio * handsTailLength)"
+			:x2="5 + Math.sin(hAngle) * (hHandLengthRatio * 5 - handsPadding)"
+			:y2="5 - Math.cos(hAngle) * (hHandLengthRatio * 5 - handsPadding)"
+			:stroke="hHandColor"
+			:stroke-width="thickness"
+			stroke-linecap="round"
+		/>
+	</svg>
 </template>
 
 <script lang="ts" setup>
-import { ref, computed, onMounted, onBeforeUnmount, shallowRef, nextTick } from 'vue';
-import tinycolor from 'tinycolor2';
-import { globalEvents } from '@/events.js';
+import {
+	ref,
+	computed,
+	onMounted,
+	onBeforeUnmount,
+	shallowRef,
+	nextTick,
+} from "vue";
+import tinycolor from "tinycolor2";
+import { globalEvents } from "@/events.js";
 
 // https://stackoverflow.com/questions/1878907/how-can-i-find-the-difference-between-two-angles
 const angleDiff = (a: number, b: number) => {
 	const x = Math.abs(a - b);
-	return Math.abs((x + Math.PI) % (Math.PI * 2) - Math.PI);
+	return Math.abs(((x + Math.PI) % (Math.PI * 2)) - Math.PI);
 };
 
 const graduationsPadding = 0.5;
@@ -93,28 +134,31 @@ const mHandLengthRatio = 1;
 const sHandLengthRatio = 1;
 const numbersOpacityFactor = 0.35;
 
-const props = withDefaults(defineProps<{
-	thickness?: number;
-	offset?: number;
-	twentyfour?: boolean;
-	graduations?: 'none' | 'dots' | 'numbers';
-	fadeGraduations?: boolean;
-	sAnimation?: 'none' | 'elastic' | 'easeOut';
-}>(), {
-	numbers: false,
-	thickness: 0.1,
-	offset: 0 - new Date().getTimezoneOffset(),
-	twentyfour: false,
-	graduations: 'dots',
-	fadeGraduations: true,
-	sAnimation: 'elastic',
-});
+const props = withDefaults(
+	defineProps<{
+		thickness?: number;
+		offset?: number;
+		twentyfour?: boolean;
+		graduations?: "none" | "dots" | "numbers";
+		fadeGraduations?: boolean;
+		sAnimation?: "none" | "elastic" | "easeOut";
+	}>(),
+	{
+		numbers: false,
+		thickness: 0.1,
+		offset: 0 - new Date().getTimezoneOffset(),
+		twentyfour: false,
+		graduations: "dots",
+		fadeGraduations: true,
+		sAnimation: "elastic",
+	}
+);
 
 const graduationsMajor = computed(() => {
 	const angles: number[] = [];
 	const times = props.twentyfour ? 24 : 12;
 	for (let i = 0; i < times; i++) {
-		const angle = Math.PI * i / (times / 2);
+		const angle = (Math.PI * i) / (times / 2);
 		angles.push(angle);
 	}
 	return angles;
@@ -123,7 +167,7 @@ const texts = computed(() => {
 	const angles: number[] = [];
 	const times = props.twentyfour ? 24 : 12;
 	for (let i = 0; i < times; i++) {
-		const angle = Math.PI * i / (times / 2);
+		const angle = (Math.PI * i) / (times / 2);
 		angles.push(angle);
 	}
 	return angles;
@@ -147,14 +191,19 @@ let sOneRound = false;
 
 function tick() {
 	const now = new Date();
-	now.setMinutes(now.getMinutes() + (new Date().getTimezoneOffset() + props.offset));
+	now.setMinutes(
+		now.getMinutes() + (new Date().getTimezoneOffset() + props.offset)
+	);
 	s = now.getSeconds();
 	m = now.getMinutes();
 	h = now.getHours();
-	hAngle = Math.PI * (h % (props.twentyfour ? 24 : 12) + (m + s / 60) / 60) / (props.twentyfour ? 12 : 6);
-	mAngle = Math.PI * (m + s / 60) / 30;
-	if (sOneRound) { // 秒針が一周した際のアニメーションをよしなに処理する(これが無いと秒が59->0になったときに期待したアニメーションにならない)
-		sAngle = Math.PI * 60 / 30;
+	hAngle =
+		(Math.PI * ((h % (props.twentyfour ? 24 : 12)) + (m + s / 60) / 60)) /
+		(props.twentyfour ? 12 : 6);
+	mAngle = (Math.PI * (m + s / 60)) / 30;
+	if (sOneRound) {
+		// 秒針が一周した際のアニメーションをよしなに処理する(これが無いと秒が59->0になったときに期待したアニメーションにならない)
+		sAngle = (Math.PI * 60) / 30;
 		window.setTimeout(() => {
 			disableSAnimate = true;
 			window.setTimeout(() => {
@@ -165,7 +214,7 @@ function tick() {
 			}, 100);
 		}, 700);
 	} else {
-		sAngle = Math.PI * s / 30;
+		sAngle = (Math.PI * s) / 30;
 	}
 	sOneRound = s === 59;
 }
@@ -174,12 +223,18 @@ tick();
 
 function calcColors() {
 	const computedStyle = getComputedStyle(document.documentElement);
-	const dark = tinycolor(computedStyle.getPropertyValue('--bg')).isDark();
-	const accent = tinycolor(computedStyle.getPropertyValue('--accent')).toHexString();
-	majorGraduationColor = dark ? 'rgba(255, 255, 255, 0.3)' : 'rgba(0, 0, 0, 0.3)';
+	const dark = tinycolor(computedStyle.getPropertyValue("--bg")).isDark();
+	const accent = tinycolor(
+		computedStyle.getPropertyValue("--accent")
+	).toHexString();
+	majorGraduationColor = dark
+		? "rgba(255, 255, 255, 0.3)"
+		: "rgba(0, 0, 0, 0.3)";
 	//minorGraduationColor = dark ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)';
-	sHandColor = dark ? 'rgba(255, 255, 255, 0.5)' : 'rgba(0, 0, 0, 0.3)';
-	mHandColor = tinycolor(computedStyle.getPropertyValue('--fg')).toHexString();
+	sHandColor = dark ? "rgba(255, 255, 255, 0.5)" : "rgba(0, 0, 0, 0.3)";
+	mHandColor = tinycolor(
+		computedStyle.getPropertyValue("--fg")
+	).toHexString();
 	hHandColor = accent;
 	nowColor = accent;
 }
@@ -195,13 +250,13 @@ onMounted(() => {
 	};
 	update();
 
-	globalEvents.on('themeChanged', calcColors);
+	globalEvents.on("themeChanged", calcColors);
 });
 
 onBeforeUnmount(() => {
 	enabled = false;
 
-	globalEvents.off('themeChanged', calcColors);
+	globalEvents.off("themeChanged", calcColors);
 });
 </script>
 
@@ -214,11 +269,11 @@ onBeforeUnmount(() => {
 		transform-origin: 50% 50%;
 
 		&.animate.elastic {
-			transition: transform .2s cubic-bezier(.4,2.08,.55,.44);
+			transition: transform 0.2s cubic-bezier(0.4, 2.08, 0.55, 0.44);
 		}
 
 		&.animate.easeOut {
-			transition: transform .7s cubic-bezier(0,.7,.3,1);
+			transition: transform 0.7s cubic-bezier(0, 0.7, 0.3, 1);
 		}
 	}
 }
diff --git a/packages/client/src/components/MkAutocomplete.vue b/packages/client/src/components/MkAutocomplete.vue
index ae708026e0..0455bd9d54 100644
--- a/packages/client/src/components/MkAutocomplete.vue
+++ b/packages/client/src/components/MkAutocomplete.vue
@@ -1,49 +1,107 @@
 <template>
-<div ref="rootEl" class="swhvrteh _popup _shadow" :style="{ zIndex }" @contextmenu.prevent="() => {}">
-	<ol v-if="type === 'user'" ref="suggests" class="users">
-		<li v-for="user in users" tabindex="-1" class="user" @click="complete(type, user)" @keydown="onKeydown">
-			<img class="avatar" :src="user.avatarUrl"/>
-			<span class="name">
-				<MkUserName :key="user.id" :user="user"/>
-			</span>
-			<span class="username">@{{ acct(user) }}</span>
-		</li>
-		<li tabindex="-1" class="choose" @click="chooseUser()" @keydown="onKeydown">{{ i18n.ts.selectUser }}</li>
-	</ol>
-	<ol v-else-if="hashtags.length > 0" ref="suggests" class="hashtags">
-		<li v-for="hashtag in hashtags" tabindex="-1" @click="complete(type, hashtag)" @keydown="onKeydown">
-			<span class="name">{{ hashtag }}</span>
-		</li>
-	</ol>
-	<ol v-else-if="emojis.length > 0" ref="suggests" class="emojis">
-		<li v-for="emoji in emojis" tabindex="-1" @click="complete(type, emoji.emoji)" @keydown="onKeydown">
-			<span v-if="emoji.isCustomEmoji" class="emoji"><img :src="defaultStore.state.disableShowingAnimatedImages ? getStaticImageUrl(emoji.url) : emoji.url" :alt="emoji.emoji"/></span>
-			<span v-else-if="!defaultStore.state.useOsNativeEmojis" class="emoji"><img :src="emoji.url" :alt="emoji.emoji"/></span>
-			<span v-else class="emoji">{{ emoji.emoji }}</span>
-			<span class="name" v-html="emoji.name.replace(q, `<b>${q}</b>`)"></span>
-			<span v-if="emoji.aliasOf" class="alias">({{ emoji.aliasOf }})</span>
-		</li>
-	</ol>
-	<ol v-else-if="mfmTags.length > 0" ref="suggests" class="mfmTags">
-		<li v-for="tag in mfmTags" tabindex="-1" @click="complete(type, tag)" @keydown="onKeydown">
-			<span class="tag">{{ tag }}</span>
-		</li>
-	</ol>
-</div>
+	<div
+		ref="rootEl"
+		class="swhvrteh _popup _shadow"
+		:style="{ zIndex }"
+		@contextmenu.prevent="() => {}"
+	>
+		<ol v-if="type === 'user'" ref="suggests" class="users">
+			<li
+				v-for="user in users"
+				tabindex="-1"
+				class="user"
+				@click="complete(type, user)"
+				@keydown="onKeydown"
+			>
+				<img class="avatar" :src="user.avatarUrl" />
+				<span class="name">
+					<MkUserName :key="user.id" :user="user" />
+				</span>
+				<span class="username">@{{ acct(user) }}</span>
+			</li>
+			<li
+				tabindex="-1"
+				class="choose"
+				@click="chooseUser()"
+				@keydown="onKeydown"
+			>
+				{{ i18n.ts.selectUser }}
+			</li>
+		</ol>
+		<ol v-else-if="hashtags.length > 0" ref="suggests" class="hashtags">
+			<li
+				v-for="hashtag in hashtags"
+				tabindex="-1"
+				@click="complete(type, hashtag)"
+				@keydown="onKeydown"
+			>
+				<span class="name">{{ hashtag }}</span>
+			</li>
+		</ol>
+		<ol v-else-if="emojis.length > 0" ref="suggests" class="emojis">
+			<li
+				v-for="emoji in emojis"
+				tabindex="-1"
+				@click="complete(type, emoji.emoji)"
+				@keydown="onKeydown"
+			>
+				<span v-if="emoji.isCustomEmoji" class="emoji"
+					><img
+						:src="
+							defaultStore.state.disableShowingAnimatedImages
+								? getStaticImageUrl(emoji.url)
+								: emoji.url
+						"
+						:alt="emoji.emoji"
+				/></span>
+				<span
+					v-else-if="!defaultStore.state.useOsNativeEmojis"
+					class="emoji"
+					><img :src="emoji.url" :alt="emoji.emoji"
+				/></span>
+				<span v-else class="emoji">{{ emoji.emoji }}</span>
+				<span
+					class="name"
+					v-html="emoji.name.replace(q, `<b>${q}</b>`)"
+				></span>
+				<span v-if="emoji.aliasOf" class="alias"
+					>({{ emoji.aliasOf }})</span
+				>
+			</li>
+		</ol>
+		<ol v-else-if="mfmTags.length > 0" ref="suggests" class="mfmTags">
+			<li
+				v-for="tag in mfmTags"
+				tabindex="-1"
+				@click="complete(type, tag)"
+				@keydown="onKeydown"
+			>
+				<span class="tag">{{ tag }}</span>
+			</li>
+		</ol>
+	</div>
 </template>
 
 <script lang="ts">
-import { markRaw, ref, onUpdated, onMounted, onBeforeUnmount, nextTick, watch } from 'vue';
-import contains from '@/scripts/contains';
-import { char2filePath } from '@/scripts/twemoji-base';
-import { getStaticImageUrl } from '@/scripts/get-static-image-url';
-import { acct } from '@/filters/user';
-import * as os from '@/os';
-import { MFM_TAGS } from '@/scripts/mfm-tags';
-import { defaultStore } from '@/store';
-import { emojilist } from '@/scripts/emojilist';
-import { instance } from '@/instance';
-import { i18n } from '@/i18n';
+import {
+	markRaw,
+	ref,
+	onUpdated,
+	onMounted,
+	onBeforeUnmount,
+	nextTick,
+	watch,
+} from "vue";
+import contains from "@/scripts/contains";
+import { char2filePath } from "@/scripts/twemoji-base";
+import { getStaticImageUrl } from "@/scripts/get-static-image-url";
+import { acct } from "@/filters/user";
+import * as os from "@/os";
+import { MFM_TAGS } from "@/scripts/mfm-tags";
+import { defaultStore } from "@/store";
+import { emojilist } from "@/scripts/emojilist";
+import { instance } from "@/instance";
+import { i18n } from "@/i18n";
 
 type EmojiDef = {
 	emoji: string;
@@ -53,9 +111,9 @@ type EmojiDef = {
 	isCustomEmoji?: boolean;
 };
 
-const lib = emojilist.filter(x => x.category !== 'flags');
+const lib = emojilist.filter((x) => x.category !== "flags");
 
-const emjdb: EmojiDef[] = lib.map(x => ({
+const emjdb: EmojiDef[] = lib.map((x) => ({
 	emoji: x.char,
 	name: x.name,
 	url: char2filePath(x.char),
@@ -85,7 +143,7 @@ for (const x of customEmojis) {
 		name: x.name,
 		emoji: `:${x.name}:`,
 		url: x.url,
-		isCustomEmoji: true
+		isCustomEmoji: true,
 	});
 
 	if (x.aliases) {
@@ -95,7 +153,7 @@ for (const x of customEmojis) {
 				aliasOf: x.name,
 				emoji: `:${x.name}:`,
 				url: x.url,
-				isCustomEmoji: true
+				isCustomEmoji: true,
 			});
 		}
 	}
@@ -125,8 +183,8 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-	(event: 'done', value: { type: string; value: any }): void;
-	(event: 'closed'): void;
+	(event: "done", value: { type: string; value: any }): void;
+	(event: "closed"): void;
 }>();
 
 const suggests = ref<Element>();
@@ -135,36 +193,37 @@ const rootEl = ref<HTMLDivElement>();
 const fetching = ref(true);
 const users = ref<any[]>([]);
 const hashtags = ref<any[]>([]);
-const emojis = ref<(EmojiDef)[]>([]);
+const emojis = ref<EmojiDef[]>([]);
 const items = ref<Element[] | HTMLCollection>([]);
 const mfmTags = ref<string[]>([]);
 const select = ref(-1);
-const zIndex = os.claimZIndex('high');
+const zIndex = os.claimZIndex("high");
 
 function complete(type: string, value: any) {
-	emit('done', { type, value });
-	emit('closed');
-	if (type === 'emoji') {
+	emit("done", { type, value });
+	emit("closed");
+	if (type === "emoji") {
 		let recents = defaultStore.state.recentlyUsedEmojis;
 		recents = recents.filter((emoji: any) => emoji !== value);
 		recents.unshift(value);
-		defaultStore.set('recentlyUsedEmojis', recents.splice(0, 32));
+		defaultStore.set("recentlyUsedEmojis", recents.splice(0, 32));
 	}
 }
 
 function setPosition() {
 	if (!rootEl.value) return;
 	if (props.x + rootEl.value.offsetWidth > window.innerWidth) {
-		rootEl.value.style.left = (window.innerWidth - rootEl.value.offsetWidth) + 'px';
+		rootEl.value.style.left =
+			window.innerWidth - rootEl.value.offsetWidth + "px";
 	} else {
 		rootEl.value.style.left = `${props.x}px`;
 	}
 	if (props.y + rootEl.value.offsetHeight > window.innerHeight) {
-		rootEl.value.style.top = (props.y - rootEl.value.offsetHeight) + 'px';
-		rootEl.value.style.marginTop = '0';
+		rootEl.value.style.top = props.y - rootEl.value.offsetHeight + "px";
+		rootEl.value.style.marginTop = "0";
 	} else {
-		rootEl.value.style.top = props.y + 'px';
-		rootEl.value.style.marginTop = 'calc(1em + 8px)';
+		rootEl.value.style.top = props.y + "px";
+		rootEl.value.style.marginTop = "calc(1em + 8px)";
 	}
 }
 
@@ -172,10 +231,10 @@ function exec() {
 	select.value = -1;
 	if (suggests.value) {
 		for (const el of Array.from(items.value)) {
-			el.removeAttribute('data-selected');
+			el.removeAttribute("data-selected");
 		}
 	}
-	if (props.type === 'user') {
+	if (props.type === "user") {
 		if (!props.q) {
 			users.value = [];
 			fetching.value = false;
@@ -189,20 +248,22 @@ function exec() {
 			users.value = JSON.parse(cache);
 			fetching.value = false;
 		} else {
-			os.api('users/search-by-username-and-host', {
+			os.api("users/search-by-username-and-host", {
 				username: props.q,
 				limit: 10,
-				detail: false
-			}).then(searchedUsers => {
+				detail: false,
+			}).then((searchedUsers) => {
 				users.value = searchedUsers as any[];
 				fetching.value = false;
 				// キャッシュ
 				sessionStorage.setItem(cacheKey, JSON.stringify(searchedUsers));
 			});
 		}
-	} else if (props.type === 'hashtag') {
-		if (!props.q || props.q === '') {
-			hashtags.value = JSON.parse(localStorage.getItem('hashtags') || '[]');
+	} else if (props.type === "hashtag") {
+		if (!props.q || props.q === "") {
+			hashtags.value = JSON.parse(
+				localStorage.getItem("hashtags") || "[]"
+			);
 			fetching.value = false;
 		} else {
 			const cacheKey = `autocomplete:hashtag:${props.q}`;
@@ -212,59 +273,80 @@ function exec() {
 				hashtags.value = hashtags;
 				fetching.value = false;
 			} else {
-				os.api('hashtags/search', {
+				os.api("hashtags/search", {
 					query: props.q,
-					limit: 30
-				}).then(searchedHashtags => {
+					limit: 30,
+				}).then((searchedHashtags) => {
 					hashtags.value = searchedHashtags as any[];
 					fetching.value = false;
 					// キャッシュ
-					sessionStorage.setItem(cacheKey, JSON.stringify(searchedHashtags));
+					sessionStorage.setItem(
+						cacheKey,
+						JSON.stringify(searchedHashtags)
+					);
 				});
 			}
 		}
-	} else if (props.type === 'emoji') {
-		if (!props.q || props.q === '') {
+	} else if (props.type === "emoji") {
+		if (!props.q || props.q === "") {
 			// 最近使った絵文字をサジェスト
-			emojis.value = defaultStore.state.recentlyUsedEmojis.map(emoji => emojiDb.find(dbEmoji => dbEmoji.emoji === emoji)).filter(x => x) as EmojiDef[];
+			emojis.value = defaultStore.state.recentlyUsedEmojis
+				.map((emoji) =>
+					emojiDb.find((dbEmoji) => dbEmoji.emoji === emoji)
+				)
+				.filter((x) => x) as EmojiDef[];
 			return;
 		}
 
 		const matched: EmojiDef[] = [];
 		const max = 30;
 
-		emojiDb.some(x => {
-			if (x.name.startsWith(props.q ?? '') && !x.aliasOf && !matched.some(y => y.emoji === x.emoji)) matched.push(x);
+		emojiDb.some((x) => {
+			if (
+				x.name.startsWith(props.q ?? "") &&
+				!x.aliasOf &&
+				!matched.some((y) => y.emoji === x.emoji)
+			)
+				matched.push(x);
 			return matched.length === max;
 		});
 
 		if (matched.length < max) {
-			emojiDb.some(x => {
-				if (x.name.startsWith(props.q ?? '') && !matched.some(y => y.emoji === x.emoji)) matched.push(x);
+			emojiDb.some((x) => {
+				if (
+					x.name.startsWith(props.q ?? "") &&
+					!matched.some((y) => y.emoji === x.emoji)
+				)
+					matched.push(x);
 				return matched.length === max;
 			});
 		}
 
 		if (matched.length < max) {
-			emojiDb.some(x => {
-				if (x.name.includes(props.q ?? '') && !matched.some(y => y.emoji === x.emoji)) matched.push(x);
+			emojiDb.some((x) => {
+				if (
+					x.name.includes(props.q ?? "") &&
+					!matched.some((y) => y.emoji === x.emoji)
+				)
+					matched.push(x);
 				return matched.length === max;
 			});
 		}
 
 		emojis.value = matched;
-	} else if (props.type === 'mfmTag') {
-		if (!props.q || props.q === '') {
+	} else if (props.type === "mfmTag") {
+		if (!props.q || props.q === "") {
 			mfmTags.value = MFM_TAGS;
 			return;
 		}
 
-		mfmTags.value = MFM_TAGS.filter(tag => tag.startsWith(props.q ?? ''));
+		mfmTags.value = MFM_TAGS.filter((tag) => tag.startsWith(props.q ?? ""));
 	}
 }
 
 function onMousedown(event: Event) {
-	if (!contains(rootEl.value, event.target) && (rootEl.value !== event.target)) props.close();
+	if (!contains(rootEl.value, event.target) && rootEl.value !== event.target)
+		props.close();
 }
 
 function onKeydown(event: KeyboardEvent) {
@@ -274,7 +356,7 @@ function onKeydown(event: KeyboardEvent) {
 	};
 
 	switch (event.key) {
-		case 'Enter':
+		case "Enter":
 			if (select.value !== -1) {
 				cancel();
 				(items.value[select.value] as any).click();
@@ -283,12 +365,12 @@ function onKeydown(event: KeyboardEvent) {
 			}
 			break;
 
-		case 'Escape':
+		case "Escape":
 			cancel();
 			props.close();
 			break;
 
-		case 'ArrowUp':
+		case "ArrowUp":
 			if (select.value !== -1) {
 				cancel();
 				selectPrev();
@@ -297,8 +379,8 @@ function onKeydown(event: KeyboardEvent) {
 			}
 			break;
 
-		case 'Tab':
-		case 'ArrowDown':
+		case "Tab":
+		case "ArrowDown":
 			cancel();
 			selectNext();
 			break;
@@ -322,19 +404,19 @@ function selectPrev() {
 
 function applySelect() {
 	for (const el of Array.from(items.value)) {
-		el.removeAttribute('data-selected');
+		el.removeAttribute("data-selected");
 	}
 
 	if (select.value !== -1) {
-		items.value[select.value].setAttribute('data-selected', 'true');
+		items.value[select.value].setAttribute("data-selected", "true");
 		(items.value[select.value] as any).focus();
 	}
 }
 
 function chooseUser() {
 	props.close();
-	os.selectUser().then(user => {
-		complete('user', user);
+	os.selectUser().then((user) => {
+		complete("user", user);
 		props.textarea.focus();
 	});
 }
@@ -347,28 +429,31 @@ onUpdated(() => {
 onMounted(() => {
 	setPosition();
 
-	props.textarea.addEventListener('keydown', onKeydown);
+	props.textarea.addEventListener("keydown", onKeydown);
 
-	for (const el of Array.from(document.querySelectorAll('body *'))) {
-		el.addEventListener('mousedown', onMousedown);
+	for (const el of Array.from(document.querySelectorAll("body *"))) {
+		el.addEventListener("mousedown", onMousedown);
 	}
 
 	nextTick(() => {
 		exec();
 
-		watch(() => props.q, () => {
-			nextTick(() => {
-				exec();
-			});
-		});
+		watch(
+			() => props.q,
+			() => {
+				nextTick(() => {
+					exec();
+				});
+			}
+		);
 	});
 });
 
 onBeforeUnmount(() => {
-	props.textarea.removeEventListener('keydown', onKeydown);
+	props.textarea.removeEventListener("keydown", onKeydown);
 
-	for (const el of Array.from(document.querySelectorAll('body *'))) {
-		el.removeEventListener('mousedown', onMousedown);
+	for (const el of Array.from(document.querySelectorAll("body *"))) {
+		el.removeEventListener("mousedown", onMousedown);
 	}
 });
 </script>
@@ -399,7 +484,8 @@ onBeforeUnmount(() => {
 			font-size: 0.9em;
 			cursor: default;
 
-			&, * {
+			&,
+			* {
 				user-select: none;
 			}
 
@@ -412,10 +498,11 @@ onBeforeUnmount(() => {
 				background: var(--X3);
 			}
 
-			&[data-selected='true'] {
+			&[data-selected="true"] {
 				background: var(--accent);
 
-				&, * {
+				&,
+				* {
 					color: #fff !important;
 				}
 			}
@@ -423,7 +510,8 @@ onBeforeUnmount(() => {
 			&:active {
 				background: var(--accentDarken);
 
-				&, * {
+				&,
+				* {
 					color: #fff !important;
 				}
 			}
@@ -431,7 +519,6 @@ onBeforeUnmount(() => {
 	}
 
 	> .users > li {
-
 		.avatar {
 			min-width: 28px;
 			min-height: 28px;
@@ -447,7 +534,6 @@ onBeforeUnmount(() => {
 	}
 
 	> .emojis > li {
-
 		.emoji {
 			display: inline-block;
 			margin: 0 4px 0 0;
@@ -465,7 +551,6 @@ onBeforeUnmount(() => {
 	}
 
 	> .mfmTags > li {
-
 		.name {
 		}
 	}
diff --git a/packages/client/src/components/MkAvatars.vue b/packages/client/src/components/MkAvatars.vue
index 52fda8b1db..d92eee22c1 100644
--- a/packages/client/src/components/MkAvatars.vue
+++ b/packages/client/src/components/MkAvatars.vue
@@ -1,14 +1,14 @@
 <template>
-<div class="defgtij">
-	<div v-for="user in users" :key="user.id" class="avatar-holder">
-		<MkAvatar :user="user" :show-indicator="true" class="avatar"/>
+	<div class="defgtij">
+		<div v-for="user in users" :key="user.id" class="avatar-holder">
+			<MkAvatar :user="user" :show-indicator="true" class="avatar" />
+		</div>
 	</div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, ref } from 'vue';
-import * as os from '@/os';
+import { onMounted, ref } from "vue";
+import * as os from "@/os";
 
 const props = defineProps<{
 	userIds: string[];
@@ -17,8 +17,8 @@ const props = defineProps<{
 const users = ref([]);
 
 onMounted(async () => {
-	users.value = await os.api('users/show', {
-		userIds: props.userIds
+	users.value = await os.api("users/show", {
+		userIds: props.userIds,
 	});
 });
 </script>
diff --git a/packages/client/src/components/MkButton.vue b/packages/client/src/components/MkButton.vue
index 9042500b4e..5f1a5bdb7e 100644
--- a/packages/client/src/components/MkButton.vue
+++ b/packages/client/src/components/MkButton.vue
@@ -1,34 +1,36 @@
 <template>
-<button
-	v-if="!link" class="bghgjjyj _button"
-	:class="{ inline, primary, gradate, danger, rounded, full }"
-	:type="type"
-	@click="emit('click', $event)"
-	@mousedown="onMousedown"
->
-	<div ref="ripples" class="ripples"></div>
-	<div class="content">
-		<slot></slot>
-	</div>
-</button>
-<MkA
-	v-else class="bghgjjyj _button"
-	:class="{ inline, primary, gradate, danger, rounded, full }"
-	:to="to"
-	@mousedown="onMousedown"
->
-	<div ref="ripples" class="ripples"></div>
-	<div class="content">
-		<slot></slot>
-	</div>
-</MkA>
+	<button
+		v-if="!link"
+		class="bghgjjyj _button"
+		:class="{ inline, primary, gradate, danger, rounded, full }"
+		:type="type"
+		@click="emit('click', $event)"
+		@mousedown="onMousedown"
+	>
+		<div ref="ripples" class="ripples"></div>
+		<div class="content">
+			<slot></slot>
+		</div>
+	</button>
+	<MkA
+		v-else
+		class="bghgjjyj _button"
+		:class="{ inline, primary, gradate, danger, rounded, full }"
+		:to="to"
+		@mousedown="onMousedown"
+	>
+		<div ref="ripples" class="ripples"></div>
+		<div class="content">
+			<slot></slot>
+		</div>
+	</MkA>
 </template>
 
 <script lang="ts" setup>
-import { nextTick, onMounted } from 'vue';
+import { nextTick, onMounted } from "vue";
 
 const props = defineProps<{
-	type?: 'button' | 'submit' | 'reset';
+	type?: "button" | "submit" | "reset";
 	primary?: boolean;
 	gradate?: boolean;
 	rounded?: boolean;
@@ -42,7 +44,7 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-	(ev: 'click', payload: MouseEvent): void;
+	(ev: "click", payload: MouseEvent): void;
 }>();
 
 let el = $ref<HTMLElement | null>(null);
@@ -73,23 +75,28 @@ function onMousedown(evt: MouseEvent): void {
 	const target = evt.target! as HTMLElement;
 	const rect = target.getBoundingClientRect();
 
-	const ripple = document.createElement('div');
-	ripple.style.top = (evt.clientY - rect.top - 1).toString() + 'px';
-	ripple.style.left = (evt.clientX - rect.left - 1).toString() + 'px';
+	const ripple = document.createElement("div");
+	ripple.style.top = (evt.clientY - rect.top - 1).toString() + "px";
+	ripple.style.left = (evt.clientX - rect.left - 1).toString() + "px";
 
 	ripples!.appendChild(ripple);
 
 	const circleCenterX = evt.clientX - rect.left;
 	const circleCenterY = evt.clientY - rect.top;
 
-	const scale = calcCircleScale(target.clientWidth, target.clientHeight, circleCenterX, circleCenterY);
+	const scale = calcCircleScale(
+		target.clientWidth,
+		target.clientHeight,
+		circleCenterX,
+		circleCenterY
+	);
 
 	window.setTimeout(() => {
-		ripple.style.transform = 'scale(' + (scale / 2) + ')';
+		ripple.style.transform = "scale(" + scale / 2 + ")";
 	}, 1);
 	window.setTimeout(() => {
-		ripple.style.transition = 'all 1s ease';
-		ripple.style.opacity = '0';
+		ripple.style.transition = "all 1s ease";
+		ripple.style.opacity = "0";
 	}, 1000);
 	window.setTimeout(() => {
 		if (ripples) ripples.removeChild(ripple);
@@ -151,7 +158,11 @@ function onMousedown(evt: MouseEvent): void {
 	&.gradate {
 		font-weight: bold;
 		color: var(--fgOnAccent) !important;
-		background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
+		background: linear-gradient(
+			90deg,
+			var(--buttonGradateA),
+			var(--buttonGradateB)
+		);
 
 		&:not(:disabled):hover {
 			background: linear-gradient(90deg, var(--X8), var(--X8));
@@ -212,7 +223,7 @@ function onMousedown(evt: MouseEvent): void {
 			background: rgba(0, 0, 0, 0.1);
 			opacity: 1;
 			transform: scale(1);
-			transition: all 0.5s cubic-bezier(0,.5,0,1);
+			transition: all 0.5s cubic-bezier(0, 0.5, 0, 1);
 		}
 	}
 
diff --git a/packages/client/src/components/MkCaptcha.vue b/packages/client/src/components/MkCaptcha.vue
index 7360734914..554d4ac3a7 100644
--- a/packages/client/src/components/MkCaptcha.vue
+++ b/packages/client/src/components/MkCaptcha.vue
@@ -1,33 +1,46 @@
 <template>
-<div>
-	<span v-if="!available">{{ i18n.ts.waiting }}<MkEllipsis/></span>
-	<div ref="captchaEl"></div>
-</div>
+	<div>
+		<span v-if="!available">{{ i18n.ts.waiting }}<MkEllipsis /></span>
+		<div ref="captchaEl"></div>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { ref, computed, onMounted, onBeforeUnmount, watch } from 'vue';
-import { defaultStore } from '@/store';
-import { i18n } from '@/i18n';
+import { ref, computed, onMounted, onBeforeUnmount, watch } from "vue";
+import { defaultStore } from "@/store";
+import { i18n } from "@/i18n";
 
 type Captcha = {
-	render(container: string | Node, options: {
-		readonly [_ in 'sitekey' | 'theme' | 'type' | 'size' | 'tabindex' | 'callback' | 'expired' | 'expired-callback' | 'error-callback' | 'endpoint']?: unknown;
-	}): string;
+	render(
+		container: string | Node,
+		options: {
+			readonly [_ in
+				| "sitekey"
+				| "theme"
+				| "type"
+				| "size"
+				| "tabindex"
+				| "callback"
+				| "expired"
+				| "expired-callback"
+				| "error-callback"
+				| "endpoint"]?: unknown;
+		}
+	): string;
 	remove(id: string): void;
 	execute(id: string): void;
 	reset(id?: string): void;
 	getResponse(id: string): string;
 };
 
-type CaptchaProvider = 'hcaptcha' | 'recaptcha';
+type CaptchaProvider = "hcaptcha" | "recaptcha";
 
 type CaptchaContainer = {
 	readonly [_ in CaptchaProvider]?: Captcha;
 };
 
 declare global {
-	interface Window extends CaptchaContainer { }
+	interface Window extends CaptchaContainer {}
 }
 
 const props = defineProps<{
@@ -37,7 +50,7 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-	(ev: 'update:modelValue', v: string | null): void;
+	(ev: "update:modelValue", v: string | null): void;
 }>();
 
 const available = ref(false);
@@ -46,8 +59,10 @@ const captchaEl = ref<HTMLDivElement | undefined>();
 
 const variable = computed(() => {
 	switch (props.provider) {
-		case 'hcaptcha': return 'hcaptcha';
-		case 'recaptcha': return 'grecaptcha';
+		case "hcaptcha":
+			return "hcaptcha";
+		case "recaptcha":
+			return "grecaptcha";
 	}
 });
 
@@ -55,22 +70,30 @@ const loaded = !!window[variable.value];
 
 const src = computed(() => {
 	switch (props.provider) {
-		case 'hcaptcha': return 'https://js.hcaptcha.com/1/api.js?render=explicit&recaptchacompat=off';
-		case 'recaptcha': return 'https://www.recaptcha.net/recaptcha/api.js?render=explicit';
+		case "hcaptcha":
+			return "https://js.hcaptcha.com/1/api.js?render=explicit&recaptchacompat=off";
+		case "recaptcha":
+			return "https://www.recaptcha.net/recaptcha/api.js?render=explicit";
 	}
 });
 
-const captcha = computed<Captcha>(() => window[variable.value] || {} as unknown as Captcha);
+const captcha = computed<Captcha>(
+	() => window[variable.value] || ({} as unknown as Captcha)
+);
 
 if (loaded) {
 	available.value = true;
 } else {
-	(document.getElementById(props.provider) || document.head.appendChild(Object.assign(document.createElement('script'), {
-		async: true,
-		id: props.provider,
-		src: src.value,
-	})))
-		.addEventListener('load', () => available.value = true);
+	(
+		document.getElementById(props.provider) ||
+		document.head.appendChild(
+			Object.assign(document.createElement("script"), {
+				async: true,
+				id: props.provider,
+				src: src.value,
+			})
+		)
+	).addEventListener("load", () => (available.value = true));
 }
 
 function reset() {
@@ -81,10 +104,10 @@ function requestRender() {
 	if (captcha.value.render && captchaEl.value instanceof Element) {
 		captcha.value.render(captchaEl.value, {
 			sitekey: props.sitekey,
-			theme: defaultStore.state.darkMode ? 'dark' : 'light',
+			theme: defaultStore.state.darkMode ? "dark" : "light",
 			callback: callback,
-			'expired-callback': callback,
-			'error-callback': callback,
+			"expired-callback": callback,
+			"error-callback": callback,
 		});
 	} else {
 		window.setTimeout(requestRender, 1);
@@ -92,7 +115,7 @@ function requestRender() {
 }
 
 function callback(response?: string) {
-	emit('update:modelValue', typeof response === 'string' ? response : null);
+	emit("update:modelValue", typeof response === "string" ? response : null);
 }
 
 onMounted(() => {
@@ -110,5 +133,4 @@ onBeforeUnmount(() => {
 defineExpose({
 	reset,
 });
-
 </script>
diff --git a/packages/client/src/components/MkChannelFollowButton.vue b/packages/client/src/components/MkChannelFollowButton.vue
index 7c23b91ed7..b4cb1a87f7 100644
--- a/packages/client/src/components/MkChannelFollowButton.vue
+++ b/packages/client/src/components/MkChannelFollowButton.vue
@@ -1,34 +1,41 @@
 <template>
-<button class="hdcaacmi _button"
-	:class="{ wait, active: isFollowing, full }"
-	:disabled="wait"
-	@click="onClick"
->
-	<template v-if="!wait">
-		<template v-if="isFollowing">
-			<span v-if="full">{{ i18n.ts.unfollow }}</span><i class="ph-minus ph-bold ph-lg"></i>
+	<button
+		class="hdcaacmi _button"
+		:class="{ wait, active: isFollowing, full }"
+		:disabled="wait"
+		@click="onClick"
+	>
+		<template v-if="!wait">
+			<template v-if="isFollowing">
+				<span v-if="full">{{ i18n.ts.unfollow }}</span
+				><i class="ph-minus ph-bold ph-lg"></i>
+			</template>
+			<template v-else>
+				<span v-if="full">{{ i18n.ts.follow }}</span
+				><i class="ph-plus ph-bold ph-lg"></i>
+			</template>
 		</template>
 		<template v-else>
-			<span v-if="full">{{ i18n.ts.follow }}</span><i class="ph-plus ph-bold ph-lg"></i>
+			<span v-if="full">{{ i18n.ts.processing }}</span
+			><i class="ph-circle-notch ph-bold ph-lg fa-pulse ph-fw ph-lg"></i>
 		</template>
-	</template>
-	<template v-else>
-		<span v-if="full">{{ i18n.ts.processing }}</span><i class="ph-circle-notch ph-bold ph-lg fa-pulse ph-fw ph-lg"></i>
-	</template>
-</button>
+	</button>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
+import { ref } from "vue";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
 
-const props = withDefaults(defineProps<{
-	channel: Record<string, any>;
-	full?: boolean;
-}>(), {
-	full: false,
-});
+const props = withDefaults(
+	defineProps<{
+		channel: Record<string, any>;
+		full?: boolean;
+	}>(),
+	{
+		full: false,
+	}
+);
 
 const isFollowing = ref<boolean>(props.channel.isFollowing);
 const wait = ref(false);
@@ -38,13 +45,13 @@ async function onClick() {
 
 	try {
 		if (isFollowing.value) {
-			await os.api('channels/unfollow', {
-				channelId: props.channel.id
+			await os.api("channels/unfollow", {
+				channelId: props.channel.id,
 			});
 			isFollowing.value = false;
 		} else {
-			await os.api('channels/follow', {
-				channelId: props.channel.id
+			await os.api("channels/follow", {
+				channelId: props.channel.id,
 			});
 			isFollowing.value = true;
 		}
diff --git a/packages/client/src/components/MkChannelPreview.vue b/packages/client/src/components/MkChannelPreview.vue
index 6af2a7b64d..12df63bf0c 100644
--- a/packages/client/src/components/MkChannelPreview.vue
+++ b/packages/client/src/components/MkChannelPreview.vue
@@ -1,41 +1,57 @@
 <template>
-<MkA :to="`/channels/${channel.id}`" class="eftoefju _panel" tabindex="-1">
-	<div class="banner" :style="bannerStyle">
-		<div class="fade"></div>
-		<div class="name"><i class="ph-television ph-bold ph-lg"></i> {{ channel.name }}</div>
-		<div class="status">
-			<div>
-				<i class="ph-users ph-bold ph-lg ph-fw ph-lg"></i>
-				<I18n :src="i18n.ts._channel.usersCount" tag="span" style="margin-left: 4px;">
-					<template #n>
-						<b>{{ channel.usersCount }}</b>
-					</template>
-				</I18n>
+	<MkA :to="`/channels/${channel.id}`" class="eftoefju _panel" tabindex="-1">
+		<div class="banner" :style="bannerStyle">
+			<div class="fade"></div>
+			<div class="name">
+				<i class="ph-television ph-bold ph-lg"></i> {{ channel.name }}
 			</div>
-			<div>
-				<i class="ph-pencil ph-bold ph-lg ph-fw ph-lg"></i>
-				<I18n :src="i18n.ts._channel.notesCount" tag="span" style="margin-left: 4px;">
-					<template #n>
-						<b>{{ channel.notesCount }}</b>
-					</template>
-				</I18n>
+			<div class="status">
+				<div>
+					<i class="ph-users ph-bold ph-lg ph-fw ph-lg"></i>
+					<I18n
+						:src="i18n.ts._channel.usersCount"
+						tag="span"
+						style="margin-left: 4px"
+					>
+						<template #n>
+							<b>{{ channel.usersCount }}</b>
+						</template>
+					</I18n>
+				</div>
+				<div>
+					<i class="ph-pencil ph-bold ph-lg ph-fw ph-lg"></i>
+					<I18n
+						:src="i18n.ts._channel.notesCount"
+						tag="span"
+						style="margin-left: 4px"
+					>
+						<template #n>
+							<b>{{ channel.notesCount }}</b>
+						</template>
+					</I18n>
+				</div>
 			</div>
 		</div>
-	</div>
-	<article v-if="channel.description">
-		<p :title="channel.description">{{ channel.description.length > 85 ? channel.description.slice(0, 85) + '…' : channel.description }}</p>
-	</article>
-	<footer>
-		<span v-if="channel.lastNotedAt">
-			{{ i18n.ts.updatedAt }}: <MkTime :time="channel.lastNotedAt"/>
-		</span>
-	</footer>
-</MkA>
+		<article v-if="channel.description">
+			<p :title="channel.description">
+				{{
+					channel.description.length > 85
+						? channel.description.slice(0, 85) + "…"
+						: channel.description
+				}}
+			</p>
+		</article>
+		<footer>
+			<span v-if="channel.lastNotedAt">
+				{{ i18n.ts.updatedAt }}: <MkTime :time="channel.lastNotedAt" />
+			</span>
+		</footer>
+	</MkA>
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
-import { i18n } from '@/i18n';
+import { computed } from "vue";
+import { i18n } from "@/i18n";
 
 const props = defineProps<{
 	channel: Record<string, any>;
@@ -45,7 +61,7 @@ const bannerStyle = computed(() => {
 	if (props.channel.bannerUrl) {
 		return { backgroundImage: `url(${props.channel.bannerUrl})` };
 	} else {
-		return { backgroundColor: '#4c5e6d' };
+		return { backgroundColor: "#4c5e6d" };
 	}
 });
 </script>
@@ -155,5 +171,4 @@ const bannerStyle = computed(() => {
 		}
 	}
 }
-
 </style>
diff --git a/packages/client/src/components/MkChart.vue b/packages/client/src/components/MkChart.vue
index 2ff45a2292..310d980b49 100644
--- a/packages/client/src/components/MkChart.vue
+++ b/packages/client/src/components/MkChart.vue
@@ -1,14 +1,14 @@
 <template>
-<div class="cbbedffa">
-	<canvas ref="chartEl"></canvas>
-	<div v-if="fetching" class="fetching">
-		<MkLoading/>
+	<div class="cbbedffa">
+		<canvas ref="chartEl"></canvas>
+		<div v-if="fetching" class="fetching">
+			<MkLoading />
+		</div>
 	</div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, ref, watch, PropType, onUnmounted } from 'vue';
+import { onMounted, ref, watch, PropType, onUnmounted } from "vue";
 import {
 	Chart,
 	ArcElement,
@@ -25,16 +25,16 @@ import {
 	Tooltip,
 	SubTitle,
 	Filler,
-} from 'chart.js';
-import 'chartjs-adapter-date-fns';
-import { enUS } from 'date-fns/locale';
-import zoomPlugin from 'chartjs-plugin-zoom';
+} from "chart.js";
+import "chartjs-adapter-date-fns";
+import { enUS } from "date-fns/locale";
+import zoomPlugin from "chartjs-plugin-zoom";
 // https://github.com/misskey-dev/misskey/pull/8575#issuecomment-1114242002
 // We can't use gradient because Vite throws a error.
 //import gradient from 'chartjs-plugin-gradient';
-import * as os from '@/os';
-import { defaultStore } from '@/store';
-import { useChartTooltip } from '@/scripts/use-chart-tooltip';
+import * as os from "@/os";
+import { defaultStore } from "@/store";
+import { useChartTooltip } from "@/scripts/use-chart-tooltip";
 
 const props = defineProps({
 	src: {
@@ -51,7 +51,7 @@ const props = defineProps({
 		default: 90,
 	},
 	span: {
-		type: String as PropType<'hour' | 'day'>,
+		type: String as PropType<"hour" | "day">,
 		required: true,
 	},
 	detailed: {
@@ -91,12 +91,12 @@ Chart.register(
 	Tooltip,
 	SubTitle,
 	Filler,
-	zoomPlugin,
+	zoomPlugin
 	//gradient,
 );
 
 const sum = (...arr) => arr.reduce((r, a) => r.map((b, i) => a[i] + b));
-const negate = arr => arr.map(x => -x);
+const negate = (arr) => arr.map((x) => -x);
 const alpha = (hex, a) => {
 	const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)!;
 	const r = parseInt(result[1], 16);
@@ -106,16 +106,22 @@ const alpha = (hex, a) => {
 };
 
 const colors = {
-	blue: '#31748f',
-	green: '#9ccfd8',
-	yellow: '#f6c177',
-	red: '#eb6f92',
-	purple: '#c4a7e7',
-	orange: '#ebbcba',
-	lime: '#56949f',
-	cyan: '#9ccfd8',
+	blue: "#31748f",
+	green: "#9ccfd8",
+	yellow: "#f6c177",
+	red: "#eb6f92",
+	purple: "#c4a7e7",
+	orange: "#ebbcba",
+	lime: "#56949f",
+	cyan: "#9ccfd8",
 };
-const colorSets = [colors.blue, colors.green, colors.yellow, colors.red, colors.purple];
+const colorSets = [
+	colors.blue,
+	colors.green,
+	colors.yellow,
+	colors.red,
+	colors.purple,
+];
 const getColor = (i) => {
 	return colorSets[i % colorSets.length];
 };
@@ -125,7 +131,7 @@ let chartInstance: Chart = null;
 let chartData: {
 	series: {
 		name: string;
-		type: 'line' | 'area';
+		type: "line" | "area";
 		color?: string;
 		dashed?: boolean;
 		hidden?: boolean;
@@ -145,7 +151,9 @@ const getDate = (ago: number) => {
 	const d = now.getDate();
 	const h = now.getHours();
 
-	return props.span === 'day' ? new Date(y, m, d - ago) : new Date(y, m, d, h - ago);
+	return props.span === "day"
+		? new Date(y, m, d - ago)
+		: new Date(y, m, d, h - ago);
 };
 
 const format = (arr) => {
@@ -162,18 +170,30 @@ const render = () => {
 		chartInstance.destroy();
 	}
 
-	const gridColor = defaultStore.state.darkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';
-	const vLineColor = defaultStore.state.darkMode ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)';
+	const gridColor = defaultStore.state.darkMode
+		? "rgba(255, 255, 255, 0.1)"
+		: "rgba(0, 0, 0, 0.1)";
+	const vLineColor = defaultStore.state.darkMode
+		? "rgba(255, 255, 255, 0.2)"
+		: "rgba(0, 0, 0, 0.2)";
 
 	// フォントカラー
-	Chart.defaults.color = getComputedStyle(document.documentElement).getPropertyValue('--fg');
+	Chart.defaults.color = getComputedStyle(
+		document.documentElement
+	).getPropertyValue("--fg");
 
-	const maxes = chartData.series.map((x, i) => Math.max(...x.data.map(d => d.y)));
+	const maxes = chartData.series.map((x, i) =>
+		Math.max(...x.data.map((d) => d.y))
+	);
 
 	chartInstance = new Chart(chartEl.value, {
-		type: props.bar ? 'bar' : 'line',
+		type: props.bar ? "bar" : "line",
 		data: {
-			labels: new Array(props.limit).fill(0).map((_, i) => getDate(i).toLocaleString()).slice().reverse(),
+			labels: new Array(props.limit)
+				.fill(0)
+				.map((_, i) => getDate(i).toLocaleString())
+				.slice()
+				.reverse(),
 			datasets: chartData.series.map((x, i) => ({
 				parsing: false,
 				label: x.name,
@@ -183,9 +203,13 @@ const render = () => {
 				borderWidth: props.bar ? 0 : 2,
 				borderColor: x.color ? x.color : getColor(i),
 				borderDash: x.dashed ? [5, 5] : [],
-				borderJoinStyle: 'round',
+				borderJoinStyle: "round",
 				borderRadius: props.bar ? 3 : undefined,
-				backgroundColor: props.bar ? (x.color ? x.color : getColor(i)) : alpha(x.color ? x.color : getColor(i), 0.1),
+				backgroundColor: props.bar
+					? x.color
+						? x.color
+						: getColor(i)
+					: alpha(x.color ? x.color : getColor(i), 0.1),
 				/*gradient: props.bar ? undefined : {
 					backgroundColor: {
 						axis: 'y',
@@ -197,7 +221,7 @@ const render = () => {
 				},*/
 				barPercentage: 0.9,
 				categoryPercentage: 0.9,
-				fill: x.type === 'area',
+				fill: x.type === "area",
 				clip: 8,
 				hidden: !!x.hidden,
 			})),
@@ -214,16 +238,16 @@ const render = () => {
 			},
 			scales: {
 				x: {
-					type: 'time',
+					type: "time",
 					stacked: props.stacked,
 					offset: false,
 					time: {
 						stepSize: 1,
-						unit: props.span === 'day' ? 'month' : 'day',
+						unit: props.span === "day" ? "month" : "day",
 					},
 					grid: {
 						color: gridColor,
-						borderColor: 'rgb(0, 0, 0, 0)',
+						borderColor: "rgb(0, 0, 0, 0)",
 					},
 					ticks: {
 						display: props.detailed,
@@ -238,12 +262,12 @@ const render = () => {
 					min: getDate(props.limit).getTime(),
 				},
 				y: {
-					position: 'left',
+					position: "left",
 					stacked: props.stacked,
 					suggestedMax: 50,
 					grid: {
 						color: gridColor,
-						borderColor: 'rgb(0, 0, 0, 0)',
+						borderColor: "rgb(0, 0, 0, 0)",
 					},
 					ticks: {
 						display: props.detailed,
@@ -253,7 +277,7 @@ const render = () => {
 			},
 			interaction: {
 				intersect: false,
-				mode: 'index',
+				mode: "index",
 			},
 			elements: {
 				point: {
@@ -265,70 +289,74 @@ const render = () => {
 			plugins: {
 				legend: {
 					display: props.detailed,
-					position: 'bottom',
+					position: "bottom",
 					labels: {
 						boxWidth: 16,
 					},
 				},
 				tooltip: {
 					enabled: false,
-					mode: 'index',
+					mode: "index",
 					animation: {
 						duration: 0,
 					},
 					external: externalTooltipHandler,
 				},
-				zoom: props.detailed ? {
-					pan: {
-						enabled: true,
-					},
-					zoom: {
-						wheel: {
-							enabled: true,
-						},
-						pinch: {
-							enabled: true,
-						},
-						drag: {
-							enabled: false,
-						},
-						mode: 'x',
-					},
-					limits: {
-						x: {
-							min: 'original',
-							max: 'original',
-						},
-						y: {
-							min: 'original',
-							max: 'original',
-						},
-					},
-				} : undefined,
+				zoom: props.detailed
+					? {
+							pan: {
+								enabled: true,
+							},
+							zoom: {
+								wheel: {
+									enabled: true,
+								},
+								pinch: {
+									enabled: true,
+								},
+								drag: {
+									enabled: false,
+								},
+								mode: "x",
+							},
+							limits: {
+								x: {
+									min: "original",
+									max: "original",
+								},
+								y: {
+									min: "original",
+									max: "original",
+								},
+							},
+					  }
+					: undefined,
 				//gradient,
 			},
 		},
-		plugins: [{
-			id: 'vLine',
-			beforeDraw(chart, args, options) {
-				if (chart.tooltip?._active?.length) {
-					const activePoint = chart.tooltip._active[0];
-					const ctx = chart.ctx;
-					const x = activePoint.element.x;
-					const topY = chart.scales.y.top;
-					const bottomY = chart.scales.y.bottom;
+		plugins: [
+			{
+				id: "vLine",
+				beforeDraw(chart, args, options) {
+					if (chart.tooltip?._active?.length) {
+						const activePoint = chart.tooltip._active[0];
+						const ctx = chart.ctx;
+						const x = activePoint.element.x;
+						const topY = chart.scales.y.top;
+						const bottomY = chart.scales.y.bottom;
 
-					ctx.save();
-					ctx.beginPath();
-					ctx.moveTo(x, bottomY);
-					ctx.lineTo(x, topY);
-					ctx.lineWidth = 1;
-					ctx.strokeStyle = vLineColor;
-					ctx.stroke();
-					ctx.restore();
-				}
+						ctx.save();
+						ctx.beginPath();
+						ctx.moveTo(x, bottomY);
+						ctx.lineTo(x, topY);
+						ctx.lineWidth = 1;
+						ctx.strokeStyle = vLineColor;
+						ctx.stroke();
+						ctx.restore();
+					}
+				},
 			},
-		}],
+		],
 	});
 };
 
@@ -337,507 +365,717 @@ const exportData = () => {
 };
 
 const fetchFederationChart = async (): Promise<typeof chartData> => {
-	const raw = await os.apiGet('charts/federation', { limit: props.limit, span: props.span });
+	const raw = await os.apiGet("charts/federation", {
+		limit: props.limit,
+		span: props.span,
+	});
 	return {
-		series: [{
-			name: 'Received',
-			type: 'area',
-			data: format(raw.inboxInstances),
-			color: colors.blue,
-		}, {
-			name: 'Delivered',
-			type: 'area',
-			data: format(raw.deliveredInstances),
-			color: colors.green,
-		}, {
-			name: 'Stalled',
-			type: 'area',
-			data: format(raw.stalled),
-			color: colors.red,
-		}, {
-			name: 'Pub Active',
-			type: 'line',
-			data: format(raw.pubActive),
-			color: colors.purple,
-		}, {
-			name: 'Sub Active',
-			type: 'line',
-			data: format(raw.subActive),
-			color: colors.orange,
-		}, {
-			name: 'Pub & Sub',
-			type: 'line',
-			data: format(raw.pubsub),
-			dashed: true,
-			color: colors.cyan,
-		}, {
-			name: 'Pub',
-			type: 'line',
-			data: format(raw.pub),
-			dashed: true,
-			color: colors.purple,
-		}, {
-			name: 'Sub',
-			type: 'line',
-			data: format(raw.sub),
-			dashed: true,
-			color: colors.orange,
-		}],
+		series: [
+			{
+				name: "Received",
+				type: "area",
+				data: format(raw.inboxInstances),
+				color: colors.blue,
+			},
+			{
+				name: "Delivered",
+				type: "area",
+				data: format(raw.deliveredInstances),
+				color: colors.green,
+			},
+			{
+				name: "Stalled",
+				type: "area",
+				data: format(raw.stalled),
+				color: colors.red,
+			},
+			{
+				name: "Pub Active",
+				type: "line",
+				data: format(raw.pubActive),
+				color: colors.purple,
+			},
+			{
+				name: "Sub Active",
+				type: "line",
+				data: format(raw.subActive),
+				color: colors.orange,
+			},
+			{
+				name: "Pub & Sub",
+				type: "line",
+				data: format(raw.pubsub),
+				dashed: true,
+				color: colors.cyan,
+			},
+			{
+				name: "Pub",
+				type: "line",
+				data: format(raw.pub),
+				dashed: true,
+				color: colors.purple,
+			},
+			{
+				name: "Sub",
+				type: "line",
+				data: format(raw.sub),
+				dashed: true,
+				color: colors.orange,
+			},
+		],
 	};
 };
 
 const fetchApRequestChart = async (): Promise<typeof chartData> => {
-	const raw = await os.apiGet('charts/ap-request', { limit: props.limit, span: props.span });
+	const raw = await os.apiGet("charts/ap-request", {
+		limit: props.limit,
+		span: props.span,
+	});
 	return {
-		series: [{
-			name: 'In',
-			type: 'area',
-			color: '#31748f',
-			data: format(raw.inboxReceived),
-		}, {
-			name: 'Out (succ)',
-			type: 'area',
-			color: '#c4a7e7',
-			data: format(raw.deliverSucceeded),
-		}, {
-			name: 'Out (fail)',
-			type: 'area',
-			color: '#f6c177',
-			data: format(raw.deliverFailed),
-		}],
+		series: [
+			{
+				name: "In",
+				type: "area",
+				color: "#31748f",
+				data: format(raw.inboxReceived),
+			},
+			{
+				name: "Out (succ)",
+				type: "area",
+				color: "#c4a7e7",
+				data: format(raw.deliverSucceeded),
+			},
+			{
+				name: "Out (fail)",
+				type: "area",
+				color: "#f6c177",
+				data: format(raw.deliverFailed),
+			},
+		],
 	};
 };
 
 const fetchNotesChart = async (type: string): Promise<typeof chartData> => {
-	const raw = await os.apiGet('charts/notes', { limit: props.limit, span: props.span });
+	const raw = await os.apiGet("charts/notes", {
+		limit: props.limit,
+		span: props.span,
+	});
 	return {
-		series: [{
-			name: 'All',
-			type: 'line',
-			data: format(type === 'combined'
-				? sum(raw.local.inc, negate(raw.local.dec), raw.remote.inc, negate(raw.remote.dec))
-				: sum(raw[type].inc, negate(raw[type].dec)),
-			),
-			color: '#888888',
-		}, {
-			name: 'Renotes',
-			type: 'area',
-			data: format(type === 'combined'
-				? sum(raw.local.diffs.renote, raw.remote.diffs.renote)
-				: raw[type].diffs.renote,
-			),
-			color: colors.green,
-		}, {
-			name: 'Replies',
-			type: 'area',
-			data: format(type === 'combined'
-				? sum(raw.local.diffs.reply, raw.remote.diffs.reply)
-				: raw[type].diffs.reply,
-			),
-			color: colors.yellow,
-		}, {
-			name: 'Normal',
-			type: 'area',
-			data: format(type === 'combined'
-				? sum(raw.local.diffs.normal, raw.remote.diffs.normal)
-				: raw[type].diffs.normal,
-			),
-			color: colors.blue,
-		}, {
-			name: 'With file',
-			type: 'area',
-			data: format(type === 'combined'
-				? sum(raw.local.diffs.withFile, raw.remote.diffs.withFile)
-				: raw[type].diffs.withFile,
-			),
-			color: colors.purple,
-		}],
+		series: [
+			{
+				name: "All",
+				type: "line",
+				data: format(
+					type === "combined"
+						? sum(
+								raw.local.inc,
+								negate(raw.local.dec),
+								raw.remote.inc,
+								negate(raw.remote.dec)
+						  )
+						: sum(raw[type].inc, negate(raw[type].dec))
+				),
+				color: "#888888",
+			},
+			{
+				name: "Renotes",
+				type: "area",
+				data: format(
+					type === "combined"
+						? sum(raw.local.diffs.renote, raw.remote.diffs.renote)
+						: raw[type].diffs.renote
+				),
+				color: colors.green,
+			},
+			{
+				name: "Replies",
+				type: "area",
+				data: format(
+					type === "combined"
+						? sum(raw.local.diffs.reply, raw.remote.diffs.reply)
+						: raw[type].diffs.reply
+				),
+				color: colors.yellow,
+			},
+			{
+				name: "Normal",
+				type: "area",
+				data: format(
+					type === "combined"
+						? sum(raw.local.diffs.normal, raw.remote.diffs.normal)
+						: raw[type].diffs.normal
+				),
+				color: colors.blue,
+			},
+			{
+				name: "With file",
+				type: "area",
+				data: format(
+					type === "combined"
+						? sum(
+								raw.local.diffs.withFile,
+								raw.remote.diffs.withFile
+						  )
+						: raw[type].diffs.withFile
+				),
+				color: colors.purple,
+			},
+		],
 	};
 };
 
 const fetchNotesTotalChart = async (): Promise<typeof chartData> => {
-	const raw = await os.apiGet('charts/notes', { limit: props.limit, span: props.span });
+	const raw = await os.apiGet("charts/notes", {
+		limit: props.limit,
+		span: props.span,
+	});
 	return {
-		series: [{
-			name: 'Combined',
-			type: 'line',
-			data: format(sum(raw.local.total, raw.remote.total)),
-		}, {
-			name: 'Local',
-			type: 'area',
-			data: format(raw.local.total),
-		}, {
-			name: 'Remote',
-			type: 'area',
-			data: format(raw.remote.total),
-		}],
+		series: [
+			{
+				name: "Combined",
+				type: "line",
+				data: format(sum(raw.local.total, raw.remote.total)),
+			},
+			{
+				name: "Local",
+				type: "area",
+				data: format(raw.local.total),
+			},
+			{
+				name: "Remote",
+				type: "area",
+				data: format(raw.remote.total),
+			},
+		],
 	};
 };
 
 const fetchUsersChart = async (total: boolean): Promise<typeof chartData> => {
-	const raw = await os.apiGet('charts/users', { limit: props.limit, span: props.span });
+	const raw = await os.apiGet("charts/users", {
+		limit: props.limit,
+		span: props.span,
+	});
 	return {
-		series: [{
-			name: 'Combined',
-			type: 'line',
-			data: format(total
-				? sum(raw.local.total, raw.remote.total)
-				: sum(raw.local.inc, negate(raw.local.dec), raw.remote.inc, negate(raw.remote.dec)),
-			),
-		}, {
-			name: 'Local',
-			type: 'area',
-			data: format(total
-				? raw.local.total
-				: sum(raw.local.inc, negate(raw.local.dec)),
-			),
-		}, {
-			name: 'Remote',
-			type: 'area',
-			data: format(total
-				? raw.remote.total
-				: sum(raw.remote.inc, negate(raw.remote.dec)),
-			),
-		}],
+		series: [
+			{
+				name: "Combined",
+				type: "line",
+				data: format(
+					total
+						? sum(raw.local.total, raw.remote.total)
+						: sum(
+								raw.local.inc,
+								negate(raw.local.dec),
+								raw.remote.inc,
+								negate(raw.remote.dec)
+						  )
+				),
+			},
+			{
+				name: "Local",
+				type: "area",
+				data: format(
+					total
+						? raw.local.total
+						: sum(raw.local.inc, negate(raw.local.dec))
+				),
+			},
+			{
+				name: "Remote",
+				type: "area",
+				data: format(
+					total
+						? raw.remote.total
+						: sum(raw.remote.inc, negate(raw.remote.dec))
+				),
+			},
+		],
 	};
 };
 
 const fetchActiveUsersChart = async (): Promise<typeof chartData> => {
-	const raw = await os.apiGet('charts/active-users', { limit: props.limit, span: props.span });
+	const raw = await os.apiGet("charts/active-users", {
+		limit: props.limit,
+		span: props.span,
+	});
 	return {
-		series: [{
-			name: 'Read & Write',
-			type: 'area',
-			data: format(raw.readWrite),
-			color: colors.orange,
-		}, {
-			name: 'Write',
-			type: 'area',
-			data: format(raw.write),
-			color: colors.lime,
-		}, {
-			name: 'Read',
-			type: 'area',
-			data: format(raw.read),
-			color: colors.blue,
-		}, {
-			name: '< Week',
-			type: 'area',
-			data: format(raw.registeredWithinWeek),
-			color: colors.green,
-		}, {
-			name: '< Month',
-			type: 'area',
-			data: format(raw.registeredWithinMonth),
-			color: colors.yellow,
-		}, {
-			name: '< Year',
-			type: 'area',
-			data: format(raw.registeredWithinYear),
-			color: colors.red,
-		}, {
-			name: '> Week',
-			type: 'area',
-			data: format(raw.registeredOutsideWeek),
-			color: colors.yellow,
-		}, {
-			name: '> Month',
-			type: 'area',
-			data: format(raw.registeredOutsideMonth),
-			color: colors.red,
-		}, {
-			name: '> Year',
-			type: 'area',
-			data: format(raw.registeredOutsideYear),
-			color: colors.purple,
-		}],
+		series: [
+			{
+				name: "Read & Write",
+				type: "area",
+				data: format(raw.readWrite),
+				color: colors.orange,
+			},
+			{
+				name: "Write",
+				type: "area",
+				data: format(raw.write),
+				color: colors.lime,
+			},
+			{
+				name: "Read",
+				type: "area",
+				data: format(raw.read),
+				color: colors.blue,
+			},
+			{
+				name: "< Week",
+				type: "area",
+				data: format(raw.registeredWithinWeek),
+				color: colors.green,
+			},
+			{
+				name: "< Month",
+				type: "area",
+				data: format(raw.registeredWithinMonth),
+				color: colors.yellow,
+			},
+			{
+				name: "< Year",
+				type: "area",
+				data: format(raw.registeredWithinYear),
+				color: colors.red,
+			},
+			{
+				name: "> Week",
+				type: "area",
+				data: format(raw.registeredOutsideWeek),
+				color: colors.yellow,
+			},
+			{
+				name: "> Month",
+				type: "area",
+				data: format(raw.registeredOutsideMonth),
+				color: colors.red,
+			},
+			{
+				name: "> Year",
+				type: "area",
+				data: format(raw.registeredOutsideYear),
+				color: colors.purple,
+			},
+		],
 	};
 };
 
 const fetchDriveChart = async (): Promise<typeof chartData> => {
-	const raw = await os.apiGet('charts/drive', { limit: props.limit, span: props.span });
+	const raw = await os.apiGet("charts/drive", {
+		limit: props.limit,
+		span: props.span,
+	});
 	return {
 		bytes: true,
-		series: [{
-			name: 'All',
-			type: 'line',
-			dashed: true,
-			data: format(
-				sum(
-					raw.local.incSize,
-					negate(raw.local.decSize),
-					raw.remote.incSize,
-					negate(raw.remote.decSize),
+		series: [
+			{
+				name: "All",
+				type: "line",
+				dashed: true,
+				data: format(
+					sum(
+						raw.local.incSize,
+						negate(raw.local.decSize),
+						raw.remote.incSize,
+						negate(raw.remote.decSize)
+					)
 				),
-			),
-		}, {
-			name: 'Local +',
-			type: 'area',
-			data: format(raw.local.incSize),
-		}, {
-			name: 'Local -',
-			type: 'area',
-			data: format(negate(raw.local.decSize)),
-		}, {
-			name: 'Remote +',
-			type: 'area',
-			data: format(raw.remote.incSize),
-		}, {
-			name: 'Remote -',
-			type: 'area',
-			data: format(negate(raw.remote.decSize)),
-		}],
+			},
+			{
+				name: "Local +",
+				type: "area",
+				data: format(raw.local.incSize),
+			},
+			{
+				name: "Local -",
+				type: "area",
+				data: format(negate(raw.local.decSize)),
+			},
+			{
+				name: "Remote +",
+				type: "area",
+				data: format(raw.remote.incSize),
+			},
+			{
+				name: "Remote -",
+				type: "area",
+				data: format(negate(raw.remote.decSize)),
+			},
+		],
 	};
 };
 
 const fetchDriveFilesChart = async (): Promise<typeof chartData> => {
-	const raw = await os.apiGet('charts/drive', { limit: props.limit, span: props.span });
+	const raw = await os.apiGet("charts/drive", {
+		limit: props.limit,
+		span: props.span,
+	});
 	return {
-		series: [{
-			name: 'All',
-			type: 'line',
-			dashed: true,
-			data: format(
-				sum(
-					raw.local.incCount,
-					negate(raw.local.decCount),
-					raw.remote.incCount,
-					negate(raw.remote.decCount),
+		series: [
+			{
+				name: "All",
+				type: "line",
+				dashed: true,
+				data: format(
+					sum(
+						raw.local.incCount,
+						negate(raw.local.decCount),
+						raw.remote.incCount,
+						negate(raw.remote.decCount)
+					)
 				),
-			),
-		}, {
-			name: 'Local +',
-			type: 'area',
-			data: format(raw.local.incCount),
-		}, {
-			name: 'Local -',
-			type: 'area',
-			data: format(negate(raw.local.decCount)),
-		}, {
-			name: 'Remote +',
-			type: 'area',
-			data: format(raw.remote.incCount),
-		}, {
-			name: 'Remote -',
-			type: 'area',
-			data: format(negate(raw.remote.decCount)),
-		}],
+			},
+			{
+				name: "Local +",
+				type: "area",
+				data: format(raw.local.incCount),
+			},
+			{
+				name: "Local -",
+				type: "area",
+				data: format(negate(raw.local.decCount)),
+			},
+			{
+				name: "Remote +",
+				type: "area",
+				data: format(raw.remote.incCount),
+			},
+			{
+				name: "Remote -",
+				type: "area",
+				data: format(negate(raw.remote.decCount)),
+			},
+		],
 	};
 };
 
 const fetchInstanceRequestsChart = async (): Promise<typeof chartData> => {
-	const raw = await os.apiGet('charts/instance', { host: props.args.host, limit: props.limit, span: props.span });
+	const raw = await os.apiGet("charts/instance", {
+		host: props.args.host,
+		limit: props.limit,
+		span: props.span,
+	});
 	return {
-		series: [{
-			name: 'In',
-			type: 'area',
-			color: '#31748f',
-			data: format(raw.requests.received),
-		}, {
-			name: 'Out (succ)',
-			type: 'area',
-			color: '#c4a7e7',
-			data: format(raw.requests.succeeded),
-		}, {
-			name: 'Out (fail)',
-			type: 'area',
-			color: '#f6c177',
-			data: format(raw.requests.failed),
-		}],
+		series: [
+			{
+				name: "In",
+				type: "area",
+				color: "#31748f",
+				data: format(raw.requests.received),
+			},
+			{
+				name: "Out (succ)",
+				type: "area",
+				color: "#c4a7e7",
+				data: format(raw.requests.succeeded),
+			},
+			{
+				name: "Out (fail)",
+				type: "area",
+				color: "#f6c177",
+				data: format(raw.requests.failed),
+			},
+		],
 	};
 };
 
-const fetchInstanceUsersChart = async (total: boolean): Promise<typeof chartData> => {
-	const raw = await os.apiGet('charts/instance', { host: props.args.host, limit: props.limit, span: props.span });
+const fetchInstanceUsersChart = async (
+	total: boolean
+): Promise<typeof chartData> => {
+	const raw = await os.apiGet("charts/instance", {
+		host: props.args.host,
+		limit: props.limit,
+		span: props.span,
+	});
 	return {
-		series: [{
-			name: 'Users',
-			type: 'area',
-			color: '#31748f',
-			data: format(total
-				? raw.users.total
-				: sum(raw.users.inc, negate(raw.users.dec)),
-			),
-		}],
+		series: [
+			{
+				name: "Users",
+				type: "area",
+				color: "#31748f",
+				data: format(
+					total
+						? raw.users.total
+						: sum(raw.users.inc, negate(raw.users.dec))
+				),
+			},
+		],
 	};
 };
 
-const fetchInstanceNotesChart = async (total: boolean): Promise<typeof chartData> => {
-	const raw = await os.apiGet('charts/instance', { host: props.args.host, limit: props.limit, span: props.span });
+const fetchInstanceNotesChart = async (
+	total: boolean
+): Promise<typeof chartData> => {
+	const raw = await os.apiGet("charts/instance", {
+		host: props.args.host,
+		limit: props.limit,
+		span: props.span,
+	});
 	return {
-		series: [{
-			name: 'Posts',
-			type: 'area',
-			color: '#31748f',
-			data: format(total
-				? raw.notes.total
-				: sum(raw.notes.inc, negate(raw.notes.dec)),
-			),
-		}],
+		series: [
+			{
+				name: "Posts",
+				type: "area",
+				color: "#31748f",
+				data: format(
+					total
+						? raw.notes.total
+						: sum(raw.notes.inc, negate(raw.notes.dec))
+				),
+			},
+		],
 	};
 };
 
-const fetchInstanceFfChart = async (total: boolean): Promise<typeof chartData> => {
-	const raw = await os.apiGet('charts/instance', { host: props.args.host, limit: props.limit, span: props.span });
+const fetchInstanceFfChart = async (
+	total: boolean
+): Promise<typeof chartData> => {
+	const raw = await os.apiGet("charts/instance", {
+		host: props.args.host,
+		limit: props.limit,
+		span: props.span,
+	});
 	return {
-		series: [{
-			name: 'Following',
-			type: 'area',
-			color: '#31748f',
-			data: format(total
-				? raw.following.total
-				: sum(raw.following.inc, negate(raw.following.dec)),
-			),
-		}, {
-			name: 'Followers',
-			type: 'area',
-			color: '#c4a7e7',
-			data: format(total
-				? raw.followers.total
-				: sum(raw.followers.inc, negate(raw.followers.dec)),
-			),
-		}],
+		series: [
+			{
+				name: "Following",
+				type: "area",
+				color: "#31748f",
+				data: format(
+					total
+						? raw.following.total
+						: sum(raw.following.inc, negate(raw.following.dec))
+				),
+			},
+			{
+				name: "Followers",
+				type: "area",
+				color: "#c4a7e7",
+				data: format(
+					total
+						? raw.followers.total
+						: sum(raw.followers.inc, negate(raw.followers.dec))
+				),
+			},
+		],
 	};
 };
 
-const fetchInstanceDriveUsageChart = async (total: boolean): Promise<typeof chartData> => {
-	const raw = await os.apiGet('charts/instance', { host: props.args.host, limit: props.limit, span: props.span });
+const fetchInstanceDriveUsageChart = async (
+	total: boolean
+): Promise<typeof chartData> => {
+	const raw = await os.apiGet("charts/instance", {
+		host: props.args.host,
+		limit: props.limit,
+		span: props.span,
+	});
 	return {
 		bytes: true,
-		series: [{
-			name: 'Drive usage',
-			type: 'area',
-			color: '#31748f',
-			data: format(total
-				? raw.drive.totalUsage
-				: sum(raw.drive.incUsage, negate(raw.drive.decUsage)),
-			),
-		}],
+		series: [
+			{
+				name: "Drive usage",
+				type: "area",
+				color: "#31748f",
+				data: format(
+					total
+						? raw.drive.totalUsage
+						: sum(raw.drive.incUsage, negate(raw.drive.decUsage))
+				),
+			},
+		],
 	};
 };
 
-const fetchInstanceDriveFilesChart = async (total: boolean): Promise<typeof chartData> => {
-	const raw = await os.apiGet('charts/instance', { host: props.args.host, limit: props.limit, span: props.span });
+const fetchInstanceDriveFilesChart = async (
+	total: boolean
+): Promise<typeof chartData> => {
+	const raw = await os.apiGet("charts/instance", {
+		host: props.args.host,
+		limit: props.limit,
+		span: props.span,
+	});
 	return {
-		series: [{
-			name: 'Drive files',
-			type: 'area',
-			color: '#31748f',
-			data: format(total
-				? raw.drive.totalFiles
-				: sum(raw.drive.incFiles, negate(raw.drive.decFiles)),
-			),
-		}],
+		series: [
+			{
+				name: "Drive files",
+				type: "area",
+				color: "#31748f",
+				data: format(
+					total
+						? raw.drive.totalFiles
+						: sum(raw.drive.incFiles, negate(raw.drive.decFiles))
+				),
+			},
+		],
 	};
 };
 
 const fetchPerUserNotesChart = async (): Promise<typeof chartData> => {
-	const raw = await os.apiGet('charts/user/notes', { userId: props.args.user.id, limit: props.limit, span: props.span });
+	const raw = await os.apiGet("charts/user/notes", {
+		userId: props.args.user.id,
+		limit: props.limit,
+		span: props.span,
+	});
 	return {
-		series: [...(props.args.withoutAll ? [] : [{
-			name: 'All',
-			type: 'line',
-			data: format(sum(raw.inc, negate(raw.dec))),
-			color: '#888888',
-		}]), {
-			name: 'With file',
-			type: 'area',
-			data: format(raw.diffs.withFile),
-			color: colors.purple,
-		}, {
-			name: 'Renotes',
-			type: 'area',
-			data: format(raw.diffs.renote),
-			color: colors.green,
-		}, {
-			name: 'Replies',
-			type: 'area',
-			data: format(raw.diffs.reply),
-			color: colors.yellow,
-		}, {
-			name: 'Normal',
-			type: 'area',
-			data: format(raw.diffs.normal),
-			color: colors.blue,
-		}],
+		series: [
+			...(props.args.withoutAll
+				? []
+				: [
+						{
+							name: "All",
+							type: "line",
+							data: format(sum(raw.inc, negate(raw.dec))),
+							color: "#888888",
+						},
+				  ]),
+			{
+				name: "With file",
+				type: "area",
+				data: format(raw.diffs.withFile),
+				color: colors.purple,
+			},
+			{
+				name: "Renotes",
+				type: "area",
+				data: format(raw.diffs.renote),
+				color: colors.green,
+			},
+			{
+				name: "Replies",
+				type: "area",
+				data: format(raw.diffs.reply),
+				color: colors.yellow,
+			},
+			{
+				name: "Normal",
+				type: "area",
+				data: format(raw.diffs.normal),
+				color: colors.blue,
+			},
+		],
 	};
 };
 
 const fetchPerUserFollowingChart = async (): Promise<typeof chartData> => {
-	const raw = await os.apiGet('charts/user/following', { userId: props.args.user.id, limit: props.limit, span: props.span });
+	const raw = await os.apiGet("charts/user/following", {
+		userId: props.args.user.id,
+		limit: props.limit,
+		span: props.span,
+	});
 	return {
-		series: [{
-			name: 'Local',
-			type: 'area',
-			data: format(raw.local.followings.total),
-		}, {
-			name: 'Remote',
-			type: 'area',
-			data: format(raw.remote.followings.total),
-		}],
+		series: [
+			{
+				name: "Local",
+				type: "area",
+				data: format(raw.local.followings.total),
+			},
+			{
+				name: "Remote",
+				type: "area",
+				data: format(raw.remote.followings.total),
+			},
+		],
 	};
 };
 
 const fetchPerUserFollowersChart = async (): Promise<typeof chartData> => {
-	const raw = await os.apiGet('charts/user/following', { userId: props.args.user.id, limit: props.limit, span: props.span });
+	const raw = await os.apiGet("charts/user/following", {
+		userId: props.args.user.id,
+		limit: props.limit,
+		span: props.span,
+	});
 	return {
-		series: [{
-			name: 'Local',
-			type: 'area',
-			data: format(raw.local.followers.total),
-		}, {
-			name: 'Remote',
-			type: 'area',
-			data: format(raw.remote.followers.total),
-		}],
+		series: [
+			{
+				name: "Local",
+				type: "area",
+				data: format(raw.local.followers.total),
+			},
+			{
+				name: "Remote",
+				type: "area",
+				data: format(raw.remote.followers.total),
+			},
+		],
 	};
 };
 
 const fetchPerUserDriveChart = async (): Promise<typeof chartData> => {
-	const raw = await os.apiGet('charts/user/drive', { userId: props.args.user.id, limit: props.limit, span: props.span });
+	const raw = await os.apiGet("charts/user/drive", {
+		userId: props.args.user.id,
+		limit: props.limit,
+		span: props.span,
+	});
 	return {
-		series: [{
-			name: 'Inc',
-			type: 'area',
-			data: format(raw.incSize),
-		}, {
-			name: 'Dec',
-			type: 'area',
-			data: format(raw.decSize),
-		}],
+		series: [
+			{
+				name: "Inc",
+				type: "area",
+				data: format(raw.incSize),
+			},
+			{
+				name: "Dec",
+				type: "area",
+				data: format(raw.decSize),
+			},
+		],
 	};
 };
 
 const fetchAndRender = async () => {
 	const fetchData = () => {
 		switch (props.src) {
-			case 'federation': return fetchFederationChart();
-			case 'ap-request': return fetchApRequestChart();
-			case 'users': return fetchUsersChart(false);
-			case 'users-total': return fetchUsersChart(true);
-			case 'active-users': return fetchActiveUsersChart();
-			case 'notes': return fetchNotesChart('combined');
-			case 'local-notes': return fetchNotesChart('local');
-			case 'remote-notes': return fetchNotesChart('remote');
-			case 'notes-total': return fetchNotesTotalChart();
-			case 'drive': return fetchDriveChart();
-			case 'drive-files': return fetchDriveFilesChart();
-			case 'instance-requests': return fetchInstanceRequestsChart();
-			case 'instance-users': return fetchInstanceUsersChart(false);
-			case 'instance-users-total': return fetchInstanceUsersChart(true);
-			case 'instance-notes': return fetchInstanceNotesChart(false);
-			case 'instance-notes-total': return fetchInstanceNotesChart(true);
-			case 'instance-ff': return fetchInstanceFfChart(false);
-			case 'instance-ff-total': return fetchInstanceFfChart(true);
-			case 'instance-drive-usage': return fetchInstanceDriveUsageChart(false);
-			case 'instance-drive-usage-total': return fetchInstanceDriveUsageChart(true);
-			case 'instance-drive-files': return fetchInstanceDriveFilesChart(false);
-			case 'instance-drive-files-total': return fetchInstanceDriveFilesChart(true);
+			case "federation":
+				return fetchFederationChart();
+			case "ap-request":
+				return fetchApRequestChart();
+			case "users":
+				return fetchUsersChart(false);
+			case "users-total":
+				return fetchUsersChart(true);
+			case "active-users":
+				return fetchActiveUsersChart();
+			case "notes":
+				return fetchNotesChart("combined");
+			case "local-notes":
+				return fetchNotesChart("local");
+			case "remote-notes":
+				return fetchNotesChart("remote");
+			case "notes-total":
+				return fetchNotesTotalChart();
+			case "drive":
+				return fetchDriveChart();
+			case "drive-files":
+				return fetchDriveFilesChart();
+			case "instance-requests":
+				return fetchInstanceRequestsChart();
+			case "instance-users":
+				return fetchInstanceUsersChart(false);
+			case "instance-users-total":
+				return fetchInstanceUsersChart(true);
+			case "instance-notes":
+				return fetchInstanceNotesChart(false);
+			case "instance-notes-total":
+				return fetchInstanceNotesChart(true);
+			case "instance-ff":
+				return fetchInstanceFfChart(false);
+			case "instance-ff-total":
+				return fetchInstanceFfChart(true);
+			case "instance-drive-usage":
+				return fetchInstanceDriveUsageChart(false);
+			case "instance-drive-usage-total":
+				return fetchInstanceDriveUsageChart(true);
+			case "instance-drive-files":
+				return fetchInstanceDriveFilesChart(false);
+			case "instance-drive-files-total":
+				return fetchInstanceDriveFilesChart(true);
 
-			case 'per-user-notes': return fetchPerUserNotesChart();
-			case 'per-user-following': return fetchPerUserFollowingChart();
-			case 'per-user-followers': return fetchPerUserFollowersChart();
-			case 'per-user-drive': return fetchPerUserDriveChart();
+			case "per-user-notes":
+				return fetchPerUserNotesChart();
+			case "per-user-following":
+				return fetchPerUserFollowingChart();
+			case "per-user-followers":
+				return fetchPerUserFollowersChart();
+			case "per-user-drive":
+				return fetchPerUserDriveChart();
 		}
 	};
 	fetching.value = true;
diff --git a/packages/client/src/components/MkChartTooltip.vue b/packages/client/src/components/MkChartTooltip.vue
index a92dd36b61..659dc6d399 100644
--- a/packages/client/src/components/MkChartTooltip.vue
+++ b/packages/client/src/components/MkChartTooltip.vue
@@ -1,20 +1,35 @@
 <template>
-<MkTooltip ref="tooltip" :showing="showing" :x="x" :y="y" :max-width="340" :direction="'top'" :inner-margin="16" @closed="emit('closed')">
-	<div v-if="title || series" class="qpcyisrl">
-		<div v-if="title" class="title">{{ title }}</div>
-		<template v-if="series">
-			<div v-for="x in series" class="series">
-				<span class="color" :style="{ background: x.backgroundColor, borderColor: x.borderColor }"></span>
-				<span>{{ x.text }}</span>
-			</div>
-		</template>
-	</div>
-</MkTooltip>
+	<MkTooltip
+		ref="tooltip"
+		:showing="showing"
+		:x="x"
+		:y="y"
+		:max-width="340"
+		:direction="'top'"
+		:inner-margin="16"
+		@closed="emit('closed')"
+	>
+		<div v-if="title || series" class="qpcyisrl">
+			<div v-if="title" class="title">{{ title }}</div>
+			<template v-if="series">
+				<div v-for="x in series" class="series">
+					<span
+						class="color"
+						:style="{
+							background: x.backgroundColor,
+							borderColor: x.borderColor,
+						}"
+					></span>
+					<span>{{ x.text }}</span>
+				</div>
+			</template>
+		</div>
+	</MkTooltip>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import MkTooltip from './MkTooltip.vue';
+import {} from "vue";
+import MkTooltip from "./MkTooltip.vue";
 
 const props = defineProps<{
 	showing: boolean;
@@ -29,7 +44,7 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-	(ev: 'closed'): void;
+	(ev: "closed"): void;
 }>();
 </script>
 
diff --git a/packages/client/src/components/MkChatPreview.vue b/packages/client/src/components/MkChatPreview.vue
index 131498e093..6cd79d74c6 100644
--- a/packages/client/src/components/MkChatPreview.vue
+++ b/packages/client/src/components/MkChatPreview.vue
@@ -1,56 +1,72 @@
 <template>
-<MkA
-	class="rivslvers"
-	tabindex="-1"
-	:class="{
-		isMe: isMe(message),
-		isRead: message.groupId ? message.reads.includes($i?.id) : message.isRead,
-	}"
-	:to="
-		message.groupId
-			? `/my/messaging/group/${message.groupId}`
-			: `/my/messaging/${getAcct(
-				isMe(message) ? message.recipient : message.user
-			)}`
-	"
->
-	<div class="message _block">
-		<MkAvatar
-			class="avatar"
-			:user="
-				message.groupId
-					? message.user
-					: isMe(message)
+	<MkA
+		class="rivslvers"
+		tabindex="-1"
+		:class="{
+			isMe: isMe(message),
+			isRead: message.groupId
+				? message.reads.includes($i?.id)
+				: message.isRead,
+		}"
+		:to="
+			message.groupId
+				? `/my/messaging/group/${message.groupId}`
+				: `/my/messaging/${getAcct(
+						isMe(message) ? message.recipient : message.user
+				  )}`
+		"
+	>
+		<div class="message _block">
+			<MkAvatar
+				class="avatar"
+				:user="
+					message.groupId
+						? message.user
+						: isMe(message)
 						? message.recipient
 						: message.user
-			"
-			:show-indicator="true"
-		/>
-		<header v-if="message.groupId">
-			<span class="name">{{ message.group.name }}</span>
-			<MkTime :time="message.createdAt" class="time"/>
-		</header>
-		<header v-else>
-			<span class="name"><MkUserName :user="isMe(message) ? message.recipient : message.user"/></span>
-			<span class="username">@{{ acct(isMe(message) ? message.recipient : message.user) }}</span>
-			<MkTime :time="message.createdAt" class="time"/>
-		</header>
-		<div class="body">
-			<p class="text">
-				<span v-if="isMe(message)" class="me">{{ i18n.ts.you }}: </span>
-				<Mfm v-if="message.text != null && message.text.length > 0" :text="message.text"/>
-				<span v-else> 📎</span>
-			</p>
+				"
+				:show-indicator="true"
+			/>
+			<header v-if="message.groupId">
+				<span class="name">{{ message.group.name }}</span>
+				<MkTime :time="message.createdAt" class="time" />
+			</header>
+			<header v-else>
+				<span class="name"
+					><MkUserName
+						:user="
+							isMe(message) ? message.recipient : message.user
+						"
+				/></span>
+				<span class="username"
+					>@{{
+						acct(isMe(message) ? message.recipient : message.user)
+					}}</span
+				>
+				<MkTime :time="message.createdAt" class="time" />
+			</header>
+			<div class="body">
+				<p class="text">
+					<span v-if="isMe(message)" class="me"
+						>{{ i18n.ts.you }}:
+					</span>
+					<Mfm
+						v-if="message.text != null && message.text.length > 0"
+						:text="message.text"
+					/>
+					<span v-else> 📎</span>
+				</p>
+			</div>
 		</div>
-	</div>
-</MkA>
+	</MkA>
 </template>
 
 <script lang="ts" setup>
-import * as Acct from 'calckey-js/built/acct';
-import { i18n } from '@/i18n';
-import { acct } from '@/filters/user';
-import { $i } from '@/account';
+import * as Acct from "calckey-js/built/acct";
+import { i18n } from "@/i18n";
+import { acct } from "@/filters/user";
+import { $i } from "@/account";
 
 const getAcct = Acct.toString;
 
@@ -138,7 +154,6 @@ function isMe(message): boolean {
 		}
 
 		> .body {
-
 			> .text {
 				display: block;
 				margin: 0 0 0 0;
diff --git a/packages/client/src/components/MkCheatSheetDialog.vue b/packages/client/src/components/MkCheatSheetDialog.vue
index b2ee6dd9aa..04b8cec6e2 100644
--- a/packages/client/src/components/MkCheatSheetDialog.vue
+++ b/packages/client/src/components/MkCheatSheetDialog.vue
@@ -1,28 +1,28 @@
 <template>
-<XModalWindow
-	ref="dialog"
-	:width="600"
-	@close="dialog?.close()"
-	@closed="$emit('closed')"
->
-	<template #header>{{ i18n.ts._mfm.cheatSheet }}</template>
+	<XModalWindow
+		ref="dialog"
+		:width="600"
+		@close="dialog?.close()"
+		@closed="$emit('closed')"
+	>
+		<template #header>{{ i18n.ts._mfm.cheatSheet }}</template>
 
-	<div class="_monolithic_">
-		<div class="_section">
-			<XCheatSheet/>
+		<div class="_monolithic_">
+			<div class="_section">
+				<XCheatSheet />
+			</div>
 		</div>
-	</div>
-</XModalWindow>
+	</XModalWindow>
 </template>
 
 <script lang="ts" setup>
-import XModalWindow from '@/components/MkModalWindow.vue';
-import XCheatSheet from '@/pages/mfm-cheat-sheet.vue';
-import { i18n } from '@/i18n';
+import XModalWindow from "@/components/MkModalWindow.vue";
+import XCheatSheet from "@/pages/mfm-cheat-sheet.vue";
+import { i18n } from "@/i18n";
 
 const emit = defineEmits<{
-	(ev: 'done'): void;
-	(ev: 'closed'): void;
+	(ev: "done"): void;
+	(ev: "closed"): void;
 }>();
 
 const dialog = $ref<InstanceType<typeof XModalWindow>>();
@@ -41,6 +41,4 @@ function close(res) {
 .fade-leave-to {
 	opacity: 0;
 }
-
 </style>
-
diff --git a/packages/client/src/components/MkCode.core.vue b/packages/client/src/components/MkCode.core.vue
index 934e0a158b..c397a950c1 100644
--- a/packages/client/src/components/MkCode.core.vue
+++ b/packages/client/src/components/MkCode.core.vue
@@ -1,12 +1,15 @@
 <template>
-<code v-if="inline" :class="`language-${prismLang}`" v-html="html"></code>
-<pre v-else :class="`language-${prismLang}`"><code :class="`language-${prismLang}`" v-html="html"></code></pre>
+	<code v-if="inline" :class="`language-${prismLang}`" v-html="html"></code>
+	<pre
+		v-else
+		:class="`language-${prismLang}`"
+	><code :class="`language-${prismLang}`" v-html="html"></code></pre>
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
-import Prism from 'prismjs';
-import 'prismjs/themes/prism-okaidia.css';
+import { computed } from "vue";
+import Prism from "prismjs";
+import "prismjs/themes/prism-okaidia.css";
 
 const props = defineProps<{
 	code: string;
@@ -14,6 +17,14 @@ const props = defineProps<{
 	inline?: boolean;
 }>();
 
-const prismLang = computed(() => Prism.languages[props.lang] ? props.lang : 'js');
-const html = computed(() => Prism.highlight(props.code, Prism.languages[prismLang.value], prismLang.value));
+const prismLang = computed(() =>
+	Prism.languages[props.lang] ? props.lang : "js"
+);
+const html = computed(() =>
+	Prism.highlight(
+		props.code,
+		Prism.languages[prismLang.value],
+		prismLang.value
+	)
+);
 </script>
diff --git a/packages/client/src/components/MkCode.vue b/packages/client/src/components/MkCode.vue
index 1640258d5b..f012b5312e 100644
--- a/packages/client/src/components/MkCode.vue
+++ b/packages/client/src/components/MkCode.vue
@@ -1,9 +1,9 @@
 <template>
-<XCode :code="code" :lang="lang" :inline="inline"/>
+	<XCode :code="code" :lang="lang" :inline="inline" />
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent } from 'vue';
+import { defineAsyncComponent } from "vue";
 
 defineProps<{
 	code: string;
@@ -11,5 +11,7 @@ defineProps<{
 	inline?: boolean;
 }>();
 
-const XCode = defineAsyncComponent(() => import('@/components/MkCode.core.vue'));
+const XCode = defineAsyncComponent(
+	() => import("@/components/MkCode.core.vue")
+);
 </script>
diff --git a/packages/client/src/components/MkContainer.vue b/packages/client/src/components/MkContainer.vue
index e601dd56b2..62c198cb16 100644
--- a/packages/client/src/components/MkContainer.vue
+++ b/packages/client/src/components/MkContainer.vue
@@ -1,35 +1,67 @@
 <template>
-<div v-size="{ max: [380] }" class="ukygtjoj _panel" :class="{ naked, thin, hideHeader: !showHeader, scrollable, closed: !showBody }">
-	<header v-if="showHeader" ref="header">
-		<div class="title"><slot name="header"></slot></div>
-		<div class="sub">
-			<slot name="func"></slot>
-			<button v-if="foldable" class="_button" @click="() => showBody = !showBody">
-				<template v-if="showBody"><i class="ph-caret-up ph-bold ph-lg"></i></template>
-				<template v-else><i class="ph-caret-down ph-bold ph-lg"></i></template>
-			</button>
-		</div>
-	</header>
-	<transition
-		:name="$store.state.animation ? 'container-toggle' : ''"
-		@enter="enter"
-		@after-enter="afterEnter"
-		@leave="leave"
-		@after-leave="afterLeave"
+	<div
+		v-size="{ max: [380] }"
+		class="ukygtjoj _panel"
+		:class="{
+			naked,
+			thin,
+			hideHeader: !showHeader,
+			scrollable,
+			closed: !showBody,
+		}"
 	>
-		<div v-show="showBody" ref="content" class="content" :class="{ omitted }">
-			<slot></slot>
-			<button v-if="omitted" class="fade _button" @click="() => { ignoreOmit = true; omitted = false; }">
-				<span>{{ i18n.ts.showMore }}</span>
-			</button>
-		</div>
-	</transition>
-</div>
+		<header v-if="showHeader" ref="header">
+			<div class="title"><slot name="header"></slot></div>
+			<div class="sub">
+				<slot name="func"></slot>
+				<button
+					v-if="foldable"
+					class="_button"
+					@click="() => (showBody = !showBody)"
+				>
+					<template v-if="showBody"
+						><i class="ph-caret-up ph-bold ph-lg"></i
+					></template>
+					<template v-else
+						><i class="ph-caret-down ph-bold ph-lg"></i
+					></template>
+				</button>
+			</div>
+		</header>
+		<transition
+			:name="$store.state.animation ? 'container-toggle' : ''"
+			@enter="enter"
+			@after-enter="afterEnter"
+			@leave="leave"
+			@after-leave="afterLeave"
+		>
+			<div
+				v-show="showBody"
+				ref="content"
+				class="content"
+				:class="{ omitted }"
+			>
+				<slot></slot>
+				<button
+					v-if="omitted"
+					class="fade _button"
+					@click="
+						() => {
+							ignoreOmit = true;
+							omitted = false;
+						}
+					"
+				>
+					<span>{{ i18n.ts.showMore }}</span>
+				</button>
+			</div>
+		</transition>
+	</div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
-import { i18n } from '@/i18n';
+import { defineComponent } from "vue";
+import { i18n } from "@/i18n";
 
 export default defineComponent({
 	props: {
@@ -78,22 +110,29 @@ export default defineComponent({
 		};
 	},
 	mounted() {
-		this.$watch('showBody', showBody => {
-			const headerHeight = this.showHeader ? this.$refs.header.offsetHeight : 0;
-			this.$el.style.minHeight = `${headerHeight}px`;
-			if (showBody) {
-				this.$el.style.flexBasis = 'auto';
-			} else {
-				this.$el.style.flexBasis = `${headerHeight}px`;
+		this.$watch(
+			"showBody",
+			(showBody) => {
+				const headerHeight = this.showHeader
+					? this.$refs.header.offsetHeight
+					: 0;
+				this.$el.style.minHeight = `${headerHeight}px`;
+				if (showBody) {
+					this.$el.style.flexBasis = "auto";
+				} else {
+					this.$el.style.flexBasis = `${headerHeight}px`;
+				}
+			},
+			{
+				immediate: true,
 			}
-		}, {
-			immediate: true,
-		});
+		);
 
-		this.$el.style.setProperty('--maxHeight', this.maxHeight + 'px');
+		this.$el.style.setProperty("--maxHeight", this.maxHeight + "px");
 
 		const calcOmit = () => {
-			if (this.omitted || this.ignoreOmit || this.maxHeight == null) return;
+			if (this.omitted || this.ignoreOmit || this.maxHeight == null)
+				return;
 			const height = this.$refs.content.offsetHeight;
 			this.omitted = height > this.maxHeight;
 		};
@@ -113,14 +152,14 @@ export default defineComponent({
 			const elementHeight = el.getBoundingClientRect().height;
 			el.style.height = 0;
 			el.offsetHeight; // reflow
-			el.style.height = elementHeight + 'px';
+			el.style.height = elementHeight + "px";
 		},
 		afterEnter(el) {
 			el.style.height = null;
 		},
 		leave(el) {
 			const elementHeight = el.getBoundingClientRect().height;
-			el.style.height = elementHeight + 'px';
+			el.style.height = elementHeight + "px";
 			el.offsetHeight; // reflow
 			el.style.height = 0;
 		},
@@ -132,7 +171,8 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.container-toggle-enter-active, .container-toggle-leave-active {
+.container-toggle-enter-active,
+.container-toggle-leave-active {
 	overflow-y: hidden;
 	transition: opacity 0.5s, height 0.5s !important;
 }
@@ -236,7 +276,8 @@ export default defineComponent({
 		}
 	}
 
-	&.max-width_380px, &.thin {
+	&.max-width_380px,
+	&.thin {
 		> header {
 			> .title {
 				padding: 8px 10px;
diff --git a/packages/client/src/components/MkContextMenu.vue b/packages/client/src/components/MkContextMenu.vue
index cfc9502b41..3e94dd59d0 100644
--- a/packages/client/src/components/MkContextMenu.vue
+++ b/packages/client/src/components/MkContextMenu.vue
@@ -1,17 +1,22 @@
 <template>
-<transition :name="$store.state.animation ? 'fade' : ''" appear>
-	<div ref="rootEl" class="nvlagfpb" :style="{ zIndex }" @contextmenu.prevent.stop="() => {}">
-		<MkMenu :items="items" :align="'left'" @close="$emit('closed')"/>
-	</div>
-</transition>
+	<transition :name="$store.state.animation ? 'fade' : ''" appear>
+		<div
+			ref="rootEl"
+			class="nvlagfpb"
+			:style="{ zIndex }"
+			@contextmenu.prevent.stop="() => {}"
+		>
+			<MkMenu :items="items" :align="'left'" @close="$emit('closed')" />
+		</div>
+	</transition>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onBeforeUnmount } from 'vue';
-import MkMenu from './MkMenu.vue';
-import { MenuItem } from './types/menu.vue';
-import contains from '@/scripts/contains';
-import * as os from '@/os';
+import { onMounted, onBeforeUnmount } from "vue";
+import MkMenu from "./MkMenu.vue";
+import { MenuItem } from "./types/menu.vue";
+import contains from "@/scripts/contains";
+import * as os from "@/os";
 
 const props = defineProps<{
 	items: MenuItem[];
@@ -19,12 +24,12 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-	(ev: 'closed'): void;
+	(ev: "closed"): void;
 }>();
 
 let rootEl = $ref<HTMLDivElement>();
 
-let zIndex = $ref<number>(os.claimZIndex('high'));
+let zIndex = $ref<number>(os.claimZIndex("high"));
 
 onMounted(() => {
 	let left = props.ev.pageX + 1; // 間違って右ダブルクリックした場合に意図せずアイテムがクリックされるのを防ぐため + 1
@@ -52,19 +57,19 @@ onMounted(() => {
 	rootEl.style.top = `${top}px`;
 	rootEl.style.left = `${left}px`;
 
-	for (const el of Array.from(document.querySelectorAll('body *'))) {
-		el.addEventListener('mousedown', onMousedown);
+	for (const el of Array.from(document.querySelectorAll("body *"))) {
+		el.addEventListener("mousedown", onMousedown);
 	}
 });
 
 onBeforeUnmount(() => {
-	for (const el of Array.from(document.querySelectorAll('body *'))) {
-		el.removeEventListener('mousedown', onMousedown);
+	for (const el of Array.from(document.querySelectorAll("body *"))) {
+		el.removeEventListener("mousedown", onMousedown);
 	}
 });
 
 function onMousedown(evt: Event) {
-	if (!contains(rootEl, evt.target) && (rootEl !== evt.target)) emit('closed');
+	if (!contains(rootEl, evt.target) && rootEl !== evt.target) emit("closed");
 }
 </script>
 
@@ -73,12 +78,15 @@ function onMousedown(evt: Event) {
 	position: absolute;
 }
 
-.fade-enter-active, .fade-leave-active {
-	transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
+.fade-enter-active,
+.fade-leave-active {
+	transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
+		transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
 	transform-origin: left top;
 }
 
-.fade-enter-from, .fade-leave-to {
+.fade-enter-from,
+.fade-leave-to {
 	opacity: 0;
 	transform: scale(0.9);
 }
diff --git a/packages/client/src/components/MkCropperDialog.vue b/packages/client/src/components/MkCropperDialog.vue
index ec1226262b..cce948572d 100644
--- a/packages/client/src/components/MkCropperDialog.vue
+++ b/packages/client/src/components/MkCropperDialog.vue
@@ -1,47 +1,55 @@
 <template>
-<XModalWindow
-	ref="dialogEl"
-	:width="800"
-	:height="500"
-	:scroll="false"
-	:with-ok-button="true"
-	@close="cancel()"
-	@ok="ok()"
-	@closed="$emit('closed')"
->
-	<template #header>{{ i18n.ts.cropImage }}</template>
-	<template #default="{ width, height }">
-		<div class="mk-cropper-dialog" :style="`--vw: ${width}px; --vh: ${height}px;`">
-			<Transition name="fade">
-				<div v-if="loading" class="loading">
-					<MkLoading/>
+	<XModalWindow
+		ref="dialogEl"
+		:width="800"
+		:height="500"
+		:scroll="false"
+		:with-ok-button="true"
+		@close="cancel()"
+		@ok="ok()"
+		@closed="$emit('closed')"
+	>
+		<template #header>{{ i18n.ts.cropImage }}</template>
+		<template #default="{ width, height }">
+			<div
+				class="mk-cropper-dialog"
+				:style="`--vw: ${width}px; --vh: ${height}px;`"
+			>
+				<Transition name="fade">
+					<div v-if="loading" class="loading">
+						<MkLoading />
+					</div>
+				</Transition>
+				<div class="container">
+					<img
+						ref="imgEl"
+						:src="imgUrl"
+						style="display: none"
+						@load="onImageLoad"
+					/>
 				</div>
-			</Transition>
-			<div class="container">
-				<img ref="imgEl" :src="imgUrl" style="display: none;" @load="onImageLoad">
 			</div>
-		</div>
-	</template>
-</XModalWindow>
+		</template>
+	</XModalWindow>
 </template>
 
 <script lang="ts" setup>
-import { nextTick, onMounted } from 'vue';
-import * as misskey from 'calckey-js';
-import Cropper from 'cropperjs';
-import tinycolor from 'tinycolor2';
-import XModalWindow from '@/components/MkModalWindow.vue';
-import * as os from '@/os';
-import { $i } from '@/account';
-import { defaultStore } from '@/store';
-import { apiUrl, url } from '@/config';
-import { query } from '@/scripts/url';
-import { i18n } from '@/i18n';
+import { nextTick, onMounted } from "vue";
+import * as misskey from "calckey-js";
+import Cropper from "cropperjs";
+import tinycolor from "tinycolor2";
+import XModalWindow from "@/components/MkModalWindow.vue";
+import * as os from "@/os";
+import { $i } from "@/account";
+import { defaultStore } from "@/store";
+import { apiUrl, url } from "@/config";
+import { query } from "@/scripts/url";
+import { i18n } from "@/i18n";
 
 const emit = defineEmits<{
-	(ev: 'ok', cropped: misskey.entities.DriveFile): void;
-	(ev: 'cancel'): void;
-	(ev: 'closed'): void;
+	(ev: "ok", cropped: misskey.entities.DriveFile): void;
+	(ev: "cancel"): void;
+	(ev: "closed"): void;
 }>();
 
 const props = defineProps<{
@@ -60,24 +68,24 @@ let loading = $ref(true);
 const ok = async () => {
 	const promise = new Promise<misskey.entities.DriveFile>(async (res) => {
 		const croppedCanvas = await cropper?.getCropperSelection()?.$toCanvas();
-		croppedCanvas.toBlob(blob => {
+		croppedCanvas.toBlob((blob) => {
 			const formData = new FormData();
-			formData.append('file', blob);
+			formData.append("file", blob);
 			if (defaultStore.state.uploadFolder) {
-				formData.append('folderId', defaultStore.state.uploadFolder);
+				formData.append("folderId", defaultStore.state.uploadFolder);
 			}
 
-			fetch(apiUrl + '/drive/files/create', {
-				method: 'POST',
+			fetch(apiUrl + "/drive/files/create", {
+				method: "POST",
 				body: formData,
 				headers: {
 					authorization: `Bearer ${$i.token}`,
 				},
 			})
-			.then(response => response.json())
-			.then(f => {
-				res(f);
-			});
+				.then((response) => response.json())
+				.then((f) => {
+					res(f);
+				});
 		});
 	});
 
@@ -85,12 +93,12 @@ const ok = async () => {
 
 	const f = await promise;
 
-	emit('ok', f);
+	emit("ok", f);
 	dialogEl.close();
 };
 
 const cancel = () => {
-	emit('cancel');
+	emit("cancel");
 	dialogEl.close();
 };
 
@@ -98,31 +106,32 @@ const onImageLoad = () => {
 	loading = false;
 
 	if (cropper) {
-		cropper.getCropperImage()!.$center('contain');
+		cropper.getCropperImage()!.$center("contain");
 		cropper.getCropperSelection()!.$center();
 	}
 };
 
 onMounted(() => {
-	cropper = new Cropper(imgEl, {
-	});
+	cropper = new Cropper(imgEl, {});
 
 	const computedStyle = getComputedStyle(document.documentElement);
 
 	const selection = cropper.getCropperSelection()!;
-	selection.themeColor = tinycolor(computedStyle.getPropertyValue('--accent')).toHexString();
+	selection.themeColor = tinycolor(
+		computedStyle.getPropertyValue("--accent")
+	).toHexString();
 	selection.aspectRatio = props.aspectRatio;
 	selection.initialAspectRatio = props.aspectRatio;
 	selection.outlined = true;
 
 	window.setTimeout(() => {
-		cropper.getCropperImage()!.$center('contain');
+		cropper.getCropperImage()!.$center("contain");
 		selection.$center();
 	}, 100);
 
 	// モーダルオープンアニメーションが終わったあとで再度調整
 	window.setTimeout(() => {
-		cropper.getCropperImage()!.$center('contain');
+		cropper.getCropperImage()!.$center("contain");
 		selection.$center();
 	}, 500);
 });
diff --git a/packages/client/src/components/MkCwButton.vue b/packages/client/src/components/MkCwButton.vue
index 909f0cca91..b4a69ac6a5 100644
--- a/packages/client/src/components/MkCwButton.vue
+++ b/packages/client/src/components/MkCwButton.vue
@@ -1,16 +1,16 @@
 <template>
-<button class="nrvgflfu _button" @click.stop="toggle">
-	<b>{{ modelValue ? i18n.ts._cw.hide : i18n.ts._cw.show }}</b>
-	<span v-if="!modelValue">{{ label }}</span>
-</button>
+	<button class="nrvgflfu _button" @click.stop="toggle">
+		<b>{{ modelValue ? i18n.ts._cw.hide : i18n.ts._cw.show }}</b>
+		<span v-if="!modelValue">{{ label }}</span>
+	</button>
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
-import { length } from 'stringz';
-import * as misskey from 'calckey-js';
-import { concat } from '@/scripts/array';
-import { i18n } from '@/i18n';
+import { computed } from "vue";
+import { length } from "stringz";
+import * as misskey from "calckey-js";
+import { concat } from "@/scripts/array";
+import { i18n } from "@/i18n";
 
 const props = defineProps<{
 	modelValue: boolean;
@@ -18,19 +18,23 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-	(ev: 'update:modelValue', v: boolean): void;
+	(ev: "update:modelValue", v: boolean): void;
 }>();
 
 const label = computed(() => {
 	return concat([
-		props.note.text ? [i18n.t('_cw.chars', { count: length(props.note.text) })] : [],
-		props.note.files && props.note.files.length !== 0 ? [i18n.t('_cw.files', { count: props.note.files.length }) ] : [],
-		props.note.poll != null ? [i18n.ts.poll] : []
-	] as string[][]).join(' / ');
+		props.note.text
+			? [i18n.t("_cw.chars", { count: length(props.note.text) })]
+			: [],
+		props.note.files && props.note.files.length !== 0
+			? [i18n.t("_cw.files", { count: props.note.files.length })]
+			: [],
+		props.note.poll != null ? [i18n.ts.poll] : [],
+	] as string[][]).join(" / ");
 });
 
 const toggle = () => {
-	emit('update:modelValue', !props.modelValue);
+	emit("update:modelValue", !props.modelValue);
 };
 </script>
 
@@ -60,11 +64,11 @@ const toggle = () => {
 		margin-left: 4px;
 
 		&:before {
-			content: '(';
+			content: "(";
 		}
 
 		&:after {
-			content: ')';
+			content: ")";
 		}
 	}
 }
diff --git a/packages/client/src/components/MkDateSeparatedList.vue b/packages/client/src/components/MkDateSeparatedList.vue
index 41e7ac376d..29c7c518a9 100644
--- a/packages/client/src/components/MkDateSeparatedList.vue
+++ b/packages/client/src/components/MkDateSeparatedList.vue
@@ -1,19 +1,21 @@
 <script lang="ts">
-import { defineComponent, h, PropType, TransitionGroup } from 'vue';
-import MkAd from '@/components/global/MkAd.vue';
-import { i18n } from '@/i18n';
-import { defaultStore } from '@/store';
+import { defineComponent, h, PropType, TransitionGroup } from "vue";
+import MkAd from "@/components/global/MkAd.vue";
+import { i18n } from "@/i18n";
+import { defaultStore } from "@/store";
 
 export default defineComponent({
 	props: {
 		items: {
-			type: Array as PropType<{ id: string; createdAt: string; _shouldInsertAd_: boolean; }[]>,
+			type: Array as PropType<
+				{ id: string; createdAt: string; _shouldInsertAd_: boolean }[]
+			>,
 			required: true,
 		},
 		direction: {
 			type: String,
 			required: false,
-			default: 'down',
+			default: "down",
 		},
 		reversed: {
 			type: Boolean,
@@ -36,7 +38,7 @@ export default defineComponent({
 		function getDateText(time: string) {
 			const date = new Date(time).getDate();
 			const month = new Date(time).getMonth() + 1;
-			return i18n.t('monthAndDay', {
+			return i18n.t("monthAndDay", {
 				month: month.toString(),
 				day: date.toString(),
 			});
@@ -44,64 +46,81 @@ export default defineComponent({
 
 		if (props.items.length === 0) return;
 
-		const renderChildren = () => props.items.map((item, i) => {
-			if (!slots || !slots.default) return;
+		const renderChildren = () =>
+			props.items.map((item, i) => {
+				if (!slots || !slots.default) return;
 
-			const el = slots.default({
-				item: item,
-			})[0];
-			if (el.key == null && item.id) el.key = item.id;
+				const el = slots.default({
+					item: item,
+				})[0];
+				if (el.key == null && item.id) el.key = item.id;
 
-			if (
-				i !== props.items.length - 1 &&
-				new Date(item.createdAt).getDate() !== new Date(props.items[i + 1].createdAt).getDate()
-			) {
-				const separator = h('div', {
-					class: 'separator',
-					key: item.id + ':separator',
-				}, h('p', {
-					class: 'date',
-				}, [
-					h('span', [
-						h('i', {
-							class: 'ph-caret-up ph-bold ph-lg icon',
-						}),
-						getDateText(item.createdAt),
-					]),
-					h('span', [
-						getDateText(props.items[i + 1].createdAt),
-						h('i', {
-							class: 'ph-caret-down ph-bold ph-lg icon',
-						}),
-					]),
-				]));
+				if (
+					i !== props.items.length - 1 &&
+					new Date(item.createdAt).getDate() !==
+						new Date(props.items[i + 1].createdAt).getDate()
+				) {
+					const separator = h(
+						"div",
+						{
+							class: "separator",
+							key: item.id + ":separator",
+						},
+						h(
+							"p",
+							{
+								class: "date",
+							},
+							[
+								h("span", [
+									h("i", {
+										class: "ph-caret-up ph-bold ph-lg icon",
+									}),
+									getDateText(item.createdAt),
+								]),
+								h("span", [
+									getDateText(props.items[i + 1].createdAt),
+									h("i", {
+										class: "ph-caret-down ph-bold ph-lg icon",
+									}),
+								]),
+							]
+						)
+					);
 
-				return [el, separator];
-			} else {
-				if (props.ad && item._shouldInsertAd_) {
-					return [h(MkAd, {
-						class: 'a', // advertiseの意(ブロッカー対策)
-						key: item.id + ':ad',
-						prefer: ['horizontal', 'horizontal-big'],
-					}), el];
+					return [el, separator];
 				} else {
-					return el;
+					if (props.ad && item._shouldInsertAd_) {
+						return [
+							h(MkAd, {
+								class: "a", // advertiseの意(ブロッカー対策)
+								key: item.id + ":ad",
+								prefer: ["horizontal", "horizontal-big"],
+							}),
+							el,
+						];
+					} else {
+						return el;
+					}
 				}
-			}
-		});
+			});
 
-		return () => h(
-			defaultStore.state.animation ? TransitionGroup : 'div',
-			defaultStore.state.animation ? {
-				class: 'sqadhkmv' + (props.noGap ? ' noGap' : ''),
-				name: 'list',
-				tag: 'div',
-				'data-direction': props.direction,
-				'data-reversed': props.reversed ? 'true' : 'false',
-			} : {
-				class: 'sqadhkmv' + (props.noGap ? ' noGap' : ''),
-			},
-			{ default: renderChildren });
+		return () =>
+			h(
+				defaultStore.state.animation ? TransitionGroup : "div",
+				defaultStore.state.animation
+					? {
+							class: "sqadhkmv" + (props.noGap ? " noGap" : ""),
+							name: "list",
+							tag: "div",
+							"data-direction": props.direction,
+							"data-reversed": props.reversed ? "true" : "false",
+					  }
+					: {
+							class: "sqadhkmv" + (props.noGap ? " noGap" : ""),
+					  },
+				{ default: renderChildren }
+			);
 	},
 });
 </script>
@@ -121,7 +140,8 @@ export default defineComponent({
 	}
 
 	> .list-enter-active {
-		transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.7s cubic-bezier(0.23, 1, 0.32, 1);
+		transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1),
+			opacity 0.7s cubic-bezier(0.23, 1, 0.32, 1);
 	}
 
 	&[data-direction="up"] {
diff --git a/packages/client/src/components/MkDialog.vue b/packages/client/src/components/MkDialog.vue
index de9cbe8101..557442b5b5 100644
--- a/packages/client/src/components/MkDialog.vue
+++ b/packages/client/src/components/MkDialog.vue
@@ -1,63 +1,171 @@
 <template>
-	<MkModal ref="modal" :prefer-type="'dialog'" :z-priority="'high'" @click="done(true)" @closed="emit('closed')">
+	<MkModal
+		ref="modal"
+		:prefer-type="'dialog'"
+		:z-priority="'high'"
+		@click="done(true)"
+		@closed="emit('closed')"
+	>
 		<div :class="$style.root">
 			<div v-if="icon" :class="$style.icon">
 				<i :class="icon"></i>
 			</div>
-			<div v-else-if="!input && !select" :class="[$style.icon, $style['type_' + type]]">
-				<i v-if="type === 'success'" :class="$style.iconInner" class="ph-check ph-bold ph-lg"></i>
-				<i v-else-if="type === 'error'" :class="$style.iconInner" class="ph-circle-wavy-warning ph-bold ph-lg"></i>
-				<i v-else-if="type === 'warning'" :class="$style.iconInner" class="ph-warning ph-bold ph-lg"></i>
-				<i v-else-if="type === 'info'" :class="$style.iconInner" class="ph-info ph-bold ph-lg"></i>
-				<i v-else-if="type === 'question'" :class="$style.iconInner" class="ph-circle-question ph-bold ph-lg"></i>
-				<MkLoading v-else-if="type === 'waiting'" :class="$style.iconInner" :em="true"/>
+			<div
+				v-else-if="!input && !select"
+				:class="[$style.icon, $style['type_' + type]]"
+			>
+				<i
+					v-if="type === 'success'"
+					:class="$style.iconInner"
+					class="ph-check ph-bold ph-lg"
+				></i>
+				<i
+					v-else-if="type === 'error'"
+					:class="$style.iconInner"
+					class="ph-circle-wavy-warning ph-bold ph-lg"
+				></i>
+				<i
+					v-else-if="type === 'warning'"
+					:class="$style.iconInner"
+					class="ph-warning ph-bold ph-lg"
+				></i>
+				<i
+					v-else-if="type === 'info'"
+					:class="$style.iconInner"
+					class="ph-info ph-bold ph-lg"
+				></i>
+				<i
+					v-else-if="type === 'question'"
+					:class="$style.iconInner"
+					class="ph-circle-question ph-bold ph-lg"
+				></i>
+				<MkLoading
+					v-else-if="type === 'waiting'"
+					:class="$style.iconInner"
+					:em="true"
+				/>
 			</div>
-			<header v-if="title" :class="$style.title"><Mfm :text="title"/></header>
-			<header v-if="title == null && (input && input.type === 'password')" :class="$style.title"><Mfm :text="i18n.ts.password"/></header>
-			<div v-if="text" :class="$style.text"><Mfm :text="text"/></div>
-			<MkInput v-if="input && input.type !== 'paragraph'" v-model="inputValue" autofocus :type="input.type || 'text'" :placeholder="input.placeholder || undefined" @keydown="onInputKeydown">
-				<template v-if="input.type === 'password'" #prefix><i class="ph-password ph-bold ph-lg"></i></template>
+			<header v-if="title" :class="$style.title">
+				<Mfm :text="title" />
+			</header>
+			<header
+				v-if="title == null && input && input.type === 'password'"
+				:class="$style.title"
+			>
+				<Mfm :text="i18n.ts.password" />
+			</header>
+			<div v-if="text" :class="$style.text"><Mfm :text="text" /></div>
+			<MkInput
+				v-if="input && input.type !== 'paragraph'"
+				v-model="inputValue"
+				autofocus
+				:type="input.type || 'text'"
+				:placeholder="input.placeholder || undefined"
+				@keydown="onInputKeydown"
+			>
+				<template v-if="input.type === 'password'" #prefix
+					><i class="ph-password ph-bold ph-lg"></i
+				></template>
 			</MkInput>
-			<MkTextarea v-if="input && input.type === 'paragraph'" v-model="inputValue" autofocus :type="paragraph" :placeholder="input.placeholder || undefined">
+			<MkTextarea
+				v-if="input && input.type === 'paragraph'"
+				v-model="inputValue"
+				autofocus
+				:type="paragraph"
+				:placeholder="input.placeholder || undefined"
+			>
 			</MkTextarea>
 			<MkSelect v-if="select" v-model="selectedValue" autofocus>
 				<template v-if="select.items">
-					<option v-for="item in select.items" :value="item.value">{{ item.text }}</option>
+					<option v-for="item in select.items" :value="item.value">
+						{{ item.text }}
+					</option>
 				</template>
 				<template v-else>
-					<optgroup v-for="groupedItem in select.groupedItems" :label="groupedItem.label">
-						<option v-for="item in groupedItem.items" :value="item.value">{{ item.text }}</option>
+					<optgroup
+						v-for="groupedItem in select.groupedItems"
+						:label="groupedItem.label"
+					>
+						<option
+							v-for="item in groupedItem.items"
+							:value="item.value"
+						>
+							{{ item.text }}
+						</option>
 					</optgroup>
 				</template>
 			</MkSelect>
-			<div v-if="(showOkButton || showCancelButton) && !actions" :class="$style.buttons">
+			<div
+				v-if="(showOkButton || showCancelButton) && !actions"
+				:class="$style.buttons"
+			>
 				<div v-if="!isYesNo">
-					<MkButton v-if="showOkButton" inline primary :autofocus="!input && !select" @click="ok">{{ (showCancelButton || input || select) ? i18n.ts.ok : i18n.ts.gotIt }}</MkButton>
-					<MkButton v-if="showCancelButton || input || select" inline @click="cancel">{{ i18n.ts.cancel }}</MkButton>
+					<MkButton
+						v-if="showOkButton"
+						inline
+						primary
+						:autofocus="!input && !select"
+						@click="ok"
+						>{{
+							showCancelButton || input || select
+								? i18n.ts.ok
+								: i18n.ts.gotIt
+						}}</MkButton
+					>
+					<MkButton
+						v-if="showCancelButton || input || select"
+						inline
+						@click="cancel"
+						>{{ i18n.ts.cancel }}</MkButton
+					>
 				</div>
 				<div v-else>
-					<MkButton v-if="showOkButton" inline primary :autofocus="!input && !select" @click="ok">{{ i18n.ts.yes }}</MkButton>
-					<MkButton v-if="showCancelButton || input || select" inline @click="cancel">{{ i18n.ts.no }}</MkButton>
+					<MkButton
+						v-if="showOkButton"
+						inline
+						primary
+						:autofocus="!input && !select"
+						@click="ok"
+						>{{ i18n.ts.yes }}</MkButton
+					>
+					<MkButton
+						v-if="showCancelButton || input || select"
+						inline
+						@click="cancel"
+						>{{ i18n.ts.no }}</MkButton
+					>
 				</div>
 			</div>
 			<div v-if="actions" :class="$style.buttons">
-				<MkButton v-for="action in actions" :key="action.text" inline :primary="action.primary" @click="() => { action.callback(); modal?.close(); }">{{ action.text }}</MkButton>
+				<MkButton
+					v-for="action in actions"
+					:key="action.text"
+					inline
+					:primary="action.primary"
+					@click="
+						() => {
+							action.callback();
+							modal?.close();
+						}
+					"
+					>{{ action.text }}</MkButton
+				>
 			</div>
 		</div>
 	</MkModal>
 </template>
 
 <script lang="ts" setup>
-import { onBeforeUnmount, onMounted, ref, shallowRef } from 'vue';
-import MkModal from '@/components/MkModal.vue';
-import MkButton from '@/components/MkButton.vue';
-import MkInput from '@/components/form/input.vue';
-import MkTextarea from '@/components/form/textarea.vue';
-import MkSelect from '@/components/form/select.vue';
-import { i18n } from '@/i18n';
+import { onBeforeUnmount, onMounted, ref, shallowRef } from "vue";
+import MkModal from "@/components/MkModal.vue";
+import MkButton from "@/components/MkButton.vue";
+import MkInput from "@/components/form/input.vue";
+import MkTextarea from "@/components/form/textarea.vue";
+import MkSelect from "@/components/form/select.vue";
+import { i18n } from "@/i18n";
 
 type Input = {
-	type: HTMLInputElement['type'];
+	type: HTMLInputElement["type"];
 	placeholder?: string | null;
 	default: any | null;
 };
@@ -77,37 +185,46 @@ type Select = {
 	default: string | null;
 };
 
-const props = withDefaults(defineProps<{
-	type?: 'success' | 'error' | 'warning' | 'info' | 'question' | 'waiting';
-	title: string;
-	text?: string;
-	input?: Input;
-	select?: Select;
-	icon?: string;
-	actions?: {
-		text: string;
-		primary?: boolean,
-		callback: (...args: any[]) => void;
-	}[];
-	showOkButton?: boolean;
-	showCancelButton?: boolean;
-	isYesNo?: boolean;
+const props = withDefaults(
+	defineProps<{
+		type?:
+			| "success"
+			| "error"
+			| "warning"
+			| "info"
+			| "question"
+			| "waiting";
+		title: string;
+		text?: string;
+		input?: Input;
+		select?: Select;
+		icon?: string;
+		actions?: {
+			text: string;
+			primary?: boolean;
+			callback: (...args: any[]) => void;
+		}[];
+		showOkButton?: boolean;
+		showCancelButton?: boolean;
+		isYesNo?: boolean;
 
-	cancelableByBgClick?: boolean;
-	okText?: string;
-	cancelText?: string;
-}>(), {
-	type: 'info',
-	showOkButton: true,
-	showCancelButton: false,
-	isYesNo: false,
+		cancelableByBgClick?: boolean;
+		okText?: string;
+		cancelText?: string;
+	}>(),
+	{
+		type: "info",
+		showOkButton: true,
+		showCancelButton: false,
+		isYesNo: false,
 
-	cancelableByBgClick: true,
-});
+		cancelableByBgClick: true,
+	}
+);
 
 const emit = defineEmits<{
-	(ev: 'done', v: { canceled: boolean; result: any }): void;
-	(ev: 'closed'): void;
+	(ev: "done", v: { canceled: boolean; result: any }): void;
+	(ev: "closed"): void;
 }>();
 
 const modal = shallowRef<InstanceType<typeof MkModal>>();
@@ -116,17 +233,18 @@ const inputValue = ref(props.input?.default || null);
 const selectedValue = ref(props.select?.default || null);
 
 function done(canceled: boolean, result?) {
-	emit('done', { canceled, result });
+	emit("done", { canceled, result });
 	modal.value?.close();
 }
 
 async function ok() {
 	if (!props.showOkButton) return;
 
-	const result =
-		props.input ? inputValue.value :
-		props.select ? selectedValue.value :
-		true;
+	const result = props.input
+		? inputValue.value
+		: props.select
+		? selectedValue.value
+		: true;
 	done(false, result);
 }
 
@@ -139,11 +257,11 @@ function onBgClick() {
 }
 */
 function onKeydown(evt: KeyboardEvent) {
-	if (evt.key === 'Escape') cancel();
+	if (evt.key === "Escape") cancel();
 }
 
 function onInputKeydown(evt: KeyboardEvent) {
-	if (evt.key === 'Enter') {
+	if (evt.key === "Enter") {
 		evt.preventDefault();
 		evt.stopPropagation();
 		ok();
@@ -151,11 +269,11 @@ function onInputKeydown(evt: KeyboardEvent) {
 }
 
 onMounted(() => {
-	document.addEventListener('keydown', onKeydown);
+	document.addEventListener("keydown", onKeydown);
 });
 
 onBeforeUnmount(() => {
-	document.removeEventListener('keydown', onKeydown);
+	document.removeEventListener("keydown", onKeydown);
 });
 </script>
 
diff --git a/packages/client/src/components/MkDigitalClock.vue b/packages/client/src/components/MkDigitalClock.vue
index 9ed8d63d19..c4edecbeca 100644
--- a/packages/client/src/components/MkDigitalClock.vue
+++ b/packages/client/src/components/MkDigitalClock.vue
@@ -1,33 +1,36 @@
 <template>
-<span class="zjobosdg">
-	<span v-text="hh"></span>
-	<span class="colon" :class="{ showColon }">:</span>
-	<span v-text="mm"></span>
-	<span v-if="showS" class="colon" :class="{ showColon }">:</span>
-	<span v-if="showS" v-text="ss"></span>
-	<span v-if="showMs" class="colon" :class="{ showColon }">:</span>
-	<span v-if="showMs" v-text="ms"></span>
-</span>
+	<span class="zjobosdg">
+		<span v-text="hh"></span>
+		<span class="colon" :class="{ showColon }">:</span>
+		<span v-text="mm"></span>
+		<span v-if="showS" class="colon" :class="{ showColon }">:</span>
+		<span v-if="showS" v-text="ss"></span>
+		<span v-if="showMs" class="colon" :class="{ showColon }">:</span>
+		<span v-if="showMs" v-text="ms"></span>
+	</span>
 </template>
 
 <script lang="ts" setup>
-import { onUnmounted, ref, watch } from 'vue';
+import { onUnmounted, ref, watch } from "vue";
 
-const props = withDefaults(defineProps<{
-	showS?: boolean;
-	showMs?: boolean;
-	offset?: number;
-}>(), {
-	showS: true,
-	showMs: false,
-	offset: 0 - new Date().getTimezoneOffset(),
-});
+const props = withDefaults(
+	defineProps<{
+		showS?: boolean;
+		showMs?: boolean;
+		offset?: number;
+	}>(),
+	{
+		showS: true,
+		showMs: false,
+		offset: 0 - new Date().getTimezoneOffset(),
+	}
+);
 
 let intervalId;
-const hh = ref('');
-const mm = ref('');
-const ss = ref('');
-const ms = ref('');
+const hh = ref("");
+const mm = ref("");
+const ss = ref("");
+const ms = ref("");
 const showColon = ref(false);
 let prevSec: number | null = null;
 
@@ -41,21 +44,29 @@ watch(showColon, (v) => {
 
 const tick = () => {
 	const now = new Date();
-	now.setMinutes(now.getMinutes() + (new Date().getTimezoneOffset() + props.offset));
-	hh.value = now.getHours().toString().padStart(2, '0');
-	mm.value = now.getMinutes().toString().padStart(2, '0');
-	ss.value = now.getSeconds().toString().padStart(2, '0');
-	ms.value = Math.floor(now.getMilliseconds() / 10).toString().padStart(2, '0');
+	now.setMinutes(
+		now.getMinutes() + (new Date().getTimezoneOffset() + props.offset)
+	);
+	hh.value = now.getHours().toString().padStart(2, "0");
+	mm.value = now.getMinutes().toString().padStart(2, "0");
+	ss.value = now.getSeconds().toString().padStart(2, "0");
+	ms.value = Math.floor(now.getMilliseconds() / 10)
+		.toString()
+		.padStart(2, "0");
 	if (now.getSeconds() !== prevSec) showColon.value = true;
 	prevSec = now.getSeconds();
 };
 
 tick();
 
-watch(() => props.showMs, () => {
-	if (intervalId) window.clearInterval(intervalId);
-	intervalId = window.setInterval(tick, props.showMs ? 10 : 1000);
-}, { immediate: true });
+watch(
+	() => props.showMs,
+	() => {
+		if (intervalId) window.clearInterval(intervalId);
+		intervalId = window.setInterval(tick, props.showMs ? 10 : 1000);
+	},
+	{ immediate: true }
+);
 
 onUnmounted(() => {
 	window.clearInterval(intervalId);
diff --git a/packages/client/src/components/MkDrive.file.vue b/packages/client/src/components/MkDrive.file.vue
index 4ebf741994..667a5c754c 100644
--- a/packages/client/src/components/MkDrive.file.vue
+++ b/packages/client/src/components/MkDrive.file.vue
@@ -1,102 +1,131 @@
 <template>
-<div
-	class="ncvczrfv"
-	:class="{ isSelected }"
-	draggable="true"
-	:title="title"
-	@click="onClick"
-	@contextmenu.stop="onContextmenu"
-	@dragstart="onDragstart"
-	@dragend="onDragend"
->
-	<div v-if="$i?.avatarId == file.id" class="label">
-		<img src="/client-assets/label.svg"/>
-		<p>{{ i18n.ts.avatar }}</p>
-	</div>
-	<div v-if="$i?.bannerId == file.id" class="label">
-		<img src="/client-assets/label.svg"/>
-		<p>{{ i18n.ts.banner }}</p>
-	</div>
-	<div v-if="file.isSensitive" class="label red">
-		<img src="/client-assets/label-red.svg"/>
-		<p>{{ i18n.ts.nsfw }}</p>
-	</div>
+	<div
+		class="ncvczrfv"
+		:class="{ isSelected }"
+		draggable="true"
+		:title="title"
+		@click="onClick"
+		@contextmenu.stop="onContextmenu"
+		@dragstart="onDragstart"
+		@dragend="onDragend"
+	>
+		<div v-if="$i?.avatarId == file.id" class="label">
+			<img src="/client-assets/label.svg" />
+			<p>{{ i18n.ts.avatar }}</p>
+		</div>
+		<div v-if="$i?.bannerId == file.id" class="label">
+			<img src="/client-assets/label.svg" />
+			<p>{{ i18n.ts.banner }}</p>
+		</div>
+		<div v-if="file.isSensitive" class="label red">
+			<img src="/client-assets/label-red.svg" />
+			<p>{{ i18n.ts.nsfw }}</p>
+		</div>
 
-	<MkDriveFileThumbnail class="thumbnail" :file="file" fit="contain"/>
+		<MkDriveFileThumbnail class="thumbnail" :file="file" fit="contain" />
 
-	<p class="name">
-		<span>{{ file.name.lastIndexOf('.') != -1 ? file.name.substr(0, file.name.lastIndexOf('.')) : file.name }}</span>
-		<span v-if="file.name.lastIndexOf('.') != -1" class="ext">{{ file.name.substr(file.name.lastIndexOf('.')) }}</span>
-	</p>
-</div>
+		<p class="name">
+			<span>{{
+				file.name.lastIndexOf(".") != -1
+					? file.name.substr(0, file.name.lastIndexOf("."))
+					: file.name
+			}}</span>
+			<span v-if="file.name.lastIndexOf('.') != -1" class="ext">{{
+				file.name.substr(file.name.lastIndexOf("."))
+			}}</span>
+		</p>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { computed, defineAsyncComponent, ref } from 'vue';
-import * as Misskey from 'calckey-js';
-import copyToClipboard from '@/scripts/copy-to-clipboard';
-import MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue';
-import bytes from '@/filters/bytes';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { $i } from '@/account';
+import { computed, defineAsyncComponent, ref } from "vue";
+import * as Misskey from "calckey-js";
+import copyToClipboard from "@/scripts/copy-to-clipboard";
+import MkDriveFileThumbnail from "@/components/MkDriveFileThumbnail.vue";
+import bytes from "@/filters/bytes";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
+import { $i } from "@/account";
 
-const props = withDefaults(defineProps<{
-	file: Misskey.entities.DriveFile;
-	isSelected?: boolean;
-	selectMode?: boolean;
-}>(), {
-	isSelected: false,
-	selectMode: false,
-});
+const props = withDefaults(
+	defineProps<{
+		file: Misskey.entities.DriveFile;
+		isSelected?: boolean;
+		selectMode?: boolean;
+	}>(),
+	{
+		isSelected: false,
+		selectMode: false,
+	}
+);
 
 const emit = defineEmits<{
-	(ev: 'chosen', r: Misskey.entities.DriveFile): void;
-	(ev: 'dragstart'): void;
-	(ev: 'dragend'): void;
+	(ev: "chosen", r: Misskey.entities.DriveFile): void;
+	(ev: "dragstart"): void;
+	(ev: "dragend"): void;
 }>();
 
 const isDragging = ref(false);
 
-const title = computed(() => `${props.file.name}\n${props.file.type} ${bytes(props.file.size)}`);
+const title = computed(
+	() => `${props.file.name}\n${props.file.type} ${bytes(props.file.size)}`
+);
 
 function getMenu() {
-	return [{
-		text: i18n.ts.rename,
-		icon: 'ph-cursor-text ph-bold ph-lg',
-		action: rename,
-	}, {
-		text: props.file.isSensitive ? i18n.ts.unmarkAsSensitive : i18n.ts.markAsSensitive,
-		icon: props.file.isSensitive ? 'ph-eye ph-bold ph-lg' : 'ph-eye-slash ph-bold ph-lg',
-		action: toggleSensitive,
-	}, {
-		text: i18n.ts.describeFile,
-		icon: 'ph-cursor-text ph-bold ph-lg',
-		action: describe,
-	}, null, {
-		text: i18n.ts.copyUrl,
-		icon: 'ph-link-simple ph-bold ph-lg',
-		action: copyUrl,
-	}, {
-		type: 'a',
-		href: props.file.url,
-		target: '_blank',
-		text: i18n.ts.download,
-		icon: 'ph-download-simple ph-bold ph-lg',
-		download: props.file.name,
-	}, null, {
-		text: i18n.ts.delete,
-		icon: 'ph-trash ph-bold ph-lg',
-		danger: true,
-		action: deleteFile,
-	}];
+	return [
+		{
+			text: i18n.ts.rename,
+			icon: "ph-cursor-text ph-bold ph-lg",
+			action: rename,
+		},
+		{
+			text: props.file.isSensitive
+				? i18n.ts.unmarkAsSensitive
+				: i18n.ts.markAsSensitive,
+			icon: props.file.isSensitive
+				? "ph-eye ph-bold ph-lg"
+				: "ph-eye-slash ph-bold ph-lg",
+			action: toggleSensitive,
+		},
+		{
+			text: i18n.ts.describeFile,
+			icon: "ph-cursor-text ph-bold ph-lg",
+			action: describe,
+		},
+		null,
+		{
+			text: i18n.ts.copyUrl,
+			icon: "ph-link-simple ph-bold ph-lg",
+			action: copyUrl,
+		},
+		{
+			type: "a",
+			href: props.file.url,
+			target: "_blank",
+			text: i18n.ts.download,
+			icon: "ph-download-simple ph-bold ph-lg",
+			download: props.file.name,
+		},
+		null,
+		{
+			text: i18n.ts.delete,
+			icon: "ph-trash ph-bold ph-lg",
+			danger: true,
+			action: deleteFile,
+		},
+	];
 }
 
 function onClick(ev: MouseEvent) {
 	if (props.selectMode) {
-		emit('chosen', props.file);
+		emit("chosen", props.file);
 	} else {
-		os.popupMenu(getMenu(), (ev.currentTarget ?? ev.target ?? undefined) as HTMLElement | undefined);
+		os.popupMenu(
+			getMenu(),
+			(ev.currentTarget ?? ev.target ?? undefined) as
+				| HTMLElement
+				| undefined
+		);
 	}
 }
 
@@ -106,17 +135,20 @@ function onContextmenu(ev: MouseEvent) {
 
 function onDragstart(ev: DragEvent) {
 	if (ev.dataTransfer) {
-		ev.dataTransfer.effectAllowed = 'move';
-		ev.dataTransfer.setData(_DATA_TRANSFER_DRIVE_FILE_, JSON.stringify(props.file));
+		ev.dataTransfer.effectAllowed = "move";
+		ev.dataTransfer.setData(
+			_DATA_TRANSFER_DRIVE_FILE_,
+			JSON.stringify(props.file)
+		);
 	}
 	isDragging.value = true;
 
-	emit('dragstart');
+	emit("dragstart");
 }
 
 function onDragend() {
 	isDragging.value = false;
-	emit('dragend');
+	emit("dragend");
 }
 
 function rename() {
@@ -126,7 +158,7 @@ function rename() {
 		default: props.file.name,
 	}).then(({ canceled, result: name }) => {
 		if (canceled) return;
-		os.api('drive/files/update', {
+		os.api("drive/files/update", {
 			fileId: props.file.id,
 			name: name,
 		});
@@ -134,27 +166,32 @@ function rename() {
 }
 
 function describe() {
-	os.popup(defineAsyncComponent(() => import('@/components/MkMediaCaption.vue')), {
-		title: i18n.ts.describeFile,
-		input: {
-			placeholder: i18n.ts.inputNewDescription,
-			default: props.file.comment != null ? props.file.comment : '',
+	os.popup(
+		defineAsyncComponent(() => import("@/components/MkMediaCaption.vue")),
+		{
+			title: i18n.ts.describeFile,
+			input: {
+				placeholder: i18n.ts.inputNewDescription,
+				default: props.file.comment != null ? props.file.comment : "",
+			},
+			image: props.file,
 		},
-		image: props.file,
-	}, {
-		done: result => {
-			if (!result || result.canceled) return;
-			let comment = result.result;
-			os.api('drive/files/update', {
-				fileId: props.file.id,
-				comment: comment.length === 0 ? null : comment,
-			});
+		{
+			done: (result) => {
+				if (!result || result.canceled) return;
+				let comment = result.result;
+				os.api("drive/files/update", {
+					fileId: props.file.id,
+					comment: comment.length === 0 ? null : comment,
+				});
+			},
 		},
-	}, 'closed');
+		"closed"
+	);
 }
 
 function toggleSensitive() {
-	os.api('drive/files/update', {
+	os.api("drive/files/update", {
 		fileId: props.file.id,
 		isSensitive: !props.file.isSensitive,
 	});
@@ -171,12 +208,12 @@ function addApp() {
 */
 async function deleteFile() {
 	const { canceled } = await os.confirm({
-		type: 'warning',
-		text: i18n.t('driveFileDeleteConfirm', { name: props.file.name }),
+		type: "warning",
+		text: i18n.t("driveFileDeleteConfirm", { name: props.file.name }),
 	});
 
 	if (canceled) return;
-	os.api('drive/files/delete', {
+	os.api("drive/files/delete", {
 		fileId: props.file.id,
 	});
 }
@@ -189,7 +226,8 @@ async function deleteFile() {
 	min-height: 180px;
 	border-radius: 8px;
 
-	&, * {
+	&,
+	* {
 		cursor: pointer;
 	}
 
diff --git a/packages/client/src/components/MkDrive.folder.vue b/packages/client/src/components/MkDrive.folder.vue
index a36ab26738..aff6219f5e 100644
--- a/packages/client/src/components/MkDrive.folder.vue
+++ b/packages/client/src/components/MkDrive.folder.vue
@@ -1,56 +1,68 @@
 <template>
-<div
-	class="rghtznwe"
-	:class="{ draghover }"
-	draggable="true"
-	:title="title"
-	@click="onClick"
-	@contextmenu.stop="onContextmenu"
-	@mouseover="onMouseover"
-	@mouseout="onMouseout"
-	@dragover.prevent.stop="onDragover"
-	@dragenter.prevent="onDragenter"
-	@dragleave="onDragleave"
-	@drop.prevent.stop="onDrop"
-	@dragstart="onDragstart"
-	@dragend="onDragend"
->
-	<p class="name">
-		<template v-if="hover"><i class="ph-folder-notch-open ph-bold ph-lg ph-fw ph-lg"></i></template>
-		<template v-if="!hover"><i class="ph-folder-notch ph-bold ph-lg ph-fw ph-lg"></i></template>
-		{{ folder.name }}
-	</p>
-	<p v-if="defaultStore.state.uploadFolder == folder.id" class="upload">
-		{{ i18n.ts.uploadFolder }}
-	</p>
-	<button v-if="selectMode" class="checkbox _button" :class="{ checked: isSelected }" @click.prevent.stop="checkboxClicked"></button>
-</div>
+	<div
+		class="rghtznwe"
+		:class="{ draghover }"
+		draggable="true"
+		:title="title"
+		@click="onClick"
+		@contextmenu.stop="onContextmenu"
+		@mouseover="onMouseover"
+		@mouseout="onMouseout"
+		@dragover.prevent.stop="onDragover"
+		@dragenter.prevent="onDragenter"
+		@dragleave="onDragleave"
+		@drop.prevent.stop="onDrop"
+		@dragstart="onDragstart"
+		@dragend="onDragend"
+	>
+		<p class="name">
+			<template v-if="hover"
+				><i class="ph-folder-notch-open ph-bold ph-lg ph-fw ph-lg"></i
+			></template>
+			<template v-if="!hover"
+				><i class="ph-folder-notch ph-bold ph-lg ph-fw ph-lg"></i
+			></template>
+			{{ folder.name }}
+		</p>
+		<p v-if="defaultStore.state.uploadFolder == folder.id" class="upload">
+			{{ i18n.ts.uploadFolder }}
+		</p>
+		<button
+			v-if="selectMode"
+			class="checkbox _button"
+			:class="{ checked: isSelected }"
+			@click.prevent.stop="checkboxClicked"
+		></button>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { computed, defineAsyncComponent, ref } from 'vue';
-import * as Misskey from 'calckey-js';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { defaultStore } from '@/store';
+import { computed, defineAsyncComponent, ref } from "vue";
+import * as Misskey from "calckey-js";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
+import { defaultStore } from "@/store";
 
-const props = withDefaults(defineProps<{
-	folder: Misskey.entities.DriveFolder;
-	isSelected?: boolean;
-	selectMode?: boolean;
-}>(), {
-	isSelected: false,
-	selectMode: false,
-});
+const props = withDefaults(
+	defineProps<{
+		folder: Misskey.entities.DriveFolder;
+		isSelected?: boolean;
+		selectMode?: boolean;
+	}>(),
+	{
+		isSelected: false,
+		selectMode: false,
+	}
+);
 
 const emit = defineEmits<{
-	(ev: 'chosen', v: Misskey.entities.DriveFolder): void;
-	(ev: 'move', v: Misskey.entities.DriveFolder): void;
-	(ev: 'upload', file: File, folder: Misskey.entities.DriveFolder);
-	(ev: 'removeFile', v: Misskey.entities.DriveFile['id']): void;
-	(ev: 'removeFolder', v: Misskey.entities.DriveFolder['id']): void;
-	(ev: 'dragstart'): void;
-	(ev: 'dragend'): void;
+	(ev: "chosen", v: Misskey.entities.DriveFolder): void;
+	(ev: "move", v: Misskey.entities.DriveFolder): void;
+	(ev: "upload", file: File, folder: Misskey.entities.DriveFolder);
+	(ev: "removeFile", v: Misskey.entities.DriveFile["id"]): void;
+	(ev: "removeFolder", v: Misskey.entities.DriveFolder["id"]): void;
+	(ev: "dragstart"): void;
+	(ev: "dragend"): void;
 }>();
 
 const hover = ref(false);
@@ -60,11 +72,11 @@ const isDragging = ref(false);
 const title = computed(() => props.folder.name);
 
 function checkboxClicked() {
-	emit('chosen', props.folder);
+	emit("chosen", props.folder);
 }
 
 function onClick() {
-	emit('move', props.folder);
+	emit("move", props.folder);
 }
 
 function onMouseover() {
@@ -81,18 +93,20 @@ function onDragover(ev: DragEvent) {
 	// 自分自身がドラッグされている場合
 	if (isDragging.value) {
 		// 自分自身にはドロップさせない
-		ev.dataTransfer.dropEffect = 'none';
+		ev.dataTransfer.dropEffect = "none";
 		return;
 	}
 
-	const isFile = ev.dataTransfer.items[0].kind === 'file';
+	const isFile = ev.dataTransfer.items[0].kind === "file";
 	const isDriveFile = ev.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FILE_;
-	const isDriveFolder = ev.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FOLDER_;
+	const isDriveFolder =
+		ev.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FOLDER_;
 
 	if (isFile || isDriveFile || isDriveFolder) {
-		ev.dataTransfer.dropEffect = ev.dataTransfer.effectAllowed === 'all' ? 'copy' : 'move';
+		ev.dataTransfer.dropEffect =
+			ev.dataTransfer.effectAllowed === "all" ? "copy" : "move";
 	} else {
-		ev.dataTransfer.dropEffect = 'none';
+		ev.dataTransfer.dropEffect = "none";
 	}
 }
 
@@ -112,17 +126,17 @@ function onDrop(ev: DragEvent) {
 	// ファイルだったら
 	if (ev.dataTransfer.files.length > 0) {
 		for (const file of Array.from(ev.dataTransfer.files)) {
-			emit('upload', file, props.folder);
+			emit("upload", file, props.folder);
 		}
 		return;
 	}
 
 	//#region ドライブのファイル
 	const driveFile = ev.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FILE_);
-	if (driveFile != null && driveFile !== '') {
+	if (driveFile != null && driveFile !== "") {
 		const file = JSON.parse(driveFile);
-		emit('removeFile', file.id);
-		os.api('drive/files/update', {
+		emit("removeFile", file.id);
+		os.api("drive/files/update", {
 			fileId: file.id,
 			folderId: props.folder.id,
 		});
@@ -131,33 +145,35 @@ function onDrop(ev: DragEvent) {
 
 	//#region ドライブのフォルダ
 	const driveFolder = ev.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FOLDER_);
-	if (driveFolder != null && driveFolder !== '') {
+	if (driveFolder != null && driveFolder !== "") {
 		const folder = JSON.parse(driveFolder);
 
 		// 移動先が自分自身ならreject
 		if (folder.id === props.folder.id) return;
 
-		emit('removeFolder', folder.id);
-		os.api('drive/folders/update', {
+		emit("removeFolder", folder.id);
+		os.api("drive/folders/update", {
 			folderId: folder.id,
 			parentId: props.folder.id,
-		}).then(() => {
-			// noop
-		}).catch(err => {
-			switch (err) {
-				case 'detected-circular-definition':
-					os.alert({
-						title: i18n.ts.unableToProcess,
-						text: i18n.ts.circularReferenceFolder,
-					});
-					break;
-				default:
-					os.alert({
-						type: 'error',
-						text: i18n.ts.somethingHappened,
-					});
-			}
-		});
+		})
+			.then(() => {
+				// noop
+			})
+			.catch((err) => {
+				switch (err) {
+					case "detected-circular-definition":
+						os.alert({
+							title: i18n.ts.unableToProcess,
+							text: i18n.ts.circularReferenceFolder,
+						});
+						break;
+					default:
+						os.alert({
+							type: "error",
+							text: i18n.ts.somethingHappened,
+						});
+				}
+			});
 	}
 	//#endregion
 }
@@ -165,22 +181,25 @@ function onDrop(ev: DragEvent) {
 function onDragstart(ev: DragEvent) {
 	if (!ev.dataTransfer) return;
 
-	ev.dataTransfer.effectAllowed = 'move';
-	ev.dataTransfer.setData(_DATA_TRANSFER_DRIVE_FOLDER_, JSON.stringify(props.folder));
+	ev.dataTransfer.effectAllowed = "move";
+	ev.dataTransfer.setData(
+		_DATA_TRANSFER_DRIVE_FOLDER_,
+		JSON.stringify(props.folder)
+	);
 	isDragging.value = true;
 
 	// 親ブラウザに対して、ドラッグが開始されたフラグを立てる
 	// (=あなたの子供が、ドラッグを開始しましたよ)
-	emit('dragstart');
+	emit("dragstart");
 }
 
 function onDragend() {
 	isDragging.value = false;
-	emit('dragend');
+	emit("dragend");
 }
 
 function go() {
-	emit('move', props.folder.id);
+	emit("move", props.folder.id);
 }
 
 function rename() {
@@ -190,7 +209,7 @@ function rename() {
 		default: props.folder.name,
 	}).then(({ canceled, result: name }) => {
 		if (canceled) return;
-		os.api('drive/folders/update', {
+		os.api("drive/folders/update", {
 			folderId: props.folder.id,
 			name: name,
 		});
@@ -198,54 +217,71 @@ function rename() {
 }
 
 function deleteFolder() {
-	os.api('drive/folders/delete', {
+	os.api("drive/folders/delete", {
 		folderId: props.folder.id,
-	}).then(() => {
-		if (defaultStore.state.uploadFolder === props.folder.id) {
-			defaultStore.set('uploadFolder', null);
-		}
-	}).catch(err => {
-		switch (err.id) {
-			case 'b0fc8a17-963c-405d-bfbc-859a487295e1':
-				os.alert({
-					type: 'error',
-					title: i18n.ts.unableToDelete,
-					text: i18n.ts.hasChildFilesOrFolders,
-				});
-				break;
-			default:
-				os.alert({
-					type: 'error',
-					text: i18n.ts.unableToDelete,
-				});
-		}
-	});
+	})
+		.then(() => {
+			if (defaultStore.state.uploadFolder === props.folder.id) {
+				defaultStore.set("uploadFolder", null);
+			}
+		})
+		.catch((err) => {
+			switch (err.id) {
+				case "b0fc8a17-963c-405d-bfbc-859a487295e1":
+					os.alert({
+						type: "error",
+						title: i18n.ts.unableToDelete,
+						text: i18n.ts.hasChildFilesOrFolders,
+					});
+					break;
+				default:
+					os.alert({
+						type: "error",
+						text: i18n.ts.unableToDelete,
+					});
+			}
+		});
 }
 
 function setAsUploadFolder() {
-	defaultStore.set('uploadFolder', props.folder.id);
+	defaultStore.set("uploadFolder", props.folder.id);
 }
 
 function onContextmenu(ev: MouseEvent) {
-	os.contextMenu([{
-		text: i18n.ts.openInWindow,
-		icon: 'ph-copy ph-bold ph-lg',
-		action: () => {
-			os.popup(defineAsyncComponent(() => import('@/components/MkDriveWindow.vue')), {
-				initialFolder: props.folder,
-			}, {
-			}, 'closed');
-		},
-	}, null, {
-		text: i18n.ts.rename,
-		icon: 'ph-cursor-text ph-bold ph-lg',
-		action: rename,
-	}, null, {
-		text: i18n.ts.delete,
-		icon: 'ph-trash ph-bold ph-lg',
-		danger: true,
-		action: deleteFolder,
-	}], ev);
+	os.contextMenu(
+		[
+			{
+				text: i18n.ts.openInWindow,
+				icon: "ph-copy ph-bold ph-lg",
+				action: () => {
+					os.popup(
+						defineAsyncComponent(
+							() => import("@/components/MkDriveWindow.vue")
+						),
+						{
+							initialFolder: props.folder,
+						},
+						{},
+						"closed"
+					);
+				},
+			},
+			null,
+			{
+				text: i18n.ts.rename,
+				icon: "ph-cursor-text ph-bold ph-lg",
+				action: rename,
+			},
+			null,
+			{
+				text: i18n.ts.delete,
+				icon: "ph-trash ph-bold ph-lg",
+				danger: true,
+				action: deleteFolder,
+			},
+		],
+		ev
+	);
 }
 </script>
 
@@ -257,7 +293,8 @@ function onContextmenu(ev: MouseEvent) {
 	background: var(--driveFolderBg);
 	border-radius: 4px;
 
-	&, * {
+	&,
+	* {
 		cursor: pointer;
 	}
 
diff --git a/packages/client/src/components/MkDrive.navFolder.vue b/packages/client/src/components/MkDrive.navFolder.vue
index 38fd768775..aa0bea1927 100644
--- a/packages/client/src/components/MkDrive.navFolder.vue
+++ b/packages/client/src/components/MkDrive.navFolder.vue
@@ -1,22 +1,23 @@
 <template>
-<div class="drylbebk"
-	:class="{ draghover }"
-	@click="onClick"
-	@dragover.prevent.stop="onDragover"
-	@dragenter="onDragenter"
-	@dragleave="onDragleave"
-	@drop.stop="onDrop"
->
-	<i v-if="folder == null" class="ph-cloud ph-bold ph-lg"></i>
-	<span>{{ folder == null ? i18n.ts.drive : folder.name }}</span>
-</div>
+	<div
+		class="drylbebk"
+		:class="{ draghover }"
+		@click="onClick"
+		@dragover.prevent.stop="onDragover"
+		@dragenter="onDragenter"
+		@dragleave="onDragleave"
+		@drop.stop="onDrop"
+	>
+		<i v-if="folder == null" class="ph-cloud ph-bold ph-lg"></i>
+		<span>{{ folder == null ? i18n.ts.drive : folder.name }}</span>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
-import * as Misskey from 'calckey-js';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
+import { ref } from "vue";
+import * as Misskey from "calckey-js";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
 
 const props = defineProps<{
 	folder?: Misskey.entities.DriveFolder;
@@ -24,17 +25,21 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-	(ev: 'move', v?: Misskey.entities.DriveFolder): void;
-	(ev: 'upload', file: File, folder?: Misskey.entities.DriveFolder | null): void;
-	(ev: 'removeFile', v: Misskey.entities.DriveFile['id']): void;
-	(ev: 'removeFolder', v: Misskey.entities.DriveFolder['id']): void;
+	(ev: "move", v?: Misskey.entities.DriveFolder): void;
+	(
+		ev: "upload",
+		file: File,
+		folder?: Misskey.entities.DriveFolder | null
+	): void;
+	(ev: "removeFile", v: Misskey.entities.DriveFile["id"]): void;
+	(ev: "removeFolder", v: Misskey.entities.DriveFolder["id"]): void;
 }>();
 
 const hover = ref(false);
 const draghover = ref(false);
 
 function onClick() {
-	emit('move', props.folder);
+	emit("move", props.folder);
 }
 
 function onMouseover() {
@@ -50,17 +55,19 @@ function onDragover(ev: DragEvent) {
 
 	// このフォルダがルートかつカレントディレクトリならドロップ禁止
 	if (props.folder == null && props.parentFolder == null) {
-		ev.dataTransfer.dropEffect = 'none';
+		ev.dataTransfer.dropEffect = "none";
 	}
 
-	const isFile = ev.dataTransfer.items[0].kind === 'file';
+	const isFile = ev.dataTransfer.items[0].kind === "file";
 	const isDriveFile = ev.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FILE_;
-	const isDriveFolder = ev.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FOLDER_;
+	const isDriveFolder =
+		ev.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FOLDER_;
 
 	if (isFile || isDriveFile || isDriveFolder) {
-		ev.dataTransfer.dropEffect = ev.dataTransfer.effectAllowed === 'all' ? 'copy' : 'move';
+		ev.dataTransfer.dropEffect =
+			ev.dataTransfer.effectAllowed === "all" ? "copy" : "move";
 	} else {
-		ev.dataTransfer.dropEffect = 'none';
+		ev.dataTransfer.dropEffect = "none";
 	}
 
 	return false;
@@ -82,33 +89,33 @@ function onDrop(ev: DragEvent) {
 	// ファイルだったら
 	if (ev.dataTransfer.files.length > 0) {
 		for (const file of Array.from(ev.dataTransfer.files)) {
-			emit('upload', file, props.folder);
+			emit("upload", file, props.folder);
 		}
 		return;
 	}
 
 	//#region ドライブのファイル
 	const driveFile = ev.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FILE_);
-	if (driveFile != null && driveFile !== '') {
+	if (driveFile != null && driveFile !== "") {
 		const file = JSON.parse(driveFile);
-		emit('removeFile', file.id);
-		os.api('drive/files/update', {
+		emit("removeFile", file.id);
+		os.api("drive/files/update", {
 			fileId: file.id,
-			folderId: props.folder ? props.folder.id : null
+			folderId: props.folder ? props.folder.id : null,
 		});
 	}
 	//#endregion
 
 	//#region ドライブのフォルダ
 	const driveFolder = ev.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FOLDER_);
-	if (driveFolder != null && driveFolder !== '') {
+	if (driveFolder != null && driveFolder !== "") {
 		const folder = JSON.parse(driveFolder);
 		// 移動先が自分自身ならreject
 		if (props.folder && folder.id === props.folder.id) return;
-		emit('removeFolder', folder.id);
-		os.api('drive/folders/update', {
+		emit("removeFolder", folder.id);
+		os.api("drive/folders/update", {
 			folderId: folder.id,
-			parentId: props.folder ? props.folder.id : null
+			parentId: props.folder ? props.folder.id : null,
 		});
 	}
 	//#endregion
diff --git a/packages/client/src/components/MkDrive.vue b/packages/client/src/components/MkDrive.vue
index 24c400c3e9..d52e796e5a 100644
--- a/packages/client/src/components/MkDrive.vue
+++ b/packages/client/src/components/MkDrive.vue
@@ -1,121 +1,181 @@
 <template>
-<div class="yfudmmck">
-	<nav>
-		<div class="path" @contextmenu.prevent.stop="() => {}">
-			<XNavFolder
-				:class="{ current: folder == null }"
-				:parent-folder="folder"
-				@move="move"
-				@upload="upload"
-				@removeFile="removeFile"
-				@removeFolder="removeFolder"
-			/>
-			<template v-for="f in hierarchyFolders">
-				<span class="separator"><i class="ph-caret-right ph-bold ph-lg"></i></span>
+	<div class="yfudmmck">
+		<nav>
+			<div class="path" @contextmenu.prevent.stop="() => {}">
 				<XNavFolder
-					:folder="f"
+					:class="{ current: folder == null }"
 					:parent-folder="folder"
 					@move="move"
 					@upload="upload"
 					@removeFile="removeFile"
 					@removeFolder="removeFolder"
 				/>
-			</template>
-			<span v-if="folder != null" class="separator"><i class="ph-caret-right ph-bold ph-lg"></i></span>
-			<span v-if="folder != null" class="folder current">{{ folder.name }}</span>
+				<template v-for="f in hierarchyFolders">
+					<span class="separator"
+						><i class="ph-caret-right ph-bold ph-lg"></i
+					></span>
+					<XNavFolder
+						:folder="f"
+						:parent-folder="folder"
+						@move="move"
+						@upload="upload"
+						@removeFile="removeFile"
+						@removeFolder="removeFolder"
+					/>
+				</template>
+				<span v-if="folder != null" class="separator"
+					><i class="ph-caret-right ph-bold ph-lg"></i
+				></span>
+				<span v-if="folder != null" class="folder current">{{
+					folder.name
+				}}</span>
+			</div>
+			<button class="menu _button" @click="showMenu">
+				<i class="ph-dots-three-outline ph-bold ph-lg"></i>
+			</button>
+		</nav>
+		<div
+			ref="main"
+			class="main"
+			:class="{ uploading: uploadings.length > 0, fetching }"
+			@dragover.prevent.stop="onDragover"
+			@dragenter="onDragenter"
+			@dragleave="onDragleave"
+			@drop.prevent.stop="onDrop"
+			@contextmenu.stop="onContextmenu"
+		>
+			<div ref="contents" class="contents">
+				<div
+					v-show="folders.length > 0"
+					ref="foldersContainer"
+					class="folders"
+				>
+					<XFolder
+						v-for="(f, i) in folders"
+						:key="f.id"
+						v-anim="i"
+						class="folder"
+						:folder="f"
+						:select-mode="select === 'folder'"
+						:is-selected="
+							selectedFolders.some((x) => x.id === f.id)
+						"
+						@chosen="chooseFolder"
+						@move="move"
+						@upload="upload"
+						@removeFile="removeFile"
+						@removeFolder="removeFolder"
+						@dragstart="isDragSource = true"
+						@dragend="isDragSource = false"
+					/>
+					<!-- SEE: https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid -->
+					<div v-for="(n, i) in 16" :key="i" class="padding"></div>
+					<MkButton v-if="moreFolders" ref="moreFolders">{{
+						i18n.ts.loadMore
+					}}</MkButton>
+				</div>
+				<div
+					v-show="files.length > 0"
+					ref="filesContainer"
+					class="files"
+				>
+					<XFile
+						v-for="(file, i) in files"
+						:key="file.id"
+						v-anim="i"
+						class="file"
+						:file="file"
+						:select-mode="select === 'file'"
+						:is-selected="
+							selectedFiles.some((x) => x.id === file.id)
+						"
+						@chosen="chooseFile"
+						@dragstart="isDragSource = true"
+						@dragend="isDragSource = false"
+					/>
+					<!-- SEE: https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid -->
+					<div v-for="(n, i) in 16" :key="i" class="padding"></div>
+					<MkButton
+						v-show="moreFiles"
+						ref="loadMoreFiles"
+						@click="fetchMoreFiles"
+						>{{ i18n.ts.loadMore }}</MkButton
+					>
+				</div>
+				<div
+					v-if="files.length == 0 && folders.length == 0 && !fetching"
+					class="empty"
+				>
+					<p v-if="draghover">{{ i18n.t("empty-draghover") }}</p>
+					<p v-if="!draghover && folder == null">
+						<strong>{{ i18n.ts.emptyDrive }}</strong
+						><br />{{ i18n.t("empty-drive-description") }}
+					</p>
+					<p v-if="!draghover && folder != null">
+						{{ i18n.ts.emptyFolder }}
+					</p>
+				</div>
+			</div>
+			<MkLoading v-if="fetching" />
 		</div>
-		<button class="menu _button" @click="showMenu"><i class="ph-dots-three-outline ph-bold ph-lg"></i></button>
-	</nav>
-	<div
-		ref="main" class="main"
-		:class="{ uploading: uploadings.length > 0, fetching }"
-		@dragover.prevent.stop="onDragover"
-		@dragenter="onDragenter"
-		@dragleave="onDragleave"
-		@drop.prevent.stop="onDrop"
-		@contextmenu.stop="onContextmenu"
-	>
-		<div ref="contents" class="contents">
-			<div v-show="folders.length > 0" ref="foldersContainer" class="folders">
-				<XFolder
-					v-for="(f, i) in folders"
-					:key="f.id"
-					v-anim="i"
-					class="folder"
-					:folder="f"
-					:select-mode="select === 'folder'"
-					:is-selected="selectedFolders.some(x => x.id === f.id)"
-					@chosen="chooseFolder"
-					@move="move"
-					@upload="upload"
-					@removeFile="removeFile"
-					@removeFolder="removeFolder"
-					@dragstart="isDragSource = true"
-					@dragend="isDragSource = false"
-				/>
-				<!-- SEE: https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid -->
-				<div v-for="(n, i) in 16" :key="i" class="padding"></div>
-				<MkButton v-if="moreFolders" ref="moreFolders">{{ i18n.ts.loadMore }}</MkButton>
-			</div>
-			<div v-show="files.length > 0" ref="filesContainer" class="files">
-				<XFile
-					v-for="(file, i) in files"
-					:key="file.id"
-					v-anim="i"
-					class="file"
-					:file="file"
-					:select-mode="select === 'file'"
-					:is-selected="selectedFiles.some(x => x.id === file.id)"
-					@chosen="chooseFile"
-					@dragstart="isDragSource = true"
-					@dragend="isDragSource = false"
-				/>
-				<!-- SEE: https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid -->
-				<div v-for="(n, i) in 16" :key="i" class="padding"></div>
-				<MkButton v-show="moreFiles" ref="loadMoreFiles" @click="fetchMoreFiles">{{ i18n.ts.loadMore }}</MkButton>
-			</div>
-			<div v-if="files.length == 0 && folders.length == 0 && !fetching" class="empty">
-				<p v-if="draghover">{{ i18n.t('empty-draghover') }}</p>
-				<p v-if="!draghover && folder == null"><strong>{{ i18n.ts.emptyDrive }}</strong><br/>{{ i18n.t('empty-drive-description') }}</p>
-				<p v-if="!draghover && folder != null">{{ i18n.ts.emptyFolder }}</p>
-			</div>
-		</div>
-		<MkLoading v-if="fetching"/>
+		<div v-if="draghover" class="dropzone"></div>
+		<input
+			ref="fileInput"
+			type="file"
+			accept="*/*"
+			multiple
+			tabindex="-1"
+			@change="onChangeFileInput"
+		/>
 	</div>
-	<div v-if="draghover" class="dropzone"></div>
-	<input ref="fileInput" type="file" accept="*/*" multiple tabindex="-1" @change="onChangeFileInput"/>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { markRaw, nextTick, onActivated, onBeforeUnmount, onMounted, ref, watch } from 'vue';
-import * as Misskey from 'calckey-js';
-import MkButton from './MkButton.vue';
-import XNavFolder from '@/components/MkDrive.navFolder.vue';
-import XFolder from '@/components/MkDrive.folder.vue';
-import XFile from '@/components/MkDrive.file.vue';
-import * as os from '@/os';
-import { stream } from '@/stream';
-import { defaultStore } from '@/store';
-import { i18n } from '@/i18n';
-import { uploadFile, uploads } from '@/scripts/upload';
+import {
+	markRaw,
+	nextTick,
+	onActivated,
+	onBeforeUnmount,
+	onMounted,
+	ref,
+	watch,
+} from "vue";
+import * as Misskey from "calckey-js";
+import MkButton from "./MkButton.vue";
+import XNavFolder from "@/components/MkDrive.navFolder.vue";
+import XFolder from "@/components/MkDrive.folder.vue";
+import XFile from "@/components/MkDrive.file.vue";
+import * as os from "@/os";
+import { stream } from "@/stream";
+import { defaultStore } from "@/store";
+import { i18n } from "@/i18n";
+import { uploadFile, uploads } from "@/scripts/upload";
 
-const props = withDefaults(defineProps<{
-	initialFolder?: Misskey.entities.DriveFolder;
-	type?: string;
-	multiple?: boolean;
-	select?: 'file' | 'folder' | null;
-}>(), {
-	multiple: false,
-	select: null,
-});
+const props = withDefaults(
+	defineProps<{
+		initialFolder?: Misskey.entities.DriveFolder;
+		type?: string;
+		multiple?: boolean;
+		select?: "file" | "folder" | null;
+	}>(),
+	{
+		multiple: false,
+		select: null,
+	}
+);
 
 const emit = defineEmits<{
-	(ev: 'selected', v: Misskey.entities.DriveFile | Misskey.entities.DriveFolder): void;
-	(ev: 'change-selection', v: Misskey.entities.DriveFile[] | Misskey.entities.DriveFolder[]): void;
-	(ev: 'move-root'): void;
-	(ev: 'cd', v: Misskey.entities.DriveFolder | null): void;
-	(ev: 'open-folder', v: Misskey.entities.DriveFolder): void;
+	(
+		ev: "selected",
+		v: Misskey.entities.DriveFile | Misskey.entities.DriveFolder
+	): void;
+	(
+		ev: "change-selection",
+		v: Misskey.entities.DriveFile[] | Misskey.entities.DriveFolder[]
+	): void;
+	(ev: "move-root"): void;
+	(ev: "cd", v: Misskey.entities.DriveFolder | null): void;
+	(ev: "open-folder", v: Misskey.entities.DriveFolder): void;
 }>();
 
 const loadMoreFiles = ref<InstanceType<typeof MkButton>>();
@@ -130,7 +190,7 @@ const hierarchyFolders = ref<Misskey.entities.DriveFolder[]>([]);
 const selectedFiles = ref<Misskey.entities.DriveFile[]>([]);
 const selectedFolders = ref<Misskey.entities.DriveFolder[]>([]);
 const uploadings = uploads;
-const connection = stream.useChannel('drive');
+const connection = stream.useChannel("drive");
 const keepOriginal = ref<boolean>(defaultStore.state.keepOriginalUploading); // 外部渡しが多いので$refは使わないほうがよい
 
 // ドロップされようとしているか
@@ -143,10 +203,14 @@ const isDragSource = ref(false);
 const fetching = ref(true);
 
 const ilFilesObserver = new IntersectionObserver(
-	(entries) => entries.some((entry) => entry.isIntersecting) && !fetching.value && moreFiles.value && fetchMoreFiles(),
+	(entries) =>
+		entries.some((entry) => entry.isIntersecting) &&
+		!fetching.value &&
+		moreFiles.value &&
+		fetchMoreFiles()
 );
 
-watch(folder, () => emit('cd', folder.value));
+watch(folder, () => emit("cd", folder.value));
 
 function onStreamDriveFileCreated(file: Misskey.entities.DriveFile) {
 	addFile(file, true);
@@ -165,11 +229,15 @@ function onStreamDriveFileDeleted(fileId: string) {
 	removeFile(fileId);
 }
 
-function onStreamDriveFolderCreated(createdFolder: Misskey.entities.DriveFolder) {
+function onStreamDriveFolderCreated(
+	createdFolder: Misskey.entities.DriveFolder
+) {
 	addFolder(createdFolder, true);
 }
 
-function onStreamDriveFolderUpdated(updatedFolder: Misskey.entities.DriveFolder) {
+function onStreamDriveFolderUpdated(
+	updatedFolder: Misskey.entities.DriveFolder
+) {
 	const current = folder.value ? folder.value.id : null;
 	if (current !== updatedFolder.parentId) {
 		removeFolder(updatedFolder);
@@ -188,17 +256,19 @@ function onDragover(ev: DragEvent): any {
 	// ドラッグ元が自分自身の所有するアイテムだったら
 	if (isDragSource.value) {
 		// 自分自身にはドロップさせない
-		ev.dataTransfer.dropEffect = 'none';
+		ev.dataTransfer.dropEffect = "none";
 		return;
 	}
 
-	const isFile = ev.dataTransfer.items[0].kind === 'file';
+	const isFile = ev.dataTransfer.items[0].kind === "file";
 	const isDriveFile = ev.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FILE_;
-	const isDriveFolder = ev.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FOLDER_;
+	const isDriveFolder =
+		ev.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FOLDER_;
 	if (isFile || isDriveFile || isDriveFolder) {
-		ev.dataTransfer.dropEffect = ev.dataTransfer.effectAllowed === 'all' ? 'copy' : 'move';
+		ev.dataTransfer.dropEffect =
+			ev.dataTransfer.effectAllowed === "all" ? "copy" : "move";
 	} else {
-		ev.dataTransfer.dropEffect = 'none';
+		ev.dataTransfer.dropEffect = "none";
 	}
 
 	return false;
@@ -227,11 +297,11 @@ function onDrop(ev: DragEvent): any {
 
 	//#region ドライブのファイル
 	const driveFile = ev.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FILE_);
-	if (driveFile != null && driveFile !== '') {
+	if (driveFile != null && driveFile !== "") {
 		const file = JSON.parse(driveFile);
-		if (files.value.some(f => f.id === file.id)) return;
+		if (files.value.some((f) => f.id === file.id)) return;
 		removeFile(file.id);
-		os.api('drive/files/update', {
+		os.api("drive/files/update", {
 			fileId: file.id,
 			folderId: folder.value ? folder.value.id : null,
 		});
@@ -240,33 +310,35 @@ function onDrop(ev: DragEvent): any {
 
 	//#region ドライブのフォルダ
 	const driveFolder = ev.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FOLDER_);
-	if (driveFolder != null && driveFolder !== '') {
+	if (driveFolder != null && driveFolder !== "") {
 		const droppedFolder = JSON.parse(driveFolder);
 
 		// 移動先が自分自身ならreject
 		if (folder.value && droppedFolder.id === folder.value.id) return false;
-		if (folders.value.some(f => f.id === droppedFolder.id)) return false;
+		if (folders.value.some((f) => f.id === droppedFolder.id)) return false;
 		removeFolder(droppedFolder.id);
-		os.api('drive/folders/update', {
+		os.api("drive/folders/update", {
 			folderId: droppedFolder.id,
 			parentId: folder.value ? folder.value.id : null,
-		}).then(() => {
-			// noop
-		}).catch(err => {
-			switch (err) {
-				case 'detected-circular-definition':
-					os.alert({
-						title: i18n.ts.unableToProcess,
-						text: i18n.ts.circularReferenceFolder,
-					});
-					break;
-				default:
-					os.alert({
-						type: 'error',
-						text: i18n.ts.somethingHappened,
-					});
-			}
-		});
+		})
+			.then(() => {
+				// noop
+			})
+			.catch((err) => {
+				switch (err) {
+					case "detected-circular-definition":
+						os.alert({
+							title: i18n.ts.unableToProcess,
+							text: i18n.ts.circularReferenceFolder,
+						});
+						break;
+					default:
+						os.alert({
+							type: "error",
+							text: i18n.ts.somethingHappened,
+						});
+				}
+			});
 	}
 	//#endregion
 }
@@ -278,11 +350,11 @@ function selectLocalFile() {
 function urlUpload() {
 	os.inputText({
 		title: i18n.ts.uploadFromUrl,
-		type: 'url',
+		type: "url",
 		placeholder: i18n.ts.uploadFromUrlDescription,
 	}).then(({ canceled, result: url }) => {
 		if (canceled || !url) return;
-		os.api('drive/files/upload-from-url', {
+		os.api("drive/files/upload-from-url", {
 			url: url,
 			folderId: folder.value ? folder.value.id : undefined,
 		});
@@ -300,10 +372,10 @@ function createFolder() {
 		placeholder: i18n.ts.folderName,
 	}).then(({ canceled, result: name }) => {
 		if (canceled) return;
-		os.api('drive/folders/create', {
+		os.api("drive/folders/create", {
 			name: name,
 			parentId: folder.value ? folder.value.id : undefined,
-		}).then(createdFolder => {
+		}).then((createdFolder) => {
 			addFolder(createdFolder, true);
 		});
 	});
@@ -316,10 +388,10 @@ function renameFolder(folderToRename: Misskey.entities.DriveFolder) {
 		default: folderToRename.name,
 	}).then(({ canceled, result: name }) => {
 		if (canceled) return;
-		os.api('drive/folders/update', {
+		os.api("drive/folders/update", {
 			folderId: folderToRename.id,
 			name: name,
-		}).then(updatedFolder => {
+		}).then((updatedFolder) => {
 			// FIXME: 画面を更新するために自分自身に移動
 			move(updatedFolder);
 		});
@@ -327,27 +399,29 @@ function renameFolder(folderToRename: Misskey.entities.DriveFolder) {
 }
 
 function deleteFolder(folderToDelete: Misskey.entities.DriveFolder) {
-	os.api('drive/folders/delete', {
+	os.api("drive/folders/delete", {
 		folderId: folderToDelete.id,
-	}).then(() => {
-		// 削除時に親フォルダに移動
-		move(folderToDelete.parentId);
-	}).catch(err => {
-		switch (err.id) {
-			case 'b0fc8a17-963c-405d-bfbc-859a487295e1':
-				os.alert({
-					type: 'error',
-					title: i18n.ts.unableToDelete,
-					text: i18n.ts.hasChildFilesOrFolders,
-				});
-				break;
-			default:
-				os.alert({
-					type: 'error',
-					text: i18n.ts.unableToDelete,
-				});
-		}
-	});
+	})
+		.then(() => {
+			// 削除時に親フォルダに移動
+			move(folderToDelete.parentId);
+		})
+		.catch((err) => {
+			switch (err.id) {
+				case "b0fc8a17-963c-405d-bfbc-859a487295e1":
+					os.alert({
+						type: "error",
+						title: i18n.ts.unableToDelete,
+						text: i18n.ts.hasChildFilesOrFolders,
+					});
+					break;
+				default:
+					os.alert({
+						type: "error",
+						text: i18n.ts.unableToDelete,
+					});
+			}
+		});
 }
 
 function onChangeFileInput() {
@@ -357,46 +431,62 @@ function onChangeFileInput() {
 	}
 }
 
-function upload(file: File, folderToUpload?: Misskey.entities.DriveFolder | null) {
-	uploadFile(file, (folderToUpload && typeof folderToUpload === 'object') ? folderToUpload.id : null, undefined, keepOriginal.value).then(res => {
+function upload(
+	file: File,
+	folderToUpload?: Misskey.entities.DriveFolder | null
+) {
+	uploadFile(
+		file,
+		folderToUpload && typeof folderToUpload === "object"
+			? folderToUpload.id
+			: null,
+		undefined,
+		keepOriginal.value
+	).then((res) => {
 		addFile(res, true);
 	});
 }
 
 function chooseFile(file: Misskey.entities.DriveFile) {
-	const isAlreadySelected = selectedFiles.value.some(f => f.id === file.id);
+	const isAlreadySelected = selectedFiles.value.some((f) => f.id === file.id);
 	if (props.multiple) {
 		if (isAlreadySelected) {
-			selectedFiles.value = selectedFiles.value.filter(f => f.id !== file.id);
+			selectedFiles.value = selectedFiles.value.filter(
+				(f) => f.id !== file.id
+			);
 		} else {
 			selectedFiles.value.push(file);
 		}
-		emit('change-selection', selectedFiles.value);
+		emit("change-selection", selectedFiles.value);
 	} else {
 		if (isAlreadySelected) {
-			emit('selected', file);
+			emit("selected", file);
 		} else {
 			selectedFiles.value = [file];
-			emit('change-selection', [file]);
+			emit("change-selection", [file]);
 		}
 	}
 }
 
 function chooseFolder(folderToChoose: Misskey.entities.DriveFolder) {
-	const isAlreadySelected = selectedFolders.value.some(f => f.id === folderToChoose.id);
+	const isAlreadySelected = selectedFolders.value.some(
+		(f) => f.id === folderToChoose.id
+	);
 	if (props.multiple) {
 		if (isAlreadySelected) {
-			selectedFolders.value = selectedFolders.value.filter(f => f.id !== folderToChoose.id);
+			selectedFolders.value = selectedFolders.value.filter(
+				(f) => f.id !== folderToChoose.id
+			);
 		} else {
 			selectedFolders.value.push(folderToChoose);
 		}
-		emit('change-selection', selectedFolders.value);
+		emit("change-selection", selectedFolders.value);
 	} else {
 		if (isAlreadySelected) {
-			emit('selected', folderToChoose);
+			emit("selected", folderToChoose);
 		} else {
 			selectedFolders.value = [folderToChoose];
-			emit('change-selection', [folderToChoose]);
+			emit("change-selection", [folderToChoose]);
 		}
 	}
 }
@@ -405,26 +495,26 @@ function move(target?: Misskey.entities.DriveFolder) {
 	if (!target) {
 		goRoot();
 		return;
-	} else if (typeof target === 'object') {
+	} else if (typeof target === "object") {
 		target = target.id;
 	}
 
 	fetching.value = true;
 
-	os.api('drive/folders/show', {
+	os.api("drive/folders/show", {
 		folderId: target,
-	}).then(folderToMove => {
+	}).then((folderToMove) => {
 		folder.value = folderToMove;
 		hierarchyFolders.value = [];
 
-		const dive = folderToDive => {
+		const dive = (folderToDive) => {
 			hierarchyFolders.value.unshift(folderToDive);
 			if (folderToDive.parent) dive(folderToDive.parent);
 		};
 
 		if (folderToMove.parent) dive(folderToMove.parent);
 
-		emit('open-folder', folderToMove);
+		emit("open-folder", folderToMove);
 		fetch();
 	});
 }
@@ -433,8 +523,8 @@ function addFolder(folderToAdd: Misskey.entities.DriveFolder, unshift = false) {
 	const current = folder.value ? folder.value.id : null;
 	if (current !== folderToAdd.parentId) return;
 
-	if (folders.value.some(f => f.id === folderToAdd.id)) {
-		const exist = folders.value.map(f => f.id).indexOf(folderToAdd.id);
+	if (folders.value.some((f) => f.id === folderToAdd.id)) {
+		const exist = folders.value.map((f) => f.id).indexOf(folderToAdd.id);
 		folders.value[exist] = folderToAdd;
 		return;
 	}
@@ -450,8 +540,8 @@ function addFile(fileToAdd: Misskey.entities.DriveFile, unshift = false) {
 	const current = folder.value ? folder.value.id : null;
 	if (current !== fileToAdd.folderId) return;
 
-	if (files.value.some(f => f.id === fileToAdd.id)) {
-		const exist = files.value.map(f => f.id).indexOf(fileToAdd.id);
+	if (files.value.some((f) => f.id === fileToAdd.id)) {
+		const exist = files.value.map((f) => f.id).indexOf(fileToAdd.id);
 		files.value[exist] = fileToAdd;
 		return;
 	}
@@ -464,13 +554,14 @@ function addFile(fileToAdd: Misskey.entities.DriveFile, unshift = false) {
 }
 
 function removeFolder(folderToRemove: Misskey.entities.DriveFolder | string) {
-	const folderIdToRemove = typeof folderToRemove === 'object' ? folderToRemove.id : folderToRemove;
-	folders.value = folders.value.filter(f => f.id !== folderIdToRemove);
+	const folderIdToRemove =
+		typeof folderToRemove === "object" ? folderToRemove.id : folderToRemove;
+	folders.value = folders.value.filter((f) => f.id !== folderIdToRemove);
 }
 
 function removeFile(file: Misskey.entities.DriveFile | string) {
-	const fileId = typeof file === 'object' ? file.id : file;
-	files.value = files.value.filter(f => f.id !== fileId);
+	const fileId = typeof file === "object" ? file.id : file;
+	files.value = files.value.filter((f) => f.id !== fileId);
 }
 
 function appendFile(file: Misskey.entities.DriveFile) {
@@ -495,7 +586,7 @@ function goRoot() {
 
 	folder.value = null;
 	hierarchyFolders.value = [];
-	emit('move-root');
+	emit("move-root");
 	fetch();
 }
 
@@ -509,30 +600,37 @@ async function fetch() {
 	const foldersMax = 30;
 	const filesMax = 30;
 
-	const foldersPromise = os.api('drive/folders', {
-		folderId: folder.value ? folder.value.id : null,
-		limit: foldersMax + 1,
-	}).then(fetchedFolders => {
-		if (fetchedFolders.length === foldersMax + 1) {
-			moreFolders.value = true;
-			fetchedFolders.pop();
-		}
-		return fetchedFolders;
-	});
+	const foldersPromise = os
+		.api("drive/folders", {
+			folderId: folder.value ? folder.value.id : null,
+			limit: foldersMax + 1,
+		})
+		.then((fetchedFolders) => {
+			if (fetchedFolders.length === foldersMax + 1) {
+				moreFolders.value = true;
+				fetchedFolders.pop();
+			}
+			return fetchedFolders;
+		});
 
-	const filesPromise = os.api('drive/files', {
-		folderId: folder.value ? folder.value.id : null,
-		type: props.type,
-		limit: filesMax + 1,
-	}).then(fetchedFiles => {
-		if (fetchedFiles.length === filesMax + 1) {
-			moreFiles.value = true;
-			fetchedFiles.pop();
-		}
-		return fetchedFiles;
-	});
+	const filesPromise = os
+		.api("drive/files", {
+			folderId: folder.value ? folder.value.id : null,
+			type: props.type,
+			limit: filesMax + 1,
+		})
+		.then((fetchedFiles) => {
+			if (fetchedFiles.length === filesMax + 1) {
+				moreFiles.value = true;
+				fetchedFiles.pop();
+			}
+			return fetchedFiles;
+		});
 
-	const [fetchedFolders, fetchedFiles] = await Promise.all([foldersPromise, filesPromise]);
+	const [fetchedFolders, fetchedFiles] = await Promise.all([
+		foldersPromise,
+		filesPromise,
+	]);
 
 	for (const x of fetchedFolders) appendFolder(x);
 	for (const x of fetchedFiles) appendFile(x);
@@ -546,12 +644,12 @@ function fetchMoreFiles() {
 	const max = 30;
 
 	// ファイル一覧取得
-	os.api('drive/files', {
+	os.api("drive/files", {
 		folderId: folder.value ? folder.value.id : null,
 		type: props.type,
 		untilId: files.value[files.value.length - 1].id,
 		limit: max + 1,
-	}).then(files => {
+	}).then((files) => {
 		if (files.length === max + 1) {
 			moreFiles.value = true;
 			files.pop();
@@ -564,41 +662,71 @@ function fetchMoreFiles() {
 }
 
 function getMenu() {
-	return [{
-		type: 'switch',
-		text: i18n.ts.keepOriginalUploading,
-		ref: keepOriginal,
-	}, null, {
-		text: i18n.ts.addFile,
-		type: 'label',
-	}, {
-		text: i18n.ts.upload,
-		icon: 'ph-upload-simple ph-bold ph-lg',
-		action: () => { selectLocalFile(); },
-	}, {
-		text: i18n.ts.fromUrl,
-		icon: 'ph-link-simple ph-bold ph-lg',
-		action: () => { urlUpload(); },
-	}, null, {
-		text: folder.value ? folder.value.name : i18n.ts.drive,
-		type: 'label',
-	}, folder.value ? {
-		text: i18n.ts.renameFolder,
-		icon: 'ph-cursor-text ph-bold ph-lg',
-		action: () => { renameFolder(folder.value); },
-	} : undefined, folder.value ? {
-		text: i18n.ts.deleteFolder,
-		icon: 'ph-trash ph-bold ph-lg',
-		action: () => { deleteFolder(folder.value as Misskey.entities.DriveFolder); },
-	} : undefined, {
-		text: i18n.ts.createFolder,
-		icon: 'ph-folder-notch-plus ph-bold ph-lg',
-		action: () => { createFolder(); },
-	}];
+	return [
+		{
+			type: "switch",
+			text: i18n.ts.keepOriginalUploading,
+			ref: keepOriginal,
+		},
+		null,
+		{
+			text: i18n.ts.addFile,
+			type: "label",
+		},
+		{
+			text: i18n.ts.upload,
+			icon: "ph-upload-simple ph-bold ph-lg",
+			action: () => {
+				selectLocalFile();
+			},
+		},
+		{
+			text: i18n.ts.fromUrl,
+			icon: "ph-link-simple ph-bold ph-lg",
+			action: () => {
+				urlUpload();
+			},
+		},
+		null,
+		{
+			text: folder.value ? folder.value.name : i18n.ts.drive,
+			type: "label",
+		},
+		folder.value
+			? {
+					text: i18n.ts.renameFolder,
+					icon: "ph-cursor-text ph-bold ph-lg",
+					action: () => {
+						renameFolder(folder.value);
+					},
+			  }
+			: undefined,
+		folder.value
+			? {
+					text: i18n.ts.deleteFolder,
+					icon: "ph-trash ph-bold ph-lg",
+					action: () => {
+						deleteFolder(
+							folder.value as Misskey.entities.DriveFolder
+						);
+					},
+			  }
+			: undefined,
+		{
+			text: i18n.ts.createFolder,
+			icon: "ph-folder-notch-plus ph-bold ph-lg",
+			action: () => {
+				createFolder();
+			},
+		},
+	];
 }
 
 function showMenu(ev: MouseEvent) {
-	os.popupMenu(getMenu(), (ev.currentTarget ?? ev.target ?? undefined) as HTMLElement | undefined);
+	os.popupMenu(
+		getMenu(),
+		(ev.currentTarget ?? ev.target ?? undefined) as HTMLElement | undefined
+	);
 }
 
 function onContextmenu(ev: MouseEvent) {
@@ -612,12 +740,12 @@ onMounted(() => {
 		});
 	}
 
-	connection.on('fileCreated', onStreamDriveFileCreated);
-	connection.on('fileUpdated', onStreamDriveFileUpdated);
-	connection.on('fileDeleted', onStreamDriveFileDeleted);
-	connection.on('folderCreated', onStreamDriveFolderCreated);
-	connection.on('folderUpdated', onStreamDriveFolderUpdated);
-	connection.on('folderDeleted', onStreamDriveFolderDeleted);
+	connection.on("fileCreated", onStreamDriveFileCreated);
+	connection.on("fileUpdated", onStreamDriveFileUpdated);
+	connection.on("fileDeleted", onStreamDriveFileDeleted);
+	connection.on("folderCreated", onStreamDriveFolderCreated);
+	connection.on("folderUpdated", onStreamDriveFolderUpdated);
+	connection.on("folderDeleted", onStreamDriveFolderDeleted);
 
 	if (props.initialFolder) {
 		move(props.initialFolder);
@@ -656,7 +784,8 @@ onBeforeUnmount(() => {
 		font-size: 0.9em;
 		box-shadow: 0 1px 0 var(--divider);
 
-		&, * {
+		&,
+		* {
 			user-select: none;
 		}
 
@@ -714,7 +843,8 @@ onBeforeUnmount(() => {
 		overflow: auto;
 		padding: var(--margin);
 
-		&, * {
+		&,
+		* {
 			user-select: none;
 		}
 
@@ -735,7 +865,6 @@ onBeforeUnmount(() => {
 		}
 
 		> .contents {
-
 			> .folders,
 			> .files {
 				display: flex;
diff --git a/packages/client/src/components/MkDriveFileThumbnail.vue b/packages/client/src/components/MkDriveFileThumbnail.vue
index da8137774b..39150c10c6 100644
--- a/packages/client/src/components/MkDriveFileThumbnail.vue
+++ b/packages/client/src/components/MkDriveFileThumbnail.vue
@@ -1,23 +1,48 @@
 <template>
-<div ref="thumbnail" class="zdjebgpv">
-	<ImgWithBlurhash v-if="isThumbnailAvailable" :hash="file.blurhash" :src="file.thumbnailUrl" :alt="file.name" :title="file.name" :cover="fit !== 'contain'"/>
-	<i v-else-if="is === 'image'" class="ph-file-image ph-bold ph-lg icon"></i>
-	<i v-else-if="is === 'video'" class="ph-file-video ph-bold ph-lg icon"></i>
-	<i v-else-if="is === 'audio' || is === 'midi'" class="ph-file-audio ph-bold ph-lg icon"></i>
-	<i v-else-if="is === 'csv'" class="ph-file-csv ph-bold ph-lg icon"></i>
-	<i v-else-if="is === 'pdf'" class="ph-file-pdf ph-bold ph-lg icon"></i>
-	<i v-else-if="is === 'textfile'" class="ph-file-text ph-bold ph-lg icon"></i>
-	<i v-else-if="is === 'archive'" class="ph-file-zip ph-bold ph-lg icon"></i>
-	<i v-else class="ph-file ph-bold ph-lg icon"></i>
+	<div ref="thumbnail" class="zdjebgpv">
+		<ImgWithBlurhash
+			v-if="isThumbnailAvailable"
+			:hash="file.blurhash"
+			:src="file.thumbnailUrl"
+			:alt="file.name"
+			:title="file.name"
+			:cover="fit !== 'contain'"
+		/>
+		<i
+			v-else-if="is === 'image'"
+			class="ph-file-image ph-bold ph-lg icon"
+		></i>
+		<i
+			v-else-if="is === 'video'"
+			class="ph-file-video ph-bold ph-lg icon"
+		></i>
+		<i
+			v-else-if="is === 'audio' || is === 'midi'"
+			class="ph-file-audio ph-bold ph-lg icon"
+		></i>
+		<i v-else-if="is === 'csv'" class="ph-file-csv ph-bold ph-lg icon"></i>
+		<i v-else-if="is === 'pdf'" class="ph-file-pdf ph-bold ph-lg icon"></i>
+		<i
+			v-else-if="is === 'textfile'"
+			class="ph-file-text ph-bold ph-lg icon"
+		></i>
+		<i
+			v-else-if="is === 'archive'"
+			class="ph-file-zip ph-bold ph-lg icon"
+		></i>
+		<i v-else class="ph-file ph-bold ph-lg icon"></i>
 
-	<i v-if="isThumbnailAvailable && is === 'video'" class="ph-file-video ph-bold ph-lg icon-sub"></i>
-</div>
+		<i
+			v-if="isThumbnailAvailable && is === 'video'"
+			class="ph-file-video ph-bold ph-lg icon-sub"
+		></i>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
-import type * as Misskey from 'calckey-js';
-import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
+import { computed } from "vue";
+import type * as Misskey from "calckey-js";
+import ImgWithBlurhash from "@/components/MkImgWithBlurhash.vue";
 
 const props = defineProps<{
 	file: Misskey.entities.DriveFile;
@@ -25,30 +50,33 @@ const props = defineProps<{
 }>();
 
 const is = computed(() => {
-	if (props.file.type.startsWith('image/')) return 'image';
-	if (props.file.type.startsWith('video/')) return 'video';
-	if (props.file.type === 'audio/midi') return 'midi';
-	if (props.file.type.startsWith('audio/')) return 'audio';
-	if (props.file.type.endsWith('/csv')) return 'csv';
-	if (props.file.type.endsWith('/pdf')) return 'pdf';
-	if (props.file.type.startsWith('text/')) return 'textfile';
-	if ([
-		'application/zip',
-		'application/x-cpio',
-		'application/x-bzip',
-		'application/x-bzip2',
-		'application/java-archive',
-		'application/x-rar-compressed',
-		'application/x-tar',
-		'application/gzip',
-		'application/x-7z-compressed',
-	].some(archiveType => archiveType === props.file.type)) return 'archive';
-	return 'unknown';
+	if (props.file.type.startsWith("image/")) return "image";
+	if (props.file.type.startsWith("video/")) return "video";
+	if (props.file.type === "audio/midi") return "midi";
+	if (props.file.type.startsWith("audio/")) return "audio";
+	if (props.file.type.endsWith("/csv")) return "csv";
+	if (props.file.type.endsWith("/pdf")) return "pdf";
+	if (props.file.type.startsWith("text/")) return "textfile";
+	if (
+		[
+			"application/zip",
+			"application/x-cpio",
+			"application/x-bzip",
+			"application/x-bzip2",
+			"application/java-archive",
+			"application/x-rar-compressed",
+			"application/x-tar",
+			"application/gzip",
+			"application/x-7z-compressed",
+		].some((archiveType) => archiveType === props.file.type)
+	)
+		return "archive";
+	return "unknown";
 });
 
 const isThumbnailAvailable = computed(() => {
 	return props.file.thumbnailUrl
-		? (is.value === 'image' as const || is.value === 'video')
+		? is.value === ("image" as const) || is.value === "video"
 		: false;
 });
 </script>
diff --git a/packages/client/src/components/MkDriveSelectDialog.vue b/packages/client/src/components/MkDriveSelectDialog.vue
index b9abcf7ec0..6b419e2539 100644
--- a/packages/client/src/components/MkDriveSelectDialog.vue
+++ b/packages/client/src/components/MkDriveSelectDialog.vue
@@ -1,41 +1,61 @@
 <template>
-<XModalWindow
-	ref="dialog"
-	:width="800"
-	:height="500"
-	:with-ok-button="true"
-	:ok-button-disabled="(type === 'file') && (selected.length === 0)"
-	@click="cancel()"
-	@close="cancel()"
-	@ok="ok()"
-	@closed="emit('closed')"
->
-	<template #header>
-		{{ multiple ? ((type === 'file') ? i18n.ts.selectFiles : i18n.ts.selectFolders) : ((type === 'file') ? i18n.ts.selectFile : i18n.ts.selectFolder) }}
-		<span v-if="selected.length > 0" style="margin-left: 8px; opacity: 0.5;">({{ number(selected.length) }})</span>
-	</template>
-	<XDrive :multiple="multiple" :select="type" @changeSelection="onChangeSelection" @selected="ok()"/>
-</XModalWindow>
+	<XModalWindow
+		ref="dialog"
+		:width="800"
+		:height="500"
+		:with-ok-button="true"
+		:ok-button-disabled="type === 'file' && selected.length === 0"
+		@click="cancel()"
+		@close="cancel()"
+		@ok="ok()"
+		@closed="emit('closed')"
+	>
+		<template #header>
+			{{
+				multiple
+					? type === "file"
+						? i18n.ts.selectFiles
+						: i18n.ts.selectFolders
+					: type === "file"
+					? i18n.ts.selectFile
+					: i18n.ts.selectFolder
+			}}
+			<span
+				v-if="selected.length > 0"
+				style="margin-left: 8px; opacity: 0.5"
+				>({{ number(selected.length) }})</span
+			>
+		</template>
+		<XDrive
+			:multiple="multiple"
+			:select="type"
+			@changeSelection="onChangeSelection"
+			@selected="ok()"
+		/>
+	</XModalWindow>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
-import * as Misskey from 'calckey-js';
-import XDrive from '@/components/MkDrive.vue';
-import XModalWindow from '@/components/MkModalWindow.vue';
-import number from '@/filters/number';
-import { i18n } from '@/i18n';
+import { ref } from "vue";
+import * as Misskey from "calckey-js";
+import XDrive from "@/components/MkDrive.vue";
+import XModalWindow from "@/components/MkModalWindow.vue";
+import number from "@/filters/number";
+import { i18n } from "@/i18n";
 
-withDefaults(defineProps<{
-	type?: 'file' | 'folder';
-	multiple: boolean;
-}>(), {
-	type: 'file',
-});
+withDefaults(
+	defineProps<{
+		type?: "file" | "folder";
+		multiple: boolean;
+	}>(),
+	{
+		type: "file",
+	}
+);
 
 const emit = defineEmits<{
-	(ev: 'done', r?: Misskey.entities.DriveFile[]): void;
-	(ev: 'closed'): void;
+	(ev: "done", r?: Misskey.entities.DriveFile[]): void;
+	(ev: "closed"): void;
 }>();
 
 const dialog = ref<InstanceType<typeof XModalWindow>>();
@@ -43,12 +63,12 @@ const dialog = ref<InstanceType<typeof XModalWindow>>();
 const selected = ref<Misskey.entities.DriveFile[]>([]);
 
 function ok() {
-	emit('done', selected.value);
+	emit("done", selected.value);
 	dialog.value?.close();
 }
 
 function cancel() {
-	emit('done');
+	emit("done");
 	dialog.value?.close();
 }
 
diff --git a/packages/client/src/components/MkDriveWindow.vue b/packages/client/src/components/MkDriveWindow.vue
index e5e7ed5400..9b94e67f86 100644
--- a/packages/client/src/components/MkDriveWindow.vue
+++ b/packages/client/src/components/MkDriveWindow.vue
@@ -1,30 +1,30 @@
 <template>
-<XWindow
-	ref="window"
-	:initial-width="800"
-	:initial-height="500"
-	:can-resize="true"
-	@closed="emit('closed')"
->
-	<template #header>
-		{{ i18n.ts.drive }}
-	</template>
-	<XDrive :initial-folder="initialFolder"/>
-</XWindow>
+	<XWindow
+		ref="window"
+		:initial-width="800"
+		:initial-height="500"
+		:can-resize="true"
+		@closed="emit('closed')"
+	>
+		<template #header>
+			{{ i18n.ts.drive }}
+		</template>
+		<XDrive :initial-folder="initialFolder" />
+	</XWindow>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import * as Misskey from 'calckey-js';
-import XDrive from '@/components/MkDrive.vue';
-import XWindow from '@/components/MkWindow.vue';
-import { i18n } from '@/i18n';
+import {} from "vue";
+import * as Misskey from "calckey-js";
+import XDrive from "@/components/MkDrive.vue";
+import XWindow from "@/components/MkWindow.vue";
+import { i18n } from "@/i18n";
 
 defineProps<{
 	initialFolder?: Misskey.entities.DriveFolder;
 }>();
 
 const emit = defineEmits<{
-	(ev: 'closed'): void;
+	(ev: "closed"): void;
 }>();
 </script>
diff --git a/packages/client/src/components/MkEmojiPicker.section.vue b/packages/client/src/components/MkEmojiPicker.section.vue
index c9aea124b5..12e869e04c 100644
--- a/packages/client/src/components/MkEmojiPicker.section.vue
+++ b/packages/client/src/components/MkEmojiPicker.section.vue
@@ -1,24 +1,32 @@
 <template>
-<!-- このコンポーネントの要素のclassは親から利用されるのでむやみに弄らないこと -->
-<section>
-	<header class="_acrylic" @click="shown = !shown">
-		<i class="toggle ph-fw ph-lg" :class="shown ? 'ph-caret-down-bold ph-lg' : 'ph-caret-up ph-bold ph-lg'"></i> <slot></slot> ({{ emojis.length }})
-	</header>
-	<div v-if="shown" class="body">
-		<button
-			v-for="emoji in emojis"
-			:key="emoji"
-			class="_button item"
-			@click="emit('chosen', emoji, $event)"
-		>
-			<MkEmoji class="emoji" :emoji="emoji" :normal="true"/>
-		</button>
-	</div>
-</section>
+	<!-- このコンポーネントの要素のclassは親から利用されるのでむやみに弄らないこと -->
+	<section>
+		<header class="_acrylic" @click="shown = !shown">
+			<i
+				class="toggle ph-fw ph-lg"
+				:class="
+					shown
+						? 'ph-caret-down-bold ph-lg'
+						: 'ph-caret-up ph-bold ph-lg'
+				"
+			></i>
+			<slot></slot> ({{ emojis.length }})
+		</header>
+		<div v-if="shown" class="body">
+			<button
+				v-for="emoji in emojis"
+				:key="emoji"
+				class="_button item"
+				@click="emit('chosen', emoji, $event)"
+			>
+				<MkEmoji class="emoji" :emoji="emoji" :normal="true" />
+			</button>
+		</div>
+	</section>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
+import { ref } from "vue";
 
 const props = defineProps<{
 	emojis: string[];
@@ -26,11 +34,10 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-	(ev: 'chosen', v: string, event: MouseEvent): void;
+	(ev: "chosen", v: string, event: MouseEvent): void;
 }>();
 
 const shown = ref(!!props.initialShown);
 </script>
 
-<style lang="scss" scoped>
-</style>
+<style lang="scss" scoped></style>
diff --git a/packages/client/src/components/MkEmojiPicker.vue b/packages/client/src/components/MkEmojiPicker.vue
index 2790965db3..a22006951d 100644
--- a/packages/client/src/components/MkEmojiPicker.vue
+++ b/packages/client/src/components/MkEmojiPicker.vue
@@ -1,107 +1,191 @@
 <template>
-<div class="omfetrab" :class="['s' + size, 'w' + width, 'h' + height, { asDrawer }]" :style="{ maxHeight: maxHeight ? maxHeight + 'px' : undefined }">
-	<input ref="search" v-model.trim="q" class="search" data-prevent-emoji-insert :class="{ filled: q != null && q != '' }" :placeholder="i18n.ts.search" type="search" @paste.stop="paste" @keyup.enter="done()">
-	<div ref="emojis" class="emojis">
-		<section class="result">
-			<div v-if="searchResultCustom.length > 0" class="body">
-				<button
-					v-for="emoji in searchResultCustom"
-					:key="emoji.id"
-					class="_button item"
-					:title="emoji.name"
-					tabindex="0"
-					@click="chosen(emoji, $event)"
-				>
-					<!--<MkEmoji v-if="emoji.char != null" :emoji="emoji.char"/>-->
-					<img class="emoji" :src="disableShowingAnimatedImages ? getStaticImageUrl(emoji.url) : emoji.url"/>
-				</button>
-			</div>
-			<div v-if="searchResultUnicode.length > 0" class="body">
-				<button
-					v-for="emoji in searchResultUnicode"
-					:key="emoji.name"
-					class="_button item"
-					:title="emoji.name"
-					tabindex="0"
-					@click="chosen(emoji, $event)"
-				>
-					<MkEmoji class="emoji" :emoji="emoji.char"/>
-				</button>
-			</div>
-		</section>
-
-		<div v-if="tab === 'index'" class="group index">
-			<section v-if="showPinned">
-				<div class="body">
+	<div
+		class="omfetrab"
+		:class="['s' + size, 'w' + width, 'h' + height, { asDrawer }]"
+		:style="{ maxHeight: maxHeight ? maxHeight + 'px' : undefined }"
+	>
+		<input
+			ref="search"
+			v-model.trim="q"
+			class="search"
+			data-prevent-emoji-insert
+			:class="{ filled: q != null && q != '' }"
+			:placeholder="i18n.ts.search"
+			type="search"
+			@paste.stop="paste"
+			@keyup.enter="done()"
+		/>
+		<div ref="emojis" class="emojis">
+			<section class="result">
+				<div v-if="searchResultCustom.length > 0" class="body">
 					<button
-						v-for="emoji in pinned"
-						:key="emoji"
+						v-for="emoji in searchResultCustom"
+						:key="emoji.id"
 						class="_button item"
+						:title="emoji.name"
 						tabindex="0"
 						@click="chosen(emoji, $event)"
 					>
-						<MkEmoji class="emoji" :emoji="emoji" :normal="true"/>
+						<!--<MkEmoji v-if="emoji.char != null" :emoji="emoji.char"/>-->
+						<img
+							class="emoji"
+							:src="
+								disableShowingAnimatedImages
+									? getStaticImageUrl(emoji.url)
+									: emoji.url
+							"
+						/>
+					</button>
+				</div>
+				<div v-if="searchResultUnicode.length > 0" class="body">
+					<button
+						v-for="emoji in searchResultUnicode"
+						:key="emoji.name"
+						class="_button item"
+						:title="emoji.name"
+						tabindex="0"
+						@click="chosen(emoji, $event)"
+					>
+						<MkEmoji class="emoji" :emoji="emoji.char" />
 					</button>
 				</div>
 			</section>
 
-			<section>
-				<header class="_acrylic"><i class="ph-alarm ph-bold ph-fw ph-lg"></i> {{ i18n.ts.recentUsed }}</header>
-				<div class="body">
-					<button
-						v-for="emoji in recentlyUsedEmojis"
-						:key="emoji"
-						class="_button item"
-						@click="chosen(emoji, $event)"
-					>
-						<MkEmoji class="emoji" :emoji="emoji" :normal="true"/>
-					</button>
-				</div>
-			</section>
+			<div v-if="tab === 'index'" class="group index">
+				<section v-if="showPinned">
+					<div class="body">
+						<button
+							v-for="emoji in pinned"
+							:key="emoji"
+							class="_button item"
+							tabindex="0"
+							@click="chosen(emoji, $event)"
+						>
+							<MkEmoji
+								class="emoji"
+								:emoji="emoji"
+								:normal="true"
+							/>
+						</button>
+					</div>
+				</section>
+
+				<section>
+					<header class="_acrylic">
+						<i class="ph-alarm ph-bold ph-fw ph-lg"></i>
+						{{ i18n.ts.recentUsed }}
+					</header>
+					<div class="body">
+						<button
+							v-for="emoji in recentlyUsedEmojis"
+							:key="emoji"
+							class="_button item"
+							@click="chosen(emoji, $event)"
+						>
+							<MkEmoji
+								class="emoji"
+								:emoji="emoji"
+								:normal="true"
+							/>
+						</button>
+					</div>
+				</section>
+			</div>
+			<div v-once class="group">
+				<header>{{ i18n.ts.customEmojis }}</header>
+				<XSection
+					v-for="category in customEmojiCategories"
+					:key="'custom:' + category"
+					:initial-shown="false"
+					:emojis="
+						customEmojis
+							.filter((e) => e.category === category)
+							.map((e) => ':' + e.name + ':')
+					"
+					@chosen="chosen"
+					>{{ category || i18n.ts.other }}</XSection
+				>
+			</div>
+			<div v-once class="group">
+				<header>{{ i18n.ts.emoji }}</header>
+				<XSection
+					v-for="category in categories"
+					:key="category"
+					:emojis="
+						emojilist
+							.filter((e) => e.category === category)
+							.map((e) => e.char)
+					"
+					@chosen="chosen"
+					>{{ category }}</XSection
+				>
+			</div>
 		</div>
-		<div v-once class="group">
-			<header>{{ i18n.ts.customEmojis }}</header>
-			<XSection v-for="category in customEmojiCategories" :key="'custom:' + category" :initial-shown="false" :emojis="customEmojis.filter(e => e.category === category).map(e => ':' + e.name + ':')" @chosen="chosen">{{ category || i18n.ts.other }}</XSection>
-		</div>
-		<div v-once class="group">
-			<header>{{ i18n.ts.emoji }}</header>
-			<XSection v-for="category in categories" :key="category" :emojis="emojilist.filter(e => e.category === category).map(e => e.char)" @chosen="chosen">{{ category }}</XSection>
+		<div class="tabs">
+			<button
+				class="_button tab"
+				:class="{ active: tab === 'index' }"
+				@click="tab = 'index'"
+			>
+				<i class="ph-asterisk ph-bold ph-lg ph-fw ph-lg"></i>
+			</button>
+			<button
+				class="_button tab"
+				:class="{ active: tab === 'custom' }"
+				@click="tab = 'custom'"
+			>
+				<i class="ph-smiley ph-bold ph-lg ph-fw ph-lg"></i>
+			</button>
+			<button
+				class="_button tab"
+				:class="{ active: tab === 'unicode' }"
+				@click="tab = 'unicode'"
+			>
+				<i class="ph-leaf ph-bold ph-lg ph-fw ph-lg"></i>
+			</button>
+			<button
+				class="_button tab"
+				:class="{ active: tab === 'tags' }"
+				@click="tab = 'tags'"
+			>
+				<i class="ph-hash ph-bold ph-lg ph-fw ph-lg"></i>
+			</button>
 		</div>
 	</div>
-	<div class="tabs">
-		<button class="_button tab" :class="{ active: tab === 'index' }" @click="tab = 'index'"><i class="ph-asterisk ph-bold ph-lg ph-fw ph-lg"></i></button>
-		<button class="_button tab" :class="{ active: tab === 'custom' }" @click="tab = 'custom'"><i class="ph-smiley ph-bold ph-lg ph-fw ph-lg"></i></button>
-		<button class="_button tab" :class="{ active: tab === 'unicode' }" @click="tab = 'unicode'"><i class="ph-leaf ph-bold ph-lg ph-fw ph-lg"></i></button>
-		<button class="_button tab" :class="{ active: tab === 'tags' }" @click="tab = 'tags'"><i class="ph-hash ph-bold ph-lg ph-fw ph-lg"></i></button>
-	</div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { ref, computed, watch, onMounted } from 'vue';
-import * as Misskey from 'calckey-js';
-import XSection from '@/components/MkEmojiPicker.section.vue';
-import { emojilist, UnicodeEmojiDef, unicodeEmojiCategories as categories } from '@/scripts/emojilist';
-import { getStaticImageUrl } from '@/scripts/get-static-image-url';
-import Ripple from '@/components/MkRipple.vue';
-import * as os from '@/os';
-import { isTouchUsing } from '@/scripts/touch';
-import { deviceKind } from '@/scripts/device-kind';
-import { emojiCategories, instance } from '@/instance';
-import { i18n } from '@/i18n';
-import { defaultStore } from '@/store';
+import { ref, computed, watch, onMounted } from "vue";
+import * as Misskey from "calckey-js";
+import XSection from "@/components/MkEmojiPicker.section.vue";
+import {
+	emojilist,
+	UnicodeEmojiDef,
+	unicodeEmojiCategories as categories,
+} from "@/scripts/emojilist";
+import { getStaticImageUrl } from "@/scripts/get-static-image-url";
+import Ripple from "@/components/MkRipple.vue";
+import * as os from "@/os";
+import { isTouchUsing } from "@/scripts/touch";
+import { deviceKind } from "@/scripts/device-kind";
+import { emojiCategories, instance } from "@/instance";
+import { i18n } from "@/i18n";
+import { defaultStore } from "@/store";
 
-const props = withDefaults(defineProps<{
-	showPinned?: boolean;
-	asReactionPicker?: boolean;
-	maxHeight?: number;
-	asDrawer?: boolean;
-}>(), {
-	showPinned: true,
-});
+const props = withDefaults(
+	defineProps<{
+		showPinned?: boolean;
+		asReactionPicker?: boolean;
+		maxHeight?: number;
+		asDrawer?: boolean;
+	}>(),
+	{
+		showPinned: true,
+	}
+);
 
 const emit = defineEmits<{
-	(ev: 'chosen', v: string): void;
+	(ev: "chosen", v: string): void;
 }>();
 
 const search = ref<HTMLInputElement>();
@@ -116,41 +200,48 @@ const {
 	recentlyUsedEmojis,
 } = defaultStore.reactiveState;
 
-const size = computed(() => props.asReactionPicker ? reactionPickerSize.value : 1);
-const width = computed(() => props.asReactionPicker ? reactionPickerWidth.value : 3);
-const height = computed(() => props.asReactionPicker ? reactionPickerHeight.value : 2);
+const size = computed(() =>
+	props.asReactionPicker ? reactionPickerSize.value : 1
+);
+const width = computed(() =>
+	props.asReactionPicker ? reactionPickerWidth.value : 3
+);
+const height = computed(() =>
+	props.asReactionPicker ? reactionPickerHeight.value : 2
+);
 const customEmojiCategories = emojiCategories;
 const customEmojis = instance.emojis;
 const q = ref<string | null>(null);
 const searchResultCustom = ref<Misskey.entities.CustomEmoji[]>([]);
 const searchResultUnicode = ref<UnicodeEmojiDef[]>([]);
-const tab = ref<'index' | 'custom' | 'unicode' | 'tags'>('index');
+const tab = ref<"index" | "custom" | "unicode" | "tags">("index");
 
 watch(q, () => {
 	if (emojis.value) emojis.value.scrollTop = 0;
 
-	if (q.value == null || q.value === '') {
+	if (q.value == null || q.value === "") {
 		searchResultCustom.value = [];
 		searchResultUnicode.value = [];
 		return;
 	}
 
-	const newQ = q.value.replace(/:/g, '').toLowerCase();
+	const newQ = q.value.replace(/:/g, "").toLowerCase();
 
 	const searchCustom = () => {
 		const max = 8;
 		const emojis = customEmojis;
 		const matches = new Set<Misskey.entities.CustomEmoji>();
 
-		const exactMatch = emojis.find(emoji => emoji.name === newQ);
+		const exactMatch = emojis.find((emoji) => emoji.name === newQ);
 		if (exactMatch) matches.add(exactMatch);
 
-		if (newQ.includes(' ')) { // AND検索
-			const keywords = newQ.split(' ');
+		if (newQ.includes(" ")) {
+			// AND検索
+			const keywords = newQ.split(" ");
 
 			// 名前にキーワードが含まれている
 			for (const emoji of emojis) {
-				if (keywords.every(keyword => emoji.name.includes(keyword))) {
+				if (keywords.every((keyword) => emoji.name.includes(keyword))) {
 					matches.add(emoji);
 					if (matches.size >= max) break;
 				}
@@ -159,7 +250,15 @@ watch(q, () => {
 
 			// 名前またはエイリアスにキーワードが含まれている
 			for (const emoji of emojis) {
-				if (keywords.every(keyword => emoji.name.includes(keyword) || emoji.aliases.some(alias => alias.includes(keyword)))) {
+				if (
+					keywords.every(
+						(keyword) =>
+							emoji.name.includes(keyword) ||
+							emoji.aliases.some((alias) =>
+								alias.includes(keyword)
+							)
+					)
+				) {
 					matches.add(emoji);
 					if (matches.size >= max) break;
 				}
@@ -174,7 +273,7 @@ watch(q, () => {
 			if (matches.size >= max) return matches;
 
 			for (const emoji of emojis) {
-				if (emoji.aliases.some(alias => alias.startsWith(newQ))) {
+				if (emoji.aliases.some((alias) => alias.startsWith(newQ))) {
 					matches.add(emoji);
 					if (matches.size >= max) break;
 				}
@@ -190,7 +289,7 @@ watch(q, () => {
 			if (matches.size >= max) return matches;
 
 			for (const emoji of emojis) {
-				if (emoji.aliases.some(alias => alias.includes(newQ))) {
+				if (emoji.aliases.some((alias) => alias.includes(newQ))) {
 					matches.add(emoji);
 					if (matches.size >= max) break;
 				}
@@ -205,15 +304,16 @@ watch(q, () => {
 		const emojis = emojilist;
 		const matches = new Set<UnicodeEmojiDef>();
 
-		const exactMatch = emojis.find(emoji => emoji.name === newQ);
+		const exactMatch = emojis.find((emoji) => emoji.name === newQ);
 		if (exactMatch) matches.add(exactMatch);
 
-		if (newQ.includes(' ')) { // AND検索
-			const keywords = newQ.split(' ');
+		if (newQ.includes(" ")) {
+			// AND検索
+			const keywords = newQ.split(" ");
 
 			// 名前にキーワードが含まれている
 			for (const emoji of emojis) {
-				if (keywords.every(keyword => emoji.name.includes(keyword))) {
+				if (keywords.every((keyword) => emoji.name.includes(keyword))) {
 					matches.add(emoji);
 					if (matches.size >= max) break;
 				}
@@ -222,7 +322,15 @@ watch(q, () => {
 
 			// 名前またはエイリアスにキーワードが含まれている
 			for (const emoji of emojis) {
-				if (keywords.every(keyword => emoji.name.includes(keyword) || emoji.keywords.some(alias => alias.includes(keyword)))) {
+				if (
+					keywords.every(
+						(keyword) =>
+							emoji.name.includes(keyword) ||
+							emoji.keywords.some((alias) =>
+								alias.includes(keyword)
+							)
+					)
+				) {
 					matches.add(emoji);
 					if (matches.size >= max) break;
 				}
@@ -237,7 +345,9 @@ watch(q, () => {
 			if (matches.size >= max) return matches;
 
 			for (const emoji of emojis) {
-				if (emoji.keywords.some(keyword => keyword.startsWith(newQ))) {
+				if (
+					emoji.keywords.some((keyword) => keyword.startsWith(newQ))
+				) {
 					matches.add(emoji);
 					if (matches.size >= max) break;
 				}
@@ -253,7 +363,7 @@ watch(q, () => {
 			if (matches.size >= max) return matches;
 
 			for (const emoji of emojis) {
-				if (emoji.keywords.some(keyword => keyword.includes(newQ))) {
+				if (emoji.keywords.some((keyword) => keyword.includes(newQ))) {
 					matches.add(emoji);
 					if (matches.size >= max) break;
 				}
@@ -268,7 +378,7 @@ watch(q, () => {
 });
 
 function focus() {
-	if (!['smartphone', 'tablet'].includes(deviceKind) && !isTouchUsing) {
+	if (!["smartphone", "tablet"].includes(deviceKind) && !isTouchUsing) {
 		search.value?.focus({
 			preventScroll: true,
 		});
@@ -277,36 +387,40 @@ function focus() {
 
 function reset() {
 	if (emojis.value) emojis.value.scrollTop = 0;
-	q.value = '';
+	q.value = "";
 }
 
-function getKey(emoji: string | Misskey.entities.CustomEmoji | UnicodeEmojiDef): string {
-	return typeof emoji === 'string' ? emoji : (emoji.char || `:${emoji.name}:`);
+function getKey(
+	emoji: string | Misskey.entities.CustomEmoji | UnicodeEmojiDef
+): string {
+	return typeof emoji === "string" ? emoji : emoji.char || `:${emoji.name}:`;
 }
 
 function chosen(emoji: any, ev?: MouseEvent) {
-	const el = ev && (ev.currentTarget ?? ev.target) as HTMLElement | null | undefined;
+	const el =
+		ev &&
+		((ev.currentTarget ?? ev.target) as HTMLElement | null | undefined);
 	if (el) {
 		const rect = el.getBoundingClientRect();
-		const x = rect.left + (el.offsetWidth / 2);
-		const y = rect.top + (el.offsetHeight / 2);
-		os.popup(Ripple, { x, y }, {}, 'end');
+		const x = rect.left + el.offsetWidth / 2;
+		const y = rect.top + el.offsetHeight / 2;
+		os.popup(Ripple, { x, y }, {}, "end");
 	}
 
 	const key = getKey(emoji);
-	emit('chosen', key);
+	emit("chosen", key);
 
 	// 最近使った絵文字更新
 	if (!pinned.value.includes(key)) {
 		let recents = defaultStore.state.recentlyUsedEmojis;
 		recents = recents.filter((emoji: any) => emoji !== key);
 		recents.unshift(key);
-		defaultStore.set('recentlyUsedEmojis', recents.splice(0, 32));
+		defaultStore.set("recentlyUsedEmojis", recents.splice(0, 32));
 	}
 }
 
 function paste(event: ClipboardEvent) {
-	const paste = (event.clipboardData || window.clipboardData).getData('text');
+	const paste = (event.clipboardData || window.clipboardData).getData("text");
 	if (done(paste)) {
 		event.preventDefault();
 	}
@@ -314,15 +428,17 @@ function paste(event: ClipboardEvent) {
 
 function done(query?: any): boolean | void {
 	if (query == null) query = q.value;
-	if (query == null || typeof query !== 'string') return;
+	if (query == null || typeof query !== "string") return;
 
-	const q2 = query.replaceAll(':', '');
-	const exactMatchCustom = customEmojis.find(emoji => emoji.name === q2);
+	const q2 = query.replaceAll(":", "");
+	const exactMatchCustom = customEmojis.find((emoji) => emoji.name === q2);
 	if (exactMatchCustom) {
 		chosen(exactMatchCustom);
 		return true;
 	}
-	const exactMatchUnicode = emojilist.find(emoji => emoji.char === q2 || emoji.name === q2);
+	const exactMatchUnicode = emojilist.find(
+		(emoji) => emoji.char === q2 || emoji.name === q2
+	);
 	if (exactMatchUnicode) {
 		chosen(exactMatchUnicode);
 		return true;
@@ -543,7 +659,7 @@ defineExpose({
 
 					> .emoji {
 						height: 1.25em;
-						vertical-align: -.25em;
+						vertical-align: -0.25em;
 						pointer-events: none;
 					}
 				}
diff --git a/packages/client/src/components/MkEmojiPickerDialog.vue b/packages/client/src/components/MkEmojiPickerDialog.vue
index 3b41f9d75b..4cff9f2751 100644
--- a/packages/client/src/components/MkEmojiPickerDialog.vue
+++ b/packages/client/src/components/MkEmojiPickerDialog.vue
@@ -1,58 +1,66 @@
 <template>
-<MkModal
-	ref="modal"
-	v-slot="{ type, maxHeight }"
-	:z-priority="'middle'"
-	:prefer-type="asReactionPicker && defaultStore.state.reactionPickerUseDrawerForMobile === false ? 'popup' : 'auto'"
-	:transparent-bg="true"
-	:manual-showing="manualShowing"
-	:src="src"
-	@click="modal?.close()"
-	@opening="opening"
-	@close="emit('close')"
-	@closed="emit('closed')"
->
-	<MkEmojiPicker
-		ref="picker"
-		class="ryghynhb _popup _shadow"
-		:class="{ drawer: type === 'drawer' }"
-		:show-pinned="showPinned"
-		:as-reaction-picker="asReactionPicker"
-		:as-drawer="type === 'drawer'"
-		:max-height="maxHeight"
-		@chosen="chosen"
-	/>
-</MkModal>
+	<MkModal
+		ref="modal"
+		v-slot="{ type, maxHeight }"
+		:z-priority="'middle'"
+		:prefer-type="
+			asReactionPicker &&
+			defaultStore.state.reactionPickerUseDrawerForMobile === false
+				? 'popup'
+				: 'auto'
+		"
+		:transparent-bg="true"
+		:manual-showing="manualShowing"
+		:src="src"
+		@click="modal?.close()"
+		@opening="opening"
+		@close="emit('close')"
+		@closed="emit('closed')"
+	>
+		<MkEmojiPicker
+			ref="picker"
+			class="ryghynhb _popup _shadow"
+			:class="{ drawer: type === 'drawer' }"
+			:show-pinned="showPinned"
+			:as-reaction-picker="asReactionPicker"
+			:as-drawer="type === 'drawer'"
+			:max-height="maxHeight"
+			@chosen="chosen"
+		/>
+	</MkModal>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
-import MkModal from '@/components/MkModal.vue';
-import MkEmojiPicker from '@/components/MkEmojiPicker.vue';
-import { defaultStore } from '@/store';
+import { ref } from "vue";
+import MkModal from "@/components/MkModal.vue";
+import MkEmojiPicker from "@/components/MkEmojiPicker.vue";
+import { defaultStore } from "@/store";
 
-withDefaults(defineProps<{
-	manualShowing?: boolean | null;
-	src?: HTMLElement;
-	showPinned?: boolean;
-	asReactionPicker?: boolean;
-}>(), {
-	manualShowing: null,
-	showPinned: true,
-	asReactionPicker: false,
-});
+withDefaults(
+	defineProps<{
+		manualShowing?: boolean | null;
+		src?: HTMLElement;
+		showPinned?: boolean;
+		asReactionPicker?: boolean;
+	}>(),
+	{
+		manualShowing: null,
+		showPinned: true,
+		asReactionPicker: false,
+	}
+);
 
 const emit = defineEmits<{
-	(ev: 'done', v: any): void;
-	(ev: 'close'): void;
-	(ev: 'closed'): void;
+	(ev: "done", v: any): void;
+	(ev: "close"): void;
+	(ev: "closed"): void;
 }>();
 
 const modal = ref<InstanceType<typeof MkModal>>();
 const picker = ref<InstanceType<typeof MkEmojiPicker>>();
 
 function chosen(emoji: any) {
-	emit('done', emoji);
+	emit("done", emoji);
 	modal.value?.close();
 }
 
diff --git a/packages/client/src/components/MkFeaturedPhotos.vue b/packages/client/src/components/MkFeaturedPhotos.vue
index a5c920dd98..3faf38c658 100644
--- a/packages/client/src/components/MkFeaturedPhotos.vue
+++ b/packages/client/src/components/MkFeaturedPhotos.vue
@@ -1,15 +1,19 @@
 <template>
-<div v-if="meta" class="xfbouadm" :style="{ backgroundImage: `url(${ meta.backgroundImageUrl })` }"></div>
+	<div
+		v-if="meta"
+		class="xfbouadm"
+		:style="{ backgroundImage: `url(${meta.backgroundImageUrl})` }"
+	></div>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
-import * as Misskey from 'calckey-js';
-import * as os from '@/os';
+import { ref } from "vue";
+import * as Misskey from "calckey-js";
+import * as os from "@/os";
 
 const meta = ref<Misskey.entities.DetailedInstanceMetadata>();
 
-os.api('meta', { detail: true }).then(gotMeta => {
+os.api("meta", { detail: true }).then((gotMeta) => {
 	meta.value = gotMeta;
 });
 </script>
diff --git a/packages/client/src/components/MkFileListForAdmin.vue b/packages/client/src/components/MkFileListForAdmin.vue
index 3c23e2e2fa..1d485a1d61 100644
--- a/packages/client/src/components/MkFileListForAdmin.vue
+++ b/packages/client/src/components/MkFileListForAdmin.vue
@@ -1,56 +1,80 @@
 <template>
-<div>
-	<MkPagination v-slot="{items}" :pagination="pagination" class="urempief" :class="{ grid: viewMode === 'grid' }">
-		<MkA
-			v-for="file in items"
-			:key="file.id"
-			v-tooltip.mfm="`${file.type}\n${bytes(file.size)}\n${new Date(file.createdAt).toLocaleString()}\nby ${file.user ? '@' + Acct.toString(file.user) : 'system'}`"
-			:to="`/admin/file/${file.id}`"
-			class="file _button"
+	<div>
+		<MkPagination
+			v-slot="{ items }"
+			:pagination="pagination"
+			class="urempief"
+			:class="{ grid: viewMode === 'grid' }"
 		>
-			<div v-if="file.isSensitive" class="sensitive-label">{{ i18n.ts.sensitive }}</div>
-			<MkDriveFileThumbnail class="thumbnail" :file="file" fit="contain"/>
-			<div v-if="viewMode === 'list'" class="body">
-				<div>
-					<small style="opacity: 0.7;">{{ file.name }}</small>
+			<MkA
+				v-for="file in items"
+				:key="file.id"
+				v-tooltip.mfm="
+					`${file.type}\n${bytes(file.size)}\n${new Date(
+						file.createdAt
+					).toLocaleString()}\nby ${
+						file.user ? '@' + Acct.toString(file.user) : 'system'
+					}`
+				"
+				:to="`/admin/file/${file.id}`"
+				class="file _button"
+			>
+				<div v-if="file.isSensitive" class="sensitive-label">
+					{{ i18n.ts.sensitive }}
 				</div>
-				<div>
-					<MkAcct v-if="file.user" :user="file.user"/>
-					<div v-else>{{ i18n.ts.system }}</div>
+				<MkDriveFileThumbnail
+					class="thumbnail"
+					:file="file"
+					fit="contain"
+				/>
+				<div v-if="viewMode === 'list'" class="body">
+					<div>
+						<small style="opacity: 0.7">{{ file.name }}</small>
+					</div>
+					<div>
+						<MkAcct v-if="file.user" :user="file.user" />
+						<div v-else>{{ i18n.ts.system }}</div>
+					</div>
+					<div>
+						<span style="margin-right: 1em">{{ file.type }}</span>
+						<span>{{ bytes(file.size) }}</span>
+					</div>
+					<div>
+						<span
+							>{{ i18n.ts.registeredDate }}:
+							<MkTime :time="file.createdAt" mode="detail"
+						/></span>
+					</div>
 				</div>
-				<div>
-					<span style="margin-right: 1em;">{{ file.type }}</span>
-					<span>{{ bytes(file.size) }}</span>
-				</div>
-				<div>
-					<span>{{ i18n.ts.registeredDate }}: <MkTime :time="file.createdAt" mode="detail"/></span>
-				</div>
-			</div>
-		</MkA>
-	</MkPagination>
-</div>
+			</MkA>
+		</MkPagination>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
-import * as Acct from 'calckey-js/built/acct';
-import MkSwitch from '@/components/ui/switch.vue';
-import MkPagination from '@/components/MkPagination.vue';
-import MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue';
-import bytes from '@/filters/bytes';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
+import { computed } from "vue";
+import * as Acct from "calckey-js/built/acct";
+import MkSwitch from "@/components/ui/switch.vue";
+import MkPagination from "@/components/MkPagination.vue";
+import MkDriveFileThumbnail from "@/components/MkDriveFileThumbnail.vue";
+import bytes from "@/filters/bytes";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
 
 const props = defineProps<{
 	pagination: any;
-	viewMode: 'grid' | 'list';
+	viewMode: "grid" | "list";
 }>();
 </script>
 
 <style lang="scss" scoped>
 @keyframes sensitive-blink {
-	0% { opacity: 1; }
-	50% { opacity: 0; }
+	0% {
+		opacity: 1;
+	}
+	50% {
+		opacity: 0;
+	}
 }
 
 .urempief {
@@ -94,7 +118,7 @@ const props = defineProps<{
 		> .file {
 			position: relative;
 			aspect-ratio: 1;
-		
+
 			> .thumbnail {
 				width: 100%;
 				height: 100%;
diff --git a/packages/client/src/components/MkFileTypeIcon.vue b/packages/client/src/components/MkFileTypeIcon.vue
index 3e0761ae1e..388b6d7fcb 100644
--- a/packages/client/src/components/MkFileTypeIcon.vue
+++ b/packages/client/src/components/MkFileTypeIcon.vue
@@ -1,15 +1,17 @@
 <template>
-<span class="mk-file-type-icon">
-	<template v-if="kind == 'image'"><i class="ph-file-image ph-bold ph-lg"></i></template>
-</span>
+	<span class="mk-file-type-icon">
+		<template v-if="kind == 'image'"
+			><i class="ph-file-image ph-bold ph-lg"></i
+		></template>
+	</span>
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
+import { computed } from "vue";
 
 const props = defineProps<{
 	type: string;
 }>();
 
-const kind = computed(() => props.type.split('/')[0]);
+const kind = computed(() => props.type.split("/")[0]);
 </script>
diff --git a/packages/client/src/components/MkFolder.vue b/packages/client/src/components/MkFolder.vue
index a0be2e8568..337873fc1c 100644
--- a/packages/client/src/components/MkFolder.vue
+++ b/packages/client/src/components/MkFolder.vue
@@ -1,33 +1,40 @@
 <template>
-<div v-size="{ max: [500] }" class="ssazuxis">
-	<header class="_button" :style="{ background: bg }" @click="showBody = !showBody">
-		<div class="title"><slot name="header"></slot></div>
-		<div class="divider"></div>
-		<button class="_button">
-			<template v-if="showBody"><i class="ph-caret-up ph-bold ph-lg"></i></template>
-			<template v-else><i class="ph-caret-down ph-bold ph-lg"></i></template>
-		</button>
-	</header>
-	<transition
-		:name="$store.state.animation ? 'folder-toggle' : ''"
-		@enter="enter"
-		@after-enter="afterEnter"
-		@leave="leave"
-		@after-leave="afterLeave"
-	>
-		<div v-show="showBody">
-			<slot></slot>
-		</div>
-	</transition>
-</div>
+	<div v-size="{ max: [500] }" class="ssazuxis">
+		<header
+			class="_button"
+			:style="{ background: bg }"
+			@click="showBody = !showBody"
+		>
+			<div class="title"><slot name="header"></slot></div>
+			<div class="divider"></div>
+			<button class="_button">
+				<template v-if="showBody"
+					><i class="ph-caret-up ph-bold ph-lg"></i
+				></template>
+				<template v-else
+					><i class="ph-caret-down ph-bold ph-lg"></i
+				></template>
+			</button>
+		</header>
+		<transition
+			:name="$store.state.animation ? 'folder-toggle' : ''"
+			@enter="enter"
+			@after-enter="afterEnter"
+			@leave="leave"
+			@after-leave="afterLeave"
+		>
+			<div v-show="showBody">
+				<slot></slot>
+			</div>
+		</transition>
+	</div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
-import tinycolor from 'tinycolor2';
-
-const localStoragePrefix = 'ui:folder:';
+import { defineComponent } from "vue";
+import tinycolor from "tinycolor2";
 
+const localStoragePrefix = "ui:folder:";
 
 export default defineComponent({
 	props: {
@@ -45,19 +52,28 @@ export default defineComponent({
 	data() {
 		return {
 			bg: null,
-			showBody: (this.persistKey && localStorage.getItem(localStoragePrefix + this.persistKey)) ? localStorage.getItem(localStoragePrefix + this.persistKey) === 't' : this.expanded,
+			showBody:
+				this.persistKey &&
+				localStorage.getItem(localStoragePrefix + this.persistKey)
+					? localStorage.getItem(
+							localStoragePrefix + this.persistKey
+					  ) === "t"
+					: this.expanded,
 		};
 	},
 	watch: {
 		showBody() {
 			if (this.persistKey) {
-				localStorage.setItem(localStoragePrefix + this.persistKey, this.showBody ? 't' : 'f');
+				localStorage.setItem(
+					localStoragePrefix + this.persistKey,
+					this.showBody ? "t" : "f"
+				);
 			}
 		},
 	},
 	mounted() {
 		function getParentBg(el: Element | null): string {
-			if (el == null || el.tagName === 'BODY') return 'var(--bg)';
+			if (el == null || el.tagName === "BODY") return "var(--bg)";
 			const bg = el.style.background || el.style.backgroundColor;
 			if (bg) {
 				return bg;
@@ -66,7 +82,13 @@ export default defineComponent({
 			}
 		}
 		const rawBg = getParentBg(this.$el);
-		const bg = tinycolor(rawBg.startsWith('var(') ? getComputedStyle(document.documentElement).getPropertyValue(rawBg.slice(4, -1)) : rawBg);
+		const bg = tinycolor(
+			rawBg.startsWith("var(")
+				? getComputedStyle(document.documentElement).getPropertyValue(
+						rawBg.slice(4, -1)
+				  )
+				: rawBg
+		);
 		bg.setAlpha(0.85);
 		this.bg = bg.toRgbString();
 	},
@@ -79,14 +101,14 @@ export default defineComponent({
 			const elementHeight = el.getBoundingClientRect().height;
 			el.style.height = 0;
 			el.offsetHeight; // reflow
-			el.style.height = elementHeight + 'px';
+			el.style.height = elementHeight + "px";
 		},
 		afterEnter(el) {
 			el.style.height = null;
 		},
 		leave(el) {
 			const elementHeight = el.getBoundingClientRect().height;
-			el.style.height = elementHeight + 'px';
+			el.style.height = elementHeight + "px";
 			el.offsetHeight; // reflow
 			el.style.height = 0;
 		},
@@ -98,7 +120,8 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.folder-toggle-enter-active, .folder-toggle-leave-active {
+.folder-toggle-enter-active,
+.folder-toggle-leave-active {
 	overflow-y: hidden;
 	transition: opacity 0.5s, height 0.5s !important;
 }
diff --git a/packages/client/src/components/MkFollowButton.vue b/packages/client/src/components/MkFollowButton.vue
index ba8c8170ea..12491f6ad6 100644
--- a/packages/client/src/components/MkFollowButton.vue
+++ b/packages/client/src/components/MkFollowButton.vue
@@ -1,72 +1,87 @@
 <template>
-<button
-	class="kpoogebi _button"
-	:class="{
-		wait,
-		active: isFollowing || hasPendingFollowRequestFromYou,
-		full,
-		large,
-		blocking: isBlocking
-	}"
-	:disabled="wait"
-	@click="onClick"
->
-	<template v-if="!wait">
-		<template v-if="isBlocking">
-			<span v-if="full">{{ i18n.ts.blocked }}</span><i class="ph-prohibit ph-bold ph-lg"></i>
+	<button
+		class="kpoogebi _button"
+		:class="{
+			wait,
+			active: isFollowing || hasPendingFollowRequestFromYou,
+			full,
+			large,
+			blocking: isBlocking,
+		}"
+		:disabled="wait"
+		@click="onClick"
+	>
+		<template v-if="!wait">
+			<template v-if="isBlocking">
+				<span v-if="full">{{ i18n.ts.blocked }}</span
+				><i class="ph-prohibit ph-bold ph-lg"></i>
+			</template>
+			<template
+				v-else-if="hasPendingFollowRequestFromYou && user.isLocked"
+			>
+				<span v-if="full">{{ i18n.ts.followRequestPending }}</span
+				><i class="ph-hourglass-medium ph-bold ph-lg"></i>
+			</template>
+			<template
+				v-else-if="hasPendingFollowRequestFromYou && !user.isLocked"
+			>
+				<!-- つまりリモートフォローの場合。 -->
+				<span v-if="full">{{ i18n.ts.processing }}</span
+				><i class="ph-circle-notch ph-bold ph-lg fa-pulse"></i>
+			</template>
+			<template v-else-if="isFollowing">
+				<span v-if="full">{{ i18n.ts.unfollow }}</span
+				><i class="ph-minus ph-bold ph-lg"></i>
+			</template>
+			<template v-else-if="!isFollowing && user.isLocked">
+				<span v-if="full">{{ i18n.ts.followRequest }}</span
+				><i class="ph-plus ph-bold ph-lg"></i>
+			</template>
+			<template v-else-if="!isFollowing && !user.isLocked">
+				<span v-if="full">{{ i18n.ts.follow }}</span
+				><i class="ph-plus ph-bold ph-lg"></i>
+			</template>
 		</template>
-		<template v-else-if="hasPendingFollowRequestFromYou && user.isLocked">
-			<span v-if="full">{{ i18n.ts.followRequestPending }}</span><i class="ph-hourglass-medium ph-bold ph-lg"></i>
+		<template v-else>
+			<span v-if="full">{{ i18n.ts.processing }}</span
+			><i class="ph-circle-notch ph-bold ph-lg fa-pulse ph-fw ph-lg"></i>
 		</template>
-		<template v-else-if="hasPendingFollowRequestFromYou && !user.isLocked">
-			<!-- つまりリモートフォローの場合。 -->
-			<span v-if="full">{{ i18n.ts.processing }}</span><i class="ph-circle-notch ph-bold ph-lg fa-pulse"></i>
-		</template>
-		<template v-else-if="isFollowing">
-			<span v-if="full">{{ i18n.ts.unfollow }}</span><i class="ph-minus ph-bold ph-lg"></i>
-		</template>
-		<template v-else-if="!isFollowing && user.isLocked">
-			<span v-if="full">{{ i18n.ts.followRequest }}</span><i class="ph-plus ph-bold ph-lg"></i>
-		</template>
-		<template v-else-if="!isFollowing && !user.isLocked">
-			<span v-if="full">{{ i18n.ts.follow }}</span><i class="ph-plus ph-bold ph-lg"></i>
-		</template>
-	</template>
-	<template v-else>
-		<span v-if="full">{{ i18n.ts.processing }}</span><i class="ph-circle-notch ph-bold ph-lg fa-pulse ph-fw ph-lg"></i>
-	</template>
-</button>
+	</button>
 </template>
 
 <script lang="ts" setup>
-import { computed, onBeforeUnmount, onMounted } from 'vue';
-import type * as Misskey from 'calckey-js';
-import * as os from '@/os';
-import { stream } from '@/stream';
-import { i18n } from '@/i18n';
+import { computed, onBeforeUnmount, onMounted } from "vue";
+import type * as Misskey from "calckey-js";
+import * as os from "@/os";
+import { stream } from "@/stream";
+import { i18n } from "@/i18n";
 
-const emit = defineEmits(['refresh'])
-const props = withDefaults(defineProps<{
-		user: Misskey.entities.UserDetailed,
-		full?: boolean,
-		large?: boolean,
-	}>(), {
-	full: false,
-	large: false,
-});
+const emit = defineEmits(["refresh"]);
+const props = withDefaults(
+	defineProps<{
+		user: Misskey.entities.UserDetailed;
+		full?: boolean;
+		large?: boolean;
+	}>(),
+	{
+		full: false,
+		large: false,
+	}
+);
 
 const isBlocking = computed(() => props.user.isBlocking);
 
 let isFollowing = $ref(props.user.isFollowing);
-let hasPendingFollowRequestFromYou = $ref(props.user.hasPendingFollowRequestFromYou);
+let hasPendingFollowRequestFromYou = $ref(
+	props.user.hasPendingFollowRequestFromYou
+);
 let wait = $ref(false);
-const connection = stream.useChannel('main');
+const connection = stream.useChannel("main");
 
 if (props.user.isFollowing == null) {
-	os.api('users/show', {
+	os.api("users/show", {
 		userId: props.user.id,
-	})
-		.then(onFollowChange);
+	}).then(onFollowChange);
 }
 
 function onFollowChange(user: Misskey.entities.UserDetailed) {
@@ -82,40 +97,41 @@ async function onClick() {
 	try {
 		if (isBlocking.value) {
 			const { canceled } = await os.confirm({
-				type: 'warning',
-				text: i18n.t('unblockConfirm'),
+				type: "warning",
+				text: i18n.t("unblockConfirm"),
 			});
-			if (canceled) return
+			if (canceled) return;
 
 			await os.api("blocking/delete", {
 				userId: props.user.id,
-			})
+			});
 			if (props.user.isMuted) {
 				await os.api("mute/delete", {
 					userId: props.user.id,
-				})
+				});
 			}
-			emit('refresh')
-		}
-		else if (isFollowing) {
+			emit("refresh");
+		} else if (isFollowing) {
 			const { canceled } = await os.confirm({
-				type: 'warning',
-				text: i18n.t('unfollowConfirm', { name: props.user.name || props.user.username }),
+				type: "warning",
+				text: i18n.t("unfollowConfirm", {
+					name: props.user.name || props.user.username,
+				}),
 			});
 
 			if (canceled) return;
 
-			await os.api('following/delete', {
+			await os.api("following/delete", {
 				userId: props.user.id,
 			});
 		} else {
 			if (hasPendingFollowRequestFromYou) {
-				await os.api('following/requests/cancel', {
+				await os.api("following/requests/cancel", {
 					userId: props.user.id,
 				});
 				hasPendingFollowRequestFromYou = false;
 			} else {
-				await os.api('following/create', {
+				await os.api("following/create", {
 					userId: props.user.id,
 				});
 				hasPendingFollowRequestFromYou = true;
@@ -129,8 +145,8 @@ async function onClick() {
 }
 
 onMounted(() => {
-	connection.on('follow', onFollowChange);
-	connection.on('unfollow', onFollowChange);
+	connection.on("follow", onFollowChange);
+	connection.on("unfollow", onFollowChange);
 });
 
 onBeforeUnmount(() => {
diff --git a/packages/client/src/components/MkForgotPassword.vue b/packages/client/src/components/MkForgotPassword.vue
index 1b55451c94..07f0866011 100644
--- a/packages/client/src/components/MkForgotPassword.vue
+++ b/packages/client/src/components/MkForgotPassword.vue
@@ -1,63 +1,93 @@
 <template>
-<XModalWindow ref="dialog"
-	:width="370"
-	:height="400"
-	@close="dialog.close()"
-	@closed="emit('closed')"
->
-	<template #header>{{ i18n.ts.forgotPassword }}</template>
+	<XModalWindow
+		ref="dialog"
+		:width="370"
+		:height="400"
+		@close="dialog.close()"
+		@closed="emit('closed')"
+	>
+		<template #header>{{ i18n.ts.forgotPassword }}</template>
 
-	<form v-if="instance.enableEmail" class="bafeceda" @submit.prevent="onSubmit">
-		<div class="main _formRoot">
-			<MkInput v-model="username" class="_formBlock" type="text" pattern="^[a-zA-Z0-9_]+$" :spellcheck="false" autofocus required>
-				<template #label>{{ i18n.ts.username }}</template>
-				<template #prefix>@</template>
-			</MkInput>
+		<form
+			v-if="instance.enableEmail"
+			class="bafeceda"
+			@submit.prevent="onSubmit"
+		>
+			<div class="main _formRoot">
+				<MkInput
+					v-model="username"
+					class="_formBlock"
+					type="text"
+					pattern="^[a-zA-Z0-9_]+$"
+					:spellcheck="false"
+					autofocus
+					required
+				>
+					<template #label>{{ i18n.ts.username }}</template>
+					<template #prefix>@</template>
+				</MkInput>
 
-			<MkInput v-model="email" class="_formBlock" type="email" :spellcheck="false" required>
-				<template #label>{{ i18n.ts.emailAddress }}</template>
-				<template #caption>{{ i18n.ts._forgotPassword.enterEmail }}</template>
-			</MkInput>
+				<MkInput
+					v-model="email"
+					class="_formBlock"
+					type="email"
+					:spellcheck="false"
+					required
+				>
+					<template #label>{{ i18n.ts.emailAddress }}</template>
+					<template #caption>{{
+						i18n.ts._forgotPassword.enterEmail
+					}}</template>
+				</MkInput>
 
-			<MkButton class="_formBlock" type="submit" :disabled="processing" primary style="margin: 0 auto;">{{ i18n.ts.send }}</MkButton>
+				<MkButton
+					class="_formBlock"
+					type="submit"
+					:disabled="processing"
+					primary
+					style="margin: 0 auto"
+					>{{ i18n.ts.send }}</MkButton
+				>
+			</div>
+			<div class="sub">
+				<MkA to="/about" class="_link">{{
+					i18n.ts._forgotPassword.ifNoEmail
+				}}</MkA>
+			</div>
+		</form>
+		<div v-else class="bafecedb">
+			{{ i18n.ts._forgotPassword.contactAdmin }}
 		</div>
-		<div class="sub">
-			<MkA to="/about" class="_link">{{ i18n.ts._forgotPassword.ifNoEmail }}</MkA>
-		</div>
-	</form>
-	<div v-else class="bafecedb">
-		{{ i18n.ts._forgotPassword.contactAdmin }}
-	</div>
-</XModalWindow>
+	</XModalWindow>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import XModalWindow from '@/components/MkModalWindow.vue';
-import MkButton from '@/components/MkButton.vue';
-import MkInput from '@/components/form/input.vue';
-import * as os from '@/os';
-import { instance } from '@/instance';
-import { i18n } from '@/i18n';
+import {} from "vue";
+import XModalWindow from "@/components/MkModalWindow.vue";
+import MkButton from "@/components/MkButton.vue";
+import MkInput from "@/components/form/input.vue";
+import * as os from "@/os";
+import { instance } from "@/instance";
+import { i18n } from "@/i18n";
 
 const emit = defineEmits<{
-	(ev: 'done'): void;
-	(ev: 'closed'): void;
+	(ev: "done"): void;
+	(ev: "closed"): void;
 }>();
 
 let dialog: InstanceType<typeof XModalWindow> = $ref();
 
-let username = $ref('');
-let email = $ref('');
+let username = $ref("");
+let email = $ref("");
 let processing = $ref(false);
 
 async function onSubmit() {
 	processing = true;
-	await os.apiWithDialog('request-reset-password', {
+	await os.apiWithDialog("request-reset-password", {
 		username,
 		email,
 	});
-	emit('done');
+	emit("done");
 	dialog.close();
 }
 </script>
diff --git a/packages/client/src/components/MkFormDialog.vue b/packages/client/src/components/MkFormDialog.vue
index a92f39d5da..9b1cab73f5 100644
--- a/packages/client/src/components/MkFormDialog.vue
+++ b/packages/client/src/components/MkFormDialog.vue
@@ -1,70 +1,170 @@
 <template>
-<XModalWindow
-	ref="dialog"
-	:width="450"
-	:can-close="false"
-	:with-ok-button="true"
-	:ok-button-disabled="false"
-	@click="cancel()"
-	@ok="ok()"
-	@close="cancel()"
-	@closed="$emit('closed')"
->
-	<template #header>
-		{{ title }}
-	</template>
+	<XModalWindow
+		ref="dialog"
+		:width="450"
+		:can-close="false"
+		:with-ok-button="true"
+		:ok-button-disabled="false"
+		@click="cancel()"
+		@ok="ok()"
+		@close="cancel()"
+		@closed="$emit('closed')"
+	>
+		<template #header>
+			{{ title }}
+		</template>
 
-	<MkSpacer :margin-min="20" :margin-max="32">
-		<div class="xkpnjxcv _formRoot">
-			<template v-for="item in Object.keys(form).filter(item => !form[item].hidden)">
-				<FormInput v-if="form[item].type === 'number'" v-model="values[item]" type="number" :step="form[item].step || 1" class="_formBlock">
-					<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ i18n.ts.optional }})</span></template>
-					<template v-if="form[item].description" #caption>{{ form[item].description }}</template>
-				</FormInput>
-				<FormInput v-else-if="form[item].type === 'string' && !form[item].multiline" v-model="values[item]" type="text" class="_formBlock">
-					<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ i18n.ts.optional }})</span></template>
-					<template v-if="form[item].description" #caption>{{ form[item].description }}</template>
-				</FormInput>
-				<FormTextarea v-else-if="form[item].type === 'string' && form[item].multiline" v-model="values[item]" class="_formBlock">
-					<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ i18n.ts.optional }})</span></template>
-					<template v-if="form[item].description" #caption>{{ form[item].description }}</template>
-				</FormTextarea>
-				<FormSwitch v-else-if="form[item].type === 'boolean'" v-model="values[item]" class="_formBlock">
-					<span v-text="form[item].label || item"></span>
-					<template v-if="form[item].description" #caption>{{ form[item].description }}</template>
-				</FormSwitch>
-				<FormSelect v-else-if="form[item].type === 'enum'" v-model="values[item]" class="_formBlock">
-					<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ i18n.ts.optional }})</span></template>
-					<option v-for="item in form[item].enum" :key="item.value" :value="item.value">{{ item.label }}</option>
-				</FormSelect>
-				<FormRadios v-else-if="form[item].type === 'radio'" v-model="values[item]" class="_formBlock">
-					<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ i18n.ts.optional }})</span></template>
-					<option v-for="item in form[item].options" :key="item.value" :value="item.value">{{ item.label }}</option>
-				</FormRadios>
-				<FormRange v-else-if="form[item].type === 'range'" v-model="values[item]" :min="form[item].min" :max="form[item].max" :step="form[item].step" :text-converter="form[item].textConverter" class="_formBlock">
-					<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ i18n.ts.optional }})</span></template>
-					<template v-if="form[item].description" #caption>{{ form[item].description }}</template>
-				</FormRange>
-				<MkButton v-else-if="form[item].type === 'button'" class="_formBlock" @click="form[item].action($event, values)">
-					<span v-text="form[item].content || item"></span>
-				</MkButton>
-			</template>
-		</div>
-	</MkSpacer>
-</XModalWindow>
+		<MkSpacer :margin-min="20" :margin-max="32">
+			<div class="xkpnjxcv _formRoot">
+				<template
+					v-for="item in Object.keys(form).filter(
+						(item) => !form[item].hidden
+					)"
+				>
+					<FormInput
+						v-if="form[item].type === 'number'"
+						v-model="values[item]"
+						type="number"
+						:step="form[item].step || 1"
+						class="_formBlock"
+					>
+						<template #label
+							><span v-text="form[item].label || item"></span
+							><span v-if="form[item].required === false">
+								({{ i18n.ts.optional }})</span
+							></template
+						>
+						<template v-if="form[item].description" #caption>{{
+							form[item].description
+						}}</template>
+					</FormInput>
+					<FormInput
+						v-else-if="
+							form[item].type === 'string' &&
+							!form[item].multiline
+						"
+						v-model="values[item]"
+						type="text"
+						class="_formBlock"
+					>
+						<template #label
+							><span v-text="form[item].label || item"></span
+							><span v-if="form[item].required === false">
+								({{ i18n.ts.optional }})</span
+							></template
+						>
+						<template v-if="form[item].description" #caption>{{
+							form[item].description
+						}}</template>
+					</FormInput>
+					<FormTextarea
+						v-else-if="
+							form[item].type === 'string' && form[item].multiline
+						"
+						v-model="values[item]"
+						class="_formBlock"
+					>
+						<template #label
+							><span v-text="form[item].label || item"></span
+							><span v-if="form[item].required === false">
+								({{ i18n.ts.optional }})</span
+							></template
+						>
+						<template v-if="form[item].description" #caption>{{
+							form[item].description
+						}}</template>
+					</FormTextarea>
+					<FormSwitch
+						v-else-if="form[item].type === 'boolean'"
+						v-model="values[item]"
+						class="_formBlock"
+					>
+						<span v-text="form[item].label || item"></span>
+						<template v-if="form[item].description" #caption>{{
+							form[item].description
+						}}</template>
+					</FormSwitch>
+					<FormSelect
+						v-else-if="form[item].type === 'enum'"
+						v-model="values[item]"
+						class="_formBlock"
+					>
+						<template #label
+							><span v-text="form[item].label || item"></span
+							><span v-if="form[item].required === false">
+								({{ i18n.ts.optional }})</span
+							></template
+						>
+						<option
+							v-for="item in form[item].enum"
+							:key="item.value"
+							:value="item.value"
+						>
+							{{ item.label }}
+						</option>
+					</FormSelect>
+					<FormRadios
+						v-else-if="form[item].type === 'radio'"
+						v-model="values[item]"
+						class="_formBlock"
+					>
+						<template #label
+							><span v-text="form[item].label || item"></span
+							><span v-if="form[item].required === false">
+								({{ i18n.ts.optional }})</span
+							></template
+						>
+						<option
+							v-for="item in form[item].options"
+							:key="item.value"
+							:value="item.value"
+						>
+							{{ item.label }}
+						</option>
+					</FormRadios>
+					<FormRange
+						v-else-if="form[item].type === 'range'"
+						v-model="values[item]"
+						:min="form[item].min"
+						:max="form[item].max"
+						:step="form[item].step"
+						:text-converter="form[item].textConverter"
+						class="_formBlock"
+					>
+						<template #label
+							><span v-text="form[item].label || item"></span
+							><span v-if="form[item].required === false">
+								({{ i18n.ts.optional }})</span
+							></template
+						>
+						<template v-if="form[item].description" #caption>{{
+							form[item].description
+						}}</template>
+					</FormRange>
+					<MkButton
+						v-else-if="form[item].type === 'button'"
+						class="_formBlock"
+						@click="form[item].action($event, values)"
+					>
+						<span v-text="form[item].content || item"></span>
+					</MkButton>
+				</template>
+			</div>
+		</MkSpacer>
+	</XModalWindow>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
-import FormInput from './form/input.vue';
-import FormTextarea from './form/textarea.vue';
-import FormSwitch from './form/switch.vue';
-import FormSelect from './form/select.vue';
-import FormRange from './form/range.vue';
-import MkButton from './MkButton.vue';
-import FormRadios from './form/radios.vue';
-import XModalWindow from '@/components/MkModalWindow.vue';
-import { i18n } from '@/i18n';
+import { defineComponent } from "vue";
+import FormInput from "./form/input.vue";
+import FormTextarea from "./form/textarea.vue";
+import FormSwitch from "./form/switch.vue";
+import FormSelect from "./form/select.vue";
+import FormRange from "./form/range.vue";
+import MkButton from "./MkButton.vue";
+import FormRadios from "./form/radios.vue";
+import XModalWindow from "@/components/MkModalWindow.vue";
+import { i18n } from "@/i18n";
 
 export default defineComponent({
 	components: {
@@ -89,7 +189,7 @@ export default defineComponent({
 		},
 	},
 
-	emits: ['done'],
+	emits: ["done"],
 
 	data() {
 		return {
@@ -106,14 +206,14 @@ export default defineComponent({
 
 	methods: {
 		ok() {
-			this.$emit('done', {
+			this.$emit("done", {
 				result: this.values,
 			});
 			this.$refs.dialog.close();
 		},
 
 		cancel() {
-			this.$emit('done', {
+			this.$emit("done", {
 				canceled: true,
 			});
 			this.$refs.dialog.close();
@@ -124,6 +224,5 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .xkpnjxcv {
-
 }
 </style>
diff --git a/packages/client/src/components/MkFormula.vue b/packages/client/src/components/MkFormula.vue
index 65a2fee930..2dacad1679 100644
--- a/packages/client/src/components/MkFormula.vue
+++ b/packages/client/src/components/MkFormula.vue
@@ -1,14 +1,16 @@
 <template>
-<XFormula :formula="formula" :block="block"/>
+	<XFormula :formula="formula" :block="block" />
 </template>
 
 <script lang="ts">
-import { defineComponent, defineAsyncComponent } from 'vue';
-import * as os from '@/os';
+import { defineComponent, defineAsyncComponent } from "vue";
+import * as os from "@/os";
 
 export default defineComponent({
 	components: {
-		XFormula: defineAsyncComponent(() => import('@/components/MkFormulaCore.vue')),
+		XFormula: defineAsyncComponent(
+			() => import("@/components/MkFormulaCore.vue")
+		),
 	},
 	props: {
 		formula: {
diff --git a/packages/client/src/components/MkFormulaCore.vue b/packages/client/src/components/MkFormulaCore.vue
index de24befede..5675dbfa02 100644
--- a/packages/client/src/components/MkFormulaCore.vue
+++ b/packages/client/src/components/MkFormulaCore.vue
@@ -1,30 +1,30 @@
 <template>
-<div v-if="block" v-html="compiledFormula"></div>
-<span v-else v-html="compiledFormula"></span>
+	<div v-if="block" v-html="compiledFormula"></div>
+	<span v-else v-html="compiledFormula"></span>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
-import katex from 'katex';
+import { defineComponent } from "vue";
+import katex from "katex";
 
 export default defineComponent({
 	props: {
 		formula: {
 			type: String,
-			required: true
+			required: true,
 		},
 		block: {
 			type: Boolean,
-			required: true
-		}
+			required: true,
+		},
 	},
 	computed: {
 		compiledFormula(): any {
 			return katex.renderToString(this.formula, {
-				throwOnError: false
+				throwOnError: false,
 			} as any);
-		}
-	}
+		},
+	},
 });
 </script>
 
diff --git a/packages/client/src/components/MkGalleryPostPreview.vue b/packages/client/src/components/MkGalleryPostPreview.vue
index 056f1dff4c..f4f6943838 100644
--- a/packages/client/src/components/MkGalleryPostPreview.vue
+++ b/packages/client/src/components/MkGalleryPostPreview.vue
@@ -1,27 +1,31 @@
 <template>
-<MkA :to="`/gallery/${post.id}`" class="ttasepnz _panel" tabindex="-1">
-	<div class="thumbnail">
-		<ImgWithBlurhash class="img" :src="post.files[0].thumbnailUrl" :hash="post.files[0].blurhash"/>
-	</div>
-	<article>
-		<header>
-			<MkAvatar :user="post.user" class="avatar"/>
-		</header>
-		<footer>
-			<span class="title">{{ post.title }}</span>
-		</footer>
-	</article>
-</MkA>
+	<MkA :to="`/gallery/${post.id}`" class="ttasepnz _panel" tabindex="-1">
+		<div class="thumbnail">
+			<ImgWithBlurhash
+				class="img"
+				:src="post.files[0].thumbnailUrl"
+				:hash="post.files[0].blurhash"
+			/>
+		</div>
+		<article>
+			<header>
+				<MkAvatar :user="post.user" class="avatar" />
+			</header>
+			<footer>
+				<span class="title">{{ post.title }}</span>
+			</footer>
+		</article>
+	</MkA>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import { userName } from '@/filters/user';
-import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
+import {} from "vue";
+import { userName } from "@/filters/user";
+import ImgWithBlurhash from "@/components/MkImgWithBlurhash.vue";
 
 const props = defineProps<{
-		post: any;
-	}>();
+	post: any;
+}>();
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/components/MkGoogle.vue b/packages/client/src/components/MkGoogle.vue
index 274f851a66..2599aea474 100644
--- a/packages/client/src/components/MkGoogle.vue
+++ b/packages/client/src/components/MkGoogle.vue
@@ -1,13 +1,16 @@
 <template>
-<div class="mk-google">
-	<input v-model="query" type="search" :placeholder="q">
-	<button @click="search"><i class="ph-magnifying-glass ph-bold ph-lg"></i> {{ i18n.ts.searchByGoogle }}</button>
-</div>
+	<div class="mk-google">
+		<input v-model="query" type="search" :placeholder="q" />
+		<button @click="search">
+			<i class="ph-magnifying-glass ph-bold ph-lg"></i>
+			{{ i18n.ts.searchByGoogle }}
+		</button>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
-import { i18n } from '@/i18n';
+import { ref } from "vue";
+import { i18n } from "@/i18n";
 
 const props = defineProps<{
 	q: string;
@@ -16,7 +19,10 @@ const props = defineProps<{
 const query = ref(props.q);
 
 const search = () => {
-	window.open(`https://search.annoyingorange.xyz/search?q=${query.value}`, '_blank');
+	window.open(
+		`https://search.annoyingorange.xyz/search?q=${query.value}`,
+		"_blank"
+	);
 };
 </script>
 
diff --git a/packages/client/src/components/MkHeatmap.vue b/packages/client/src/components/MkHeatmap.vue
index 02f5c7aeda..1af278b233 100644
--- a/packages/client/src/components/MkHeatmap.vue
+++ b/packages/client/src/components/MkHeatmap.vue
@@ -1,23 +1,30 @@
 <template>
 	<div ref="rootEl">
-		<MkLoading v-if="fetching"/>
+		<MkLoading v-if="fetching" />
 		<div v-else>
 			<canvas ref="chartEl"></canvas>
 		</div>
 	</div>
-	</template>
+</template>
 
 <script lang="ts" setup>
-import { markRaw, version as vueVersion, onMounted, onBeforeUnmount, nextTick, watch } from 'vue';
-import { Chart } from 'chart.js';
-import tinycolor from 'tinycolor2';
-import { MatrixController, MatrixElement } from 'chartjs-chart-matrix';
-import * as os from '@/os';
-import { defaultStore } from '@/store';
-import { useChartTooltip } from '@/scripts/use-chart-tooltip';
-import { chartVLine } from '@/scripts/chart-vline';
-import { alpha } from '@/scripts/color';
-import { initChart } from '@/scripts/init-chart';
+import {
+	markRaw,
+	version as vueVersion,
+	onMounted,
+	onBeforeUnmount,
+	nextTick,
+	watch,
+} from "vue";
+import { Chart } from "chart.js";
+import tinycolor from "tinycolor2";
+import { MatrixController, MatrixElement } from "chartjs-chart-matrix";
+import * as os from "@/os";
+import { defaultStore } from "@/store";
+import { useChartTooltip } from "@/scripts/use-chart-tooltip";
+import { chartVLine } from "@/scripts/chart-vline";
+import { alpha } from "@/scripts/color";
+import { initChart } from "@/scripts/init-chart";
 
 initChart();
 
@@ -32,7 +39,7 @@ let chartInstance: Chart = null;
 let fetching = $ref(true);
 
 const { handler: externalTooltipHandler } = useChartTooltip({
-	position: 'middle',
+	position: "middle",
 });
 
 async function renderChart() {
@@ -57,7 +64,9 @@ async function renderChart() {
 	const format = (arr) => {
 		return arr.map((v, i) => {
 			const dt = getDate(i);
-			const iso = `${dt.getFullYear()}-${(dt.getMonth() + 1).toString().padStart(2, '0')}-${dt.getDate().toString().padStart(2, '0')}`;
+			const iso = `${dt.getFullYear()}-${(dt.getMonth() + 1)
+				.toString()
+				.padStart(2, "0")}-${dt.getDate().toString().padStart(2, "0")}`;
 			return {
 				x: iso,
 				y: dt.getDay(),
@@ -69,20 +78,35 @@ async function renderChart() {
 
 	let values;
 
-	if (props.src === 'active-users') {
-		const raw = await os.api('charts/active-users', { limit: chartLimit, span: 'day' });
+	if (props.src === "active-users") {
+		const raw = await os.api("charts/active-users", {
+			limit: chartLimit,
+			span: "day",
+		});
 		values = raw.readWrite;
-	} else if (props.src === 'notes') {
-		const raw = await os.api('charts/notes', { limit: chartLimit, span: 'day' });
+	} else if (props.src === "notes") {
+		const raw = await os.api("charts/notes", {
+			limit: chartLimit,
+			span: "day",
+		});
 		values = raw.local.inc;
-	} else if (props.src === 'ap-requests-inbox-received') {
-		const raw = await os.api('charts/ap-request', { limit: chartLimit, span: 'day' });
+	} else if (props.src === "ap-requests-inbox-received") {
+		const raw = await os.api("charts/ap-request", {
+			limit: chartLimit,
+			span: "day",
+		});
 		values = raw.inboxReceived;
-	} else if (props.src === 'ap-requests-deliver-succeeded') {
-		const raw = await os.api('charts/ap-request', { limit: chartLimit, span: 'day' });
+	} else if (props.src === "ap-requests-deliver-succeeded") {
+		const raw = await os.api("charts/ap-request", {
+			limit: chartLimit,
+			span: "day",
+		});
 		values = raw.deliverSucceeded;
-	} else if (props.src === 'ap-requests-deliver-failed') {
-		const raw = await os.api('charts/ap-request', { limit: chartLimit, span: 'day' });
+	} else if (props.src === "ap-requests-deliver-failed") {
+		const raw = await os.api("charts/ap-request", {
+			limit: chartLimit,
+			span: "day",
+		});
 		values = raw.deliverFailed;
 	}
 
@@ -90,43 +114,51 @@ async function renderChart() {
 
 	await nextTick();
 
-	const color = defaultStore.state.darkMode ? '#ebbcba' : '#d7827e';
+	const color = defaultStore.state.darkMode ? "#ebbcba" : "#d7827e";
 
 	// 視覚上の分かりやすさのため上から最も大きい3つの値の平均を最大値とする
-	const max = values.slice().sort((a, b) => b - a).slice(0, 3).reduce((a, b) => a + b, 0) / 3;
+	const max =
+		values
+			.slice()
+			.sort((a, b) => b - a)
+			.slice(0, 3)
+			.reduce((a, b) => a + b, 0) / 3;
 
 	const min = Math.max(0, Math.min(...values) - 1);
 
 	const marginEachCell = 4;
 
 	chartInstance = new Chart(chartEl, {
-		type: 'matrix',
+		type: "matrix",
 		data: {
-			datasets: [{
-				label: 'Read & Write',
-				data: format(values),
-				pointRadius: 0,
-				borderWidth: 0,
-				borderJoinStyle: 'round',
-				borderRadius: 3,
-				backgroundColor(c) {
-					const value = c.dataset.data[c.dataIndex].v;
-					let a = (value - min) / max;
-					if (value !== 0) { // 0でない限りは完全に不可視にはしない
-						a = Math.max(a, 0.05);
-					}
-					return alpha(color, a);
+			datasets: [
+				{
+					label: "Read & Write",
+					data: format(values),
+					pointRadius: 0,
+					borderWidth: 0,
+					borderJoinStyle: "round",
+					borderRadius: 3,
+					backgroundColor(c) {
+						const value = c.dataset.data[c.dataIndex].v;
+						let a = (value - min) / max;
+						if (value !== 0) {
+							// 0でない限りは完全に不可視にはしない
+							a = Math.max(a, 0.05);
+						}
+						return alpha(color, a);
+					},
+					fill: true,
+					width(c) {
+						const a = c.chart.chartArea ?? {};
+						return (a.right - a.left) / weeks - marginEachCell;
+					},
+					height(c) {
+						const a = c.chart.chartArea ?? {};
+						return (a.bottom - a.top) / 7 - marginEachCell;
+					},
 				},
-				fill: true,
-				width(c) {
-					const a = c.chart.chartArea ?? {};
-					return (a.right - a.left) / weeks - marginEachCell;
-				},
-				height(c) {
-					const a = c.chart.chartArea ?? {};
-					return (a.bottom - a.top) / 7 - marginEachCell;
-				},
-			}],
+			],
 		},
 		options: {
 			aspectRatio: wide ? 6 : narrow ? 1.8 : 3.2,
@@ -140,17 +172,17 @@ async function renderChart() {
 			},
 			scales: {
 				x: {
-					type: 'time',
+					type: "time",
 					offset: true,
-					position: 'bottom',
+					position: "bottom",
 					time: {
-						unit: 'week',
-						round: 'week',
+						unit: "week",
+						round: "week",
 						isoWeekday: 0,
 						displayFormats: {
-							day: 'M/d',
-							month: 'Y/M',
-							week: 'M/d',
+							day: "M/d",
+							month: "Y/M",
+							week: "M/d",
 						},
 					},
 					grid: {
@@ -165,7 +197,7 @@ async function renderChart() {
 				y: {
 					offset: true,
 					reverse: true,
-					position: 'right',
+					position: "right",
 					grid: {
 						display: false,
 					},
@@ -176,7 +208,8 @@ async function renderChart() {
 						font: {
 							size: 9,
 						},
-						callback: (value, index, values) => ['', 'Mon', '', 'Wed', '', 'Fri', ''][value],
+						callback: (value, index, values) =>
+							["", "Mon", "", "Wed", "", "Fri", ""][value],
 					},
 				},
 			},
@@ -188,12 +221,13 @@ async function renderChart() {
 					enabled: false,
 					callbacks: {
 						title(context) {
-							const v = context[0].dataset.data[context[0].dataIndex];
+							const v =
+								context[0].dataset.data[context[0].dataIndex];
 							return v.d;
 						},
 						label(context) {
 							const v = context.dataset.data[context.dataIndex];
-							return ['Active: ' + v.v];
+							return ["Active: " + v.v];
 						},
 					},
 					//mode: 'index',
@@ -207,10 +241,13 @@ async function renderChart() {
 	});
 }
 
-watch(() => props.src, () => {
-	fetching = true;
-	renderChart();
-});
+watch(
+	() => props.src,
+	() => {
+		fetching = true;
+		renderChart();
+	}
+);
 
 onMounted(async () => {
 	renderChart();
diff --git a/packages/client/src/components/MkImageViewer.vue b/packages/client/src/components/MkImageViewer.vue
index 263ce7c0ab..51173d99d1 100644
--- a/packages/client/src/components/MkImageViewer.vue
+++ b/packages/client/src/components/MkImageViewer.vue
@@ -1,31 +1,46 @@
 <template>
-<MkModal ref="modal" :z-priority="'middle'" @click="modal.close()" @closed="emit('closed')">
-	<div class="xubzgfga">
-		<header>{{ image.name }}</header>
-		<img :src="image.url" :alt="image.comment" :title="image.comment" @click="modal.close()"/>
-		<footer>
-			<span>{{ image.type }}</span>
-			<span>{{ bytes(image.size) }}</span>
-			<span v-if="image.properties && image.properties.width">{{ number(image.properties.width) }}px × {{ number(image.properties.height) }}px</span>
-		</footer>
-	</div>
-</MkModal>
+	<MkModal
+		ref="modal"
+		:z-priority="'middle'"
+		@click="modal.close()"
+		@closed="emit('closed')"
+	>
+		<div class="xubzgfga">
+			<header>{{ image.name }}</header>
+			<img
+				:src="image.url"
+				:alt="image.comment"
+				:title="image.comment"
+				@click="modal.close()"
+			/>
+			<footer>
+				<span>{{ image.type }}</span>
+				<span>{{ bytes(image.size) }}</span>
+				<span v-if="image.properties && image.properties.width"
+					>{{ number(image.properties.width) }}px ×
+					{{ number(image.properties.height) }}px</span
+				>
+			</footer>
+		</div>
+	</MkModal>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import type * as misskey from 'calckey-js';
-import bytes from '@/filters/bytes';
-import number from '@/filters/number';
-import MkModal from '@/components/MkModal.vue';
+import {} from "vue";
+import type * as misskey from "calckey-js";
+import bytes from "@/filters/bytes";
+import number from "@/filters/number";
+import MkModal from "@/components/MkModal.vue";
 
-const props = withDefaults(defineProps<{
-	image: misskey.entities.DriveFile;
-}>(), {
-});
+const props = withDefaults(
+	defineProps<{
+		image: misskey.entities.DriveFile;
+	}>(),
+	{}
+);
 
 const emit = defineEmits<{
-	(ev: 'closed'): void;
+	(ev: "closed"): void;
 }>();
 
 const modal = $ref<InstanceType<typeof MkModal>>();
diff --git a/packages/client/src/components/MkImgWithBlurhash.vue b/packages/client/src/components/MkImgWithBlurhash.vue
index b6eae622d9..c7652f476c 100644
--- a/packages/client/src/components/MkImgWithBlurhash.vue
+++ b/packages/client/src/components/MkImgWithBlurhash.vue
@@ -1,30 +1,46 @@
 <template>
-<div class="xubzgfgb" :class="{ cover }" :title="title">
-	<canvas v-if="!loaded" ref="canvas" :width="size" :height="size" :title="title"/>
-	<img v-if="src" :src="src" :title="title" :type="type" :alt="alt" @load="onLoad"/>
-</div>
+	<div class="xubzgfgb" :class="{ cover }" :title="title">
+		<canvas
+			v-if="!loaded"
+			ref="canvas"
+			:width="size"
+			:height="size"
+			:title="title"
+		/>
+		<img
+			v-if="src"
+			:src="src"
+			:title="title"
+			:type="type"
+			:alt="alt"
+			@load="onLoad"
+		/>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted } from 'vue';
-import { decode } from 'blurhash';
+import { onMounted } from "vue";
+import { decode } from "blurhash";
 
-const props = withDefaults(defineProps<{
-	src?: string | null;
-	hash?: string;
-	alt?: string;
-	type?: string | null;
-	title?: string | null;
-	size?: number;
-	cover?: boolean;
-}>(), {
-	src: null,
-	type: null,
-	alt: '',
-	title: null,
-	size: 64,
-	cover: true,
-});
+const props = withDefaults(
+	defineProps<{
+		src?: string | null;
+		hash?: string;
+		alt?: string;
+		type?: string | null;
+		title?: string | null;
+		size?: number;
+		cover?: boolean;
+	}>(),
+	{
+		src: null,
+		type: null,
+		alt: "",
+		title: null,
+		size: 64,
+		cover: true,
+	}
+);
 
 const canvas = $ref<HTMLCanvasElement>();
 let loaded = $ref(false);
@@ -32,7 +48,7 @@ let loaded = $ref(false);
 function draw() {
 	if (props.hash == null) return;
 	const pixels = decode(props.hash, props.size, props.size);
-	const ctx = canvas.getContext('2d');
+	const ctx = canvas.getContext("2d");
 	const imageData = ctx!.createImageData(props.size, props.size);
 	imageData.data.set(pixels);
 	ctx!.putImageData(imageData, 0, 0);
diff --git a/packages/client/src/components/MkInfo.vue b/packages/client/src/components/MkInfo.vue
index 005ac53ff5..43f2de29e0 100644
--- a/packages/client/src/components/MkInfo.vue
+++ b/packages/client/src/components/MkInfo.vue
@@ -1,13 +1,13 @@
 <template>
-<div class="fpezltsf" :class="{ warn }">
-	<i v-if="warn" class="ph-warning ph-bold ph-lg"></i>
-	<i v-else class="ph-info ph-bold ph-lg"></i>
-	<slot></slot>
-</div>
+	<div class="fpezltsf" :class="{ warn }">
+		<i v-if="warn" class="ph-warning ph-bold ph-lg"></i>
+		<i v-else class="ph-info ph-bold ph-lg"></i>
+		<slot></slot>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
+import {} from "vue";
 
 defineProps<{
 	warn?: boolean;
diff --git a/packages/client/src/components/MkInstanceCardMini.vue b/packages/client/src/components/MkInstanceCardMini.vue
index 11952e46ca..0a3fbbea2f 100644
--- a/packages/client/src/components/MkInstanceCardMini.vue
+++ b/packages/client/src/components/MkInstanceCardMini.vue
@@ -1,19 +1,32 @@
 <template>
-<div :class="[$style.root, { yellow: instance.isNotResponding, red: instance.isBlocked, gray: instance.isSuspended }]">
-	<img class="icon" :src="getInstanceIcon(instance)" alt=""/>
-	<div class="body">
-		<span class="host">{{ instance.name ?? instance.host }}</span>
-		<span class="sub _monospace"><b>{{ instance.host }}</b> / {{ instance.softwareName || '?' }} {{ instance.softwareVersion }}</span>
+	<div
+		:class="[
+			$style.root,
+			{
+				yellow: instance.isNotResponding,
+				red: instance.isBlocked,
+				gray: instance.isSuspended,
+			},
+		]"
+	>
+		<img class="icon" :src="getInstanceIcon(instance)" alt="" />
+		<div class="body">
+			<span class="host">{{ instance.name ?? instance.host }}</span>
+			<span class="sub _monospace"
+				><b>{{ instance.host }}</b> /
+				{{ instance.softwareName || "?" }}
+				{{ instance.softwareVersion }}</span
+			>
+		</div>
+		<MkMiniChart v-if="chartValues" class="chart" :src="chartValues" />
 	</div>
-	<MkMiniChart v-if="chartValues" class="chart" :src="chartValues"/>
-</div>
 </template>
 
 <script lang="ts" setup>
-import * as misskey from 'calckey-js';
-import MkMiniChart from '@/components/MkMiniChart.vue';
-import * as os from '@/os';
-import { getProxiedImageUrlNullable } from '@/scripts/media-proxy';
+import * as misskey from "calckey-js";
+import MkMiniChart from "@/components/MkMiniChart.vue";
+import * as os from "@/os";
+import { getProxiedImageUrlNullable } from "@/scripts/media-proxy";
 
 const props = defineProps<{
 	instance: misskey.entities.Instance;
@@ -21,14 +34,22 @@ const props = defineProps<{
 
 let chartValues = $ref<number[] | null>(null);
 
-os.apiGet('charts/instance', { host: props.instance.host, limit: 16 + 1, span: 'day' }).then(res => {
+os.apiGet("charts/instance", {
+	host: props.instance.host,
+	limit: 16 + 1,
+	span: "day",
+}).then((res) => {
 	// 今日のぶんの値はまだ途中の値であり、それも含めると大抵の場合前日よりも下降しているようなグラフになってしまうため今日は弾く
 	res.requests.received.splice(0, 1);
 	chartValues = res.requests.received;
 });
 
 function getInstanceIcon(instance): string {
-	return getProxiedImageUrlNullable(instance.iconUrl, 'preview') ?? getProxiedImageUrlNullable(instance.faviconUrl, 'preview') ?? '/client-assets/dummy.png';
+	return (
+		getProxiedImageUrlNullable(instance.iconUrl, "preview") ??
+		getProxiedImageUrlNullable(instance.faviconUrl, "preview") ??
+		"/client-assets/dummy.png"
+	);
 }
 </script>
 
@@ -86,19 +107,46 @@ function getInstanceIcon(instance): string {
 
 	&:global(.yellow) {
 		--c: rgb(255 196 0 / 15%);
-		background-image: linear-gradient(45deg, var(--c) 16.67%, transparent 16.67%, transparent 50%, var(--c) 50%, var(--c) 66.67%, transparent 66.67%, transparent 100%);
+		background-image: linear-gradient(
+			45deg,
+			var(--c) 16.67%,
+			transparent 16.67%,
+			transparent 50%,
+			var(--c) 50%,
+			var(--c) 66.67%,
+			transparent 66.67%,
+			transparent 100%
+		);
 		background-size: 16px 16px;
 	}
 
 	&:global(.red) {
 		--c: rgb(255 0 0 / 15%);
-		background-image: linear-gradient(45deg, var(--c) 16.67%, transparent 16.67%, transparent 50%, var(--c) 50%, var(--c) 66.67%, transparent 66.67%, transparent 100%);
+		background-image: linear-gradient(
+			45deg,
+			var(--c) 16.67%,
+			transparent 16.67%,
+			transparent 50%,
+			var(--c) 50%,
+			var(--c) 66.67%,
+			transparent 66.67%,
+			transparent 100%
+		);
 		background-size: 16px 16px;
 	}
 
 	&:global(.gray) {
 		--c: var(--bg);
-		background-image: linear-gradient(45deg, var(--c) 16.67%, transparent 16.67%, transparent 50%, var(--c) 50%, var(--c) 66.67%, transparent 66.67%, transparent 100%);
+		background-image: linear-gradient(
+			45deg,
+			var(--c) 16.67%,
+			transparent 16.67%,
+			transparent 50%,
+			var(--c) 50%,
+			var(--c) 66.67%,
+			transparent 66.67%,
+			transparent 100%
+		);
 		background-size: 16px 16px;
 	}
 }
diff --git a/packages/client/src/components/MkInstanceSelectDialog.vue b/packages/client/src/components/MkInstanceSelectDialog.vue
index 0d0123f0fb..c79879d146 100644
--- a/packages/client/src/components/MkInstanceSelectDialog.vue
+++ b/packages/client/src/components/MkInstanceSelectDialog.vue
@@ -1,87 +1,113 @@
 <template>
-<XModalWindow
-	ref="dialogEl"
-	:with-ok-button="true"
-	:ok-button-disabled="selected == null"
-	@click="cancel()"
-	@close="cancel()"
-	@ok="ok()"
-	@closed="$emit('closed')"
->
-	<template #header>{{ i18n.ts.selectInstance }}</template>
-	<div class="mehkoush">
-		<div class="form">
-				<MkInput v-model="hostname" :autofocus="true" @update:modelValue="search">
+	<XModalWindow
+		ref="dialogEl"
+		:with-ok-button="true"
+		:ok-button-disabled="selected == null"
+		@click="cancel()"
+		@close="cancel()"
+		@ok="ok()"
+		@closed="$emit('closed')"
+	>
+		<template #header>{{ i18n.ts.selectInstance }}</template>
+		<div class="mehkoush">
+			<div class="form">
+				<MkInput
+					v-model="hostname"
+					:autofocus="true"
+					@update:modelValue="search"
+				>
 					<template #label>{{ i18n.ts.instance }}</template>
 				</MkInput>
-		</div>
-		<div v-if="hostname != ''" class="result" :class="{ hit: instances.length > 0 }">
-			<div v-if="instances.length > 0" class="instances">
-				<div v-for="item in instances" :key="item.id" class="instance" :class="{ selected: selected && selected.id === item.id }" @click="selected = item" @dblclick="ok()">
-					<div class="body">
-						<img class="icon" :src="item.iconUrl ?? '/client-assets/dummy.png'" aria-hidden="true"/>
-						<span class="name">{{ item.host }}</span>
+			</div>
+			<div
+				v-if="hostname != ''"
+				class="result"
+				:class="{ hit: instances.length > 0 }"
+			>
+				<div v-if="instances.length > 0" class="instances">
+					<div
+						v-for="item in instances"
+						:key="item.id"
+						class="instance"
+						:class="{
+							selected: selected && selected.id === item.id,
+						}"
+						@click="selected = item"
+						@dblclick="ok()"
+					>
+						<div class="body">
+							<img
+								class="icon"
+								:src="
+									item.iconUrl ?? '/client-assets/dummy.png'
+								"
+								aria-hidden="true"
+							/>
+							<span class="name">{{ item.host }}</span>
+						</div>
 					</div>
 				</div>
-			</div>
-			<div v-else class="empty">
-				<span>{{ i18n.ts.noInstances }}</span>
+				<div v-else class="empty">
+					<span>{{ i18n.ts.noInstances }}</span>
+				</div>
 			</div>
 		</div>
-	</div>
-</XModalWindow>
+	</XModalWindow>
 </template>
 
 <script lang="ts" setup>
-import MkInput from '@/components/form/input.vue';
-import XModalWindow from '@/components/MkModalWindow.vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { Instance } from 'calckey-js/built/entities';
+import MkInput from "@/components/form/input.vue";
+import XModalWindow from "@/components/MkModalWindow.vue";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
+import { Instance } from "calckey-js/built/entities";
 
 const emit = defineEmits<{
-	(ev: 'ok', selected: Instance): void;
-	(ev: 'cancel'): void;
-	(ev: 'closed'): void;
+	(ev: "ok", selected: Instance): void;
+	(ev: "cancel"): void;
+	(ev: "closed"): void;
 }>();
 
-let hostname = $ref('');
+let hostname = $ref("");
 let instances: Instance[] = $ref([]);
 let selected: Instance | null = $ref(null);
 let dialogEl = $ref<InstanceType<typeof XModalWindow>>();
 
 let searchOrderLatch = 0;
 const search = () => {
-	if (hostname === '') {
+	if (hostname === "") {
 		instances = [];
 		return;
 	}
 
 	const searchId = ++searchOrderLatch;
-	os.api('federation/instances', {
+	os.api("federation/instances", {
 		host: hostname,
 		limit: 10,
 		blocked: false,
 		suspended: false,
-		sort: '+pubSub',
-	}).then(_instances => {
+		sort: "+pubSub",
+	}).then((_instances) => {
 		if (searchId !== searchOrderLatch) return;
-		instances = _instances.map(x => ({
-			id: x.id,
-			host: x.host,
-			iconUrl: x.iconUrl,
-		} as Instance));
+		instances = _instances.map(
+			(x) =>
+				({
+					id: x.id,
+					host: x.host,
+					iconUrl: x.iconUrl,
+				} as Instance)
+		);
 	});
 };
 
 const ok = () => {
 	if (selected == null) return;
-	emit('ok', selected);
+	emit("ok", selected);
 	dialogEl?.close();
 };
 
 const cancel = () => {
-	emit('cancel');
+	emit("cancel");
 	dialogEl?.close();
 };
 </script>
diff --git a/packages/client/src/components/MkInstanceStats.vue b/packages/client/src/components/MkInstanceStats.vue
index a9cb7977ad..f73580fd64 100644
--- a/packages/client/src/components/MkInstanceStats.vue
+++ b/packages/client/src/components/MkInstanceStats.vue
@@ -4,49 +4,82 @@
 			<template #header>Chart</template>
 			<div :class="$style.chart">
 				<div class="selects">
-					<MkSelect v-model="chartSrc" style="margin: 0; flex: 1;">
+					<MkSelect v-model="chartSrc" style="margin: 0; flex: 1">
 						<optgroup :label="i18n.ts.federation">
-							<option value="federation">{{ i18n.ts._charts.federation }}</option>
-							<option value="ap-request">{{ i18n.ts._charts.apRequest }}</option>
+							<option value="federation">
+								{{ i18n.ts._charts.federation }}
+							</option>
+							<option value="ap-request">
+								{{ i18n.ts._charts.apRequest }}
+							</option>
 						</optgroup>
 						<optgroup :label="i18n.ts.users">
-							<option value="users">{{ i18n.ts._charts.usersIncDec }}</option>
-							<option value="users-total">{{ i18n.ts._charts.usersTotal }}</option>
-							<option value="active-users">{{ i18n.ts._charts.activeUsers }}</option>
+							<option value="users">
+								{{ i18n.ts._charts.usersIncDec }}
+							</option>
+							<option value="users-total">
+								{{ i18n.ts._charts.usersTotal }}
+							</option>
+							<option value="active-users">
+								{{ i18n.ts._charts.activeUsers }}
+							</option>
 						</optgroup>
 						<optgroup :label="i18n.ts.notes">
-							<option value="notes">{{ i18n.ts._charts.notesIncDec }}</option>
-							<option value="local-notes">{{ i18n.ts._charts.localNotesIncDec }}</option>
-							<option value="remote-notes">{{ i18n.ts._charts.remoteNotesIncDec }}</option>
-							<option value="notes-total">{{ i18n.ts._charts.notesTotal }}</option>
+							<option value="notes">
+								{{ i18n.ts._charts.notesIncDec }}
+							</option>
+							<option value="local-notes">
+								{{ i18n.ts._charts.localNotesIncDec }}
+							</option>
+							<option value="remote-notes">
+								{{ i18n.ts._charts.remoteNotesIncDec }}
+							</option>
+							<option value="notes-total">
+								{{ i18n.ts._charts.notesTotal }}
+							</option>
 						</optgroup>
 						<optgroup :label="i18n.ts.drive">
-							<option value="drive-files">{{ i18n.ts._charts.filesIncDec }}</option>
-							<option value="drive">{{ i18n.ts._charts.storageUsageIncDec }}</option>
+							<option value="drive-files">
+								{{ i18n.ts._charts.filesIncDec }}
+							</option>
+							<option value="drive">
+								{{ i18n.ts._charts.storageUsageIncDec }}
+							</option>
 						</optgroup>
 					</MkSelect>
-					<MkSelect v-model="chartSpan" style="margin: 0 0 0 10px;">
+					<MkSelect v-model="chartSpan" style="margin: 0 0 0 10px">
 						<option value="hour">{{ i18n.ts.perHour }}</option>
 						<option value="day">{{ i18n.ts.perDay }}</option>
 					</MkSelect>
 				</div>
 				<div class="chart _panel">
-					<MkChart :src="chartSrc" :span="chartSpan" :limit="chartLimit" :detailed="true"></MkChart>
+					<MkChart
+						:src="chartSrc"
+						:span="chartSpan"
+						:limit="chartLimit"
+						:detailed="true"
+					></MkChart>
 				</div>
 			</div>
 		</MkFolder>
 
 		<MkFolder class="item">
 			<template #header>Active users heatmap</template>
-			<MkSelect v-model="heatmapSrc" style="margin: 0 0 12px 0;">
+			<MkSelect v-model="heatmapSrc" style="margin: 0 0 12px 0">
 				<option value="active-users">Active users</option>
 				<option value="notes">Notes</option>
-				<option value="ap-requests-inbox-received">Fediverse Requests: inboxReceived</option>
-				<option value="ap-requests-deliver-succeeded">Fediverse Requests: deliverSucceeded</option>
-				<option value="ap-requests-deliver-failed">Fediverse Requests: deliverFailed</option>
+				<option value="ap-requests-inbox-received">
+					Fediverse Requests: inboxReceived
+				</option>
+				<option value="ap-requests-deliver-succeeded">
+					Fediverse Requests: deliverSucceeded
+				</option>
+				<option value="ap-requests-deliver-failed">
+					Fediverse Requests: deliverFailed
+				</option>
 			</MkSelect>
 			<div class="_panel" :class="$style.heatmap">
-				<MkHeatmap :src="heatmapSrc"/>
+				<MkHeatmap :src="heatmapSrc" />
 			</div>
 		</MkFolder>
 
@@ -69,45 +102,49 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted } from 'vue';
-import { Chart } from 'chart.js';
-import MkSelect from '@/components/form/select.vue';
-import MkChart from '@/components/MkChart.vue';
-import { useChartTooltip } from '@/scripts/use-chart-tooltip';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import MkHeatmap from '@/components/MkHeatmap.vue';
-import MkFolder from '@/components/MkFolder.vue';
-import { initChart } from '@/scripts/init-chart';
+import { onMounted } from "vue";
+import { Chart } from "chart.js";
+import MkSelect from "@/components/form/select.vue";
+import MkChart from "@/components/MkChart.vue";
+import { useChartTooltip } from "@/scripts/use-chart-tooltip";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
+import MkHeatmap from "@/components/MkHeatmap.vue";
+import MkFolder from "@/components/MkFolder.vue";
+import { initChart } from "@/scripts/init-chart";
 
 initChart();
 
 const chartLimit = 500;
-let chartSpan = $ref<'hour' | 'day'>('hour');
-let chartSrc = $ref('active-users');
-let heatmapSrc = $ref('active-users');
+let chartSpan = $ref<"hour" | "day">("hour");
+let chartSrc = $ref("active-users");
+let heatmapSrc = $ref("active-users");
 let subDoughnutEl = $shallowRef<HTMLCanvasElement>();
 let pubDoughnutEl = $shallowRef<HTMLCanvasElement>();
 
 const { handler: externalTooltipHandler1 } = useChartTooltip({
-	position: 'middle',
+	position: "middle",
 });
 const { handler: externalTooltipHandler2 } = useChartTooltip({
-	position: 'middle',
+	position: "middle",
 });
 
 function createDoughnut(chartEl, tooltip, data) {
 	const chartInstance = new Chart(chartEl, {
-		type: 'doughnut',
+		type: "doughnut",
 		data: {
-			labels: data.map(x => x.name),
-			datasets: [{
-				backgroundColor: data.map(x => x.color),
-				borderColor: getComputedStyle(document.documentElement).getPropertyValue('--panel'),
-				borderWidth: 2,
-				hoverOffset: 0,
-				data: data.map(x => x.value),
-			}],
+			labels: data.map((x) => x.name),
+			datasets: [
+				{
+					backgroundColor: data.map((x) => x.color),
+					borderColor: getComputedStyle(
+						document.documentElement
+					).getPropertyValue("--panel"),
+					borderWidth: 2,
+					hoverOffset: 0,
+					data: data.map((x) => x.value),
+				},
+			],
 		},
 		options: {
 			maintainAspectRatio: false,
@@ -120,7 +157,12 @@ function createDoughnut(chartEl, tooltip, data) {
 				},
 			},
 			onClick: (ev) => {
-				const hit = chartInstance.getElementsAtEventForMode(ev, 'nearest', { intersect: true }, false)[0];
+				const hit = chartInstance.getElementsAtEventForMode(
+					ev,
+					"nearest",
+					{ intersect: true },
+					false
+				)[0];
 				if (hit && data[hit.index].onClick) {
 					data[hit.index].onClick();
 				}
@@ -131,7 +173,7 @@ function createDoughnut(chartEl, tooltip, data) {
 				},
 				tooltip: {
 					enabled: false,
-					mode: 'index',
+					mode: "index",
 					animation: {
 						duration: 0,
 					},
@@ -145,24 +187,48 @@ function createDoughnut(chartEl, tooltip, data) {
 }
 
 onMounted(() => {
-	os.apiGet('federation/stats', { limit: 30 }).then(fedStats => {
-		createDoughnut(subDoughnutEl, externalTooltipHandler1, fedStats.topSubInstances.map(x => ({
-			name: x.host,
-			color: x.themeColor,
-			value: x.followersCount,
-			onClick: () => {
-				os.pageWindow(`/instance-info/${x.host}`);
-			},
-		})).concat([{ name: '(other)', color: '#80808080', value: fedStats.otherFollowersCount }]));
+	os.apiGet("federation/stats", { limit: 30 }).then((fedStats) => {
+		createDoughnut(
+			subDoughnutEl,
+			externalTooltipHandler1,
+			fedStats.topSubInstances
+				.map((x) => ({
+					name: x.host,
+					color: x.themeColor,
+					value: x.followersCount,
+					onClick: () => {
+						os.pageWindow(`/instance-info/${x.host}`);
+					},
+				}))
+				.concat([
+					{
+						name: "(other)",
+						color: "#80808080",
+						value: fedStats.otherFollowersCount,
+					},
+				])
+		);
 
-		createDoughnut(pubDoughnutEl, externalTooltipHandler2, fedStats.topPubInstances.map(x => ({
-			name: x.host,
-			color: x.themeColor,
-			value: x.followingCount,
-			onClick: () => {
-				os.pageWindow(`/instance-info/${x.host}`);
-			},
-		})).concat([{ name: '(other)', color: '#80808080', value: fedStats.otherFollowingCount }]));
+		createDoughnut(
+			pubDoughnutEl,
+			externalTooltipHandler2,
+			fedStats.topPubInstances
+				.map((x) => ({
+					name: x.host,
+					color: x.themeColor,
+					value: x.followingCount,
+					onClick: () => {
+						os.pageWindow(`/instance-info/${x.host}`);
+					},
+				}))
+				.concat([
+					{
+						name: "(other)",
+						color: "#80808080",
+						value: fedStats.otherFollowingCount,
+					},
+				])
+		);
 	});
 });
 </script>
@@ -205,7 +271,8 @@ onMounted(() => {
 			display: flex;
 			gap: 16px;
 
-			> .sub, > .pub {
+			> .sub,
+			> .pub {
 				flex: 1;
 				min-width: 0;
 				position: relative;
diff --git a/packages/client/src/components/MkInstanceTicker.vue b/packages/client/src/components/MkInstanceTicker.vue
index 6e29129658..8e2d17b2ab 100644
--- a/packages/client/src/components/MkInstanceTicker.vue
+++ b/packages/client/src/components/MkInstanceTicker.vue
@@ -1,41 +1,50 @@
 <template>
-<div class="hpaizdrt" ref="ticker" :style="bg">
-	<img class="icon" :src="getInstanceIcon(instance)" aria-hidden="true"/>
-	<span class="name">{{ instance.name }}</span>
-</div>
+	<div class="hpaizdrt" ref="ticker" :style="bg">
+		<img class="icon" :src="getInstanceIcon(instance)" aria-hidden="true" />
+		<span class="name">{{ instance.name }}</span>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { instanceName } from '@/config';
-import { instance as Instance } from '@/instance';
-import { getProxiedImageUrlNullable } from '@/scripts/media-proxy';
+import { instanceName } from "@/config";
+import { instance as Instance } from "@/instance";
+import { getProxiedImageUrlNullable } from "@/scripts/media-proxy";
 
 const props = defineProps<{
 	instance?: {
-		faviconUrl?: string
-		name: string
-		themeColor?: string
-	}
+		faviconUrl?: string;
+		name: string;
+		themeColor?: string;
+	};
 }>();
 
 let ticker = $ref<HTMLElement | null>(null);
 
 // if no instance data is given, this is for the local instance
 const instance = props.instance ?? {
-	faviconUrl: Instance.iconUrl || Instance.faviconUrl || '/favicon.ico',
+	faviconUrl: Instance.iconUrl || Instance.faviconUrl || "/favicon.ico",
 	name: instanceName,
-	themeColor: (document.querySelector('meta[name="theme-color-orig"]') as HTMLMetaElement)?.content
+	themeColor: (
+		document.querySelector(
+			'meta[name="theme-color-orig"]'
+		) as HTMLMetaElement
+	)?.content,
 };
 
 const computedStyle = getComputedStyle(document.documentElement);
-const themeColor = instance.themeColor ?? computedStyle.getPropertyValue('--bg');
+const themeColor =
+	instance.themeColor ?? computedStyle.getPropertyValue("--bg");
 
 const bg = {
 	background: `linear-gradient(90deg, ${themeColor}, ${themeColor}55)`,
 };
 
 function getInstanceIcon(instance): string {
-	return getProxiedImageUrlNullable(instance.iconUrl, 'preview') ?? getProxiedImageUrlNullable(instance.faviconUrl, 'preview') ?? '/client-assets/dummy.png';
+	return (
+		getProxiedImageUrlNullable(instance.iconUrl, "preview") ??
+		getProxiedImageUrlNullable(instance.faviconUrl, "preview") ??
+		"/client-assets/dummy.png"
+	);
 }
 </script>
 
@@ -48,10 +57,10 @@ function getInstanceIcon(instance): string {
 	align-items: center;
 	height: 1.1em;
 	justify-self: flex-end;
-	padding: .2em .4em;
-	padding: .2em .4em;
+	padding: 0.2em 0.4em;
+	padding: 0.2em 0.4em;
 	border-radius: 100px;
-	font-size: .8em;
+	font-size: 0.8em;
 	text-shadow: 0 2px 2px var(--shadow);
 	overflow: hidden;
 	.header > .body & {
@@ -80,11 +89,14 @@ function getInstanceIcon(instance): string {
 		white-space: nowrap;
 		text-overflow: ellipsis;
 		white-space: nowrap;
-		text-shadow: -1px -1px 0 var(--bg), 1px -1px 0 var(--bg), -1px 1px 0 var(--bg), 1px 1px 0 var(--bg);
-		.article > .main &, .header > .body & {
+		text-shadow: -1px -1px 0 var(--bg), 1px -1px 0 var(--bg),
+			-1px 1px 0 var(--bg), 1px 1px 0 var(--bg);
+		.article > .main &,
+		.header > .body & {
 			display: unset;
 		}
-		.article > .main &, .header > .body & {
+		.article > .main &,
+		.header > .body & {
 			display: unset;
 		}
 	}
diff --git a/packages/client/src/components/MkKeyValue.vue b/packages/client/src/components/MkKeyValue.vue
index de4673ffef..3db05f0f4a 100644
--- a/packages/client/src/components/MkKeyValue.vue
+++ b/packages/client/src/components/MkKeyValue.vue
@@ -1,28 +1,39 @@
 <template>
-<div class="alqyeyti" :class="{ oneline }">
-	<div class="key">
-		<slot name="key"></slot>
+	<div class="alqyeyti" :class="{ oneline }">
+		<div class="key">
+			<slot name="key"></slot>
+		</div>
+		<div class="value">
+			<slot name="value"></slot>
+			<button
+				v-if="copy"
+				v-tooltip="i18n.ts.copy"
+				class="_textButton"
+				style="margin-left: 0.5em"
+				@click="copy_"
+			>
+				<i class="ph-clipboard-text ph-bold"></i>
+			</button>
+		</div>
 	</div>
-	<div class="value">
-		<slot name="value"></slot>
-		<button v-if="copy" v-tooltip="i18n.ts.copy" class="_textButton" style="margin-left: 0.5em;" @click="copy_"><i class="ph-clipboard-text ph-bold"></i></button>
-	</div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import copyToClipboard from '@/scripts/copy-to-clipboard';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
+import {} from "vue";
+import copyToClipboard from "@/scripts/copy-to-clipboard";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
 
-const props = withDefaults(defineProps<{
-	copy?: string | null;
-	oneline?: boolean;
-}>(), {
-	copy: null,
-	oneline: false,
-});
+const props = withDefaults(
+	defineProps<{
+		copy?: string | null;
+		oneline?: boolean;
+	}>(),
+	{
+		copy: null,
+		oneline: false,
+	}
+);
 
 const copy_ = () => {
 	copyToClipboard(props.copy);
diff --git a/packages/client/src/components/MkLaunchPad.vue b/packages/client/src/components/MkLaunchPad.vue
index 39e99e6c26..f713b4c41c 100644
--- a/packages/client/src/components/MkLaunchPad.vue
+++ b/packages/client/src/components/MkLaunchPad.vue
@@ -1,61 +1,103 @@
 <template>
-<MkModal ref="modal" v-slot="{ type, maxHeight }" :prefer-type="preferedModalType" :anchor="anchor" :transparent-bg="true" :src="src" @click="modal.close()" @closed="emit('closed')">
-	<div class="szkkfdyq _popup _shadow" :class="{ asDrawer: type === 'drawer' }" :style="{ maxHeight: maxHeight ? maxHeight + 'px' : '' }">
-		<div class="main">
-			<template v-for="item in items">
-				<button v-if="item.action" v-click-anime class="_button" @click="$event => { item.action($event); close(); }">
-					<i class="icon" :class="item.icon"></i>
-					<div class="text">{{ item.text }}</div>
-					<span v-if="item.indicate" class="indicator"><i class="ph-circle ph-fill"></i></span>
-				</button>
-				<MkA v-else v-click-anime :to="item.to" @click.passive="close()">
-					<i class="icon" :class="item.icon"></i>
-					<div class="text">{{ item.text }}</div>
-					<span v-if="item.indicate" class="indicator"><i class="ph-circle ph-fill"></i></span>
-				</MkA>
-			</template>
+	<MkModal
+		ref="modal"
+		v-slot="{ type, maxHeight }"
+		:prefer-type="preferedModalType"
+		:anchor="anchor"
+		:transparent-bg="true"
+		:src="src"
+		@click="modal.close()"
+		@closed="emit('closed')"
+	>
+		<div
+			class="szkkfdyq _popup _shadow"
+			:class="{ asDrawer: type === 'drawer' }"
+			:style="{ maxHeight: maxHeight ? maxHeight + 'px' : '' }"
+		>
+			<div class="main">
+				<template v-for="item in items">
+					<button
+						v-if="item.action"
+						v-click-anime
+						class="_button"
+						@click="
+							($event) => {
+								item.action($event);
+								close();
+							}
+						"
+					>
+						<i class="icon" :class="item.icon"></i>
+						<div class="text">{{ item.text }}</div>
+						<span v-if="item.indicate" class="indicator"
+							><i class="ph-circle ph-fill"></i
+						></span>
+					</button>
+					<MkA
+						v-else
+						v-click-anime
+						:to="item.to"
+						@click.passive="close()"
+					>
+						<i class="icon" :class="item.icon"></i>
+						<div class="text">{{ item.text }}</div>
+						<span v-if="item.indicate" class="indicator"
+							><i class="ph-circle ph-fill"></i
+						></span>
+					</MkA>
+				</template>
+			</div>
 		</div>
-	</div>
-</MkModal>
+	</MkModal>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import MkModal from '@/components/MkModal.vue';
-import { navbarItemDef } from '@/navbar';
-import { instanceName } from '@/config';
-import { defaultStore } from '@/store';
-import { i18n } from '@/i18n';
-import { deviceKind } from '@/scripts/device-kind';
-import * as os from '@/os';
+import {} from "vue";
+import MkModal from "@/components/MkModal.vue";
+import { navbarItemDef } from "@/navbar";
+import { instanceName } from "@/config";
+import { defaultStore } from "@/store";
+import { i18n } from "@/i18n";
+import { deviceKind } from "@/scripts/device-kind";
+import * as os from "@/os";
 
-const props = withDefaults(defineProps<{
-	src?: HTMLElement;
-	anchor?: { x: string; y: string; };
-}>(), {
-	anchor: () => ({ x: 'right', y: 'center' }),
-});
+const props = withDefaults(
+	defineProps<{
+		src?: HTMLElement;
+		anchor?: { x: string; y: string };
+	}>(),
+	{
+		anchor: () => ({ x: "right", y: "center" }),
+	}
+);
 
 const emit = defineEmits<{
-	(ev: 'closed'): void;
+	(ev: "closed"): void;
 }>();
 
-const preferedModalType = (deviceKind === 'desktop' && props.src != null) ? 'popup' :
-	deviceKind === 'smartphone' ? 'drawer' :
-	'dialog';
+const preferedModalType =
+	deviceKind === "desktop" && props.src != null
+		? "popup"
+		: deviceKind === "smartphone"
+		? "drawer"
+		: "dialog";
 
 const modal = $ref<InstanceType<typeof MkModal>>();
 
 const menu = defaultStore.state.menu;
 
-const items = Object.keys(navbarItemDef).filter(k => !menu.includes(k)).map(k => navbarItemDef[k]).filter(def => def.show == null ? true : def.show).map(def => ({
-	type: def.to ? 'link' : 'button',
-	text: i18n.ts[def.title],
-	icon: def.icon,
-	to: def.to,
-	action: def.action,
-	indicate: def.indicated,
-}));
+const items = Object.keys(navbarItemDef)
+	.filter((k) => !menu.includes(k))
+	.map((k) => navbarItemDef[k])
+	.filter((def) => (def.show == null ? true : def.show))
+	.map((def) => ({
+		type: def.to ? "link" : "button",
+		text: i18n.ts[def.title],
+		icon: def.icon,
+		to: def.to,
+		action: def.action,
+		indicate: def.indicated,
+	}));
 
 function close() {
 	modal.close();
@@ -82,7 +124,8 @@ function close() {
 		text-align: center;
 	}
 
-	> .main, > .sub {
+	> .main,
+	> .sub {
 		display: grid;
 		grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
 
diff --git a/packages/client/src/components/MkLink.vue b/packages/client/src/components/MkLink.vue
index 7536284894..e26e1ed241 100644
--- a/packages/client/src/components/MkLink.vue
+++ b/packages/client/src/components/MkLink.vue
@@ -1,36 +1,55 @@
 <template>
-<component :is="self ? 'MkA' : 'a'" ref="el" class="xlcxczvw _link" :[attr]="self ? url.substr(local.length) : url" :rel="rel" :target="target"
-	:title="url" @click.stop
->
-	<slot></slot>
-	<i v-if="target === '_blank'" class="ph-arrow-square-out ph-bold ph-lg icon"></i>
-</component>
+	<component
+		:is="self ? 'MkA' : 'a'"
+		ref="el"
+		class="xlcxczvw _link"
+		:[attr]="self ? url.substr(local.length) : url"
+		:rel="rel"
+		:target="target"
+		:title="url"
+		@click.stop
+	>
+		<slot></slot>
+		<i
+			v-if="target === '_blank'"
+			class="ph-arrow-square-out ph-bold ph-lg icon"
+		></i>
+	</component>
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent } from 'vue';
-import { url as local } from '@/config';
-import { useTooltip } from '@/scripts/use-tooltip';
-import * as os from '@/os';
+import { defineAsyncComponent } from "vue";
+import { url as local } from "@/config";
+import { useTooltip } from "@/scripts/use-tooltip";
+import * as os from "@/os";
 
-const props = withDefaults(defineProps<{
-	url: string;
-	rel?: null | string;
-}>(), {
-});
+const props = withDefaults(
+	defineProps<{
+		url: string;
+		rel?: null | string;
+	}>(),
+	{}
+);
 
 const self = props.url.startsWith(local);
-const attr = self ? 'to' : 'href';
-const target = self ? null : '_blank';
+const attr = self ? "to" : "href";
+const target = self ? null : "_blank";
 
 const el = $ref();
 
 useTooltip($$(el), (showing) => {
-	os.popup(defineAsyncComponent(() => import('@/components/MkUrlPreviewPopup.vue')), {
-		showing,
-		url: props.url,
-		source: el,
-	}, {}, 'closed');
+	os.popup(
+		defineAsyncComponent(
+			() => import("@/components/MkUrlPreviewPopup.vue")
+		),
+		{
+			showing,
+			url: props.url,
+			source: el,
+		},
+		{},
+		"closed"
+	);
 });
 </script>
 
@@ -40,7 +59,7 @@ useTooltip($$(el), (showing) => {
 
 	> .icon {
 		padding-left: 2px;
-		font-size: .9em;
+		font-size: 0.9em;
 	}
 }
 </style>
diff --git a/packages/client/src/components/MkMarquee.vue b/packages/client/src/components/MkMarquee.vue
index 5ca04b0b48..d99ad95b67 100644
--- a/packages/client/src/components/MkMarquee.vue
+++ b/packages/client/src/components/MkMarquee.vue
@@ -1,8 +1,8 @@
 <script lang="ts">
-import { h, onMounted, onUnmounted, ref, watch } from 'vue';
+import { h, onMounted, onUnmounted, ref, watch } from "vue";
 
 export default {
-	name: 'MarqueeText',
+	name: "MarqueeText",
 	props: {
 		duration: {
 			type: Number,
@@ -38,37 +38,35 @@ export default {
 			calc();
 		});
 
-		onUnmounted(() => {
-		});
+		onUnmounted(() => {});
 
 		return {
 			contentEl,
 		};
 	},
-	render({
-		$slots, $style, $props: {
-			duration, repeat, paused, reverse,
-		},
-	}) {
-		return h('div', { class: [$style.wrap] }, [
-			h('span', {
-				ref: 'contentEl',
-				class: [
-					paused
-						? $style.paused
-						: undefined,
-					$style.content,
-				],
-			}, Array(repeat).fill(
-				h('span', {
-					class: $style.text,
-					style: {
-						animationDirection: reverse
-							? 'reverse'
-							: undefined,
-					},
-				}, $slots.default()),
-			)),
+	render({ $slots, $style, $props: { duration, repeat, paused, reverse } }) {
+		return h("div", { class: [$style.wrap] }, [
+			h(
+				"span",
+				{
+					ref: "contentEl",
+					class: [paused ? $style.paused : undefined, $style.content],
+				},
+				Array(repeat).fill(
+					h(
+						"span",
+						{
+							class: $style.text,
+							style: {
+								animationDirection: reverse
+									? "reverse"
+									: undefined,
+							},
+						},
+						$slots.default()
+					)
+				)
+			),
 		]);
 	},
 };
@@ -100,7 +98,11 @@ export default {
 	animation-play-state: paused;
 }
 @keyframes marquee {
-	0% { transform:translateX(0); }
-	100% { transform:translateX(-100%); }
+	0% {
+		transform: translateX(0);
+	}
+	100% {
+		transform: translateX(-100%);
+	}
 }
 </style>
diff --git a/packages/client/src/components/MkMediaBanner.vue b/packages/client/src/components/MkMediaBanner.vue
index b09e61d377..833100843e 100644
--- a/packages/client/src/components/MkMediaBanner.vue
+++ b/packages/client/src/components/MkMediaBanner.vue
@@ -1,70 +1,84 @@
 <template>
-<div class="mk-media-banner">
-	<div v-if="media.isSensitive && hide" class="sensitive" @click="hide = false">
-		<span class="icon"><i class="ph-warning ph-bold ph-lg"></i></span>
-		<b>{{ i18n.ts.sensitive }}</b>
-		<span>{{ i18n.ts.clickToShow }}</span>
-	</div>
-	<div v-else-if="media.type.startsWith('audio') && media.type !== 'audio/midi'" class="audio">
-		<VuePlyr
-			:options="{
-				controls: [
-					'play-large',
-					'play',
-					'progress',
-					'current-time',
-					'mute',
-					'volume',
-					'download',
-				],
-				disableContextMenu: false,
-			}"
+	<div class="mk-media-banner">
+		<div
+			v-if="media.isSensitive && hide"
+			class="sensitive"
+			@click="hide = false"
 		>
-			<audio
-				ref="audioEl"
-				class="audio"
-				:src="media.url"
-				:title="media.name"
-				controls
-				preload="metadata"
-				@volumechange="volumechange"
-			/>
-		</VuePlyr>
+			<span class="icon"><i class="ph-warning ph-bold ph-lg"></i></span>
+			<b>{{ i18n.ts.sensitive }}</b>
+			<span>{{ i18n.ts.clickToShow }}</span>
+		</div>
+		<div
+			v-else-if="
+				media.type.startsWith('audio') && media.type !== 'audio/midi'
+			"
+			class="audio"
+		>
+			<VuePlyr
+				:options="{
+					controls: [
+						'play-large',
+						'play',
+						'progress',
+						'current-time',
+						'mute',
+						'volume',
+						'download',
+					],
+					disableContextMenu: false,
+				}"
+			>
+				<audio
+					ref="audioEl"
+					class="audio"
+					:src="media.url"
+					:title="media.name"
+					controls
+					preload="metadata"
+					@volumechange="volumechange"
+				/>
+			</VuePlyr>
+		</div>
+		<a
+			v-else
+			class="download"
+			:href="media.url"
+			:title="media.name"
+			:download="media.name"
+		>
+			<span class="icon"
+				><i class="ph-download-simple ph-bold ph-lg"></i
+			></span>
+			<b>{{ media.name }}</b>
+		</a>
 	</div>
-	<a
-		v-else class="download"
-		:href="media.url"
-		:title="media.name"
-		:download="media.name"
-	>
-		<span class="icon"><i class="ph-download-simple ph-bold ph-lg"></i></span>
-		<b>{{ media.name }}</b>
-	</a>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted } from 'vue';
-import VuePlyr from 'vue-plyr';
-import type * as misskey from 'calckey-js';
-import { ColdDeviceStorage } from '@/store';
-import 'vue-plyr/dist/vue-plyr.css';
-import { i18n } from '@/i18n';
+import { onMounted } from "vue";
+import VuePlyr from "vue-plyr";
+import type * as misskey from "calckey-js";
+import { ColdDeviceStorage } from "@/store";
+import "vue-plyr/dist/vue-plyr.css";
+import { i18n } from "@/i18n";
 
-const props = withDefaults(defineProps<{
-	media: misskey.entities.DriveFile;
-}>(), {
-});
+const props = withDefaults(
+	defineProps<{
+		media: misskey.entities.DriveFile;
+	}>(),
+	{}
+);
 
 const audioEl = $ref<HTMLAudioElement | null>();
 let hide = $ref(true);
 
 function volumechange() {
-	if (audioEl) ColdDeviceStorage.set('mediaVolume', audioEl.volume);
+	if (audioEl) ColdDeviceStorage.set("mediaVolume", audioEl.volume);
 }
 
 onMounted(() => {
-	if (audioEl) audioEl.volume = ColdDeviceStorage.get('mediaVolume');
+	if (audioEl) audioEl.volume = ColdDeviceStorage.get("mediaVolume");
 });
 </script>
 
@@ -97,7 +111,7 @@ onMounted(() => {
 		}
 
 		> *:not(:last-child) {
-			margin-right: .2em;
+			margin-right: 0.2em;
 		}
 
 		> .icon {
diff --git a/packages/client/src/components/MkMediaCaption.vue b/packages/client/src/components/MkMediaCaption.vue
index 7168d87231..44f7b55a62 100644
--- a/packages/client/src/components/MkMediaCaption.vue
+++ b/packages/client/src/components/MkMediaCaption.vue
@@ -1,45 +1,81 @@
 <template>
-<MkModal ref="modal" @click="done(true)" @closed="$emit('closed')">
-	<div class="container">
-		<div class="fullwidth top-caption">
-			<div class="mk-dialog">
-				<header>
-					<Mfm v-if="title" class="title" :text="title"/>
-					<span class="text-count" :class="{ over: remainingLength < 0 }">{{ remainingLength }}</span>
-					<br/>
-				</header>
-				<textarea id="captioninput" v-model="inputValue" autofocus :placeholder="input.placeholder" @keydown="onInputKeydown"></textarea>
-				<div v-if="(showOkButton || showCaptionButton || showCancelButton)" class="buttons">
-					<MkButton inline primary :disabled="remainingLength < 0" @click="ok">{{ i18n.ts.ok }}</MkButton>
-					<MkButton inline @click="caption">{{ i18n.ts.caption }}</MkButton>
-					<MkButton inline @click="cancel">{{ i18n.ts.cancel }}</MkButton>
+	<MkModal ref="modal" @click="done(true)" @closed="$emit('closed')">
+		<div class="container">
+			<div class="fullwidth top-caption">
+				<div class="mk-dialog">
+					<header>
+						<Mfm v-if="title" class="title" :text="title" />
+						<span
+							class="text-count"
+							:class="{ over: remainingLength < 0 }"
+							>{{ remainingLength }}</span
+						>
+						<br />
+					</header>
+					<textarea
+						id="captioninput"
+						v-model="inputValue"
+						autofocus
+						:placeholder="input.placeholder"
+						@keydown="onInputKeydown"
+					></textarea>
+					<div
+						v-if="
+							showOkButton ||
+							showCaptionButton ||
+							showCancelButton
+						"
+						class="buttons"
+					>
+						<MkButton
+							inline
+							primary
+							:disabled="remainingLength < 0"
+							@click="ok"
+							>{{ i18n.ts.ok }}</MkButton
+						>
+						<MkButton inline @click="caption">{{
+							i18n.ts.caption
+						}}</MkButton>
+						<MkButton inline @click="cancel">{{
+							i18n.ts.cancel
+						}}</MkButton>
+					</div>
 				</div>
 			</div>
+			<div class="hdrwpsaf fullwidth">
+				<header>{{ image.name }}</header>
+				<img
+					id="imgtocaption"
+					:src="image.url"
+					:alt="image.comment"
+					:title="image.comment"
+					@click="$refs.modal.close()"
+				/>
+				<footer>
+					<span>{{ image.type }}</span>
+					<span>{{ bytes(image.size) }}</span>
+					<span v-if="image.properties && image.properties.width"
+						>{{ number(image.properties.width) }}px ×
+						{{ number(image.properties.height) }}px</span
+					>
+				</footer>
+			</div>
 		</div>
-		<div class="hdrwpsaf fullwidth">
-			<header>{{ image.name }}</header>
-			<img id="imgtocaption" :src="image.url" :alt="image.comment" :title="image.comment" @click="$refs.modal.close()"/>
-			<footer>
-				<span>{{ image.type }}</span>
-				<span>{{ bytes(image.size) }}</span>
-				<span v-if="image.properties && image.properties.width">{{ number(image.properties.width) }}px × {{ number(image.properties.height) }}px</span>
-			</footer>
-		</div>
-	</div>
-</MkModal>
+	</MkModal>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
-import insertTextAtCursor from 'insert-text-at-cursor';
-import { length } from 'stringz';
-import * as os from '@/os';
-import MkModal from '@/components/MkModal.vue';
-import MkButton from '@/components/MkButton.vue';
-import bytes from '@/filters/bytes';
-import number from '@/filters/number';
-import { i18n } from '@/i18n';
-import { instance } from '@/instance';
+import { defineComponent } from "vue";
+import insertTextAtCursor from "insert-text-at-cursor";
+import { length } from "stringz";
+import * as os from "@/os";
+import MkModal from "@/components/MkModal.vue";
+import MkButton from "@/components/MkButton.vue";
+import bytes from "@/filters/bytes";
+import number from "@/filters/number";
+import { i18n } from "@/i18n";
+import { instance } from "@/instance";
 
 export default defineComponent({
 	components: {
@@ -77,7 +113,7 @@ export default defineComponent({
 		},
 	},
 
-	emits: ['done', 'closed'],
+	emits: ["done", "closed"],
 
 	data() {
 		return {
@@ -91,15 +127,15 @@ export default defineComponent({
 			const maxCaptionLength = instance.maxCaptionTextLength ?? 512;
 			if (typeof this.inputValue !== "string") return maxCaptionLength;
 			return maxCaptionLength - length(this.inputValue);
-		}
+		},
 	},
 
 	mounted() {
-		document.addEventListener('keydown', this.onKeydown);
+		document.addEventListener("keydown", this.onKeydown);
 	},
 
 	beforeUnmount() {
-		document.removeEventListener('keydown', this.onKeydown);
+		document.removeEventListener("keydown", this.onKeydown);
 	},
 
 	methods: {
@@ -107,7 +143,7 @@ export default defineComponent({
 		number,
 
 		done(canceled, result?) {
-			this.$emit('done', { canceled, result });
+			this.$emit("done", { canceled, result });
 			this.$refs.modal.close();
 		},
 
@@ -129,13 +165,15 @@ export default defineComponent({
 		},
 
 		onKeydown(evt) {
-			if (evt.which === 27) { // ESC
+			if (evt.which === 27) {
+				// ESC
 				this.cancel();
 			}
 		},
 
 		onInputKeydown(evt) {
-			if (evt.which === 13) { // Enter
+			if (evt.which === 13) {
+				// Enter
 				if (evt.ctrlKey) {
 					evt.preventDefault();
 					evt.stopPropagation();
@@ -145,12 +183,16 @@ export default defineComponent({
 		},
 
 		caption() {
-			const img = document.getElementById('imgtocaption') as HTMLImageElement;
-			const ta = document.getElementById('captioninput') as HTMLTextAreaElement;
-			os.api('drive/files/caption-image', {
+			const img = document.getElementById(
+				"imgtocaption"
+			) as HTMLImageElement;
+			const ta = document.getElementById(
+				"captioninput"
+			) as HTMLTextAreaElement;
+			os.api("drive/files/caption-image", {
 				url: img.src,
-			}).then(text => {
-				insertTextAtCursor(ta, text.slice(0, (512 - ta.value.length)));
+			}).then((text) => {
+				insertTextAtCursor(ta, text.slice(0, 512 - ta.value.length));
 			});
 		},
 	},
diff --git a/packages/client/src/components/MkMediaImage.vue b/packages/client/src/components/MkMediaImage.vue
index 4ad4ffaa77..8829080402 100644
--- a/packages/client/src/components/MkMediaImage.vue
+++ b/packages/client/src/components/MkMediaImage.vue
@@ -1,32 +1,50 @@
 <template>
-<div v-if="hide" class="qjewsnkg" @click="hide = false">
-	<ImgWithBlurhash class="bg" :hash="image.blurhash" :title="image.comment" :alt="image.comment"/>
-	<div class="text">
-		<div class="wrapper">
-			<b style="display: block;"><i class="ph-warning ph-bold ph-lg"></i> {{ i18n.ts.sensitive }}</b>
-			<span style="display: block;">{{ i18n.ts.clickToShow }}</span>
+	<div v-if="hide" class="qjewsnkg" @click="hide = false">
+		<ImgWithBlurhash
+			class="bg"
+			:hash="image.blurhash"
+			:title="image.comment"
+			:alt="image.comment"
+		/>
+		<div class="text">
+			<div class="wrapper">
+				<b style="display: block"
+					><i class="ph-warning ph-bold ph-lg"></i>
+					{{ i18n.ts.sensitive }}</b
+				>
+				<span style="display: block">{{ i18n.ts.clickToShow }}</span>
+			</div>
 		</div>
 	</div>
-</div>
-<div v-else class="gqnyydlz">
-	<a
-		:href="image.url"
-		:title="image.name"
-	>
-		<ImgWithBlurhash :hash="image.blurhash" :src="url" :alt="image.comment" :type="image.type" :title="image.comment" :cover="false"/>
-		<div v-if="image.type === 'image/gif'" class="gif">GIF</div>
-	</a>
-	<button v-tooltip="i18n.ts.hide" class="_button hide" @click="hide = true"><i class="ph-eye-slash ph-bold ph-lg"></i></button>
-</div>
+	<div v-else class="gqnyydlz">
+		<a :href="image.url" :title="image.name">
+			<ImgWithBlurhash
+				:hash="image.blurhash"
+				:src="url"
+				:alt="image.comment"
+				:type="image.type"
+				:title="image.comment"
+				:cover="false"
+			/>
+			<div v-if="image.type === 'image/gif'" class="gif">GIF</div>
+		</a>
+		<button
+			v-tooltip="i18n.ts.hide"
+			class="_button hide"
+			@click="hide = true"
+		>
+			<i class="ph-eye-slash ph-bold ph-lg"></i>
+		</button>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { watch } from 'vue';
-import type * as misskey from 'calckey-js';
-import { getStaticImageUrl } from '@/scripts/get-static-image-url';
-import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
-import { defaultStore } from '@/store';
-import { i18n } from '@/i18n';
+import { watch } from "vue";
+import type * as misskey from "calckey-js";
+import { getStaticImageUrl } from "@/scripts/get-static-image-url";
+import ImgWithBlurhash from "@/components/MkImgWithBlurhash.vue";
+import { defaultStore } from "@/store";
+import { i18n } from "@/i18n";
 
 const props = defineProps<{
 	image: misskey.entities.DriveFile;
@@ -35,19 +53,28 @@ const props = defineProps<{
 
 let hide = $ref(true);
 
-const url = (props.raw || defaultStore.state.loadRawImages)
-	? props.image.url
-	: defaultStore.state.disableShowingAnimatedImages
+const url =
+	props.raw || defaultStore.state.loadRawImages
+		? props.image.url
+		: defaultStore.state.disableShowingAnimatedImages
 		? getStaticImageUrl(props.image.thumbnailUrl)
 		: props.image.thumbnailUrl;
 
 // Plugin:register_note_view_interruptor を使って書き換えられる可能性があるためwatchする
-watch(() => props.image, () => {
-	hide = (defaultStore.state.nsfw === 'force') ? true : props.image.isSensitive && (defaultStore.state.nsfw !== 'ignore');
-}, {
-	deep: true,
-	immediate: true,
-});
+watch(
+	() => props.image,
+	() => {
+		hide =
+			defaultStore.state.nsfw === "force"
+				? true
+				: props.image.isSensitive &&
+				  defaultStore.state.nsfw !== "ignore";
+	},
+	{
+		deep: true,
+		immediate: true,
+	}
+);
 </script>
 
 <style lang="scss" scoped>
@@ -120,7 +147,7 @@ watch(() => props.image, () => {
 			font-size: 14px;
 			font-weight: bold;
 			left: 12px;
-			opacity: .5;
+			opacity: 0.5;
 			padding: 0 6px;
 			text-align: center;
 			top: 12px;
diff --git a/packages/client/src/components/MkMediaList.vue b/packages/client/src/components/MkMediaList.vue
index 8b6d2c2c95..ec23ca5d03 100644
--- a/packages/client/src/components/MkMediaList.vue
+++ b/packages/client/src/components/MkMediaList.vue
@@ -1,29 +1,58 @@
 <template>
-<div class="hoawjimk">
-	<XBanner v-for="media in mediaList.filter(media => !previewable(media))" :key="media.id" :media="media"/>
-	<div v-if="mediaList.filter(media => previewable(media)).length > 0" class="gird-container" :class="{ dmWidth: inDm }">
-		<div ref="gallery" :data-count="mediaList.filter(media => previewable(media)).length" @click.stop>
-			<template v-for="media in mediaList.filter(media => previewable(media))">
-				<XVideo v-if="media.type.startsWith('video')" :key="media.id" :video="media"/>
-				<XImage v-else-if="media.type.startsWith('image')" :key="media.id" class="image" :data-id="media.id" :image="media" :raw="raw"/>
-			</template>
+	<div class="hoawjimk">
+		<XBanner
+			v-for="media in mediaList.filter((media) => !previewable(media))"
+			:key="media.id"
+			:media="media"
+		/>
+		<div
+			v-if="mediaList.filter((media) => previewable(media)).length > 0"
+			class="gird-container"
+			:class="{ dmWidth: inDm }"
+		>
+			<div
+				ref="gallery"
+				:data-count="
+					mediaList.filter((media) => previewable(media)).length
+				"
+				@click.stop
+			>
+				<template
+					v-for="media in mediaList.filter((media) =>
+						previewable(media)
+					)"
+				>
+					<XVideo
+						v-if="media.type.startsWith('video')"
+						:key="media.id"
+						:video="media"
+					/>
+					<XImage
+						v-else-if="media.type.startsWith('image')"
+						:key="media.id"
+						class="image"
+						:data-id="media.id"
+						:image="media"
+						:raw="raw"
+					/>
+				</template>
+			</div>
 		</div>
 	</div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, ref } from 'vue';
-import * as misskey from 'calckey-js';
-import PhotoSwipeLightbox from 'photoswipe/lightbox';
-import PhotoSwipe from 'photoswipe';
-import 'photoswipe/style.css';
-import XBanner from '@/components/MkMediaBanner.vue';
-import XImage from '@/components/MkMediaImage.vue';
-import XVideo from '@/components/MkMediaVideo.vue';
-import * as os from '@/os';
-import { FILE_TYPE_BROWSERSAFE } from '@/const';
-import { defaultStore } from '@/store';
+import { onMounted, ref } from "vue";
+import * as misskey from "calckey-js";
+import PhotoSwipeLightbox from "photoswipe/lightbox";
+import PhotoSwipe from "photoswipe";
+import "photoswipe/style.css";
+import XBanner from "@/components/MkMediaBanner.vue";
+import XImage from "@/components/MkMediaImage.vue";
+import XVideo from "@/components/MkMediaVideo.vue";
+import * as os from "@/os";
+import { FILE_TYPE_BROWSERSAFE } from "@/const";
+import { defaultStore } from "@/store";
 
 const props = defineProps<{
 	mediaList: misskey.entities.DriveFile[];
@@ -32,60 +61,72 @@ const props = defineProps<{
 }>();
 
 const gallery = ref(null);
-const pswpZIndex = os.claimZIndex('middle');
+const pswpZIndex = os.claimZIndex("middle");
 
 onMounted(() => {
 	const lightbox = new PhotoSwipeLightbox({
 		dataSource: props.mediaList
-			.filter(media => {
-				if (media.type === 'image/svg+xml') return true; // svgのwebpublicはpngなのでtrue
-				return media.type.startsWith('image') && FILE_TYPE_BROWSERSAFE.includes(media.type);
+			.filter((media) => {
+				if (media.type === "image/svg+xml") return true; // svgのwebpublicはpngなのでtrue
+				return (
+					media.type.startsWith("image") &&
+					FILE_TYPE_BROWSERSAFE.includes(media.type)
+				);
 			})
-			.map(media => {
+			.map((media) => {
 				const item = {
 					src: media.url,
 					w: media.properties.width,
 					h: media.properties.height,
 					alt: media.comment,
 				};
-				if (media.properties.orientation != null && media.properties.orientation >= 5) {
+				if (
+					media.properties.orientation != null &&
+					media.properties.orientation >= 5
+				) {
 					[item.w, item.h] = [item.h, item.w];
 				}
 				return item;
 			}),
 		gallery: gallery.value,
-		children: '.image',
-		thumbSelector: '.image',
+		children: ".image",
+		thumbSelector: ".image",
 		loop: false,
-		padding: window.innerWidth > 500 ? {
-			top: 32,
-			bottom: 32,
-			left: 32,
-			right: 32,
-		} : {
-			top: 0,
-			bottom: 0,
-			left: 0,
-			right: 0,
-		},
-		imageClickAction: 'close',
-		tapAction: 'toggle-controls',
+		padding:
+			window.innerWidth > 500
+				? {
+						top: 32,
+						bottom: 32,
+						left: 32,
+						right: 32,
+				  }
+				: {
+						top: 0,
+						bottom: 0,
+						left: 0,
+						right: 0,
+				  },
+		imageClickAction: "close",
+		tapAction: "toggle-controls",
 		pswpModule: PhotoSwipe,
 	});
 
-	lightbox.on('itemData', (ev) => {
+	lightbox.on("itemData", (ev) => {
 		const { itemData } = ev;
 
 		// element is children
 		const { element } = itemData;
 
 		const id = element.dataset.id;
-		const file = props.mediaList.find(media => media.id === id);
+		const file = props.mediaList.find((media) => media.id === id);
 
 		itemData.src = file.url;
 		itemData.w = Number(file.properties.width);
 		itemData.h = Number(file.properties.height);
-		if (file.properties.orientation != null && file.properties.orientation >= 5) {
+		if (
+			file.properties.orientation != null &&
+			file.properties.orientation >= 5
+		) {
 			[itemData.w, itemData.h] = [itemData.h, itemData.w];
 		}
 		itemData.msrc = file.thumbnailUrl;
@@ -93,17 +134,17 @@ onMounted(() => {
 		itemData.thumbCropped = true;
 	});
 
-	lightbox.on('uiRegister', () => {
+	lightbox.on("uiRegister", () => {
 		lightbox.pswp.ui.registerElement({
-			name: 'altText',
-			className: 'pwsp__alt-text-container',
-			appendTo: 'wrapper',
+			name: "altText",
+			className: "pwsp__alt-text-container",
+			appendTo: "wrapper",
 			onInit: (el, pwsp) => {
-				let textBox = document.createElement('p');
-				textBox.className = 'pwsp__alt-text';
+				let textBox = document.createElement("p");
+				textBox.className = "pwsp__alt-text";
 				el.appendChild(textBox);
 
-				let preventProp = function(ev: Event): void {
+				let preventProp = function (ev: Event): void {
 					ev.stopPropagation();
 				};
 
@@ -114,7 +155,7 @@ onMounted(() => {
 				el.onpointercancel = preventProp;
 				el.onpointermove = preventProp;
 
-				pwsp.on('change', () => {
+				pwsp.on("change", () => {
 					textBox.textContent = pwsp.currSlide.data.alt?.trim();
 				});
 			},
@@ -125,15 +166,17 @@ onMounted(() => {
 });
 
 const previewable = (file: misskey.entities.DriveFile): boolean => {
-	if (file.type === 'image/svg+xml') return true; // svgのwebpublic/thumbnailはpngなのでtrue
+	if (file.type === "image/svg+xml") return true; // svgのwebpublic/thumbnailはpngなのでtrue
 	// FILE_TYPE_BROWSERSAFEに適合しないものはブラウザで表示するのに不適切
-	return (file.type.startsWith('video') || file.type.startsWith('image')) && FILE_TYPE_BROWSERSAFE.includes(file.type);
+	return (
+		(file.type.startsWith("video") || file.type.startsWith("image")) &&
+		FILE_TYPE_BROWSERSAFE.includes(file.type)
+	);
 };
 </script>
 
 <style lang="scss" scoped>
 .hoawjimk {
-
 	> .dmWidth {
 		min-width: 20rem;
 		max-width: 40rem;
@@ -147,9 +190,9 @@ const previewable = (file: misskey.entities.DriveFile): boolean => {
 		overflow: hidden;
 
 		&:before {
-			content: '';
+			content: "";
 			display: block;
-			padding-top: 56.25% // 16:9;
+			padding-top: 56.25%; // 16:9;
 		}
 
 		> div {
@@ -221,7 +264,7 @@ const previewable = (file: misskey.entities.DriveFile): boolean => {
 <style lang="scss">
 .pswp {
 	// なぜか機能しない
-  //z-index: v-bind(pswpZIndex);
+	//z-index: v-bind(pswpZIndex);
 	z-index: 2000000;
 }
 .pwsp__alt-text-container {
@@ -254,5 +297,4 @@ const previewable = (file: misskey.entities.DriveFile): boolean => {
 .pwsp__alt-text:empty {
 	display: none;
 }
-
 </style>
diff --git a/packages/client/src/components/MkMediaVideo.vue b/packages/client/src/components/MkMediaVideo.vue
index 48a599407b..7440fb2cb5 100644
--- a/packages/client/src/components/MkMediaVideo.vue
+++ b/packages/client/src/components/MkMediaVideo.vue
@@ -1,58 +1,66 @@
 <template>
-<div v-if="hide" class="icozogqfvdetwohsdglrbswgrejoxbdj" @click="hide = false">
-	<div>
-		<b><i class="ph-warning ph-bold ph-lg"></i> {{ i18n.ts.sensitive }}</b>
-		<span>{{ i18n.ts.clickToShow }}</span>
-	</div>
-</div>
-<div v-else class="kkjnbbplepmiyuadieoenjgutgcmtsvu">
-	<VuePlyr
-		:options="{
-			controls: [
-				'play-large',
-				'play',
-				'progress',
-				'current-time',
-				'mute',
-				'volume',
-				'pip',
-				'download',
-				'fullscreen'
-			],
-			disableContextMenu: false,
-		}"
+	<div
+		v-if="hide"
+		class="icozogqfvdetwohsdglrbswgrejoxbdj"
+		@click="hide = false"
 	>
-		<video
-			:poster="video.thumbnailUrl"
-			:title="video.comment"
-			:aria-label="video.comment"
-			preload="none"
-			controls
-			@contextmenu.stop
-		>
-			<source
-				:src="video.url"
-				:type="video.type"
+		<div>
+			<b
+				><i class="ph-warning ph-bold ph-lg"></i>
+				{{ i18n.ts.sensitive }}</b
 			>
-		</video>
-	</VuePlyr>
-	<i class="ph-eye-slash ph-bold ph-lg" @click="hide = true"></i>
-</div>
+			<span>{{ i18n.ts.clickToShow }}</span>
+		</div>
+	</div>
+	<div v-else class="kkjnbbplepmiyuadieoenjgutgcmtsvu">
+		<VuePlyr
+			:options="{
+				controls: [
+					'play-large',
+					'play',
+					'progress',
+					'current-time',
+					'mute',
+					'volume',
+					'pip',
+					'download',
+					'fullscreen',
+				],
+				disableContextMenu: false,
+			}"
+		>
+			<video
+				:poster="video.thumbnailUrl"
+				:title="video.comment"
+				:aria-label="video.comment"
+				preload="none"
+				controls
+				@contextmenu.stop
+			>
+				<source :src="video.url" :type="video.type" />
+			</video>
+		</VuePlyr>
+		<i class="ph-eye-slash ph-bold ph-lg" @click="hide = true"></i>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
-import VuePlyr from 'vue-plyr';
-import type * as misskey from 'calckey-js';
-import { defaultStore } from '@/store';
-import 'vue-plyr/dist/vue-plyr.css';
-import { i18n } from '@/i18n';
+import { ref } from "vue";
+import VuePlyr from "vue-plyr";
+import type * as misskey from "calckey-js";
+import { defaultStore } from "@/store";
+import "vue-plyr/dist/vue-plyr.css";
+import { i18n } from "@/i18n";
 
 const props = defineProps<{
 	video: misskey.entities.DriveFile;
 }>();
 
-const hide = ref((defaultStore.state.nsfw === 'force') ? true : props.video.isSensitive && (defaultStore.state.nsfw !== 'ignore'));
+const hide = ref(
+	defaultStore.state.nsfw === "force"
+		? true
+		: props.video.isSensitive && defaultStore.state.nsfw !== "ignore"
+);
 </script>
 
 <style lang="scss" scoped>
@@ -67,7 +75,7 @@ const hide = ref((defaultStore.state.nsfw === 'force') ? true : props.video.isSe
 		background-color: var(--fg);
 		color: var(--accentLighten);
 		font-size: 14px;
-		opacity: .5;
+		opacity: 0.5;
 		padding: 3px 6px;
 		text-align: center;
 		cursor: pointer;
diff --git a/packages/client/src/components/MkMention.vue b/packages/client/src/components/MkMention.vue
index 2a73404214..4a336c9411 100644
--- a/packages/client/src/components/MkMention.vue
+++ b/packages/client/src/components/MkMention.vue
@@ -1,40 +1,68 @@
 <template>
-<MkA v-if="url.startsWith('/')" v-user-preview="canonical" class="akbvjaqn" :class="{ isMe }" :to="url" :style="{ background: bgCss }" @click.stop>
-	<img class="icon" :src="`/avatar/@${username}@${host}`" alt="">
-	<span class="main">
-		<span class="username">@{{ username }}</span>
-		<span v-if="(host != localHost) || $store.state.showFullAcct" class="host">@{{ toUnicode(host) }}</span>
-	</span>
-</MkA>
-<a v-else class="akbvjaqn" :href="url" target="_blank" rel="noopener" :style="{ background: bgCss }" @click.stop>
-	<span class="main">
-		<span class="username">@{{ username }}</span>
-		<span class="host">@{{ toUnicode(host) }}</span>
-	</span>
-</a>
+	<MkA
+		v-if="url.startsWith('/')"
+		v-user-preview="canonical"
+		class="akbvjaqn"
+		:class="{ isMe }"
+		:to="url"
+		:style="{ background: bgCss }"
+		@click.stop
+	>
+		<img class="icon" :src="`/avatar/@${username}@${host}`" alt="" />
+		<span class="main">
+			<span class="username">@{{ username }}</span>
+			<span
+				v-if="host != localHost || $store.state.showFullAcct"
+				class="host"
+				>@{{ toUnicode(host) }}</span
+			>
+		</span>
+	</MkA>
+	<a
+		v-else
+		class="akbvjaqn"
+		:href="url"
+		target="_blank"
+		rel="noopener"
+		:style="{ background: bgCss }"
+		@click.stop
+	>
+		<span class="main">
+			<span class="username">@{{ username }}</span>
+			<span class="host">@{{ toUnicode(host) }}</span>
+		</span>
+	</a>
 </template>
 
 <script lang="ts" setup>
-import { toUnicode } from 'punycode';
-import { } from 'vue';
-import tinycolor from 'tinycolor2';
-import { host as localHost } from '@/config';
-import { $i } from '@/account';
+import { toUnicode } from "punycode";
+import {} from "vue";
+import tinycolor from "tinycolor2";
+import { host as localHost } from "@/config";
+import { $i } from "@/account";
 
 const props = defineProps<{
 	username: string;
 	host: string;
 }>();
 
-const canonical = props.host === localHost ? `@${props.username}` : `@${props.username}@${toUnicode(props.host)}`;
+const canonical =
+	props.host === localHost
+		? `@${props.username}`
+		: `@${props.username}@${toUnicode(props.host)}`;
 
 const url = `/${canonical}`;
 
-const isMe = $i && (
-	`@${props.username}@${toUnicode(props.host)}` === `@${$i.username}@${toUnicode(localHost)}`.toLowerCase()
-);
+const isMe =
+	$i &&
+	`@${props.username}@${toUnicode(props.host)}` ===
+		`@${$i.username}@${toUnicode(localHost)}`.toLowerCase();
 
-const bg = tinycolor(getComputedStyle(document.documentElement).getPropertyValue(isMe ? '--mentionMe' : '--mention'));
+const bg = tinycolor(
+	getComputedStyle(document.documentElement).getPropertyValue(
+		isMe ? "--mentionMe" : "--mention"
+	)
+);
 bg.setAlpha(0.1);
 const bgCss = bg.toRgbString();
 </script>
diff --git a/packages/client/src/components/MkMenu.child.vue b/packages/client/src/components/MkMenu.child.vue
index 3ada4afbdc..6b05ab4474 100644
--- a/packages/client/src/components/MkMenu.child.vue
+++ b/packages/client/src/components/MkMenu.child.vue
@@ -1,15 +1,29 @@
 <template>
-<div ref="el" class="sfhdhdhr">
-	<MkMenu ref="menu" :items="items" :align="align" :width="width" :as-drawer="false" @close="onChildClosed"/>
-</div>
+	<div ref="el" class="sfhdhdhr">
+		<MkMenu
+			ref="menu"
+			:items="items"
+			:align="align"
+			:width="width"
+			:as-drawer="false"
+			@close="onChildClosed"
+		/>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { on } from 'events';
-import { nextTick, onBeforeUnmount, onMounted, onUnmounted, ref, watch } from 'vue';
-import MkMenu from './MkMenu.vue';
-import { MenuItem } from '@/types/menu';
-import * as os from '@/os';
+import { on } from "events";
+import {
+	nextTick,
+	onBeforeUnmount,
+	onMounted,
+	onUnmounted,
+	ref,
+	watch,
+} from "vue";
+import MkMenu from "./MkMenu.vue";
+import { MenuItem } from "@/types/menu";
+import * as os from "@/os";
 
 const props = defineProps<{
 	items: MenuItem[];
@@ -20,27 +34,27 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-	(ev: 'closed'): void;
-	(ev: 'actioned'): void;
+	(ev: "closed"): void;
+	(ev: "actioned"): void;
 }>();
 
 const el = ref<HTMLElement>();
-const align = 'left';
+const align = "left";
 
 function setPosition() {
 	const rootRect = props.rootElement.getBoundingClientRect();
 	const rect = props.targetElement.getBoundingClientRect();
 	const left = props.targetElement.offsetWidth;
-	const top = (rect.top - rootRect.top) - 8;
-	el.value.style.left = left + 'px';
-	el.value.style.top = top + 'px';
+	const top = rect.top - rootRect.top - 8;
+	el.value.style.left = left + "px";
+	el.value.style.top = top + "px";
 }
 
 function onChildClosed(actioned?: boolean) {
 	if (actioned) {
-		emit('actioned');
+		emit("actioned");
 	} else {
-		emit('closed');
+		emit("closed");
 	}
 }
 
@@ -53,7 +67,7 @@ onMounted(() => {
 
 defineExpose({
 	checkHit: (ev: MouseEvent) => {
-		return (ev.target === el.value || el.value.contains(ev.target));
+		return ev.target === el.value || el.value.contains(ev.target);
 	},
 });
 </script>
diff --git a/packages/client/src/components/MkMenu.vue b/packages/client/src/components/MkMenu.vue
index c0502387a6..88c8af1c5c 100644
--- a/packages/client/src/components/MkMenu.vue
+++ b/packages/client/src/components/MkMenu.vue
@@ -1,93 +1,225 @@
 <template>
-<div>
-	<div
-		ref="itemsEl" v-hotkey="keymap"
-		class="rrevdjwt _popup _shadow"
-		:class="{ center: align === 'center', asDrawer }"
-		:style="{ width: (width && !asDrawer) ? width + 'px' : '', maxHeight: maxHeight ? maxHeight + 'px' : '' }"
-		@contextmenu.self="e => e.preventDefault()"
-	>
-		<template v-for="(item, i) in items2">
-			<div v-if="item === null" class="divider"></div>
-			<span v-else-if="item.type === 'label'" class="label item">
-				<span :style="item.textStyle || ''">{{ item.text }}</span>
+	<div>
+		<div
+			ref="itemsEl"
+			v-hotkey="keymap"
+			class="rrevdjwt _popup _shadow"
+			:class="{ center: align === 'center', asDrawer }"
+			:style="{
+				width: width && !asDrawer ? width + 'px' : '',
+				maxHeight: maxHeight ? maxHeight + 'px' : '',
+			}"
+			@contextmenu.self="(e) => e.preventDefault()"
+		>
+			<template v-for="(item, i) in items2">
+				<div v-if="item === null" class="divider"></div>
+				<span v-else-if="item.type === 'label'" class="label item">
+					<span :style="item.textStyle || ''">{{ item.text }}</span>
+				</span>
+				<span
+					v-else-if="item.type === 'pending'"
+					:tabindex="i"
+					class="pending item"
+				>
+					<span><MkEllipsis /></span>
+				</span>
+				<MkA
+					v-else-if="item.type === 'link'"
+					:to="item.to"
+					:tabindex="i"
+					class="_button item"
+					@click.passive="close(true)"
+					@mouseenter.passive="onItemMouseEnter(item)"
+					@mouseleave.passive="onItemMouseLeave(item)"
+				>
+					<i
+						v-if="item.icon"
+						class="ph-fw ph-lg"
+						:class="item.icon"
+					></i>
+					<span v-else-if="item.icons">
+						<i
+							v-for="icon in item.icons"
+							class="ph-fw ph-lg"
+							:class="icon"
+						></i>
+					</span>
+					<MkAvatar
+						v-if="item.avatar"
+						:user="item.avatar"
+						class="avatar"
+					/>
+					<span :style="item.textStyle || ''">{{ item.text }}</span>
+					<span v-if="item.indicate" class="indicator"
+						><i class="ph-circle ph-fill"></i
+					></span>
+				</MkA>
+				<a
+					v-else-if="item.type === 'a'"
+					:href="item.href"
+					:target="item.target"
+					:download="item.download"
+					:tabindex="i"
+					class="_button item"
+					@click="close(true)"
+					@mouseenter.passive="onItemMouseEnter(item)"
+					@mouseleave.passive="onItemMouseLeave(item)"
+				>
+					<i
+						v-if="item.icon"
+						class="ph-fw ph-lg"
+						:class="item.icon"
+					></i>
+					<span v-else-if="item.icons">
+						<i
+							v-for="icon in item.icons"
+							class="ph-fw ph-lg"
+							:class="icon"
+						></i>
+					</span>
+					<span :style="item.textStyle || ''">{{ item.text }}</span>
+					<span v-if="item.indicate" class="indicator"
+						><i class="ph-circle ph-fill"></i
+					></span>
+				</a>
+				<button
+					v-else-if="item.type === 'user' && !items.hidden"
+					:tabindex="i"
+					class="_button item"
+					:class="{ active: item.active }"
+					:disabled="item.active"
+					@click="clicked(item.action, $event)"
+					@mouseenter.passive="onItemMouseEnter(item)"
+					@mouseleave.passive="onItemMouseLeave(item)"
+				>
+					<MkAvatar :user="item.user" class="avatar" /><MkUserName
+						:user="item.user"
+					/>
+					<span v-if="item.indicate" class="indicator"
+						><i class="ph-circle ph-fill"></i
+					></span>
+				</button>
+				<span
+					v-else-if="item.type === 'switch'"
+					:tabindex="i"
+					class="item"
+					@mouseenter.passive="onItemMouseEnter(item)"
+					@mouseleave.passive="onItemMouseLeave(item)"
+				>
+					<FormSwitch
+						v-model="item.ref"
+						:disabled="item.disabled"
+						class="form-switch"
+						:style="item.textStyle || ''"
+						>{{ item.text }}</FormSwitch
+					>
+				</span>
+				<button
+					v-else-if="item.type === 'parent'"
+					:tabindex="i"
+					class="_button item parent"
+					:class="{ childShowing: childShowingItem === item }"
+					@mouseenter="showChildren(item, $event)"
+				>
+					<i
+						v-if="item.icon"
+						class="ph-fw ph-lg"
+						:class="item.icon"
+					></i>
+					<span v-else-if="item.icons">
+						<i
+							v-for="icon in item.icons"
+							class="ph-fw ph-lg"
+							:class="icon"
+						></i>
+					</span>
+					<span :style="item.textStyle || ''">{{ item.text }}</span>
+					<span class="caret"
+						><i class="ph-caret-right ph-bold ph-lg ph-fw ph-lg"></i
+					></span>
+				</button>
+				<button
+					v-else-if="!item.hidden"
+					:tabindex="i"
+					class="_button item"
+					:class="{ danger: item.danger, active: item.active }"
+					:disabled="item.active"
+					@click="clicked(item.action, $event)"
+					@mouseenter.passive="onItemMouseEnter(item)"
+					@mouseleave.passive="onItemMouseLeave(item)"
+				>
+					<i
+						v-if="item.icon"
+						class="ph-fw ph-lg"
+						:class="item.icon"
+					></i>
+					<span v-else-if="item.icons">
+						<i
+							v-for="icon in item.icons"
+							class="ph-fw ph-lg"
+							:class="icon"
+						></i>
+					</span>
+					<MkAvatar
+						v-if="item.avatar"
+						:user="item.avatar"
+						class="avatar"
+					/>
+					<span :style="item.textStyle || ''">{{ item.text }}</span>
+					<span v-if="item.indicate" class="indicator"
+						><i class="ph-circle ph-fill"></i
+					></span>
+				</button>
+			</template>
+			<span v-if="items2.length === 0" class="none item">
+				<span>{{ i18n.ts.none }}</span>
 			</span>
-			<span v-else-if="item.type === 'pending'" :tabindex="i" class="pending item">
-				<span><MkEllipsis/></span>
-			</span>
-			<MkA v-else-if="item.type === 'link'" :to="item.to" :tabindex="i" class="_button item" @click.passive="close(true)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)">
-				<i v-if="item.icon" class="ph-fw ph-lg" :class="item.icon"></i>
-				<span v-else-if="item.icons">
-					<i v-for="icon in item.icons" class="ph-fw ph-lg" :class="icon"></i>
-				</span>
-				<MkAvatar v-if="item.avatar" :user="item.avatar" class="avatar"/>
-				<span :style="item.textStyle || ''">{{ item.text }}</span>
-				<span v-if="item.indicate" class="indicator"><i class="ph-circle ph-fill"></i></span>
-			</MkA>
-			<a v-else-if="item.type === 'a'" :href="item.href" :target="item.target" :download="item.download" :tabindex="i" class="_button item" @click="close(true)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)">
-				<i v-if="item.icon" class="ph-fw ph-lg" :class="item.icon"></i>
-				<span v-else-if="item.icons">
-					<i v-for="icon in item.icons" class="ph-fw ph-lg" :class="icon"></i>
-				</span>
-				<span :style="item.textStyle || ''">{{ item.text }}</span>
-				<span v-if="item.indicate" class="indicator"><i class="ph-circle ph-fill"></i></span>
-			</a>
-			<button v-else-if="item.type === 'user' && !items.hidden" :tabindex="i" class="_button item" :class="{ active: item.active }" :disabled="item.active" @click="clicked(item.action, $event)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)">
-				<MkAvatar :user="item.user" class="avatar"/><MkUserName :user="item.user"/>
-				<span v-if="item.indicate" class="indicator"><i class="ph-circle ph-fill"></i></span>
-			</button>
-			<span v-else-if="item.type === 'switch'" :tabindex="i" class="item" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)">
-				<FormSwitch v-model="item.ref" :disabled="item.disabled" class="form-switch" :style="item.textStyle || ''">{{ item.text }}</FormSwitch>
-			</span>
-			<button v-else-if="item.type === 'parent'" :tabindex="i" class="_button item parent" :class="{ childShowing: childShowingItem === item }" @mouseenter="showChildren(item, $event)">
-				<i v-if="item.icon" class="ph-fw ph-lg" :class="item.icon"></i>
-				<span v-else-if="item.icons">
-					<i v-for="icon in item.icons" class="ph-fw ph-lg" :class="icon"></i>
-				</span>
-				<span :style="item.textStyle || ''">{{ item.text }}</span>
-				<span class="caret"><i class="ph-caret-right ph-bold ph-lg ph-fw ph-lg"></i></span>
-			</button>
-			<button v-else-if="!item.hidden" :tabindex="i" class="_button item" :class="{ danger: item.danger, active: item.active }" :disabled="item.active" @click="clicked(item.action, $event)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)">
-				<i v-if="item.icon" class="ph-fw ph-lg" :class="item.icon"></i>
-				<span v-else-if="item.icons">
-					<i v-for="icon in item.icons" class="ph-fw ph-lg" :class="icon"></i>
-				</span>
-				<MkAvatar v-if="item.avatar" :user="item.avatar" class="avatar"/>
-				<span :style="item.textStyle || ''">{{ item.text }}</span>
-				<span v-if="item.indicate" class="indicator"><i class="ph-circle ph-fill"></i></span>
-			</button>
-		</template>
-		<span v-if="items2.length === 0" class="none item">
-			<span>{{ i18n.ts.none }}</span>
-		</span>
+		</div>
+		<div v-if="childMenu" class="child">
+			<XChild
+				ref="child"
+				:items="childMenu"
+				:target-element="childTarget"
+				:root-element="itemsEl"
+				showing
+				@actioned="childActioned"
+			/>
+		</div>
 	</div>
-	<div v-if="childMenu" class="child">
-		<XChild ref="child" :items="childMenu" :target-element="childTarget" :root-element="itemsEl" showing @actioned="childActioned"/>
-	</div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { computed, menu, defineAsyncComponent, nextTick, onBeforeUnmount, onMounted, onUnmounted, Ref, ref, watch } from 'vue';
-import { focusPrev, focusNext } from '@/scripts/focus';
-import FormSwitch from '@/components/form/switch.vue';
-import { MenuItem, InnerMenuItem, MenuPending, MenuAction } from '@/types/menu';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
+import {
+	computed,
+	menu,
+	defineAsyncComponent,
+	nextTick,
+	onBeforeUnmount,
+	onMounted,
+	onUnmounted,
+	Ref,
+	ref,
+	watch,
+} from "vue";
+import { focusPrev, focusNext } from "@/scripts/focus";
+import FormSwitch from "@/components/form/switch.vue";
+import { MenuItem, InnerMenuItem, MenuPending, MenuAction } from "@/types/menu";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
 
-const XChild = defineAsyncComponent(() => import('./MkMenu.child.vue'));
+const XChild = defineAsyncComponent(() => import("./MkMenu.child.vue"));
 
 const props = defineProps<{
 	items: MenuItem[];
 	viaKeyboard?: boolean;
 	asDrawer?: boolean;
-	align?: 'center' | string;
+	align?: "center" | string;
 	width?: number;
 	maxHeight?: number;
 }>();
 
 const emit = defineEmits<{
-	(ev: 'close', actioned?: boolean): void;
+	(ev: "close", actioned?: boolean): void;
 }>();
 
 let itemsEl = $ref<HTMLDivElement>();
@@ -97,31 +229,38 @@ let items2: InnerMenuItem[] = $ref([]);
 let child = $ref<InstanceType<typeof XChild>>();
 
 let keymap = computed(() => ({
-	'up|k|shift+tab': focusUp,
-	'down|j|tab': focusDown,
-	'esc': close,
+	"up|k|shift+tab": focusUp,
+	"down|j|tab": focusDown,
+	esc: close,
 }));
 
 let childShowingItem = $ref<MenuItem | null>();
 
-watch(() => props.items, () => {
-	const items: (MenuItem | MenuPending)[] = [...props.items].filter(item => item !== undefined);
+watch(
+	() => props.items,
+	() => {
+		const items: (MenuItem | MenuPending)[] = [...props.items].filter(
+			(item) => item !== undefined
+		);
 
-	for (let i = 0; i < items.length; i++) {
-		const item = items[i];
+		for (let i = 0; i < items.length; i++) {
+			const item = items[i];
 
-		if (item && 'then' in item) { // if item is Promise
-			items[i] = { type: 'pending' };
-			item.then(actualItem => {
-				items2[i] = actualItem;
-			});
+			if (item && "then" in item) {
+				// if item is Promise
+				items[i] = { type: "pending" };
+				item.then((actualItem) => {
+					items2[i] = actualItem;
+				});
+			}
 		}
-	}
 
-	items2 = items as InnerMenuItem[];
-}, {
-	immediate: true,
-});
+		items2 = items as InnerMenuItem[];
+	},
+	{
+		immediate: true,
+	}
+);
 
 let childMenu = $ref<MenuItem[] | null>();
 let childTarget = $ref<HTMLElement | null>();
@@ -137,7 +276,11 @@ function childActioned() {
 }
 
 function onGlobalMousedown(event: MouseEvent) {
-	if (childTarget && (event.target === childTarget || childTarget.contains(event.target))) return;
+	if (
+		childTarget &&
+		(event.target === childTarget || childTarget.contains(event.target))
+	)
+		return;
 	if (child && child.checkHit(event)) return;
 	closeChild();
 }
@@ -169,7 +312,7 @@ function clicked(fn: MenuAction, ev: MouseEvent) {
 }
 
 function close(actioned = false) {
-	emit('close', actioned);
+	emit("close", actioned);
 }
 
 function focusUp() {
@@ -187,11 +330,13 @@ onMounted(() => {
 		});
 	}
 
-	document.addEventListener('mousedown', onGlobalMousedown, { passive: true });
+	document.addEventListener("mousedown", onGlobalMousedown, {
+		passive: true,
+	});
 });
 
 onBeforeUnmount(() => {
-	document.removeEventListener('mousedown', onGlobalMousedown);
+	document.removeEventListener("mousedown", onGlobalMousedown);
 });
 </script>
 
diff --git a/packages/client/src/components/MkMiniChart.vue b/packages/client/src/components/MkMiniChart.vue
index c64ce163f9..b7db265aca 100644
--- a/packages/client/src/components/MkMiniChart.vue
+++ b/packages/client/src/components/MkMiniChart.vue
@@ -1,35 +1,34 @@
 <template>
-<svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`" style="overflow:visible">
-	<defs>
-		<linearGradient :id="gradientId" x1="0" x2="0" y1="1" y2="0">
-			<stop offset="0%" :stop-color="color" stop-opacity="0"></stop>
-			<stop offset="100%" :stop-color="color" stop-opacity="0.65"></stop>
-		</linearGradient>
-	</defs>
-	<polygon
-		:points="polygonPoints"
-		:style="`stroke: none; fill: url(#${ gradientId });`"
-	/>
-	<polyline
-		:points="polylinePoints"
-		fill="none"
-		:stroke="color"
-		stroke-width="2"
-	/>
-	<circle
-		:cx="headX"
-		:cy="headY"
-		r="3"
-		:fill="color"
-	/>
-</svg>
+	<svg :viewBox="`0 0 ${viewBoxX} ${viewBoxY}`" style="overflow: visible">
+		<defs>
+			<linearGradient :id="gradientId" x1="0" x2="0" y1="1" y2="0">
+				<stop offset="0%" :stop-color="color" stop-opacity="0"></stop>
+				<stop
+					offset="100%"
+					:stop-color="color"
+					stop-opacity="0.65"
+				></stop>
+			</linearGradient>
+		</defs>
+		<polygon
+			:points="polygonPoints"
+			:style="`stroke: none; fill: url(#${gradientId});`"
+		/>
+		<polyline
+			:points="polylinePoints"
+			fill="none"
+			:stroke="color"
+			stroke-width="2"
+		/>
+		<circle :cx="headX" :cy="headY" r="3" :fill="color" />
+	</svg>
 </template>
 
 <script lang="ts" setup>
-import { onUnmounted, watch } from 'vue';
-import { v4 as uuid } from 'uuid';
-import tinycolor from 'tinycolor2';
-import { useInterval } from '@/scripts/use-interval';
+import { onUnmounted, watch } from "vue";
+import { v4 as uuid } from "uuid";
+import tinycolor from "tinycolor2";
+import { useInterval } from "@/scripts/use-interval";
 
 const props = defineProps<{
 	src: number[];
@@ -38,12 +37,14 @@ const props = defineProps<{
 const viewBoxX = 50;
 const viewBoxY = 50;
 const gradientId = uuid();
-let polylinePoints = $ref('');
-let polygonPoints = $ref('');
+let polylinePoints = $ref("");
+let polygonPoints = $ref("");
 let headX = $ref<number | null>(null);
 let headY = $ref<number | null>(null);
 let clock = $ref<number | null>(null);
-const accent = tinycolor(getComputedStyle(document.documentElement).getPropertyValue('--accent'));
+const accent = tinycolor(
+	getComputedStyle(document.documentElement).getPropertyValue("--accent")
+);
 const color = accent.toRgbString();
 
 function draw(): void {
@@ -52,12 +53,12 @@ function draw(): void {
 
 	const _polylinePoints = stats.map((n, i) => [
 		i * (viewBoxX / (stats.length - 1)),
-		(1 - (n / peak)) * viewBoxY,
+		(1 - n / peak) * viewBoxY,
 	]);
 
-	polylinePoints = _polylinePoints.map(xy => `${xy[0]},${xy[1]}`).join(' ');
+	polylinePoints = _polylinePoints.map((xy) => `${xy[0]},${xy[1]}`).join(" ");
 
-	polygonPoints = `0,${ viewBoxY } ${ polylinePoints } ${ viewBoxX },${ viewBoxY }`;
+	polygonPoints = `0,${viewBoxY} ${polylinePoints} ${viewBoxX},${viewBoxY}`;
 
 	headX = _polylinePoints[_polylinePoints.length - 1][0];
 	headY = _polylinePoints[_polylinePoints.length - 1][1];
diff --git a/packages/client/src/components/MkModal.vue b/packages/client/src/components/MkModal.vue
index 80cfaf8da4..d9cd56f958 100644
--- a/packages/client/src/components/MkModal.vue
+++ b/packages/client/src/components/MkModal.vue
@@ -1,15 +1,64 @@
 <template>
 	<Transition
 		:name="transitionName"
-		:enter-active-class="$style['transition_' + transitionName + '_enterActive']"
-		:leave-active-class="$style['transition_' + transitionName + '_leaveActive']"
-		:enter-from-class="$style['transition_' + transitionName + '_enterFrom']"
+		:enter-active-class="
+			$style['transition_' + transitionName + '_enterActive']
+		"
+		:leave-active-class="
+			$style['transition_' + transitionName + '_leaveActive']
+		"
+		:enter-from-class="
+			$style['transition_' + transitionName + '_enterFrom']
+		"
 		:leave-to-class="$style['transition_' + transitionName + '_leaveTo']"
-		:duration="transitionDuration" appear @after-leave="emit('closed')" @enter="emit('opening')" @after-enter="onOpened"
+		:duration="transitionDuration"
+		appear
+		@after-leave="emit('closed')"
+		@enter="emit('opening')"
+		@after-enter="onOpened"
 	>
-		<div v-show="manualShowing != null ? manualShowing : showing" v-hotkey.global="keymap" :class="[$style.root, { [$style.drawer]: type === 'drawer', [$style.dialog]: type === 'dialog' || type === 'dialog:top', [$style.popup]: type === 'popup' }]" :style="{ zIndex, pointerEvents: (manualShowing != null ? manualShowing : showing) ? 'auto' : 'none', '--transformOrigin': transformOrigin }">
-			<div class="_modalBg data-cy-bg" :class="[$style.bg, { [$style.bgTransparent]: isEnableBgTransparent, 'data-cy-transparent': isEnableBgTransparent }]" :style="{ zIndex }" @click="onBgClick" @mousedown="onBgClick" @contextmenu.prevent.stop="() => {}"></div>
-			<div ref="content" :class="[$style.content, { [$style.fixed]: fixed, top: type === 'dialog:top' }]" :style="{ zIndex }" @click.self="onBgClick">
+		<div
+			v-show="manualShowing != null ? manualShowing : showing"
+			v-hotkey.global="keymap"
+			:class="[
+				$style.root,
+				{
+					[$style.drawer]: type === 'drawer',
+					[$style.dialog]: type === 'dialog' || type === 'dialog:top',
+					[$style.popup]: type === 'popup',
+				},
+			]"
+			:style="{
+				zIndex,
+				pointerEvents: (manualShowing != null ? manualShowing : showing)
+					? 'auto'
+					: 'none',
+				'--transformOrigin': transformOrigin,
+			}"
+		>
+			<div
+				class="_modalBg data-cy-bg"
+				:class="[
+					$style.bg,
+					{
+						[$style.bgTransparent]: isEnableBgTransparent,
+						'data-cy-transparent': isEnableBgTransparent,
+					},
+				]"
+				:style="{ zIndex }"
+				@click="onBgClick"
+				@mousedown="onBgClick"
+				@contextmenu.prevent.stop="() => {}"
+			></div>
+			<div
+				ref="content"
+				:class="[
+					$style.content,
+					{ [$style.fixed]: fixed, top: type === 'dialog:top' },
+				]"
+				:style="{ zIndex }"
+				@click.self="onBgClick"
+			>
 				<slot :max-height="maxHeight" :type="type"></slot>
 			</div>
 		</div>
@@ -17,94 +66,103 @@
 </template>
 
 <script lang="ts" setup>
-import { nextTick, onMounted, watch, provide } from 'vue';
-import * as os from '@/os';
-import { isTouchUsing } from '@/scripts/touch';
-import { defaultStore } from '@/store';
-import { deviceKind } from '@/scripts/device-kind';
+import { nextTick, onMounted, watch, provide } from "vue";
+import * as os from "@/os";
+import { isTouchUsing } from "@/scripts/touch";
+import { defaultStore } from "@/store";
+import { deviceKind } from "@/scripts/device-kind";
 
 function getFixedContainer(el: Element | null): Element | null {
-	if (el == null || el.tagName === 'BODY') return null;
-	const position = window.getComputedStyle(el).getPropertyValue('position');
-	if (position === 'fixed') {
+	if (el == null || el.tagName === "BODY") return null;
+	const position = window.getComputedStyle(el).getPropertyValue("position");
+	if (position === "fixed") {
 		return el;
 	} else {
 		return getFixedContainer(el.parentElement);
 	}
 }
 
-type ModalTypes = 'popup' | 'dialog' | 'dialog:top' | 'drawer';
+type ModalTypes = "popup" | "dialog" | "dialog:top" | "drawer";
 
-const props = withDefaults(defineProps<{
-	manualShowing?: boolean | null;
-	anchor?: { x: string; y: string; };
-	src?: HTMLElement;
-	preferType?: ModalTypes | 'auto';
-	zPriority?: 'low' | 'middle' | 'high';
-	noOverlap?: boolean;
-	transparentBg?: boolean;
-}>(), {
-	manualShowing: null,
-	src: null,
-	anchor: () => ({ x: 'center', y: 'bottom' }),
-	preferType: 'auto',
-	zPriority: 'low',
-	noOverlap: true,
-	transparentBg: false,
-});
+const props = withDefaults(
+	defineProps<{
+		manualShowing?: boolean | null;
+		anchor?: { x: string; y: string };
+		src?: HTMLElement;
+		preferType?: ModalTypes | "auto";
+		zPriority?: "low" | "middle" | "high";
+		noOverlap?: boolean;
+		transparentBg?: boolean;
+	}>(),
+	{
+		manualShowing: null,
+		src: null,
+		anchor: () => ({ x: "center", y: "bottom" }),
+		preferType: "auto",
+		zPriority: "low",
+		noOverlap: true,
+		transparentBg: false,
+	}
+);
 
 const emit = defineEmits<{
-	(ev: 'opening'): void;
-	(ev: 'opened'): void;
-	(ev: 'click'): void;
-	(ev: 'esc'): void;
-	(ev: 'close'): void;
-	(ev: 'closed'): void;
+	(ev: "opening"): void;
+	(ev: "opened"): void;
+	(ev: "click"): void;
+	(ev: "esc"): void;
+	(ev: "close"): void;
+	(ev: "closed"): void;
 }>();
 
-provide('modal', true);
+provide("modal", true);
 
 let maxHeight = $ref<number>();
 let fixed = $ref(false);
-let transformOrigin = $ref('center');
+let transformOrigin = $ref("center");
 let showing = $ref(true);
 let content = $shallowRef<HTMLElement>();
 const zIndex = os.claimZIndex(props.zPriority);
 let useSendAnime = $ref(false);
 const type = $computed<ModalTypes>(() => {
-	if (props.preferType === 'auto') {
-		if (!defaultStore.state.disableDrawer && isTouchUsing && deviceKind === 'smartphone') {
-			return 'drawer';
+	if (props.preferType === "auto") {
+		if (
+			!defaultStore.state.disableDrawer &&
+			isTouchUsing &&
+			deviceKind === "smartphone"
+		) {
+			return "drawer";
 		} else {
-			return props.src != null ? 'popup' : 'dialog';
+			return props.src != null ? "popup" : "dialog";
 		}
 	} else {
 		return props.preferType!;
 	}
 });
-const isEnableBgTransparent = $computed(() => props.transparentBg && (type === 'popup'));
-let transitionName = $computed((() =>
+const isEnableBgTransparent = $computed(
+	() => props.transparentBg && type === "popup"
+);
+let transitionName = $computed(() =>
 	defaultStore.state.animation
 		? useSendAnime
-			? 'send'
-			: type === 'drawer'
-				? 'modal-drawer'
-				: type === 'popup'
-					? 'modal-popup'
-					: 'modal'
-		: ''
-));
-let transitionDuration = $computed((() =>
-	transitionName === 'send'
+			? "send"
+			: type === "drawer"
+			? "modal-drawer"
+			: type === "popup"
+			? "modal-popup"
+			: "modal"
+		: ""
+);
+let transitionDuration = $computed(() =>
+	transitionName === "send"
 		? 400
-		: transitionName === 'modal-popup'
-			? 100
-			: transitionName === 'modal'
-				? 200
-				: transitionName === 'modal-drawer'
-					? 200
-					: 0
-));
+		: transitionName === "modal-popup"
+		? 100
+		: transitionName === "modal"
+		? 200
+		: transitionName === "modal-drawer"
+		? 200
+		: 0
+);
 
 let contentClicking = false;
 
@@ -114,30 +172,30 @@ function close(opts: { useSendAnimation?: boolean } = {}) {
 	}
 
 	// eslint-disable-next-line vue/no-mutating-props
-	if (props.src) props.src.style.pointerEvents = 'auto';
+	if (props.src) props.src.style.pointerEvents = "auto";
 	showing = false;
-	emit('close');
+	emit("close");
 }
 
 function onBgClick() {
 	if (contentClicking) return;
-	emit('click');
+	emit("click");
 }
 
-if (type === 'drawer') {
+if (type === "drawer") {
 	maxHeight = window.innerHeight / 1.5;
 }
 
 const keymap = {
-	'esc': () => emit('esc'),
+	esc: () => emit("esc"),
 };
 
 const MARGIN = 16;
 
 const align = () => {
 	if (props.src == null) return;
-	if (type === 'drawer') return;
-	if (type === 'dialog') return;
+	if (type === "drawer") return;
+	if (type === "dialog") return;
 
 	if (content == null) return;
 
@@ -152,19 +210,19 @@ const align = () => {
 	const x = srcRect.left + (fixed ? 0 : window.pageXOffset);
 	const y = srcRect.top + (fixed ? 0 : window.pageYOffset);
 
-	if (props.anchor.x === 'center') {
-		left = x + (props.src.offsetWidth / 2) - (width / 2);
-	} else if (props.anchor.x === 'left') {
+	if (props.anchor.x === "center") {
+		left = x + props.src.offsetWidth / 2 - width / 2;
+	} else if (props.anchor.x === "left") {
 		// TODO
-	} else if (props.anchor.x === 'right') {
+	} else if (props.anchor.x === "right") {
 		left = x + props.src.offsetWidth;
 	}
 
-	if (props.anchor.y === 'center') {
-		top = (y - (height / 2));
-	} else if (props.anchor.y === 'top') {
+	if (props.anchor.y === "center") {
+		top = y - height / 2;
+	} else if (props.anchor.y === "top") {
 		// TODO
-	} else if (props.anchor.y === 'bottom') {
+	} else if (props.anchor.y === "bottom") {
 		top = y + props.src.offsetHeight;
 	}
 
@@ -174,20 +232,20 @@ const align = () => {
 			left = window.innerWidth - width;
 		}
 
-		const underSpace = (window.innerHeight - MARGIN) - top;
-		const upperSpace = (srcRect.top - MARGIN);
+		const underSpace = window.innerHeight - MARGIN - top;
+		const upperSpace = srcRect.top - MARGIN;
 
 		// 画面から縦にはみ出る場合
-		if (top + height > (window.innerHeight - MARGIN)) {
-			if (props.noOverlap && props.anchor.x === 'center') {
-				if (underSpace >= (upperSpace / 3)) {
+		if (top + height > window.innerHeight - MARGIN) {
+			if (props.noOverlap && props.anchor.x === "center") {
+				if (underSpace >= upperSpace / 3) {
 					maxHeight = underSpace;
 				} else {
 					maxHeight = upperSpace;
-					top = (upperSpace + MARGIN) - height;
+					top = upperSpace + MARGIN - height;
 				}
 			} else {
-				top = (window.innerHeight - MARGIN) - height;
+				top = window.innerHeight - MARGIN - height;
 			}
 		} else {
 			maxHeight = underSpace;
@@ -198,20 +256,26 @@ const align = () => {
 			left = window.innerWidth - width + window.scrollX - 1;
 		}
 
-		const underSpace = (window.innerHeight - MARGIN) - (top - window.pageYOffset);
-		const upperSpace = (srcRect.top - MARGIN);
+		const underSpace =
+			window.innerHeight - MARGIN - (top - window.pageYOffset);
+		const upperSpace = srcRect.top - MARGIN;
 
 		// 画面から縦にはみ出る場合
-		if (top + height - window.scrollY > (window.innerHeight - MARGIN)) {
-			if (props.noOverlap && props.anchor.x === 'center') {
-				if (underSpace >= (upperSpace / 3)) {
+		if (top + height - window.scrollY > window.innerHeight - MARGIN) {
+			if (props.noOverlap && props.anchor.x === "center") {
+				if (underSpace >= upperSpace / 3) {
 					maxHeight = underSpace;
 				} else {
 					maxHeight = upperSpace;
-					top = window.scrollY + ((upperSpace + MARGIN) - height);
+					top = window.scrollY + (upperSpace + MARGIN - height);
 				}
 			} else {
-				top = (window.innerHeight - MARGIN) - height + window.pageYOffset - 1;
+				top =
+					window.innerHeight -
+					MARGIN -
+					height +
+					window.pageYOffset -
+					1;
 			}
 		} else {
 			maxHeight = underSpace;
@@ -226,55 +290,76 @@ const align = () => {
 		left = 0;
 	}
 
-	let transformOriginX = 'center';
-	let transformOriginY = 'center';
+	let transformOriginX = "center";
+	let transformOriginY = "center";
 
-	if (top >= srcRect.top + props.src.offsetHeight + (fixed ? 0 : window.pageYOffset)) {
-		transformOriginY = 'top';
-	} else if ((top + height) <= srcRect.top + (fixed ? 0 : window.pageYOffset)) {
-		transformOriginY = 'bottom';
+	if (
+		top >=
+		srcRect.top + props.src.offsetHeight + (fixed ? 0 : window.pageYOffset)
+	) {
+		transformOriginY = "top";
+	} else if (top + height <= srcRect.top + (fixed ? 0 : window.pageYOffset)) {
+		transformOriginY = "bottom";
 	}
 
-	if (left >= srcRect.left + props.src.offsetWidth + (fixed ? 0 : window.pageXOffset)) {
-		transformOriginX = 'left';
-	} else if ((left + width) <= srcRect.left + (fixed ? 0 : window.pageXOffset)) {
-		transformOriginX = 'right';
+	if (
+		left >=
+		srcRect.left + props.src.offsetWidth + (fixed ? 0 : window.pageXOffset)
+	) {
+		transformOriginX = "left";
+	} else if (
+		left + width <=
+		srcRect.left + (fixed ? 0 : window.pageXOffset)
+	) {
+		transformOriginX = "right";
 	}
 
 	transformOrigin = `${transformOriginX} ${transformOriginY}`;
 
-	content.style.left = left + 'px';
-	content.style.top = top + 'px';
+	content.style.left = left + "px";
+	content.style.top = top + "px";
 };
 
 const onOpened = () => {
-	emit('opened');
+	emit("opened");
 
 	// モーダルコンテンツにマウスボタンが押され、コンテンツ外でマウスボタンが離されたときにモーダルバックグラウンドクリックと判定させないためにマウスイベントを監視しフラグ管理する
 	const el = content!.children[0];
-	el.addEventListener('mousedown', ev => {
-		contentClicking = true;
-		window.addEventListener('mouseup', ev => {
-			// click イベントより先に mouseup イベントが発生するかもしれないのでちょっと待つ
-			window.setTimeout(() => {
-				contentClicking = false;
-			}, 100);
-		}, { passive: true, once: true });
-	}, { passive: true });
+	el.addEventListener(
+		"mousedown",
+		(ev) => {
+			contentClicking = true;
+			window.addEventListener(
+				"mouseup",
+				(ev) => {
+					// click イベントより先に mouseup イベントが発生するかもしれないのでちょっと待つ
+					window.setTimeout(() => {
+						contentClicking = false;
+					}, 100);
+				},
+				{ passive: true, once: true }
+			);
+		},
+		{ passive: true }
+	);
 };
 
 onMounted(() => {
-	watch(() => props.src, async () => {
-		if (props.src) {
-			// eslint-disable-next-line vue/no-mutating-props
-			props.src.style.pointerEvents = 'none';
-		}
-		fixed = (type === 'drawer') || (getFixedContainer(props.src) != null);
+	watch(
+		() => props.src,
+		async () => {
+			if (props.src) {
+				// eslint-disable-next-line vue/no-mutating-props
+				props.src.style.pointerEvents = "none";
+			}
+			fixed = type === "drawer" || getFixedContainer(props.src) != null;
 
-		await nextTick();
+			await nextTick();
 
-		align();
-	}, { immediate: true });
+			align();
+		},
+		{ immediate: true }
+	);
 
 	nextTick(() => {
 		new ResizeObserver((entries, observer) => {
@@ -297,7 +382,8 @@ defineExpose({
 
 	> .content {
 		transform: translateY(0px);
-		transition: opacity 0.3s ease-in, transform 0.3s cubic-bezier(.5,-0.5,1,.5) !important;
+		transition: opacity 0.3s ease-in,
+			transform 0.3s cubic-bezier(0.5, -0.5, 1, 0.5) !important;
 	}
 }
 .transition_send_enterFrom,
@@ -346,7 +432,8 @@ defineExpose({
 
 	> .content {
 		transform-origin: var(--transformOrigin);
-		transition: opacity 0.2s cubic-bezier(0, 0, 0.2, 1), transform 0.2s cubic-bezier(0, 0, 0.2, 1) !important;
+		transition: opacity 0.2s cubic-bezier(0, 0, 0.2, 1),
+			transform 0.2s cubic-bezier(0, 0, 0.2, 1) !important;
 	}
 }
 .transition_modal-popup_enterFrom,
@@ -369,7 +456,7 @@ defineExpose({
 	}
 
 	> .content {
-		transition: transform 0.2s cubic-bezier(0,.5,0,1) !important;
+		transition: transform 0.2s cubic-bezier(0, 0.5, 0, 1) !important;
 	}
 }
 .transition_modal-drawer_leaveActive {
@@ -378,7 +465,7 @@ defineExpose({
 	}
 
 	> .content {
-		transition: transform 0.2s cubic-bezier(0,.5,0,1) !important;
+		transition: transform 0.2s cubic-bezier(0, 0.5, 0, 1) !important;
 	}
 }
 .transition_modal-drawer_enterFrom,
@@ -404,15 +491,39 @@ defineExpose({
 			margin: auto;
 			padding: 32px;
 			// TODO: mask-imageはiOSだとやたら重い。なんとかしたい
-			-webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 32px, rgba(0,0,0,1) calc(100% - 32px), rgba(0,0,0,0) 100%);
-			mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 32px, rgba(0,0,0,1) calc(100% - 32px), rgba(0,0,0,0) 100%);
+			-webkit-mask-image: linear-gradient(
+				0deg,
+				rgba(0, 0, 0, 0) 0%,
+				rgba(0, 0, 0, 1) 32px,
+				rgba(0, 0, 0, 1) calc(100% - 32px),
+				rgba(0, 0, 0, 0) 100%
+			);
+			mask-image: linear-gradient(
+				0deg,
+				rgba(0, 0, 0, 0) 0%,
+				rgba(0, 0, 0, 1) 32px,
+				rgba(0, 0, 0, 1) calc(100% - 32px),
+				rgba(0, 0, 0, 0) 100%
+			);
 			overflow: auto;
 			display: flex;
 
 			@media (max-width: 500px) {
 				padding: 16px;
-				-webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 16px, rgba(0,0,0,1) calc(100% - 16px), rgba(0,0,0,0) 100%);
-				mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 16px, rgba(0,0,0,1) calc(100% - 16px), rgba(0,0,0,0) 100%);
+				-webkit-mask-image: linear-gradient(
+					0deg,
+					rgba(0, 0, 0, 0) 0%,
+					rgba(0, 0, 0, 1) 16px,
+					rgba(0, 0, 0, 1) calc(100% - 16px),
+					rgba(0, 0, 0, 0) 100%
+				);
+				mask-image: linear-gradient(
+					0deg,
+					rgba(0, 0, 0, 0) 0%,
+					rgba(0, 0, 0, 1) 16px,
+					rgba(0, 0, 0, 1) calc(100% - 16px),
+					rgba(0, 0, 0, 0) 100%
+				);
 			}
 
 			> ::v-deep(*) {
@@ -424,7 +535,6 @@ defineExpose({
 					margin-top: 0;
 				}
 			}
-
 		}
 	}
 
diff --git a/packages/client/src/components/MkModalPageWindow.vue b/packages/client/src/components/MkModalPageWindow.vue
index 7d2a0e5696..3611284641 100644
--- a/packages/client/src/components/MkModalPageWindow.vue
+++ b/packages/client/src/components/MkModalPageWindow.vue
@@ -1,51 +1,80 @@
 <template>
-<MkModal ref="modal" @click="$emit('click')" @closed="$emit('closed')">
-	<div ref="rootEl" class="hrmcaedk _narrow_" :style="{ width: `${width}px`, height: (height ? `min(${height}px, 100%)` : '100%') }">
-		<div class="header" @contextmenu="onContextmenu">
-			<button v-if="history.length > 0" v-tooltip="i18n.ts.goBack" class="_button" @click="back()"><i class="ph-caret-left ph-bold ph-lg"></i></button>
-			<span v-else style="display: inline-block; width: 20px"></span>
-			<span v-if="pageMetadata?.value" class="title">
-				<i v-if="pageMetadata?.value.icon" class="icon" :class="pageMetadata?.value.icon"></i>
-				<span>{{ pageMetadata?.value.title }}</span>
-			</span>
-			<button class="_button" @click="$refs.modal.close()"><i class="ph-x ph-bold ph-lg"></i></button>
+	<MkModal ref="modal" @click="$emit('click')" @closed="$emit('closed')">
+		<div
+			ref="rootEl"
+			class="hrmcaedk _narrow_"
+			:style="{
+				width: `${width}px`,
+				height: height ? `min(${height}px, 100%)` : '100%',
+			}"
+		>
+			<div class="header" @contextmenu="onContextmenu">
+				<button
+					v-if="history.length > 0"
+					v-tooltip="i18n.ts.goBack"
+					class="_button"
+					@click="back()"
+				>
+					<i class="ph-caret-left ph-bold ph-lg"></i>
+				</button>
+				<span v-else style="display: inline-block; width: 20px"></span>
+				<span v-if="pageMetadata?.value" class="title">
+					<i
+						v-if="pageMetadata?.value.icon"
+						class="icon"
+						:class="pageMetadata?.value.icon"
+					></i>
+					<span>{{ pageMetadata?.value.title }}</span>
+				</span>
+				<button class="_button" @click="$refs.modal.close()">
+					<i class="ph-x ph-bold ph-lg"></i>
+				</button>
+			</div>
+			<div class="body">
+				<MkStickyContainer>
+					<template #header
+						><MkPageHeader
+							v-if="
+								pageMetadata?.value &&
+								!pageMetadata?.value.hideHeader
+							"
+							:info="pageMetadata?.value"
+					/></template>
+					<RouterView :router="router" />
+				</MkStickyContainer>
+			</div>
 		</div>
-		<div class="body">
-			<MkStickyContainer>
-				<template #header><MkPageHeader v-if="pageMetadata?.value && !pageMetadata?.value.hideHeader" :info="pageMetadata?.value"/></template>
-				<RouterView :router="router"/>
-			</MkStickyContainer>
-		</div>
-	</div>
-</MkModal>
+	</MkModal>
 </template>
 
 <script lang="ts" setup>
-import { ComputedRef, provide } from 'vue';
-import MkModal from '@/components/MkModal.vue';
-import { popout as _popout } from '@/scripts/popout';
-import copyToClipboard from '@/scripts/copy-to-clipboard';
-import { url } from '@/config';
-import * as os from '@/os';
-import { mainRouter, routes } from '@/router';
-import { i18n } from '@/i18n';
-import { PageMetadata, provideMetadataReceiver, setPageMetadata } from '@/scripts/page-metadata';
-import { Router } from '@/nirax';
+import { ComputedRef, provide } from "vue";
+import MkModal from "@/components/MkModal.vue";
+import { popout as _popout } from "@/scripts/popout";
+import copyToClipboard from "@/scripts/copy-to-clipboard";
+import { url } from "@/config";
+import * as os from "@/os";
+import { mainRouter, routes } from "@/router";
+import { i18n } from "@/i18n";
+import {
+	PageMetadata,
+	provideMetadataReceiver,
+	setPageMetadata,
+} from "@/scripts/page-metadata";
+import { Router } from "@/nirax";
 
 const props = defineProps<{
 	initialPath: string;
 }>();
 
 defineEmits<{
-	(ev: 'closed'): void;
-	(ev: 'click'): void;
+	(ev: "closed"): void;
+	(ev: "click"): void;
 }>();
 
 const router = new Router(routes, props.initialPath);
 
-router.addListener('push', ctx => {
-
-});
+router.addListener("push", (ctx) => {});
 
 let pageMetadata = $ref<null | ComputedRef<PageMetadata>>();
 let rootEl = $ref();
@@ -55,40 +84,47 @@ let width = $ref(860);
 let height = $ref(660);
 const history = [];
 
-provide('router', router);
+provide("router", router);
 provideMetadataReceiver((info) => {
 	pageMetadata = info;
 });
-provide('shouldOmitHeaderTitle', true);
-provide('shouldHeaderThin', true);
+provide("shouldOmitHeaderTitle", true);
+provide("shouldHeaderThin", true);
 
 const pageUrl = $computed(() => url + path);
 const contextmenu = $computed(() => {
-	return [{
-		type: 'label',
-		text: path,
-	}, {
-		icon: 'ph-arrows-out-simple ph-bold ph-lg',
-		text: i18n.ts.showInPage,
-		action: expand,
-	}, {
-		icon: 'ph-arrow-square-out ph-bold ph-lg',
-		text: i18n.ts.popout,
-		action: popout,
-	}, null, {
-		icon: 'ph-arrow-square-out ph-bold ph-lg',
-		text: i18n.ts.openInNewTab,
-		action: () => {
-			window.open(pageUrl, '_blank');
-			modal.close();
+	return [
+		{
+			type: "label",
+			text: path,
 		},
-	}, {
-		icon: 'ph-link-simple ph-bold ph-lg',
-		text: i18n.ts.copyLink,
-		action: () => {
-			copyToClipboard(pageUrl);
+		{
+			icon: "ph-arrows-out-simple ph-bold ph-lg",
+			text: i18n.ts.showInPage,
+			action: expand,
 		},
-	}];
+		{
+			icon: "ph-arrow-square-out ph-bold ph-lg",
+			text: i18n.ts.popout,
+			action: popout,
+		},
+		null,
+		{
+			icon: "ph-arrow-square-out ph-bold ph-lg",
+			text: i18n.ts.openInNewTab,
+			action: () => {
+				window.open(pageUrl, "_blank");
+				modal.close();
+			},
+		},
+		{
+			icon: "ph-link-simple ph-bold ph-lg",
+			text: i18n.ts.copyLink,
+			action: () => {
+				copyToClipboard(pageUrl);
+			},
+		},
+	];
 });
 
 function navigate(path, record = true) {
diff --git a/packages/client/src/components/MkModalWindow.vue b/packages/client/src/components/MkModalWindow.vue
index 1d10eba775..3afcff6cb5 100644
--- a/packages/client/src/components/MkModalWindow.vue
+++ b/packages/client/src/components/MkModalWindow.vue
@@ -1,13 +1,51 @@
 <template>
-	<MkModal ref="modal" :prefer-type="'dialog'" @click="onBgClick" @closed="$emit('closed')">
-		<div ref="rootEl" class="ebkgoccj" :style="{ width: `${width}px`, height: scroll ? (height ? `${height}px` : null) : (height ? `min(${height}px, 100%)` : '100%') }" @keydown="onKeydown">
+	<MkModal
+		ref="modal"
+		:prefer-type="'dialog'"
+		@click="onBgClick"
+		@closed="$emit('closed')"
+	>
+		<div
+			ref="rootEl"
+			class="ebkgoccj"
+			:style="{
+				width: `${width}px`,
+				height: scroll
+					? height
+						? `${height}px`
+						: null
+					: height
+					? `min(${height}px, 100%)`
+					: '100%',
+			}"
+			@keydown="onKeydown"
+		>
 			<div ref="headerEl" class="header">
-				<button v-if="withOkButton" class="_button" @click="$emit('close')"><i class="ph-x ph-bold ph-lg"></i></button>
+				<button
+					v-if="withOkButton"
+					class="_button"
+					@click="$emit('close')"
+				>
+					<i class="ph-x ph-bold ph-lg"></i>
+				</button>
 				<span class="title">
 					<slot name="header"></slot>
 				</span>
-				<button v-if="!withOkButton" class="_button" @click="$emit('close')"><i class="ph-x ph-bold ph-lg"></i></button>
-				<button v-if="withOkButton" class="_button" :disabled="okButtonDisabled" @click="$emit('ok')"><i class="ph-check ph-bold ph-lg"></i></button>
+				<button
+					v-if="!withOkButton"
+					class="_button"
+					@click="$emit('close')"
+				>
+					<i class="ph-x ph-bold ph-lg"></i>
+				</button>
+				<button
+					v-if="withOkButton"
+					class="_button"
+					:disabled="okButtonDisabled"
+					@click="$emit('ok')"
+				>
+					<i class="ph-check ph-bold ph-lg"></i>
+				</button>
 			</div>
 			<div class="body">
 				<slot :width="bodyWidth" :height="bodyHeight"></slot>
@@ -17,28 +55,31 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted } from 'vue';
-import MkModal from './MkModal.vue';
+import { onMounted, onUnmounted } from "vue";
+import MkModal from "./MkModal.vue";
 
-const props = withDefaults(defineProps<{
-	withOkButton: boolean;
-	okButtonDisabled: boolean;
-	width: number;
-	height: number | null;
-	scroll: boolean;
-}>(), {
-	withOkButton: false,
-	okButtonDisabled: false,
-	width: 400,
-	height: null,
-	scroll: true,
-});
+const props = withDefaults(
+	defineProps<{
+		withOkButton: boolean;
+		okButtonDisabled: boolean;
+		width: number;
+		height: number | null;
+		scroll: boolean;
+	}>(),
+	{
+		withOkButton: false,
+		okButtonDisabled: false,
+		width: 400,
+		height: null,
+		scroll: true,
+	}
+);
 
 const emit = defineEmits<{
-	(event: 'click'): void;
-	(event: 'close'): void;
-	(event: 'closed'): void;
-	(event: 'ok'): void;
+	(event: "click"): void;
+	(event: "close"): void;
+	(event: "closed"): void;
+	(event: "ok"): void;
 }>();
 
 let modal = $shallowRef<InstanceType<typeof MkModal>>();
@@ -52,11 +93,12 @@ const close = () => {
 };
 
 const onBgClick = () => {
-	emit('click');
+	emit("click");
 };
 
 const onKeydown = (evt) => {
-	if (evt.which === 27) { // Esc
+	if (evt.which === 27) {
+		// Esc
 		evt.preventDefault();
 		evt.stopPropagation();
 		close();
@@ -146,4 +188,3 @@ defineExpose({
 	}
 }
 </style>
-	
\ No newline at end of file
diff --git a/packages/client/src/components/MkMoved.vue b/packages/client/src/components/MkMoved.vue
index d50d49faa7..b2f8095a26 100644
--- a/packages/client/src/components/MkMoved.vue
+++ b/packages/client/src/components/MkMoved.vue
@@ -1,14 +1,17 @@
 <template>
-<div class="msjugskd _block">
-	<i class="ph-airplane-takeoff ph-bold ph-lg" style="margin-right: 8px;"/>
-	{{ i18n.ts.accountMoved }}
-	<MkMention class="link" :username="acct" :host="host"/>
-</div>
+	<div class="msjugskd _block">
+		<i
+			class="ph-airplane-takeoff ph-bold ph-lg"
+			style="margin-right: 8px"
+		/>
+		{{ i18n.ts.accountMoved }}
+		<MkMention class="link" :username="acct" :host="host" />
+	</div>
 </template>
 
 <script lang="ts" setup>
-import MkMention from './MkMention.vue';
-import { i18n } from '@/i18n';
+import MkMention from "./MkMention.vue";
+import { i18n } from "@/i18n";
 
 defineProps<{
 	acct: string;
diff --git a/packages/client/src/components/MkNote.vue b/packages/client/src/components/MkNote.vue
index 79dcef6e4a..658e799b8e 100644
--- a/packages/client/src/components/MkNote.vue
+++ b/packages/client/src/components/MkNote.vue
@@ -1,147 +1,286 @@
 <template>
-<div
-	v-if="!muted.muted"
-	v-show="!isDeleted"
-	ref="el"
-	v-hotkey="keymap"
-	v-size="{ max: [500, 450, 350, 300] }"
-	class="tkcbzcuz"
-	:tabindex="!isDeleted ? '-1' : null"
-	:class="{ renote: isRenote }"
->
-	<MkNoteSub v-if="appearNote.reply" :note="appearNote.reply" class="reply-to"/>
-	<div class="note-context" @click="noteClick">
-		<div class="line"></div>
-		<div v-if="appearNote._prId_" class="info"><i class="ph-megaphone-simple-bold ph-lg"></i> {{ i18n.ts.promotion }}<button class="_textButton hide" @click.stop="readPromo()">{{ i18n.ts.hideThisNote }} <i class="ph-x ph-bold ph-lg"></i></button></div>
-		<div v-if="appearNote._featuredId_" class="info"><i class="ph-lightning ph-bold ph-lg"></i> {{ i18n.ts.featured }}</div>
-		<div v-if="pinned" class="info"><i class="ph-push-pin ph-bold ph-lg"></i>{{ i18n.ts.pinnedNote }}</div>
-		<div v-if="isRenote" class="renote">
-			<i class="ph-repeat ph-bold ph-lg"></i>
-			<I18n :src="i18n.ts.renotedBy" tag="span">
-				<template #user>
-					<MkA v-user-preview="note.userId" class="name" :to="userPage(note.user)" @click.stop>
-						<MkUserName :user="note.user"/>
-					</MkA>
-				</template>
-			</I18n>
-			<div class="info">
-				<button ref="renoteTime" class="_button time" @click.stop="showRenoteMenu()">
-					<i v-if="isMyRenote" class="ph-dots-three-outline ph-bold ph-lg dropdownIcon"></i>
-					<MkTime :time="note.createdAt"/>
+	<div
+		v-if="!muted.muted"
+		v-show="!isDeleted"
+		ref="el"
+		v-hotkey="keymap"
+		v-size="{ max: [500, 450, 350, 300] }"
+		class="tkcbzcuz"
+		:tabindex="!isDeleted ? '-1' : null"
+		:class="{ renote: isRenote }"
+	>
+		<MkNoteSub
+			v-if="appearNote.reply"
+			:note="appearNote.reply"
+			class="reply-to"
+		/>
+		<div class="note-context" @click="noteClick">
+			<div class="line"></div>
+			<div v-if="appearNote._prId_" class="info">
+				<i class="ph-megaphone-simple-bold ph-lg"></i>
+				{{ i18n.ts.promotion
+				}}<button class="_textButton hide" @click.stop="readPromo()">
+					{{ i18n.ts.hideThisNote }}
+					<i class="ph-x ph-bold ph-lg"></i>
 				</button>
-				<MkVisibility :note="note"/>
+			</div>
+			<div v-if="appearNote._featuredId_" class="info">
+				<i class="ph-lightning ph-bold ph-lg"></i>
+				{{ i18n.ts.featured }}
+			</div>
+			<div v-if="pinned" class="info">
+				<i class="ph-push-pin ph-bold ph-lg"></i
+				>{{ i18n.ts.pinnedNote }}
+			</div>
+			<div v-if="isRenote" class="renote">
+				<i class="ph-repeat ph-bold ph-lg"></i>
+				<I18n :src="i18n.ts.renotedBy" tag="span">
+					<template #user>
+						<MkA
+							v-user-preview="note.userId"
+							class="name"
+							:to="userPage(note.user)"
+							@click.stop
+						>
+							<MkUserName :user="note.user" />
+						</MkA>
+					</template>
+				</I18n>
+				<div class="info">
+					<button
+						ref="renoteTime"
+						class="_button time"
+						@click.stop="showRenoteMenu()"
+					>
+						<i
+							v-if="isMyRenote"
+							class="ph-dots-three-outline ph-bold ph-lg dropdownIcon"
+						></i>
+						<MkTime :time="note.createdAt" />
+					</button>
+					<MkVisibility :note="note" />
+				</div>
 			</div>
 		</div>
-	</div>
-	<article class="article" @contextmenu.stop="onContextmenu" @click="noteClick">
-		<div class="main">
-			<div class="header-container">
-				<MkAvatar class="avatar" :user="appearNote.user"/>
-				<XNoteHeader class="header" :note="appearNote" :mini="true"/>
-			</div>
-			<div class="body">
-				<p v-if="appearNote.cw != null" class="cw">
-					<Mfm v-if="appearNote.cw != ''" class="text" :text="appearNote.cw" :author="appearNote.user" :custom-emojis="appearNote.emojis" :i="$i"/>
-					<br/>
-					<XCwButton v-model="showContent" :note="appearNote"/>
-				</p>
-				<div v-show="appearNote.cw == null || showContent" class="content" :class="{ collapsed, isLong }">
-					<div class="text">
-						<Mfm v-if="appearNote.text" :text="appearNote.text" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
-						<!-- <a v-if="appearNote.renote != null" class="rp">RN:</a> -->
-						<div v-if="translating || translation" class="translation">
-							<MkLoading v-if="translating" mini/>
-							<div v-else class="translated">
-								<b>{{ i18n.t('translatedFrom', { x: translation.sourceLang }) }}: </b>
-								<Mfm :text="translation.text" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
+		<article
+			class="article"
+			@contextmenu.stop="onContextmenu"
+			@click="noteClick"
+		>
+			<div class="main">
+				<div class="header-container">
+					<MkAvatar class="avatar" :user="appearNote.user" />
+					<XNoteHeader
+						class="header"
+						:note="appearNote"
+						:mini="true"
+					/>
+				</div>
+				<div class="body">
+					<p v-if="appearNote.cw != null" class="cw">
+						<Mfm
+							v-if="appearNote.cw != ''"
+							class="text"
+							:text="appearNote.cw"
+							:author="appearNote.user"
+							:custom-emojis="appearNote.emojis"
+							:i="$i"
+						/>
+						<br />
+						<XCwButton v-model="showContent" :note="appearNote" />
+					</p>
+					<div
+						v-show="appearNote.cw == null || showContent"
+						class="content"
+						:class="{ collapsed, isLong }"
+					>
+						<div class="text">
+							<Mfm
+								v-if="appearNote.text"
+								:text="appearNote.text"
+								:author="appearNote.user"
+								:i="$i"
+								:custom-emojis="appearNote.emojis"
+							/>
+							<!-- <a v-if="appearNote.renote != null" class="rp">RN:</a> -->
+							<div
+								v-if="translating || translation"
+								class="translation"
+							>
+								<MkLoading v-if="translating" mini />
+								<div v-else class="translated">
+									<b
+										>{{
+											i18n.t("translatedFrom", {
+												x: translation.sourceLang,
+											})
+										}}:
+									</b>
+									<Mfm
+										:text="translation.text"
+										:author="appearNote.user"
+										:i="$i"
+										:custom-emojis="appearNote.emojis"
+									/>
+								</div>
 							</div>
 						</div>
+						<div v-if="appearNote.files.length > 0" class="files">
+							<XMediaList :media-list="appearNote.files" />
+						</div>
+						<XPoll
+							v-if="appearNote.poll"
+							ref="pollViewer"
+							:note="appearNote"
+							class="poll"
+						/>
+						<MkUrlPreview
+							v-for="url in urls"
+							:key="url"
+							:url="url"
+							:compact="true"
+							:detail="false"
+							class="url-preview"
+						/>
+						<div v-if="appearNote.renote" class="renote">
+							<XNoteSimple
+								:note="appearNote.renote"
+								@click.stop="
+									router.push(notePage(appearNote.renote))
+								"
+							/>
+						</div>
+						<button
+							v-if="isLong && collapsed"
+							class="fade _button"
+							@click.stop="collapsed = false"
+						>
+							<span>{{ i18n.ts.showMore }}</span>
+						</button>
+						<button
+							v-else-if="isLong && !collapsed"
+							class="showLess _button"
+							@click.stop="collapsed = true"
+						>
+							<span>{{ i18n.ts.showLess }}</span>
+						</button>
 					</div>
-					<div v-if="appearNote.files.length > 0" class="files">
-						<XMediaList :media-list="appearNote.files"/>
-					</div>
-					<XPoll v-if="appearNote.poll" ref="pollViewer" :note="appearNote" class="poll"/>
-					<MkUrlPreview v-for="url in urls" :key="url" :url="url" :compact="true" :detail="false" class="url-preview"/>
-					<div v-if="appearNote.renote" class="renote"><XNoteSimple :note="appearNote.renote" @click.stop="router.push(notePage(appearNote.renote))"/></div>
-					<button v-if="isLong && collapsed" class="fade _button" @click.stop="collapsed = false">
-						<span>{{ i18n.ts.showMore }}</span>
-					</button>
-					<button v-else-if="isLong && !collapsed" class="showLess _button" @click.stop="collapsed = true">
-						<span>{{ i18n.ts.showLess }}</span>
-					</button>
+					<MkA
+						v-if="appearNote.channel && !inChannel"
+						class="channel"
+						:to="`/channels/${appearNote.channel.id}`"
+						@click.stop
+						><i class="ph-television ph-bold ph-lg"></i>
+						{{ appearNote.channel.name }}</MkA
+					>
 				</div>
-				<MkA v-if="appearNote.channel && !inChannel" class="channel" :to="`/channels/${appearNote.channel.id}`" @click.stop><i class="ph-television ph-bold ph-lg"></i> {{ appearNote.channel.name }}</MkA>
+				<footer ref="el" class="footer" @click.stop>
+					<XReactionsViewer
+						ref="reactionsViewer"
+						:note="appearNote"
+					/>
+					<button
+						v-tooltip.noDelay.bottom="i18n.ts.reply"
+						class="button _button"
+						@click="reply()"
+					>
+						<i class="ph-arrow-u-up-left ph-bold ph-lg"></i>
+						<template v-if="appearNote.repliesCount > 0">
+							<p class="count">{{ appearNote.repliesCount }}</p>
+						</template>
+					</button>
+					<XRenoteButton
+						ref="renoteButton"
+						class="button"
+						:note="appearNote"
+						:count="appearNote.renoteCount"
+					/>
+					<XStarButton
+						v-if="appearNote.myReaction == null"
+						ref="starButton"
+						class="button"
+						:note="appearNote"
+					/>
+					<button
+						v-if="appearNote.myReaction == null"
+						ref="reactButton"
+						v-tooltip.noDelay.bottom="i18n.ts.reaction"
+						class="button _button"
+						@click="react()"
+					>
+						<i class="ph-smiley ph-bold ph-lg"></i>
+					</button>
+					<button
+						v-if="appearNote.myReaction != null"
+						ref="reactButton"
+						class="button _button reacted"
+						@click="undoReact(appearNote)"
+					>
+						<i class="ph-minus ph-bold ph-lg"></i>
+					</button>
+					<XQuoteButton class="button" :note="appearNote" />
+					<button
+						ref="menuButton"
+						v-tooltip.noDelay.bottom="i18n.ts.more"
+						class="button _button"
+						@click="menu()"
+					>
+						<i class="ph-dots-three-outline ph-bold ph-lg"></i>
+					</button>
+				</footer>
 			</div>
-			<footer ref="el" class="footer" @click.stop>
-				<XReactionsViewer ref="reactionsViewer" :note="appearNote"/>
-				<button v-tooltip.noDelay.bottom="i18n.ts.reply" class="button _button" @click="reply()">
-					<i class="ph-arrow-u-up-left ph-bold ph-lg"></i>
-					<template v-if="appearNote.repliesCount > 0">
-						<p class="count">{{ appearNote.repliesCount }}</p>
-					</template>
-				</button>
-				<XRenoteButton ref="renoteButton" class="button" :note="appearNote" :count="appearNote.renoteCount"/>
-				<XStarButton v-if="appearNote.myReaction == null" ref="starButton" class="button" :note="appearNote"/>
-				<button v-if="appearNote.myReaction == null" ref="reactButton" v-tooltip.noDelay.bottom="i18n.ts.reaction" class="button _button" @click="react()">
-					<i class="ph-smiley ph-bold ph-lg"></i>
-				</button>
-				<button v-if="appearNote.myReaction != null" ref="reactButton" class="button _button reacted" @click="undoReact(appearNote)">
-					<i class="ph-minus ph-bold ph-lg"></i>
-				</button>
-				<XQuoteButton class="button" :note="appearNote"/>
-				<button ref="menuButton" v-tooltip.noDelay.bottom="i18n.ts.more" class="button _button" @click="menu()">
-					<i class="ph-dots-three-outline ph-bold ph-lg"></i>
-				</button>
-			</footer>
-		</div>
-	</article>
-</div>
-<div v-else class="muted" @click="muted.muted = false">
-	<I18n :src="i18n.ts.userSaysSomethingReason" tag="small">
-		<template #name>
-			<MkA v-user-preview="appearNote.userId" class="name" :to="userPage(appearNote.user)">
-				<MkUserName :user="appearNote.user"/>
-			</MkA>
-		</template>
-		<template #reason>
-			<b class="_blur_text">{{ muted.matched.join(", ") }}</b>
-		</template>
-	</I18n>
-</div>
+		</article>
+	</div>
+	<div v-else class="muted" @click="muted.muted = false">
+		<I18n :src="i18n.ts.userSaysSomethingReason" tag="small">
+			<template #name>
+				<MkA
+					v-user-preview="appearNote.userId"
+					class="name"
+					:to="userPage(appearNote.user)"
+				>
+					<MkUserName :user="appearNote.user" />
+				</MkA>
+			</template>
+			<template #reason>
+				<b class="_blur_text">{{ muted.matched.join(", ") }}</b>
+			</template>
+		</I18n>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, onMounted, onUnmounted, reactive, ref } from 'vue';
-import * as mfm from 'mfm-js';
-import type { Ref } from 'vue';
-import type * as misskey from 'calckey-js';
-import MkNoteSub from '@/components/MkNoteSub.vue';
-import XNoteHeader from '@/components/MkNoteHeader.vue';
-import XNoteSimple from '@/components/MkNoteSimple.vue';
-import XMediaList from '@/components/MkMediaList.vue';
-import XCwButton from '@/components/MkCwButton.vue';
-import XPoll from '@/components/MkPoll.vue';
-import XRenoteButton from '@/components/MkRenoteButton.vue';
-import XReactionsViewer from '@/components/MkReactionsViewer.vue';
-import XStarButton from '@/components/MkStarButton.vue';
-import XQuoteButton from '@/components/MkQuoteButton.vue';
-import MkUrlPreview from '@/components/MkUrlPreview.vue';
-import MkVisibility from '@/components/MkVisibility.vue';
-import { pleaseLogin } from '@/scripts/please-login';
-import { focusPrev, focusNext } from '@/scripts/focus';
-import { getWordMute } from '@/scripts/check-word-mute';
-import { useRouter } from '@/router';
-import { userPage } from '@/filters/user';
-import * as os from '@/os';
-import { defaultStore, noteViewInterruptors } from '@/store';
-import { reactionPicker } from '@/scripts/reaction-picker';
-import { extractUrlFromMfm } from '@/scripts/extract-url-from-mfm';
-import { $i } from '@/account';
-import { i18n } from '@/i18n';
-import { getNoteMenu } from '@/scripts/get-note-menu';
-import { useNoteCapture } from '@/scripts/use-note-capture';
-import { notePage } from '@/filters/note';
-import { deepClone } from '@/scripts/clone';
+import { computed, inject, onMounted, onUnmounted, reactive, ref } from "vue";
+import * as mfm from "mfm-js";
+import type { Ref } from "vue";
+import type * as misskey from "calckey-js";
+import MkNoteSub from "@/components/MkNoteSub.vue";
+import XNoteHeader from "@/components/MkNoteHeader.vue";
+import XNoteSimple from "@/components/MkNoteSimple.vue";
+import XMediaList from "@/components/MkMediaList.vue";
+import XCwButton from "@/components/MkCwButton.vue";
+import XPoll from "@/components/MkPoll.vue";
+import XRenoteButton from "@/components/MkRenoteButton.vue";
+import XReactionsViewer from "@/components/MkReactionsViewer.vue";
+import XStarButton from "@/components/MkStarButton.vue";
+import XQuoteButton from "@/components/MkQuoteButton.vue";
+import MkUrlPreview from "@/components/MkUrlPreview.vue";
+import MkVisibility from "@/components/MkVisibility.vue";
+import { pleaseLogin } from "@/scripts/please-login";
+import { focusPrev, focusNext } from "@/scripts/focus";
+import { getWordMute } from "@/scripts/check-word-mute";
+import { useRouter } from "@/router";
+import { userPage } from "@/filters/user";
+import * as os from "@/os";
+import { defaultStore, noteViewInterruptors } from "@/store";
+import { reactionPicker } from "@/scripts/reaction-picker";
+import { extractUrlFromMfm } from "@/scripts/extract-url-from-mfm";
+import { $i } from "@/account";
+import { i18n } from "@/i18n";
+import { getNoteMenu } from "@/scripts/get-note-menu";
+import { useNoteCapture } from "@/scripts/use-note-capture";
+import { notePage } from "@/filters/note";
+import { deepClone } from "@/scripts/clone";
 
 const router = useRouter();
 
@@ -150,7 +289,7 @@ const props = defineProps<{
 	pinned?: boolean;
 }>();
 
-const inChannel = inject('inChannel', null);
+const inChannel = inject("inChannel", null);
 
 let note = $ref(deepClone(props.note));
 
@@ -165,12 +304,11 @@ if (noteViewInterruptors.length > 0) {
 	});
 }
 
-const isRenote = (
+const isRenote =
 	note.renote != null &&
 	note.text == null &&
 	note.fileIds.length === 0 &&
-	note.poll == null
-);
+	note.poll == null;
 
 const el = ref<HTMLElement>();
 const menuButton = ref<HTMLElement>();
@@ -178,29 +316,33 @@ const starButton = ref<InstanceType<typeof XStarButton>>();
 const renoteButton = ref<InstanceType<typeof XRenoteButton>>();
 const renoteTime = ref<HTMLElement>();
 const reactButton = ref<HTMLElement>();
-let appearNote = $computed(() => isRenote ? note.renote as misskey.entities.Note : note);
-const isMyRenote = $i && ($i.id === note.userId);
+let appearNote = $computed(() =>
+	isRenote ? (note.renote as misskey.entities.Note) : note
+);
+const isMyRenote = $i && $i.id === note.userId;
 const showContent = ref(false);
-const isLong = (appearNote.cw == null && appearNote.text != null && (
-	(appearNote.text.split('\n').length > 9) ||
-	(appearNote.text.length > 500)
-));
+const isLong =
+	appearNote.cw == null &&
+	appearNote.text != null &&
+	(appearNote.text.split("\n").length > 9 || appearNote.text.length > 500);
 const collapsed = ref(appearNote.cw == null && isLong);
 const isDeleted = ref(false);
 const muted = ref(getWordMute(appearNote, $i, defaultStore.state.mutedWords));
 const translation = ref(null);
 const translating = ref(false);
-const urls = appearNote.text ? extractUrlFromMfm(mfm.parse(appearNote.text)).slice(0, 5) : null;
+const urls = appearNote.text
+	? extractUrlFromMfm(mfm.parse(appearNote.text)).slice(0, 5)
+	: null;
 
 const keymap = {
-	'r': () => reply(true),
-	'e|a|plus': () => react(true),
-	'q': () => renoteButton.value.renote(true),
-	'up|k|shift+tab': focusBefore,
-	'down|j|tab': focusAfter,
-	'esc': blur,
-	'm|o': () => menu(true),
-	's': () => showContent.value !== showContent.value,
+	r: () => reply(true),
+	"e|a|plus": () => react(true),
+	q: () => renoteButton.value.renote(true),
+	"up|k|shift+tab": focusBefore,
+	"down|j|tab": focusAfter,
+	esc: blur,
+	"m|o": () => menu(true),
+	s: () => showContent.value !== showContent.value,
 };
 
 useNoteCapture({
@@ -211,76 +353,113 @@ useNoteCapture({
 
 function reply(viaKeyboard = false): void {
 	pleaseLogin();
-	os.post({
-		reply: appearNote,
-		animation: !viaKeyboard,
-	}, () => {
-		focus();
-	});
+	os.post(
+		{
+			reply: appearNote,
+			animation: !viaKeyboard,
+		},
+		() => {
+			focus();
+		}
+	);
 }
 
 function react(viaKeyboard = false): void {
 	pleaseLogin();
 	blur();
-	reactionPicker.show(reactButton.value, reaction => {
-		os.api('notes/reactions/create', {
-			noteId: appearNote.id,
-			reaction: reaction,
-		});
-	}, () => {
-		focus();
-	});
+	reactionPicker.show(
+		reactButton.value,
+		(reaction) => {
+			os.api("notes/reactions/create", {
+				noteId: appearNote.id,
+				reaction: reaction,
+			});
+		},
+		() => {
+			focus();
+		}
+	);
 }
 
 function undoReact(note): void {
 	const oldReaction = note.myReaction;
 	if (!oldReaction) return;
-	os.api('notes/reactions/delete', {
+	os.api("notes/reactions/delete", {
 		noteId: note.id,
 	});
 }
 
-const currentClipPage = inject<Ref<misskey.entities.Clip> | null>('currentClipPage', null);
+const currentClipPage = inject<Ref<misskey.entities.Clip> | null>(
+	"currentClipPage",
+	null
+);
 
 function onContextmenu(ev: MouseEvent): void {
 	const isLink = (el: HTMLElement) => {
-		if (el.tagName === 'A') return true;
+		if (el.tagName === "A") return true;
 		if (el.parentElement) {
 			return isLink(el.parentElement);
 		}
 	};
 	if (isLink(ev.target)) return;
-	if (window.getSelection().toString() !== '') return;
+	if (window.getSelection().toString() !== "") return;
 
 	if (defaultStore.state.useReactionPickerForContextMenu) {
 		ev.preventDefault();
 		react();
 	} else {
-		os.contextMenu(getNoteMenu({ note: note, translating, translation, menuButton, isDeleted, currentClipPage }), ev).then(focus);
+		os.contextMenu(
+			getNoteMenu({
+				note: note,
+				translating,
+				translation,
+				menuButton,
+				isDeleted,
+				currentClipPage,
+			}),
+			ev
+		).then(focus);
 	}
 }
 
 function menu(viaKeyboard = false): void {
-	os.popupMenu(getNoteMenu({ note: note, translating, translation, menuButton, isDeleted, currentClipPage }), menuButton.value, {
-		viaKeyboard,
-	}).then(focus);
+	os.popupMenu(
+		getNoteMenu({
+			note: note,
+			translating,
+			translation,
+			menuButton,
+			isDeleted,
+			currentClipPage,
+		}),
+		menuButton.value,
+		{
+			viaKeyboard,
+		}
+	).then(focus);
 }
 
 function showRenoteMenu(viaKeyboard = false): void {
 	if (!isMyRenote) return;
-	os.popupMenu([{
-		text: i18n.ts.unrenote,
-		icon: 'ph-trash ph-bold ph-lg',
-		danger: true,
-		action: () => {
-			os.api('notes/delete', {
-				noteId: note.id,
-			});
-			isDeleted.value = true;
-		},
-	}], renoteTime.value, {
-		viaKeyboard: viaKeyboard,
-	});
+	os.popupMenu(
+		[
+			{
+				text: i18n.ts.unrenote,
+				icon: "ph-trash ph-bold ph-lg",
+				danger: true,
+				action: () => {
+					os.api("notes/delete", {
+						noteId: note.id,
+					});
+					isDeleted.value = true;
+				},
+			},
+		],
+		renoteTime.value,
+		{
+			viaKeyboard: viaKeyboard,
+		}
+	);
 }
 
 function focus() {
@@ -300,15 +479,15 @@ function focusAfter() {
 }
 
 function noteClick(e) {
-	if (document.getSelection().type === 'Range') {
+	if (document.getSelection().type === "Range") {
 		e.stopPropagation();
 	} else {
-		router.push(notePage(appearNote))
+		router.push(notePage(appearNote));
 	}
 }
 
 function readPromo() {
-	os.api('promo/read', {
+	os.api("promo/read", {
 		noteId: appearNote.id,
 	});
 	isDeleted.value = true;
@@ -329,7 +508,7 @@ function readPromo() {
 	// 今度はその処理自体がパフォーマンス低下の原因にならないか懸念される。また、被リアクションでも高さは変化するため、やはり多少のズレは生じる
 	// 一度レンダリングされた要素はブラウザがよしなにサイズを覚えておいてくれるような実装になるまで待った方が良さそう(なるのか？)
 	//content-visibility: auto;
-  //contain-intrinsic-size: 0 128px;
+	//contain-intrinsic-size: 0 128px;
 
 	&:focus-visible {
 		outline: none;
@@ -354,13 +533,14 @@ function readPromo() {
 	}
 
 	& > .article > .main {
-		&:hover, &:focus-within {
+		&:hover,
+		&:focus-within {
 			:deep(.footer .button) {
 				opacity: 1;
 			}
 		}
 	}
-	
+
 	> .reply-to {
 		& + .note-context {
 			.line::before {
@@ -393,9 +573,9 @@ function readPromo() {
 			margin-top: 0;
 			flex-grow: 0;
 		}
-		
+
 		> div > i {
-			margin-left: -.5px;
+			margin-left: -0.5px;
 		}
 		> .info {
 			display: flex;
@@ -414,7 +594,6 @@ function readPromo() {
 			}
 		}
 
-
 		> .renote {
 			display: flex;
 			align-items: center;
@@ -431,7 +610,7 @@ function readPromo() {
 				flex-shrink: 1;
 				text-overflow: ellipsis;
 				white-space: nowrap;
-				
+
 				> .name {
 					font-weight: bold;
 				}
@@ -459,7 +638,6 @@ function readPromo() {
 		padding: 4px 32px 10px;
 		cursor: pointer;
 
-
 		@media (pointer: coarse) {
 			cursor: default;
 		}
@@ -486,7 +664,7 @@ function readPromo() {
 			min-width: 0;
 
 			> .body {
-				margin-top: .7em;
+				margin-top: 0.7em;
 
 				> .cw {
 					cursor: default;
@@ -525,8 +703,14 @@ function readPromo() {
 						overflow: hidden;
 						> .text {
 							max-height: 9em;
-							mask: linear-gradient(black calc(100% - 64px), transparent);
-							-webkit-mask: linear-gradient(black calc(100% - 64px), transparent);
+							mask: linear-gradient(
+								black calc(100% - 64px),
+								transparent
+							);
+							-webkit-mask: linear-gradient(
+								black calc(100% - 64px),
+								transparent
+							);
 						}
 						> .fade {
 							display: block;
@@ -576,8 +760,8 @@ function readPromo() {
 					}
 
 					> .files {
-						margin-top: .4em;
-						margin-bottom: .4em;
+						margin-top: 0.4em;
+						margin-bottom: 0.4em;
 					}
 					> .url-preview {
 						margin-top: 8px;
@@ -594,8 +778,9 @@ function readPromo() {
 							padding: 16px;
 							border: solid 1px var(--renote);
 							border-radius: 8px;
-							transition: background .2s;
-							&:hover, &:focus-within {
+							transition: background 0.2s;
+							&:hover,
+							&:focus-within {
 								background-color: var(--panelHighlight);
 							}
 						}
@@ -623,9 +808,9 @@ function readPromo() {
 					width: max-content;
 					min-width: max-content;
 					pointer-events: all;
-					transition: opacity .2s;
+					transition: opacity 0.2s;
 					&:first-of-type {
-						margin-left: -.5em;
+						margin-left: -0.5em;
 					}
 					&:hover {
 						color: var(--fgHighlighted);
@@ -644,7 +829,6 @@ function readPromo() {
 			}
 		}
 	}
-	
 
 	> .reply {
 		border-top: solid 0.5px var(--divider);
@@ -679,8 +863,6 @@ function readPromo() {
 		}
 	}
 
-
-
 	&.max-width_300px {
 		--avatarSize: 40px;
 	}
diff --git a/packages/client/src/components/MkNoteDetailed.vue b/packages/client/src/components/MkNoteDetailed.vue
index 4be07a41fb..0137682b84 100644
--- a/packages/client/src/components/MkNoteDetailed.vue
+++ b/packages/client/src/components/MkNoteDetailed.vue
@@ -1,153 +1,309 @@
 <template>
-<div
-	v-if="!muted.muted"
-	v-show="!isDeleted"
-	ref="el"
-	v-hotkey="keymap"
-	v-size="{ max: [500, 450, 350, 300] }"
-	class="lxwezrsl _block"
-	:tabindex="!isDeleted ? '-1' : null"
-	:class="{ renote: isRenote }"
->
-	<MkNoteSub v-for="note in conversation" :key="note.id" class="reply-to-more" :note="note"/>
-	<MkNoteSub v-if="appearNote.reply" :note="appearNote.reply" class="reply-to"/>
-	<div v-if="isRenote" class="renote">
-		<MkAvatar class="avatar" :user="note.user"/>
-		<i class="ph-repeat ph-bold ph-lg"></i>
-		<I18n :src="i18n.ts.renotedBy" tag="span">
-			<template #user>
-				<MkA v-user-preview="note.userId" class="name" :to="userPage(note.user)">
-					<MkUserName :user="note.user"/>
-				</MkA>
-			</template>
-		</I18n>
-		<div class="info">
-			<button ref="renoteTime" class="_button time" @click="showRenoteMenu()">
-				<i v-if="isMyRenote" class="ph-dots-three-outline ph-bold ph-lg dropdownIcon"></i>
-				<MkTime :time="note.createdAt"/>
-			</button>
-			<MkVisibility :note="note"/>
-		</div>
-	</div>
-	<article ref="noteEl" class="article" @contextmenu.stop="onContextmenu" tabindex="-1">
-		<header class="header">
-			<MkAvatar class="avatar" :user="appearNote.user" :show-indicator="true"/>
-			<div class="body">
-				<div class="top">
-					<MkA v-user-preview="appearNote.user.id" class="name" :to="userPage(appearNote.user)">
-						<MkUserName :user="appearNote.user"/>
+	<div
+		v-if="!muted.muted"
+		v-show="!isDeleted"
+		ref="el"
+		v-hotkey="keymap"
+		v-size="{ max: [500, 450, 350, 300] }"
+		class="lxwezrsl _block"
+		:tabindex="!isDeleted ? '-1' : null"
+		:class="{ renote: isRenote }"
+	>
+		<MkNoteSub
+			v-for="note in conversation"
+			:key="note.id"
+			class="reply-to-more"
+			:note="note"
+		/>
+		<MkNoteSub
+			v-if="appearNote.reply"
+			:note="appearNote.reply"
+			class="reply-to"
+		/>
+		<div v-if="isRenote" class="renote">
+			<MkAvatar class="avatar" :user="note.user" />
+			<i class="ph-repeat ph-bold ph-lg"></i>
+			<I18n :src="i18n.ts.renotedBy" tag="span">
+				<template #user>
+					<MkA
+						v-user-preview="note.userId"
+						class="name"
+						:to="userPage(note.user)"
+					>
+						<MkUserName :user="note.user" />
 					</MkA>
-					<span v-if="appearNote.user.isBot" class="is-bot">bot</span>
-					<div class="info">
-						<MkVisibility :note="appearNote"/>
-					</div>
-				</div>
-				<div class="username"><MkAcct :user="appearNote.user"/></div>
-				<MkInstanceTicker v-if="showTicker" class="ticker" :instance="appearNote.user.instance"/>
+				</template>
+			</I18n>
+			<div class="info">
+				<button
+					ref="renoteTime"
+					class="_button time"
+					@click="showRenoteMenu()"
+				>
+					<i
+						v-if="isMyRenote"
+						class="ph-dots-three-outline ph-bold ph-lg dropdownIcon"
+					></i>
+					<MkTime :time="note.createdAt" />
+				</button>
+				<MkVisibility :note="note" />
 			</div>
-		</header>
-		<div class="main">
-			<div class="body">
-				<div v-if="appearNote.cw != null" class="cw">
-					<Mfm v-if="appearNote.cw != ''" class="text" :text="appearNote.cw" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
-					<br/>
-					<XCwButton v-model="showContent" :note="appearNote"/>
-				</div>
-				<div v-show="appearNote.cw == null || showContent" class="content">
-					<div class="text">
-						<Mfm v-if="appearNote.text" :text="appearNote.text" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
-						<div v-if="translating || translation" class="translation">
-							<MkLoading v-if="translating" mini/>
-							<div v-else class="translated">
-								<b>{{ i18n.t('translatedFrom', { x: translation.sourceLang }) }}: </b>
-								<Mfm :text="translation.text" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
-							</div>
+		</div>
+		<article
+			ref="noteEl"
+			class="article"
+			@contextmenu.stop="onContextmenu"
+			tabindex="-1"
+		>
+			<header class="header">
+				<MkAvatar
+					class="avatar"
+					:user="appearNote.user"
+					:show-indicator="true"
+				/>
+				<div class="body">
+					<div class="top">
+						<MkA
+							v-user-preview="appearNote.user.id"
+							class="name"
+							:to="userPage(appearNote.user)"
+						>
+							<MkUserName :user="appearNote.user" />
+						</MkA>
+						<span v-if="appearNote.user.isBot" class="is-bot"
+							>bot</span
+						>
+						<div class="info">
+							<MkVisibility :note="appearNote" />
 						</div>
 					</div>
-					<div v-if="appearNote.files.length > 0" class="files">
-						<XMediaList :media-list="appearNote.files"/>
+					<div class="username">
+						<MkAcct :user="appearNote.user" />
 					</div>
-					<XPoll v-if="appearNote.poll" ref="pollViewer" :note="appearNote" class="poll"/>
-					<MkUrlPreview v-for="url in urls" :key="url" :url="url" :compact="true" :detail="true" class="url-preview"/>
-					<div v-if="appearNote.renote" class="renote"><XNoteSimple :note="appearNote.renote" @click.stop="router.push(notePage(appearNote.renote))"/></div>
+					<MkInstanceTicker
+						v-if="showTicker"
+						class="ticker"
+						:instance="appearNote.user.instance"
+					/>
 				</div>
-				<MkA v-if="appearNote.channel && !inChannel" class="channel" :to="`/channels/${appearNote.channel.id}`"><i class="ph-television ph-bold ph-lg"></i> {{ appearNote.channel.name }}</MkA>
+			</header>
+			<div class="main">
+				<div class="body">
+					<div v-if="appearNote.cw != null" class="cw">
+						<Mfm
+							v-if="appearNote.cw != ''"
+							class="text"
+							:text="appearNote.cw"
+							:author="appearNote.user"
+							:i="$i"
+							:custom-emojis="appearNote.emojis"
+						/>
+						<br />
+						<XCwButton v-model="showContent" :note="appearNote" />
+					</div>
+					<div
+						v-show="appearNote.cw == null || showContent"
+						class="content"
+					>
+						<div class="text">
+							<Mfm
+								v-if="appearNote.text"
+								:text="appearNote.text"
+								:author="appearNote.user"
+								:i="$i"
+								:custom-emojis="appearNote.emojis"
+							/>
+							<div
+								v-if="translating || translation"
+								class="translation"
+							>
+								<MkLoading v-if="translating" mini />
+								<div v-else class="translated">
+									<b
+										>{{
+											i18n.t("translatedFrom", {
+												x: translation.sourceLang,
+											})
+										}}:
+									</b>
+									<Mfm
+										:text="translation.text"
+										:author="appearNote.user"
+										:i="$i"
+										:custom-emojis="appearNote.emojis"
+									/>
+								</div>
+							</div>
+						</div>
+						<div v-if="appearNote.files.length > 0" class="files">
+							<XMediaList :media-list="appearNote.files" />
+						</div>
+						<XPoll
+							v-if="appearNote.poll"
+							ref="pollViewer"
+							:note="appearNote"
+							class="poll"
+						/>
+						<MkUrlPreview
+							v-for="url in urls"
+							:key="url"
+							:url="url"
+							:compact="true"
+							:detail="true"
+							class="url-preview"
+						/>
+						<div v-if="appearNote.renote" class="renote">
+							<XNoteSimple
+								:note="appearNote.renote"
+								@click.stop="
+									router.push(notePage(appearNote.renote))
+								"
+							/>
+						</div>
+					</div>
+					<MkA
+						v-if="appearNote.channel && !inChannel"
+						class="channel"
+						:to="`/channels/${appearNote.channel.id}`"
+						><i class="ph-television ph-bold ph-lg"></i>
+						{{ appearNote.channel.name }}</MkA
+					>
+				</div>
+				<footer class="footer">
+					<div class="info">
+						<MkA class="created-at" :to="notePage(appearNote)">
+							<MkTime
+								:time="appearNote.createdAt"
+								mode="detail"
+							/>
+						</MkA>
+					</div>
+					<XReactionsViewer
+						ref="reactionsViewer"
+						:note="appearNote"
+					/>
+					<button
+						v-tooltip.noDelay.bottom="i18n.ts.reply"
+						class="button _button"
+						@click="reply()"
+					>
+						<template v-if="appearNote.reply"
+							><i class="ph-arrow-u-up-left ph-bold ph-lg"></i
+						></template>
+						<template v-else
+							><i class="ph-arrow-bend-up-left ph-bold ph-lg"></i
+						></template>
+						<p v-if="appearNote.repliesCount > 0" class="count">
+							{{ appearNote.repliesCount }}
+						</p>
+					</button>
+					<XRenoteButton
+						ref="renoteButton"
+						class="button"
+						:note="appearNote"
+						:count="appearNote.renoteCount"
+					/>
+					<XStarButton
+						v-if="appearNote.myReaction == null"
+						ref="starButton"
+						class="button"
+						:note="appearNote"
+					/>
+					<button
+						v-if="appearNote.myReaction == null"
+						ref="reactButton"
+						v-tooltip.noDelay.bottom="i18n.ts.reaction"
+						class="button _button"
+						@click="react()"
+					>
+						<i class="ph-smiley ph-bold ph-lg"></i>
+					</button>
+					<button
+						v-if="appearNote.myReaction != null"
+						ref="reactButton"
+						class="button _button reacted"
+						@click="undoReact(appearNote)"
+					>
+						<i class="ph-minus ph-bold ph-lg"></i>
+					</button>
+					<XQuoteButton class="button" :note="appearNote" />
+					<button
+						ref="menuButton"
+						v-tooltip.noDelay.bottom="i18n.ts.more"
+						class="button _button"
+						@click="menu()"
+					>
+						<i class="ph-dots-three-outline ph-bold ph-lg"></i>
+					</button>
+				</footer>
 			</div>
-			<footer class="footer">
-				<div class="info">
-					<MkA class="created-at" :to="notePage(appearNote)">
-						<MkTime :time="appearNote.createdAt" mode="detail"/>
-					</MkA>
-				</div>
-				<XReactionsViewer ref="reactionsViewer" :note="appearNote"/>
-				<button v-tooltip.noDelay.bottom="i18n.ts.reply" class="button _button" @click="reply()">
-					<template v-if="appearNote.reply"><i class="ph-arrow-u-up-left ph-bold ph-lg"></i></template>
-					<template v-else><i class="ph-arrow-bend-up-left ph-bold ph-lg"></i></template>
-					<p v-if="appearNote.repliesCount > 0" class="count">{{ appearNote.repliesCount }}</p>
-				</button>
-				<XRenoteButton ref="renoteButton" class="button" :note="appearNote" :count="appearNote.renoteCount"/>
-				<XStarButton v-if="appearNote.myReaction == null" ref="starButton" class="button" :note="appearNote"/>
-				<button v-if="appearNote.myReaction == null" ref="reactButton" v-tooltip.noDelay.bottom="i18n.ts.reaction" class="button _button" @click="react()">
-					<i class="ph-smiley ph-bold ph-lg"></i>
-				</button>
-				<button v-if="appearNote.myReaction != null" ref="reactButton" class="button _button reacted" @click="undoReact(appearNote)">
-					<i class="ph-minus ph-bold ph-lg"></i>
-				</button>
-				<XQuoteButton class="button" :note="appearNote"/>
-				<button ref="menuButton" v-tooltip.noDelay.bottom="i18n.ts.more" class="button _button" @click="menu()">
-					<i class="ph-dots-three-outline ph-bold ph-lg"></i>
-				</button>
-			</footer>
-		</div>
-	</article>
-	<MkNoteSub v-for="note in directReplies" :key="note.id" :note="note" class="reply" :conversation="replies"/>
-</div>
-<div v-else class="_panel muted" @click="muted.muted = false">
-	<I18n :src="i18n.ts.userSaysSomethingReason" tag="small">
-		<template #name>
-			<MkA v-user-preview="appearNote.userId" class="name" :to="userPage(appearNote.user)">
-				<MkUserName :user="appearNote.user"/>
-			</MkA>
-		</template>
-		<template #reason>
-			<b class="_blur_text">{{ muted.matched.join(", ") }}</b>
-		</template>
-	</I18n>
-</div>
+		</article>
+		<MkNoteSub
+			v-for="note in directReplies"
+			:key="note.id"
+			:note="note"
+			class="reply"
+			:conversation="replies"
+		/>
+	</div>
+	<div v-else class="_panel muted" @click="muted.muted = false">
+		<I18n :src="i18n.ts.userSaysSomethingReason" tag="small">
+			<template #name>
+				<MkA
+					v-user-preview="appearNote.userId"
+					class="name"
+					:to="userPage(appearNote.user)"
+				>
+					<MkUserName :user="appearNote.user" />
+				</MkA>
+			</template>
+			<template #reason>
+				<b class="_blur_text">{{ muted.matched.join(", ") }}</b>
+			</template>
+		</I18n>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, onMounted, onUnmounted, onUpdated, reactive, ref } from 'vue';
-import * as mfm from 'mfm-js';
-import type * as misskey from 'calckey-js';
-import MkNoteSub from '@/components/MkNoteSub.vue';
-import XNoteSimple from '@/components/MkNoteSimple.vue';
-import XReactionsViewer from '@/components/MkReactionsViewer.vue';
-import XMediaList from '@/components/MkMediaList.vue';
-import XCwButton from '@/components/MkCwButton.vue';
-import XPoll from '@/components/MkPoll.vue';
-import XStarButton from '@/components/MkStarButton.vue';
-import XRenoteButton from '@/components/MkRenoteButton.vue';
-import XQuoteButton from '@/components/MkQuoteButton.vue';
-import MkUrlPreview from '@/components/MkUrlPreview.vue';
-import MkInstanceTicker from '@/components/MkInstanceTicker.vue';
-import MkVisibility from '@/components/MkVisibility.vue';
-import { pleaseLogin } from '@/scripts/please-login';
-import { getWordMute } from '@/scripts/check-word-mute';
-import { userPage } from '@/filters/user';
-import { notePage } from '@/filters/note';
-import { useRouter } from '@/router';
-import * as os from '@/os';
-import { defaultStore, noteViewInterruptors } from '@/store';
-import { reactionPicker } from '@/scripts/reaction-picker';
-import { extractUrlFromMfm } from '@/scripts/extract-url-from-mfm';
-import { $i } from '@/account';
-import { i18n } from '@/i18n';
-import { getNoteMenu } from '@/scripts/get-note-menu';
-import { useNoteCapture } from '@/scripts/use-note-capture';
-import { deepClone } from '@/scripts/clone';
-import { stream } from '@/stream';
-import { NoteUpdatedEvent } from 'calckey-js/built/streaming.types';
+import {
+	computed,
+	inject,
+	onMounted,
+	onUnmounted,
+	onUpdated,
+	reactive,
+	ref,
+} from "vue";
+import * as mfm from "mfm-js";
+import type * as misskey from "calckey-js";
+import MkNoteSub from "@/components/MkNoteSub.vue";
+import XNoteSimple from "@/components/MkNoteSimple.vue";
+import XReactionsViewer from "@/components/MkReactionsViewer.vue";
+import XMediaList from "@/components/MkMediaList.vue";
+import XCwButton from "@/components/MkCwButton.vue";
+import XPoll from "@/components/MkPoll.vue";
+import XStarButton from "@/components/MkStarButton.vue";
+import XRenoteButton from "@/components/MkRenoteButton.vue";
+import XQuoteButton from "@/components/MkQuoteButton.vue";
+import MkUrlPreview from "@/components/MkUrlPreview.vue";
+import MkInstanceTicker from "@/components/MkInstanceTicker.vue";
+import MkVisibility from "@/components/MkVisibility.vue";
+import { pleaseLogin } from "@/scripts/please-login";
+import { getWordMute } from "@/scripts/check-word-mute";
+import { userPage } from "@/filters/user";
+import { notePage } from "@/filters/note";
+import { useRouter } from "@/router";
+import * as os from "@/os";
+import { defaultStore, noteViewInterruptors } from "@/store";
+import { reactionPicker } from "@/scripts/reaction-picker";
+import { extractUrlFromMfm } from "@/scripts/extract-url-from-mfm";
+import { $i } from "@/account";
+import { i18n } from "@/i18n";
+import { getNoteMenu } from "@/scripts/get-note-menu";
+import { useNoteCapture } from "@/scripts/use-note-capture";
+import { deepClone } from "@/scripts/clone";
+import { stream } from "@/stream";
+import { NoteUpdatedEvent } from "calckey-js/built/streaming.types";
 
 const router = useRouter();
 
@@ -156,7 +312,7 @@ const props = defineProps<{
 	pinned?: boolean;
 }>();
 
-const inChannel = inject('inChannel', null);
+const inChannel = inject("inChannel", null);
 
 let note = $ref(deepClone(props.note));
 
@@ -171,12 +327,11 @@ if (noteViewInterruptors.length > 0) {
 	});
 }
 
-const isRenote = (
+const isRenote =
 	note.renote != null &&
 	note.text == null &&
 	note.fileIds.length === 0 &&
-	note.poll == null
-);
+	note.poll == null;
 
 const el = ref<HTMLElement>();
 const noteEl = $ref();
@@ -185,28 +340,34 @@ const starButton = ref<InstanceType<typeof XStarButton>>();
 const renoteButton = ref<InstanceType<typeof XRenoteButton>>();
 const renoteTime = ref<HTMLElement>();
 const reactButton = ref<HTMLElement>();
-let appearNote = $computed(() => isRenote ? note.renote as misskey.entities.Note : note);
-const isMyRenote = $i && ($i.id === note.userId);
+let appearNote = $computed(() =>
+	isRenote ? (note.renote as misskey.entities.Note) : note
+);
+const isMyRenote = $i && $i.id === note.userId;
 const showContent = ref(false);
 const isDeleted = ref(false);
 const muted = ref(getWordMute(appearNote, $i, defaultStore.state.mutedWords));
 const translation = ref(null);
 const translating = ref(false);
-const urls = appearNote.text ? extractUrlFromMfm(mfm.parse(appearNote.text)).slice(0, 5) : null;
-const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultStore.state.instanceTicker === 'remote' && appearNote.user.instance);
+const urls = appearNote.text
+	? extractUrlFromMfm(mfm.parse(appearNote.text)).slice(0, 5)
+	: null;
+const showTicker =
+	defaultStore.state.instanceTicker === "always" ||
+	(defaultStore.state.instanceTicker === "remote" &&
+		appearNote.user.instance);
 const conversation = ref<misskey.entities.Note[]>([]);
 const replies = ref<misskey.entities.Note[]>([]);
 const directReplies = ref<misskey.entities.Note[]>([]);
 let isScrolling;
 
-
 const keymap = {
-	'r': () => reply(true),
-	'e|a|plus': () => react(true),
-	'q': () => renoteButton.value.renote(true),
-	'esc': blur,
-	'm|o': () => menu(true),
-	's': () => showContent.value !== showContent.value,
+	r: () => reply(true),
+	"e|a|plus": () => react(true),
+	q: () => renoteButton.value.renote(true),
+	esc: blur,
+	"m|o": () => menu(true),
+	s: () => showContent.value !== showContent.value,
 };
 
 useNoteCapture({
@@ -217,74 +378,106 @@ useNoteCapture({
 
 function reply(viaKeyboard = false): void {
 	pleaseLogin();
-	os.post({
-		reply: appearNote,
-		animation: !viaKeyboard,
-	}, () => {
-		focus();
-	});
+	os.post(
+		{
+			reply: appearNote,
+			animation: !viaKeyboard,
+		},
+		() => {
+			focus();
+		}
+	);
 }
 
 function react(viaKeyboard = false): void {
 	pleaseLogin();
 	blur();
-	reactionPicker.show(reactButton.value, reaction => {
-		os.api('notes/reactions/create', {
-			noteId: appearNote.id,
-			reaction: reaction,
-		});
-	}, () => {
-		focus();
-	});
+	reactionPicker.show(
+		reactButton.value,
+		(reaction) => {
+			os.api("notes/reactions/create", {
+				noteId: appearNote.id,
+				reaction: reaction,
+			});
+		},
+		() => {
+			focus();
+		}
+	);
 }
 
 function undoReact(note): void {
 	const oldReaction = note.myReaction;
 	if (!oldReaction) return;
-	os.api('notes/reactions/delete', {
+	os.api("notes/reactions/delete", {
 		noteId: note.id,
 	});
 }
 
 function onContextmenu(ev: MouseEvent): void {
 	const isLink = (el: HTMLElement) => {
-		if (el.tagName === 'A') return true;
+		if (el.tagName === "A") return true;
 		if (el.parentElement) {
 			return isLink(el.parentElement);
 		}
 	};
 	if (isLink(ev.target)) return;
-	if (window.getSelection().toString() !== '') return;
+	if (window.getSelection().toString() !== "") return;
 
 	if (defaultStore.state.useReactionPickerForContextMenu) {
 		ev.preventDefault();
 		react();
 	} else {
-		os.contextMenu(getNoteMenu({ note: note, translating, translation, menuButton, isDeleted }), ev).then(focus);
+		os.contextMenu(
+			getNoteMenu({
+				note: note,
+				translating,
+				translation,
+				menuButton,
+				isDeleted,
+			}),
+			ev
+		).then(focus);
 	}
 }
 
 function menu(viaKeyboard = false): void {
-	os.popupMenu(getNoteMenu({ note: note, translating, translation, menuButton, isDeleted }), menuButton.value, {
-		viaKeyboard,
-	}).then(focus);
+	os.popupMenu(
+		getNoteMenu({
+			note: note,
+			translating,
+			translation,
+			menuButton,
+			isDeleted,
+		}),
+		menuButton.value,
+		{
+			viaKeyboard,
+		}
+	).then(focus);
 }
 
 function showRenoteMenu(viaKeyboard = false): void {
 	if (!isMyRenote) return;
-	os.popupMenu([{
-		text: i18n.ts.unrenote,
-		icon: 'ph-trash ph-bold ph-lg',
-		danger: true,
-		action: () => {
-			os.api('notes/delete', {
-				noteId: note.id,
-			});
-			isDeleted.value = true;
-		},
-	}], renoteTime.value, {
-		viaKeyboard: viaKeyboard,
-	});
+	os.popupMenu(
+		[
+			{
+				text: i18n.ts.unrenote,
+				icon: "ph-trash ph-bold ph-lg",
+				danger: true,
+				action: () => {
+					os.api("notes/delete", {
+						noteId: note.id,
+					});
+					isDeleted.value = true;
+				},
+			},
+		],
+		renoteTime.value,
+		{
+			viaKeyboard: viaKeyboard,
+		}
+	);
 }
 
 function focus() {
@@ -295,20 +488,26 @@ function blur() {
 	noteEl.blur();
 }
 
-os.api('notes/children', {
+os.api("notes/children", {
 	noteId: appearNote.id,
 	limit: 30,
 	depth: 12,
-}).then(res => {
+}).then((res) => {
 	replies.value = res;
-	directReplies.value = res.filter(note => note.replyId === appearNote.id || note.renoteId === appearNote.id).reverse();
+	directReplies.value = res
+		.filter(
+			(note) =>
+				note.replyId === appearNote.id ||
+				note.renoteId === appearNote.id
+		)
+		.reverse();
 });
 
 if (appearNote.replyId) {
-	os.api('notes/conversation', {
+	os.api("notes/conversation", {
 		noteId: appearNote.replyId,
 		limit: 30,
-	}).then(res => {
+	}).then((res) => {
 		conversation.value = res.reverse();
 		focus();
 	});
@@ -316,24 +515,23 @@ if (appearNote.replyId) {
 
 function onNoteReplied(noteData: NoteUpdatedEvent): void {
 	const { type, id, body } = noteData;
-	if (type === 'replied' && id === appearNote.id) {
+	if (type === "replied" && id === appearNote.id) {
 		const { id: createdId } = body;
 
-		os.api('notes/show', {
+		os.api("notes/show", {
 			noteId: createdId,
-		}).then(note => {
+		}).then((note) => {
 			if (note.replyId === appearNote.id) {
 				replies.value.unshift(note);
 				directReplies.value.unshift(note);
 			}
 		});
 	}
-	
 }
 
 document.addEventListener("wheel", () => {
 	isScrolling = true;
-})
+});
 
 onMounted(() => {
 	stream.on("noteUpdated", onNoteReplied);
@@ -343,14 +541,13 @@ onMounted(() => {
 
 onUpdated(() => {
 	if (!isScrolling) {
-		noteEl.scrollIntoView()
+		noteEl.scrollIntoView();
 	}
-})
+});
 
 onUnmounted(() => {
 	stream.off("noteUpdated", onNoteReplied);
 });
-
 </script>
 
 <style lang="scss" scoped>
@@ -558,8 +755,9 @@ onUnmounted(() => {
 							padding: 16px;
 							border: solid 1px var(--renote);
 							border-radius: 8px;
-							transition: background .2s;
-							&:hover, &:focus-within {
+							transition: background 0.2s;
+							&:hover,
+							&:focus-within {
 								background-color: var(--panelHighlight);
 							}
 						}
@@ -617,7 +815,10 @@ onUnmounted(() => {
 	}
 
 	// Hover
-	.reply :deep(.main), .reply-to, .reply-to-more, :deep(.more) {
+	.reply :deep(.main),
+	.reply-to,
+	.reply-to-more,
+	:deep(.more) {
 		position: relative;
 		&::before {
 			content: "";
@@ -627,10 +828,11 @@ onUnmounted(() => {
 			background: var(--panelHighlight);
 			border-radius: var(--radius);
 			opacity: 0;
-			transition: opacity .2s;
+			transition: opacity 0.2s;
 			z-index: -1;
 		}
-		&.reply-to, &.reply-to-more {
+		&.reply-to,
+		&.reply-to-more {
 			&::before {
 				inset: 0px 8px;
 			}
@@ -651,7 +853,8 @@ onUnmounted(() => {
 		&.more::before {
 			inset: 0 !important;
 		}
-		&:hover, &:focus-within {
+		&:hover,
+		&:focus-within {
 			&::before {
 				opacity: 1;
 			}
@@ -667,14 +870,12 @@ onUnmounted(() => {
 		// 	}
 		// }
 	}
-	
 
 	&.max-width_500px {
 		font-size: 0.9em;
 	}
-	
+
 	&.max-width_450px {
-		
 		> .reply-to-more:first-child {
 			padding-top: 14px;
 		}
@@ -708,7 +909,6 @@ onUnmounted(() => {
 		font-size: 0.825em;
 
 		> .article {
-
 			> .main {
 				> .footer {
 					> .button {
diff --git a/packages/client/src/components/MkNoteHeader.vue b/packages/client/src/components/MkNoteHeader.vue
index 6d55bcff52..c4443141b8 100644
--- a/packages/client/src/components/MkNoteHeader.vue
+++ b/packages/client/src/components/MkNoteHeader.vue
@@ -1,36 +1,45 @@
 <template>
-<header class="kkwtjztg">
-	<div class="user-info">
-		<div>
-			<MkA v-user-preview="note.user.id" class="name" :to="userPage(note.user)" @click.stop>
-				<MkUserName :user="note.user" class="mkusername">
-					<span v-if="note.user.isBot" class="is-bot">bot</span>
-				</MkUserName>
-			</MkA>
-			<div class="username"><MkAcct :user="note.user"/></div>
-		</div>
-		<div>
-			<div class="info">
-				<MkA class="created-at" :to="notePage(note)">
-					<MkTime :time="note.createdAt"/>
+	<header class="kkwtjztg">
+		<div class="user-info">
+			<div>
+				<MkA
+					v-user-preview="note.user.id"
+					class="name"
+					:to="userPage(note.user)"
+					@click.stop
+				>
+					<MkUserName :user="note.user" class="mkusername">
+						<span v-if="note.user.isBot" class="is-bot">bot</span>
+					</MkUserName>
 				</MkA>
-				<MkVisibility :note="note"/>
+				<div class="username"><MkAcct :user="note.user" /></div>
+			</div>
+			<div>
+				<div class="info">
+					<MkA class="created-at" :to="notePage(note)">
+						<MkTime :time="note.createdAt" />
+					</MkA>
+					<MkVisibility :note="note" />
+				</div>
+				<MkInstanceTicker
+					v-if="showTicker"
+					class="ticker"
+					:instance="note.user.instance"
+				/>
 			</div>
-			<MkInstanceTicker v-if="showTicker" class="ticker" :instance="note.user.instance"/>
 		</div>
-	</div>
-</header>
+	</header>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import type * as misskey from 'calckey-js';
-import { defaultStore, noteViewInterruptors } from '@/store';
-import MkVisibility from '@/components/MkVisibility.vue';
-import MkInstanceTicker from '@/components/MkInstanceTicker.vue';
-import { notePage } from '@/filters/note';
-import { userPage } from '@/filters/user';
-import { deepClone } from '@/scripts/clone';
+import {} from "vue";
+import type * as misskey from "calckey-js";
+import { defaultStore, noteViewInterruptors } from "@/store";
+import MkVisibility from "@/components/MkVisibility.vue";
+import MkInstanceTicker from "@/components/MkInstanceTicker.vue";
+import { notePage } from "@/filters/note";
+import { userPage } from "@/filters/user";
+import { deepClone } from "@/scripts/clone";
 
 const props = defineProps<{
 	note: misskey.entities.Note;
@@ -39,10 +48,9 @@ const props = defineProps<{
 
 let note = $ref(deepClone(props.note));
 
-const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultStore.state.instanceTicker === 'remote' && note.user.instance);
-
-
-
+const showTicker =
+	defaultStore.state.instanceTicker === "always" ||
+	(defaultStore.state.instanceTicker === "remote" && note.user.instance);
 </script>
 
 <style lang="scss" scoped>
@@ -54,7 +62,7 @@ const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultS
 	white-space: nowrap;
 	justify-self: flex-end;
 	border-radius: 100px;
-	font-size: .8em;
+	font-size: 0.8em;
 	text-shadow: 0 2px 2px var(--shadow);
 	> .avatar {
 		width: 3.7em;
@@ -73,11 +81,11 @@ const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultS
 				width: 0;
 				overflow: hidden;
 				text-overflow: ellipsis;
-				gap: .1em 0;
+				gap: 0.1em 0;
 			}
 			&:last-child {
 				max-width: 50%;
-				gap: .3em .5em;
+				gap: 0.3em 0.5em;
 			}
 			.article > .main & {
 				display: flex;
@@ -94,17 +102,17 @@ const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultS
 		.name {
 			// flex: 1 1 0px;
 			display: inline;
-			margin: 0 .5em 0 0;
+			margin: 0 0.5em 0 0;
 			padding: 0;
 			overflow: hidden;
 			font-weight: bold;
 			text-decoration: none;
 			text-overflow: ellipsis;
 
-			.mkusername >.is-bot {
+			.mkusername > .is-bot {
 				flex-shrink: 0;
 				align-self: center;
-				margin: 0 .5em 0 0;
+				margin: 0 0.5em 0 0;
 				padding: 1px 6px;
 				font-size: 80%;
 				border: solid 0.5px var(--divider);
@@ -118,17 +126,17 @@ const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultS
 
 		.username {
 			display: inline;
-			margin: 0 .5em 0 0;
+			margin: 0 0.5em 0 0;
 			overflow: hidden;
 			text-overflow: ellipsis;
 			align-self: flex-start;
-			font-size: .9em;
+			font-size: 0.9em;
 		}
 
 		.info {
 			display: inline-flex;
 			flex-shrink: 0;
-			margin-left: .5em;
+			margin-left: 0.5em;
 			font-size: 0.9em;
 			.created-at {
 				max-width: 100%;
@@ -139,7 +147,7 @@ const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultS
 
 		.ticker {
 			display: inline-flex;
-			margin-left: .5em;
+			margin-left: 0.5em;
 			vertical-align: middle;
 			> .name {
 				display: none;
diff --git a/packages/client/src/components/MkNotePreview.vue b/packages/client/src/components/MkNotePreview.vue
index 18d21ca61b..9d388e71b7 100644
--- a/packages/client/src/components/MkNotePreview.vue
+++ b/packages/client/src/components/MkNotePreview.vue
@@ -1,22 +1,22 @@
 <template>
-<div v-size="{ min: [350, 500] }" class="fefdfafb">
-	<MkAvatar class="avatar" :user="$i"/>
-	<div class="main">
-		<div class="header">
-			<MkUserName :user="$i"/>
-		</div>
-		<div class="body">
-			<div class="content">
-				<Mfm :text="preprocess(text).trim()" :author="$i" :i="$i"/>
+	<div v-size="{ min: [350, 500] }" class="fefdfafb">
+		<MkAvatar class="avatar" :user="$i" />
+		<div class="main">
+			<div class="header">
+				<MkUserName :user="$i" />
+			</div>
+			<div class="body">
+				<div class="content">
+					<Mfm :text="preprocess(text).trim()" :author="$i" :i="$i" />
+				</div>
 			</div>
 		</div>
 	</div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import { preprocess } from '@/scripts/preprocess';
+import {} from "vue";
+import { preprocess } from "@/scripts/preprocess";
 
 const props = defineProps<{
 	text: string;
@@ -67,7 +67,6 @@ const props = defineProps<{
 		}
 
 		> .body {
-
 			> .cw {
 				cursor: default;
 				display: block;
diff --git a/packages/client/src/components/MkNoteSimple.vue b/packages/client/src/components/MkNoteSimple.vue
index dad1bf97d9..937f9144a3 100644
--- a/packages/client/src/components/MkNoteSimple.vue
+++ b/packages/client/src/components/MkNoteSimple.vue
@@ -1,28 +1,35 @@
 <template>
-<div v-size="{ min: [350, 500] }" class="yohlumlk">
-	<MkAvatar class="avatar" :user="note.user"/>
-	<div class="main">
-		<XNoteHeader class="header" :note="note" :mini="true"/>
-		<div class="body">
-			<p v-if="note.cw != null" class="cw">
-				<Mfm v-if="note.cw != ''" class="text" :text="note.cw" :author="note.user" :i="$i" :custom-emojis="note.emojis"/>
-				<br/>
-				<XCwButton v-model="showContent" :note="note"/>
-			</p>
-			<div v-show="note.cw == null || showContent" class="content">
-				<MkSubNoteContent class="text" :note="note"/>
+	<div v-size="{ min: [350, 500] }" class="yohlumlk">
+		<MkAvatar class="avatar" :user="note.user" />
+		<div class="main">
+			<XNoteHeader class="header" :note="note" :mini="true" />
+			<div class="body">
+				<p v-if="note.cw != null" class="cw">
+					<Mfm
+						v-if="note.cw != ''"
+						class="text"
+						:text="note.cw"
+						:author="note.user"
+						:i="$i"
+						:custom-emojis="note.emojis"
+					/>
+					<br />
+					<XCwButton v-model="showContent" :note="note" />
+				</p>
+				<div v-show="note.cw == null || showContent" class="content">
+					<MkSubNoteContent class="text" :note="note" />
+				</div>
 			</div>
 		</div>
 	</div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import * as misskey from 'calckey-js';
-import XNoteHeader from '@/components/MkNoteHeader.vue';
-import MkSubNoteContent from '@/components/MkSubNoteContent.vue';
-import XCwButton from '@/components/MkCwButton.vue';
+import {} from "vue";
+import * as misskey from "calckey-js";
+import XNoteHeader from "@/components/MkNoteHeader.vue";
+import MkSubNoteContent from "@/components/MkSubNoteContent.vue";
+import XCwButton from "@/components/MkCwButton.vue";
 
 const props = defineProps<{
 	note: misskey.entities.Note;
@@ -74,7 +81,6 @@ const showContent = $ref(false);
 		}
 
 		> .body {
-
 			> .cw {
 				cursor: default;
 				display: block;
diff --git a/packages/client/src/components/MkNoteSub.vue b/packages/client/src/components/MkNoteSub.vue
index 4f172fb0d9..9c98ae15dd 100644
--- a/packages/client/src/components/MkNoteSub.vue
+++ b/packages/client/src/components/MkNoteSub.vue
@@ -1,178 +1,309 @@
 <template>
-<div ref="el" 
-	v-size="{ max: [450, 500] }"
-	class="wrpstxzv"
-	:class="{ children: depth > 1, singleStart: replies.length == 1, firstColumn: depth == 1 && conversation }"
->
-	<div v-if="conversation && depth > 1" class="line"></div>
-	<div class="main" @click="noteClick">
-		<div class="avatar-container">
-			<MkAvatar class="avatar" :user="appearNote.user"/>
-			<div v-if="(!conversation) || replies.length > 0" class="line"></div>
-		</div>
-		<div class="body">
-			<XNoteHeader class="header" :note="note" :mini="true"/>
+	<div
+		ref="el"
+		v-size="{ max: [450, 500] }"
+		class="wrpstxzv"
+		:class="{
+			children: depth > 1,
+			singleStart: replies.length == 1,
+			firstColumn: depth == 1 && conversation,
+		}"
+	>
+		<div v-if="conversation && depth > 1" class="line"></div>
+		<div class="main" @click="noteClick">
+			<div class="avatar-container">
+				<MkAvatar class="avatar" :user="appearNote.user" />
+				<div
+					v-if="!conversation || replies.length > 0"
+					class="line"
+				></div>
+			</div>
 			<div class="body">
-				<p v-if="appearNote.cw != null" class="cw">
-					<MkA v-if="appearNote.replyId"  :to="`/notes/${appearNote.replyId}`" class="reply-icon" @click.stop>
-						<i class="ph-arrow-bend-left-up ph-bold ph-lg"></i>
-					</MkA>
-					<MkA v-if="conversation && appearNote.renoteId && appearNote.renoteId != parentId && !appearNote.replyId" :to="`/notes/${appearNote.renoteId}`" class="reply-icon" @click.stop>
-						<i class="ph-quotes ph-bold ph-lg"></i>
-					</MkA>
-					<Mfm v-if="appearNote.cw != ''" class="text" :text="appearNote.cw" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
-					<br/>
-					<XCwButton v-model="showContent" :note="note"/>
-				</p>
-				<div v-show="appearNote.cw == null || showContent" class="content">
-					<MkSubNoteContent class="text" :note="note" :detailed="true" :parentId="appearNote.parentId" :conversation="conversation"/>
-				</div>
-				<div v-if="translating || translation" class="translation">
-					<MkLoading v-if="translating" mini/>
-					<div v-else class="translated">
-						<b>{{ i18n.t('translatedFrom', { x: translation.sourceLang }) }}: </b>
-						<Mfm :text="translation.text" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
+				<XNoteHeader class="header" :note="note" :mini="true" />
+				<div class="body">
+					<p v-if="appearNote.cw != null" class="cw">
+						<MkA
+							v-if="appearNote.replyId"
+							:to="`/notes/${appearNote.replyId}`"
+							class="reply-icon"
+							@click.stop
+						>
+							<i class="ph-arrow-bend-left-up ph-bold ph-lg"></i>
+						</MkA>
+						<MkA
+							v-if="
+								conversation &&
+								appearNote.renoteId &&
+								appearNote.renoteId != parentId &&
+								!appearNote.replyId
+							"
+							:to="`/notes/${appearNote.renoteId}`"
+							class="reply-icon"
+							@click.stop
+						>
+							<i class="ph-quotes ph-bold ph-lg"></i>
+						</MkA>
+						<Mfm
+							v-if="appearNote.cw != ''"
+							class="text"
+							:text="appearNote.cw"
+							:author="appearNote.user"
+							:i="$i"
+							:custom-emojis="appearNote.emojis"
+						/>
+						<br />
+						<XCwButton v-model="showContent" :note="note" />
+					</p>
+					<div
+						v-show="appearNote.cw == null || showContent"
+						class="content"
+					>
+						<MkSubNoteContent
+							class="text"
+							:note="note"
+							:detailed="true"
+							:parentId="appearNote.parentId"
+							:conversation="conversation"
+						/>
+					</div>
+					<div v-if="translating || translation" class="translation">
+						<MkLoading v-if="translating" mini />
+						<div v-else class="translated">
+							<b
+								>{{
+									i18n.t("translatedFrom", {
+										x: translation.sourceLang,
+									})
+								}}:
+							</b>
+							<Mfm
+								:text="translation.text"
+								:author="appearNote.user"
+								:i="$i"
+								:custom-emojis="appearNote.emojis"
+							/>
+						</div>
 					</div>
 				</div>
+				<footer class="footer" @click.stop>
+					<XReactionsViewer
+						ref="reactionsViewer"
+						:note="appearNote"
+					/>
+					<button
+						v-tooltip.noDelay.bottom="i18n.ts.reply"
+						class="button _button"
+						@click="reply()"
+					>
+						<i class="ph-arrow-u-up-left ph-bold ph-lg"></i>
+						<template v-if="appearNote.repliesCount > 0">
+							<p class="count">{{ appearNote.repliesCount }}</p>
+						</template>
+					</button>
+					<XRenoteButton
+						ref="renoteButton"
+						class="button"
+						:note="appearNote"
+						:count="appearNote.renoteCount"
+					/>
+					<XStarButton
+						v-if="appearNote.myReaction == null"
+						ref="starButton"
+						class="button"
+						:note="appearNote"
+					/>
+					<button
+						v-if="appearNote.myReaction == null"
+						ref="reactButton"
+						v-tooltip.noDelay.bottom="i18n.ts.reaction"
+						class="button _button"
+						@click="react()"
+					>
+						<i class="ph-smiley ph-bold ph-lg"></i>
+					</button>
+					<button
+						v-if="appearNote.myReaction != null"
+						ref="reactButton"
+						class="button _button reacted"
+						@click="undoReact(appearNote)"
+					>
+						<i class="ph-minus ph-bold ph-lg"></i>
+					</button>
+					<XQuoteButton class="button" :note="appearNote" />
+					<button
+						ref="menuButton"
+						v-tooltip.noDelay.bottom="i18n.ts.more"
+						class="button _button"
+						@click="menu()"
+					>
+						<i class="ph-dots-three-outline ph-bold ph-lg"></i>
+					</button>
+				</footer>
 			</div>
-			<footer class="footer" @click.stop>
-				<XReactionsViewer ref="reactionsViewer" :note="appearNote"/>
-				<button v-tooltip.noDelay.bottom="i18n.ts.reply" class="button _button" @click="reply()">
-					<i class="ph-arrow-u-up-left ph-bold ph-lg"></i>
-					<template v-if="appearNote.repliesCount > 0">
-						<p class="count">{{ appearNote.repliesCount }}</p>
-					</template>
-				</button>
-				<XRenoteButton ref="renoteButton" class="button" :note="appearNote" :count="appearNote.renoteCount"/>
-				<XStarButton v-if="appearNote.myReaction == null" ref="starButton" class="button" :note="appearNote"/>
-				<button v-if="appearNote.myReaction == null" ref="reactButton" v-tooltip.noDelay.bottom="i18n.ts.reaction" class="button _button" @click="react()">
-					<i class="ph-smiley ph-bold ph-lg"></i>
-				</button>
-				<button v-if="appearNote.myReaction != null" ref="reactButton" class="button _button reacted" @click="undoReact(appearNote)">
-					<i class="ph-minus ph-bold ph-lg"></i>
-				</button>
-				<XQuoteButton class="button" :note="appearNote"/>
-				<button ref="menuButton" v-tooltip.noDelay.bottom="i18n.ts.more" class="button _button" @click="menu()">
-					<i class="ph-dots-three-outline ph-bold ph-lg"></i>
-				</button>
-			</footer>
 		</div>
+		<template v-if="conversation">
+			<template v-if="replies.length == 1">
+				<MkNoteSub
+					v-for="reply in replies"
+					:key="reply.id"
+					:note="reply"
+					class="reply single"
+					:conversation="conversation"
+					:depth="depth"
+					:parentId="appearNote.replyId"
+				/>
+			</template>
+			<template v-else-if="depth < 5">
+				<MkNoteSub
+					v-for="reply in replies"
+					:key="reply.id"
+					:note="reply"
+					class="reply"
+					:conversation="conversation"
+					:depth="depth + 1"
+					:parentId="appearNote.replyId"
+				/>
+			</template>
+			<div v-else-if="replies.length > 0" class="more">
+				<div class="line"></div>
+				<MkA class="text _link" :to="notePage(note)"
+					>{{ i18n.ts.continueThread }}
+					<i class="ph-caret-double-right ph-bold ph-lg"></i
+				></MkA>
+			</div>
+		</template>
 	</div>
-	<template v-if="conversation">
-		<template v-if="replies.length == 1">
-			<MkNoteSub v-for="reply in replies" :key="reply.id" :note="reply" class="reply single" :conversation="conversation" :depth="depth" :parentId="appearNote.replyId"/>
-		</template>
-		<template v-else-if="depth < 5">
-			<MkNoteSub v-for="reply in replies" :key="reply.id" :note="reply" class="reply" :conversation="conversation" :depth="depth + 1" :parentId="appearNote.replyId"/>
-		</template>
-		<div v-else-if="replies.length > 0" class="more">
-			<div class="line"></div>
-			<MkA class="text _link" :to="notePage(note)">{{ i18n.ts.continueThread }} <i class="ph-caret-double-right ph-bold ph-lg"></i></MkA>
-		</div>
-	</template>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { inject, ref } from 'vue';
-import type { Ref } from 'vue';
-import * as misskey from 'calckey-js';
-import XNoteHeader from '@/components/MkNoteHeader.vue';
-import MkSubNoteContent from '@/components/MkSubNoteContent.vue';
-import XReactionsViewer from '@/components/MkReactionsViewer.vue';
-import XStarButton from '@/components/MkStarButton.vue';
-import XRenoteButton from '@/components/MkRenoteButton.vue';
-import XQuoteButton from '@/components/MkQuoteButton.vue';
-import XCwButton from '@/components/MkCwButton.vue';
-import { pleaseLogin } from '@/scripts/please-login';
-import { getNoteMenu } from '@/scripts/get-note-menu';
-import { notePage } from '@/filters/note';
-import { useRouter } from '@/router';
-import * as os from '@/os';
-import { reactionPicker } from '@/scripts/reaction-picker';
-import { i18n } from '@/i18n';
-import { deepClone } from '@/scripts/clone';
-import { useNoteCapture } from '@/scripts/use-note-capture';
-
+import { inject, ref } from "vue";
+import type { Ref } from "vue";
+import * as misskey from "calckey-js";
+import XNoteHeader from "@/components/MkNoteHeader.vue";
+import MkSubNoteContent from "@/components/MkSubNoteContent.vue";
+import XReactionsViewer from "@/components/MkReactionsViewer.vue";
+import XStarButton from "@/components/MkStarButton.vue";
+import XRenoteButton from "@/components/MkRenoteButton.vue";
+import XQuoteButton from "@/components/MkQuoteButton.vue";
+import XCwButton from "@/components/MkCwButton.vue";
+import { pleaseLogin } from "@/scripts/please-login";
+import { getNoteMenu } from "@/scripts/get-note-menu";
+import { notePage } from "@/filters/note";
+import { useRouter } from "@/router";
+import * as os from "@/os";
+import { reactionPicker } from "@/scripts/reaction-picker";
+import { i18n } from "@/i18n";
+import { deepClone } from "@/scripts/clone";
+import { useNoteCapture } from "@/scripts/use-note-capture";
 
 const router = useRouter();
 
-const props = withDefaults(defineProps<{
-	note: misskey.entities.Note;
-	conversation?: misskey.entities.Note[];
-	parentId?;
+const props = withDefaults(
+	defineProps<{
+		note: misskey.entities.Note;
+		conversation?: misskey.entities.Note[];
+		parentId?;
 
-	// how many notes are in between this one and the note being viewed in detail
-	depth?: number;
-}>(), {
-	depth: 1,
-});
+		// how many notes are in between this one and the note being viewed in detail
+		depth?: number;
+	}>(),
+	{
+		depth: 1,
+	}
+);
 
 let note = $ref(deepClone(props.note));
 
-const isRenote = (
+const isRenote =
 	note.renote != null &&
 	note.text == null &&
 	note.fileIds.length === 0 &&
-	note.poll == null
-);
+	note.poll == null;
 
 const el = ref<HTMLElement>();
 const menuButton = ref<HTMLElement>();
 const starButton = ref<InstanceType<typeof XStarButton>>();
 const renoteButton = ref<InstanceType<typeof XRenoteButton>>();
 const reactButton = ref<HTMLElement>();
-let appearNote = $computed(() => isRenote ? note.renote as misskey.entities.Note : note);
+let appearNote = $computed(() =>
+	isRenote ? (note.renote as misskey.entities.Note) : note
+);
 const isDeleted = ref(false);
 const translation = ref(null);
 const translating = ref(false);
 let showContent = $ref(false);
-const replies: misskey.entities.Note[] = props.conversation?.filter(item => item.replyId === props.note.id || item.renoteId === props.note.id).reverse() ?? [];
+const replies: misskey.entities.Note[] =
+	props.conversation
+		?.filter(
+			(item) =>
+				item.replyId === props.note.id ||
+				item.renoteId === props.note.id
+		)
+		.reverse() ?? [];
 
 useNoteCapture({
 	rootEl: el,
-	note: $$(appearNote)
+	note: $$(appearNote),
 });
 
-
 function reply(viaKeyboard = false): void {
 	pleaseLogin();
-	os.post({
-		reply: appearNote,
-		animation: !viaKeyboard,
-	}, () => {
-		focus();
-	});
+	os.post(
+		{
+			reply: appearNote,
+			animation: !viaKeyboard,
+		},
+		() => {
+			focus();
+		}
+	);
 }
 
 function react(viaKeyboard = false): void {
 	pleaseLogin();
 	blur();
-	reactionPicker.show(reactButton.value, reaction => {
-		os.api('notes/reactions/create', {
-			noteId: appearNote.id,
-			reaction: reaction,
-		});
-	}, () => {
-		focus();
-	});
+	reactionPicker.show(
+		reactButton.value,
+		(reaction) => {
+			os.api("notes/reactions/create", {
+				noteId: appearNote.id,
+				reaction: reaction,
+			});
+		},
+		() => {
+			focus();
+		}
+	);
 }
 
 function undoReact(note): void {
 	const oldReaction = note.myReaction;
 	if (!oldReaction) return;
-	os.api('notes/reactions/delete', {
+	os.api("notes/reactions/delete", {
 		noteId: note.id,
 	});
 }
 
-const currentClipPage = inject<Ref<misskey.entities.Clip> | null>('currentClipPage', null);
-
+const currentClipPage = inject<Ref<misskey.entities.Clip> | null>(
+	"currentClipPage",
+	null
+);
 
 function menu(viaKeyboard = false): void {
-	os.popupMenu(getNoteMenu({ note: note, translating, translation, menuButton, isDeleted, currentClipPage }), menuButton.value, {
-		viaKeyboard,
-	}).then(focus);
+	os.popupMenu(
+		getNoteMenu({
+			note: note,
+			translating,
+			translation,
+			menuButton,
+			isDeleted,
+			currentClipPage,
+		}),
+		menuButton.value,
+		{
+			viaKeyboard,
+		}
+	).then(focus);
 }
 
 function focus() {
@@ -184,10 +315,10 @@ function blur() {
 }
 
 function noteClick(e) {
-	if (document.getSelection().type === 'Range') {
+	if (document.getSelection().type === "Range") {
 		e.stopPropagation();
 	} else {
-		router.push(notePage(props.note))
+		router.push(notePage(props.note));
 	}
 }
 </script>
@@ -206,7 +337,6 @@ function noteClick(e) {
 		}
 	}
 
-	
 	> .main {
 		display: flex;
 
@@ -231,7 +361,7 @@ function noteClick(e) {
 			@media (pointer: coarse) {
 				cursor: default;
 			}
-			
+
 			> .header {
 				margin-bottom: 2px;
 				cursor: auto;
@@ -241,11 +371,12 @@ function noteClick(e) {
 				.reply-icon {
 					display: inline-block;
 					border-radius: 6px;
-					padding: .2em .2em;
-					margin-right: .2em;
+					padding: 0.2em 0.2em;
+					margin-right: 0.2em;
 					color: var(--accent);
-					transition: background .2s;
-					&:hover, &:focus {
+					transition: background 0.2s;
+					&:hover,
+					&:focus {
 						background: var(--buttonHoverBg);
 					}
 				}
@@ -279,7 +410,7 @@ function noteClick(e) {
 				display: flex;
 				flex-wrap: wrap;
 				pointer-events: none; // Allow clicking anything w/out pointer-events: all; to open post
-	
+
 				> .button {
 					margin: 0;
 					padding: 8px;
@@ -289,20 +420,20 @@ function noteClick(e) {
 					width: max-content;
 					min-width: max-content;
 					pointer-events: all;
-					transition: opacity .2s;
+					transition: opacity 0.2s;
 					&:first-of-type {
-						margin-left: -.5em;
+						margin-left: -0.5em;
 					}
 					&:hover {
 						color: var(--fgHighlighted);
 					}
-	
+
 					> .count {
 						display: inline;
 						margin: 0 0 0 8px;
 						opacity: 0.7;
 					}
-	
+
 					&.reacted {
 						color: var(--accent);
 					}
@@ -320,7 +451,8 @@ function noteClick(e) {
 			margin-right: 8px !important;
 		}
 	}
-	> .reply, > .more {
+	> .reply,
+	> .more {
 		margin-top: 10px;
 		&.single {
 			padding: 0 !important;
@@ -361,15 +493,19 @@ function noteClick(e) {
 		}
 	}
 
-	&.reply, &.reply-to, &.reply-to-more {
-		> .main:hover, > .main:focus-within {
+	&.reply,
+	&.reply-to,
+	&.reply-to-more {
+		> .main:hover,
+		> .main:focus-within {
 			:deep(.footer .button) {
 				opacity: 1;
 			}
 		}
 	}
 
-	&.reply-to, &.reply-to-more {
+	&.reply-to,
+	&.reply-to-more {
 		padding-bottom: 0;
 		&:first-child {
 			padding-top: 24px;
@@ -378,9 +514,11 @@ function noteClick(e) {
 			margin-bottom: -16px;
 		}
 	}
-	
+
 	// Reply Lines
-	&.reply, &.reply-to, &.reply-to-more {
+	&.reply,
+	&.reply-to,
+	&.reply-to-more {
 		--indent: calc(var(--avatarSize) - 5px);
 		> .main {
 			> .avatar-container {
@@ -413,17 +551,20 @@ function noteClick(e) {
 			}
 		}
 	}
-	&.reply-to, &.reply-to-more {
+	&.reply-to,
+	&.reply-to-more {
 		> .main > .avatar-container > .line {
 			margin-bottom: 0px !important;
 		}
 	}
-	&.single, &.singleStart {
+	&.single,
+	&.singleStart {
 		> .main > .avatar-container > .line {
 			margin-bottom: -10px !important;
 		}
 	}
-	.reply.children:not(:last-child) { // Line that goes through multiple replies
+	.reply.children:not(:last-child) {
+		// Line that goes through multiple replies
 		position: relative;
 		> .line {
 			position: absolute;
@@ -473,7 +614,9 @@ function noteClick(e) {
 	}
 	&.firstColumn > .children:last-child > .main {
 		padding-bottom: 0 !important;
-		&::before { bottom: 0 !important }
+		&::before {
+			bottom: 0 !important;
+		}
 		// &::after { content: unset }
 	}
 
@@ -485,7 +628,9 @@ function noteClick(e) {
 			}
 		}
 		&.firstColumn {
-			> .main, > .line, > .children:not(.single) > .line {
+			> .main,
+			> .line,
+			> .children:not(.single) > .line {
 				--avatarSize: 35px;
 				--indent: 35px;
 			}
@@ -496,7 +641,8 @@ function noteClick(e) {
 	}
 	&.max-width_450px {
 		padding: 14px 16px;
-		&.reply-to, &.reply-to-more {
+		&.reply-to,
+		&.reply-to-more {
 			padding: 14px 16px;
 			padding-top: 14px !important;
 			padding-bottom: 0 !important;
diff --git a/packages/client/src/components/MkNotes.vue b/packages/client/src/components/MkNotes.vue
index f1c8aab46e..124ffea6a1 100644
--- a/packages/client/src/components/MkNotes.vue
+++ b/packages/client/src/components/MkNotes.vue
@@ -1,29 +1,46 @@
 <template>
-<MkPagination ref="pagingComponent" :pagination="pagination">
-	<template #empty>
-		<div class="_fullinfo">
-			<img src="/static-assets/badges/info.png" class="_ghost" alt="Info"/>
-			<div>{{ i18n.ts.noNotes }}</div>
-		</div>
-	</template>
+	<MkPagination ref="pagingComponent" :pagination="pagination">
+		<template #empty>
+			<div class="_fullinfo">
+				<img
+					src="/static-assets/badges/info.png"
+					class="_ghost"
+					alt="Info"
+				/>
+				<div>{{ i18n.ts.noNotes }}</div>
+			</div>
+		</template>
 
-	<template #default="{ items: notes }">
-		<div class="giivymft" :class="{ noGap }">
-			<XList ref="notes" v-slot="{ item: note }" :items="notes" :direction="pagination.reversed ? 'up' : 'down'" :reversed="pagination.reversed" :no-gap="noGap" :ad="true" class="notes">
-				<XNote :key="note._featuredId_ || note._prId_ || note.id" class="qtqtichx" :note="note"/>
-			</XList>
-		</div>
-	</template>
-</MkPagination>
+		<template #default="{ items: notes }">
+			<div class="giivymft" :class="{ noGap }">
+				<XList
+					ref="notes"
+					v-slot="{ item: note }"
+					:items="notes"
+					:direction="pagination.reversed ? 'up' : 'down'"
+					:reversed="pagination.reversed"
+					:no-gap="noGap"
+					:ad="true"
+					class="notes"
+				>
+					<XNote
+						:key="note._featuredId_ || note._prId_ || note.id"
+						class="qtqtichx"
+						:note="note"
+					/>
+				</XList>
+			</div>
+		</template>
+	</MkPagination>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
-import type { Paging } from '@/components/MkPagination.vue';
-import XNote from '@/components/MkNote.vue';
-import XList from '@/components/MkDateSeparatedList.vue';
-import MkPagination from '@/components/MkPagination.vue';
-import { i18n } from '@/i18n';
+import { ref } from "vue";
+import type { Paging } from "@/components/MkPagination.vue";
+import XNote from "@/components/MkNote.vue";
+import XList from "@/components/MkDateSeparatedList.vue";
+import MkPagination from "@/components/MkPagination.vue";
+import { i18n } from "@/i18n";
 
 const props = defineProps<{
 	pagination: Paging;
diff --git a/packages/client/src/components/MkNotification.vue b/packages/client/src/components/MkNotification.vue
index 1e75c59a90..60aefab9ff 100644
--- a/packages/client/src/components/MkNotification.vue
+++ b/packages/client/src/components/MkNotification.vue
@@ -1,99 +1,289 @@
 <template>
-<div ref="elRef" v-size="{ max: [500, 600] }" class="qglefbjs" :class="notification.type">
-	<div class="head">
-		<MkAvatar v-if="notification.type === 'pollEnded'" class="icon" :user="notification.note.user"/>
-		<MkAvatar v-else-if="notification.user" class="icon" :user="notification.user"/>
-		<img v-else-if="notification.icon" class="icon" :src="notification.icon" alt=""/>
-		<div class="sub-icon" :class="notification.type">
-			<i v-if="notification.type === 'follow'" class="ph-hand-waving ph-bold"></i>
-			<i v-else-if="notification.type === 'receiveFollowRequest'" class="ph-clock ph-bold"></i>
-			<i v-else-if="notification.type === 'followRequestAccepted'" class="ph-check ph-bold"></i>
-			<i v-else-if="notification.type === 'groupInvited'" class="ph-identification-card ph-bold"></i>
-			<i v-else-if="notification.type === 'renote'" class="ph-repeat ph-bold"></i>
-			<i v-else-if="notification.type === 'reply'" class="ph-arrow-bend-up-left ph-bold"></i>
-			<i v-else-if="notification.type === 'mention'" class="ph-at ph-bold"></i>
-			<i v-else-if="notification.type === 'quote'" class="ph-quotes ph-bold"></i>
-			<i v-else-if="notification.type === 'pollVote'" class="ph-microphone-stage ph-bold"></i>
-			<i v-else-if="notification.type === 'pollEnded'" class="ph-microphone-stage ph-bold"></i>
-			<!-- notification.reaction が null になることはまずないが、ここでoptional chaining使うと一部ブラウザで刺さるので念の為 -->
-			<XReactionIcon
-				v-else-if="notification.type === 'reaction'"
-				ref="reactionRef"
-				:reaction="notification.reaction ? notification.reaction.replace(/^:(\w+):$/, ':$1@.:') : notification.reaction"
-				:custom-emojis="notification.note.emojis"
-				:no-style="true"
+	<div
+		ref="elRef"
+		v-size="{ max: [500, 600] }"
+		class="qglefbjs"
+		:class="notification.type"
+	>
+		<div class="head">
+			<MkAvatar
+				v-if="notification.type === 'pollEnded'"
+				class="icon"
+				:user="notification.note.user"
 			/>
+			<MkAvatar
+				v-else-if="notification.user"
+				class="icon"
+				:user="notification.user"
+			/>
+			<img
+				v-else-if="notification.icon"
+				class="icon"
+				:src="notification.icon"
+				alt=""
+			/>
+			<div class="sub-icon" :class="notification.type">
+				<i
+					v-if="notification.type === 'follow'"
+					class="ph-hand-waving ph-bold"
+				></i>
+				<i
+					v-else-if="notification.type === 'receiveFollowRequest'"
+					class="ph-clock ph-bold"
+				></i>
+				<i
+					v-else-if="notification.type === 'followRequestAccepted'"
+					class="ph-check ph-bold"
+				></i>
+				<i
+					v-else-if="notification.type === 'groupInvited'"
+					class="ph-identification-card ph-bold"
+				></i>
+				<i
+					v-else-if="notification.type === 'renote'"
+					class="ph-repeat ph-bold"
+				></i>
+				<i
+					v-else-if="notification.type === 'reply'"
+					class="ph-arrow-bend-up-left ph-bold"
+				></i>
+				<i
+					v-else-if="notification.type === 'mention'"
+					class="ph-at ph-bold"
+				></i>
+				<i
+					v-else-if="notification.type === 'quote'"
+					class="ph-quotes ph-bold"
+				></i>
+				<i
+					v-else-if="notification.type === 'pollVote'"
+					class="ph-microphone-stage ph-bold"
+				></i>
+				<i
+					v-else-if="notification.type === 'pollEnded'"
+					class="ph-microphone-stage ph-bold"
+				></i>
+				<!-- notification.reaction が null になることはまずないが、ここでoptional chaining使うと一部ブラウザで刺さるので念の為 -->
+				<XReactionIcon
+					v-else-if="notification.type === 'reaction'"
+					ref="reactionRef"
+					:reaction="
+						notification.reaction
+							? notification.reaction.replace(
+									/^:(\w+):$/,
+									':$1@.:'
+							  )
+							: notification.reaction
+					"
+					:custom-emojis="notification.note.emojis"
+					:no-style="true"
+				/>
+			</div>
+		</div>
+		<div class="tail">
+			<header>
+				<span v-if="notification.type === 'pollEnded'">{{
+					i18n.ts._notification.pollEnded
+				}}</span>
+				<MkA
+					v-else-if="notification.user"
+					v-user-preview="notification.user.id"
+					class="name"
+					:to="userPage(notification.user)"
+					><MkUserName :user="notification.user"
+				/></MkA>
+				<span v-else>{{ notification.header }}</span>
+				<MkTime
+					v-if="withTime"
+					:time="notification.createdAt"
+					class="time"
+				/>
+			</header>
+			<MkA
+				v-if="notification.type === 'reaction'"
+				class="text"
+				:to="notePage(notification.note)"
+				:title="getNoteSummary(notification.note)"
+			>
+				<i class="ph-quotes ph-fill ph-lg"></i>
+				<Mfm
+					:text="getNoteSummary(notification.note)"
+					:plain="true"
+					:nowrap="!full"
+					:custom-emojis="notification.note.emojis"
+				/>
+				<i class="ph-quotes ph-fill ph-lg"></i>
+			</MkA>
+			<MkA
+				v-if="notification.type === 'renote'"
+				class="text"
+				:to="notePage(notification.note)"
+				:title="getNoteSummary(notification.note.renote)"
+			>
+				<i class="ph-quotes ph-fill ph-lg"></i>
+				<Mfm
+					:text="getNoteSummary(notification.note.renote)"
+					:plain="true"
+					:nowrap="!full"
+					:custom-emojis="notification.note.renote.emojis"
+				/>
+				<i class="ph-quotes ph-fill ph-lg"></i>
+			</MkA>
+			<MkA
+				v-if="notification.type === 'reply'"
+				class="text"
+				:to="notePage(notification.note)"
+				:title="getNoteSummary(notification.note)"
+			>
+				<Mfm
+					:text="getNoteSummary(notification.note)"
+					:plain="true"
+					:nowrap="!full"
+					:custom-emojis="notification.note.emojis"
+				/>
+			</MkA>
+			<MkA
+				v-if="notification.type === 'mention'"
+				class="text"
+				:to="notePage(notification.note)"
+				:title="getNoteSummary(notification.note)"
+			>
+				<Mfm
+					:text="getNoteSummary(notification.note)"
+					:plain="true"
+					:nowrap="!full"
+					:custom-emojis="notification.note.emojis"
+				/>
+			</MkA>
+			<MkA
+				v-if="notification.type === 'quote'"
+				class="text"
+				:to="notePage(notification.note)"
+				:title="getNoteSummary(notification.note)"
+			>
+				<Mfm
+					:text="getNoteSummary(notification.note)"
+					:plain="true"
+					:nowrap="!full"
+					:custom-emojis="notification.note.emojis"
+				/>
+			</MkA>
+			<MkA
+				v-if="notification.type === 'pollVote'"
+				class="text"
+				:to="notePage(notification.note)"
+				:title="getNoteSummary(notification.note)"
+			>
+				<i class="ph-quotes ph-fill ph-lg"></i>
+				<Mfm
+					:text="getNoteSummary(notification.note)"
+					:plain="true"
+					:nowrap="!full"
+					:custom-emojis="notification.note.emojis"
+				/>
+				<i class="ph-quotes ph-fill ph-lg"></i>
+			</MkA>
+			<MkA
+				v-if="notification.type === 'pollEnded'"
+				class="text"
+				:to="notePage(notification.note)"
+				:title="getNoteSummary(notification.note)"
+			>
+				<i class="ph-quotes ph-fill ph-lg"></i>
+				<Mfm
+					:text="getNoteSummary(notification.note)"
+					:plain="true"
+					:nowrap="!full"
+					:custom-emojis="notification.note.emojis"
+				/>
+				<i class="ph-quotes ph-fill ph-lg"></i>
+			</MkA>
+			<span
+				v-if="notification.type === 'follow'"
+				class="text"
+				style="opacity: 0.6"
+				>{{ i18n.ts.youGotNewFollower }}
+				<div v-if="full">
+					<MkFollowButton
+						:user="notification.user"
+						:full="true"
+					/></div
+			></span>
+			<span
+				v-if="notification.type === 'followRequestAccepted'"
+				class="text"
+				style="opacity: 0.6"
+				>{{ i18n.ts.followRequestAccepted }}</span
+			>
+			<span
+				v-if="notification.type === 'receiveFollowRequest'"
+				class="text"
+				style="opacity: 0.6"
+				>{{ i18n.ts.receiveFollowRequest }}
+				<div v-if="full && !followRequestDone">
+					<button class="_textButton" @click="acceptFollowRequest()">
+						{{ i18n.ts.accept }}
+					</button>
+					|
+					<button class="_textButton" @click="rejectFollowRequest()">
+						{{ i18n.ts.reject }}
+					</button>
+				</div></span
+			>
+			<span
+				v-if="notification.type === 'groupInvited'"
+				class="text"
+				style="opacity: 0.6"
+				>{{ i18n.ts.groupInvited }}:
+				<b>{{ notification.invitation.group.name }}</b>
+				<div v-if="full && !groupInviteDone">
+					<button
+						class="_textButton"
+						@click="acceptGroupInvitation()"
+					>
+						{{ i18n.ts.accept }}
+					</button>
+					|
+					<button
+						class="_textButton"
+						@click="rejectGroupInvitation()"
+					>
+						{{ i18n.ts.reject }}
+					</button>
+				</div></span
+			>
+			<span v-if="notification.type === 'app'" class="text">
+				<Mfm :text="notification.body" :nowrap="!full" />
+			</span>
 		</div>
 	</div>
-	<div class="tail">
-		<header>
-			<span v-if="notification.type === 'pollEnded'">{{ i18n.ts._notification.pollEnded }}</span>
-			<MkA v-else-if="notification.user" v-user-preview="notification.user.id" class="name" :to="userPage(notification.user)"><MkUserName :user="notification.user"/></MkA>
-			<span v-else>{{ notification.header }}</span>
-			<MkTime v-if="withTime" :time="notification.createdAt" class="time"/>
-		</header>
-		<MkA v-if="notification.type === 'reaction'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)">
-			<i class="ph-quotes ph-fill ph-lg"></i>
-			<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.emojis"/>
-			<i class="ph-quotes ph-fill ph-lg"></i>
-		</MkA>
-		<MkA v-if="notification.type === 'renote'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note.renote)">
-			<i class="ph-quotes ph-fill ph-lg"></i>
-			<Mfm :text="getNoteSummary(notification.note.renote)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.renote.emojis"/>
-			<i class="ph-quotes ph-fill ph-lg"></i>
-		</MkA>
-		<MkA v-if="notification.type === 'reply'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)">
-			<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.emojis"/>
-		</MkA>
-		<MkA v-if="notification.type === 'mention'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)">
-			<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.emojis"/>
-		</MkA>
-		<MkA v-if="notification.type === 'quote'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)">
-			<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.emojis"/>
-		</MkA>
-		<MkA v-if="notification.type === 'pollVote'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)">
-			<i class="ph-quotes ph-fill ph-lg"></i>
-			<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.emojis"/>
-			<i class="ph-quotes ph-fill ph-lg"></i>
-		</MkA>
-		<MkA v-if="notification.type === 'pollEnded'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)">
-			<i class="ph-quotes ph-fill ph-lg"></i>
-			<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.emojis"/>
-			<i class="ph-quotes ph-fill ph-lg"></i>
-		</MkA>
-		<span v-if="notification.type === 'follow'" class="text" style="opacity: 0.6;">{{ i18n.ts.youGotNewFollower }}<div v-if="full"><MkFollowButton :user="notification.user" :full="true"/></div></span>
-		<span v-if="notification.type === 'followRequestAccepted'" class="text" style="opacity: 0.6;">{{ i18n.ts.followRequestAccepted }}</span>
-		<span v-if="notification.type === 'receiveFollowRequest'" class="text" style="opacity: 0.6;">{{ i18n.ts.receiveFollowRequest }}<div v-if="full && !followRequestDone"><button class="_textButton" @click="acceptFollowRequest()">{{ i18n.ts.accept }}</button> | <button class="_textButton" @click="rejectFollowRequest()">{{ i18n.ts.reject }}</button></div></span>
-		<span v-if="notification.type === 'groupInvited'" class="text" style="opacity: 0.6;">{{ i18n.ts.groupInvited }}: <b>{{ notification.invitation.group.name }}</b><div v-if="full && !groupInviteDone"><button class="_textButton" @click="acceptGroupInvitation()">{{ i18n.ts.accept }}</button> | <button class="_textButton" @click="rejectGroupInvitation()">{{ i18n.ts.reject }}</button></div></span>
-		<span v-if="notification.type === 'app'" class="text">
-			<Mfm :text="notification.body" :nowrap="!full"/>
-		</span>
-	</div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted, onUnmounted, watch } from 'vue';
-import * as misskey from 'calckey-js';
-import XReactionIcon from '@/components/MkReactionIcon.vue';
-import MkFollowButton from '@/components/MkFollowButton.vue';
-import XReactionTooltip from '@/components/MkReactionTooltip.vue';
-import { getNoteSummary } from '@/scripts/get-note-summary';
-import { notePage } from '@/filters/note';
-import { userPage } from '@/filters/user';
-import { i18n } from '@/i18n';
-import * as os from '@/os';
-import { stream } from '@/stream';
-import { useTooltip } from '@/scripts/use-tooltip';
+import { ref, onMounted, onUnmounted, watch } from "vue";
+import * as misskey from "calckey-js";
+import XReactionIcon from "@/components/MkReactionIcon.vue";
+import MkFollowButton from "@/components/MkFollowButton.vue";
+import XReactionTooltip from "@/components/MkReactionTooltip.vue";
+import { getNoteSummary } from "@/scripts/get-note-summary";
+import { notePage } from "@/filters/note";
+import { userPage } from "@/filters/user";
+import { i18n } from "@/i18n";
+import * as os from "@/os";
+import { stream } from "@/stream";
+import { useTooltip } from "@/scripts/use-tooltip";
 
-const props = withDefaults(defineProps<{
-	notification: misskey.entities.Notification;
-	withTime?: boolean;
-	full?: boolean;
-}>(), {
-	withTime: false,
-	full: false,
-});
+const props = withDefaults(
+	defineProps<{
+		notification: misskey.entities.Notification;
+		withTime?: boolean;
+		full?: boolean;
+	}>(),
+	{
+		withTime: false,
+		full: false,
+	}
+);
 
 const elRef = ref<HTMLElement>(null);
 const reactionRef = ref(null);
@@ -104,8 +294,8 @@ let connection;
 onMounted(() => {
 	if (!props.notification.isRead) {
 		readObserver = new IntersectionObserver((entries, observer) => {
-			if (!entries.some(entry => entry.isIntersecting)) return;
-			stream.send('readNotification', {
+			if (!entries.some((entry) => entry.isIntersecting)) return;
+			stream.send("readNotification", {
 				id: props.notification.id,
 			});
 			observer.disconnect();
@@ -113,8 +303,8 @@ onMounted(() => {
 
 		readObserver.observe(elRef.value);
 
-		connection = stream.useChannel('main');
-		connection.on('readAllNotifications', () => readObserver.disconnect());
+		connection = stream.useChannel("main");
+		connection.on("readAllNotifications", () => readObserver.disconnect());
 
 		watch(props.notification.isRead, () => {
 			readObserver.disconnect();
@@ -132,31 +322,42 @@ const groupInviteDone = ref(false);
 
 const acceptFollowRequest = () => {
 	followRequestDone.value = true;
-	os.api('following/requests/accept', { userId: props.notification.user.id });
+	os.api("following/requests/accept", { userId: props.notification.user.id });
 };
 
 const rejectFollowRequest = () => {
 	followRequestDone.value = true;
-	os.api('following/requests/reject', { userId: props.notification.user.id });
+	os.api("following/requests/reject", { userId: props.notification.user.id });
 };
 
 const acceptGroupInvitation = () => {
 	groupInviteDone.value = true;
-	os.apiWithDialog('users/groups/invitations/accept', { invitationId: props.notification.invitation.id });
+	os.apiWithDialog("users/groups/invitations/accept", {
+		invitationId: props.notification.invitation.id,
+	});
 };
 
 const rejectGroupInvitation = () => {
 	groupInviteDone.value = true;
-	os.api('users/groups/invitations/reject', { invitationId: props.notification.invitation.id });
+	os.api("users/groups/invitations/reject", {
+		invitationId: props.notification.invitation.id,
+	});
 };
 
 useTooltip(reactionRef, (showing) => {
-	os.popup(XReactionTooltip, {
-		showing,
-		reaction: props.notification.reaction ? props.notification.reaction.replace(/^:(\w+):$/, ':$1@.:') : props.notification.reaction,
-		emojis: props.notification.note.emojis,
-		targetElement: reactionRef.value.$el,
-	}, {}, 'closed');
+	os.popup(
+		XReactionTooltip,
+		{
+			showing,
+			reaction: props.notification.reaction
+				? props.notification.reaction.replace(/^:(\w+):$/, ":$1@.:")
+				: props.notification.reaction,
+			emojis: props.notification.note.emojis,
+			targetElement: reactionRef.value.$el,
+		},
+		{},
+		"closed"
+	);
 });
 </script>
 
@@ -219,7 +420,10 @@ useTooltip(reactionRef, (showing) => {
 				height: 100%;
 			}
 
-			&.follow, &.followRequestAccepted, &.receiveFollowRequest, &.groupInvited {
+			&.follow,
+			&.followRequestAccepted,
+			&.receiveFollowRequest,
+			&.groupInvited {
 				padding: 3px;
 				background: #31748f;
 				pointer-events: none;
diff --git a/packages/client/src/components/MkNotificationSettingWindow.vue b/packages/client/src/components/MkNotificationSettingWindow.vue
index f2a9aed990..00a61bb2da 100644
--- a/packages/client/src/components/MkNotificationSettingWindow.vue
+++ b/packages/client/src/components/MkNotificationSettingWindow.vue
@@ -1,60 +1,77 @@
 <template>
-<XModalWindow
-	ref="dialog"
-	:width="400"
-	:height="450"
-	:with-ok-button="true"
-	:ok-button-disabled="false"
-	@ok="ok()"
-	@close="dialog.close()"
-	@closed="emit('closed')"
->
-	<template #header>{{ i18n.ts.notificationSetting }}</template>
-	<div class="_monolithic_">
-		<div v-if="showGlobalToggle" class="_section">
-			<MkSwitch v-model="useGlobalSetting">
-				{{ i18n.ts.useGlobalSetting }}
-				<template #caption>{{ i18n.ts.useGlobalSettingDesc }}</template>
-			</MkSwitch>
+	<XModalWindow
+		ref="dialog"
+		:width="400"
+		:height="450"
+		:with-ok-button="true"
+		:ok-button-disabled="false"
+		@ok="ok()"
+		@close="dialog.close()"
+		@closed="emit('closed')"
+	>
+		<template #header>{{ i18n.ts.notificationSetting }}</template>
+		<div class="_monolithic_">
+			<div v-if="showGlobalToggle" class="_section">
+				<MkSwitch v-model="useGlobalSetting">
+					{{ i18n.ts.useGlobalSetting }}
+					<template #caption>{{
+						i18n.ts.useGlobalSettingDesc
+					}}</template>
+				</MkSwitch>
+			</div>
+			<div v-if="!useGlobalSetting" class="_section">
+				<MkInfo>{{ i18n.ts.notificationSettingDesc }}</MkInfo>
+				<MkButton inline @click="disableAll">{{
+					i18n.ts.disableAll
+				}}</MkButton>
+				<MkButton inline @click="enableAll">{{
+					i18n.ts.enableAll
+				}}</MkButton>
+				<MkSwitch
+					v-for="ntype in notificationTypes"
+					:key="ntype"
+					v-model="typesMap[ntype]"
+					>{{ i18n.t(`_notification._types.${ntype}`) }}</MkSwitch
+				>
+			</div>
 		</div>
-		<div v-if="!useGlobalSetting" class="_section">
-			<MkInfo>{{ i18n.ts.notificationSettingDesc }}</MkInfo>
-			<MkButton inline @click="disableAll">{{ i18n.ts.disableAll }}</MkButton>
-			<MkButton inline @click="enableAll">{{ i18n.ts.enableAll }}</MkButton>
-			<MkSwitch v-for="ntype in notificationTypes" :key="ntype" v-model="typesMap[ntype]">{{ i18n.t(`_notification._types.${ntype}`) }}</MkSwitch>
-		</div>
-	</div>
-</XModalWindow>
+	</XModalWindow>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import { notificationTypes } from 'calckey-js';
-import MkSwitch from './form/switch.vue';
-import MkInfo from './MkInfo.vue';
-import MkButton from './MkButton.vue';
-import XModalWindow from '@/components/MkModalWindow.vue';
-import { i18n } from '@/i18n';
+import {} from "vue";
+import { notificationTypes } from "calckey-js";
+import MkSwitch from "./form/switch.vue";
+import MkInfo from "./MkInfo.vue";
+import MkButton from "./MkButton.vue";
+import XModalWindow from "@/components/MkModalWindow.vue";
+import { i18n } from "@/i18n";
 
 const emit = defineEmits<{
-	(ev: 'done', v: { includingTypes: string[] | null }): void,
-	(ev: 'closed'): void,
+	(ev: "done", v: { includingTypes: string[] | null }): void;
+	(ev: "closed"): void;
 }>();
 
-const props = withDefaults(defineProps<{
-	includingTypes?: typeof notificationTypes[number][] | null;
-	showGlobalToggle?: boolean;
-}>(), {
-	includingTypes: () => [],
-	showGlobalToggle: true,
-});
+const props = withDefaults(
+	defineProps<{
+		includingTypes?: (typeof notificationTypes)[number][] | null;
+		showGlobalToggle?: boolean;
+	}>(),
+	{
+		includingTypes: () => [],
+		showGlobalToggle: true,
+	}
+);
 
 let includingTypes = $computed(() => props.includingTypes || []);
 
 const dialog = $ref<InstanceType<typeof XModalWindow>>();
 
-let typesMap = $ref<Record<typeof notificationTypes[number], boolean>>({});
-let useGlobalSetting = $ref((includingTypes === null || includingTypes.length === 0) && props.showGlobalToggle);
+let typesMap = $ref<Record<(typeof notificationTypes)[number], boolean>>({});
+let useGlobalSetting = $ref(
+	(includingTypes === null || includingTypes.length === 0) &&
+		props.showGlobalToggle
+);
 
 for (const ntype of notificationTypes) {
 	typesMap[ntype] = includingTypes.includes(ntype);
@@ -62,11 +79,12 @@ for (const ntype of notificationTypes) {
 
 function ok() {
 	if (useGlobalSetting) {
-		emit('done', { includingTypes: null });
+		emit("done", { includingTypes: null });
 	} else {
-		emit('done', {
-			includingTypes: (Object.keys(typesMap) as typeof notificationTypes[number][])
-				.filter(type => typesMap[type]),
+		emit("done", {
+			includingTypes: (
+				Object.keys(typesMap) as (typeof notificationTypes)[number][]
+			).filter((type) => typesMap[type]),
 		});
 	}
 
@@ -75,13 +93,13 @@ function ok() {
 
 function disableAll() {
 	for (const type in typesMap) {
-		typesMap[type as typeof notificationTypes[number]] = false;
+		typesMap[type as (typeof notificationTypes)[number]] = false;
 	}
 }
 
 function enableAll() {
 	for (const type in typesMap) {
-		typesMap[type as typeof notificationTypes[number]] = true;
+		typesMap[type as (typeof notificationTypes)[number]] = true;
 	}
 }
 </script>
diff --git a/packages/client/src/components/MkNotificationToast.vue b/packages/client/src/components/MkNotificationToast.vue
index 398f64d544..ba95e11afc 100644
--- a/packages/client/src/components/MkNotificationToast.vue
+++ b/packages/client/src/components/MkNotificationToast.vue
@@ -1,25 +1,33 @@
 <template>
-<div class="mk-notification-toast" :style="{ zIndex }">
-	<transition :name="$store.state.animation ? 'notification-toast' : ''" appear @after-leave="$emit('closed')">
-		<XNotification v-if="showing" :notification="notification" class="notification _acrylic"/>
-	</transition>
-</div>
+	<div class="mk-notification-toast" :style="{ zIndex }">
+		<transition
+			:name="$store.state.animation ? 'notification-toast' : ''"
+			appear
+			@after-leave="$emit('closed')"
+		>
+			<XNotification
+				v-if="showing"
+				:notification="notification"
+				class="notification _acrylic"
+			/>
+		</transition>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted } from 'vue';
-import XNotification from '@/components/MkNotification.vue';
-import * as os from '@/os';
+import { onMounted } from "vue";
+import XNotification from "@/components/MkNotification.vue";
+import * as os from "@/os";
 
 defineProps<{
 	notification: any; // TODO
 }>();
 
 const emit = defineEmits<{
-	(ev: 'closed'): void;
+	(ev: "closed"): void;
 }>();
 
-const zIndex = os.claimZIndex('high');
+const zIndex = os.claimZIndex("high");
 let showing = $ref(true);
 
 onMounted(() => {
@@ -30,10 +38,12 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
-.notification-toast-enter-active, .notification-toast-leave-active {
+.notification-toast-enter-active,
+.notification-toast-leave-active {
 	transition: opacity 0.3s, transform 0.3s !important;
 }
-.notification-toast-enter-from, .notification-toast-leave-to {
+.notification-toast-enter-from,
+.notification-toast-leave-to {
 	opacity: 0;
 	transform: translateX(-250px);
 }
diff --git a/packages/client/src/components/MkNotifications.vue b/packages/client/src/components/MkNotifications.vue
index a38c0e0b2d..61b16b16e2 100644
--- a/packages/client/src/components/MkNotifications.vue
+++ b/packages/client/src/components/MkNotifications.vue
@@ -1,54 +1,89 @@
 <template>
-<MkPagination ref="pagingComponent" :pagination="pagination">
-	<template #empty>
-		<div class="_fullinfo">
-			<img src="/static-assets/badges/info.png" class="_ghost" alt="Info"/>
-			<div>{{ i18n.ts.noNotifications }}</div>
-		</div>
-	</template>
+	<MkPagination ref="pagingComponent" :pagination="pagination">
+		<template #empty>
+			<div class="_fullinfo">
+				<img
+					src="/static-assets/badges/info.png"
+					class="_ghost"
+					alt="Info"
+				/>
+				<div>{{ i18n.ts.noNotifications }}</div>
+			</div>
+		</template>
 
-	<template #default="{ items: notifications }">
-		<XList v-slot="{ item: notification }" class="elsfgstc" :items="notifications" :no-gap="true">
-			<XNote v-if="['reply', 'quote', 'mention'].includes(notification.type)" :key="notification.id" :note="notification.note"/>
-			<XNotification v-else :key="notification.id" :notification="notification" :with-time="true" :full="true" class="_panel notification"/>
-		</XList>
-	</template>
-</MkPagination>
+		<template #default="{ items: notifications }">
+			<XList
+				v-slot="{ item: notification }"
+				class="elsfgstc"
+				:items="notifications"
+				:no-gap="true"
+			>
+				<XNote
+					v-if="
+						['reply', 'quote', 'mention'].includes(
+							notification.type
+						)
+					"
+					:key="notification.id"
+					:note="notification.note"
+				/>
+				<XNotification
+					v-else
+					:key="notification.id"
+					:notification="notification"
+					:with-time="true"
+					:full="true"
+					class="_panel notification"
+				/>
+			</XList>
+		</template>
+	</MkPagination>
 </template>
 
 <script lang="ts" setup>
-import { defineComponent, markRaw, onUnmounted, onMounted, computed, ref } from 'vue';
-import { notificationTypes } from 'calckey-js';
-import MkPagination, { Paging } from '@/components/MkPagination.vue';
-import XNotification from '@/components/MkNotification.vue';
-import XList from '@/components/MkDateSeparatedList.vue';
-import XNote from '@/components/MkNote.vue';
-import * as os from '@/os';
-import { stream } from '@/stream';
-import { $i } from '@/account';
-import { i18n } from '@/i18n';
+import {
+	defineComponent,
+	markRaw,
+	onUnmounted,
+	onMounted,
+	computed,
+	ref,
+} from "vue";
+import { notificationTypes } from "calckey-js";
+import MkPagination, { Paging } from "@/components/MkPagination.vue";
+import XNotification from "@/components/MkNotification.vue";
+import XList from "@/components/MkDateSeparatedList.vue";
+import XNote from "@/components/MkNote.vue";
+import * as os from "@/os";
+import { stream } from "@/stream";
+import { $i } from "@/account";
+import { i18n } from "@/i18n";
 
 const props = defineProps<{
-	includeTypes?: typeof notificationTypes[number][];
+	includeTypes?: (typeof notificationTypes)[number][];
 	unreadOnly?: boolean;
 }>();
 
 const pagingComponent = ref<InstanceType<typeof MkPagination>>();
 
 const pagination: Paging = {
-	endpoint: 'i/notifications' as const,
+	endpoint: "i/notifications" as const,
 	limit: 10,
 	params: computed(() => ({
 		includeTypes: props.includeTypes ?? undefined,
-		excludeTypes: props.includeTypes ? undefined : $i.mutingNotificationTypes,
+		excludeTypes: props.includeTypes
+			? undefined
+			: $i.mutingNotificationTypes,
 		unreadOnly: props.unreadOnly,
 	})),
 };
 
 const onNotification = (notification) => {
-	const isMuted = props.includeTypes ? !props.includeTypes.includes(notification.type) : $i.mutingNotificationTypes.includes(notification.type);
-	if (isMuted || document.visibilityState === 'visible') {
-		stream.send('readNotification', {
+	const isMuted = props.includeTypes
+		? !props.includeTypes.includes(notification.type)
+		: $i.mutingNotificationTypes.includes(notification.type);
+	if (isMuted || document.visibilityState === "visible") {
+		stream.send("readNotification", {
 			id: notification.id,
 		});
 	}
@@ -56,7 +91,7 @@ const onNotification = (notification) => {
 	if (!isMuted) {
 		pagingComponent.value.prepend({
 			...notification,
-			isRead: document.visibilityState === 'visible',
+			isRead: document.visibilityState === "visible",
 		});
 	}
 };
@@ -64,9 +99,9 @@ const onNotification = (notification) => {
 let connection;
 
 onMounted(() => {
-	connection = stream.useChannel('main');
-	connection.on('notification', onNotification);
-	connection.on('readAllNotifications', () => {
+	connection = stream.useChannel("main");
+	connection.on("notification", onNotification);
+	connection.on("readAllNotifications", () => {
 		if (pagingComponent.value) {
 			for (const item of pagingComponent.value.queue) {
 				item.isRead = true;
@@ -76,15 +111,23 @@ onMounted(() => {
 			}
 		}
 	});
-	connection.on('readNotifications', notificationIds => {
+	connection.on("readNotifications", (notificationIds) => {
 		if (pagingComponent.value) {
 			for (let i = 0; i < pagingComponent.value.queue.length; i++) {
-				if (notificationIds.includes(pagingComponent.value.queue[i].id)) {
+				if (
+					notificationIds.includes(pagingComponent.value.queue[i].id)
+				) {
 					pagingComponent.value.queue[i].isRead = true;
 				}
 			}
-			for (let i = 0; i < (pagingComponent.value.items || []).length; i++) {
-				if (notificationIds.includes(pagingComponent.value.items[i].id)) {
+			for (
+				let i = 0;
+				i < (pagingComponent.value.items || []).length;
+				i++
+			) {
+				if (
+					notificationIds.includes(pagingComponent.value.items[i].id)
+				) {
 					pagingComponent.value.items[i].isRead = true;
 				}
 			}
diff --git a/packages/client/src/components/MkNumber.vue b/packages/client/src/components/MkNumber.vue
index f24b362375..5fa0f765f5 100644
--- a/packages/client/src/components/MkNumber.vue
+++ b/packages/client/src/components/MkNumber.vue
@@ -1,11 +1,11 @@
 <template>
-<span>{{ number(Math.floor(tweened.number)) }}</span>
+	<span>{{ number(Math.floor(tweened.number)) }}</span>
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive, watch } from 'vue';
-import gsap from 'gsap';
-import number from '@/filters/number';
+import { ref, reactive, watch } from "vue";
+import gsap from "gsap";
+import number from "@/filters/number";
 
 const props = defineProps<{
 	value: number;
@@ -15,9 +15,13 @@ const tweened = reactive({
 	number: 0,
 });
 
-watch(() => props.value, (n) => {
-	gsap.to(tweened, { duration: 0.6, number: Number(n) || 0 });
-}, {
-	immediate: true,
-});
+watch(
+	() => props.value,
+	(n) => {
+		gsap.to(tweened, { duration: 0.6, number: Number(n) || 0 });
+	},
+	{
+		immediate: true,
+	}
+);
 </script>
diff --git a/packages/client/src/components/MkNumberDiff.vue b/packages/client/src/components/MkNumberDiff.vue
index e7d4a5472a..11b0ad3743 100644
--- a/packages/client/src/components/MkNumberDiff.vue
+++ b/packages/client/src/components/MkNumberDiff.vue
@@ -1,12 +1,13 @@
 <template>
-<span class="ceaaebcd" :class="{ isPlus, isMinus, isZero }">
-	<slot name="before"></slot>{{ isPlus ? '+' : '' }}{{ number(value) }}<slot name="after"></slot>
-</span>
+	<span class="ceaaebcd" :class="{ isPlus, isMinus, isZero }">
+		<slot name="before"></slot>{{ isPlus ? "+" : "" }}{{ number(value)
+		}}<slot name="after"></slot>
+	</span>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent } from 'vue';
-import number from '@/filters/number';
+import { computed, defineComponent } from "vue";
+import number from "@/filters/number";
 
 export default defineComponent({
 	props: {
diff --git a/packages/client/src/components/MkObjectView.value.vue b/packages/client/src/components/MkObjectView.value.vue
index 0c7230d783..8b024229ea 100644
--- a/packages/client/src/components/MkObjectView.value.vue
+++ b/packages/client/src/components/MkObjectView.value.vue
@@ -1,39 +1,66 @@
 <template>
-<div class="igpposuu _monospace">
-	<div v-if="value === null" class="null">null</div>
-	<div v-else-if="typeof value === 'boolean'" class="boolean" :class="{ true: value, false: !value }">{{ value ? 'true' : 'false' }}</div>
-	<div v-else-if="typeof value === 'string'" class="string">"{{ value }}"</div>
-	<div v-else-if="typeof value === 'number'" class="number">{{ number(value) }}</div>
-	<div v-else-if="isArray(value) && isEmpty(value)" class="array empty">[]</div>
-	<div v-else-if="isArray(value)" class="array">
-		<div v-for="i in value.length" class="element">
-			{{ i }}: <XValue :value="value[i - 1]" collapsed/>
+	<div class="igpposuu _monospace">
+		<div v-if="value === null" class="null">null</div>
+		<div
+			v-else-if="typeof value === 'boolean'"
+			class="boolean"
+			:class="{ true: value, false: !value }"
+		>
+			{{ value ? "true" : "false" }}
 		</div>
-	</div>
-	<div v-else-if="isObject(value) && isEmpty(value)" class="object empty">{}</div>
-	<div v-else-if="isObject(value)" class="object">
-		<div v-for="k in Object.keys(value)" class="kv">
-			<button class="toggle _button" :class="{ visible: collapsable(value[k]) }" @click="collapsed[k] = !collapsed[k]">{{ collapsed[k] ? '+' : '-' }}</button>
-			<div class="k">{{ k }}:</div>
-			<div v-if="collapsed[k]" class="v">
-				<button class="_button" @click="collapsed[k] = !collapsed[k]">
-					<template v-if="typeof value[k] === 'string'">"..."</template>
-					<template v-else-if="isArray(value[k])">[...]</template>
-					<template v-else-if="isObject(value[k])">{...}</template>
-				</button>
+		<div v-else-if="typeof value === 'string'" class="string">
+			"{{ value }}"
+		</div>
+		<div v-else-if="typeof value === 'number'" class="number">
+			{{ number(value) }}
+		</div>
+		<div v-else-if="isArray(value) && isEmpty(value)" class="array empty">
+			[]
+		</div>
+		<div v-else-if="isArray(value)" class="array">
+			<div v-for="i in value.length" class="element">
+				{{ i }}: <XValue :value="value[i - 1]" collapsed />
+			</div>
+		</div>
+		<div v-else-if="isObject(value) && isEmpty(value)" class="object empty">
+			{}
+		</div>
+		<div v-else-if="isObject(value)" class="object">
+			<div v-for="k in Object.keys(value)" class="kv">
+				<button
+					class="toggle _button"
+					:class="{ visible: collapsable(value[k]) }"
+					@click="collapsed[k] = !collapsed[k]"
+				>
+					{{ collapsed[k] ? "+" : "-" }}
+				</button>
+				<div class="k">{{ k }}:</div>
+				<div v-if="collapsed[k]" class="v">
+					<button
+						class="_button"
+						@click="collapsed[k] = !collapsed[k]"
+					>
+						<template v-if="typeof value[k] === 'string'"
+							>"..."</template
+						>
+						<template v-else-if="isArray(value[k])">[...]</template>
+						<template v-else-if="isObject(value[k])"
+							>{...}</template
+						>
+					</button>
+				</div>
+				<div v-else class="v"><XValue :value="value[k]" /></div>
 			</div>
-			<div v-else class="v"><XValue :value="value[k]"/></div>
 		</div>
 	</div>
-</div>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, reactive, ref } from 'vue';
-import number from '@/filters/number';
+import { computed, defineComponent, reactive, ref } from "vue";
+import number from "@/filters/number";
 
 export default defineComponent({
-	name: 'XValue',
+	name: "XValue",
 
 	props: {
 		value: {
@@ -51,7 +78,7 @@ export default defineComponent({
 		}
 
 		function isObject(v): boolean {
-			return typeof v === 'object' && !Array.isArray(v) && v !== null;
+			return typeof v === "object" && !Array.isArray(v) && v !== null;
 		}
 
 		function isArray(v): boolean {
@@ -59,7 +86,10 @@ export default defineComponent({
 		}
 
 		function isEmpty(v): boolean {
-			return (isArray(v) && v.length === 0) || (isObject(v) && Object.keys(v).length === 0);
+			return (
+				(isArray(v) && v.length === 0) ||
+				(isObject(v) && Object.keys(v).length === 0)
+			);
 		}
 
 		function collapsable(v): boolean {
diff --git a/packages/client/src/components/MkObjectView.vue b/packages/client/src/components/MkObjectView.vue
index 55578a37f6..b3fce680b2 100644
--- a/packages/client/src/components/MkObjectView.vue
+++ b/packages/client/src/components/MkObjectView.vue
@@ -1,12 +1,12 @@
 <template>
-<div class="zhyxdalp">
-	<XValue :value="value" :collapsed="false"/>
-</div>
+	<div class="zhyxdalp">
+		<XValue :value="value" :collapsed="false" />
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import XValue from './MkObjectView.value.vue';
+import {} from "vue";
+import XValue from "./MkObjectView.value.vue";
 
 const props = defineProps<{
 	value: Record<string, unknown>;
@@ -15,6 +15,5 @@ const props = defineProps<{
 
 <style lang="scss" scoped>
 .zhyxdalp {
-
 }
 </style>
diff --git a/packages/client/src/components/MkPagePreview.vue b/packages/client/src/components/MkPagePreview.vue
index ab7062d3e9..034c6fed63 100644
--- a/packages/client/src/components/MkPagePreview.vue
+++ b/packages/client/src/components/MkPagePreview.vue
@@ -1,22 +1,41 @@
 <template>
-<MkA :to="`/@${page.user.username}/pages/${page.name}`" class="vhpxefrj _block" tabindex="-1" :behavior="`${ui === 'deck' ? 'window' : null}`">
-	<div v-if="page.eyeCatchingImage" class="thumbnail" :style="`background-image: url('${page.eyeCatchingImage.thumbnailUrl}')`"></div>
-	<article>
-		<header>
-			<h1 :title="page.title">{{ page.title }}</h1>
-		</header>
-		<p v-if="page.summary" :title="page.summary">{{ page.summary.length > 85 ? page.summary.slice(0, 85) + '…' : page.summary }}</p>
-		<footer>
-			<img class="icon" :src="page.user.avatarUrl" aria-label="none"/>
-			<p>{{ userName(page.user) }}</p>
-		</footer>
-	</article>
-</MkA>
+	<MkA
+		:to="`/@${page.user.username}/pages/${page.name}`"
+		class="vhpxefrj _block"
+		tabindex="-1"
+		:behavior="`${ui === 'deck' ? 'window' : null}`"
+	>
+		<div
+			v-if="page.eyeCatchingImage"
+			class="thumbnail"
+			:style="`background-image: url('${page.eyeCatchingImage.thumbnailUrl}')`"
+		></div>
+		<article>
+			<header>
+				<h1 :title="page.title">{{ page.title }}</h1>
+			</header>
+			<p v-if="page.summary" :title="page.summary">
+				{{
+					page.summary.length > 85
+						? page.summary.slice(0, 85) + "…"
+						: page.summary
+				}}
+			</p>
+			<footer>
+				<img
+					class="icon"
+					:src="page.user.avatarUrl"
+					aria-label="none"
+				/>
+				<p>{{ userName(page.user) }}</p>
+			</footer>
+		</article>
+	</MkA>
 </template>
 
 <script lang="ts" setup>
-import { userName } from '@/filters/user';
-import { ui } from '@/config';
+import { userName } from "@/filters/user";
+import { ui } from "@/config";
 
 defineProps<{
 	page: any;
@@ -149,5 +168,4 @@ defineProps<{
 		}
 	}
 }
-
 </style>
diff --git a/packages/client/src/components/MkPageWindow.vue b/packages/client/src/components/MkPageWindow.vue
index 497b27c6b0..bb5066b7e4 100644
--- a/packages/client/src/components/MkPageWindow.vue
+++ b/packages/client/src/components/MkPageWindow.vue
@@ -1,63 +1,74 @@
 <template>
-<XWindow
-	ref="windowEl"
-	:initial-width="500"
-	:initial-height="500"
-	:can-resize="true"
-	:close-button="true"
-	:buttons-left="buttonsLeft"
-	:buttons-right="buttonsRight"
-	:contextmenu="contextmenu"
-	@closed="$emit('closed')"
->
-	<template #header>
-		<template v-if="pageMetadata?.value">
-			<i v-if="pageMetadata.value.icon" class="icon" :class="pageMetadata.value.icon" style="margin-right: 0.5em;"></i>
-			<span>{{ pageMetadata.value.title }}</span>
+	<XWindow
+		ref="windowEl"
+		:initial-width="500"
+		:initial-height="500"
+		:can-resize="true"
+		:close-button="true"
+		:buttons-left="buttonsLeft"
+		:buttons-right="buttonsRight"
+		:contextmenu="contextmenu"
+		@closed="$emit('closed')"
+	>
+		<template #header>
+			<template v-if="pageMetadata?.value">
+				<i
+					v-if="pageMetadata.value.icon"
+					class="icon"
+					:class="pageMetadata.value.icon"
+					style="margin-right: 0.5em"
+				></i>
+				<span>{{ pageMetadata.value.title }}</span>
+			</template>
 		</template>
-	</template>
 
-	<div class="yrolvcoq" :style="{ background: pageMetadata?.value?.bg }">
-		<RouterView :router="router"/>
-	</div>
-</XWindow>
+		<div class="yrolvcoq" :style="{ background: pageMetadata?.value?.bg }">
+			<RouterView :router="router" />
+		</div>
+	</XWindow>
 </template>
 
 <script lang="ts" setup>
-import { ComputedRef, inject, provide } from 'vue';
-import RouterView from '@/components/global/RouterView.vue';
-import XWindow from '@/components/MkWindow.vue';
-import { popout as _popout } from '@/scripts/popout';
-import copyToClipboard from '@/scripts/copy-to-clipboard';
-import { url } from '@/config';
-import * as os from '@/os';
-import { mainRouter, routes } from '@/router';
-import { Router } from '@/nirax';
-import { i18n } from '@/i18n';
-import { PageMetadata, provideMetadataReceiver, setPageMetadata } from '@/scripts/page-metadata';
+import { ComputedRef, inject, provide } from "vue";
+import RouterView from "@/components/global/RouterView.vue";
+import XWindow from "@/components/MkWindow.vue";
+import { popout as _popout } from "@/scripts/popout";
+import copyToClipboard from "@/scripts/copy-to-clipboard";
+import { url } from "@/config";
+import * as os from "@/os";
+import { mainRouter, routes } from "@/router";
+import { Router } from "@/nirax";
+import { i18n } from "@/i18n";
+import {
+	PageMetadata,
+	provideMetadataReceiver,
+	setPageMetadata,
+} from "@/scripts/page-metadata";
 
 const props = defineProps<{
 	initialPath: string;
 }>();
 
 defineEmits<{
-	(ev: 'closed'): void;
+	(ev: "closed"): void;
 }>();
 
 const router = new Router(routes, props.initialPath);
 
 let pageMetadata = $ref<null | ComputedRef<PageMetadata>>();
 let windowEl = $ref<InstanceType<typeof XWindow>>();
-const history = $ref<{ path: string; key: any; }[]>([{
-	path: router.getCurrentPath(),
-	key: router.getCurrentKey(),
-}]);
+const history = $ref<{ path: string; key: any }[]>([
+	{
+		path: router.getCurrentPath(),
+		key: router.getCurrentKey(),
+	},
+]);
 const buttonsLeft = $computed(() => {
 	const buttons = [];
 
 	if (history.length > 1) {
 		buttons.push({
-			icon: 'ph-caret-left ph-bold ph-lg',
+			icon: "ph-caret-left ph-bold ph-lg",
 			onClick: back,
 		});
 	}
@@ -65,48 +76,55 @@ const buttonsLeft = $computed(() => {
 	return buttons;
 });
 const buttonsRight = $computed(() => {
-	const buttons = [{
-		icon: 'ph-arrows-out-simple ph-bold ph-lg',
-		title: i18n.ts.showInPage,
-		onClick: expand,
-	}];
+	const buttons = [
+		{
+			icon: "ph-arrows-out-simple ph-bold ph-lg",
+			title: i18n.ts.showInPage,
+			onClick: expand,
+		},
+	];
 
 	return buttons;
 });
 
-router.addListener('push', ctx => {
+router.addListener("push", (ctx) => {
 	history.push({ path: ctx.path, key: ctx.key });
 });
 
-provide('router', router);
+provide("router", router);
 provideMetadataReceiver((info) => {
 	pageMetadata = info;
 });
-provide('shouldOmitHeaderTitle', true);
-provide('shouldHeaderThin', true);
+provide("shouldOmitHeaderTitle", true);
+provide("shouldHeaderThin", true);
 
-const contextmenu = $computed(() => ([{
-	icon: 'ph-arrows-out-simple ph-bold ph-lg',
-	text: i18n.ts.showInPage,
-	action: expand,
-}, {
-	icon: 'ph-arrow-square-out ph-bold ph-lg',
-	text: i18n.ts.popout,
-	action: popout,
-}, {
-	icon: 'ph-arrow-square-out ph-bold ph-lg',
-	text: i18n.ts.openInNewTab,
-	action: () => {
-		window.open(url + router.getCurrentPath(), '_blank');
-		windowEl.close();
+const contextmenu = $computed(() => [
+	{
+		icon: "ph-arrows-out-simple ph-bold ph-lg",
+		text: i18n.ts.showInPage,
+		action: expand,
 	},
-}, {
-	icon: 'ph-link-simple ph-bold ph-lg',
-	text: i18n.ts.copyLink,
-	action: () => {
-		copyToClipboard(url + router.getCurrentPath());
+	{
+		icon: "ph-arrow-square-out ph-bold ph-lg",
+		text: i18n.ts.popout,
+		action: popout,
 	},
-}]));
+	{
+		icon: "ph-arrow-square-out ph-bold ph-lg",
+		text: i18n.ts.openInNewTab,
+		action: () => {
+			window.open(url + router.getCurrentPath(), "_blank");
+			windowEl.close();
+		},
+	},
+	{
+		icon: "ph-link-simple ph-bold ph-lg",
+		text: i18n.ts.copyLink,
+		action: () => {
+			copyToClipboard(url + router.getCurrentPath());
+		},
+	},
+]);
 
 function menu(ev) {
 	os.popupMenu(contextmenu, ev.currentTarget ?? ev.target);
@@ -114,7 +132,10 @@ function menu(ev) {
 
 function back() {
 	history.pop();
-	router.replace(history[history.length - 1].path, history[history.length - 1].key);
+	router.replace(
+		history[history.length - 1].path,
+		history[history.length - 1].key
+	);
 }
 
 function close() {
@@ -122,7 +143,7 @@ function close() {
 }
 
 function expand() {
-	mainRouter.push(router.getCurrentPath(), 'forcePage');
+	mainRouter.push(router.getCurrentPath(), "forcePage");
 	windowEl.close();
 }
 
diff --git a/packages/client/src/components/MkPagination.vue b/packages/client/src/components/MkPagination.vue
index 5b71598c0b..24018e5269 100644
--- a/packages/client/src/components/MkPagination.vue
+++ b/packages/client/src/components/MkPagination.vue
@@ -1,357 +1,490 @@
 <template>
 	<transition :name="$store.state.animation ? 'fade' : ''" mode="out-in">
-		<MkLoading v-if="fetching"/>
+		<MkLoading v-if="fetching" />
 
-		<MkError v-else-if="error" @retry="init()"/>
+		<MkError v-else-if="error" @retry="init()" />
 
 		<div v-else-if="empty" key="_empty_" class="empty">
 			<slot name="empty">
 				<div class="_fullinfo">
-					<img src="/static-assets/badges/info.png" class="_ghost" alt="Error"/>
+					<img
+						src="/static-assets/badges/info.png"
+						class="_ghost"
+						alt="Error"
+					/>
 					<div>{{ i18n.ts.nothing }}</div>
 				</div>
 			</slot>
 		</div>
 
 		<div v-else ref="rootEl">
-			<div v-show="pagination.reversed && more" key="_more_" class="cxiknjgy _gap">
-				<MkButton v-if="!moreFetching" class="button" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" primary @click="fetchMoreAhead">
+			<div
+				v-show="pagination.reversed && more"
+				key="_more_"
+				class="cxiknjgy _gap"
+			>
+				<MkButton
+					v-if="!moreFetching"
+					class="button"
+					:disabled="moreFetching"
+					:style="{ cursor: moreFetching ? 'wait' : 'pointer' }"
+					primary
+					@click="fetchMoreAhead"
+				>
 					{{ i18n.ts.loadMore }}
 				</MkButton>
-				<MkLoading v-else class="loading"/>
+				<MkLoading v-else class="loading" />
 			</div>
 			<slot :items="items"></slot>
-			<div v-show="!pagination.reversed && more" key="_more_" class="cxiknjgy _gap">
-				<MkButton v-if="!moreFetching" v-appear="($store.state.enableInfiniteScroll && !disableAutoLoad) ? fetchMore : null" class="button" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" primary @click="fetchMore">
+			<div
+				v-show="!pagination.reversed && more"
+				key="_more_"
+				class="cxiknjgy _gap"
+			>
+				<MkButton
+					v-if="!moreFetching"
+					v-appear="
+						$store.state.enableInfiniteScroll && !disableAutoLoad
+							? fetchMore
+							: null
+					"
+					class="button"
+					:disabled="moreFetching"
+					:style="{ cursor: moreFetching ? 'wait' : 'pointer' }"
+					primary
+					@click="fetchMore"
+				>
 					{{ i18n.ts.loadMore }}
 				</MkButton>
-				<MkLoading v-else class="loading"/>
+				<MkLoading v-else class="loading" />
 			</div>
 		</div>
 	</transition>
-	</template>
+</template>
 
-	<script lang="ts" setup>
-	import { computed, ComputedRef, isRef, markRaw, onActivated, onDeactivated, Ref, ref, watch } from 'vue';
-	import * as misskey from 'calckey-js';
-	import * as os from '@/os';
-	import { onScrollTop, isTopVisible, getScrollPosition, getScrollContainer } from '@/scripts/scroll';
-	import MkButton from '@/components/MkButton.vue';
-	import { i18n } from '@/i18n';
+<script lang="ts" setup>
+import {
+	computed,
+	ComputedRef,
+	isRef,
+	markRaw,
+	onActivated,
+	onDeactivated,
+	Ref,
+	ref,
+	watch,
+} from "vue";
+import * as misskey from "calckey-js";
+import * as os from "@/os";
+import {
+	onScrollTop,
+	isTopVisible,
+	getScrollPosition,
+	getScrollContainer,
+} from "@/scripts/scroll";
+import MkButton from "@/components/MkButton.vue";
+import { i18n } from "@/i18n";
 
-	export type Paging<E extends keyof misskey.Endpoints = keyof misskey.Endpoints> = {
-		endpoint: E;
-		limit: number;
-		params?: misskey.Endpoints[E]['req'] | ComputedRef<misskey.Endpoints[E]['req']>;
+export type Paging<
+	E extends keyof misskey.Endpoints = keyof misskey.Endpoints
+> = {
+	endpoint: E;
+	limit: number;
+	params?:
+		| misskey.Endpoints[E]["req"]
+		| ComputedRef<misskey.Endpoints[E]["req"]>;
 
-		/**
-		 * 検索APIのような、ページング不可なエンドポイントを利用する場合
-		 * (そのようなAPIをこの関数で使うのは若干矛盾してるけど)
-		 */
-		noPaging?: boolean;
+	/**
+	 * 検索APIのような、ページング不可なエンドポイントを利用する場合
+	 * (そのようなAPIをこの関数で使うのは若干矛盾してるけど)
+	 */
+	noPaging?: boolean;
 
-		/**
-		 * items 配列の中身を逆順にする(新しい方が最後)
-		 */
-		reversed?: boolean;
+	/**
+	 * items 配列の中身を逆順にする(新しい方が最後)
+	 */
+	reversed?: boolean;
 
-		offsetMode?: boolean;
-	};
+	offsetMode?: boolean;
+};
 
-	const SECOND_FETCH_LIMIT = 30;
+const SECOND_FETCH_LIMIT = 30;
 
-	const props = withDefaults(defineProps<{
+const props = withDefaults(
+	defineProps<{
 		pagination: Paging;
 		disableAutoLoad?: boolean;
 		displayLimit?: number;
-	}>(), {
+	}>(),
+	{
 		displayLimit: 30,
-	});
+	}
+);
 
-	const emit = defineEmits<{
-		(ev: 'queue', count: number): void;
-	}>();
+const emit = defineEmits<{
+	(ev: "queue", count: number): void;
+}>();
 
-	type Item = { id: string; [another: string]: unknown; };
+type Item = { id: string; [another: string]: unknown };
 
-	const rootEl = ref<HTMLElement>();
-	const items = ref<Item[]>([]);
-	const queue = ref<Item[]>([]);
-	const offset = ref(0);
-	const fetching = ref(true);
-	const moreFetching = ref(false);
-	const more = ref(false);
-	const backed = ref(false); // 遡り中か否か
-	const isBackTop = ref(false);
-	const empty = computed(() => items.value.length === 0);
-	const error = ref(false);
+const rootEl = ref<HTMLElement>();
+const items = ref<Item[]>([]);
+const queue = ref<Item[]>([]);
+const offset = ref(0);
+const fetching = ref(true);
+const moreFetching = ref(false);
+const more = ref(false);
+const backed = ref(false); // 遡り中か否か
+const isBackTop = ref(false);
+const empty = computed(() => items.value.length === 0);
+const error = ref(false);
 
-	const init = async (): Promise<void> => {
-		queue.value = [];
-		fetching.value = true;
-		const params = props.pagination.params ? isRef(props.pagination.params) ? props.pagination.params.value : props.pagination.params : {};
-		await os.api(props.pagination.endpoint, {
+const init = async (): Promise<void> => {
+	queue.value = [];
+	fetching.value = true;
+	const params = props.pagination.params
+		? isRef(props.pagination.params)
+			? props.pagination.params.value
+			: props.pagination.params
+		: {};
+	await os
+		.api(props.pagination.endpoint, {
 			...params,
-			limit: props.pagination.noPaging ? (props.pagination.limit || 10) : (props.pagination.limit || 10) + 1,
-		}).then(res => {
-			for (let i = 0; i < res.length; i++) {
-				const item = res[i];
-				if (props.pagination.reversed) {
-					if (i === res.length - 2) item._shouldInsertAd_ = true;
-				} else {
-					if (i === 3) item._shouldInsertAd_ = true;
+			limit: props.pagination.noPaging
+				? props.pagination.limit || 10
+				: (props.pagination.limit || 10) + 1,
+		})
+		.then(
+			(res) => {
+				for (let i = 0; i < res.length; i++) {
+					const item = res[i];
+					if (props.pagination.reversed) {
+						if (i === res.length - 2) item._shouldInsertAd_ = true;
+					} else {
+						if (i === 3) item._shouldInsertAd_ = true;
+					}
 				}
+				if (
+					!props.pagination.noPaging &&
+					res.length > (props.pagination.limit || 10)
+				) {
+					res.pop();
+					items.value = props.pagination.reversed
+						? [...res].reverse()
+						: res;
+					more.value = true;
+				} else {
+					items.value = props.pagination.reversed
+						? [...res].reverse()
+						: res;
+					more.value = false;
+				}
+				offset.value = res.length;
+				error.value = false;
+				fetching.value = false;
+			},
+			(err) => {
+				error.value = true;
+				fetching.value = false;
 			}
-			if (!props.pagination.noPaging && (res.length > (props.pagination.limit || 10))) {
-				res.pop();
-				items.value = props.pagination.reversed ? [...res].reverse() : res;
-				more.value = true;
-			} else {
-				items.value = props.pagination.reversed ? [...res].reverse() : res;
-				more.value = false;
-			}
-			offset.value = res.length;
-			error.value = false;
-			fetching.value = false;
-		}, err => {
-			error.value = true;
-			fetching.value = false;
-		});
-	};
+		);
+};
 
-	const reload = (): void => {
-		items.value = [];
-		init();
-	};
+const reload = (): void => {
+	items.value = [];
+	init();
+};
 
-	const refresh = async (): void => {
-		const params = props.pagination.params ? isRef(props.pagination.params) ? props.pagination.params.value : props.pagination.params : {};
-		await os.api(props.pagination.endpoint, {
+const refresh = async (): void => {
+	const params = props.pagination.params
+		? isRef(props.pagination.params)
+			? props.pagination.params.value
+			: props.pagination.params
+		: {};
+	await os
+		.api(props.pagination.endpoint, {
 			...params,
 			limit: items.value.length + 1,
 			offset: 0,
-		}).then(res => {
-			let ids = items.value.reduce((a, b) => {
-				a[b.id] = true;
-				return a;
-			}, {} as { [id: string]: boolean; });
+		})
+		.then(
+			(res) => {
+				let ids = items.value.reduce((a, b) => {
+					a[b.id] = true;
+					return a;
+				}, {} as { [id: string]: boolean });
 
-			for (let i = 0; i < res.length; i++) {
-				const item = res[i];
-				if (!updateItem(item.id, old => item)) {
-					append(item);
+				for (let i = 0; i < res.length; i++) {
+					const item = res[i];
+					if (!updateItem(item.id, (old) => item)) {
+						append(item);
+					}
+					delete ids[item.id];
 				}
-				delete ids[item.id];
-			}
 
-			for (const id in ids) {
-				removeItem(i => i.id === id);
+				for (const id in ids) {
+					removeItem((i) => i.id === id);
+				}
+			},
+			(err) => {
+				error.value = true;
+				fetching.value = false;
 			}
-		}, err => {
-			error.value = true;
-			fetching.value = false;
-		});
-	};
+		);
+};
 
-	const fetchMore = async (): Promise<void> => {
-		if (!more.value || fetching.value || moreFetching.value || items.value.length === 0) return;
-		moreFetching.value = true;
-		backed.value = true;
-		const params = props.pagination.params ? isRef(props.pagination.params) ? props.pagination.params.value : props.pagination.params : {};
-		await os.api(props.pagination.endpoint, {
+const fetchMore = async (): Promise<void> => {
+	if (
+		!more.value ||
+		fetching.value ||
+		moreFetching.value ||
+		items.value.length === 0
+	)
+		return;
+	moreFetching.value = true;
+	backed.value = true;
+	const params = props.pagination.params
+		? isRef(props.pagination.params)
+			? props.pagination.params.value
+			: props.pagination.params
+		: {};
+	await os
+		.api(props.pagination.endpoint, {
 			...params,
 			limit: SECOND_FETCH_LIMIT + 1,
-			...(props.pagination.offsetMode ? {
-				offset: offset.value,
-			} : props.pagination.reversed ? {
-				sinceId: items.value[0].id,
-			} : {
-				untilId: items.value[items.value.length - 1].id,
-			}),
-		}).then(res => {
-			for (let i = 0; i < res.length; i++) {
-				const item = res[i];
-				if (props.pagination.reversed) {
-					if (i === res.length - 9) item._shouldInsertAd_ = true;
-				} else {
-					if (i === 10) item._shouldInsertAd_ = true;
-				}
-			}
-			if (res.length > SECOND_FETCH_LIMIT) {
-				res.pop();
-				items.value = props.pagination.reversed ? [...res].reverse().concat(items.value) : items.value.concat(res);
-				more.value = true;
-			} else {
-				items.value = props.pagination.reversed ? [...res].reverse().concat(items.value) : items.value.concat(res);
-				more.value = false;
-			}
-			offset.value += res.length;
-			moreFetching.value = false;
-		}, err => {
-			moreFetching.value = false;
-		});
-	};
-
-	const fetchMoreAhead = async (): Promise<void> => {
-		if (!more.value || fetching.value || moreFetching.value || items.value.length === 0) return;
-		moreFetching.value = true;
-		const params = props.pagination.params ? isRef(props.pagination.params) ? props.pagination.params.value : props.pagination.params : {};
-		await os.api(props.pagination.endpoint, {
-			...params,
-			limit: SECOND_FETCH_LIMIT + 1,
-			...(props.pagination.offsetMode ? {
-				offset: offset.value,
-			} : props.pagination.reversed ? {
-				untilId: items.value[0].id,
-			} : {
-				sinceId: items.value[items.value.length - 1].id,
-			}),
-		}).then(res => {
-			if (res.length > SECOND_FETCH_LIMIT) {
-				res.pop();
-				items.value = props.pagination.reversed ? [...res].reverse().concat(items.value) : items.value.concat(res);
-				more.value = true;
-			} else {
-				items.value = props.pagination.reversed ? [...res].reverse().concat(items.value) : items.value.concat(res);
-				more.value = false;
-			}
-			offset.value += res.length;
-			moreFetching.value = false;
-		}, err => {
-			moreFetching.value = false;
-		});
-	};
-
-	const prepend = (item: Item): void => {
-		if (props.pagination.reversed) {
-			if (rootEl.value) {
-				const container = getScrollContainer(rootEl.value);
-				if (container == null) {
-					// TODO?
-				} else {
-					const pos = getScrollPosition(rootEl.value);
-					const viewHeight = container.clientHeight;
-					const height = container.scrollHeight;
-					const isBottom = (pos + viewHeight > height - 32);
-					if (isBottom) {
-						// オーバーフローしたら古いアイテムは捨てる
-						if (items.value.length >= props.displayLimit) {
-							// このやり方だとVue 3.2以降アニメーションが動かなくなる
-							//items.value = items.value.slice(-props.displayLimit);
-							while (items.value.length >= props.displayLimit) {
-								items.value.shift();
-							}
-							more.value = true;
-						}
+			...(props.pagination.offsetMode
+				? {
+						offset: offset.value,
+				  }
+				: props.pagination.reversed
+				? {
+						sinceId: items.value[0].id,
+				  }
+				: {
+						untilId: items.value[items.value.length - 1].id,
+				  }),
+		})
+		.then(
+			(res) => {
+				for (let i = 0; i < res.length; i++) {
+					const item = res[i];
+					if (props.pagination.reversed) {
+						if (i === res.length - 9) item._shouldInsertAd_ = true;
+					} else {
+						if (i === 10) item._shouldInsertAd_ = true;
 					}
 				}
-			}
-			items.value.push(item);
-			// TODO
-		} else {
-			// 初回表示時はunshiftだけでOK
-			if (!rootEl.value) {
-				items.value.unshift(item);
-				return;
-			}
-
-			const isTop = isBackTop.value || (document.body.contains(rootEl.value) && isTopVisible(rootEl.value));
-
-			if (isTop) {
-				// Prepend the item
-				items.value.unshift(item);
-
-				// オーバーフローしたら古いアイテムは捨てる
-				if (items.value.length >= props.displayLimit) {
-					// このやり方だとVue 3.2以降アニメーションが動かなくなる
-					//this.items = items.value.slice(0, props.displayLimit);
-					while (items.value.length >= props.displayLimit) {
-						items.value.pop();
-					}
+				if (res.length > SECOND_FETCH_LIMIT) {
+					res.pop();
+					items.value = props.pagination.reversed
+						? [...res].reverse().concat(items.value)
+						: items.value.concat(res);
 					more.value = true;
+				} else {
+					items.value = props.pagination.reversed
+						? [...res].reverse().concat(items.value)
+						: items.value.concat(res);
+					more.value = false;
 				}
+				offset.value += res.length;
+				moreFetching.value = false;
+			},
+			(err) => {
+				moreFetching.value = false;
+			}
+		);
+};
+
+const fetchMoreAhead = async (): Promise<void> => {
+	if (
+		!more.value ||
+		fetching.value ||
+		moreFetching.value ||
+		items.value.length === 0
+	)
+		return;
+	moreFetching.value = true;
+	const params = props.pagination.params
+		? isRef(props.pagination.params)
+			? props.pagination.params.value
+			: props.pagination.params
+		: {};
+	await os
+		.api(props.pagination.endpoint, {
+			...params,
+			limit: SECOND_FETCH_LIMIT + 1,
+			...(props.pagination.offsetMode
+				? {
+						offset: offset.value,
+				  }
+				: props.pagination.reversed
+				? {
+						untilId: items.value[0].id,
+				  }
+				: {
+						sinceId: items.value[items.value.length - 1].id,
+				  }),
+		})
+		.then(
+			(res) => {
+				if (res.length > SECOND_FETCH_LIMIT) {
+					res.pop();
+					items.value = props.pagination.reversed
+						? [...res].reverse().concat(items.value)
+						: items.value.concat(res);
+					more.value = true;
+				} else {
+					items.value = props.pagination.reversed
+						? [...res].reverse().concat(items.value)
+						: items.value.concat(res);
+					more.value = false;
+				}
+				offset.value += res.length;
+				moreFetching.value = false;
+			},
+			(err) => {
+				moreFetching.value = false;
+			}
+		);
+};
+
+const prepend = (item: Item): void => {
+	if (props.pagination.reversed) {
+		if (rootEl.value) {
+			const container = getScrollContainer(rootEl.value);
+			if (container == null) {
+				// TODO?
 			} else {
-				queue.value.push(item);
-				onScrollTop(rootEl.value, () => {
-					for (const queueItem of queue.value) {
-						prepend(queueItem);
+				const pos = getScrollPosition(rootEl.value);
+				const viewHeight = container.clientHeight;
+				const height = container.scrollHeight;
+				const isBottom = pos + viewHeight > height - 32;
+				if (isBottom) {
+					// オーバーフローしたら古いアイテムは捨てる
+					if (items.value.length >= props.displayLimit) {
+						// このやり方だとVue 3.2以降アニメーションが動かなくなる
+						//items.value = items.value.slice(-props.displayLimit);
+						while (items.value.length >= props.displayLimit) {
+							items.value.shift();
+						}
+						more.value = true;
 					}
-					queue.value = [];
-				});
+				}
 			}
 		}
-	};
-
-	const append = (item: Item): void => {
 		items.value.push(item);
-	};
-
-	const removeItem = (finder: (item: Item) => boolean): boolean => {
-		const i = items.value.findIndex(finder);
-		if (i === -1) {
-			return false;
+		// TODO
+	} else {
+		// 初回表示時はunshiftだけでOK
+		if (!rootEl.value) {
+			items.value.unshift(item);
+			return;
 		}
 
-		items.value.splice(i, 1);
-		return true;
-	};
+		const isTop =
+			isBackTop.value ||
+			(document.body.contains(rootEl.value) &&
+				isTopVisible(rootEl.value));
 
-	const updateItem = (id: Item['id'], replacer: (old: Item) => Item): boolean => {
-		const i = items.value.findIndex(item => item.id === id);
-		if (i === -1) {
-			return false;
+		if (isTop) {
+			// Prepend the item
+			items.value.unshift(item);
+
+			// オーバーフローしたら古いアイテムは捨てる
+			if (items.value.length >= props.displayLimit) {
+				// このやり方だとVue 3.2以降アニメーションが動かなくなる
+				//this.items = items.value.slice(0, props.displayLimit);
+				while (items.value.length >= props.displayLimit) {
+					items.value.pop();
+				}
+				more.value = true;
+			}
+		} else {
+			queue.value.push(item);
+			onScrollTop(rootEl.value, () => {
+				for (const queueItem of queue.value) {
+					prepend(queueItem);
+				}
+				queue.value = [];
+			});
 		}
+	}
+};
 
-		items.value[i] = replacer(items.value[i]);
-		return true;
-	};
+const append = (item: Item): void => {
+	items.value.push(item);
+};
 
-	if (props.pagination.params && isRef(props.pagination.params)) {
-		watch(props.pagination.params, init, { deep: true });
+const removeItem = (finder: (item: Item) => boolean): boolean => {
+	const i = items.value.findIndex(finder);
+	if (i === -1) {
+		return false;
 	}
 
-	watch(queue, (a, b) => {
+	items.value.splice(i, 1);
+	return true;
+};
+
+const updateItem = (id: Item["id"], replacer: (old: Item) => Item): boolean => {
+	const i = items.value.findIndex((item) => item.id === id);
+	if (i === -1) {
+		return false;
+	}
+
+	items.value[i] = replacer(items.value[i]);
+	return true;
+};
+
+if (props.pagination.params && isRef(props.pagination.params)) {
+	watch(props.pagination.params, init, { deep: true });
+}
+
+watch(
+	queue,
+	(a, b) => {
 		if (a.length === 0 && b.length === 0) return;
-		emit('queue', queue.value.length);
-	}, { deep: true });
+		emit("queue", queue.value.length);
+	},
+	{ deep: true }
+);
 
-	init();
+init();
 
-	onActivated(() => {
-		isBackTop.value = false;
-	});
+onActivated(() => {
+	isBackTop.value = false;
+});
 
-	onDeactivated(() => {
-		isBackTop.value = window.scrollY === 0;
-	});
+onDeactivated(() => {
+	isBackTop.value = window.scrollY === 0;
+});
 
-	defineExpose({
-		items,
-		queue,
-		backed,
-		reload,
-		refresh,
-		prepend,
-		append,
-		removeItem,
-		updateItem,
-	});
-	</script>
+defineExpose({
+	items,
+	queue,
+	backed,
+	reload,
+	refresh,
+	prepend,
+	append,
+	removeItem,
+	updateItem,
+});
+</script>
 
-	<style lang="scss" scoped>
-	.fade-enter-active,
-	.fade-leave-active {
-		transition: opacity 0.125s ease;
+<style lang="scss" scoped>
+.fade-enter-active,
+.fade-leave-active {
+	transition: opacity 0.125s ease;
+}
+.fade-enter-from,
+.fade-leave-to {
+	opacity: 0;
+}
+
+.cxiknjgy {
+	> .button {
+		margin-left: auto;
+		margin-right: auto;
 	}
-	.fade-enter-from,
-	.fade-leave-to {
-		opacity: 0;
-	}
-
-	.cxiknjgy {
-		> .button {
-			margin-left: auto;
-			margin-right: auto;
-		}
-	}
-	</style>
+}
+</style>
diff --git a/packages/client/src/components/MkPoll.vue b/packages/client/src/components/MkPoll.vue
index 56d9400b55..db4c3350ff 100644
--- a/packages/client/src/components/MkPoll.vue
+++ b/packages/client/src/components/MkPoll.vue
@@ -1,34 +1,62 @@
 <template>
-<div class="tivcixzd" :class="{ done: closed || isVoted }">
-	<ul>
-		<li v-for="(choice, i) in note.poll.choices" :key="i" :class="{ voted: choice.voted }" @click.stop="vote(i)">
-			<div class="backdrop" :style="{ 'width': `${showResult ? (choice.votes / total * 100) : 0}%` }"></div>
-			<span>
-				<template v-if="choice.isVoted"><i class="ph-check ph-bold ph-lg"></i></template>
-				<Mfm :text="choice.text" :plain="true" :custom-emojis="note.emojis"/>
-				<span v-if="showResult" class="votes">({{ i18n.t('_poll.votesCount', { n: choice.votes }) }})</span>
-			</span>
-		</li>
-	</ul>
-	<p v-if="!readOnly">
-		<span>{{ i18n.t('_poll.totalVotes', { n: total }) }}</span>
-		<span> · </span>
-		<a v-if="!closed && !isVoted" @click.stop="showResult = !showResult">{{ showResult ? i18n.ts._poll.vote : i18n.ts._poll.showResult }}</a>
-		<span v-if="isVoted">{{ i18n.ts._poll.voted }}</span>
-		<span v-else-if="closed">{{ i18n.ts._poll.closed }}</span>
-		<span v-if="remaining > 0"> · {{ timer }}</span>
-	</p>
-</div>
+	<div class="tivcixzd" :class="{ done: closed || isVoted }">
+		<ul>
+			<li
+				v-for="(choice, i) in note.poll.choices"
+				:key="i"
+				:class="{ voted: choice.voted }"
+				@click.stop="vote(i)"
+			>
+				<div
+					class="backdrop"
+					:style="{
+						width: `${
+							showResult ? (choice.votes / total) * 100 : 0
+						}%`,
+					}"
+				></div>
+				<span>
+					<template v-if="choice.isVoted"
+						><i class="ph-check ph-bold ph-lg"></i
+					></template>
+					<Mfm
+						:text="choice.text"
+						:plain="true"
+						:custom-emojis="note.emojis"
+					/>
+					<span v-if="showResult" class="votes"
+						>({{
+							i18n.t("_poll.votesCount", { n: choice.votes })
+						}})</span
+					>
+				</span>
+			</li>
+		</ul>
+		<p v-if="!readOnly">
+			<span>{{ i18n.t("_poll.totalVotes", { n: total }) }}</span>
+			<span> · </span>
+			<a
+				v-if="!closed && !isVoted"
+				@click.stop="showResult = !showResult"
+				>{{
+					showResult ? i18n.ts._poll.vote : i18n.ts._poll.showResult
+				}}</a
+			>
+			<span v-if="isVoted">{{ i18n.ts._poll.voted }}</span>
+			<span v-else-if="closed">{{ i18n.ts._poll.closed }}</span>
+			<span v-if="remaining > 0"> · {{ timer }}</span>
+		</p>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { computed, onUnmounted, ref, toRef } from 'vue';
-import * as misskey from 'calckey-js';
-import { sum } from '@/scripts/array';
-import { pleaseLogin } from '@/scripts/please-login';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { useInterval } from '@/scripts/use-interval';
+import { computed, onUnmounted, ref, toRef } from "vue";
+import * as misskey from "calckey-js";
+import { sum } from "@/scripts/array";
+import { pleaseLogin } from "@/scripts/please-login";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
+import { useInterval } from "@/scripts/use-interval";
 
 const props = defineProps<{
 	note: misskey.entities.Note;
@@ -37,25 +65,42 @@ const props = defineProps<{
 
 const remaining = ref(-1);
 
-const total = computed(() => sum(props.note.poll.choices.map(x => x.votes)));
+const total = computed(() => sum(props.note.poll.choices.map((x) => x.votes)));
 const closed = computed(() => remaining.value === 0);
-const isVoted = computed(() => !props.note.poll.multiple && props.note.poll.choices.some(c => c.isVoted));
-const timer = computed(() => i18n.t(
-	remaining.value >= 86400 ? '_poll.remainingDays' :
-	remaining.value >= 3600 ? '_poll.remainingHours' :
-	remaining.value >= 60 ? '_poll.remainingMinutes' : '_poll.remainingSeconds', {
-		s: Math.floor(remaining.value % 60),
-		m: Math.floor(remaining.value / 60) % 60,
-		h: Math.floor(remaining.value / 3600) % 24,
-		d: Math.floor(remaining.value / 86400),
-	}));
+const isVoted = computed(
+	() =>
+		!props.note.poll.multiple &&
+		props.note.poll.choices.some((c) => c.isVoted)
+);
+const timer = computed(() =>
+	i18n.t(
+		remaining.value >= 86400
+			? "_poll.remainingDays"
+			: remaining.value >= 3600
+			? "_poll.remainingHours"
+			: remaining.value >= 60
+			? "_poll.remainingMinutes"
+			: "_poll.remainingSeconds",
+		{
+			s: Math.floor(remaining.value % 60),
+			m: Math.floor(remaining.value / 60) % 60,
+			h: Math.floor(remaining.value / 3600) % 24,
+			d: Math.floor(remaining.value / 86400),
+		}
+	)
+);
 
 const showResult = ref(props.readOnly || isVoted.value);
 
 // 期限付きアンケート
 if (props.note.poll.expiresAt) {
 	const tick = () => {
-		remaining.value = Math.floor(Math.max(new Date(props.note.poll.expiresAt).getTime() - Date.now(), 0) / 1000);
+		remaining.value = Math.floor(
+			Math.max(
+				new Date(props.note.poll.expiresAt).getTime() - Date.now(),
+				0
+			) / 1000
+		);
 		if (remaining.value === 0) {
 			showResult.value = true;
 		}
@@ -73,12 +118,14 @@ const vote = async (id) => {
 	if (props.readOnly || closed.value || isVoted.value) return;
 
 	const { canceled } = await os.confirm({
-		type: 'question',
-		text: i18n.t('voteConfirm', { choice: props.note.poll.choices[id].text }),
+		type: "question",
+		text: i18n.t("voteConfirm", {
+			choice: props.note.poll.choices[id].text,
+		}),
 	});
 	if (canceled) return;
 
-	await os.api('notes/polls/vote', {
+	await os.api("notes/polls/vote", {
 		noteId: props.note.id,
 		choice: id,
 	});
@@ -111,7 +158,11 @@ const vote = async (id) => {
 				left: 0;
 				height: 100%;
 				background: var(--accent);
-				background: linear-gradient(90deg,var(--buttonGradateA),var(--buttonGradateB));
+				background: linear-gradient(
+					90deg,
+					var(--buttonGradateA),
+					var(--buttonGradateB)
+				);
 				transition: width 1s ease;
 			}
 
diff --git a/packages/client/src/components/MkPollEditor.vue b/packages/client/src/components/MkPollEditor.vue
index b5f8ea594f..95cc11302b 100644
--- a/packages/client/src/components/MkPollEditor.vue
+++ b/packages/client/src/components/MkPollEditor.vue
@@ -1,61 +1,84 @@
 <template>
-<div class="zmdxowus">
-	<p v-if="choices.length < 2" class="caution">
-		<i class="ph-warning ph-bold ph-lg"></i>{{ i18n.ts._poll.noOnlyOneChoice }}
-	</p>
-	<ul>
-		<li v-for="(choice, i) in choices" :key="i">
-			<MkInput class="input" small :model-value="choice" :placeholder="i18n.t('_poll.choiceN', { n: i + 1 })" @update:modelValue="onInput(i, $event)">
-			</MkInput>
-			<button class="_button" @click="remove(i)">
-				<i class="ph-x ph-bold ph-lg"></i>
-			</button>
-		</li>
-	</ul>
-	<MkButton v-if="choices.length < 10" class="add" @click="add">{{ i18n.ts.add }}</MkButton>
-	<MkButton v-else class="add" disabled>{{ i18n.ts._poll.noMore }}</MkButton>
-	<MkSwitch v-model="multiple">{{ i18n.ts._poll.canMultipleVote }}</MkSwitch>
-	<section>
-		<div>
-			<MkSelect v-model="expiration" small>
-				<template #label>{{ i18n.ts._poll.expiration }}</template>
-				<option value="infinite">{{ i18n.ts._poll.infinite }}</option>
-				<option value="at">{{ i18n.ts._poll.at }}</option>
-				<option value="after">{{ i18n.ts._poll.after }}</option>
-			</MkSelect>
-			<section v-if="expiration === 'at'">
-				<MkInput v-model="atDate" small type="date" class="input">
-					<template #label>{{ i18n.ts._poll.deadlineDate }}</template>
+	<div class="zmdxowus">
+		<p v-if="choices.length < 2" class="caution">
+			<i class="ph-warning ph-bold ph-lg"></i
+			>{{ i18n.ts._poll.noOnlyOneChoice }}
+		</p>
+		<ul>
+			<li v-for="(choice, i) in choices" :key="i">
+				<MkInput
+					class="input"
+					small
+					:model-value="choice"
+					:placeholder="i18n.t('_poll.choiceN', { n: i + 1 })"
+					@update:modelValue="onInput(i, $event)"
+				>
 				</MkInput>
-				<MkInput v-model="atTime" small type="time" class="input">
-					<template #label>{{ i18n.ts._poll.deadlineTime }}</template>
-				</MkInput>
-			</section>
-			<section v-else-if="expiration === 'after'">
-				<MkInput v-model="after" small type="number" class="input">
-					<template #label>{{ i18n.ts._poll.duration }}</template>
-				</MkInput>
-				<MkSelect v-model="unit" small>
-					<option value="second">{{ i18n.ts._time.second }}</option>
-					<option value="minute">{{ i18n.ts._time.minute }}</option>
-					<option value="hour">{{ i18n.ts._time.hour }}</option>
-					<option value="day">{{ i18n.ts._time.day }}</option>
+				<button class="_button" @click="remove(i)">
+					<i class="ph-x ph-bold ph-lg"></i>
+				</button>
+			</li>
+		</ul>
+		<MkButton v-if="choices.length < 10" class="add" @click="add">{{
+			i18n.ts.add
+		}}</MkButton>
+		<MkButton v-else class="add" disabled>{{
+			i18n.ts._poll.noMore
+		}}</MkButton>
+		<MkSwitch v-model="multiple">{{
+			i18n.ts._poll.canMultipleVote
+		}}</MkSwitch>
+		<section>
+			<div>
+				<MkSelect v-model="expiration" small>
+					<template #label>{{ i18n.ts._poll.expiration }}</template>
+					<option value="infinite">
+						{{ i18n.ts._poll.infinite }}
+					</option>
+					<option value="at">{{ i18n.ts._poll.at }}</option>
+					<option value="after">{{ i18n.ts._poll.after }}</option>
 				</MkSelect>
-			</section>
-		</div>
-	</section>
-</div>
+				<section v-if="expiration === 'at'">
+					<MkInput v-model="atDate" small type="date" class="input">
+						<template #label>{{
+							i18n.ts._poll.deadlineDate
+						}}</template>
+					</MkInput>
+					<MkInput v-model="atTime" small type="time" class="input">
+						<template #label>{{
+							i18n.ts._poll.deadlineTime
+						}}</template>
+					</MkInput>
+				</section>
+				<section v-else-if="expiration === 'after'">
+					<MkInput v-model="after" small type="number" class="input">
+						<template #label>{{ i18n.ts._poll.duration }}</template>
+					</MkInput>
+					<MkSelect v-model="unit" small>
+						<option value="second">
+							{{ i18n.ts._time.second }}
+						</option>
+						<option value="minute">
+							{{ i18n.ts._time.minute }}
+						</option>
+						<option value="hour">{{ i18n.ts._time.hour }}</option>
+						<option value="day">{{ i18n.ts._time.day }}</option>
+					</MkSelect>
+				</section>
+			</div>
+		</section>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { ref, watch } from 'vue';
-import MkInput from './form/input.vue';
-import MkSelect from './form/select.vue';
-import MkSwitch from './form/switch.vue';
-import MkButton from './MkButton.vue';
-import { formatDateTimeString } from '@/scripts/format-time-string';
-import { addTime } from '@/scripts/time';
-import { i18n } from '@/i18n';
+import { ref, watch } from "vue";
+import MkInput from "./form/input.vue";
+import MkSelect from "./form/select.vue";
+import MkSwitch from "./form/switch.vue";
+import MkButton from "./MkButton.vue";
+import { formatDateTimeString } from "@/scripts/format-time-string";
+import { addTime } from "@/scripts/time";
+import { i18n } from "@/i18n";
 
 const props = defineProps<{
 	modelValue: {
@@ -66,30 +89,35 @@ const props = defineProps<{
 	};
 }>();
 const emit = defineEmits<{
-	(ev: 'update:modelValue', v: {
-		expiresAt: string;
-		expiredAfter: number;
-		choices: string[];
-		multiple: boolean;
-	}): void;
+	(
+		ev: "update:modelValue",
+		v: {
+			expiresAt: string;
+			expiredAfter: number;
+			choices: string[];
+			multiple: boolean;
+		}
+	): void;
 }>();
 
 const choices = ref(props.modelValue.choices);
 const multiple = ref(props.modelValue.multiple);
-const expiration = ref('infinite');
-const atDate = ref(formatDateTimeString(addTime(new Date(), 1, 'day'), 'yyyy-MM-dd'));
-const atTime = ref('00:00');
+const expiration = ref("infinite");
+const atDate = ref(
+	formatDateTimeString(addTime(new Date(), 1, "day"), "yyyy-MM-dd")
+);
+const atTime = ref("00:00");
 const after = ref(0);
-const unit = ref('second');
+const unit = ref("second");
 
 if (props.modelValue.expiresAt) {
-	expiration.value = 'at';
+	expiration.value = "at";
 	atDate.value = atTime.value = props.modelValue.expiresAt;
-} else if (typeof props.modelValue.expiredAfter === 'number') {
-	expiration.value = 'after';
+} else if (typeof props.modelValue.expiredAfter === "number") {
+	expiration.value = "after";
 	after.value = props.modelValue.expiredAfter / 1000;
 } else {
-	expiration.value = 'infinite';
+	expiration.value = "infinite";
 }
 
 function onInput(i, value) {
@@ -97,7 +125,7 @@ function onInput(i, value) {
 }
 
 function add() {
-	choices.value.push('');
+	choices.value.push("");
 	// TODO
 	// nextTick(() => {
 	//   (this.$refs.choices as any).childNodes[this.choices.length - 1].childNodes[0].focus();
@@ -116,30 +144,40 @@ function get() {
 	const calcAfter = () => {
 		let base = parseInt(after.value);
 		switch (unit.value) {
-			case 'day': base *= 24;
-				// fallthrough
-			case 'hour': base *= 60;
-				// fallthrough
-			case 'minute': base *= 60;
-				// fallthrough
-			case 'second': return base *= 1000;
-			default: return null;
+			case "day":
+				base *= 24;
+			// fallthrough
+			case "hour":
+				base *= 60;
+			// fallthrough
+			case "minute":
+				base *= 60;
+			// fallthrough
+			case "second":
+				return (base *= 1000);
+			default:
+				return null;
 		}
 	};
 
 	return {
 		choices: choices.value,
 		multiple: multiple.value,
-		...(
-			expiration.value === 'at' ? { expiresAt: calcAt() } :
-			expiration.value === 'after' ? { expiredAfter: calcAfter() } : {}
-		),
+		...(expiration.value === "at"
+			? { expiresAt: calcAt() }
+			: expiration.value === "after"
+			? { expiredAfter: calcAfter() }
+			: {}),
 	};
 }
 
-watch([choices, multiple, expiration, atDate, atTime, after, unit], () => emit('update:modelValue', get()), {
-	deep: true,
-});
+watch(
+	[choices, multiple, expiration, atDate, atTime, after, unit],
+	() => emit("update:modelValue", get()),
+	{
+		deep: true,
+	}
+);
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/components/MkPopupMenu.vue b/packages/client/src/components/MkPopupMenu.vue
index f04c7f5618..4d52616e12 100644
--- a/packages/client/src/components/MkPopupMenu.vue
+++ b/packages/client/src/components/MkPopupMenu.vue
@@ -1,25 +1,42 @@
 <template>
-<MkModal ref="modal" v-slot="{ type, maxHeight }" :z-priority="'high'" :src="src" :transparent-bg="true" @click="modal.close()" @closed="emit('closed')">
-	<MkMenu :items="items" :align="align" :width="width" :max-height="maxHeight" :as-drawer="type === 'drawer'" class="sfhdhdhq" :class="{ drawer: type === 'drawer' }" @close="modal.close()"/>
-</MkModal>
+	<MkModal
+		ref="modal"
+		v-slot="{ type, maxHeight }"
+		:z-priority="'high'"
+		:src="src"
+		:transparent-bg="true"
+		@click="modal.close()"
+		@closed="emit('closed')"
+	>
+		<MkMenu
+			:items="items"
+			:align="align"
+			:width="width"
+			:max-height="maxHeight"
+			:as-drawer="type === 'drawer'"
+			class="sfhdhdhq"
+			:class="{ drawer: type === 'drawer' }"
+			@close="modal.close()"
+		/>
+	</MkModal>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import MkModal from './MkModal.vue';
-import MkMenu from './MkMenu.vue';
-import { MenuItem } from '@/types/menu';
+import {} from "vue";
+import MkModal from "./MkModal.vue";
+import MkMenu from "./MkMenu.vue";
+import { MenuItem } from "@/types/menu";
 
 defineProps<{
 	items: MenuItem[];
-	align?: 'center' | string;
+	align?: "center" | string;
 	width?: number;
 	viaKeyboard?: boolean;
 	src?: any;
 }>();
 
 const emit = defineEmits<{
-	(ev: 'closed'): void;
+	(ev: "closed"): void;
 }>();
 
 let modal = $ref<InstanceType<typeof MkModal>>();
diff --git a/packages/client/src/components/MkPostForm.vue b/packages/client/src/components/MkPostForm.vue
index cf22fc0a62..ff63b77d8d 100644
--- a/packages/client/src/components/MkPostForm.vue
+++ b/packages/client/src/components/MkPostForm.vue
@@ -1,125 +1,290 @@
 <template>
-<div
-	v-size="{ max: [310, 500] }" class="gafaadew"
-	:class="{ modal, _popup: modal }"
-	@dragover.stop="onDragover"
-	@dragenter="onDragenter"
-	@dragleave="onDragleave"
-	@drop.stop="onDrop"
->
-	<header>
-		<button v-if="!fixed" class="cancel _button" @click="cancel"><i class="ph-x ph-bold ph-lg"></i></button>
-		<button v-click-anime v-tooltip="i18n.ts.switchAccount" class="account _button" @click="openAccountMenu">
-			<MkAvatar :user="postAccount ?? $i" class="avatar"/>
-		</button>
-		<div class="right">
-			<span class="text-count" :class="{ over: textLength > maxTextLength }">{{ maxTextLength - textLength }}</span>
-			<span v-if="localOnly" class="local-only"><i class="ph-hand-fist ph-bold ph-lg"></i></span>
-			<button ref="visibilityButton" v-tooltip="i18n.ts.visibility" class="_button visibility" :disabled="channel != null" @click="setVisibility">
-				<span v-if="visibility === 'public'"><i class="ph-planet ph-bold ph-lg"></i></span>
-				<span v-if="visibility === 'home'"><i class="ph-house ph-bold ph-lg"></i></span>
-				<span v-if="visibility === 'followers'"><i class="ph-lock-simple-open ph-bold ph-lg"></i></span>
-				<span v-if="visibility === 'specified'"><i class="ph-envelope-simple-open ph-bold ph-lg"></i></span>
+	<div
+		v-size="{ max: [310, 500] }"
+		class="gafaadew"
+		:class="{ modal, _popup: modal }"
+		@dragover.stop="onDragover"
+		@dragenter="onDragenter"
+		@dragleave="onDragleave"
+		@drop.stop="onDrop"
+	>
+		<header>
+			<button v-if="!fixed" class="cancel _button" @click="cancel">
+				<i class="ph-x ph-bold ph-lg"></i>
 			</button>
-			<button v-tooltip="i18n.ts.previewNoteText" class="_button preview" :class="{ active: showPreview }" @click="showPreview = !showPreview"><i class="ph-file-code ph-bold ph-lg"></i></button>
-			<button class="submit _buttonGradate" :disabled="!canPost" data-cy-open-post-form-submit @click="post">{{ submitText }}<i :class="reply ? 'ph-arrow-u-up-left ph-bold ph-lg' : renote ? 'ph-quotes ph-bold ph-lg' : 'ph-paper-plane-tilt ph-bold ph-lg'"></i></button>
-		</div>
-	</header>
-	<div class="form" :class="{ fixed }">
-		<XNoteSimple v-if="reply" class="preview" :note="reply"/>
-		<XNoteSimple v-if="renote" class="preview" :note="renote"/>
-		<div v-if="quoteId" class="with-quote"><i class="ph-quotes ph-bold ph-lg"></i> {{ i18n.ts.quoteAttached }}<button @click="quoteId = null"><i class="ph-x ph-bold ph-lg"></i></button></div>
-		<div v-if="visibility === 'specified'" class="to-specified">
-			<span style="margin-right: 8px;">{{ i18n.ts.recipient }}</span>
-			<div class="visibleUsers">
-				<span v-for="u in visibleUsers" :key="u.id">
-					<MkAcct :user="u"/>
-					<button class="_button" @click="removeVisibleUser(u)"><i class="ph-x ph-bold ph-lg"></i></button>
-				</span>
-				<button class="_button" @click="addVisibleUser"><i class="ph-plus ph-bold ph-md ph-fw ph-lg"></i></button>
+			<button
+				v-click-anime
+				v-tooltip="i18n.ts.switchAccount"
+				class="account _button"
+				@click="openAccountMenu"
+			>
+				<MkAvatar :user="postAccount ?? $i" class="avatar" />
+			</button>
+			<div class="right">
+				<span
+					class="text-count"
+					:class="{ over: textLength > maxTextLength }"
+					>{{ maxTextLength - textLength }}</span
+				>
+				<span v-if="localOnly" class="local-only"
+					><i class="ph-hand-fist ph-bold ph-lg"></i
+				></span>
+				<button
+					ref="visibilityButton"
+					v-tooltip="i18n.ts.visibility"
+					class="_button visibility"
+					:disabled="channel != null"
+					@click="setVisibility"
+				>
+					<span v-if="visibility === 'public'"
+						><i class="ph-planet ph-bold ph-lg"></i
+					></span>
+					<span v-if="visibility === 'home'"
+						><i class="ph-house ph-bold ph-lg"></i
+					></span>
+					<span v-if="visibility === 'followers'"
+						><i class="ph-lock-simple-open ph-bold ph-lg"></i
+					></span>
+					<span v-if="visibility === 'specified'"
+						><i class="ph-envelope-simple-open ph-bold ph-lg"></i
+					></span>
+				</button>
+				<button
+					v-tooltip="i18n.ts.previewNoteText"
+					class="_button preview"
+					:class="{ active: showPreview }"
+					@click="showPreview = !showPreview"
+				>
+					<i class="ph-file-code ph-bold ph-lg"></i>
+				</button>
+				<button
+					class="submit _buttonGradate"
+					:disabled="!canPost"
+					data-cy-open-post-form-submit
+					@click="post"
+				>
+					{{ submitText
+					}}<i
+						:class="
+							reply
+								? 'ph-arrow-u-up-left ph-bold ph-lg'
+								: renote
+								? 'ph-quotes ph-bold ph-lg'
+								: 'ph-paper-plane-tilt ph-bold ph-lg'
+						"
+					></i>
+				</button>
 			</div>
+		</header>
+		<div class="form" :class="{ fixed }">
+			<XNoteSimple v-if="reply" class="preview" :note="reply" />
+			<XNoteSimple v-if="renote" class="preview" :note="renote" />
+			<div v-if="quoteId" class="with-quote">
+				<i class="ph-quotes ph-bold ph-lg"></i>
+				{{ i18n.ts.quoteAttached
+				}}<button @click="quoteId = null">
+					<i class="ph-x ph-bold ph-lg"></i>
+				</button>
+			</div>
+			<div v-if="visibility === 'specified'" class="to-specified">
+				<span style="margin-right: 8px">{{ i18n.ts.recipient }}</span>
+				<div class="visibleUsers">
+					<span v-for="u in visibleUsers" :key="u.id">
+						<MkAcct :user="u" />
+						<button class="_button" @click="removeVisibleUser(u)">
+							<i class="ph-x ph-bold ph-lg"></i>
+						</button>
+					</span>
+					<button class="_button" @click="addVisibleUser">
+						<i class="ph-plus ph-bold ph-md ph-fw ph-lg"></i>
+					</button>
+				</div>
+			</div>
+			<MkInfo
+				v-if="hasNotSpecifiedMentions"
+				warn
+				class="hasNotSpecifiedMentions"
+				>{{ i18n.ts.notSpecifiedMentionWarning }} -
+				<button class="_textButton" @click="addMissingMention()">
+					{{ i18n.ts.add }}
+				</button></MkInfo
+			>
+			<input
+				v-show="useCw"
+				ref="cwInputEl"
+				v-model="cw"
+				class="cw"
+				:placeholder="i18n.ts.annotation"
+				@keydown="onKeydown"
+			/>
+			<textarea
+				ref="textareaEl"
+				v-model="text"
+				class="text"
+				:class="{ withCw: useCw }"
+				:disabled="posting"
+				:placeholder="placeholder"
+				data-cy-post-form-text
+				@keydown="onKeydown"
+				@paste="onPaste"
+				@compositionupdate="onCompositionUpdate"
+				@compositionend="onCompositionEnd"
+			/>
+			<input
+				v-show="withHashtags"
+				ref="hashtagsInputEl"
+				v-model="hashtags"
+				class="hashtags"
+				:placeholder="i18n.ts.hashtags"
+				list="hashtags"
+			/>
+			<XPostFormAttaches
+				class="attaches"
+				:files="files"
+				@updated="updateFiles"
+				@detach="detachFile"
+				@changeSensitive="updateFileSensitive"
+				@changeName="updateFileName"
+			/>
+			<XPollEditor v-if="poll" v-model="poll" @destroyed="poll = null" />
+			<XNotePreview v-if="showPreview" class="preview" :text="text" />
+			<footer>
+				<button
+					v-tooltip="i18n.ts.attachFile"
+					class="_button"
+					@click="chooseFileFrom"
+				>
+					<i class="ph-upload ph-bold ph-lg"></i>
+				</button>
+				<button
+					v-tooltip="i18n.ts.poll"
+					class="_button"
+					:class="{ active: poll }"
+					@click="togglePoll"
+				>
+					<i class="ph-microphone-stage ph-bold ph-lg"></i>
+				</button>
+				<button
+					v-tooltip="i18n.ts.useCw"
+					class="_button"
+					:class="{ active: useCw }"
+					@click="useCw = !useCw"
+				>
+					<i class="ph-eye-slash ph-bold ph-lg"></i>
+				</button>
+				<button
+					v-tooltip="i18n.ts.mention"
+					class="_button"
+					@click="insertMention"
+				>
+					<i class="ph-at ph-bold ph-lg"></i>
+				</button>
+				<button
+					v-tooltip="i18n.ts.hashtags"
+					class="_button"
+					:class="{ active: withHashtags }"
+					@click="withHashtags = !withHashtags"
+				>
+					<i class="ph-hash ph-bold ph-lg"></i>
+				</button>
+				<button
+					v-tooltip="i18n.ts.emoji"
+					class="_button"
+					@click="insertEmoji"
+				>
+					<i class="ph-smiley ph-bold ph-lg"></i>
+				</button>
+				<button
+					v-if="postFormActions.length > 0"
+					v-tooltip="i18n.ts.plugin"
+					class="_button"
+					@click="showActions"
+				>
+					<i class="ph-plug ph-bold ph-lg"></i>
+				</button>
+				<button
+					v-tooltip="i18n.ts._mfm.cheatSheet"
+					class="_button right"
+					@click="openCheatSheet"
+				>
+					<i class="ph-question ph-bold ph-lg"></i>
+				</button>
+			</footer>
+			<datalist id="hashtags">
+				<option
+					v-for="hashtag in recentHashtags"
+					:key="hashtag"
+					:value="hashtag"
+				/>
+			</datalist>
 		</div>
-		<MkInfo v-if="hasNotSpecifiedMentions" warn class="hasNotSpecifiedMentions">{{ i18n.ts.notSpecifiedMentionWarning }} - <button class="_textButton" @click="addMissingMention()">{{ i18n.ts.add }}</button></MkInfo>
-		<input v-show="useCw" ref="cwInputEl" v-model="cw" class="cw" :placeholder="i18n.ts.annotation" @keydown="onKeydown">
-		<textarea ref="textareaEl" v-model="text" class="text" :class="{ withCw: useCw }" :disabled="posting" :placeholder="placeholder" data-cy-post-form-text @keydown="onKeydown" @paste="onPaste" @compositionupdate="onCompositionUpdate" @compositionend="onCompositionEnd"/>
-		<input v-show="withHashtags" ref="hashtagsInputEl" v-model="hashtags" class="hashtags" :placeholder="i18n.ts.hashtags" list="hashtags">
-		<XPostFormAttaches class="attaches" :files="files" @updated="updateFiles" @detach="detachFile" @changeSensitive="updateFileSensitive" @changeName="updateFileName"/>
-		<XPollEditor v-if="poll" v-model="poll" @destroyed="poll = null"/>
-		<XNotePreview v-if="showPreview" class="preview" :text="text"/>
-		<footer>
-			<button v-tooltip="i18n.ts.attachFile" class="_button" @click="chooseFileFrom"><i class="ph-upload ph-bold ph-lg"></i></button>
-			<button v-tooltip="i18n.ts.poll" class="_button" :class="{ active: poll }" @click="togglePoll"><i class="ph-microphone-stage ph-bold ph-lg"></i></button>
-			<button v-tooltip="i18n.ts.useCw" class="_button" :class="{ active: useCw }" @click="useCw = !useCw"><i class="ph-eye-slash ph-bold ph-lg"></i></button>
-			<button v-tooltip="i18n.ts.mention" class="_button" @click="insertMention"><i class="ph-at ph-bold ph-lg"></i></button>
-			<button v-tooltip="i18n.ts.hashtags" class="_button" :class="{ active: withHashtags }" @click="withHashtags = !withHashtags"><i class="ph-hash ph-bold ph-lg"></i></button>
-			<button v-tooltip="i18n.ts.emoji" class="_button" @click="insertEmoji"><i class="ph-smiley ph-bold ph-lg"></i></button>
-			<button v-if="postFormActions.length > 0" v-tooltip="i18n.ts.plugin" class="_button" @click="showActions"><i class="ph-plug ph-bold ph-lg"></i></button>
-			<button v-tooltip="i18n.ts._mfm.cheatSheet" class="_button right" @click="openCheatSheet"><i class="ph-question ph-bold ph-lg"></i></button>
-		</footer>
-		<datalist id="hashtags">
-			<option v-for="hashtag in recentHashtags" :key="hashtag" :value="hashtag"/>
-		</datalist>
 	</div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { inject, watch, nextTick, onMounted, defineAsyncComponent } from 'vue';
-import * as mfm from 'mfm-js';
-import * as misskey from 'calckey-js';
-import insertTextAtCursor from 'insert-text-at-cursor';
-import { length } from 'stringz';
-import { toASCII } from 'punycode/';
-import * as Acct from 'calckey-js/built/acct';
-import { throttle } from 'throttle-debounce';
-import XNoteSimple from '@/components/MkNoteSimple.vue';
-import XNotePreview from '@/components/MkNotePreview.vue';
-import XPostFormAttaches from '@/components/MkPostFormAttaches.vue';
-import XPollEditor from '@/components/MkPollEditor.vue';
-import { host, url } from '@/config';
-import { erase, unique } from '@/scripts/array';
-import { extractMentions } from '@/scripts/extract-mentions';
-import { formatTimeString } from '@/scripts/format-time-string';
-import { Autocomplete } from '@/scripts/autocomplete';
-import * as os from '@/os';
-import { stream } from '@/stream';
-import { selectFiles } from '@/scripts/select-file';
-import { defaultStore, notePostInterruptors, postFormActions } from '@/store';
-import MkInfo from '@/components/MkInfo.vue';
-import { i18n } from '@/i18n';
-import { instance } from '@/instance';
-import { $i, getAccounts, openAccountMenu as openAccountMenu_ } from '@/account';
-import { uploadFile } from '@/scripts/upload';
-import { deepClone } from '@/scripts/clone';
-import XCheatSheet from '@/components/MkCheatSheetDialog.vue';
-import { preprocess } from '@/scripts/preprocess';
+import { inject, watch, nextTick, onMounted, defineAsyncComponent } from "vue";
+import * as mfm from "mfm-js";
+import * as misskey from "calckey-js";
+import insertTextAtCursor from "insert-text-at-cursor";
+import { length } from "stringz";
+import { toASCII } from "punycode/";
+import * as Acct from "calckey-js/built/acct";
+import { throttle } from "throttle-debounce";
+import XNoteSimple from "@/components/MkNoteSimple.vue";
+import XNotePreview from "@/components/MkNotePreview.vue";
+import XPostFormAttaches from "@/components/MkPostFormAttaches.vue";
+import XPollEditor from "@/components/MkPollEditor.vue";
+import { host, url } from "@/config";
+import { erase, unique } from "@/scripts/array";
+import { extractMentions } from "@/scripts/extract-mentions";
+import { formatTimeString } from "@/scripts/format-time-string";
+import { Autocomplete } from "@/scripts/autocomplete";
+import * as os from "@/os";
+import { stream } from "@/stream";
+import { selectFiles } from "@/scripts/select-file";
+import { defaultStore, notePostInterruptors, postFormActions } from "@/store";
+import MkInfo from "@/components/MkInfo.vue";
+import { i18n } from "@/i18n";
+import { instance } from "@/instance";
+import {
+	$i,
+	getAccounts,
+	openAccountMenu as openAccountMenu_,
+} from "@/account";
+import { uploadFile } from "@/scripts/upload";
+import { deepClone } from "@/scripts/clone";
+import XCheatSheet from "@/components/MkCheatSheetDialog.vue";
+import { preprocess } from "@/scripts/preprocess";
 
-const modal = inject('modal');
+const modal = inject("modal");
 
-const props = withDefaults(defineProps<{
-	reply?: misskey.entities.Note;
-	renote?: misskey.entities.Note;
-	channel?: any; // TODO
-	mention?: misskey.entities.User;
-	specified?: misskey.entities.User;
-	initialText?: string;
-	initialVisibility?: typeof misskey.noteVisibilities;
-	initialFiles?: misskey.entities.DriveFile[];
-	initialLocalOnly?: boolean;
-	initialVisibleUsers?: misskey.entities.User[];
-	initialNote?: misskey.entities.Note;
-	instant?: boolean;
-	fixed?: boolean;
-	autofocus?: boolean;
-}>(), {
-	initialVisibleUsers: () => [],
-	autofocus: true,
-});
+const props = withDefaults(
+	defineProps<{
+		reply?: misskey.entities.Note;
+		renote?: misskey.entities.Note;
+		channel?: any; // TODO
+		mention?: misskey.entities.User;
+		specified?: misskey.entities.User;
+		initialText?: string;
+		initialVisibility?: typeof misskey.noteVisibilities;
+		initialFiles?: misskey.entities.DriveFile[];
+		initialLocalOnly?: boolean;
+		initialVisibleUsers?: misskey.entities.User[];
+		initialNote?: misskey.entities.Note;
+		instant?: boolean;
+		fixed?: boolean;
+		autofocus?: boolean;
+	}>(),
+	{
+		initialVisibleUsers: () => [],
+		autofocus: true,
+	}
+);
 
 const emit = defineEmits<{
-	(ev: 'posted'): void;
-	(ev: 'cancel'): void;
-	(ev: 'esc'): void;
+	(ev: "posted"): void;
+	(ev: "cancel"): void;
+	(ev: "esc"): void;
 }>();
 
 const textareaEl = $ref<HTMLTextAreaElement | null>(null);
@@ -128,7 +293,7 @@ const hashtagsInputEl = $ref<HTMLInputElement | null>(null);
 const visibilityButton = $ref<HTMLElement | null>(null);
 
 let posting = $ref(false);
-let text = $ref(props.initialText ?? '');
+let text = $ref(props.initialText ?? "");
 let files = $ref(props.initialFiles ?? []);
 let poll = $ref<{
 	choices: string[];
@@ -139,8 +304,18 @@ let poll = $ref<{
 let useCw = $ref(false);
 let showPreview = $ref(false);
 let cw = $ref<string | null>(null);
-let localOnly = $ref<boolean>(props.initialLocalOnly ?? defaultStore.state.rememberNoteVisibility ? defaultStore.state.localOnly : defaultStore.state.defaultNoteLocalOnly);
-let visibility = $ref(props.initialVisibility ?? (defaultStore.state.rememberNoteVisibility ? defaultStore.state.visibility : defaultStore.state.defaultNoteVisibility) as typeof misskey.noteVisibilities[number]);
+let localOnly = $ref<boolean>(
+	props.initialLocalOnly ?? defaultStore.state.rememberNoteVisibility
+		? defaultStore.state.localOnly
+		: defaultStore.state.defaultNoteLocalOnly
+);
+let visibility = $ref(
+	props.initialVisibility ??
+		((defaultStore.state.rememberNoteVisibility
+			? defaultStore.state.visibility
+			: defaultStore.state
+					.defaultNoteVisibility) as (typeof misskey.noteVisibilities)[number])
+);
 let visibleUsers = $ref([]);
 if (props.initialVisibleUsers) {
 	props.initialVisibleUsers.forEach(pushVisibleUser);
@@ -149,24 +324,24 @@ let autocomplete = $ref(null);
 let draghover = $ref(false);
 let quoteId = $ref(null);
 let hasNotSpecifiedMentions = $ref(false);
-let recentHashtags = $ref(JSON.parse(localStorage.getItem('hashtags') || '[]'));
-let imeText = $ref('');
+let recentHashtags = $ref(JSON.parse(localStorage.getItem("hashtags") || "[]"));
+let imeText = $ref("");
 
 const typing = throttle(3000, () => {
 	if (props.channel) {
-		stream.send('typingOnChannel', { channel: props.channel.id });
+		stream.send("typingOnChannel", { channel: props.channel.id });
 	}
 });
 
 const draftKey = $computed((): string => {
-	let key = props.channel ? `channel:${props.channel.id}` : '';
+	let key = props.channel ? `channel:${props.channel.id}` : "";
 
 	if (props.renote) {
 		key += `renote:${props.renote.id}`;
 	} else if (props.reply) {
 		key += `reply:${props.reply.id}`;
 	} else {
-		key += 'note';
+		key += "note";
 	}
 
 	return key;
@@ -196,8 +371,8 @@ const submitText = $computed((): string => {
 	return props.renote
 		? i18n.ts.quote
 		: props.reply
-			? i18n.ts.reply
-			: i18n.ts.note;
+		? i18n.ts.reply
+		: i18n.ts.note;
 });
 
 const textLength = $computed((): number => {
@@ -209,32 +384,50 @@ const maxTextLength = $computed((): number => {
 });
 
 const canPost = $computed((): boolean => {
-	return !posting &&
+	return (
+		!posting &&
 		(1 <= textLength || 1 <= files.length || !!poll || !!props.renote) &&
-		(textLength <= maxTextLength) &&
-		(!poll || poll.choices.length >= 2);
+		textLength <= maxTextLength &&
+		(!poll || poll.choices.length >= 2)
+	);
 });
 
-const withHashtags = $computed(defaultStore.makeGetterSetter('postFormWithHashtags'));
-const hashtags = $computed(defaultStore.makeGetterSetter('postFormHashtags'));
+const withHashtags = $computed(
+	defaultStore.makeGetterSetter("postFormWithHashtags")
+);
+const hashtags = $computed(defaultStore.makeGetterSetter("postFormHashtags"));
 
 watch($$(text), () => {
 	checkMissingMention();
 });
 
-watch($$(visibleUsers), () => {
-	checkMissingMention();
-}, {
-	deep: true,
-});
+watch(
+	$$(visibleUsers),
+	() => {
+		checkMissingMention();
+	},
+	{
+		deep: true,
+	}
+);
 
 if (props.mention) {
-	text = props.mention.host ? `@${props.mention.username}@${toASCII(props.mention.host)}` : `@${props.mention.username}`;
-	text += ' ';
+	text = props.mention.host
+		? `@${props.mention.username}@${toASCII(props.mention.host)}`
+		: `@${props.mention.username}`;
+	text += " ";
 }
 
-if (props.reply && (props.reply.user.username !== $i.username || (props.reply.user.host != null && props.reply.user.host !== host))) {
-	text = `@${props.reply.user.username}${props.reply.user.host != null ? '@' + toASCII(props.reply.user.host) : ''} `;
+if (
+	props.reply &&
+	(props.reply.user.username !== $i.username ||
+		(props.reply.user.host != null && props.reply.user.host !== host))
+) {
+	text = `@${props.reply.user.username}${
+		props.reply.user.host != null
+			? "@" + toASCII(props.reply.user.host)
+			: ""
+	} `;
 }
 
 if (props.reply && props.reply.text != null) {
@@ -242,14 +435,15 @@ if (props.reply && props.reply.text != null) {
 	const otherHost = props.reply.user.host;
 
 	for (const x of extractMentions(ast)) {
-		const mention = x.host ?
-			`@${x.username}@${toASCII(x.host)}` :
-			(otherHost == null || otherHost === host) ?
-				`@${x.username}` :
-				`@${x.username}@${toASCII(otherHost)}`;
+		const mention = x.host
+			? `@${x.username}@${toASCII(x.host)}`
+			: otherHost == null || otherHost === host
+			? `@${x.username}`
+			: `@${x.username}@${toASCII(otherHost)}`;
 
 		// 自分は除外
-		if ($i.username === x.username && (x.host == null || x.host === host)) continue;
+		if ($i.username === x.username && (x.host == null || x.host === host))
+			continue;
 
 		// 重複は除外
 		if (text.includes(`${mention} `)) continue;
@@ -259,30 +453,37 @@ if (props.reply && props.reply.text != null) {
 }
 
 if (props.channel) {
-	visibility = 'public';
+	visibility = "public";
 	localOnly = true; // TODO: チャンネルが連合するようになった折には消す
 }
 
 // 公開以外へのリプライ時は元の公開範囲を引き継ぐ
-if (props.reply && ['home', 'followers', 'specified'].includes(props.reply.visibility)) {
+if (
+	props.reply &&
+	["home", "followers", "specified"].includes(props.reply.visibility)
+) {
 	visibility = props.reply.visibility;
-	if (props.reply.visibility === 'specified') {
-		os.api('users/show', {
-			userIds: props.reply.visibleUserIds.filter(uid => uid !== $i.id && uid !== props.reply.userId),
-		}).then(users => {
+	if (props.reply.visibility === "specified") {
+		os.api("users/show", {
+			userIds: props.reply.visibleUserIds.filter(
+				(uid) => uid !== $i.id && uid !== props.reply.userId
+			),
+		}).then((users) => {
 			users.forEach(pushVisibleUser);
 		});
 
 		if (props.reply.userId !== $i.id) {
-			os.api('users/show', { userId: props.reply.userId }).then(user => {
-				pushVisibleUser(user);
-			});
+			os.api("users/show", { userId: props.reply.userId }).then(
+				(user) => {
+					pushVisibleUser(user);
+				}
+			);
 		}
 	}
 }
 
 if (props.specified) {
-	visibility = 'specified';
+	visibility = "specified";
 	pushVisibleUser(props.specified);
 }
 
@@ -303,11 +504,15 @@ function watchForDraft() {
 }
 
 function checkMissingMention() {
-	if (visibility === 'specified') {
+	if (visibility === "specified") {
 		const ast = mfm.parse(text);
 
 		for (const x of extractMentions(ast)) {
-			if (!visibleUsers.some(u => (u.username === x.username) && (u.host === x.host))) {
+			if (
+				!visibleUsers.some(
+					(u) => u.username === x.username && u.host === x.host
+				)
+			) {
 				hasNotSpecifiedMentions = true;
 				return;
 			}
@@ -320,10 +525,16 @@ function addMissingMention() {
 	const ast = mfm.parse(text);
 
 	for (const x of extractMentions(ast)) {
-		if (!visibleUsers.some(u => (u.username === x.username) && (u.host === x.host))) {
-			os.api('users/show', { username: x.username, host: x.host }).then(user => {
-				visibleUsers.push(user);
-			});
+		if (
+			!visibleUsers.some(
+				(u) => u.username === x.username && u.host === x.host
+			)
+		) {
+			os.api("users/show", { username: x.username, host: x.host }).then(
+				(user) => {
+					visibleUsers.push(user);
+				}
+			);
 		}
 	}
 }
@@ -333,7 +544,7 @@ function togglePoll() {
 		poll = null;
 	} else {
 		poll = {
-			choices: ['', ''],
+			choices: ["", ""],
 			multiple: false,
 			expiresAt: null,
 			expiredAfter: null,
@@ -348,20 +559,25 @@ function addTag(tag: string) {
 function focus() {
 	if (textareaEl) {
 		textareaEl.focus();
-		textareaEl.setSelectionRange(textareaEl.value.length, textareaEl.value.length);
+		textareaEl.setSelectionRange(
+			textareaEl.value.length,
+			textareaEl.value.length
+		);
 	}
 }
 
 function chooseFileFrom(ev) {
-	selectFiles(ev.currentTarget ?? ev.target, i18n.ts.attachFile).then(files_ => {
-		for (const file of files_) {
-			files.push(file);
+	selectFiles(ev.currentTarget ?? ev.target, i18n.ts.attachFile).then(
+		(files_) => {
+			for (const file of files_) {
+				files.push(file);
+			}
 		}
-	});
+	);
 }
 
 function detachFile(id) {
-	files = files.filter(x => x.id !== id);
+	files = files.filter((x) => x.id !== id);
 }
 
 function updateFiles(_files) {
@@ -369,15 +585,15 @@ function updateFiles(_files) {
 }
 
 function updateFileSensitive(file, sensitive) {
-	files[files.findIndex(x => x.id === file.id)].isSensitive = sensitive;
+	files[files.findIndex((x) => x.id === file.id)].isSensitive = sensitive;
 }
 
 function updateFileName(file, name) {
-	files[files.findIndex(x => x.id === file.id)].name = name;
+	files[files.findIndex((x) => x.id === file.id)].name = name;
 }
 
 function upload(file: File, name?: string) {
-	uploadFile(file, defaultStore.state.uploadFolder, name).then(res => {
+	uploadFile(file, defaultStore.state.uploadFolder, name).then((res) => {
 		files.push(res);
 	});
 }
@@ -388,34 +604,45 @@ function setVisibility() {
 		return;
 	}
 
-	os.popup(defineAsyncComponent(() => import('@/components/MkVisibilityPicker.vue')), {
-		currentVisibility: visibility,
-		currentLocalOnly: localOnly,
-		src: visibilityButton,
-	}, {
-		changeVisibility: v => {
-			visibility = v;
-			if (defaultStore.state.rememberNoteVisibility) {
-				defaultStore.set('visibility', visibility);
-			}
+	os.popup(
+		defineAsyncComponent(
+			() => import("@/components/MkVisibilityPicker.vue")
+		),
+		{
+			currentVisibility: visibility,
+			currentLocalOnly: localOnly,
+			src: visibilityButton,
 		},
-		changeLocalOnly: v => {
-			localOnly = v;
-			if (defaultStore.state.rememberNoteVisibility) {
-				defaultStore.set('localOnly', localOnly);
-			}
+		{
+			changeVisibility: (v) => {
+				visibility = v;
+				if (defaultStore.state.rememberNoteVisibility) {
+					defaultStore.set("visibility", visibility);
+				}
+			},
+			changeLocalOnly: (v) => {
+				localOnly = v;
+				if (defaultStore.state.rememberNoteVisibility) {
+					defaultStore.set("localOnly", localOnly);
+				}
+			},
 		},
-	}, 'closed');
+		"closed"
+	);
 }
 
 function pushVisibleUser(user) {
-	if (!visibleUsers.some(u => u.username === user.username && u.host === user.host)) {
+	if (
+		!visibleUsers.some(
+			(u) => u.username === user.username && u.host === user.host
+		)
+	) {
 		visibleUsers.push(user);
 	}
 }
 
 function addVisibleUser() {
-	os.selectUser().then(user => {
+	os.selectUser().then((user) => {
 		pushVisibleUser(user);
 	});
 }
@@ -425,15 +652,20 @@ function removeVisibleUser(user) {
 }
 
 function clear() {
-	text = '';
+	text = "";
 	files = [];
 	poll = null;
 	quoteId = null;
 }
 
 function onKeydown(ev: KeyboardEvent) {
-	if ((ev.which === 10 || ev.which === 13) && (ev.ctrlKey || ev.metaKey) && canPost) post();
-	if (ev.which === 27) emit('esc');
+	if (
+		(ev.which === 10 || ev.which === 13) &&
+		(ev.ctrlKey || ev.metaKey) &&
+		canPost
+	)
+		post();
+	if (ev.which === 27) emit("esc");
 	typing();
 }
 
@@ -443,27 +675,32 @@ function onCompositionUpdate(ev: CompositionEvent) {
 }
 
 function onCompositionEnd(ev: CompositionEvent) {
-	imeText = '';
+	imeText = "";
 }
 
 async function onPaste(ev: ClipboardEvent) {
-	for (const { item, i } of Array.from(ev.clipboardData.items).map((item, i) => ({ item, i }))) {
-		if (item.kind === 'file') {
+	for (const { item, i } of Array.from(ev.clipboardData.items).map(
+		(item, i) => ({ item, i })
+	)) {
+		if (item.kind === "file") {
 			const file = item.getAsFile();
-			const lio = file.name.lastIndexOf('.');
-			const ext = lio >= 0 ? file.name.slice(lio) : '';
-			const formatted = `${formatTimeString(new Date(file.lastModified), defaultStore.state.pastedFileName).replace(/{{number}}/g, `${i + 1}`)}${ext}`;
+			const lio = file.name.lastIndexOf(".");
+			const ext = lio >= 0 ? file.name.slice(lio) : "";
+			const formatted = `${formatTimeString(
+				new Date(file.lastModified),
+				defaultStore.state.pastedFileName
+			).replace(/{{number}}/g, `${i + 1}`)}${ext}`;
 			upload(file, formatted);
 		}
 	}
 
-	const paste = ev.clipboardData.getData('text');
+	const paste = ev.clipboardData.getData("text");
 
-	if (!props.renote && !quoteId && paste.startsWith(url + '/notes/')) {
+	if (!props.renote && !quoteId && paste.startsWith(url + "/notes/")) {
 		ev.preventDefault();
 
 		os.yesno({
-			type: 'info',
+			type: "info",
 			text: i18n.ts.quoteQuestion,
 		}).then(({ canceled }) => {
 			if (canceled) {
@@ -478,25 +715,25 @@ async function onPaste(ev: ClipboardEvent) {
 
 function onDragover(ev) {
 	if (!ev.dataTransfer.items[0]) return;
-	const isFile = ev.dataTransfer.items[0].kind === 'file';
+	const isFile = ev.dataTransfer.items[0].kind === "file";
 	const isDriveFile = ev.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FILE_;
 	if (isFile || isDriveFile) {
 		ev.preventDefault();
 		draghover = true;
 		switch (ev.dataTransfer.effectAllowed) {
-			case 'all':
-			case 'uninitialized':
-			case 'copy': 
-			case 'copyLink': 
-			case 'copyMove': 
-				ev.dataTransfer.dropEffect = 'copy';
+			case "all":
+			case "uninitialized":
+			case "copy":
+			case "copyLink":
+			case "copyMove":
+				ev.dataTransfer.dropEffect = "copy";
 				break;
-			case 'linkMove':
-			case 'move':
-				ev.dataTransfer.dropEffect = 'move';
+			case "linkMove":
+			case "move":
+				ev.dataTransfer.dropEffect = "move";
 				break;
 			default:
-				ev.dataTransfer.dropEffect = 'none';
+				ev.dataTransfer.dropEffect = "none";
 				break;
 		}
 	}
@@ -522,7 +759,7 @@ function onDrop(ev): void {
 
 	//#region ドライブのファイル
 	const driveFile = ev.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FILE_);
-	if (driveFile != null && driveFile !== '') {
+	if (driveFile != null && driveFile !== "") {
 		const file = JSON.parse(driveFile);
 		files.push(file);
 		ev.preventDefault();
@@ -531,7 +768,7 @@ function onDrop(ev): void {
 }
 
 function saveDraft() {
-	const draftData = JSON.parse(localStorage.getItem('drafts') || '{}');
+	const draftData = JSON.parse(localStorage.getItem("drafts") || "{}");
 
 	draftData[draftKey] = {
 		updatedAt: new Date(),
@@ -546,36 +783,49 @@ function saveDraft() {
 		},
 	};
 
-	localStorage.setItem('drafts', JSON.stringify(draftData));
+	localStorage.setItem("drafts", JSON.stringify(draftData));
 }
 
 function deleteDraft() {
-	const draftData = JSON.parse(localStorage.getItem('drafts') || '{}');
+	const draftData = JSON.parse(localStorage.getItem("drafts") || "{}");
 
 	delete draftData[draftKey];
 
-	localStorage.setItem('drafts', JSON.stringify(draftData));
+	localStorage.setItem("drafts", JSON.stringify(draftData));
 }
 
 async function post() {
 	const processedText = preprocess(text);
 
 	let postData = {
-		text: processedText === '' ? undefined : processedText,
-		fileIds: files.length > 0 ? files.map(f => f.id) : undefined,
+		text: processedText === "" ? undefined : processedText,
+		fileIds: files.length > 0 ? files.map((f) => f.id) : undefined,
 		replyId: props.reply ? props.reply.id : undefined,
-		renoteId: props.renote ? props.renote.id : quoteId ? quoteId : undefined,
+		renoteId: props.renote
+			? props.renote.id
+			: quoteId
+			? quoteId
+			: undefined,
 		channelId: props.channel ? props.channel.id : undefined,
 		poll: poll,
-		cw: useCw ? cw || '' : undefined,
+		cw: useCw ? cw || "" : undefined,
 		localOnly: localOnly,
 		visibility: visibility,
-		visibleUserIds: visibility === 'specified' ? visibleUsers.map(u => u.id) : undefined,
+		visibleUserIds:
+			visibility === "specified"
+				? visibleUsers.map((u) => u.id)
+				: undefined,
 	};
 
-	if (withHashtags && hashtags && hashtags.trim() !== '') {
-		const hashtags_ = hashtags.trim().split(' ').map(x => x.startsWith('#') ? x : '#' + x).join(' ');
-		postData.text = postData.text ? `${postData.text} ${hashtags_}` : hashtags_;
+	if (withHashtags && hashtags && hashtags.trim() !== "") {
+		const hashtags_ = hashtags
+			.trim()
+			.split(" ")
+			.map((x) => (x.startsWith("#") ? x : "#" + x))
+			.join(" ");
+		postData.text = postData.text
+			? `${postData.text} ${hashtags_}`
+			: hashtags_;
 	}
 
 	// plugin
@@ -589,39 +839,49 @@ async function post() {
 
 	if (postAccount) {
 		const storedAccounts = await getAccounts();
-		token = storedAccounts.find(x => x.id === postAccount.id)?.token;
+		token = storedAccounts.find((x) => x.id === postAccount.id)?.token;
 	}
 
 	posting = true;
-	os.api('notes/create', postData, token).then(() => {
-		clear();
-		nextTick(() => {
-			deleteDraft();
-			emit('posted');
-			if (postData.text && postData.text !== '') {
-				const hashtags_ = mfm.parse(postData.text).filter(x => x.type === 'hashtag').map(x => x.props.hashtag);
-				const history = JSON.parse(localStorage.getItem('hashtags') || '[]') as string[];
-				localStorage.setItem('hashtags', JSON.stringify(unique(hashtags_.concat(history))));
-			}
+	os.api("notes/create", postData, token)
+		.then(() => {
+			clear();
+			nextTick(() => {
+				deleteDraft();
+				emit("posted");
+				if (postData.text && postData.text !== "") {
+					const hashtags_ = mfm
+						.parse(postData.text)
+						.filter((x) => x.type === "hashtag")
+						.map((x) => x.props.hashtag);
+					const history = JSON.parse(
+						localStorage.getItem("hashtags") || "[]"
+					) as string[];
+					localStorage.setItem(
+						"hashtags",
+						JSON.stringify(unique(hashtags_.concat(history)))
+					);
+				}
+				posting = false;
+				postAccount = null;
+			});
+		})
+		.catch((err) => {
 			posting = false;
-			postAccount = null;
+			os.alert({
+				type: "error",
+				text: err.message + "\n" + (err as any).id,
+			});
 		});
-	}).catch(err => {
-		posting = false;
-		os.alert({
-			type: 'error',
-			text: err.message + '\n' + (err as any).id,
-		});
-	});
 }
 
 function cancel() {
-	emit('cancel');
+	emit("cancel");
 }
 
 function insertMention() {
-	os.selectUser().then(user => {
-		insertTextAtCursor(textareaEl, '@' + Acct.toString(user) + ' ');
+	os.selectUser().then((user) => {
+		insertTextAtCursor(textareaEl, "@" + Acct.toString(user) + " ");
 	});
 }
 
@@ -630,37 +890,48 @@ async function insertEmoji(ev: MouseEvent) {
 }
 
 async function openCheatSheet(ev: MouseEvent) {
-  os.popup(XCheatSheet, {}, {}, 'closed');
+	os.popup(XCheatSheet, {}, {}, "closed");
 }
 
 function showActions(ev) {
-	os.popupMenu(postFormActions.map(action => ({
-		text: action.title,
-		action: () => {
-			action.handler({
-				text: text,
-			}, (key, value) => {
-				if (key === 'text') { text = value; }
-			});
-		},
-	})), ev.currentTarget ?? ev.target);
+	os.popupMenu(
+		postFormActions.map((action) => ({
+			text: action.title,
+			action: () => {
+				action.handler(
+					{
+						text: text,
+					},
+					(key, value) => {
+						if (key === "text") {
+							text = value;
+						}
+					}
+				);
+			},
+		})),
+		ev.currentTarget ?? ev.target
+	);
 }
 
 let postAccount = $ref<misskey.entities.UserDetailed | null>(null);
 
 function openAccountMenu(ev: MouseEvent) {
-	openAccountMenu_({
-		withExtraOperation: false,
-		includeCurrentAccount: true,
-		active: postAccount != null ? postAccount.id : $i.id,
-		onChoose: (account) => {
-			if (account.id === $i.id) {
-				postAccount = null;
-			} else {
-				postAccount = account;
-			}
+	openAccountMenu_(
+		{
+			withExtraOperation: false,
+			includeCurrentAccount: true,
+			active: postAccount != null ? postAccount.id : $i.id,
+			onChoose: (account) => {
+				if (account.id === $i.id) {
+					postAccount = null;
+				} else {
+					postAccount = account;
+				}
+			},
 		},
-	}, ev);
+		ev
+	);
 }
 
 onMounted(() => {
@@ -680,14 +951,18 @@ onMounted(() => {
 	nextTick(() => {
 		// 書きかけの投稿を復元
 		if (!props.instant && !props.mention && !props.specified) {
-			const draft = JSON.parse(localStorage.getItem('drafts') || '{}')[draftKey];
+			const draft = JSON.parse(localStorage.getItem("drafts") || "{}")[
+				draftKey
+			];
 			if (draft) {
 				text = draft.data.text;
 				useCw = draft.data.useCw;
 				cw = draft.data.cw;
 				visibility = draft.data.visibility;
 				localOnly = draft.data.localOnly;
-				files = (draft.data.files || []).filter(draftFile => draftFile);
+				files = (draft.data.files || []).filter(
+					(draftFile) => draftFile
+				);
 				if (draft.data.poll) {
 					poll = draft.data.poll;
 				}
@@ -697,13 +972,13 @@ onMounted(() => {
 		// 削除して編集
 		if (props.initialNote) {
 			const init = props.initialNote;
-			text = init.text ? init.text : '';
+			text = init.text ? init.text : "";
 			files = init.files;
 			cw = init.cw;
 			useCw = init.cw != null;
 			if (init.poll) {
 				poll = {
-					choices: init.poll.choices.map(x => x.text),
+					choices: init.poll.choices.map((x) => x.text),
 					multiple: init.poll.multiple,
 					expiresAt: init.poll.expiresAt,
 					expiredAfter: init.poll.expiredAfter,
@@ -721,7 +996,7 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .right {
-	float:right
+	float: right;
 }
 .gafaadew {
 	position: relative;
@@ -997,7 +1272,7 @@ onMounted(() => {
 				> button {
 					font-size: 14px;
 					width: 44px;
-				height: 44px;
+					height: 44px;
 				}
 			}
 		}
diff --git a/packages/client/src/components/MkPostFormAttaches.vue b/packages/client/src/components/MkPostFormAttaches.vue
index ab83210577..ad2155155b 100644
--- a/packages/client/src/components/MkPostFormAttaches.vue
+++ b/packages/client/src/components/MkPostFormAttaches.vue
@@ -1,28 +1,46 @@
 <template>
-<div v-show="files.length != 0" class="skeikyzd">
-	<XDraggable v-model="_files" class="files" item-key="id" animation="150" delay="100" delay-on-touch-only="true">
-		<template #item="{element}">
-			<div class="file" @click="showFileMenu(element, $event)" @contextmenu.prevent="showFileMenu(element, $event)">
-				<MkDriveFileThumbnail :data-id="element.id" class="thumbnail" :file="element" fit="cover"/>
-				<div v-if="element.isSensitive" class="sensitive">
-					<i class="ph-warning ph-bold ph-lg icon"></i>
+	<div v-show="files.length != 0" class="skeikyzd">
+		<XDraggable
+			v-model="_files"
+			class="files"
+			item-key="id"
+			animation="150"
+			delay="100"
+			delay-on-touch-only="true"
+		>
+			<template #item="{ element }">
+				<div
+					class="file"
+					@click="showFileMenu(element, $event)"
+					@contextmenu.prevent="showFileMenu(element, $event)"
+				>
+					<MkDriveFileThumbnail
+						:data-id="element.id"
+						class="thumbnail"
+						:file="element"
+						fit="cover"
+					/>
+					<div v-if="element.isSensitive" class="sensitive">
+						<i class="ph-warning ph-bold ph-lg icon"></i>
+					</div>
 				</div>
-			</div>
-		</template>
-	</XDraggable>
-	<p class="remain">{{ 16 - files.length }}/16</p>
-</div>
+			</template>
+		</XDraggable>
+		<p class="remain">{{ 16 - files.length }}/16</p>
+	</div>
 </template>
 
 <script lang="ts">
-import { defineComponent, defineAsyncComponent } from 'vue';
-import MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
+import { defineComponent, defineAsyncComponent } from "vue";
+import MkDriveFileThumbnail from "@/components/MkDriveFileThumbnail.vue";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
 
 export default defineComponent({
 	components: {
-		XDraggable: defineAsyncComponent(() => import('vuedraggable').then(x => x.default)),
+		XDraggable: defineAsyncComponent(() =>
+			import("vuedraggable").then((x) => x.default)
+		),
 		MkDriveFileThumbnail,
 	},
 
@@ -37,7 +55,7 @@ export default defineComponent({
 		},
 	},
 
-	emits: ['updated', 'detach', 'changeSensitive', 'changeName'],
+	emits: ["updated", "detach", "changeSensitive", "changeName"],
 
 	data() {
 		return {
@@ -52,7 +70,7 @@ export default defineComponent({
 				return this.files;
 			},
 			set(value) {
-				this.$emit('updated', value);
+				this.$emit("updated", value);
 			},
 		},
 	},
@@ -62,15 +80,15 @@ export default defineComponent({
 			if (this.detachMediaFn) {
 				this.detachMediaFn(id);
 			} else {
-				this.$emit('detach', id);
+				this.$emit("detach", id);
 			}
 		},
 		toggleSensitive(file) {
-			os.api('drive/files/update', {
+			os.api("drive/files/update", {
 				fileId: file.id,
 				isSensitive: !file.isSensitive,
 			}).then(() => {
-				this.$emit('changeSensitive', file, !file.isSensitive);
+				this.$emit("changeSensitive", file, !file.isSensitive);
 			});
 		},
 		async rename(file) {
@@ -80,56 +98,86 @@ export default defineComponent({
 				allowEmpty: false,
 			});
 			if (canceled) return;
-			os.api('drive/files/update', {
+			os.api("drive/files/update", {
 				fileId: file.id,
 				name: result,
 			}).then(() => {
-				this.$emit('changeName', file, result);
+				this.$emit("changeName", file, result);
 				file.name = result;
 			});
 		},
 
 		async describe(file) {
-			os.popup(defineAsyncComponent(() => import('@/components/MkMediaCaption.vue')), {
-				title: i18n.ts.describeFile,
-				input: {
-					placeholder: i18n.ts.inputNewDescription,
-					default: file.comment !== null ? file.comment : '',
+			os.popup(
+				defineAsyncComponent(
+					() => import("@/components/MkMediaCaption.vue")
+				),
+				{
+					title: i18n.ts.describeFile,
+					input: {
+						placeholder: i18n.ts.inputNewDescription,
+						default: file.comment !== null ? file.comment : "",
+					},
+					image: file,
 				},
-				image: file,
-			}, {
-				done: result => {
-					if (!result || result.canceled) return;
-					let comment = result.result.length === 0 ? null : result.result;
-					os.api('drive/files/update', {
-						fileId: file.id,
-						comment: comment,
-					}).then(() => {
-						file.comment = comment;
-					});
+				{
+					done: (result) => {
+						if (!result || result.canceled) return;
+						let comment =
+							result.result.length === 0 ? null : result.result;
+						os.api("drive/files/update", {
+							fileId: file.id,
+							comment: comment,
+						}).then(() => {
+							file.comment = comment;
+						});
+					},
 				},
-			}, 'closed');
+				"closed"
+			);
 		},
 
 		showFileMenu(file, ev: MouseEvent) {
 			if (this.menu) return;
-			this.menu = os.popupMenu([{
-				text: i18n.ts.renameFile,
-				icon: 'ph-cursor-text ph-bold ph-lg',
-				action: () => { this.rename(file); },
-			}, {
-				text: file.isSensitive ? i18n.ts.unmarkAsSensitive : i18n.ts.markAsSensitive,
-				icon: file.isSensitive ? 'ph-eye-slash ph-bold ph-lg' : 'ph-eye ph-bold ph-lg',
-				action: () => { this.toggleSensitive(file); },
-			}, {
-				text: i18n.ts.describeFile,
-				icon: 'ph-cursor-text ph-bold ph-lg',
-				action: () => { this.describe(file); },
-			}, {
-				text: i18n.ts.attachCancel,
-				icon: 'ph-circle-wavy-warning ph-bold ph-lg',
-				action: () => { this.detachMedia(file.id); },
-			}], ev.currentTarget ?? ev.target).then(() => this.menu = null);
+			this.menu = os
+				.popupMenu(
+					[
+						{
+							text: i18n.ts.renameFile,
+							icon: "ph-cursor-text ph-bold ph-lg",
+							action: () => {
+								this.rename(file);
+							},
+						},
+						{
+							text: file.isSensitive
+								? i18n.ts.unmarkAsSensitive
+								: i18n.ts.markAsSensitive,
+							icon: file.isSensitive
+								? "ph-eye-slash ph-bold ph-lg"
+								: "ph-eye ph-bold ph-lg",
+							action: () => {
+								this.toggleSensitive(file);
+							},
+						},
+						{
+							text: i18n.ts.describeFile,
+							icon: "ph-cursor-text ph-bold ph-lg",
+							action: () => {
+								this.describe(file);
+							},
+						},
+						{
+							text: i18n.ts.attachCancel,
+							icon: "ph-circle-wavy-warning ph-bold ph-lg",
+							action: () => {
+								this.detachMedia(file.id);
+							},
+						},
+					],
+					ev.currentTarget ?? ev.target
+				)
+				.then(() => (this.menu = null));
 		},
 	},
 });
@@ -172,7 +220,7 @@ export default defineComponent({
 				top: 0;
 				left: 0;
 				z-index: 2;
-				background: rgba(17, 17, 17, .7);
+				background: rgba(17, 17, 17, 0.7);
 				color: #fff;
 
 				> .icon {
diff --git a/packages/client/src/components/MkPostFormDialog.vue b/packages/client/src/components/MkPostFormDialog.vue
index 147ba9542b..c96a94c0c0 100644
--- a/packages/client/src/components/MkPostFormDialog.vue
+++ b/packages/client/src/components/MkPostFormDialog.vue
@@ -1,14 +1,28 @@
 <template>
-	<MkModal ref="modal" :prefer-type="'dialog'" @click="modal.close()" @closed="onModalClosed()">
-		<MkPostForm ref="form" style="margin: 0 auto auto auto;" v-bind="props" autofocus freeze-after-posted @posted="onPosted" @cancel="modal.close()" @esc="modal.close()"/>
+	<MkModal
+		ref="modal"
+		:prefer-type="'dialog'"
+		@click="modal.close()"
+		@closed="onModalClosed()"
+	>
+		<MkPostForm
+			ref="form"
+			style="margin: 0 auto auto auto"
+			v-bind="props"
+			autofocus
+			freeze-after-posted
+			@posted="onPosted"
+			@cancel="modal.close()"
+			@esc="modal.close()"
+		/>
 	</MkModal>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import * as misskey from 'calckey-js';
-import MkModal from '@/components/MkModal.vue';
-import MkPostForm from '@/components/MkPostForm.vue';
+import {} from "vue";
+import * as misskey from "calckey-js";
+import MkModal from "@/components/MkModal.vue";
+import MkPostForm from "@/components/MkPostForm.vue";
 
 const props = defineProps<{
 	reply?: misskey.entities.Note;
@@ -28,7 +42,7 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-	(ev: 'closed'): void;
+	(ev: "closed"): void;
 }>();
 
 let modal = $shallowRef<InstanceType<typeof MkModal>>();
@@ -41,6 +55,6 @@ function onPosted() {
 }
 
 function onModalClosed() {
-	emit('closed');
+	emit("closed");
 }
 </script>
diff --git a/packages/client/src/components/MkPushNotificationAllowButton.vue b/packages/client/src/components/MkPushNotificationAllowButton.vue
index b98c814f24..0b2c4f6e34 100644
--- a/packages/client/src/components/MkPushNotificationAllowButton.vue
+++ b/packages/client/src/components/MkPushNotificationAllowButton.vue
@@ -1,46 +1,63 @@
 <template>
-<MkButton
-	v-if="supported && !pushRegistrationInServer"
-	type="button"
-	primary
-	:gradate="gradate"
-	:rounded="rounded"
-	:inline="inline"
-	:autofocus="autofocus"
-	:wait="wait"
-	:full="full"
-	@click="subscribe"
->
-	{{ i18n.ts.subscribePushNotification }}
-</MkButton>
-<MkButton
-	v-else-if="!showOnlyToRegister && ($i ? pushRegistrationInServer : pushSubscription)"
-	type="button"
-	:primary="false"
-	:gradate="gradate"
-	:rounded="rounded"
-	:inline="inline"
-	:autofocus="autofocus"
-	:wait="wait"
-	:full="full"
-	@click="unsubscribe"
->
-	{{ i18n.ts.unsubscribePushNotification }}
-</MkButton>
-<MkButton v-else-if="$i && pushRegistrationInServer" disabled :rounded="rounded" :inline="inline" :wait="wait" :full="full">
-	{{ i18n.ts.pushNotificationAlreadySubscribed }}
-</MkButton>
-<MkButton v-else-if="!supported" disabled :rounded="rounded" :inline="inline" :wait="wait" :full="full">
-	{{ i18n.ts.pushNotificationNotSupported }}
-</MkButton>
+	<MkButton
+		v-if="supported && !pushRegistrationInServer"
+		type="button"
+		primary
+		:gradate="gradate"
+		:rounded="rounded"
+		:inline="inline"
+		:autofocus="autofocus"
+		:wait="wait"
+		:full="full"
+		@click="subscribe"
+	>
+		{{ i18n.ts.subscribePushNotification }}
+	</MkButton>
+	<MkButton
+		v-else-if="
+			!showOnlyToRegister &&
+			($i ? pushRegistrationInServer : pushSubscription)
+		"
+		type="button"
+		:primary="false"
+		:gradate="gradate"
+		:rounded="rounded"
+		:inline="inline"
+		:autofocus="autofocus"
+		:wait="wait"
+		:full="full"
+		@click="unsubscribe"
+	>
+		{{ i18n.ts.unsubscribePushNotification }}
+	</MkButton>
+	<MkButton
+		v-else-if="$i && pushRegistrationInServer"
+		disabled
+		:rounded="rounded"
+		:inline="inline"
+		:wait="wait"
+		:full="full"
+	>
+		{{ i18n.ts.pushNotificationAlreadySubscribed }}
+	</MkButton>
+	<MkButton
+		v-else-if="!supported"
+		disabled
+		:rounded="rounded"
+		:inline="inline"
+		:wait="wait"
+		:full="full"
+	>
+		{{ i18n.ts.pushNotificationNotSupported }}
+	</MkButton>
 </template>
 
 <script setup lang="ts">
-import { $i, getAccounts } from '@/account';
-import MkButton from '@/components/MkButton.vue';
-import { instance } from '@/instance';
-import { api, apiWithDialog, promiseDialog } from '@/os';
-import { i18n } from '@/i18n';
+import { $i, getAccounts } from "@/account";
+import MkButton from "@/components/MkButton.vue";
+import { instance } from "@/instance";
+import { api, apiWithDialog, promiseDialog } from "@/os";
+import { i18n } from "@/i18n";
 
 defineProps<{
 	primary?: boolean;
@@ -62,38 +79,60 @@ let registration = $ref<ServiceWorkerRegistration | undefined>();
 let supported = $ref(false);
 // If this browser has already subscribed to push notification
 let pushSubscription = $ref<PushSubscription | null>(null);
-let pushRegistrationInServer = $ref<{ state?: string; key?: string; userId: string; endpoint: string; sendReadMessage: boolean; } | undefined>();
+let pushRegistrationInServer = $ref<
+	| {
+			state?: string;
+			key?: string;
+			userId: string;
+			endpoint: string;
+			sendReadMessage: boolean;
+	  }
+	| undefined
+>();
 
 function subscribe() {
 	if (!registration || !supported || !instance.swPublickey) return;
 
 	// SEE: https://developer.mozilla.org/en-US/docs/Web/API/PushManager/subscribe#Parameters
-	return promiseDialog(registration.pushManager.subscribe({
-		userVisibleOnly: true,
-		applicationServerKey: urlBase64ToUint8Array(instance.swPublickey),
-	})
-	.then(async subscription => {
-		pushSubscription = subscription;
+	return promiseDialog(
+		registration.pushManager
+			.subscribe({
+				userVisibleOnly: true,
+				applicationServerKey: urlBase64ToUint8Array(
+					instance.swPublickey
+				),
+			})
+			.then(
+				async (subscription) => {
+					pushSubscription = subscription;
 
-		// Register
-		pushRegistrationInServer = await api('sw/register', {
-			endpoint: subscription.endpoint,
-			auth: encode(subscription.getKey('auth')),
-			publickey: encode(subscription.getKey('p256dh')),
-		});
-	}, async err => { // When subscribe failed
-		// 通知が許可されていなかったとき
-		if (err?.name === 'NotAllowedError') {
-			console.info('User denied the notification permission request.');
-			return;
-		}
+					// Register
+					pushRegistrationInServer = await api("sw/register", {
+						endpoint: subscription.endpoint,
+						auth: encode(subscription.getKey("auth")),
+						publickey: encode(subscription.getKey("p256dh")),
+					});
+				},
+				async (err) => {
+					// When subscribe failed
+					// 通知が許可されていなかったとき
+					if (err?.name === "NotAllowedError") {
+						console.info(
+							"User denied the notification permission request."
+						);
+						return;
+					}
 
-		// 違うapplicationServerKey (または gcm_sender_id)のサブスクリプションが
-		// 既に存在していることが原因でエラーになった可能性があるので、
-		// そのサブスクリプションを解除しておく
-		// （これは実行されなさそうだけど、おまじない的に古い実装から残してある）
-		await unsubscribe();
-	}), null, null);
+					// 違うapplicationServerKey (または gcm_sender_id)のサブスクリプションが
+					// 既に存在していることが原因でエラーになった可能性があるので、
+					// そのサブスクリプションを解除しておく
+					// （これは実行されなさそうだけど、おまじない的に古い実装から残してある）
+					await unsubscribe();
+				}
+			),
+		null,
+		null
+	);
 }
 
 async function unsubscribe() {
@@ -105,13 +144,13 @@ async function unsubscribe() {
 	pushRegistrationInServer = undefined;
 
 	if ($i && accounts.length >= 2) {
-		apiWithDialog('sw/unregister', {
+		apiWithDialog("sw/unregister", {
 			i: $i.token,
 			endpoint,
 		});
 	} else {
 		pushSubscription.unsubscribe();
-		apiWithDialog('sw/unregister', {
+		apiWithDialog("sw/unregister", {
 			endpoint,
 		});
 		pushSubscription = null;
@@ -127,10 +166,10 @@ function encode(buffer: ArrayBuffer | null) {
  * @param base64String base64 string
  */
 function urlBase64ToUint8Array(base64String: string): Uint8Array {
-	const padding = '='.repeat((4 - base64String.length % 4) % 4);
+	const padding = "=".repeat((4 - (base64String.length % 4)) % 4);
 	const base64 = (base64String + padding)
-		.replace(/-/g, '+')
-		.replace(/_/g, '/');
+		.replace(/-/g, "+")
+		.replace(/_/g, "/");
 
 	const rawData = window.atob(base64);
 	const outputArray = new Uint8Array(rawData.length);
@@ -144,16 +183,16 @@ function urlBase64ToUint8Array(base64String: string): Uint8Array {
 if (navigator.serviceWorker == null) {
 	// TODO: よしなに？
 } else {
-	navigator.serviceWorker.ready.then(async swr => {
+	navigator.serviceWorker.ready.then(async (swr) => {
 		registration = swr;
 
 		pushSubscription = await registration.pushManager.getSubscription();
 
-		if (instance.swPublickey && ('PushManager' in window) && $i && $i.token) {
+		if (instance.swPublickey && "PushManager" in window && $i && $i.token) {
 			supported = true;
 
 			if (pushSubscription) {
-				const res = await api('sw/show-registration', {
+				const res = await api("sw/show-registration", {
 					endpoint: pushSubscription.endpoint,
 				});
 
diff --git a/packages/client/src/components/MkQuoteButton.vue b/packages/client/src/components/MkQuoteButton.vue
index a936e791d8..4710d01b47 100644
--- a/packages/client/src/components/MkQuoteButton.vue
+++ b/packages/client/src/components/MkQuoteButton.vue
@@ -1,27 +1,31 @@
 <template>
-<button
-	v-if="canRenote && $store.state.seperateRenoteQuote"
-	v-tooltip.noDelay.bottom="i18n.ts.quote"
-	class="eddddedb _button"
-	@click="quote()"
->
-	<i class="ph-quotes ph-bold ph-lg"></i>
-</button>
+	<button
+		v-if="canRenote && $store.state.seperateRenoteQuote"
+		v-tooltip.noDelay.bottom="i18n.ts.quote"
+		class="eddddedb _button"
+		@click="quote()"
+	>
+		<i class="ph-quotes ph-bold ph-lg"></i>
+	</button>
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
-import type { Note } from 'calckey-js/built/entities';
-import { pleaseLogin } from '@/scripts/please-login';
-import * as os from '@/os';
-import { $i } from '@/account';
-import { i18n } from '@/i18n';
+import { computed } from "vue";
+import type { Note } from "calckey-js/built/entities";
+import { pleaseLogin } from "@/scripts/please-login";
+import * as os from "@/os";
+import { $i } from "@/account";
+import { i18n } from "@/i18n";
 
 const props = defineProps<{
 	note: Note;
 }>();
 
-const canRenote = computed(() => ['public', 'home'].includes(props.note.visibility) || props.note.userId === $i?.id);
+const canRenote = computed(
+	() =>
+		["public", "home"].includes(props.note.visibility) ||
+		props.note.userId === $i?.id
+);
 
 function quote(): void {
 	pleaseLogin();
diff --git a/packages/client/src/components/MkReactedUsersDialog.vue b/packages/client/src/components/MkReactedUsersDialog.vue
index a41378f2bf..7012ea3fa2 100644
--- a/packages/client/src/components/MkReactedUsersDialog.vue
+++ b/packages/client/src/components/MkReactedUsersDialog.vue
@@ -1,58 +1,84 @@
 <template>
-<MkModalWindow
-	ref="dialog"
-	:width="400"
-	:height="450"
-	@close="dialog.close()"
-	@closed="emit('closed')"
->
-	<template #header>{{ i18n.ts.reactions }}</template>
+	<MkModalWindow
+		ref="dialog"
+		:width="400"
+		:height="450"
+		@close="dialog.close()"
+		@closed="emit('closed')"
+	>
+		<template #header>{{ i18n.ts.reactions }}</template>
 
-	<MkSpacer :margin-min="20" :margin-max="28">
-		<div v-if="note" class="_gaps">
-			<div v-if="reactions.length === 0" class="_fullinfo">
-				<img src="/static-assets/badges/info.png" class="_ghost" alt="Info"/>
-				<div>{{ i18n.ts.nothing }}</div>
-			</div>
-			<template v-else>
-				<div :class="$style.tabs">
-					<button v-for="reaction in reactions" :key="reaction" :class="[$style.tab, { [$style.tabActive]: tab === reaction }]" class="_button" @click="tab = reaction">
-						<MkReactionIcon
-							ref="reactionRef"
-							:reaction="reaction ? reaction.replace(/^:(\w+):$/, ':$1@.:') : reaction"
-							:custom-emojis="note.emojis"
-						/>
-						<span style="margin-left: 4px;">{{ note.reactions[reaction] }}</span>
-					</button>
+		<MkSpacer :margin-min="20" :margin-max="28">
+			<div v-if="note" class="_gaps">
+				<div v-if="reactions.length === 0" class="_fullinfo">
+					<img
+						src="/static-assets/badges/info.png"
+						class="_ghost"
+						alt="Info"
+					/>
+					<div>{{ i18n.ts.nothing }}</div>
 				</div>
-				<MkA v-for="user in users" :key="user.id" :to="userPage(user)">
-					<MkUserCardMini :user="user" :with-chart="false"/>
-				</MkA>
-			</template>
-		</div>
-		<div v-else>
-			<MkLoading/>
-		</div>
-	</MkSpacer>
-</MkModalWindow>
+				<template v-else>
+					<div :class="$style.tabs">
+						<button
+							v-for="reaction in reactions"
+							:key="reaction"
+							:class="[
+								$style.tab,
+								{ [$style.tabActive]: tab === reaction },
+							]"
+							class="_button"
+							@click="tab = reaction"
+						>
+							<MkReactionIcon
+								ref="reactionRef"
+								:reaction="
+									reaction
+										? reaction.replace(
+												/^:(\w+):$/,
+												':$1@.:'
+										  )
+										: reaction
+								"
+								:custom-emojis="note.emojis"
+							/>
+							<span style="margin-left: 4px">{{
+								note.reactions[reaction]
+							}}</span>
+						</button>
+					</div>
+					<MkA
+						v-for="user in users"
+						:key="user.id"
+						:to="userPage(user)"
+					>
+						<MkUserCardMini :user="user" :with-chart="false" />
+					</MkA>
+				</template>
+			</div>
+			<div v-else>
+				<MkLoading />
+			</div>
+		</MkSpacer>
+	</MkModalWindow>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, watch } from 'vue';
-import * as misskey from 'calckey-js';
-import MkModalWindow from '@/components/MkModalWindow.vue';
-import MkReactionIcon from '@/components/MkReactionIcon.vue';
-import MkUserCardMini from '@/components/MkUserCardMini.vue';
-import { userPage } from '@/filters/user';
-import { i18n } from '@/i18n';
-import * as os from '@/os';
+import { onMounted, watch } from "vue";
+import * as misskey from "calckey-js";
+import MkModalWindow from "@/components/MkModalWindow.vue";
+import MkReactionIcon from "@/components/MkReactionIcon.vue";
+import MkUserCardMini from "@/components/MkUserCardMini.vue";
+import { userPage } from "@/filters/user";
+import { i18n } from "@/i18n";
+import * as os from "@/os";
 
 const emit = defineEmits<{
-	(ev: 'closed'): void,
+	(ev: "closed"): void;
 }>();
 
 const props = defineProps<{
-	noteId: misskey.entities.Note['id'];
+	noteId: misskey.entities.Note["id"];
 }>();
 
 const dialog = $shallowRef<InstanceType<typeof MkModalWindow>>();
@@ -63,17 +89,17 @@ let reactions = $ref<string[]>();
 let users = $ref();
 
 watch($$(tab), async () => {
-	const res = await os.api('notes/reactions', {
+	const res = await os.api("notes/reactions", {
 		noteId: props.noteId,
 		type: tab,
 		limit: 30,
 	});
 
-	users = res.map(x => x.user);
+	users = res.map((x) => x.user);
 });
 
 onMounted(() => {
-	os.api('notes/show', {
+	os.api("notes/show", {
 		noteId: props.noteId,
 	}).then((res) => {
 		reactions = Object.keys(res.reactions);
diff --git a/packages/client/src/components/MkReactionIcon.vue b/packages/client/src/components/MkReactionIcon.vue
index 5638c9a816..eb19a55208 100644
--- a/packages/client/src/components/MkReactionIcon.vue
+++ b/packages/client/src/components/MkReactionIcon.vue
@@ -1,9 +1,15 @@
 <template>
-<MkEmoji :emoji="reaction" :custom-emojis="customEmojis || []" :is-reaction="true" :normal="true" :no-style="noStyle"/>
+	<MkEmoji
+		:emoji="reaction"
+		:custom-emojis="customEmojis || []"
+		:is-reaction="true"
+		:normal="true"
+		:no-style="noStyle"
+	/>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
+import {} from "vue";
 
 const props = defineProps<{
 	reaction: string;
diff --git a/packages/client/src/components/MkReactionTooltip.vue b/packages/client/src/components/MkReactionTooltip.vue
index 2da97cf4f3..e3db05c27c 100644
--- a/packages/client/src/components/MkReactionTooltip.vue
+++ b/packages/client/src/components/MkReactionTooltip.vue
@@ -1,16 +1,26 @@
 <template>
-<MkTooltip ref="tooltip" :target-element="targetElement" :max-width="340" @closed="emit('closed')">
-	<div class="beeadbfb">
-		<XReactionIcon :reaction="reaction" :custom-emojis="emojis" class="icon" :no-style="true"/>
-		<div class="name">{{ reaction.replace('@.', '') }}</div>
-	</div>
-</MkTooltip>
+	<MkTooltip
+		ref="tooltip"
+		:target-element="targetElement"
+		:max-width="340"
+		@closed="emit('closed')"
+	>
+		<div class="beeadbfb">
+			<XReactionIcon
+				:reaction="reaction"
+				:custom-emojis="emojis"
+				class="icon"
+				:no-style="true"
+			/>
+			<div class="name">{{ reaction.replace("@.", "") }}</div>
+		</div>
+	</MkTooltip>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import MkTooltip from './MkTooltip.vue';
-import XReactionIcon from '@/components/MkReactionIcon.vue';
+import {} from "vue";
+import MkTooltip from "./MkTooltip.vue";
+import XReactionIcon from "@/components/MkReactionIcon.vue";
 
 const props = defineProps<{
 	reaction: string;
@@ -19,7 +29,7 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-	(ev: 'closed'): void;
+	(ev: "closed"): void;
 }>();
 </script>
 
diff --git a/packages/client/src/components/MkReactionsViewer.details.vue b/packages/client/src/components/MkReactionsViewer.details.vue
index 8c423807ba..96dd051628 100644
--- a/packages/client/src/components/MkReactionsViewer.details.vue
+++ b/packages/client/src/components/MkReactionsViewer.details.vue
@@ -1,25 +1,37 @@
 <template>
-<MkTooltip ref="tooltip" :target-element="targetElement" :max-width="340" @closed="emit('closed')">
-	<div class="bqxuuuey">
-		<div class="reaction">
-			<XReactionIcon :reaction="reaction" :custom-emojis="emojis" class="icon" :no-style="true"/>
-			<div class="name">{{ reaction.replace('@.', '') }}</div>
-		</div>
-		<div class="users">
-			<div v-for="u in users" :key="u.id" class="user">
-				<MkAvatar class="avatar" :user="u"/>
-				<MkUserName class="name" :user="u" :nowrap="true"/>
+	<MkTooltip
+		ref="tooltip"
+		:target-element="targetElement"
+		:max-width="340"
+		@closed="emit('closed')"
+	>
+		<div class="bqxuuuey">
+			<div class="reaction">
+				<XReactionIcon
+					:reaction="reaction"
+					:custom-emojis="emojis"
+					class="icon"
+					:no-style="true"
+				/>
+				<div class="name">{{ reaction.replace("@.", "") }}</div>
+			</div>
+			<div class="users">
+				<div v-for="u in users" :key="u.id" class="user">
+					<MkAvatar class="avatar" :user="u" />
+					<MkUserName class="name" :user="u" :nowrap="true" />
+				</div>
+				<div v-if="users.length > 10" class="omitted">
+					+{{ count - 10 }}
+				</div>
 			</div>
-			<div v-if="users.length > 10" class="omitted">+{{ count - 10 }}</div>
 		</div>
-	</div>
-</MkTooltip>
+	</MkTooltip>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import MkTooltip from './MkTooltip.vue';
-import XReactionIcon from '@/components/MkReactionIcon.vue';
+import {} from "vue";
+import MkTooltip from "./MkTooltip.vue";
+import XReactionIcon from "@/components/MkReactionIcon.vue";
 
 const props = defineProps<{
 	reaction: string;
@@ -30,7 +42,7 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-	(ev: 'closed'): void;
+	(ev: "closed"): void;
 }>();
 </script>
 
diff --git a/packages/client/src/components/MkReactionsViewer.reaction.vue b/packages/client/src/components/MkReactionsViewer.reaction.vue
index 8c952addcb..461628a94a 100644
--- a/packages/client/src/components/MkReactionsViewer.reaction.vue
+++ b/packages/client/src/components/MkReactionsViewer.reaction.vue
@@ -1,25 +1,33 @@
 <template>
-<button
-	v-if="count > 0"
-	ref="buttonRef"
-	v-ripple="canToggle"
-	class="hkzvhatu _button"
-	:class="{ reacted: note.myReaction == reaction, canToggle, newlyAdded: !isInitial }"
-	@click="toggleReaction()"
->
-	<XReactionIcon class="icon" :reaction="reaction" :custom-emojis="note.emojis"/>
-	<span class="count">{{ count }}</span>
-</button>
+	<button
+		v-if="count > 0"
+		ref="buttonRef"
+		v-ripple="canToggle"
+		class="hkzvhatu _button"
+		:class="{
+			reacted: note.myReaction == reaction,
+			canToggle,
+			newlyAdded: !isInitial,
+		}"
+		@click="toggleReaction()"
+	>
+		<XReactionIcon
+			class="icon"
+			:reaction="reaction"
+			:custom-emojis="note.emojis"
+		/>
+		<span class="count">{{ count }}</span>
+	</button>
 </template>
 
 <script lang="ts" setup>
-import { computed, ref } from 'vue';
-import * as misskey from 'calckey-js';
-import XDetails from '@/components/MkReactionsViewer.details.vue';
-import XReactionIcon from '@/components/MkReactionIcon.vue';
-import * as os from '@/os';
-import { useTooltip } from '@/scripts/use-tooltip';
-import { $i } from '@/account';
+import { computed, ref } from "vue";
+import * as misskey from "calckey-js";
+import XDetails from "@/components/MkReactionsViewer.details.vue";
+import XReactionIcon from "@/components/MkReactionIcon.vue";
+import * as os from "@/os";
+import { useTooltip } from "@/scripts/use-tooltip";
+import { $i } from "@/account";
 
 const props = defineProps<{
 	reaction: string;
@@ -37,43 +45,52 @@ const toggleReaction = () => {
 
 	const oldReaction = props.note.myReaction;
 	if (oldReaction) {
-		os.api('notes/reactions/delete', {
+		os.api("notes/reactions/delete", {
 			noteId: props.note.id,
 		}).then(() => {
 			if (oldReaction !== props.reaction) {
-				os.api('notes/reactions/create', {
+				os.api("notes/reactions/create", {
 					noteId: props.note.id,
 					reaction: props.reaction,
 				});
 			}
 		});
 	} else {
-		os.api('notes/reactions/create', {
+		os.api("notes/reactions/create", {
 			noteId: props.note.id,
 			reaction: props.reaction,
 		});
 	}
 };
 
-useTooltip(buttonRef, async (showing) => {
-	const reactions = await os.apiGet('notes/reactions', {
-		noteId: props.note.id,
-		type: props.reaction,
-		limit: 11,
-		_cacheKey_: props.count,
-	});
+useTooltip(
+	buttonRef,
+	async (showing) => {
+		const reactions = await os.apiGet("notes/reactions", {
+			noteId: props.note.id,
+			type: props.reaction,
+			limit: 11,
+			_cacheKey_: props.count,
+		});
 
-	const users = reactions.map(x => x.user);
+		const users = reactions.map((x) => x.user);
 
-	os.popup(XDetails, {
-		showing,
-		reaction: props.reaction,
-		emojis: props.note.emojis,
-		users,
-		count: props.count,
-		targetElement: buttonRef.value,
-	}, {}, 'closed');
-}, 100);
+		os.popup(
+			XDetails,
+			{
+				showing,
+				reaction: props.reaction,
+				emojis: props.note.emojis,
+				users,
+				count: props.count,
+				targetElement: buttonRef.value,
+			},
+			{},
+			"closed"
+		);
+	},
+	100
+);
 </script>
 
 <style lang="scss" scoped>
@@ -85,21 +102,21 @@ useTooltip(buttonRef, async (showing) => {
 	border-radius: 4px;
 	pointer-events: all;
 	&.newlyAdded {
-		animation: scaleInSmall .3s cubic-bezier(0,0,0,1.2);
+		animation: scaleInSmall 0.3s cubic-bezier(0, 0, 0, 1.2);
 		:deep(.mk-emoji) {
-			animation: scaleIn .4s cubic-bezier(0.7, 0, 0, 1.5);
+			animation: scaleIn 0.4s cubic-bezier(0.7, 0, 0, 1.5);
 		}
 	}
 	:deep(.mk-emoji) {
-		transition: transform .4s cubic-bezier(0,0,0,6);
+		transition: transform 0.4s cubic-bezier(0, 0, 0, 6);
 	}
 	&.reacted :deep(.mk-emoji) {
-		transition: transform .4s cubic-bezier(0,0,0,1);
+		transition: transform 0.4s cubic-bezier(0, 0, 0, 1);
 	}
 	&:active {
 		:deep(.mk-emoji) {
-			transition: transform .4s cubic-bezier(0,0,0,1);
-			transform: scale(.85);
+			transition: transform 0.4s cubic-bezier(0, 0, 0, 1);
+			transform: scale(0.85);
 		}
 	}
 	&.canToggle {
diff --git a/packages/client/src/components/MkReactionsViewer.vue b/packages/client/src/components/MkReactionsViewer.vue
index eb60e3633d..fc108b4729 100644
--- a/packages/client/src/components/MkReactionsViewer.vue
+++ b/packages/client/src/components/MkReactionsViewer.vue
@@ -1,14 +1,21 @@
 <template>
-<div class="tdflqwzn" :class="{ isMe }">
-	<XReaction v-for="(count, reaction) in note.reactions" :key="reaction" :reaction="reaction" :count="count" :is-initial="initialReactions.has(reaction)" :note="note"/>
-</div>
+	<div class="tdflqwzn" :class="{ isMe }">
+		<XReaction
+			v-for="(count, reaction) in note.reactions"
+			:key="reaction"
+			:reaction="reaction"
+			:count="count"
+			:is-initial="initialReactions.has(reaction)"
+			:note="note"
+		/>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
-import * as misskey from 'calckey-js';
-import { $i } from '@/account';
-import XReaction from '@/components/MkReactionsViewer.reaction.vue';
+import { computed } from "vue";
+import * as misskey from "calckey-js";
+import { $i } from "@/account";
+import XReaction from "@/components/MkReactionsViewer.reaction.vue";
 
 const props = defineProps<{
 	note: misskey.entities.Note;
@@ -22,9 +29,9 @@ const isMe = computed(() => $i && $i.id === props.note.userId);
 <style lang="scss" scoped>
 .tdflqwzn {
 	margin-inline: -2px;
-	margin-top: .2em;
+	margin-top: 0.2em;
 	width: 100%;
-	
+
 	&:empty {
 		display: none;
 	}
diff --git a/packages/client/src/components/MkRemoteCaution.vue b/packages/client/src/components/MkRemoteCaution.vue
index 8cb48648f7..f8a84e81e2 100644
--- a/packages/client/src/components/MkRemoteCaution.vue
+++ b/packages/client/src/components/MkRemoteCaution.vue
@@ -1,9 +1,18 @@
 <template>
-<div class="jmgmzlwq _block">{{ i18n.ts.remoteUserCaution }}<a class="link" :href="href" rel="nofollow noopener" target="_blank">{{ i18n.ts.showOnRemote }}</a></div>
+	<div class="jmgmzlwq _block">
+		{{ i18n.ts.remoteUserCaution
+		}}<a
+			class="link"
+			:href="href"
+			rel="nofollow noopener"
+			target="_blank"
+			>{{ i18n.ts.showOnRemote }}</a
+		>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { i18n } from '@/i18n';
+import { i18n } from "@/i18n";
 
 defineProps<{
 	href: string;
diff --git a/packages/client/src/components/MkRenoteButton.vue b/packages/client/src/components/MkRenoteButton.vue
index 11bcd8bd51..e2968f796e 100644
--- a/packages/client/src/components/MkRenoteButton.vue
+++ b/packages/client/src/components/MkRenoteButton.vue
@@ -1,150 +1,185 @@
 <template>
-<button
-	v-if="canRenote"
-	ref="buttonRef"
-	v-tooltip.noDelay.bottom="i18n.ts.renote"
-	class="eddddedb _button canRenote"
-	@click="renote(false, $event)"
->
-	<i class="ph-repeat ph-bold ph-lg"></i>
-	<p v-if="count > 0" class="count">{{ count }}</p>
-</button>
-<button v-else class="eddddedb _button">
-	<i class="ph-prohibit ph-bold ph-lg"></i>
-</button>
+	<button
+		v-if="canRenote"
+		ref="buttonRef"
+		v-tooltip.noDelay.bottom="i18n.ts.renote"
+		class="eddddedb _button canRenote"
+		@click="renote(false, $event)"
+	>
+		<i class="ph-repeat ph-bold ph-lg"></i>
+		<p v-if="count > 0" class="count">{{ count }}</p>
+	</button>
+	<button v-else class="eddddedb _button">
+		<i class="ph-prohibit ph-bold ph-lg"></i>
+	</button>
 </template>
 
 <script lang="ts" setup>
-import { computed, ref } from 'vue';
-import type * as misskey from 'calckey-js';
-import Ripple from '@/components/MkRipple.vue';
-import XDetails from '@/components/MkUsersTooltip.vue';
-import { pleaseLogin } from '@/scripts/please-login';
-import * as os from '@/os';
-import { $i } from '@/account';
-import { useTooltip } from '@/scripts/use-tooltip';
-import { i18n } from '@/i18n';
-import { defaultStore } from '@/store';
+import { computed, ref } from "vue";
+import type * as misskey from "calckey-js";
+import Ripple from "@/components/MkRipple.vue";
+import XDetails from "@/components/MkUsersTooltip.vue";
+import { pleaseLogin } from "@/scripts/please-login";
+import * as os from "@/os";
+import { $i } from "@/account";
+import { useTooltip } from "@/scripts/use-tooltip";
+import { i18n } from "@/i18n";
+import { defaultStore } from "@/store";
 
 const props = defineProps<{
-		note: misskey.entities.Note;
-		count: number;
-	}>();
+	note: misskey.entities.Note;
+	count: number;
+}>();
 
 const buttonRef = ref<HTMLElement>();
 
-const canRenote = computed(() => ['public', 'home'].includes(props.note.visibility) || props.note.userId === $i.id);
+const canRenote = computed(
+	() =>
+		["public", "home"].includes(props.note.visibility) ||
+		props.note.userId === $i.id
+);
 
 useTooltip(buttonRef, async (showing) => {
-	const renotes = await os.api('notes/renotes', {
+	const renotes = await os.api("notes/renotes", {
 		noteId: props.note.id,
 		limit: 11,
 	});
 
-	const users = renotes.map(x => x.user);
+	const users = renotes.map((x) => x.user);
 
 	if (users.length < 1) return;
 
-	os.popup(XDetails, {
-		showing,
-		users,
-		count: props.count,
-		targetElement: buttonRef.value,
-	}, {}, 'closed');
+	os.popup(
+		XDetails,
+		{
+			showing,
+			users,
+			count: props.count,
+			targetElement: buttonRef.value,
+		},
+		{},
+		"closed"
+	);
 });
 
 const renote = async (viaKeyboard = false, ev?: MouseEvent) => {
 	pleaseLogin();
 
-	const renotes = await os.api('notes/renotes', {
+	const renotes = await os.api("notes/renotes", {
 		noteId: props.note.id,
 		limit: 11,
 	});
 
-	const users = renotes.map(x => x.user.id);
+	const users = renotes.map((x) => x.user.id);
 	const hasRenotedBefore = users.includes($i.id);
 
 	let buttonActions = [];
 
-	if (props.note.visibility === 'public') {
+	if (props.note.visibility === "public") {
 		buttonActions.push({
 			text: i18n.ts.renote,
-			textStyle: 'font-weight: bold',
-			icon: 'ph-repeat ph-bold ph-lg',
+			textStyle: "font-weight: bold",
+			icon: "ph-repeat ph-bold ph-lg",
 			danger: false,
 			action: () => {
-				os.api('notes/create', {
+				os.api("notes/create", {
 					renoteId: props.note.id,
-					visibility: 'public',
+					visibility: "public",
 				});
-				const el = ev && (ev.currentTarget ?? ev.target) as HTMLElement | null | undefined;
+				const el =
+					ev &&
+					((ev.currentTarget ?? ev.target) as
+						| HTMLElement
+						| null
+						| undefined);
 				if (el) {
 					const rect = el.getBoundingClientRect();
-					const x = rect.left + (el.offsetWidth / 2);
-					const y = rect.top + (el.offsetHeight / 2);
-					os.popup(Ripple, { x, y }, {}, 'end');
+					const x = rect.left + el.offsetWidth / 2;
+					const y = rect.top + el.offsetHeight / 2;
+					os.popup(Ripple, { x, y }, {}, "end");
 				}
 			},
 		});
 	}
 
-	if (['public', 'home'].includes(props.note.visibility)) {
+	if (["public", "home"].includes(props.note.visibility)) {
 		buttonActions.push({
 			text: i18n.ts.renoteAsUnlisted,
-			icons: ['ph-repeat ph-bold ph-lg', 'ph-house ph-bold ph-lg'],
+			icons: ["ph-repeat ph-bold ph-lg", "ph-house ph-bold ph-lg"],
 			danger: false,
 			action: () => {
-				os.api('notes/create', {
+				os.api("notes/create", {
 					renoteId: props.note.id,
-					visibility: 'home',
+					visibility: "home",
 				});
-				const el = ev && (ev.currentTarget ?? ev.target) as HTMLElement | null | undefined;
+				const el =
+					ev &&
+					((ev.currentTarget ?? ev.target) as
+						| HTMLElement
+						| null
+						| undefined);
 				if (el) {
 					const rect = el.getBoundingClientRect();
-					const x = rect.left + (el.offsetWidth / 2);
-					const y = rect.top + (el.offsetHeight / 2);
-					os.popup(Ripple, { x, y }, {}, 'end');
+					const x = rect.left + el.offsetWidth / 2;
+					const y = rect.top + el.offsetHeight / 2;
+					os.popup(Ripple, { x, y }, {}, "end");
 				}
 			},
 		});
 	}
 
-	if (props.note.visibility === 'specified') {
+	if (props.note.visibility === "specified") {
 		buttonActions.push({
 			text: i18n.ts.renoteToRecipients,
-			icons: ['ph-repeat ph-bold ph-lg', 'ph-envelope-simple-open ph-bold ph-lg'],
+			icons: [
+				"ph-repeat ph-bold ph-lg",
+				"ph-envelope-simple-open ph-bold ph-lg",
+			],
 			danger: false,
 			action: () => {
-				os.api('notes/create', {
+				os.api("notes/create", {
 					renoteId: props.note.id,
-					visibility: 'specified',
+					visibility: "specified",
 					visibleUserIds: props.note.visibleUserIds,
 				});
-				const el = ev && (ev.currentTarget ?? ev.target) as HTMLElement | null | undefined;
+				const el =
+					ev &&
+					((ev.currentTarget ?? ev.target) as
+						| HTMLElement
+						| null
+						| undefined);
 				if (el) {
 					const rect = el.getBoundingClientRect();
-					const x = rect.left + (el.offsetWidth / 2);
-					const y = rect.top + (el.offsetHeight / 2);
-					os.popup(Ripple, { x, y }, {}, 'end');
+					const x = rect.left + el.offsetWidth / 2;
+					const y = rect.top + el.offsetHeight / 2;
+					os.popup(Ripple, { x, y }, {}, "end");
 				}
 			},
 		});
 	} else {
 		buttonActions.push({
 			text: i18n.ts.renoteToFollowers,
-			icons: ['ph-repeat ph-bold ph-lg', 'ph-lock-simple-open ph-bold ph-lg'],
+			icons: [
+				"ph-repeat ph-bold ph-lg",
+				"ph-lock-simple-open ph-bold ph-lg",
+			],
 			danger: false,
 			action: () => {
-				os.api('notes/create', {
+				os.api("notes/create", {
 					renoteId: props.note.id,
-					visibility: 'followers',
+					visibility: "followers",
 				});
-				const el = ev && (ev.currentTarget ?? ev.target) as HTMLElement | null | undefined;
+				const el =
+					ev &&
+					((ev.currentTarget ?? ev.target) as
+						| HTMLElement
+						| null
+						| undefined);
 				if (el) {
 					const rect = el.getBoundingClientRect();
-					const x = rect.left + (el.offsetWidth / 2);
-					const y = rect.top + (el.offsetHeight / 2);
-					os.popup(Ripple, { x, y }, {}, 'end');
+					const x = rect.left + el.offsetWidth / 2;
+					const y = rect.top + el.offsetHeight / 2;
+					os.popup(Ripple, { x, y }, {}, "end");
 				}
 			},
 		});
@@ -153,7 +188,7 @@ const renote = async (viaKeyboard = false, ev?: MouseEvent) => {
 	if (!defaultStore.state.seperateRenoteQuote) {
 		buttonActions.push({
 			text: i18n.ts.quote,
-			icon: 'ph-quotes ph-bold ph-lg',
+			icon: "ph-quotes ph-bold ph-lg",
 			danger: false,
 			action: () => {
 				os.post({
@@ -166,10 +201,10 @@ const renote = async (viaKeyboard = false, ev?: MouseEvent) => {
 	if (hasRenotedBefore) {
 		buttonActions.push({
 			text: i18n.ts.unrenote,
-			icon: 'ph-trash ph-bold ph-lg',
+			icon: "ph-trash ph-bold ph-lg",
 			danger: true,
 			action: () => {
-				os.api('notes/unrenote', {
+				os.api("notes/unrenote", {
 					noteId: props.note.id,
 				});
 			},
@@ -179,26 +214,26 @@ const renote = async (viaKeyboard = false, ev?: MouseEvent) => {
 };
 </script>
 
-	<style lang="scss" scoped>
-	.eddddedb {
-		display: inline-block;
-		height: 32px;
-		margin: 2px;
-		padding: 0 6px;
-		border-radius: 4px;
+<style lang="scss" scoped>
+.eddddedb {
+	display: inline-block;
+	height: 32px;
+	margin: 2px;
+	padding: 0 6px;
+	border-radius: 4px;
 
-		&:not(.canRenote) {
-			cursor: default;
-		}
-
-		&.renoted {
-			background: var(--accent);
-		}
-
-		> .count {
-			display: inline;
-			margin-left: 8px;
-			opacity: 0.7;
-		}
+	&:not(.canRenote) {
+		cursor: default;
 	}
-	</style>
+
+	&.renoted {
+		background: var(--accent);
+	}
+
+	> .count {
+		display: inline;
+		margin-left: 8px;
+		opacity: 0.7;
+	}
+}
+</style>
diff --git a/packages/client/src/components/MkRipple.vue b/packages/client/src/components/MkRipple.vue
index 0eb8d2f4fa..d055caad76 100644
--- a/packages/client/src/components/MkRipple.vue
+++ b/packages/client/src/components/MkRipple.vue
@@ -1,93 +1,113 @@
 <template>
-<div class="vswabwbm" :style="{ zIndex, top: `${y - 64}px`, left: `${x - 64}px` }">
-	<svg width="128" height="128" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
-		<circle fill="none" cx="64" cy="64">
-			<animate
-				attributeName="r"
-				begin="0s" dur="0.5s"
-				values="4; 32"
-				calcMode="spline"
-				keyTimes="0; 1"
-				keySplines="0.165, 0.84, 0.44, 1"
-				repeatCount="1"
-			/>
-			<animate
-				attributeName="stroke-width"
-				begin="0s" dur="0.5s"
-				values="16; 0"
-				calcMode="spline"
-				keyTimes="0; 1"
-				keySplines="0.3, 0.61, 0.355, 1"
-				repeatCount="1"
-			/>
-		</circle>
-		<g fill="none" fill-rule="evenodd">
-			<circle v-for="(particle, i) in particles" :key="i" :fill="particle.color">
+	<div
+		class="vswabwbm"
+		:style="{ zIndex, top: `${y - 64}px`, left: `${x - 64}px` }"
+	>
+		<svg
+			width="128"
+			height="128"
+			viewBox="0 0 128 128"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<circle fill="none" cx="64" cy="64">
 				<animate
 					attributeName="r"
-					begin="0s" dur="0.8s"
-					:values="`${particle.size}; 0`"
+					begin="0s"
+					dur="0.5s"
+					values="4; 32"
 					calcMode="spline"
 					keyTimes="0; 1"
 					keySplines="0.165, 0.84, 0.44, 1"
 					repeatCount="1"
 				/>
 				<animate
-					attributeName="cx"
-					begin="0s" dur="0.8s"
-					:values="`${particle.xA}; ${particle.xB}`"
-					calcMode="spline"
-					keyTimes="0; 1"
-					keySplines="0.3, 0.61, 0.355, 1"
-					repeatCount="1"
-				/>
-				<animate
-					attributeName="cy"
-					begin="0s" dur="0.8s"
-					:values="`${particle.yA}; ${particle.yB}`"
+					attributeName="stroke-width"
+					begin="0s"
+					dur="0.5s"
+					values="16; 0"
 					calcMode="spline"
 					keyTimes="0; 1"
 					keySplines="0.3, 0.61, 0.355, 1"
 					repeatCount="1"
 				/>
 			</circle>
-		</g>
-	</svg>
-</div>
+			<g fill="none" fill-rule="evenodd">
+				<circle
+					v-for="(particle, i) in particles"
+					:key="i"
+					:fill="particle.color"
+				>
+					<animate
+						attributeName="r"
+						begin="0s"
+						dur="0.8s"
+						:values="`${particle.size}; 0`"
+						calcMode="spline"
+						keyTimes="0; 1"
+						keySplines="0.165, 0.84, 0.44, 1"
+						repeatCount="1"
+					/>
+					<animate
+						attributeName="cx"
+						begin="0s"
+						dur="0.8s"
+						:values="`${particle.xA}; ${particle.xB}`"
+						calcMode="spline"
+						keyTimes="0; 1"
+						keySplines="0.3, 0.61, 0.355, 1"
+						repeatCount="1"
+					/>
+					<animate
+						attributeName="cy"
+						begin="0s"
+						dur="0.8s"
+						:values="`${particle.yA}; ${particle.yB}`"
+						calcMode="spline"
+						keyTimes="0; 1"
+						keySplines="0.3, 0.61, 0.355, 1"
+						repeatCount="1"
+					/>
+				</circle>
+			</g>
+		</svg>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted } from 'vue';
-import * as os from '@/os';
+import { onMounted } from "vue";
+import * as os from "@/os";
 
-const props = withDefaults(defineProps<{
-	x: number;
-	y: number;
-	particle?: boolean;
-}>(), {
-	particle: true,
-});
+const props = withDefaults(
+	defineProps<{
+		x: number;
+		y: number;
+		particle?: boolean;
+	}>(),
+	{
+		particle: true,
+	}
+);
 
 const emit = defineEmits<{
-	(ev: 'end'): void;
+	(ev: "end"): void;
 }>();
 
 const particles = [];
 const origin = 64;
-const colors = ['#eb6f92', '#9ccfd8', '#f6c177'];
-const zIndex = os.claimZIndex('high');
+const colors = ["#eb6f92", "#9ccfd8", "#f6c177"];
+const zIndex = os.claimZIndex("high");
 
 if (props.particle) {
 	for (let i = 0; i < 12; i++) {
 		const angle = Math.random() * (Math.PI * 2);
 		const pos = Math.random() * 16;
-		const velocity = 16 + (Math.random() * 48);
+		const velocity = 16 + Math.random() * 48;
 		particles.push({
-			size: 4 + (Math.random() * 8),
-			xA: origin + (Math.sin(angle) * pos),
-			yA: origin + (Math.cos(angle) * pos),
-			xB: origin + (Math.sin(angle) * (pos + velocity)),
-			yB: origin + (Math.cos(angle) * (pos + velocity)),
+			size: 4 + Math.random() * 8,
+			xA: origin + Math.sin(angle) * pos,
+			yA: origin + Math.cos(angle) * pos,
+			xB: origin + Math.sin(angle) * (pos + velocity),
+			yB: origin + Math.cos(angle) * (pos + velocity),
 			color: colors[Math.floor(Math.random() * colors.length)],
 		});
 	}
@@ -95,7 +115,7 @@ if (props.particle) {
 
 onMounted(() => {
 	window.setTimeout(() => {
-		emit('end');
+		emit("end");
 	}, 1100);
 });
 </script>
diff --git a/packages/client/src/components/MkSample.vue b/packages/client/src/components/MkSample.vue
index 68510809c4..fcd064fdc1 100644
--- a/packages/client/src/components/MkSample.vue
+++ b/packages/client/src/components/MkSample.vue
@@ -1,41 +1,41 @@
 <template>
-<div class="_card">
-	<div class="_content">
-		<MkInput v-model="text">
-			<template #label>Text</template>
-		</MkInput>
-		<MkSwitch v-model="flag">
-			<span>Switch is now {{ flag ? 'on' : 'off' }}</span>
-		</MkSwitch>
-		<div style="margin: 32px 0;">
-			<MkRadio v-model="radio" value="misskey">Calckey</MkRadio>
-			<MkRadio v-model="radio" value="mastodon">Mastodon</MkRadio>
-			<MkRadio v-model="radio" value="pleroma">Pleroma</MkRadio>
+	<div class="_card">
+		<div class="_content">
+			<MkInput v-model="text">
+				<template #label>Text</template>
+			</MkInput>
+			<MkSwitch v-model="flag">
+				<span>Switch is now {{ flag ? "on" : "off" }}</span>
+			</MkSwitch>
+			<div style="margin: 32px 0">
+				<MkRadio v-model="radio" value="misskey">Calckey</MkRadio>
+				<MkRadio v-model="radio" value="mastodon">Mastodon</MkRadio>
+				<MkRadio v-model="radio" value="pleroma">Pleroma</MkRadio>
+			</div>
+			<MkButton inline>This is</MkButton>
+			<MkButton inline primary>the button</MkButton>
+		</div>
+		<div class="_content" style="pointer-events: none">
+			<Mfm :text="mfm" />
+		</div>
+		<div class="_content">
+			<MkButton inline primary @click="openMenu">Open menu</MkButton>
+			<MkButton inline primary @click="openDialog">Open dialog</MkButton>
+			<MkButton inline primary @click="openForm">Open form</MkButton>
+			<MkButton inline primary @click="openDrive">Open drive</MkButton>
 		</div>
-		<MkButton inline>This is</MkButton>
-		<MkButton inline primary>the button</MkButton>
 	</div>
-	<div class="_content" style="pointer-events: none;">
-		<Mfm :text="mfm"/>
-	</div>
-	<div class="_content">
-		<MkButton inline primary @click="openMenu">Open menu</MkButton>
-		<MkButton inline primary @click="openDialog">Open dialog</MkButton>
-		<MkButton inline primary @click="openForm">Open form</MkButton>
-		<MkButton inline primary @click="openDrive">Open drive</MkButton>
-	</div>
-</div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
-import MkButton from '@/components/MkButton.vue';
-import MkInput from '@/components/form/input.vue';
-import MkSwitch from '@/components/form/switch.vue';
-import MkTextarea from '@/components/form/textarea.vue';
-import MkRadio from '@/components/form/radio.vue';
-import * as os from '@/os';
-import * as config from '@/config';
+import { defineComponent } from "vue";
+import MkButton from "@/components/MkButton.vue";
+import MkInput from "@/components/form/input.vue";
+import MkSwitch from "@/components/form/switch.vue";
+import MkTextarea from "@/components/form/textarea.vue";
+import MkRadio from "@/components/form/radio.vue";
+import * as os from "@/os";
+import * as config from "@/config";
 
 export default defineComponent({
 	components: {
@@ -48,38 +48,42 @@ export default defineComponent({
 
 	data() {
 		return {
-			text: '',
+			text: "",
 			flag: true,
-			radio: 'calckey',
-			mfm: `Hello world! This is an @example mention. BTW, you are @${this.$i ? this.$i.username : 'guest'}.\nAlso, here is ${config.url} and [example link](${config.url}). for more details, see https://example.com.\nAs you know #misskey is open-source software.`
+			radio: "calckey",
+			mfm: `Hello world! This is an @example mention. BTW, you are @${
+				this.$i ? this.$i.username : "guest"
+			}.\nAlso, here is ${config.url} and [example link](${
+				config.url
+			}). for more details, see https://example.com.\nAs you know #misskey is open-source software.`,
 		};
 	},
 
 	methods: {
 		async openDialog() {
 			os.alert({
-				type: 'warning',
-				title: 'Oh my Calc',
-				text: 'Lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+				type: "warning",
+				title: "Oh my Calc",
+				text: "Lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
 			});
 		},
 
 		async openForm() {
-			os.form('Example form', {
+			os.form("Example form", {
 				foo: {
-					type: 'boolean',
+					type: "boolean",
 					default: true,
-					label: 'This is a boolean property'
+					label: "This is a boolean property",
 				},
 				bar: {
-					type: 'number',
+					type: "number",
 					default: 300,
-					label: 'This is a number property'
+					label: "This is a number property",
 				},
 				baz: {
-					type: 'string',
-					default: 'Calckey makes you happy.',
-					label: 'This is a string property'
+					type: "string",
+					default: "Calckey makes you happy.",
+					label: "This is a string property",
 				},
 			});
 		},
@@ -93,24 +97,34 @@ export default defineComponent({
 		},
 
 		async openMenu(ev) {
-			os.popupMenu([{
-				type: 'label',
-				text: 'Fruits'
-			}, {
-				text: 'Create some apples',
-				action: () => {},
-			}, {
-				text: 'Read some oranges',
-				action: () => {},
-			}, {
-				text: 'Update some melons',
-				action: () => {},
-			}, null, {
-				text: 'Delete some bananas',
-				danger: true,
-				action: () => {},
-			}], ev.currentTarget ?? ev.target);
+			os.popupMenu(
+				[
+					{
+						type: "label",
+						text: "Fruits",
+					},
+					{
+						text: "Create some apples",
+						action: () => {},
+					},
+					{
+						text: "Read some oranges",
+						action: () => {},
+					},
+					{
+						text: "Update some melons",
+						action: () => {},
+					},
+					null,
+					{
+						text: "Delete some bananas",
+						danger: true,
+						action: () => {},
+					},
+				],
+				ev.currentTarget ?? ev.target
+			);
 		},
-	}
+	},
 });
 </script>
diff --git a/packages/client/src/components/MkSignin.vue b/packages/client/src/components/MkSignin.vue
index d03341e56d..59f066f6e6 100644
--- a/packages/client/src/components/MkSignin.vue
+++ b/packages/client/src/components/MkSignin.vue
@@ -1,72 +1,181 @@
 <template>
-<form class="eppvobhk _monolithic_" :class="{ signing, totpLogin }" @submit.prevent="onSubmit">
-	<div class="auth _section _formRoot">
-		<div v-show="withAvatar" class="avatar" :style="{ backgroundImage: user ? `url('${ user.avatarUrl }')` : null, marginBottom: message ? '1.5em' : null }"></div>
-		<MkInfo v-if="message">
-			{{ message }}
-		</MkInfo>
-		<div v-if="!totpLogin" class="normal-signin">
-			<MkInput v-model="username" class="_formBlock" :placeholder="i18n.ts.username" type="text" pattern="^[a-zA-Z0-9_]+$" :spellcheck="false" autofocus required data-cy-signin-username @update:modelValue="onUsernameChange">
-				<template #prefix>@</template>
-				<template #suffix>@{{ host }}</template>
-			</MkInput>
-			<MkInput v-if="!user || user && !user.usePasswordLessLogin" v-model="password" class="_formBlock" :placeholder="i18n.ts.password" type="password" :with-password-toggle="true" required data-cy-signin-password>
-				<template #prefix><i class="ph-lock ph-bold ph-lg"></i></template>
-				<template #caption><button class="_textButton" type="button" @click="resetPassword">{{ i18n.ts.forgotPassword }}</button></template>
-			</MkInput>
-			<MkButton class="_formBlock" type="submit" primary :disabled="signing" style="margin: 1rem auto;">{{ signing ? i18n.ts.loggingIn : i18n.ts.login }}</MkButton>
-		</div>
-		<div v-if="totpLogin" class="2fa-signin" :class="{ securityKeys: user && user.securityKeys }">
-			<div v-if="user && user.securityKeys" class="twofa-group tap-group">
-				<p>{{ i18n.ts.tapSecurityKey }}</p>
-				<MkButton v-if="!queryingKey" @click="queryKey">
-					{{ i18n.ts.retry }}
-				</MkButton>
-			</div>
-			<div v-if="user && user.securityKeys" class="or-hr">
-				<p class="or-msg">{{ i18n.ts.or }}</p>
-			</div>
-			<div class="twofa-group totp-group">
-				<p style="margin-bottom:0;">{{ i18n.ts.twoStepAuthentication }}</p>
-				<MkInput v-if="user && user.usePasswordLessLogin" v-model="password" type="password" :with-password-toggle="true" required>
-					<template #label>{{ i18n.ts.password }}</template>
-					<template #prefix><i class="ph-lock ph-bold ph-lg"></i></template>
+	<form
+		class="eppvobhk _monolithic_"
+		:class="{ signing, totpLogin }"
+		@submit.prevent="onSubmit"
+	>
+		<div class="auth _section _formRoot">
+			<div
+				v-show="withAvatar"
+				class="avatar"
+				:style="{
+					backgroundImage: user ? `url('${user.avatarUrl}')` : null,
+					marginBottom: message ? '1.5em' : null,
+				}"
+			></div>
+			<MkInfo v-if="message">
+				{{ message }}
+			</MkInfo>
+			<div v-if="!totpLogin" class="normal-signin">
+				<MkInput
+					v-model="username"
+					class="_formBlock"
+					:placeholder="i18n.ts.username"
+					type="text"
+					pattern="^[a-zA-Z0-9_]+$"
+					:spellcheck="false"
+					autofocus
+					required
+					data-cy-signin-username
+					@update:modelValue="onUsernameChange"
+				>
+					<template #prefix>@</template>
+					<template #suffix>@{{ host }}</template>
 				</MkInput>
-				<MkInput v-model="token" type="text" pattern="^[0-9]{6}$" autocomplete="off" :spellcheck="false" required>
-					<template #label>{{ i18n.ts.token }}</template>
-					<template #prefix><i class="ph-poker-chip ph-bold ph-lg"></i></template>
+				<MkInput
+					v-if="!user || (user && !user.usePasswordLessLogin)"
+					v-model="password"
+					class="_formBlock"
+					:placeholder="i18n.ts.password"
+					type="password"
+					:with-password-toggle="true"
+					required
+					data-cy-signin-password
+				>
+					<template #prefix
+						><i class="ph-lock ph-bold ph-lg"></i
+					></template>
+					<template #caption
+						><button
+							class="_textButton"
+							type="button"
+							@click="resetPassword"
+						>
+							{{ i18n.ts.forgotPassword }}
+						</button></template
+					>
 				</MkInput>
-				<MkButton type="submit" :disabled="signing" primary style="margin: 0 auto;">{{ signing ? i18n.ts.loggingIn : i18n.ts.login }}</MkButton>
+				<MkButton
+					class="_formBlock"
+					type="submit"
+					primary
+					:disabled="signing"
+					style="margin: 1rem auto"
+					>{{ signing ? i18n.ts.loggingIn : i18n.ts.login }}</MkButton
+				>
+			</div>
+			<div
+				v-if="totpLogin"
+				class="2fa-signin"
+				:class="{ securityKeys: user && user.securityKeys }"
+			>
+				<div
+					v-if="user && user.securityKeys"
+					class="twofa-group tap-group"
+				>
+					<p>{{ i18n.ts.tapSecurityKey }}</p>
+					<MkButton v-if="!queryingKey" @click="queryKey">
+						{{ i18n.ts.retry }}
+					</MkButton>
+				</div>
+				<div v-if="user && user.securityKeys" class="or-hr">
+					<p class="or-msg">{{ i18n.ts.or }}</p>
+				</div>
+				<div class="twofa-group totp-group">
+					<p style="margin-bottom: 0">
+						{{ i18n.ts.twoStepAuthentication }}
+					</p>
+					<MkInput
+						v-if="user && user.usePasswordLessLogin"
+						v-model="password"
+						type="password"
+						:with-password-toggle="true"
+						required
+					>
+						<template #label>{{ i18n.ts.password }}</template>
+						<template #prefix
+							><i class="ph-lock ph-bold ph-lg"></i
+						></template>
+					</MkInput>
+					<MkInput
+						v-model="token"
+						type="text"
+						pattern="^[0-9]{6}$"
+						autocomplete="off"
+						:spellcheck="false"
+						required
+					>
+						<template #label>{{ i18n.ts.token }}</template>
+						<template #prefix
+							><i class="ph-poker-chip ph-bold ph-lg"></i
+						></template>
+					</MkInput>
+					<MkButton
+						type="submit"
+						:disabled="signing"
+						primary
+						style="margin: 0 auto"
+						>{{
+							signing ? i18n.ts.loggingIn : i18n.ts.login
+						}}</MkButton
+					>
+				</div>
 			</div>
 		</div>
-	</div>
-	<div class="social _section">
-		<a v-if="meta && meta.enableTwitterIntegration" class="_borderButton _gap" :href="`${apiUrl}/signin/twitter`"><i class="ph-twitter-logo ph-bold ph-lg" style="margin-right: 4px;"></i>{{ i18n.t('signinWith', { x: 'Twitter' }) }}</a>
-		<a v-if="meta && meta.enableGithubIntegration" class="_borderButton _gap" :href="`${apiUrl}/signin/github`"><i class="ph-github-logo ph-bold ph-lg" style="margin-right: 4px;"></i>{{ i18n.t('signinWith', { x: 'GitHub' }) }}</a>
-		<a v-if="meta && meta.enableDiscordIntegration" class="_borderButton _gap" :href="`${apiUrl}/signin/discord`"><i class="ph-discord-logo ph-bold ph-lg" style="margin-right: 4px;"></i>{{ i18n.t('signinWith', { x: 'Discord' }) }}</a>
-	</div>
-</form>
+		<div class="social _section">
+			<a
+				v-if="meta && meta.enableTwitterIntegration"
+				class="_borderButton _gap"
+				:href="`${apiUrl}/signin/twitter`"
+				><i
+					class="ph-twitter-logo ph-bold ph-lg"
+					style="margin-right: 4px"
+				></i
+				>{{ i18n.t("signinWith", { x: "Twitter" }) }}</a
+			>
+			<a
+				v-if="meta && meta.enableGithubIntegration"
+				class="_borderButton _gap"
+				:href="`${apiUrl}/signin/github`"
+				><i
+					class="ph-github-logo ph-bold ph-lg"
+					style="margin-right: 4px"
+				></i
+				>{{ i18n.t("signinWith", { x: "GitHub" }) }}</a
+			>
+			<a
+				v-if="meta && meta.enableDiscordIntegration"
+				class="_borderButton _gap"
+				:href="`${apiUrl}/signin/discord`"
+				><i
+					class="ph-discord-logo ph-bold ph-lg"
+					style="margin-right: 4px"
+				></i
+				>{{ i18n.t("signinWith", { x: "Discord" }) }}</a
+			>
+		</div>
+	</form>
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent } from 'vue';
-import { toUnicode } from 'punycode/';
-import { showSuspendedDialog } from '../scripts/show-suspended-dialog';
-import MkButton from '@/components/MkButton.vue';
-import MkInput from '@/components/form/input.vue';
-import MkInfo from '@/components/MkInfo.vue';
-import { apiUrl, host as configHost } from '@/config';
-import { byteify, hexify } from '@/scripts/2fa';
-import * as os from '@/os';
-import { login } from '@/account';
-import { instance } from '@/instance';
-import { i18n } from '@/i18n';
+import { defineAsyncComponent } from "vue";
+import { toUnicode } from "punycode/";
+import { showSuspendedDialog } from "../scripts/show-suspended-dialog";
+import MkButton from "@/components/MkButton.vue";
+import MkInput from "@/components/form/input.vue";
+import MkInfo from "@/components/MkInfo.vue";
+import { apiUrl, host as configHost } from "@/config";
+import { byteify, hexify } from "@/scripts/2fa";
+import * as os from "@/os";
+import { login } from "@/account";
+import { instance } from "@/instance";
+import { i18n } from "@/i18n";
 
 let signing = $ref(false);
 let user = $ref(null);
-let username = $ref('');
-let password = $ref('');
-let token = $ref('');
+let username = $ref("");
+let password = $ref("");
+let token = $ref("");
 let host = $ref(toUnicode(configHost));
 let totpLogin = $ref(false);
 let credential = $ref(null);
@@ -78,7 +187,7 @@ let reCaptchaResponse = $ref(null);
 const meta = $computed(() => instance);
 
 const emit = defineEmits<{
-	(ev: 'login', v: any): void;
+	(ev: "login", v: any): void;
 }>();
 
 const props = defineProps({
@@ -95,18 +204,21 @@ const props = defineProps({
 	message: {
 		type: String,
 		required: false,
-		default: '',
+		default: "",
 	},
 });
 
 function onUsernameChange() {
-	os.api('users/show', {
+	os.api("users/show", {
 		username: username,
-	}).then(userResponse => {
-		user = userResponse;
-	}, () => {
-		user = null;
-	});
+	}).then(
+		(userResponse) => {
+			user = userResponse;
+		},
+		() => {
+			user = null;
+		}
+	);
 }
 
 function onLogin(res) {
@@ -117,105 +229,116 @@ function onLogin(res) {
 
 function queryKey() {
 	queryingKey = true;
-	return navigator.credentials.get({
-		publicKey: {
-			challenge: byteify(challengeData.challenge, 'base64'),
-			allowCredentials: challengeData.securityKeys.map(key => ({
-				id: byteify(key.id, 'hex'),
-				type: 'public-key',
-				transports: ['usb', 'nfc', 'ble', 'internal'],
-			})),
-			timeout: 60 * 1000,
-		},
-	}).catch(() => {
-		queryingKey = false;
-		return Promise.reject(null);
-	}).then(credential => {
-		queryingKey = false;
-		signing = true;
-		return os.api('signin', {
-			username,
-			password,
-			signature: hexify(credential.response.signature),
-			authenticatorData: hexify(credential.response.authenticatorData),
-			clientDataJSON: hexify(credential.response.clientDataJSON),
-			credentialId: credential.id,
-			challengeId: challengeData.challengeId,
-			'hcaptcha-response': hCaptchaResponse,
-			'g-recaptcha-response': reCaptchaResponse,
+	return navigator.credentials
+		.get({
+			publicKey: {
+				challenge: byteify(challengeData.challenge, "base64"),
+				allowCredentials: challengeData.securityKeys.map((key) => ({
+					id: byteify(key.id, "hex"),
+					type: "public-key",
+					transports: ["usb", "nfc", "ble", "internal"],
+				})),
+				timeout: 60 * 1000,
+			},
+		})
+		.catch(() => {
+			queryingKey = false;
+			return Promise.reject(null);
+		})
+		.then((credential) => {
+			queryingKey = false;
+			signing = true;
+			return os.api("signin", {
+				username,
+				password,
+				signature: hexify(credential.response.signature),
+				authenticatorData: hexify(
+					credential.response.authenticatorData
+				),
+				clientDataJSON: hexify(credential.response.clientDataJSON),
+				credentialId: credential.id,
+				challengeId: challengeData.challengeId,
+				"hcaptcha-response": hCaptchaResponse,
+				"g-recaptcha-response": reCaptchaResponse,
+			});
+		})
+		.then((res) => {
+			emit("login", res);
+			return onLogin(res);
+		})
+		.catch((err) => {
+			if (err === null) return;
+			os.alert({
+				type: "error",
+				text: i18n.ts.signinFailed,
+			});
+			signing = false;
 		});
-	}).then(res => {
-		emit('login', res);
-		return onLogin(res);
-	}).catch(err => {
-		if (err === null) return;
-		os.alert({
-			type: 'error',
-			text: i18n.ts.signinFailed,
-		});
-		signing = false;
-	});
 }
 
 function onSubmit() {
 	signing = true;
-	console.log('submit');
+	console.log("submit");
 	if (!totpLogin && user && user.twoFactorEnabled) {
 		if (window.PublicKeyCredential && user.securityKeys) {
-			os.api('signin', {
+			os.api("signin", {
 				username,
 				password,
-				'hcaptcha-response': hCaptchaResponse,
-				'g-recaptcha-response': reCaptchaResponse,
-			}).then(res => {
-				totpLogin = true;
-				signing = false;
-				challengeData = res;
-				return queryKey();
-			}).catch(loginFailed);
+				"hcaptcha-response": hCaptchaResponse,
+				"g-recaptcha-response": reCaptchaResponse,
+			})
+				.then((res) => {
+					totpLogin = true;
+					signing = false;
+					challengeData = res;
+					return queryKey();
+				})
+				.catch(loginFailed);
 		} else {
 			totpLogin = true;
 			signing = false;
 		}
 	} else {
-		os.api('signin', {
+		os.api("signin", {
 			username,
 			password,
-			'hcaptcha-response': hCaptchaResponse,
-			'g-recaptcha-response': reCaptchaResponse,
+			"hcaptcha-response": hCaptchaResponse,
+			"g-recaptcha-response": reCaptchaResponse,
 			token: user && user.twoFactorEnabled ? token : undefined,
-		}).then(res => {
-			emit('login', res);
-			onLogin(res);
-		}).catch(loginFailed);
+		})
+			.then((res) => {
+				emit("login", res);
+				onLogin(res);
+			})
+			.catch(loginFailed);
 	}
 }
 
 function loginFailed(err) {
 	switch (err.id) {
-		case '6cc579cc-885d-43d8-95c2-b8c7fc963280': {
+		case "6cc579cc-885d-43d8-95c2-b8c7fc963280": {
 			os.alert({
-				type: 'error',
+				type: "error",
 				title: i18n.ts.loginFailed,
 				text: i18n.ts.noSuchUser,
 			});
 			break;
 		}
-		case '932c904e-9460-45b7-9ce6-7ed33be7eb2c': {
+		case "932c904e-9460-45b7-9ce6-7ed33be7eb2c": {
 			os.alert({
-				type: 'error',
+				type: "error",
 				title: i18n.ts.loginFailed,
 				text: i18n.ts.incorrectPassword,
 			});
 			break;
 		}
-		case 'e03a5f46-d309-4865-9b69-56282d94e1eb': {
+		case "e03a5f46-d309-4865-9b69-56282d94e1eb": {
 			showSuspendedDialog();
 			break;
 		}
-		case '22d05606-fbcf-421a-a2db-b32610dcfd1b': {
+		case "22d05606-fbcf-421a-a2db-b32610dcfd1b": {
 			os.alert({
-				type: 'error',
+				type: "error",
 				title: i18n.ts.loginFailed,
 				text: i18n.ts.rateLimitExceeded,
 			});
@@ -224,7 +347,7 @@ function loginFailed(err) {
 		default: {
 			console.log(err);
 			os.alert({
-				type: 'error',
+				type: "error",
 				title: i18n.ts.loginFailed,
 				text: JSON.stringify(err),
 			});
@@ -237,8 +360,12 @@ function loginFailed(err) {
 }
 
 function resetPassword() {
-	os.popup(defineAsyncComponent(() => import('@/components/MkForgotPassword.vue')), {}, {
-	}, 'closed');
+	os.popup(
+		defineAsyncComponent(() => import("@/components/MkForgotPassword.vue")),
+		{},
+		{},
+		"closed"
+	);
 }
 </script>
 
diff --git a/packages/client/src/components/MkSigninDialog.vue b/packages/client/src/components/MkSigninDialog.vue
index 7e35e45c5a..7989255b1b 100644
--- a/packages/client/src/components/MkSigninDialog.vue
+++ b/packages/client/src/components/MkSigninDialog.vue
@@ -1,45 +1,48 @@
 <template>
-<XModalWindow
-	ref="dialog"
-	:width="400"
-	@close="onClose"
-	@closed="emit('closed')"
->
-	<template #header>{{ i18n.ts.login }}</template>
+	<XModalWindow
+		ref="dialog"
+		:width="400"
+		@close="onClose"
+		@closed="emit('closed')"
+	>
+		<template #header>{{ i18n.ts.login }}</template>
 
-	<MkSignin :auto-set="autoSet" :message="message" @login="onLogin"/>
-</XModalWindow>
+		<MkSignin :auto-set="autoSet" :message="message" @login="onLogin" />
+	</XModalWindow>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import MkSignin from '@/components/MkSignin.vue';
-import XModalWindow from '@/components/MkModalWindow.vue';
-import { i18n } from '@/i18n';
+import {} from "vue";
+import MkSignin from "@/components/MkSignin.vue";
+import XModalWindow from "@/components/MkModalWindow.vue";
+import { i18n } from "@/i18n";
 
-const props = withDefaults(defineProps<{
-	autoSet?: boolean;
-	message?: string,
-}>(), {
-	autoSet: false,
-	message: '',
-});
+const props = withDefaults(
+	defineProps<{
+		autoSet?: boolean;
+		message?: string;
+	}>(),
+	{
+		autoSet: false,
+		message: "",
+	}
+);
 
 const emit = defineEmits<{
-	(ev: 'done'): void;
-	(ev: 'closed'): void;
-	(ev: 'cancelled'): void;
+	(ev: "done"): void;
+	(ev: "closed"): void;
+	(ev: "cancelled"): void;
 }>();
 
 const dialog = $ref<InstanceType<typeof XModalWindow>>();
 
 function onClose() {
-	emit('cancelled');
+	emit("cancelled");
 	dialog.close();
 }
 
 function onLogin(res) {
-	emit('done', res);
+	emit("done", res);
 	dialog.close();
 }
 </script>
diff --git a/packages/client/src/components/MkSignup.vue b/packages/client/src/components/MkSignup.vue
index b3f7f473ca..7bb0952f7e 100644
--- a/packages/client/src/components/MkSignup.vue
+++ b/packages/client/src/components/MkSignup.vue
@@ -1,93 +1,306 @@
 <template>
-<form class="qlvuhzng _formRoot" autocomplete="new-password" @submit.prevent="onSubmit">
-	<MkInput v-if="instance.disableRegistration" v-model="invitationCode" class="_formBlock" type="text" :spellcheck="false" required data-cy-signup-invitation-code @update:modelValue="onChangeInvitationCode">
-		<template #label>{{ i18n.ts.invitationCode }}</template>
-		<template #prefix><i class="ph-key ph-bold ph-lg"></i></template>
-	</MkInput>
-	<div v-if="!instance.disableRegistration || (instance.disableRegistration && invitationState === 'entered')">
-		<MkInput v-model="username" class="_formBlock" type="text" pattern="^[a-zA-Z0-9_]{1,20}$" :spellcheck="false" required data-cy-signup-username @update:modelValue="onChangeUsername">
-			<template #label>{{ i18n.ts.username }} <div v-tooltip:dialog="i18n.ts.usernameInfo" class="_button _help"><i class="ph-question ph-bold"></i></div></template>
-			<template #prefix>@</template>
-			<template #suffix>@{{ host }}</template>
-			<template #caption>
-				<span v-if="usernameState === 'wait'" style="color:#6e6a86"><i class="ph-circle-notch ph-bold ph-lg fa-pulse ph-fw ph-lg"></i> {{ i18n.ts.checking }}</span>
-				<span v-else-if="usernameState === 'ok'" style="color: var(--success)"><i class="ph-check ph-bold ph-lg ph-fw ph-lg"></i> {{ i18n.ts.available }}</span>
-				<span v-else-if="usernameState === 'unavailable'" style="color: var(--error)"><i class="ph-warning ph-bold ph-lg ph-fw ph-lg"></i> {{ i18n.ts.unavailable }}</span>
-				<span v-else-if="usernameState === 'error'" style="color: var(--error)"><i class="ph-warning ph-bold ph-lg ph-fw ph-lg"></i> {{ i18n.ts.error }}</span>
-				<span v-else-if="usernameState === 'invalid-format'" style="color: var(--error)"><i class="ph-warning ph-bold ph-lg ph-fw ph-lg"></i> {{ i18n.ts.usernameInvalidFormat }}</span>
-				<span v-else-if="usernameState === 'min-range'" style="color: var(--error)"><i class="ph-warning ph-bold ph-lg ph-fw ph-lg"></i> {{ i18n.ts.tooShort }}</span>
-				<span v-else-if="usernameState === 'max-range'" style="color: var(--error)"><i class="ph-warning ph-bold ph-lg ph-fw ph-lg"></i> {{ i18n.ts.tooLong }}</span>
-			</template>
+	<form
+		class="qlvuhzng _formRoot"
+		autocomplete="new-password"
+		@submit.prevent="onSubmit"
+	>
+		<MkInput
+			v-if="instance.disableRegistration"
+			v-model="invitationCode"
+			class="_formBlock"
+			type="text"
+			:spellcheck="false"
+			required
+			data-cy-signup-invitation-code
+			@update:modelValue="onChangeInvitationCode"
+		>
+			<template #label>{{ i18n.ts.invitationCode }}</template>
+			<template #prefix><i class="ph-key ph-bold ph-lg"></i></template>
 		</MkInput>
-		<MkInput v-if="instance.emailRequiredForSignup" v-model="email" class="_formBlock" :debounce="true" type="email" :spellcheck="false" required data-cy-signup-email @update:modelValue="onChangeEmail">
-			<template #label>{{ i18n.ts.emailAddress }} <div v-tooltip:dialog="i18n.ts._signup.emailAddressInfo" class="_button _help"><i class="ph-question ph-bold"></i></div></template>
-			<template #prefix><i class="ph-envelope-simple-open ph-bold ph-lg"></i></template>
-			<template #caption>
-				<span v-if="emailState === 'wait'" style="color:#6e6a86"><i class="ph-circle-notch ph-bold ph-lg fa-pulse ph-fw ph-lg"></i> {{ i18n.ts.checking }}</span>
-				<span v-else-if="emailState === 'ok'" style="color: var(--success)"><i class="ph-check ph-bold ph-lg ph-fw ph-lg"></i> {{ i18n.ts.available }}</span>
-				<span v-else-if="emailState === 'unavailable:used'" style="color: var(--error)"><i class="ph-warning ph-bold ph-lg ph-fw ph-lg"></i> {{ i18n.ts._emailUnavailable.used }}</span>
-				<span v-else-if="emailState === 'unavailable:format'" style="color: var(--error)"><i class="ph-warning ph-bold ph-lg ph-fw ph-lg"></i> {{ i18n.ts._emailUnavailable.format }}</span>
-				<span v-else-if="emailState === 'unavailable:disposable'" style="color: var(--error)"><i class="ph-warning ph-bold ph-lg ph-fw ph-lg"></i> {{ i18n.ts._emailUnavailable.disposable }}</span>
-				<span v-else-if="emailState === 'unavailable:mx'" style="color: var(--error)"><i class="ph-warning ph-bold ph-lg ph-fw ph-lg"></i> {{ i18n.ts._emailUnavailable.mx }}</span>
-				<span v-else-if="emailState === 'unavailable:smtp'" style="color: var(--error)"><i class="ph-warning ph-bold ph-lg ph-fw ph-lg"></i> {{ i18n.ts._emailUnavailable.smtp }}</span>
-				<span v-else-if="emailState === 'unavailable'" style="color: var(--error)"><i class="ph-warning ph-bold ph-lg ph-fw ph-lg"></i> {{ i18n.ts.unavailable }}</span>
-				<span v-else-if="emailState === 'error'" style="color: var(--error)"><i class="ph-warning ph-bold ph-lg ph-fw ph-lg"></i> {{ i18n.ts.error }}</span>
-			</template>
-		</MkInput>
-		<MkInput v-model="password" class="_formBlock" type="password" autocomplete="new-password" required data-cy-signup-password @update:modelValue="onChangePassword">
-			<template #label>{{ i18n.ts.password }}</template>
-			<template #prefix><i class="ph-lock ph-bold ph-lg"></i></template>
-			<template #caption>
-				<span v-if="passwordStrength == 'low'" style="color: var(--error)"><i class="ph-warning ph-bold ph-lg ph-fw ph-lg"></i> {{ i18n.ts.weakPassword }}</span>
-				<span v-if="passwordStrength == 'medium'" style="color: var(--warn)"><i class="ph-check ph-bold ph-lg ph-fw ph-lg"></i> {{ i18n.ts.normalPassword }}</span>
-				<span v-if="passwordStrength == 'high'" style="color: var(--success)"><i class="ph-check ph-bold ph-lg ph-fw ph-lg"></i> {{ i18n.ts.strongPassword }}</span>
-			</template>
-		</MkInput>
-		<MkInput v-model="retypedPassword" class="_formBlock" type="password" autocomplete="new-password" required data-cy-signup-password-retype @update:modelValue="onChangePasswordRetype">
-			<template #label>{{ i18n.ts.password }} ({{ i18n.ts.retype }})</template>
-			<template #prefix><i class="ph-lock ph-bold ph-lg"></i></template>
-			<template #caption>
-				<span v-if="passwordRetypeState == 'match'" style="color: var(--success)"><i class="ph-check ph-bold ph-lg ph-fw ph-lg"></i> {{ i18n.ts.passwordMatched }}</span>
-				<span v-if="passwordRetypeState == 'not-match'" style="color: var(--error)"><i class="ph-warning ph-bold ph-lg ph-fw ph-lg"></i> {{ i18n.ts.passwordNotMatched }}</span>
-			</template>
-		</MkInput>
-		<MkSwitch v-if="instance.tosUrl" v-model="ToSAgreement" class="_formBlock tou">
-			<I18n :src="i18n.ts.agreeTo">
-				<template #0>
-					<a :href="instance.tosUrl" class="_link" target="_blank">{{ i18n.ts.tos }}</a>
+		<div
+			v-if="
+				!instance.disableRegistration ||
+				(instance.disableRegistration && invitationState === 'entered')
+			"
+		>
+			<MkInput
+				v-model="username"
+				class="_formBlock"
+				type="text"
+				pattern="^[a-zA-Z0-9_]{1,20}$"
+				:spellcheck="false"
+				required
+				data-cy-signup-username
+				@update:modelValue="onChangeUsername"
+			>
+				<template #label
+					>{{ i18n.ts.username }}
+					<div
+						v-tooltip:dialog="i18n.ts.usernameInfo"
+						class="_button _help"
+					>
+						<i class="ph-question ph-bold"></i></div
+				></template>
+				<template #prefix>@</template>
+				<template #suffix>@{{ host }}</template>
+				<template #caption>
+					<span v-if="usernameState === 'wait'" style="color: #6e6a86"
+						><i
+							class="ph-circle-notch ph-bold ph-lg fa-pulse ph-fw ph-lg"
+						></i>
+						{{ i18n.ts.checking }}</span
+					>
+					<span
+						v-else-if="usernameState === 'ok'"
+						style="color: var(--success)"
+						><i class="ph-check ph-bold ph-lg ph-fw ph-lg"></i>
+						{{ i18n.ts.available }}</span
+					>
+					<span
+						v-else-if="usernameState === 'unavailable'"
+						style="color: var(--error)"
+						><i class="ph-warning ph-bold ph-lg ph-fw ph-lg"></i>
+						{{ i18n.ts.unavailable }}</span
+					>
+					<span
+						v-else-if="usernameState === 'error'"
+						style="color: var(--error)"
+						><i class="ph-warning ph-bold ph-lg ph-fw ph-lg"></i>
+						{{ i18n.ts.error }}</span
+					>
+					<span
+						v-else-if="usernameState === 'invalid-format'"
+						style="color: var(--error)"
+						><i class="ph-warning ph-bold ph-lg ph-fw ph-lg"></i>
+						{{ i18n.ts.usernameInvalidFormat }}</span
+					>
+					<span
+						v-else-if="usernameState === 'min-range'"
+						style="color: var(--error)"
+						><i class="ph-warning ph-bold ph-lg ph-fw ph-lg"></i>
+						{{ i18n.ts.tooShort }}</span
+					>
+					<span
+						v-else-if="usernameState === 'max-range'"
+						style="color: var(--error)"
+						><i class="ph-warning ph-bold ph-lg ph-fw ph-lg"></i>
+						{{ i18n.ts.tooLong }}</span
+					>
 				</template>
-			</I18n>
-		</MkSwitch>
-		<MkCaptcha v-if="instance.enableHcaptcha" ref="hcaptcha" v-model="hCaptchaResponse" class="_formBlock captcha" provider="hcaptcha" :sitekey="instance.hcaptchaSiteKey"/>
-		<MkCaptcha v-if="instance.enableRecaptcha" ref="recaptcha" v-model="reCaptchaResponse" class="_formBlock captcha" provider="recaptcha" :sitekey="instance.recaptchaSiteKey"/>
-		<MkButton class="_formBlock" type="submit" :disabled="shouldDisableSubmitting" gradate data-cy-signup-submit>{{ i18n.ts.start }}</MkButton>
-	</div>
-</form>
+			</MkInput>
+			<MkInput
+				v-if="instance.emailRequiredForSignup"
+				v-model="email"
+				class="_formBlock"
+				:debounce="true"
+				type="email"
+				:spellcheck="false"
+				required
+				data-cy-signup-email
+				@update:modelValue="onChangeEmail"
+			>
+				<template #label
+					>{{ i18n.ts.emailAddress }}
+					<div
+						v-tooltip:dialog="i18n.ts._signup.emailAddressInfo"
+						class="_button _help"
+					>
+						<i class="ph-question ph-bold"></i></div
+				></template>
+				<template #prefix
+					><i class="ph-envelope-simple-open ph-bold ph-lg"></i
+				></template>
+				<template #caption>
+					<span v-if="emailState === 'wait'" style="color: #6e6a86"
+						><i
+							class="ph-circle-notch ph-bold ph-lg fa-pulse ph-fw ph-lg"
+						></i>
+						{{ i18n.ts.checking }}</span
+					>
+					<span
+						v-else-if="emailState === 'ok'"
+						style="color: var(--success)"
+						><i class="ph-check ph-bold ph-lg ph-fw ph-lg"></i>
+						{{ i18n.ts.available }}</span
+					>
+					<span
+						v-else-if="emailState === 'unavailable:used'"
+						style="color: var(--error)"
+						><i class="ph-warning ph-bold ph-lg ph-fw ph-lg"></i>
+						{{ i18n.ts._emailUnavailable.used }}</span
+					>
+					<span
+						v-else-if="emailState === 'unavailable:format'"
+						style="color: var(--error)"
+						><i class="ph-warning ph-bold ph-lg ph-fw ph-lg"></i>
+						{{ i18n.ts._emailUnavailable.format }}</span
+					>
+					<span
+						v-else-if="emailState === 'unavailable:disposable'"
+						style="color: var(--error)"
+						><i class="ph-warning ph-bold ph-lg ph-fw ph-lg"></i>
+						{{ i18n.ts._emailUnavailable.disposable }}</span
+					>
+					<span
+						v-else-if="emailState === 'unavailable:mx'"
+						style="color: var(--error)"
+						><i class="ph-warning ph-bold ph-lg ph-fw ph-lg"></i>
+						{{ i18n.ts._emailUnavailable.mx }}</span
+					>
+					<span
+						v-else-if="emailState === 'unavailable:smtp'"
+						style="color: var(--error)"
+						><i class="ph-warning ph-bold ph-lg ph-fw ph-lg"></i>
+						{{ i18n.ts._emailUnavailable.smtp }}</span
+					>
+					<span
+						v-else-if="emailState === 'unavailable'"
+						style="color: var(--error)"
+						><i class="ph-warning ph-bold ph-lg ph-fw ph-lg"></i>
+						{{ i18n.ts.unavailable }}</span
+					>
+					<span
+						v-else-if="emailState === 'error'"
+						style="color: var(--error)"
+						><i class="ph-warning ph-bold ph-lg ph-fw ph-lg"></i>
+						{{ i18n.ts.error }}</span
+					>
+				</template>
+			</MkInput>
+			<MkInput
+				v-model="password"
+				class="_formBlock"
+				type="password"
+				autocomplete="new-password"
+				required
+				data-cy-signup-password
+				@update:modelValue="onChangePassword"
+			>
+				<template #label>{{ i18n.ts.password }}</template>
+				<template #prefix
+					><i class="ph-lock ph-bold ph-lg"></i
+				></template>
+				<template #caption>
+					<span
+						v-if="passwordStrength == 'low'"
+						style="color: var(--error)"
+						><i class="ph-warning ph-bold ph-lg ph-fw ph-lg"></i>
+						{{ i18n.ts.weakPassword }}</span
+					>
+					<span
+						v-if="passwordStrength == 'medium'"
+						style="color: var(--warn)"
+						><i class="ph-check ph-bold ph-lg ph-fw ph-lg"></i>
+						{{ i18n.ts.normalPassword }}</span
+					>
+					<span
+						v-if="passwordStrength == 'high'"
+						style="color: var(--success)"
+						><i class="ph-check ph-bold ph-lg ph-fw ph-lg"></i>
+						{{ i18n.ts.strongPassword }}</span
+					>
+				</template>
+			</MkInput>
+			<MkInput
+				v-model="retypedPassword"
+				class="_formBlock"
+				type="password"
+				autocomplete="new-password"
+				required
+				data-cy-signup-password-retype
+				@update:modelValue="onChangePasswordRetype"
+			>
+				<template #label
+					>{{ i18n.ts.password }} ({{ i18n.ts.retype }})</template
+				>
+				<template #prefix
+					><i class="ph-lock ph-bold ph-lg"></i
+				></template>
+				<template #caption>
+					<span
+						v-if="passwordRetypeState == 'match'"
+						style="color: var(--success)"
+						><i class="ph-check ph-bold ph-lg ph-fw ph-lg"></i>
+						{{ i18n.ts.passwordMatched }}</span
+					>
+					<span
+						v-if="passwordRetypeState == 'not-match'"
+						style="color: var(--error)"
+						><i class="ph-warning ph-bold ph-lg ph-fw ph-lg"></i>
+						{{ i18n.ts.passwordNotMatched }}</span
+					>
+				</template>
+			</MkInput>
+			<MkSwitch
+				v-if="instance.tosUrl"
+				v-model="ToSAgreement"
+				class="_formBlock tou"
+			>
+				<I18n :src="i18n.ts.agreeTo">
+					<template #0>
+						<a
+							:href="instance.tosUrl"
+							class="_link"
+							target="_blank"
+							>{{ i18n.ts.tos }}</a
+						>
+					</template>
+				</I18n>
+			</MkSwitch>
+			<MkCaptcha
+				v-if="instance.enableHcaptcha"
+				ref="hcaptcha"
+				v-model="hCaptchaResponse"
+				class="_formBlock captcha"
+				provider="hcaptcha"
+				:sitekey="instance.hcaptchaSiteKey"
+			/>
+			<MkCaptcha
+				v-if="instance.enableRecaptcha"
+				ref="recaptcha"
+				v-model="reCaptchaResponse"
+				class="_formBlock captcha"
+				provider="recaptcha"
+				:sitekey="instance.recaptchaSiteKey"
+			/>
+			<MkButton
+				class="_formBlock"
+				type="submit"
+				:disabled="shouldDisableSubmitting"
+				gradate
+				data-cy-signup-submit
+				>{{ i18n.ts.start }}</MkButton
+			>
+		</div>
+	</form>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import getPasswordStrength from 'syuilo-password-strength';
-import { toUnicode } from 'punycode/';
-import MkButton from './MkButton.vue';
-import MkInput from './form/input.vue';
-import MkSwitch from './form/switch.vue';
-import MkCaptcha from '@/components/MkCaptcha.vue';
-import * as config from '@/config';
-import * as os from '@/os';
-import { login } from '@/account';
-import { instance } from '@/instance';
-import { i18n } from '@/i18n';
+import {} from "vue";
+import getPasswordStrength from "syuilo-password-strength";
+import { toUnicode } from "punycode/";
+import MkButton from "./MkButton.vue";
+import MkInput from "./form/input.vue";
+import MkSwitch from "./form/switch.vue";
+import MkCaptcha from "@/components/MkCaptcha.vue";
+import * as config from "@/config";
+import * as os from "@/os";
+import { login } from "@/account";
+import { instance } from "@/instance";
+import { i18n } from "@/i18n";
 
-const props = withDefaults(defineProps<{
-	autoSet?: boolean;
-}>(), {
-	autoSet: false,
-});
+const props = withDefaults(
+	defineProps<{
+		autoSet?: boolean;
+	}>(),
+	{
+		autoSet: false,
+	}
+);
 
 const emit = defineEmits<{
-	(ev: 'signup', user: Record<string, any>): void;
-	(ev: 'signupEmailPending'): void;
+	(ev: "signup", user: Record<string, any>): void;
+	(ev: "signupEmailPending"): void;
 }>();
 
 const host = toUnicode(config.host);
@@ -95,49 +308,71 @@ const host = toUnicode(config.host);
 let hcaptcha = $ref();
 let recaptcha = $ref();
 
-let username: string = $ref('');
-let password: string = $ref('');
-let retypedPassword: string = $ref('');
-let invitationCode: string = $ref('');
-let email = $ref('');
-let usernameState: null | 'wait' | 'ok' | 'unavailable' | 'error' | 'invalid-format' | 'min-range' | 'max-range' = $ref(null);
-let invitationState: null | 'entered' = $ref(null);
-let emailState: null | 'wait' | 'ok' | 'unavailable:used' | 'unavailable:format' | 'unavailable:disposable' | 'unavailable:mx' | 'unavailable:smtp' | 'unavailable' | 'error' = $ref(null);
-let passwordStrength: '' | 'low' | 'medium' | 'high' = $ref('');
-let passwordRetypeState: null | 'match' | 'not-match' = $ref(null);
+let username: string = $ref("");
+let password: string = $ref("");
+let retypedPassword: string = $ref("");
+let invitationCode: string = $ref("");
+let email = $ref("");
+let usernameState:
+	| null
+	| "wait"
+	| "ok"
+	| "unavailable"
+	| "error"
+	| "invalid-format"
+	| "min-range"
+	| "max-range" = $ref(null);
+let invitationState: null | "entered" = $ref(null);
+let emailState:
+	| null
+	| "wait"
+	| "ok"
+	| "unavailable:used"
+	| "unavailable:format"
+	| "unavailable:disposable"
+	| "unavailable:mx"
+	| "unavailable:smtp"
+	| "unavailable"
+	| "error" = $ref(null);
+let passwordStrength: "" | "low" | "medium" | "high" = $ref("");
+let passwordRetypeState: null | "match" | "not-match" = $ref(null);
 let submitting: boolean = $ref(false);
 let ToSAgreement: boolean = $ref(false);
 let hCaptchaResponse = $ref(null);
 let reCaptchaResponse = $ref(null);
 
 const shouldDisableSubmitting = $computed((): boolean => {
-	return submitting ||
-		instance.tosUrl && !ToSAgreement ||
-		instance.enableHcaptcha && !hCaptchaResponse ||
-		instance.enableRecaptcha && !reCaptchaResponse ||
-		passwordRetypeState === 'not-match';
+	return (
+		submitting ||
+		(instance.tosUrl && !ToSAgreement) ||
+		(instance.enableHcaptcha && !hCaptchaResponse) ||
+		(instance.enableRecaptcha && !reCaptchaResponse) ||
+		passwordRetypeState === "not-match"
+	);
 });
 
 function onChangeInvitationCode(): void {
-	if (invitationCode === '') {
+	if (invitationCode === "") {
 		invitationState = null;
 		return;
 	}
-	invitationState = 'entered';
+	invitationState = "entered";
 }
 
 function onChangeUsername(): void {
-	if (username === '') {
+	if (username === "") {
 		usernameState = null;
 		return;
 	}
 
 	{
-		const err =
-			!username.match(/^[a-zA-Z0-9_]+$/) ? 'invalid-format' :
-			username.length < 1 ? 'min-range' :
-			username.length > 20 ? 'max-range' :
-			null;
+		const err = !username.match(/^[a-zA-Z0-9_]+$/)
+			? "invalid-format"
+			: username.length < 1
+			? "min-range"
+			: username.length > 20
+			? "max-range"
+			: null;
 
 		if (err) {
 			usernameState = err;
@@ -145,100 +380,113 @@ function onChangeUsername(): void {
 		}
 	}
 
-	usernameState = 'wait';
+	usernameState = "wait";
 
-	os.api('username/available', {
+	os.api("username/available", {
 		username,
-	}).then(result => {
-		usernameState = result.available ? 'ok' : 'unavailable';
-	}).catch(() => {
-		usernameState = 'error';
-	});
+	})
+		.then((result) => {
+			usernameState = result.available ? "ok" : "unavailable";
+		})
+		.catch(() => {
+			usernameState = "error";
+		});
 }
 
 function onChangeEmail(): void {
-	if (email === '') {
+	if (email === "") {
 		emailState = null;
 		return;
 	}
 
-	emailState = 'wait';
+	emailState = "wait";
 
-	os.api('email-address/available', {
+	os.api("email-address/available", {
 		emailAddress: email,
-	}).then(result => {
-		emailState = result.available ? 'ok' :
-			result.reason === 'used' ? 'unavailable:used' :
-			result.reason === 'format' ? 'unavailable:format' :
-			result.reason === 'disposable' ? 'unavailable:disposable' :
-			result.reason === 'mx' ? 'unavailable:mx' :
-			result.reason === 'smtp' ? 'unavailable:smtp' :
-			'unavailable';
-	}).catch(() => {
-		emailState = 'error';
-	});
+	})
+		.then((result) => {
+			emailState = result.available
+				? "ok"
+				: result.reason === "used"
+				? "unavailable:used"
+				: result.reason === "format"
+				? "unavailable:format"
+				: result.reason === "disposable"
+				? "unavailable:disposable"
+				: result.reason === "mx"
+				? "unavailable:mx"
+				: result.reason === "smtp"
+				? "unavailable:smtp"
+				: "unavailable";
+		})
+		.catch(() => {
+			emailState = "error";
+		});
 }
 
 function onChangePassword(): void {
-	if (password === '') {
-		passwordStrength = '';
+	if (password === "") {
+		passwordStrength = "";
 		return;
 	}
 
 	const strength = getPasswordStrength(password);
-	passwordStrength = strength > 0.7 ? 'high' : strength > 0.3 ? 'medium' : 'low';
+	passwordStrength =
+		strength > 0.7 ? "high" : strength > 0.3 ? "medium" : "low";
 }
 
 function onChangePasswordRetype(): void {
-	if (retypedPassword === '') {
+	if (retypedPassword === "") {
 		passwordRetypeState = null;
 		return;
 	}
 
-	passwordRetypeState = password === retypedPassword ? 'match' : 'not-match';
+	passwordRetypeState = password === retypedPassword ? "match" : "not-match";
 }
 
 function onSubmit(): void {
 	if (submitting) return;
 	submitting = true;
 
-	os.api('signup', {
+	os.api("signup", {
 		username,
 		password,
 		emailAddress: email,
 		invitationCode,
-		'hcaptcha-response': hCaptchaResponse,
-		'g-recaptcha-response': reCaptchaResponse,
-	}).then(() => {
-		if (instance.emailRequiredForSignup) {
+		"hcaptcha-response": hCaptchaResponse,
+		"g-recaptcha-response": reCaptchaResponse,
+	})
+		.then(() => {
+			if (instance.emailRequiredForSignup) {
+				os.alert({
+					type: "success",
+					title: i18n.ts._signup.almostThere,
+					text: i18n.t("_signup.emailSent", { email }),
+				});
+				emit("signupEmailPending");
+			} else {
+				os.api("signin", {
+					username,
+					password,
+				}).then((res) => {
+					emit("signup", res);
+
+					if (props.autoSet) {
+						login(res.i);
+					}
+				});
+			}
+		})
+		.catch(() => {
+			submitting = false;
+			hcaptcha.reset?.();
+			recaptcha.reset?.();
+
 			os.alert({
-				type: 'success',
-				title: i18n.ts._signup.almostThere,
-				text: i18n.t('_signup.emailSent', { email }),
+				type: "error",
+				text: i18n.ts.somethingHappened,
 			});
-			emit('signupEmailPending');
-		} else {
-			os.api('signin', {
-				username,
-				password,
-			}).then(res => {
-				emit('signup', res);
-
-				if (props.autoSet) {
-					login(res.i);
-				}
-			});
-		}
-	}).catch(() => {
-		submitting = false;
-		hcaptcha.reset?.();
-		recaptcha.reset?.();
-
-		os.alert({
-			type: 'error',
-			text: i18n.ts.somethingHappened,
 		});
-	});
 }
 </script>
 
diff --git a/packages/client/src/components/MkSignupDialog.vue b/packages/client/src/components/MkSignupDialog.vue
index 8aceb62d16..282b8f989c 100644
--- a/packages/client/src/components/MkSignupDialog.vue
+++ b/packages/client/src/components/MkSignupDialog.vue
@@ -1,41 +1,48 @@
 <template>
-<XModalWindow
-	ref="dialog"
-	:width="400"
-	@close="dialog!.close()"
-	@closed="$emit('closed')"
->
-	<template #header>{{ i18n.ts.signup }}</template>
+	<XModalWindow
+		ref="dialog"
+		:width="400"
+		@close="dialog!.close()"
+		@closed="$emit('closed')"
+	>
+		<template #header>{{ i18n.ts.signup }}</template>
 
-	<div class="_monolithic_">
-		<div class="_section">
-			<XSignup :auto-set="autoSet" @signup="onSignup" @signup-email-pending="onSignupEmailPending"/>
+		<div class="_monolithic_">
+			<div class="_section">
+				<XSignup
+					:auto-set="autoSet"
+					@signup="onSignup"
+					@signup-email-pending="onSignupEmailPending"
+				/>
+			</div>
 		</div>
-	</div>
-</XModalWindow>
+	</XModalWindow>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import XSignup from '@/components/MkSignup.vue';
-import XModalWindow from '@/components/MkModalWindow.vue';
-import { i18n } from '@/i18n';
+import {} from "vue";
+import XSignup from "@/components/MkSignup.vue";
+import XModalWindow from "@/components/MkModalWindow.vue";
+import { i18n } from "@/i18n";
 
-const props = withDefaults(defineProps<{
-	autoSet?: boolean;
-}>(), {
-	autoSet: false,
-});
+const props = withDefaults(
+	defineProps<{
+		autoSet?: boolean;
+	}>(),
+	{
+		autoSet: false,
+	}
+);
 
 const emit = defineEmits<{
-	(ev: 'done'): void;
-	(ev: 'closed'): void;
+	(ev: "done"): void;
+	(ev: "closed"): void;
 }>();
 
 const dialog = $ref<InstanceType<typeof XModalWindow>>();
 
 function onSignup(res) {
-	emit('done', res);
+	emit("done", res);
 	dialog?.close();
 }
 
diff --git a/packages/client/src/components/MkSparkle.vue b/packages/client/src/components/MkSparkle.vue
index 2311adce83..a5a9053d2d 100644
--- a/packages/client/src/components/MkSparkle.vue
+++ b/packages/client/src/components/MkSparkle.vue
@@ -1,9 +1,9 @@
 <template>
-<span class="mk-sparkle">
-	<span ref="el">
-		<slot></slot>
-	</span>
-	<!-- なぜか path に対する key が機能しないため
+	<span class="mk-sparkle">
+		<span ref="el">
+			<slot></slot>
+		</span>
+		<!-- なぜか path に対する key が機能しないため
 	<svg :width="width" :height="height" :viewBox="`0 0 ${width} ${height}`" xmlns="http://www.w3.org/2000/svg">
 		<path v-for="particle in particles" :key="particle.id" style="transform-origin: center; transform-box: fill-box;"
 			:transform="`translate(${particle.x} ${particle.y})`"
@@ -32,46 +32,53 @@
 		</path>
 	</svg>
 	-->
-	<svg v-for="particle in particles" :key="particle.id" :width="width" :height="height" :viewBox="`0 0 ${width} ${height}`" xmlns="http://www.w3.org/2000/svg">
-		<path
-			style="transform-origin: center; transform-box: fill-box;"
-			:transform="`translate(${particle.x} ${particle.y})`"
-			:fill="particle.color"
-			d="M29.427,2.011C29.721,0.83 30.782,0 32,0C33.218,0 34.279,0.83 34.573,2.011L39.455,21.646C39.629,22.347 39.991,22.987 40.502,23.498C41.013,24.009 41.653,24.371 42.354,24.545L61.989,29.427C63.17,29.721 64,30.782 64,32C64,33.218 63.17,34.279 61.989,34.573L42.354,39.455C41.653,39.629 41.013,39.991 40.502,40.502C39.991,41.013 39.629,41.653 39.455,42.354L34.573,61.989C34.279,63.17 33.218,64 32,64C30.782,64 29.721,63.17 29.427,61.989L24.545,42.354C24.371,41.653 24.009,41.013 23.498,40.502C22.987,39.991 22.347,39.629 21.646,39.455L2.011,34.573C0.83,34.279 0,33.218 0,32C0,30.782 0.83,29.721 2.011,29.427L21.646,24.545C22.347,24.371 22.987,24.009 23.498,23.498C24.009,22.987 24.371,22.347 24.545,21.646L29.427,2.011Z"
+		<svg
+			v-for="particle in particles"
+			:key="particle.id"
+			:width="width"
+			:height="height"
+			:viewBox="`0 0 ${width} ${height}`"
+			xmlns="http://www.w3.org/2000/svg"
 		>
-			<animateTransform
-				attributeName="transform"
-				attributeType="XML"
-				type="rotate"
-				from="0 0 0"
-				to="360 0 0"
-				:dur="`${particle.dur}ms`"
-				repeatCount="1"
-				additive="sum"
-			/>
-			<animateTransform
-				attributeName="transform"
-				attributeType="XML"
-				type="scale"
-				:values="`0; ${particle.size}; 0`"
-				:dur="`${particle.dur}ms`"
-				repeatCount="1"
-				additive="sum"
-			/>
-		</path>
-	</svg>
-</span>
+			<path
+				style="transform-origin: center; transform-box: fill-box"
+				:transform="`translate(${particle.x} ${particle.y})`"
+				:fill="particle.color"
+				d="M29.427,2.011C29.721,0.83 30.782,0 32,0C33.218,0 34.279,0.83 34.573,2.011L39.455,21.646C39.629,22.347 39.991,22.987 40.502,23.498C41.013,24.009 41.653,24.371 42.354,24.545L61.989,29.427C63.17,29.721 64,30.782 64,32C64,33.218 63.17,34.279 61.989,34.573L42.354,39.455C41.653,39.629 41.013,39.991 40.502,40.502C39.991,41.013 39.629,41.653 39.455,42.354L34.573,61.989C34.279,63.17 33.218,64 32,64C30.782,64 29.721,63.17 29.427,61.989L24.545,42.354C24.371,41.653 24.009,41.013 23.498,40.502C22.987,39.991 22.347,39.629 21.646,39.455L2.011,34.573C0.83,34.279 0,33.218 0,32C0,30.782 0.83,29.721 2.011,29.427L21.646,24.545C22.347,24.371 22.987,24.009 23.498,23.498C24.009,22.987 24.371,22.347 24.545,21.646L29.427,2.011Z"
+			>
+				<animateTransform
+					attributeName="transform"
+					attributeType="XML"
+					type="rotate"
+					from="0 0 0"
+					to="360 0 0"
+					:dur="`${particle.dur}ms`"
+					repeatCount="1"
+					additive="sum"
+				/>
+				<animateTransform
+					attributeName="transform"
+					attributeType="XML"
+					type="scale"
+					:values="`0; ${particle.size}; 0`"
+					:dur="`${particle.dur}ms`"
+					repeatCount="1"
+					additive="sum"
+				/>
+			</path>
+		</svg>
+	</span>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, ref } from 'vue';
-import { reducedMotion } from '@/scripts/reduced-motion';
+import { onMounted, onUnmounted, ref } from "vue";
+import { reducedMotion } from "@/scripts/reduced-motion";
 
 const particles = ref([]);
 const el = ref<HTMLElement>();
 const width = ref(0);
 const height = ref(0);
-const colors = ['#eb6f92', '#9ccfd8', '#f6c177', '#f6c177', '#f6c177'];
+const colors = ["#eb6f92", "#9ccfd8", "#f6c177", "#f6c177", "#f6c177"];
 let stop = false;
 let ro: ResizeObserver | undefined;
 
@@ -84,25 +91,27 @@ onMounted(() => {
 		ro.observe(el.value);
 		const add = () => {
 			if (stop) return;
-			const x = (Math.random() * (width.value - 64));
-			const y = (Math.random() * (height.value - 64));
+			const x = Math.random() * (width.value - 64);
+			const y = Math.random() * (height.value - 64);
 			const sizeFactor = Math.random();
 			const particle = {
 				id: Math.random().toString(),
 				x,
 				y,
-				size: 0.2 + ((sizeFactor / 10) * 3),
-				dur: 1000 + (sizeFactor * 1000),
+				size: 0.2 + (sizeFactor / 10) * 3,
+				dur: 1000 + sizeFactor * 1000,
 				color: colors[Math.floor(Math.random() * colors.length)],
 			};
 			particles.value.push(particle);
 			window.setTimeout(() => {
-				particles.value = particles.value.filter(x => x.id !== particle.id);
+				particles.value = particles.value.filter(
+					(x) => x.id !== particle.id
+				);
 			}, particle.dur - 100);
 
 			window.setTimeout(() => {
 				add();
-			}, 500 + (Math.random() * 500));
+			}, 500 + Math.random() * 500);
 		};
 		add();
 	}
diff --git a/packages/client/src/components/MkStarButton.vue b/packages/client/src/components/MkStarButton.vue
index 9327e1dd41..a8bf79c409 100644
--- a/packages/client/src/components/MkStarButton.vue
+++ b/packages/client/src/components/MkStarButton.vue
@@ -1,25 +1,50 @@
 <template>
-<button v-tooltip.noDelay.bottom="i18n.ts._gallery.like" class="skdfgljsdkf _button" @click="star($event)">
-	<svg v-if="defaultStore.state.woozyMode === true" width="1.1em" height="1.1em" viewBox="0 0 36 36"><g fill="currentColor">
-		<path d="m17.809-0.20898c-9.9294 2.3e-7 -18 8.0706-18 18 5.8e-7 9.9294 8.0706 18 18 18 9.9294 0 18-8.0706 18-18 0-9.9294-8.0706-18-18-18zm0 1.9785c8.8604 1e-7 16.021 7.1611 16.021 16.021 0 8.8604-7.1611 16.023-16.021 16.023-8.8604 0-16.021-7.163-16.021-16.023-3e-7 -8.8604 7.1611-16.021 16.021-16.021z"/>
-		<path d="m6.001 11c-0.552 0-1-0.448-1-1 0-0.551 0.445-0.998 0.996-1 0.156-2e-3 3.569-0.086 6.205-3.6 0.331-0.44 0.957-0.532 1.4-0.2 0.442 0.331 0.531 0.958 0.2 1.4-3.263 4.35-7.617 4.4-7.801 4.4zm24.986 2.393c0.128 0.537-0.204 1.077-0.741 1.205-0.536 0.128-1.074-0.202-1.204-0.737-0.038-0.151-0.911-3.452-4.941-5.201-0.505-0.22-0.739-0.808-0.519-1.315s0.809-0.739 1.315-0.519c4.989 2.165 6.047 6.388 6.09 6.567z"/>
-		<path d="m23.186 29.526c-0.993 0-1.952-0.455-2.788-1.339-2.816-2.985-3.569-2.333-4.817-1.251-0.781 0.679-1.754 1.523-3.205 1.523-2.351 0-3.969-2.302-4.036-2.4-0.314-0.454-0.2-1.077 0.254-1.391 0.451-0.312 1.074-0.2 1.39 0.251 0.301 0.429 1.317 1.54 2.393 1.54 0.704 0 1.256-0.479 1.895-1.033 1.816-1.578 3.764-2.655 7.583 1.388 0.823 0.873 1.452 0.774 1.908 0.592 1.659-0.665 3.205-3.698 3.197-5.15-3e-3 -0.552 0.442-1.002 0.994-1.005h6e-3c0.55 0 0.997 0.444 1 0.995 0.012 2.103-1.854 5.976-4.454 7.017-0.443 0.175-0.885 0.262-1.32 0.263z"/>
-		<path d="m14.815 15.375c-0.584 2.114-1.642 3.083-3.152 2.666-1.509-0.417-2.343-1.909-1.76-4.023 0.583-2.112 2.175-3.363 3.684-2.946 1.511 0.417 1.812 2.19 1.228 4.303zm11.416-0.755c0.473 2.141-0.675 4.838-2.204 5.176s-3.28-1.719-3.753-3.86c-0.473-2.14 0.419-3.971 1.948-4.309s3.536 0.853 4.009 2.993z"/>
-	</g></svg>
-	<i v-else-if="instance.defaultReaction === '👍'" class="ph-thumbs-up ph-bold ph-lg"></i>
-	<i v-else-if="instance.defaultReaction === '❤️'" class="ph-heart ph-bold ph-lg"></i>
-	<i v-else class="ph-star ph-bold ph-lg"></i>
-</button>
+	<button
+		v-tooltip.noDelay.bottom="i18n.ts._gallery.like"
+		class="skdfgljsdkf _button"
+		@click="star($event)"
+	>
+		<svg
+			v-if="defaultStore.state.woozyMode === true"
+			width="1.1em"
+			height="1.1em"
+			viewBox="0 0 36 36"
+		>
+			<g fill="currentColor">
+				<path
+					d="m17.809-0.20898c-9.9294 2.3e-7 -18 8.0706-18 18 5.8e-7 9.9294 8.0706 18 18 18 9.9294 0 18-8.0706 18-18 0-9.9294-8.0706-18-18-18zm0 1.9785c8.8604 1e-7 16.021 7.1611 16.021 16.021 0 8.8604-7.1611 16.023-16.021 16.023-8.8604 0-16.021-7.163-16.021-16.023-3e-7 -8.8604 7.1611-16.021 16.021-16.021z"
+				/>
+				<path
+					d="m6.001 11c-0.552 0-1-0.448-1-1 0-0.551 0.445-0.998 0.996-1 0.156-2e-3 3.569-0.086 6.205-3.6 0.331-0.44 0.957-0.532 1.4-0.2 0.442 0.331 0.531 0.958 0.2 1.4-3.263 4.35-7.617 4.4-7.801 4.4zm24.986 2.393c0.128 0.537-0.204 1.077-0.741 1.205-0.536 0.128-1.074-0.202-1.204-0.737-0.038-0.151-0.911-3.452-4.941-5.201-0.505-0.22-0.739-0.808-0.519-1.315s0.809-0.739 1.315-0.519c4.989 2.165 6.047 6.388 6.09 6.567z"
+				/>
+				<path
+					d="m23.186 29.526c-0.993 0-1.952-0.455-2.788-1.339-2.816-2.985-3.569-2.333-4.817-1.251-0.781 0.679-1.754 1.523-3.205 1.523-2.351 0-3.969-2.302-4.036-2.4-0.314-0.454-0.2-1.077 0.254-1.391 0.451-0.312 1.074-0.2 1.39 0.251 0.301 0.429 1.317 1.54 2.393 1.54 0.704 0 1.256-0.479 1.895-1.033 1.816-1.578 3.764-2.655 7.583 1.388 0.823 0.873 1.452 0.774 1.908 0.592 1.659-0.665 3.205-3.698 3.197-5.15-3e-3 -0.552 0.442-1.002 0.994-1.005h6e-3c0.55 0 0.997 0.444 1 0.995 0.012 2.103-1.854 5.976-4.454 7.017-0.443 0.175-0.885 0.262-1.32 0.263z"
+				/>
+				<path
+					d="m14.815 15.375c-0.584 2.114-1.642 3.083-3.152 2.666-1.509-0.417-2.343-1.909-1.76-4.023 0.583-2.112 2.175-3.363 3.684-2.946 1.511 0.417 1.812 2.19 1.228 4.303zm11.416-0.755c0.473 2.141-0.675 4.838-2.204 5.176s-3.28-1.719-3.753-3.86c-0.473-2.14 0.419-3.971 1.948-4.309s3.536 0.853 4.009 2.993z"
+				/>
+			</g>
+		</svg>
+		<i
+			v-else-if="instance.defaultReaction === '👍'"
+			class="ph-thumbs-up ph-bold ph-lg"
+		></i>
+		<i
+			v-else-if="instance.defaultReaction === '❤️'"
+			class="ph-heart ph-bold ph-lg"
+		></i>
+		<i v-else class="ph-star ph-bold ph-lg"></i>
+	</button>
 </template>
 
 <script lang="ts" setup>
-import type { Note } from 'calckey-js/built/entities';
-import Ripple from '@/components/MkRipple.vue';
-import { pleaseLogin } from '@/scripts/please-login';
-import * as os from '@/os';
-import { defaultStore } from '@/store';
-import { i18n } from '@/i18n';
-import { instance } from '@/instance';
+import type { Note } from "calckey-js/built/entities";
+import Ripple from "@/components/MkRipple.vue";
+import { pleaseLogin } from "@/scripts/please-login";
+import * as os from "@/os";
+import { defaultStore } from "@/store";
+import { i18n } from "@/i18n";
+import { instance } from "@/instance";
 
 const props = defineProps<{
 	note: Note;
@@ -27,16 +52,21 @@ const props = defineProps<{
 
 function star(ev?: MouseEvent): void {
 	pleaseLogin();
-	os.api('notes/reactions/create', {
+	os.api("notes/reactions/create", {
 		noteId: props.note.id,
-		reaction: defaultStore.state.woozyMode === true ? '🥴' : instance.defaultReaction,
+		reaction:
+			defaultStore.state.woozyMode === true
+				? "🥴"
+				: instance.defaultReaction,
 	});
-	const el = ev && (ev.currentTarget ?? ev.target) as HTMLElement | null | undefined;
+	const el =
+		ev &&
+		((ev.currentTarget ?? ev.target) as HTMLElement | null | undefined);
 	if (el) {
 		const rect = el.getBoundingClientRect();
-		const x = rect.left + (el.offsetWidth / 2);
-		const y = rect.top + (el.offsetHeight / 2);
-		os.popup(Ripple, { x, y }, {}, 'end');
+		const x = rect.left + el.offsetWidth / 2;
+		const y = rect.top + el.offsetHeight / 2;
+		os.popup(Ripple, { x, y }, {}, "end");
 	}
 }
 </script>
diff --git a/packages/client/src/components/MkSubNoteContent.vue b/packages/client/src/components/MkSubNoteContent.vue
index fa421d10f8..58accefc10 100644
--- a/packages/client/src/components/MkSubNoteContent.vue
+++ b/packages/client/src/components/MkSubNoteContent.vue
@@ -1,50 +1,90 @@
 <template>
-<div class="wrmlmaau" :class="{ collapsed, isLong }">
-	<div class="body">
-		<span v-if="note.deletedAt" style="opacity: 0.5">({{ i18n.ts.deleted }})</span>
-		<template v-if="!note.cw">
-			<MkA v-if="note.replyId"  :to="`/notes/${note.replyId}`" class="reply-icon" @click.stop>
-				<i class="ph-arrow-bend-left-up ph-bold ph-lg"></i>
-			</MkA>
-			<MkA v-if="conversation && note.renoteId && note.renoteId != parentId && !note.replyId" :to="`/notes/${note.renoteId}`" class="reply-icon" @click.stop>
-				<i class="ph-quotes ph-bold ph-lg"></i>
-			</MkA>
-		</template>
-		<Mfm v-if="note.text" :text="note.text" :author="note.user" :i="$i" :custom-emojis="note.emojis"/>
-		<MkA v-if="note.renoteId" class="rp" :to="`/notes/${note.renoteId}`">{{ i18n.ts.quoteAttached }}: ...</MkA>
-	</div>
-	<div v-if="note.files.length > 0">
-		<XMediaList :media-list="note.files"/>
-	</div>
-	<div v-if="note.poll">
-		<summary>{{ i18n.ts.poll }}</summary>
-		<XPoll :note="note"/>
-	</div>
-	<template v-if="detailed">
-		<!-- <div v-if="note.renoteId" class="renote">
+	<div class="wrmlmaau" :class="{ collapsed, isLong }">
+		<div class="body">
+			<span v-if="note.deletedAt" style="opacity: 0.5"
+				>({{ i18n.ts.deleted }})</span
+			>
+			<template v-if="!note.cw">
+				<MkA
+					v-if="note.replyId"
+					:to="`/notes/${note.replyId}`"
+					class="reply-icon"
+					@click.stop
+				>
+					<i class="ph-arrow-bend-left-up ph-bold ph-lg"></i>
+				</MkA>
+				<MkA
+					v-if="
+						conversation &&
+						note.renoteId &&
+						note.renoteId != parentId &&
+						!note.replyId
+					"
+					:to="`/notes/${note.renoteId}`"
+					class="reply-icon"
+					@click.stop
+				>
+					<i class="ph-quotes ph-bold ph-lg"></i>
+				</MkA>
+			</template>
+			<Mfm
+				v-if="note.text"
+				:text="note.text"
+				:author="note.user"
+				:i="$i"
+				:custom-emojis="note.emojis"
+			/>
+			<MkA v-if="note.renoteId" class="rp" :to="`/notes/${note.renoteId}`"
+				>{{ i18n.ts.quoteAttached }}: ...</MkA
+			>
+		</div>
+		<div v-if="note.files.length > 0">
+			<XMediaList :media-list="note.files" />
+		</div>
+		<div v-if="note.poll">
+			<summary>{{ i18n.ts.poll }}</summary>
+			<XPoll :note="note" />
+		</div>
+		<template v-if="detailed">
+			<!-- <div v-if="note.renoteId" class="renote">
 			<XNoteSimple :note="note.renote"/>
 		</div> -->
-		<MkUrlPreview v-for="url in urls" :key="url" :url="url" :compact="true" :detail="false" class="url-preview"/>
-	</template>
-	<button v-if="isLong && collapsed" class="fade _button" @click.stop="collapsed = false">
-		<span>{{ i18n.ts.showMore }}</span>
-	</button>
-	<button v-if="isLong && !collapsed" class="showLess _button" @click.stop="collapsed = true">
-		<span>{{ i18n.ts.showLess }}</span>
-	</button>
-</div>
+			<MkUrlPreview
+				v-for="url in urls"
+				:key="url"
+				:url="url"
+				:compact="true"
+				:detail="false"
+				class="url-preview"
+			/>
+		</template>
+		<button
+			v-if="isLong && collapsed"
+			class="fade _button"
+			@click.stop="collapsed = false"
+		>
+			<span>{{ i18n.ts.showMore }}</span>
+		</button>
+		<button
+			v-if="isLong && !collapsed"
+			class="showLess _button"
+			@click.stop="collapsed = true"
+		>
+			<span>{{ i18n.ts.showLess }}</span>
+		</button>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import * as misskey from 'calckey-js';
-import * as mfm from 'mfm-js';
-import XNoteSimple from '@/components/MkNoteSimple.vue';
-import XMediaList from '@/components/MkMediaList.vue';
-import XPoll from '@/components/MkPoll.vue';
-import MkUrlPreview from '@/components/MkUrlPreview.vue';
-import { extractUrlFromMfm } from '@/scripts/extract-url-from-mfm';
-import { i18n } from '@/i18n';
+import {} from "vue";
+import * as misskey from "calckey-js";
+import * as mfm from "mfm-js";
+import XNoteSimple from "@/components/MkNoteSimple.vue";
+import XMediaList from "@/components/MkMediaList.vue";
+import XPoll from "@/components/MkPoll.vue";
+import MkUrlPreview from "@/components/MkUrlPreview.vue";
+import { extractUrlFromMfm } from "@/scripts/extract-url-from-mfm";
+import { i18n } from "@/i18n";
 
 const props = defineProps<{
 	note: misskey.entities.Note;
@@ -53,21 +93,20 @@ const props = defineProps<{
 	detailed?: boolean;
 }>();
 
-const isLong = (
-	props.note.cw == null && props.note.text != null && (
-		(props.note.text.split('\n').length > 9) ||
-		(props.note.text.length > 500)
-	)
-);
+const isLong =
+	props.note.cw == null &&
+	props.note.text != null &&
+	(props.note.text.split("\n").length > 9 || props.note.text.length > 500);
 const collapsed = $ref(props.note.cw == null && isLong);
-const urls = props.note.text ? extractUrlFromMfm(mfm.parse(props.note.text)) : null;
-
+const urls = props.note.text
+	? extractUrlFromMfm(mfm.parse(props.note.text))
+	: null;
 </script>
 
 <style lang="scss" scoped>
 .wrmlmaau {
 	overflow-wrap: break-word;
-	
+
 	> .body {
 		> .rp {
 			margin-left: 4px;
@@ -77,11 +116,12 @@ const urls = props.note.text ? extractUrlFromMfm(mfm.parse(props.note.text)) : n
 		.reply-icon {
 			display: inline-block;
 			border-radius: 6px;
-			padding: .2em .2em;
-			margin-right: .2em;
+			padding: 0.2em 0.2em;
+			margin-right: 0.2em;
 			color: var(--accent);
-			transition: background .2s;
-			&:hover, &:focus {
+			transition: background 0.2s;
+			&:hover,
+			&:focus {
 				background: var(--buttonHoverBg);
 			}
 		}
diff --git a/packages/client/src/components/MkSuperMenu.vue b/packages/client/src/components/MkSuperMenu.vue
index 6e73b49599..55d6fba509 100644
--- a/packages/client/src/components/MkSuperMenu.vue
+++ b/packages/client/src/components/MkSuperMenu.vue
@@ -1,30 +1,62 @@
 <template>
-<div class="rrevdjwu" :class="{ grid }">
-	<div v-for="group in def" class="group">
-		<div v-if="group.title" class="title">{{ group.title }}</div>
+	<div class="rrevdjwu" :class="{ grid }">
+		<div v-for="group in def" class="group">
+			<div v-if="group.title" class="title">{{ group.title }}</div>
 
-		<div class="items">
-			<template v-for="(item, i) in group.items">
-				<a v-if="item.type === 'a'" :href="item.href" :target="item.target" :tabindex="i" class="_button item" :class="{ danger: item.danger, active: item.active }">
-					<i v-if="item.icon" class="icon ph-fw ph-lg" :class="item.icon"></i>
-					<span class="text">{{ item.text }}</span>
-				</a>
-				<button v-else-if="item.type === 'button'" :tabindex="i" class="_button item" :class="{ danger: item.danger, active: item.active }" :disabled="item.active" @click="ev => item.action(ev)">
-					<i v-if="item.icon" class="icon ph-fw ph-lg" :class="item.icon"></i>
-					<span class="text">{{ item.text }}</span>
-				</button>
-				<MkA v-else :to="item.to" :tabindex="i" class="_button item" :class="{ danger: item.danger, active: item.active }">
-					<i v-if="item.icon" class="icon ph-fw ph-lg" :class="item.icon"></i>
-					<span class="text">{{ item.text }}</span>
-				</MkA>
-			</template>
+			<div class="items">
+				<template v-for="(item, i) in group.items">
+					<a
+						v-if="item.type === 'a'"
+						:href="item.href"
+						:target="item.target"
+						:tabindex="i"
+						class="_button item"
+						:class="{ danger: item.danger, active: item.active }"
+					>
+						<i
+							v-if="item.icon"
+							class="icon ph-fw ph-lg"
+							:class="item.icon"
+						></i>
+						<span class="text">{{ item.text }}</span>
+					</a>
+					<button
+						v-else-if="item.type === 'button'"
+						:tabindex="i"
+						class="_button item"
+						:class="{ danger: item.danger, active: item.active }"
+						:disabled="item.active"
+						@click="(ev) => item.action(ev)"
+					>
+						<i
+							v-if="item.icon"
+							class="icon ph-fw ph-lg"
+							:class="item.icon"
+						></i>
+						<span class="text">{{ item.text }}</span>
+					</button>
+					<MkA
+						v-else
+						:to="item.to"
+						:tabindex="i"
+						class="_button item"
+						:class="{ danger: item.danger, active: item.active }"
+					>
+						<i
+							v-if="item.icon"
+							class="icon ph-fw ph-lg"
+							:class="item.icon"
+						></i>
+						<span class="text">{{ item.text }}</span>
+					</MkA>
+				</template>
+			</div>
 		</div>
 	</div>
-</div>
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, unref } from 'vue';
+import { defineComponent, ref, unref } from "vue";
 
 export default defineComponent({
 	props: {
@@ -95,7 +127,6 @@ export default defineComponent({
 					overflow: hidden;
 					padding-right: 12px;
 				}
-
 			}
 		}
 	}
diff --git a/packages/client/src/components/MkTab.vue b/packages/client/src/components/MkTab.vue
index a8e8cbc0f9..de3ef290b7 100644
--- a/packages/client/src/components/MkTab.vue
+++ b/packages/client/src/components/MkTab.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import { defineComponent, h, resolveDirective, withDirectives } from 'vue';
+import { defineComponent, h, resolveDirective, withDirectives } from "vue";
 
 export default defineComponent({
 	props: {
@@ -10,18 +10,38 @@ export default defineComponent({
 	render() {
 		const options = this.$slots.default();
 
-		return h('div', {
-			class: 'pxhvhrfw',
-		}, options.map(option => withDirectives(h('button', {
-			class: ['_button', { active: this.modelValue === option.props?.value }],
-			key: option.key,
-			disabled: this.modelValue === option.props?.value,
-			onClick: () => {
-				this.$emit('update:modelValue', option.props?.value);
+		return h(
+			"div",
+			{
+				class: "pxhvhrfw",
 			},
-		}, option.children), [
-			[resolveDirective('click-anime')],
-		])));
+			options.map((option) =>
+				withDirectives(
+					h(
+						"button",
+						{
+							class: [
+								"_button",
+								{
+									active:
+										this.modelValue === option.props?.value,
+								},
+							],
+							key: option.key,
+							disabled: this.modelValue === option.props?.value,
+							onClick: () => {
+								this.$emit(
+									"update:modelValue",
+									option.props?.value
+								);
+							},
+						},
+						option.children
+					),
+					[[resolveDirective("click-anime")]]
+				)
+			)
+		);
 	},
 });
 </script>
diff --git a/packages/client/src/components/MkTagCloud.vue b/packages/client/src/components/MkTagCloud.vue
index 2dfd26edb0..ec0e8d184c 100644
--- a/packages/client/src/components/MkTagCloud.vue
+++ b/packages/client/src/components/MkTagCloud.vue
@@ -1,23 +1,44 @@
 <template>
-<div ref="rootEl" class="meijqfqm">
-	<canvas :id="idForCanvas" ref="canvasEl" class="canvas" :width="width" height="300" @contextmenu.prevent="() => {}"></canvas>
-	<div :id="idForTags" ref="tagsEl" class="tags">
-		<ul>
-			<slot></slot>
-		</ul>
+	<div ref="rootEl" class="meijqfqm">
+		<canvas
+			:id="idForCanvas"
+			ref="canvasEl"
+			class="canvas"
+			:width="width"
+			height="300"
+			@contextmenu.prevent="() => {}"
+		></canvas>
+		<div :id="idForTags" ref="tagsEl" class="tags">
+			<ul>
+				<slot></slot>
+			</ul>
+		</div>
 	</div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, ref, watch, PropType, onBeforeUnmount } from 'vue';
-import tinycolor from 'tinycolor2';
+import { onMounted, ref, watch, PropType, onBeforeUnmount } from "vue";
+import tinycolor from "tinycolor2";
 
 const loaded = !!window.TagCanvas;
-const SAFE_FOR_HTML_ID = 'abcdefghijklmnopqrstuvwxyz';
+const SAFE_FOR_HTML_ID = "abcdefghijklmnopqrstuvwxyz";
 const computedStyle = getComputedStyle(document.documentElement);
-const idForCanvas = Array.from(Array(16)).map(() => SAFE_FOR_HTML_ID[Math.floor(Math.random() * SAFE_FOR_HTML_ID.length)]).join('');
-const idForTags = Array.from(Array(16)).map(() => SAFE_FOR_HTML_ID[Math.floor(Math.random() * SAFE_FOR_HTML_ID.length)]).join('');
+const idForCanvas = Array.from(Array(16))
+	.map(
+		() =>
+			SAFE_FOR_HTML_ID[
+				Math.floor(Math.random() * SAFE_FOR_HTML_ID.length)
+			]
+	)
+	.join("");
+const idForTags = Array.from(Array(16))
+	.map(
+		() =>
+			SAFE_FOR_HTML_ID[
+				Math.floor(Math.random() * SAFE_FOR_HTML_ID.length)
+			]
+	)
+	.join("");
 let available = $ref(false);
 let rootEl = $ref<HTMLElement | null>(null);
 let canvasEl = $ref<HTMLCanvasElement | null>(null);
@@ -27,10 +48,12 @@ let width = $ref(300);
 watch($$(available), () => {
 	try {
 		window.TagCanvas.Start(idForCanvas, idForTags, {
-			textColour: '#ffffff',
-			outlineColour: tinycolor(computedStyle.getPropertyValue('--accent')).toHexString(),
+			textColour: "#ffffff",
+			outlineColour: tinycolor(
+				computedStyle.getPropertyValue("--accent")
+			).toHexString(),
 			outlineRadius: 10,
-			initial: [-0.030, -0.010],
+			initial: [-0.03, -0.01],
 			frontSelect: true,
 			imageRadius: 8,
 			//dragControl: true,
@@ -52,10 +75,14 @@ onMounted(() => {
 	if (loaded) {
 		available = true;
 	} else {
-		document.head.appendChild(Object.assign(document.createElement('script'), {
-			async: true,
-			src: '/client-assets/tagcanvas.min.js',
-		})).addEventListener('load', () => available = true);
+		document.head
+			.appendChild(
+				Object.assign(document.createElement("script"), {
+					async: true,
+					src: "/client-assets/tagcanvas.min.js",
+				})
+			)
+			.addEventListener("load", () => (available = true));
 	}
 });
 
diff --git a/packages/client/src/components/MkTimeline.vue b/packages/client/src/components/MkTimeline.vue
index 47d2edd8cc..317e556cfb 100644
--- a/packages/client/src/components/MkTimeline.vue
+++ b/packages/client/src/components/MkTimeline.vue
@@ -1,14 +1,19 @@
 <template>
-<XNotes ref="tlComponent" :no-gap="!$store.state.showGapBetweenNotesInTimeline" :pagination="pagination" @queue="emit('queue', $event)"/>
+	<XNotes
+		ref="tlComponent"
+		:no-gap="!$store.state.showGapBetweenNotesInTimeline"
+		:pagination="pagination"
+		@queue="emit('queue', $event)"
+	/>
 </template>
 
 <script lang="ts" setup>
-import { ref, computed, provide, onUnmounted } from 'vue';
-import XNotes from '@/components/MkNotes.vue';
-import * as os from '@/os';
-import { stream } from '@/stream';
-import * as sound from '@/scripts/sound';
-import { $i } from '@/account';
+import { ref, computed, provide, onUnmounted } from "vue";
+import XNotes from "@/components/MkNotes.vue";
+import * as os from "@/os";
+import { stream } from "@/stream";
+import * as sound from "@/scripts/sound";
+import { $i } from "@/account";
 
 const props = defineProps<{
 	src: string;
@@ -19,21 +24,24 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-	(ev: 'note'): void;
-	(ev: 'queue', count: number): void;
+	(ev: "note"): void;
+	(ev: "queue", count: number): void;
 }>();
 
-provide('inChannel', computed(() => props.src === 'channel'));
+provide(
+	"inChannel",
+	computed(() => props.src === "channel")
+);
 
 const tlComponent: InstanceType<typeof XNotes> = $ref();
 
-const prepend = note => {
+const prepend = (note) => {
 	tlComponent.pagingComponent?.prepend(note);
 
-	emit('note');
+	emit("note");
 
 	if (props.sound) {
-		sound.play($i && (note.userId === $i.id) ? 'noteMy' : 'note');
+		sound.play($i && note.userId === $i.id ? "noteMy" : "note");
 	}
 };
 
@@ -56,75 +64,75 @@ let query;
 let connection;
 let connection2;
 
-if (props.src === 'antenna') {
-	endpoint = 'antennas/notes';
+if (props.src === "antenna") {
+	endpoint = "antennas/notes";
 	query = {
 		antennaId: props.antenna,
 	};
-	connection = stream.useChannel('antenna', {
+	connection = stream.useChannel("antenna", {
 		antennaId: props.antenna,
 	});
-	connection.on('note', prepend);
-} else if (props.src === 'home') {
-	endpoint = 'notes/timeline';
-	connection = stream.useChannel('homeTimeline');
-	connection.on('note', prepend);
+	connection.on("note", prepend);
+} else if (props.src === "home") {
+	endpoint = "notes/timeline";
+	connection = stream.useChannel("homeTimeline");
+	connection.on("note", prepend);
 
-	connection2 = stream.useChannel('main');
-	connection2.on('follow', onChangeFollowing);
-	connection2.on('unfollow', onChangeFollowing);
-} else if (props.src === 'local') {
-	endpoint = 'notes/local-timeline';
-	connection = stream.useChannel('localTimeline');
-	connection.on('note', prepend);
-} else if (props.src === 'recommended') {
-	endpoint = 'notes/recommended-timeline';
-	connection = stream.useChannel('recommendedTimeline');
-	connection.on('note', prepend);
-} else if (props.src === 'social') {
-	endpoint = 'notes/hybrid-timeline';
-	connection = stream.useChannel('hybridTimeline');
-	connection.on('note', prepend);
-} else if (props.src === 'global') {
-	endpoint = 'notes/global-timeline';
-	connection = stream.useChannel('globalTimeline');
-	connection.on('note', prepend);
-} else if (props.src === 'mentions') {
-	endpoint = 'notes/mentions';
-	connection = stream.useChannel('main');
-	connection.on('mention', prepend);
-} else if (props.src === 'directs') {
-	endpoint = 'notes/mentions';
+	connection2 = stream.useChannel("main");
+	connection2.on("follow", onChangeFollowing);
+	connection2.on("unfollow", onChangeFollowing);
+} else if (props.src === "local") {
+	endpoint = "notes/local-timeline";
+	connection = stream.useChannel("localTimeline");
+	connection.on("note", prepend);
+} else if (props.src === "recommended") {
+	endpoint = "notes/recommended-timeline";
+	connection = stream.useChannel("recommendedTimeline");
+	connection.on("note", prepend);
+} else if (props.src === "social") {
+	endpoint = "notes/hybrid-timeline";
+	connection = stream.useChannel("hybridTimeline");
+	connection.on("note", prepend);
+} else if (props.src === "global") {
+	endpoint = "notes/global-timeline";
+	connection = stream.useChannel("globalTimeline");
+	connection.on("note", prepend);
+} else if (props.src === "mentions") {
+	endpoint = "notes/mentions";
+	connection = stream.useChannel("main");
+	connection.on("mention", prepend);
+} else if (props.src === "directs") {
+	endpoint = "notes/mentions";
 	query = {
-		visibility: 'specified',
+		visibility: "specified",
 	};
-	const onNote = note => {
-		if (note.visibility === 'specified') {
+	const onNote = (note) => {
+		if (note.visibility === "specified") {
 			prepend(note);
 		}
 	};
-	connection = stream.useChannel('main');
-	connection.on('mention', onNote);
-} else if (props.src === 'list') {
-	endpoint = 'notes/user-list-timeline';
+	connection = stream.useChannel("main");
+	connection.on("mention", onNote);
+} else if (props.src === "list") {
+	endpoint = "notes/user-list-timeline";
 	query = {
 		listId: props.list,
 	};
-	connection = stream.useChannel('userList', {
+	connection = stream.useChannel("userList", {
 		listId: props.list,
 	});
-	connection.on('note', prepend);
-	connection.on('userAdded', onUserAdded);
-	connection.on('userRemoved', onUserRemoved);
-} else if (props.src === 'channel') {
-	endpoint = 'channels/timeline';
+	connection.on("note", prepend);
+	connection.on("userAdded", onUserAdded);
+	connection.on("userRemoved", onUserRemoved);
+} else if (props.src === "channel") {
+	endpoint = "channels/timeline";
 	query = {
 		channelId: props.channel,
 	};
-	connection = stream.useChannel('channel', {
+	connection = stream.useChannel("channel", {
 		channelId: props.channel,
 	});
-	connection.on('note', prepend);
+	connection.on("note", prepend);
 }
 
 const pagination = {
diff --git a/packages/client/src/components/MkToast.vue b/packages/client/src/components/MkToast.vue
index 87b1d99c1e..4ff97fb027 100644
--- a/packages/client/src/components/MkToast.vue
+++ b/packages/client/src/components/MkToast.vue
@@ -1,26 +1,35 @@
 <template>
-<div class="mk-toast">
-	<transition :name="$store.state.animation ? 'toast' : ''" appear @after-leave="emit('closed')">
-		<div v-if="showing" class="body _acrylic" :style="{ zIndex }">
-			<Mfm class="message" :text="message" :plain="true" :nowrap="nowrap"/>
-		</div>
-	</transition>
-</div>
+	<div class="mk-toast">
+		<transition
+			:name="$store.state.animation ? 'toast' : ''"
+			appear
+			@after-leave="emit('closed')"
+		>
+			<div v-if="showing" class="body _acrylic" :style="{ zIndex }">
+				<Mfm
+					class="message"
+					:text="message"
+					:plain="true"
+					:nowrap="nowrap"
+				/>
+			</div>
+		</transition>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, ref } from 'vue';
-import * as os from '@/os';
+import { onMounted, ref } from "vue";
+import * as os from "@/os";
 
 defineProps<{
 	message: string;
 }>();
 
 const emit = defineEmits<{
-	(ev: 'closed'): void;
+	(ev: "closed"): void;
 }>();
 
-const zIndex = os.claimZIndex('high');
+const zIndex = os.claimZIndex("high");
 let showing = $ref(true);
 
 onMounted(() => {
@@ -31,10 +40,12 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
-.toast-enter-active, .toast-leave-active {
+.toast-enter-active,
+.toast-leave-active {
 	transition: opacity 0.3s, transform 0.3s !important;
 }
-.toast-enter-from, .toast-leave-to {
+.toast-enter-from,
+.toast-leave-to {
 	opacity: 0;
 	transform: translateY(-100%);
 }
diff --git a/packages/client/src/components/MkTokenGenerateWindow.vue b/packages/client/src/components/MkTokenGenerateWindow.vue
index 319eb66616..77caa26b34 100644
--- a/packages/client/src/components/MkTokenGenerateWindow.vue
+++ b/packages/client/src/components/MkTokenGenerateWindow.vue
@@ -1,58 +1,75 @@
 <template>
-<XModalWindow
-	ref="dialog"
-	:width="400"
-	:height="600"
-	:with-ok-button="true"
-	:ok-button-disabled="false"
-	:can-close="false"
-	@close="dialog.close()"
-	@closed="$emit('closed')"
-	@ok="ok()"
-	style="padding: 12px"
->
-	<template #header>{{ title || i18n.ts.generateAccessToken }}</template>
-	<div v-if="information" class="_section">
-		<MkInfo warn>{{ information }}</MkInfo>
-	</div>
-	<div class="_section">
-		<div style="margin-bottom: 16px;"><b>{{ i18n.ts.name }}</b></div>
-		<MkInput style="margin-bottom: 16px;" v-model="name"/>
-	</div>
-	<div class="_section">
-		<div style="margin-bottom: 16px;"><b>{{ i18n.ts.permission }}</b></div>
-		<MkButton inline @click="disableAll">{{ i18n.ts.disableAll }}</MkButton>
-		<MkButton style="margin-bottom: 12px;" inline @click="enableAll">{{ i18n.ts.enableAll }}</MkButton>
-		<MkSwitch style="margin-bottom: 6px;" v-for="kind in (initialPermissions || kinds)" :key="kind" v-model="permissions[kind]">{{ i18n.t(`_permissions.${kind}`) }}</MkSwitch>
-	</div>
-</XModalWindow>
+	<XModalWindow
+		ref="dialog"
+		:width="400"
+		:height="600"
+		:with-ok-button="true"
+		:ok-button-disabled="false"
+		:can-close="false"
+		@close="dialog.close()"
+		@closed="$emit('closed')"
+		@ok="ok()"
+		style="padding: 12px"
+	>
+		<template #header>{{ title || i18n.ts.generateAccessToken }}</template>
+		<div v-if="information" class="_section">
+			<MkInfo warn>{{ information }}</MkInfo>
+		</div>
+		<div class="_section">
+			<div style="margin-bottom: 16px">
+				<b>{{ i18n.ts.name }}</b>
+			</div>
+			<MkInput style="margin-bottom: 16px" v-model="name" />
+		</div>
+		<div class="_section">
+			<div style="margin-bottom: 16px">
+				<b>{{ i18n.ts.permission }}</b>
+			</div>
+			<MkButton inline @click="disableAll">{{
+				i18n.ts.disableAll
+			}}</MkButton>
+			<MkButton style="margin-bottom: 12px" inline @click="enableAll">{{
+				i18n.ts.enableAll
+			}}</MkButton>
+			<MkSwitch
+				style="margin-bottom: 6px"
+				v-for="kind in initialPermissions || kinds"
+				:key="kind"
+				v-model="permissions[kind]"
+				>{{ i18n.t(`_permissions.${kind}`) }}</MkSwitch
+			>
+		</div>
+	</XModalWindow>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import { permissions as kinds } from 'calckey-js';
-import MkInput from './form/input.vue';
-import MkSwitch from './form/switch.vue';
-import MkButton from './MkButton.vue';
-import MkInfo from './MkInfo.vue';
-import XModalWindow from '@/components/MkModalWindow.vue';
-import { i18n } from '@/i18n';
+import {} from "vue";
+import { permissions as kinds } from "calckey-js";
+import MkInput from "./form/input.vue";
+import MkSwitch from "./form/switch.vue";
+import MkButton from "./MkButton.vue";
+import MkInfo from "./MkInfo.vue";
+import XModalWindow from "@/components/MkModalWindow.vue";
+import { i18n } from "@/i18n";
 
-const props = withDefaults(defineProps<{
-	title?: string | null;
-	information?: string | null;
-	initialName?: string | null;
-	initialPermissions?: string[] | null;
-}>(), {
-	title: null,
-	information: null,
-	initialName: null,
-	initialPermissions: null,
-});
+const props = withDefaults(
+	defineProps<{
+		title?: string | null;
+		information?: string | null;
+		initialName?: string | null;
+		initialPermissions?: string[] | null;
+	}>(),
+	{
+		title: null,
+		information: null,
+		initialName: null,
+		initialPermissions: null,
+	}
+);
 
 const emit = defineEmits<{
-	(ev: 'closed'): void;
-	(ev: 'done', result: { name: string | null, permissions: string[] }): void;
+	(ev: "closed"): void;
+	(ev: "done", result: { name: string | null; permissions: string[] }): void;
 }>();
 
 const dialog = $ref<InstanceType<typeof XModalWindow>>();
@@ -70,9 +87,9 @@ if (props.initialPermissions) {
 }
 
 function ok(): void {
-	emit('done', {
+	emit("done", {
 		name: name,
-		permissions: Object.keys(permissions).filter(p => permissions[p]),
+		permissions: Object.keys(permissions).filter((p) => permissions[p]),
 	});
 	dialog.close();
 }
diff --git a/packages/client/src/components/MkTooltip.vue b/packages/client/src/components/MkTooltip.vue
index 4c6258d245..c528a2f56c 100644
--- a/packages/client/src/components/MkTooltip.vue
+++ b/packages/client/src/components/MkTooltip.vue
@@ -1,55 +1,67 @@
 <template>
-<transition :name="$store.state.animation ? 'tooltip' : ''" appear @after-leave="emit('closed')">
-	<div v-show="showing" ref="el" class="buebdbiu _acrylic _shadow" :style="{ zIndex, maxWidth: maxWidth + 'px' }">
-		<slot>
-			<Mfm v-if="asMfm" :text="text"/>
-			<span v-else>{{ text }}</span>
-		</slot>
-	</div>
-</transition>
+	<transition
+		:name="$store.state.animation ? 'tooltip' : ''"
+		appear
+		@after-leave="emit('closed')"
+	>
+		<div
+			v-show="showing"
+			ref="el"
+			class="buebdbiu _acrylic _shadow"
+			:style="{ zIndex, maxWidth: maxWidth + 'px' }"
+		>
+			<slot>
+				<Mfm v-if="asMfm" :text="text" />
+				<span v-else>{{ text }}</span>
+			</slot>
+		</div>
+	</transition>
 </template>
 
 <script lang="ts" setup>
-import { nextTick, onMounted, onUnmounted, ref } from 'vue';
-import * as os from '@/os';
-import { calcPopupPosition } from '@/scripts/popup-position';
+import { nextTick, onMounted, onUnmounted, ref } from "vue";
+import * as os from "@/os";
+import { calcPopupPosition } from "@/scripts/popup-position";
 
-const props = withDefaults(defineProps<{
-	showing: boolean;
-	targetElement?: HTMLElement;
-	x?: number;
-	y?: number;
-	text?: string;
-	asMfm?: boolean;
-	maxWidth?: number;
-	direction?: 'top' | 'bottom' | 'right' | 'left';
-	innerMargin?: number;
-}>(), {
-	maxWidth: 250,
-	direction: 'top',
-	innerMargin: 0,
-});
+const props = withDefaults(
+	defineProps<{
+		showing: boolean;
+		targetElement?: HTMLElement;
+		x?: number;
+		y?: number;
+		text?: string;
+		asMfm?: boolean;
+		maxWidth?: number;
+		direction?: "top" | "bottom" | "right" | "left";
+		innerMargin?: number;
+	}>(),
+	{
+		maxWidth: 250,
+		direction: "top",
+		innerMargin: 0,
+	}
+);
 
 const emit = defineEmits<{
-	(ev: 'closed'): void;
+	(ev: "closed"): void;
 }>();
 
 const el = ref<HTMLElement>();
-const zIndex = os.claimZIndex('high');
+const zIndex = os.claimZIndex("high");
 
 function setPosition() {
 	const data = calcPopupPosition(el.value, {
 		anchorElement: props.targetElement,
 		direction: props.direction,
-		align: 'center',
+		align: "center",
 		innerMargin: props.innerMargin,
 		x: props.x,
 		y: props.y,
 	});
 
 	el.value.style.transformOrigin = data.transformOrigin;
-	el.value.style.left = data.left + 'px';
-	el.value.style.top = data.top + 'px';
+	el.value.style.left = data.left + "px";
+	el.value.style.top = data.top + "px";
 }
 
 let loopHandler;
@@ -79,7 +91,8 @@ onUnmounted(() => {
 .tooltip-leave-active {
 	opacity: 1;
 	transform: scale(1);
-	transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1), opacity 200ms cubic-bezier(0.23, 1, 0.32, 1);
+	transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1),
+		opacity 200ms cubic-bezier(0.23, 1, 0.32, 1);
 }
 .tooltip-enter-from,
 .tooltip-leave-active {
diff --git a/packages/client/src/components/MkTutorialDialog.vue b/packages/client/src/components/MkTutorialDialog.vue
index 77cc4de6fb..eafc882950 100644
--- a/packages/client/src/components/MkTutorialDialog.vue
+++ b/packages/client/src/components/MkTutorialDialog.vue
@@ -1,133 +1,206 @@
 <template>
-<XModalWindow
-	ref="dialog"
-	:width="800"
-	@close="dialog?.close()"
-	@closed="$emit('closed')"
->
-	<template #header>{{ i18n.ts._tutorial.title }}</template>
+	<XModalWindow
+		ref="dialog"
+		:width="800"
+		@close="dialog?.close()"
+		@closed="$emit('closed')"
+	>
+		<template #header>{{ i18n.ts._tutorial.title }}</template>
 
-	<div class="_monolithic_">
-		<div class="_section">
-			<div class="tbkwesmv">
-				<div class="_footer navigation">
-					<div class="step">
-						<button class="arrow _button" :disabled="tutorial === 0" @click="tutorial--">
-							<i class="ph-caret-left ph-bold ph-lg"></i>
-						</button>
-						<span>{{ tutorial + 1 }} / 6</span>
-						<button class="arrow _button" :disabled="tutorial === 5" @click="tutorial++">
-							<i class="ph-caret-right ph-bold ph-lg"></i>
-						</button>
+		<div class="_monolithic_">
+			<div class="_section">
+				<div class="tbkwesmv">
+					<div class="_footer navigation">
+						<div class="step">
+							<button
+								class="arrow _button"
+								:disabled="tutorial === 0"
+								@click="tutorial--"
+							>
+								<i class="ph-caret-left ph-bold ph-lg"></i>
+							</button>
+							<span>{{ tutorial + 1 }} / 6</span>
+							<button
+								class="arrow _button"
+								:disabled="tutorial === 5"
+								@click="tutorial++"
+							>
+								<i class="ph-caret-right ph-bold ph-lg"></i>
+							</button>
+						</div>
+						<MkButton
+							v-if="tutorial === 5"
+							class="ok"
+							primary
+							@click="close"
+							><i class="ph-check ph-bold ph-lg"></i>
+							{{ i18n.ts.gotIt }}</MkButton
+						>
+						<MkButton v-else class="ok" primary @click="tutorial++"
+							><i class="ph-check ph-bold ph-lg"></i>
+							{{ i18n.ts.next }}</MkButton
+						>
 					</div>
-					<MkButton v-if="tutorial === 5" class="ok" primary @click="close"><i class="ph-check ph-bold ph-lg"></i> {{ i18n.ts.gotIt }}</MkButton>
-					<MkButton v-else class="ok" primary @click="tutorial++"><i class="ph-check ph-bold ph-lg"></i> {{ i18n.ts.next }}</MkButton>
+					<h2 class="_title title">
+						<i class="ph-info ph-bold ph-lg"></i>
+						{{ i18n.ts._tutorial.title }}
+					</h2>
+					<Transition name="fade">
+						<div v-if="tutorial === 0" key="1" class="_content">
+							<h3>{{ i18n.ts._tutorial.step1_1 }}</h3>
+							<div>{{ i18n.ts._tutorial.step1_2 }}</div>
+						</div>
+						<div
+							v-else-if="tutorial === 1"
+							key="2"
+							class="_content"
+						>
+							<h3>{{ i18n.ts._tutorial.step2_1 }}</h3>
+							<div>{{ i18n.ts._tutorial.step2_2 }}</div>
+							<br />
+							<XSettings :save-button="true" />
+							<br />
+						</div>
+						<div
+							v-else-if="tutorial === 2"
+							key="3"
+							class="_content"
+						>
+							<h3>{{ i18n.ts._tutorial.step3_1 }}</h3>
+							<div>{{ i18n.ts._tutorial.step3_2 }}</div>
+							<XFeaturedUsers />
+							<br />
+							<MkButton class="ok" primary @click="tutorial++"
+								><i class="ph-check ph-bold ph-lg"></i>
+								{{ i18n.ts.next }}</MkButton
+							>
+						</div>
+						<div
+							v-else-if="tutorial === 3"
+							key="4"
+							class="_content"
+						>
+							<h3>{{ i18n.ts._tutorial.step4_1 }}</h3>
+							<I18n :src="i18n.ts._tutorial.step4_2" tag="div">
+								<template #introduction>
+									<MkA class="_link" to="/tags/introduction"
+										>#introduction</MkA
+									>
+								</template>
+							</I18n>
+							<br />
+							<XPostForm class="post-form _block" />
+						</div>
+						<div
+							v-else-if="tutorial === 4"
+							key="5"
+							class="_content"
+						>
+							<h3>{{ i18n.ts._tutorial.step5_1 }}</h3>
+							<I18n :src="i18n.ts._tutorial.step5_2" tag="div">
+								<template #timelines>
+									<span>{{ timelines.length }}</span>
+								</template>
+							</I18n>
+							<ul>
+								<li>
+									<I18n
+										:src="i18n.ts._tutorial.step5_3"
+										tag="div"
+									>
+										<template #icon>
+											<i class="ph-house ph-bold ph-lg" />
+										</template>
+									</I18n>
+								</li>
+								<li v-if="timelines.includes('local')">
+									<I18n
+										:src="i18n.ts._tutorial.step5_4"
+										tag="div"
+									>
+										<template #icon>
+											<i class="ph-users ph-bold ph-lg" />
+										</template>
+									</I18n>
+								</li>
+								<li v-if="timelines.includes('recommended')">
+									<I18n
+										:src="i18n.ts._tutorial.step5_5"
+										tag="div"
+									>
+										<template #icon>
+											<i
+												class="ph-thumbs-up ph-bold ph-lg"
+											/>
+										</template>
+									</I18n>
+								</li>
+								<li v-if="timelines.includes('social')">
+									<I18n
+										:src="i18n.ts._tutorial.step5_6"
+										tag="div"
+									>
+										<template #icon>
+											<i
+												class="ph-handshake ph-bold ph-lg"
+											/>
+										</template>
+									</I18n>
+								</li>
+								<li v-if="timelines.includes('global')">
+									<I18n
+										:src="i18n.ts._tutorial.step5_7"
+										tag="div"
+									>
+										<template #icon>
+											<i
+												class="ph-planet ph-bold ph-lg"
+											/>
+										</template>
+									</I18n>
+								</li>
+							</ul>
+						</div>
+						<div
+							v-else-if="tutorial === 5"
+							key="6"
+							class="_content"
+						>
+							<h3>{{ i18n.ts._tutorial.step6_1 }}</h3>
+							<div>{{ i18n.ts._tutorial.step6_2 }}</div>
+							<div>{{ i18n.ts._tutorial.step6_3 }}</div>
+							<br />
+							<MkSparkle>
+								<h3>
+									{{ i18n.ts._tutorial.step6_4 }}
+									<Mfm text="$[shake 🚀]"></Mfm>
+								</h3>
+							</MkSparkle>
+							<MkPushNotificationAllowButton
+								primary
+								show-only-to-register
+							/>
+						</div>
+					</Transition>
 				</div>
-				<h2 class="_title title"><i class="ph-info ph-bold ph-lg"></i> {{ i18n.ts._tutorial.title }}</h2>
-				<Transition name="fade">
-					<div v-if="tutorial === 0" key="1" class="_content">
-						<h3>{{ i18n.ts._tutorial.step1_1 }}</h3>
-						<div>{{ i18n.ts._tutorial.step1_2 }}</div>
-					</div>
-					<div v-else-if="tutorial === 1" key="2" class="_content">
-						<h3>{{ i18n.ts._tutorial.step2_1 }}</h3>
-						<div>{{ i18n.ts._tutorial.step2_2 }}</div>
-						<br/>
-						<XSettings :save-button="true"/>
-						<br/>
-					</div>
-					<div v-else-if="tutorial === 2" key="3" class="_content">
-						<h3>{{ i18n.ts._tutorial.step3_1 }}</h3>
-						<div>{{ i18n.ts._tutorial.step3_2 }}</div>
-						<XFeaturedUsers/>
-						<br/>
-						<MkButton class="ok" primary @click="tutorial++"><i class="ph-check ph-bold ph-lg"></i> {{ i18n.ts.next }}</MkButton>
-					</div>
-					<div v-else-if="tutorial === 3" key="4" class="_content">
-						<h3>{{ i18n.ts._tutorial.step4_1 }}</h3>
-						<I18n :src="i18n.ts._tutorial.step4_2" tag="div">
-							<template #introduction>
-								<MkA class="_link" to="/tags/introduction">#introduction</MkA>
-							</template>
-						</I18n>
-						<br/>
-						<XPostForm class="post-form _block"/>
-					</div>
-					<div v-else-if="tutorial === 4" key="5" class="_content">
-						<h3>{{ i18n.ts._tutorial.step5_1 }}</h3>
-						<I18n :src="i18n.ts._tutorial.step5_2" tag="div">
-							<template #timelines>
-								<span>{{ timelines.length }}</span>
-							</template>
-						</I18n>
-						<ul>
-							<li>
-								<I18n :src="i18n.ts._tutorial.step5_3" tag="div">
-									<template #icon>
-										<i class="ph-house ph-bold ph-lg"/>
-									</template>
-								</I18n>
-							</li>
-							<li v-if="timelines.includes('local')">
-								<I18n :src="i18n.ts._tutorial.step5_4" tag="div">
-									<template #icon>
-										<i class="ph-users ph-bold ph-lg"/>
-									</template>
-								</I18n>
-							</li>
-							<li v-if="timelines.includes('recommended')">
-								<I18n :src="i18n.ts._tutorial.step5_5" tag="div">
-									<template #icon>
-										<i class="ph-thumbs-up ph-bold ph-lg"/>
-									</template>
-								</I18n>
-							</li>
-							<li v-if="timelines.includes('social')">
-								<I18n :src="i18n.ts._tutorial.step5_6" tag="div">
-									<template #icon>
-										<i class="ph-handshake ph-bold ph-lg"/>
-									</template>
-								</I18n>
-							</li>
-							<li v-if="timelines.includes('global')">
-								<I18n :src="i18n.ts._tutorial.step5_7" tag="div">
-									<template #icon>
-										<i class="ph-planet ph-bold ph-lg"/>
-									</template>
-								</I18n>
-							</li>
-						</ul>
-					</div>
-					<div v-else-if="tutorial === 5" key="6" class="_content">
-						<h3>{{ i18n.ts._tutorial.step6_1 }}</h3>
-						<div>{{ i18n.ts._tutorial.step6_2 }}</div>
-						<div>{{ i18n.ts._tutorial.step6_3 }}</div>
-						<br/>
-						<MkSparkle>
-							<h3>{{ i18n.ts._tutorial.step6_4 }} <Mfm text="$[shake 🚀]"></Mfm></h3>
-						</MkSparkle>
-						<MkPushNotificationAllowButton primary show-only-to-register/>
-					</div>
-				</Transition>
 			</div>
 		</div>
-	</div>
-</XModalWindow>
+	</XModalWindow>
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
-import XSettings from '@/pages/settings/profile.vue';
-import XModalWindow from '@/components/MkModalWindow.vue';
-import MkButton from '@/components/MkButton.vue';
-import XFeaturedUsers from '@/pages/explore.users.vue';
-import XPostForm from '@/components/MkPostForm.vue';
-import MkSparkle from '@/components/MkSparkle.vue';
-import MkPushNotificationAllowButton from '@/components/MkPushNotificationAllowButton.vue';
-import { defaultStore } from '@/store';
-import { i18n } from '@/i18n';
-import { $i } from '@/account';
-import { instance } from '@/instance';
+import { computed } from "vue";
+import XSettings from "@/pages/settings/profile.vue";
+import XModalWindow from "@/components/MkModalWindow.vue";
+import MkButton from "@/components/MkButton.vue";
+import XFeaturedUsers from "@/pages/explore.users.vue";
+import XPostForm from "@/components/MkPostForm.vue";
+import MkSparkle from "@/components/MkSparkle.vue";
+import MkPushNotificationAllowButton from "@/components/MkPushNotificationAllowButton.vue";
+import { defaultStore } from "@/store";
+import { i18n } from "@/i18n";
+import { $i } from "@/account";
+import { instance } from "@/instance";
 
 const isLocalTimelineAvailable =
 	!instance.disableLocalTimeline ||
@@ -139,31 +212,35 @@ const isGlobalTimelineAvailable =
 	!instance.disableGlobalTimeline ||
 	($i != null && ($i.isModerator || $i.isAdmin));
 
-let timelines = ['home'];
+let timelines = ["home"];
 
 if (isLocalTimelineAvailable) {
-	timelines.push('local');
+	timelines.push("local");
 }
 if (isRecommendedTimelineAvailable) {
-	timelines.push('recommended');
+	timelines.push("recommended");
 }
 if (isLocalTimelineAvailable) {
-	timelines.push('social');
+	timelines.push("social");
 }
 if (isGlobalTimelineAvailable) {
-	timelines.push('global');
+	timelines.push("global");
 }
 
 const emit = defineEmits<{
-	(ev: 'done'): void;
-	(ev: 'closed'): void;
+	(ev: "done"): void;
+	(ev: "closed"): void;
 }>();
 
 const dialog = $ref<InstanceType<typeof XModalWindow>>();
 
 const tutorial = computed({
-	get() { return defaultStore.reactiveState.tutorial.value || 0; },
-	set(value) { defaultStore.set('tutorial', value); },
+	get() {
+		return defaultStore.reactiveState.tutorial.value || 0;
+	},
+	set(value) {
+		defaultStore.set("tutorial", value);
+	},
 });
 
 function close(res) {
@@ -222,4 +299,3 @@ function close(res) {
 	}
 }
 </style>
-
diff --git a/packages/client/src/components/MkUpdated.vue b/packages/client/src/components/MkUpdated.vue
index 0ffe2edeab..d63ba96608 100644
--- a/packages/client/src/components/MkUpdated.vue
+++ b/packages/client/src/components/MkUpdated.vue
@@ -1,43 +1,60 @@
 <template>
-<MkModal ref="modal" :z-priority="'middle'" @click="$refs.modal.close()" @closed="$emit('closed')">
-	<div :class="$style.root">
-		<div :class="$style.title"><MkSparkle>{{ i18n.ts.misskeyUpdated }}</MkSparkle></div>
-		<div :class="$style.version">✨ {{ version }} 🚀</div>
-		<div v-if="newRelease" :class="$style.releaseNotes">
-			<Mfm :text="data.notes"/>
-			<div v-if="data.screenshots.length > 0" style="max-width: 500">
-				<img v-for="i in data.screenshots" :key="i" :src="i" alt="screenshot"/>
+	<MkModal
+		ref="modal"
+		:z-priority="'middle'"
+		@click="$refs.modal.close()"
+		@closed="$emit('closed')"
+	>
+		<div :class="$style.root">
+			<div :class="$style.title">
+				<MkSparkle>{{ i18n.ts.misskeyUpdated }}</MkSparkle>
 			</div>
+			<div :class="$style.version">✨ {{ version }} 🚀</div>
+			<div v-if="newRelease" :class="$style.releaseNotes">
+				<Mfm :text="data.notes" />
+				<div v-if="data.screenshots.length > 0" style="max-width: 500">
+					<img
+						v-for="i in data.screenshots"
+						:key="i"
+						:src="i"
+						alt="screenshot"
+					/>
+				</div>
+			</div>
+			<MkButton
+				:class="$style.gotIt"
+				primary
+				full
+				@click="$refs.modal.close()"
+				>{{ i18n.ts.gotIt }}</MkButton
+			>
 		</div>
-		<MkButton :class="$style.gotIt" primary full @click="$refs.modal.close()">{{ i18n.ts.gotIt }}</MkButton>
-	</div>
-</MkModal>
+	</MkModal>
 </template>
 
 <script lang="ts" setup>
-import { shallowRef } from 'vue';
-import MkModal from '@/components/MkModal.vue';
-import MkSparkle from '@/components/MkSparkle.vue';
-import MkButton from '@/components/MkButton.vue';
-import { version } from '@/config';
-import { i18n } from '@/i18n';
-import * as os from '@/os';
+import { shallowRef } from "vue";
+import MkModal from "@/components/MkModal.vue";
+import MkSparkle from "@/components/MkSparkle.vue";
+import MkButton from "@/components/MkButton.vue";
+import { version } from "@/config";
+import { i18n } from "@/i18n";
+import * as os from "@/os";
 
 const modal = shallowRef<InstanceType<typeof MkModal>>();
 
 let newRelease = $ref(false);
 let data = $ref(Object);
 
-os.api('release').then(res => {
+os.api("release").then((res) => {
 	data = res;
-	newRelease = (version === data?.version);
+	newRelease = version === data?.version;
 });
 
-console.log(`Version: ${version}`)
-console.log(`Data version: ${data.version}`)
-console.log(newRelease)
+console.log(`Version: ${version}`);
+console.log(`Data version: ${data.version}`);
+console.log(newRelease);
 console.log(data);
-
 </script>
 
 <style lang="scss" module>
diff --git a/packages/client/src/components/MkUrlPreview.vue b/packages/client/src/components/MkUrlPreview.vue
index 3aa9a9be26..84fe1cb1fd 100644
--- a/packages/client/src/components/MkUrlPreview.vue
+++ b/packages/client/src/components/MkUrlPreview.vue
@@ -1,54 +1,126 @@
 <template>
-<div v-if="playerEnabled" class="player" :style="`padding: ${(player.height || 0) / (player.width || 1) * 100}% 0 0`" @click.stop>
-	<button class="disablePlayer" :title="i18n.ts.disablePlayer" @click="playerEnabled = false"><i class="ph-x ph-bold ph-lg"></i></button>
-	<iframe :src="player.url + (player.url.match(/\?/) ? '&autoplay=1&auto_play=1' : '?autoplay=1&auto_play=1')" :width="player.width || '100%'" :heigth="player.height || 250" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen/>
-</div>
-<div v-else-if="tweetId && tweetExpanded" ref="twitter" class="twitter" @click.stop>
-	<iframe ref="tweet" scrolling="no" frameborder="no" :style="{ position: 'relative', width: '100%', height: `${tweetHeight}px` }" :src="`https://platform.twitter.com/embed/index.html?embedId=${embedId}&amp;hideCard=false&amp;hideThread=false&amp;lang=en&amp;theme=${$store.state.darkMode ? 'dark' : 'light'}&amp;id=${tweetId}`"></iframe>
-</div>
-<div v-else v-size="{ max: [400, 350] }" class="mk-url-preview" @click.stop>
-	<transition :name="$store.state.animation ? 'zoom' : ''" mode="out-in">
-		<component :is="self ? 'MkA' : 'a'" v-if="!fetching" class="link" :class="{ compact }" :[attr]="self ? url.substr(local.length) : url" rel="nofollow noopener" :target="target" :title="url">
-			<div v-if="thumbnail" class="thumbnail" :style="`background-image: url('${thumbnail}')`">
-				<button v-if="!playerEnabled && player.url" class="_button" :title="i18n.ts.enablePlayer" @click.prevent="playerEnabled = true"><i class="ph-play-circle ph-bold ph-lg"></i></button>
-			</div>
-			<article>
-				<header>
-					<h1 :title="title">{{ title }}</h1>
-				</header>
-				<p v-if="description" :title="description">{{ description.length > 85 ? description.slice(0, 85) + '…' : description }}</p>
-				<footer>
-					<img v-if="icon" class="icon" :src="icon"/>
-					<p :title="sitename">{{ sitename }}</p>
-				</footer>
-			</article>
-		</component>
-	</transition>
-	<div v-if="tweetId" class="expandTweet">
-		<a @click="tweetExpanded = true">
-			<i class="ph-twitter-logo ph-bold ph-lg"></i> {{ i18n.ts.expandTweet }}
-		</a>
+	<div
+		v-if="playerEnabled"
+		class="player"
+		:style="`padding: ${
+			((player.height || 0) / (player.width || 1)) * 100
+		}% 0 0`"
+		@click.stop
+	>
+		<button
+			class="disablePlayer"
+			:title="i18n.ts.disablePlayer"
+			@click="playerEnabled = false"
+		>
+			<i class="ph-x ph-bold ph-lg"></i>
+		</button>
+		<iframe
+			:src="
+				player.url +
+				(player.url.match(/\?/)
+					? '&autoplay=1&auto_play=1'
+					: '?autoplay=1&auto_play=1')
+			"
+			:width="player.width || '100%'"
+			:heigth="player.height || 250"
+			frameborder="0"
+			allow="autoplay; encrypted-media"
+			allowfullscreen
+		/>
+	</div>
+	<div
+		v-else-if="tweetId && tweetExpanded"
+		ref="twitter"
+		class="twitter"
+		@click.stop
+	>
+		<iframe
+			ref="tweet"
+			scrolling="no"
+			frameborder="no"
+			:style="{
+				position: 'relative',
+				width: '100%',
+				height: `${tweetHeight}px`,
+			}"
+			:src="`https://platform.twitter.com/embed/index.html?embedId=${embedId}&amp;hideCard=false&amp;hideThread=false&amp;lang=en&amp;theme=${
+				$store.state.darkMode ? 'dark' : 'light'
+			}&amp;id=${tweetId}`"
+		></iframe>
+	</div>
+	<div v-else v-size="{ max: [400, 350] }" class="mk-url-preview" @click.stop>
+		<transition :name="$store.state.animation ? 'zoom' : ''" mode="out-in">
+			<component
+				:is="self ? 'MkA' : 'a'"
+				v-if="!fetching"
+				class="link"
+				:class="{ compact }"
+				:[attr]="self ? url.substr(local.length) : url"
+				rel="nofollow noopener"
+				:target="target"
+				:title="url"
+			>
+				<div
+					v-if="thumbnail"
+					class="thumbnail"
+					:style="`background-image: url('${thumbnail}')`"
+				>
+					<button
+						v-if="!playerEnabled && player.url"
+						class="_button"
+						:title="i18n.ts.enablePlayer"
+						@click.prevent="playerEnabled = true"
+					>
+						<i class="ph-play-circle ph-bold ph-lg"></i>
+					</button>
+				</div>
+				<article>
+					<header>
+						<h1 :title="title">{{ title }}</h1>
+					</header>
+					<p v-if="description" :title="description">
+						{{
+							description.length > 85
+								? description.slice(0, 85) + "…"
+								: description
+						}}
+					</p>
+					<footer>
+						<img v-if="icon" class="icon" :src="icon" />
+						<p :title="sitename">{{ sitename }}</p>
+					</footer>
+				</article>
+			</component>
+		</transition>
+		<div v-if="tweetId" class="expandTweet">
+			<a @click="tweetExpanded = true">
+				<i class="ph-twitter-logo ph-bold ph-lg"></i>
+				{{ i18n.ts.expandTweet }}
+			</a>
+		</div>
 	</div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted } from 'vue';
-import { url as local, lang } from '@/config';
-import { i18n } from '@/i18n';
+import { onMounted, onUnmounted } from "vue";
+import { url as local, lang } from "@/config";
+import { i18n } from "@/i18n";
 
-const props = withDefaults(defineProps<{
-	url: string;
-	detail?: boolean;
-	compact?: boolean;
-}>(), {
-	detail: false,
-	compact: false,
-});
+const props = withDefaults(
+	defineProps<{
+		url: string;
+		detail?: boolean;
+		compact?: boolean;
+	}>(),
+	{
+		detail: false,
+		compact: false,
+	}
+);
 
 const self = props.url.startsWith(local);
-const attr = self ? 'to' : 'href';
-const target = self ? null : '_blank';
+const attr = self ? "to" : "href";
+const target = self ? null : "_blank";
 let fetching = $ref(true);
 let title = $ref<string | null>(null);
 let description = $ref<string | null>(null);
@@ -63,27 +135,36 @@ let player = $ref({
 let playerEnabled = $ref(false);
 let tweetId = $ref<string | null>(null);
 let tweetExpanded = $ref(props.detail);
-const embedId = `embed${Math.random().toString().replace(/\D/,'')}`;
+const embedId = `embed${Math.random().toString().replace(/\D/, "")}`;
 let tweetHeight = $ref(150);
 
 const requestUrl = new URL(props.url);
-if (!['http:', 'https:'].includes(requestUrl.protocol)) throw new Error('invalid url');
+if (!["http:", "https:"].includes(requestUrl.protocol))
+	throw new Error("invalid url");
 
-if (requestUrl.hostname === 'twitter.com' || requestUrl.hostname === 'mobile.twitter.com') {
+if (
+	requestUrl.hostname === "twitter.com" ||
+	requestUrl.hostname === "mobile.twitter.com"
+) {
 	const m = requestUrl.pathname.match(/^\/.+\/status(?:es)?\/(\d+)/);
 	if (m) tweetId = m[1];
 }
 
-if (requestUrl.hostname === 'music.youtube.com' && requestUrl.pathname.match('^/(?:watch|channel)')) {
-	requestUrl.hostname = 'www.youtube.com';
+if (
+	requestUrl.hostname === "music.youtube.com" &&
+	requestUrl.pathname.match("^/(?:watch|channel)")
+) {
+	requestUrl.hostname = "www.youtube.com";
 }
 
-const requestLang = (lang || 'ja-JP').replace('ja-KS', 'ja-JP');
+const requestLang = (lang || "ja-JP").replace("ja-KS", "ja-JP");
 
-requestUrl.hash = '';
+requestUrl.hash = "";
 
-fetch(`/url?url=${encodeURIComponent(requestUrl.href)}&lang=${requestLang}`).then(res => {
-	res.json().then(info => {
+fetch(
+	`/url?url=${encodeURIComponent(requestUrl.href)}&lang=${requestLang}`
+).then((res) => {
+	res.json().then((info) => {
 		if (info.url == null) return;
 		title = info.title;
 		description = info.description;
@@ -96,18 +177,18 @@ fetch(`/url?url=${encodeURIComponent(requestUrl.href)}&lang=${requestLang}`).the
 });
 
 function adjustTweetHeight(message: any) {
-	if (message.origin !== 'https://platform.twitter.com') return;
-	const embed = message.data?.['twttr.embed'];
-	if (embed?.method !== 'twttr.private.resize') return;
+	if (message.origin !== "https://platform.twitter.com") return;
+	const embed = message.data?.["twttr.embed"];
+	if (embed?.method !== "twttr.private.resize") return;
 	if (embed?.id !== embedId) return;
 	const height = embed?.params[0]?.height;
 	if (height) tweetHeight = height;
 }
 
-(window as any).addEventListener('message', adjustTweetHeight);
+(window as any).addEventListener("message", adjustTweetHeight);
 
 onUnmounted(() => {
-	(window as any).removeEventListener('message', adjustTweetHeight);
+	(window as any).removeEventListener("message", adjustTweetHeight);
 });
 </script>
 
@@ -214,8 +295,9 @@ onUnmounted(() => {
 		border: 1px solid var(--divider);
 		border-radius: 8px;
 		overflow: hidden;
-		transition: background .2s;
-		&:hover, &:focus-within {
+		transition: background 0.2s;
+		&:hover,
+		&:focus-within {
 			text-decoration: none;
 			background-color: var(--panelHighlight);
 			> article > header > h1 {
@@ -293,7 +375,9 @@ onUnmounted(() => {
 
 		&.compact {
 			> article {
-				> header h1, p, footer {
+				> header h1,
+				p,
+				footer {
 					overflow: hidden;
 					white-space: nowrap;
 					text-overflow: ellipsis;
diff --git a/packages/client/src/components/MkUrlPreviewPopup.vue b/packages/client/src/components/MkUrlPreviewPopup.vue
index f343c6d8a6..76d0143133 100644
--- a/packages/client/src/components/MkUrlPreviewPopup.vue
+++ b/packages/client/src/components/MkUrlPreviewPopup.vue
@@ -1,15 +1,21 @@
 <template>
-<div class="fgmtyycl" :style="{ zIndex, top: top + 'px', left: left + 'px' }">
-	<transition :name="$store.state.animation ? 'zoom' : ''" @after-leave="emit('closed')">
-		<MkUrlPreview v-if="showing" class="_popup _shadow" :url="url"/>
-	</transition>
-</div>
+	<div
+		class="fgmtyycl"
+		:style="{ zIndex, top: top + 'px', left: left + 'px' }"
+	>
+		<transition
+			:name="$store.state.animation ? 'zoom' : ''"
+			@after-leave="emit('closed')"
+		>
+			<MkUrlPreview v-if="showing" class="_popup _shadow" :url="url" />
+		</transition>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted } from 'vue';
-import MkUrlPreview from '@/components/MkUrlPreview.vue';
-import * as os from '@/os';
+import { onMounted } from "vue";
+import MkUrlPreview from "@/components/MkUrlPreview.vue";
+import * as os from "@/os";
 
 const props = defineProps<{
 	showing: boolean;
@@ -18,16 +24,18 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-	(ev: 'closed'): void;
+	(ev: "closed"): void;
 }>();
 
-const zIndex = os.claimZIndex('middle');
+const zIndex = os.claimZIndex("middle");
 let top = $ref(0);
 let left = $ref(0);
 
 onMounted(() => {
 	const rect = props.source.getBoundingClientRect();
-	const x = Math.max((rect.left + (props.source.offsetWidth / 2)) - (300 / 2), 6) + window.pageXOffset;
+	const x =
+		Math.max(rect.left + props.source.offsetWidth / 2 - 300 / 2, 6) +
+		window.pageXOffset;
 	const y = rect.top + props.source.offsetHeight + window.pageYOffset;
 
 	top = y;
diff --git a/packages/client/src/components/MkUserCardMini.vue b/packages/client/src/components/MkUserCardMini.vue
index bc6fc8afc7..9d97e24841 100644
--- a/packages/client/src/components/MkUserCardMini.vue
+++ b/packages/client/src/components/MkUserCardMini.vue
@@ -1,19 +1,31 @@
 <template>
-<div :class="[$style.root, { yellow: user.isSilenced, red: user.isSuspended, gray: false }]">
-	<MkAvatar class="avatar" :user="user" :disable-link="true" :show-indicator="true"/>
-	<div class="body">
-		<span class="name"><MkUserName class="name" :user="user"/></span>
-		<span class="sub"><span class="acct _monospace">@{{ acct(user) }}</span></span>
+	<div
+		:class="[
+			$style.root,
+			{ yellow: user.isSilenced, red: user.isSuspended, gray: false },
+		]"
+	>
+		<MkAvatar
+			class="avatar"
+			:user="user"
+			:disable-link="true"
+			:show-indicator="true"
+		/>
+		<div class="body">
+			<span class="name"><MkUserName class="name" :user="user" /></span>
+			<span class="sub"
+				><span class="acct _monospace">@{{ acct(user) }}</span></span
+			>
+		</div>
+		<MkMiniChart v-if="chartValues" class="chart" :src="chartValues" />
 	</div>
-	<MkMiniChart v-if="chartValues" class="chart" :src="chartValues"/>
-</div>
 </template>
 
 <script lang="ts" setup>
-import * as misskey from 'calckey-js';
-import MkMiniChart from '@/components/MkMiniChart.vue';
-import * as os from '@/os';
-import { acct } from '@/filters/user';
+import * as misskey from "calckey-js";
+import MkMiniChart from "@/components/MkMiniChart.vue";
+import * as os from "@/os";
+import { acct } from "@/filters/user";
 
 const props = defineProps<{
 	user: misskey.entities.User;
@@ -21,7 +33,11 @@ const props = defineProps<{
 
 let chartValues = $ref<number[] | null>(null);
 
-os.apiGet('charts/user/notes', { userId: props.user.id, limit: 16 + 1, span: 'day' }).then(res => {
+os.apiGet("charts/user/notes", {
+	userId: props.user.id,
+	limit: 16 + 1,
+	span: "day",
+}).then((res) => {
 	// 今日のぶんの値はまだ途中の値であり、それも含めると大抵の場合前日よりも下降しているようなグラフになってしまうため今日は弾く
 	res.inc.splice(0, 1);
 	chartValues = res.inc;
@@ -80,19 +96,46 @@ os.apiGet('charts/user/notes', { userId: props.user.id, limit: 16 + 1, span: 'da
 
 	&:global(.yellow) {
 		--c: rgb(255 196 0 / 15%);
-		background-image: linear-gradient(45deg, var(--c) 16.67%, transparent 16.67%, transparent 50%, var(--c) 50%, var(--c) 66.67%, transparent 66.67%, transparent 100%);
+		background-image: linear-gradient(
+			45deg,
+			var(--c) 16.67%,
+			transparent 16.67%,
+			transparent 50%,
+			var(--c) 50%,
+			var(--c) 66.67%,
+			transparent 66.67%,
+			transparent 100%
+		);
 		background-size: 16px 16px;
 	}
 
 	&:global(.red) {
 		--c: rgb(255 0 0 / 15%);
-		background-image: linear-gradient(45deg, var(--c) 16.67%, transparent 16.67%, transparent 50%, var(--c) 50%, var(--c) 66.67%, transparent 66.67%, transparent 100%);
+		background-image: linear-gradient(
+			45deg,
+			var(--c) 16.67%,
+			transparent 16.67%,
+			transparent 50%,
+			var(--c) 50%,
+			var(--c) 66.67%,
+			transparent 66.67%,
+			transparent 100%
+		);
 		background-size: 16px 16px;
 	}
 
 	&:global(.gray) {
 		--c: var(--bg);
-		background-image: linear-gradient(45deg, var(--c) 16.67%, transparent 16.67%, transparent 50%, var(--c) 50%, var(--c) 66.67%, transparent 66.67%, transparent 100%);
+		background-image: linear-gradient(
+			45deg,
+			var(--c) 16.67%,
+			transparent 16.67%,
+			transparent 50%,
+			var(--c) 50%,
+			var(--c) 66.67%,
+			transparent 66.67%,
+			transparent 100%
+		);
 		background-size: 16px 16px;
 	}
 }
diff --git a/packages/client/src/components/MkUserInfo.vue b/packages/client/src/components/MkUserInfo.vue
index b34c2a87b3..5841e6d410 100644
--- a/packages/client/src/components/MkUserInfo.vue
+++ b/packages/client/src/components/MkUserInfo.vue
@@ -1,37 +1,64 @@
 <template>
-<div class="_panel vjnjpkug">
-	<div class="banner" :style="user.bannerUrl ? `background-image: url(${user.bannerUrl})` : ''"></div>
-	<MkAvatar class="avatar" :user="user" :disable-preview="true" :show-indicator="true"/>
-	<div class="title">
-		<MkA class="name" :to="userPage(user)"><MkUserName :user="user" :nowrap="false"/></MkA>
-		<p class="username"><MkAcct :user="user"/></p>
+	<div class="_panel vjnjpkug">
+		<div
+			class="banner"
+			:style="
+				user.bannerUrl ? `background-image: url(${user.bannerUrl})` : ''
+			"
+		></div>
+		<MkAvatar
+			class="avatar"
+			:user="user"
+			:disable-preview="true"
+			:show-indicator="true"
+		/>
+		<div class="title">
+			<MkA class="name" :to="userPage(user)"
+				><MkUserName :user="user" :nowrap="false"
+			/></MkA>
+			<p class="username"><MkAcct :user="user" /></p>
+		</div>
+		<div class="description">
+			<div v-if="user.description" class="mfm">
+				<Mfm
+					:text="user.description"
+					:author="user"
+					:i="$i"
+					:custom-emojis="user.emojis"
+				/>
+			</div>
+			<span v-else style="opacity: 0.7">{{
+				i18n.ts.noAccountDescription
+			}}</span>
+		</div>
+		<div class="status">
+			<div>
+				<p>{{ i18n.ts.notes }}</p>
+				<span>{{ user.notesCount }}</span>
+			</div>
+			<div>
+				<p>{{ i18n.ts.following }}</p>
+				<span>{{ user.followingCount }}</span>
+			</div>
+			<div>
+				<p>{{ i18n.ts.followers }}</p>
+				<span>{{ user.followersCount }}</span>
+			</div>
+		</div>
+		<MkFollowButton
+			v-if="$i && user.id != $i.id"
+			class="koudoku-button"
+			:user="user"
+			mini
+		/>
 	</div>
-	<div class="description">
-		<div v-if="user.description" class="mfm">
-			<Mfm :text="user.description" :author="user" :i="$i" :custom-emojis="user.emojis"/>
-		</div>
-		<span v-else style="opacity: 0.7;">{{ i18n.ts.noAccountDescription }}</span>
-	</div>
-	<div class="status">
-		<div>
-			<p>{{ i18n.ts.notes }}</p><span>{{ user.notesCount }}</span>
-		</div>
-		<div>
-			<p>{{ i18n.ts.following }}</p><span>{{ user.followingCount }}</span>
-		</div>
-		<div>
-			<p>{{ i18n.ts.followers }}</p><span>{{ user.followersCount }}</span>
-		</div>
-	</div>
-	<MkFollowButton v-if="$i && user.id != $i.id" class="koudoku-button" :user="user" mini/>
-</div>
 </template>
 
 <script lang="ts" setup>
-import * as misskey from 'calckey-js';
-import MkFollowButton from '@/components/MkFollowButton.vue';
-import { userPage } from '@/filters/user';
-import { i18n } from '@/i18n';
+import * as misskey from "calckey-js";
+import MkFollowButton from "@/components/MkFollowButton.vue";
+import { userPage } from "@/filters/user";
+import { i18n } from "@/i18n";
 
 defineProps<{
 	user: misskey.entities.UserDetailed;
@@ -47,7 +74,6 @@ defineProps<{
 		background-color: rgba(0, 0, 0, 0.1);
 		background-size: cover;
 		background-position: center;
-
 	}
 
 	> .avatar {
diff --git a/packages/client/src/components/MkUserList.vue b/packages/client/src/components/MkUserList.vue
index 204d7a61da..99815e46e4 100644
--- a/packages/client/src/components/MkUserList.vue
+++ b/packages/client/src/components/MkUserList.vue
@@ -1,26 +1,35 @@
 <template>
-<MkPagination ref="pagingComponent" :pagination="pagination">
-	<template #empty>
-		<div class="_fullinfo">
-			<img src="/static-assets/badges/info.png" class="_ghost" alt="Info"/>
-			<div>{{ i18n.ts.noUsers }}</div>
-		</div>
-	</template>
+	<MkPagination ref="pagingComponent" :pagination="pagination">
+		<template #empty>
+			<div class="_fullinfo">
+				<img
+					src="/static-assets/badges/info.png"
+					class="_ghost"
+					alt="Info"
+				/>
+				<div>{{ i18n.ts.noUsers }}</div>
+			</div>
+		</template>
 
-	<template #default="{ items: users }">
-		<div class="efvhhmdq">
-			<MkUserInfo v-for="user in users" :key="user.id" class="user" :user="user"/>
-		</div>
-	</template>
-</MkPagination>
+		<template #default="{ items: users }">
+			<div class="efvhhmdq">
+				<MkUserInfo
+					v-for="user in users"
+					:key="user.id"
+					class="user"
+					:user="user"
+				/>
+			</div>
+		</template>
+	</MkPagination>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
-import MkUserInfo from '@/components/MkUserInfo.vue';
-import MkPagination, { Paging } from '@/components/MkPagination.vue';
-import { userPage } from '@/filters/user';
-import { i18n } from '@/i18n';
+import { ref } from "vue";
+import MkUserInfo from "@/components/MkUserInfo.vue";
+import MkPagination, { Paging } from "@/components/MkPagination.vue";
+import { userPage } from "@/filters/user";
+import { i18n } from "@/i18n";
 
 const props = defineProps<{
 	pagination: Paging;
diff --git a/packages/client/src/components/MkUserOnlineIndicator.vue b/packages/client/src/components/MkUserOnlineIndicator.vue
index 35eef94a1c..de238ed4b0 100644
--- a/packages/client/src/components/MkUserOnlineIndicator.vue
+++ b/packages/client/src/components/MkUserOnlineIndicator.vue
@@ -1,11 +1,11 @@
 <template>
-<div v-tooltip="text" class="fzgwjkgc" :class="user.onlineStatus"></div>
+	<div v-tooltip="text" class="fzgwjkgc" :class="user.onlineStatus"></div>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import * as misskey from 'calckey-js';
-import { i18n } from '@/i18n';
+import {} from "vue";
+import * as misskey from "calckey-js";
+import { i18n } from "@/i18n";
 
 const props = defineProps<{
 	user: misskey.entities.User;
@@ -13,10 +13,14 @@ const props = defineProps<{
 
 const text = $computed(() => {
 	switch (props.user.onlineStatus) {
-		case 'online': return i18n.ts.online;
-		case 'active': return i18n.ts.active;
-		case 'offline': return i18n.ts.offline;
-		case 'unknown': return i18n.ts.unknown;
+		case "online":
+			return i18n.ts.online;
+		case "active":
+			return i18n.ts.active;
+		case "offline":
+			return i18n.ts.offline;
+		case "unknown":
+			return i18n.ts.unknown;
 	}
 });
 </script>
diff --git a/packages/client/src/components/MkUserPreview.vue b/packages/client/src/components/MkUserPreview.vue
index 71f97137a7..956dececb2 100644
--- a/packages/client/src/components/MkUserPreview.vue
+++ b/packages/client/src/components/MkUserPreview.vue
@@ -1,47 +1,97 @@
 <template>
-<transition :name="$store.state.animation ? 'popup' : ''" appear @after-leave="emit('closed')">
-	<div v-if="showing" class="fxxzrfni _popup _shadow" :style="{ zIndex, top: top + 'px', left: left + 'px' }" @mouseover="() => { emit('mouseover'); }" @mouseleave="() => { emit('mouseleave'); }">
-		<div v-if="user != null" class="info">
-			<div class="banner" :style="user.bannerUrl ? `background-image: url(${user.bannerUrl})` : ''">
-				<span v-if="$i && $i.id != user.id && user.isFollowed" class="followed">{{ i18n.ts.followsYou }}</span>
-			</div>
-			<MkAvatar class="avatar" :user="user" :disable-preview="true" :show-indicator="true"/>
-			<div class="title">
-				<MkA class="name" :to="userPage(user)"><MkUserName :user="user" :nowrap="false"/></MkA>
-				<p class="username"><MkAcct :user="user"/></p>
-			</div>
-			<div class="description">
-				<Mfm v-if="user.description" :text="user.description" :author="user" :i="$i" :custom-emojis="user.emojis"/>
-			</div>
-			<div class="status">
-				<div>
-					<p>{{ i18n.ts.notes }}</p><span>{{ user.notesCount }}</span>
+	<transition
+		:name="$store.state.animation ? 'popup' : ''"
+		appear
+		@after-leave="emit('closed')"
+	>
+		<div
+			v-if="showing"
+			class="fxxzrfni _popup _shadow"
+			:style="{ zIndex, top: top + 'px', left: left + 'px' }"
+			@mouseover="
+				() => {
+					emit('mouseover');
+				}
+			"
+			@mouseleave="
+				() => {
+					emit('mouseleave');
+				}
+			"
+		>
+			<div v-if="user != null" class="info">
+				<div
+					class="banner"
+					:style="
+						user.bannerUrl
+							? `background-image: url(${user.bannerUrl})`
+							: ''
+					"
+				>
+					<span
+						v-if="$i && $i.id != user.id && user.isFollowed"
+						class="followed"
+						>{{ i18n.ts.followsYou }}</span
+					>
 				</div>
-				<div>
-					<p>{{ i18n.ts.following }}</p><span>{{ user.followingCount }}</span>
+				<MkAvatar
+					class="avatar"
+					:user="user"
+					:disable-preview="true"
+					:show-indicator="true"
+				/>
+				<div class="title">
+					<MkA class="name" :to="userPage(user)"
+						><MkUserName :user="user" :nowrap="false"
+					/></MkA>
+					<p class="username"><MkAcct :user="user" /></p>
 				</div>
-				<div>
-					<p>{{ i18n.ts.followers }}</p><span>{{ user.followersCount }}</span>
+				<div class="description">
+					<Mfm
+						v-if="user.description"
+						:text="user.description"
+						:author="user"
+						:i="$i"
+						:custom-emojis="user.emojis"
+					/>
 				</div>
+				<div class="status">
+					<div>
+						<p>{{ i18n.ts.notes }}</p>
+						<span>{{ user.notesCount }}</span>
+					</div>
+					<div>
+						<p>{{ i18n.ts.following }}</p>
+						<span>{{ user.followingCount }}</span>
+					</div>
+					<div>
+						<p>{{ i18n.ts.followers }}</p>
+						<span>{{ user.followersCount }}</span>
+					</div>
+				</div>
+				<MkFollowButton
+					v-if="$i && user.id != $i.id"
+					class="koudoku-button"
+					:user="user"
+					mini
+				/>
+			</div>
+			<div v-else>
+				<MkLoading />
 			</div>
-			<MkFollowButton v-if="$i && user.id != $i.id" class="koudoku-button" :user="user" mini/>
 		</div>
-		<div v-else>
-			<MkLoading/>
-		</div>
-	</div>
-</transition>
+	</transition>
 </template>
 
 <script lang="ts" setup>
-import { onMounted } from 'vue';
-import * as Acct from 'calckey-js/built/acct';
-import type * as misskey from 'calckey-js';
-import MkFollowButton from '@/components/MkFollowButton.vue';
-import { userPage } from '@/filters/user';
-import * as os from '@/os';
-import { $i } from '@/account';
-import { i18n } from '@/i18n';
+import { onMounted } from "vue";
+import * as Acct from "calckey-js/built/acct";
+import type * as misskey from "calckey-js";
+import MkFollowButton from "@/components/MkFollowButton.vue";
+import { userPage } from "@/filters/user";
+import * as os from "@/os";
+import { $i } from "@/account";
+import { i18n } from "@/i18n";
 
 const props = defineProps<{
 	showing: boolean;
@@ -50,32 +100,33 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-	(ev: 'closed'): void;
-	(ev: 'mouseover'): void;
-	(ev: 'mouseleave'): void;
+	(ev: "closed"): void;
+	(ev: "mouseover"): void;
+	(ev: "mouseleave"): void;
 }>();
 
-const zIndex = os.claimZIndex('middle');
+const zIndex = os.claimZIndex("middle");
 let user = $ref<misskey.entities.UserDetailed | null>(null);
 let top = $ref(0);
 let left = $ref(0);
 
 onMounted(() => {
-	if (typeof props.q === 'object') {
+	if (typeof props.q === "object") {
 		user = props.q;
 	} else {
-		const query = props.q.startsWith('@') ?
-			Acct.parse(props.q.substr(1)) :
-			{ userId: props.q };
+		const query = props.q.startsWith("@")
+			? Acct.parse(props.q.substr(1))
+			: { userId: props.q };
 
-		os.api('users/show', query).then(res => {
+		os.api("users/show", query).then((res) => {
 			if (!props.showing) return;
 			user = res;
 		});
 	}
 
 	const rect = props.source.getBoundingClientRect();
-	const x = ((rect.left + (props.source.offsetWidth / 2)) - (300 / 2)) + window.pageXOffset;
+	const x =
+		rect.left + props.source.offsetWidth / 2 - 300 / 2 + window.pageXOffset;
 	const y = rect.top + props.source.offsetHeight + window.pageYOffset;
 
 	top = y;
@@ -84,10 +135,12 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
-.popup-enter-active, .popup-leave-active {
+.popup-enter-active,
+.popup-leave-active {
 	transition: opacity 0.3s, transform 0.3s !important;
 }
-.popup-enter-from, .popup-leave-to {
+.popup-enter-from,
+.popup-leave-to {
 	opacity: 0;
 	transform: scale(0.9);
 }
@@ -105,14 +158,14 @@ onMounted(() => {
 			background-size: cover;
 			background-position: center;
 			> .followed {
-					position: absolute;
-					top: 12px;
-					left: 12px;
-					padding: 4px 8px;
-					color: #fff;
-					background: rgba(0, 0, 0, 0.7);
-					font-size: 0.7em;
-					border-radius: 6px;
+				position: absolute;
+				top: 12px;
+				left: 12px;
+				padding: 4px 8px;
+				color: #fff;
+				background: rgba(0, 0, 0, 0.7);
+				font-size: 0.7em;
+				border-radius: 6px;
 			}
 
 			&::after {
@@ -123,7 +176,7 @@ onMounted(() => {
 				background-size: cover;
 				background-position: center;
 				pointer-events: none;
-				opacity: .1;
+				opacity: 0.1;
 				filter: var(--blur, blur(10px));
 			}
 		}
diff --git a/packages/client/src/components/MkUserSelectDialog.vue b/packages/client/src/components/MkUserSelectDialog.vue
index afd1cd9267..506f48bd4f 100644
--- a/packages/client/src/components/MkUserSelectDialog.vue
+++ b/packages/client/src/components/MkUserSelectDialog.vue
@@ -1,115 +1,149 @@
 <template>
-<XModalWindow
-	ref="dialogEl"
-	:with-ok-button="true"
-	:ok-button-disabled="selected == null"
-	@click="cancel()"
-	@close="cancel()"
-	@ok="ok()"
-	@closed="$emit('closed')"
->
-	<template #header>{{ i18n.ts.selectUser }}</template>
-	<div class="tbhwbxda">
-		<div class="form">
-			<FormSplit :min-width="170">
-				<MkInput v-model="username" :autofocus="true" @update:modelValue="search">
-					<template #label>{{ i18n.ts.username }}</template>
-					<template #prefix>@</template>
-				</MkInput>
-				<MkInput v-model="host" @update:modelValue="search">
-					<template #label>{{ i18n.ts.host }}</template>
-					<template #prefix>@</template>
-				</MkInput>
-			</FormSplit>
-		</div>
-		<div v-if="username != '' || host != ''" class="result" :class="{ hit: users.length > 0 }">
-			<div v-if="users.length > 0" class="users">
-				<div v-for="user in users" :key="user.id" class="user" :class="{ selected: selected && selected.id === user.id }" @click="selected = user" @dblclick="ok()">
-					<MkAvatar :user="user" class="avatar" :show-indicator="true"/>
-					<div class="body">
-						<MkUserName :user="user" class="name"/>
-						<MkAcct :user="user" class="acct"/>
+	<XModalWindow
+		ref="dialogEl"
+		:with-ok-button="true"
+		:ok-button-disabled="selected == null"
+		@click="cancel()"
+		@close="cancel()"
+		@ok="ok()"
+		@closed="$emit('closed')"
+	>
+		<template #header>{{ i18n.ts.selectUser }}</template>
+		<div class="tbhwbxda">
+			<div class="form">
+				<FormSplit :min-width="170">
+					<MkInput
+						v-model="username"
+						:autofocus="true"
+						@update:modelValue="search"
+					>
+						<template #label>{{ i18n.ts.username }}</template>
+						<template #prefix>@</template>
+					</MkInput>
+					<MkInput v-model="host" @update:modelValue="search">
+						<template #label>{{ i18n.ts.host }}</template>
+						<template #prefix>@</template>
+					</MkInput>
+				</FormSplit>
+			</div>
+			<div
+				v-if="username != '' || host != ''"
+				class="result"
+				:class="{ hit: users.length > 0 }"
+			>
+				<div v-if="users.length > 0" class="users">
+					<div
+						v-for="user in users"
+						:key="user.id"
+						class="user"
+						:class="{
+							selected: selected && selected.id === user.id,
+						}"
+						@click="selected = user"
+						@dblclick="ok()"
+					>
+						<MkAvatar
+							:user="user"
+							class="avatar"
+							:show-indicator="true"
+						/>
+						<div class="body">
+							<MkUserName :user="user" class="name" />
+							<MkAcct :user="user" class="acct" />
+						</div>
 					</div>
 				</div>
+				<div v-else class="empty">
+					<span>{{ i18n.ts.noUsers }}</span>
+				</div>
 			</div>
-			<div v-else class="empty">
-				<span>{{ i18n.ts.noUsers }}</span>
-			</div>
-		</div>
-		<div v-if="username == '' && host == ''" class="recent">
-			<div class="users">
-				<div v-for="user in recentUsers" :key="user.id" class="user" :class="{ selected: selected && selected.id === user.id }" @click="selected = user" @dblclick="ok()">
-					<MkAvatar :user="user" class="avatar" :show-indicator="true"/>
-					<div class="body">
-						<MkUserName :user="user" class="name"/>
-						<MkAcct :user="user" class="acct"/>
+			<div v-if="username == '' && host == ''" class="recent">
+				<div class="users">
+					<div
+						v-for="user in recentUsers"
+						:key="user.id"
+						class="user"
+						:class="{
+							selected: selected && selected.id === user.id,
+						}"
+						@click="selected = user"
+						@dblclick="ok()"
+					>
+						<MkAvatar
+							:user="user"
+							class="avatar"
+							:show-indicator="true"
+						/>
+						<div class="body">
+							<MkUserName :user="user" class="name" />
+							<MkAcct :user="user" class="acct" />
+						</div>
 					</div>
 				</div>
 			</div>
 		</div>
-	</div>
-</XModalWindow>
+	</XModalWindow>
 </template>
 
 <script lang="ts" setup>
-import { nextTick, onMounted } from 'vue';
-import * as misskey from 'calckey-js';
-import MkInput from '@/components/form/input.vue';
-import FormSplit from '@/components/form/split.vue';
-import XModalWindow from '@/components/MkModalWindow.vue';
-import * as os from '@/os';
-import { defaultStore } from '@/store';
-import { i18n } from '@/i18n';
+import { nextTick, onMounted } from "vue";
+import * as misskey from "calckey-js";
+import MkInput from "@/components/form/input.vue";
+import FormSplit from "@/components/form/split.vue";
+import XModalWindow from "@/components/MkModalWindow.vue";
+import * as os from "@/os";
+import { defaultStore } from "@/store";
+import { i18n } from "@/i18n";
 
 const emit = defineEmits<{
-	(ev: 'ok', selected: misskey.entities.UserDetailed): void;
-	(ev: 'cancel'): void;
-	(ev: 'closed'): void;
+	(ev: "ok", selected: misskey.entities.UserDetailed): void;
+	(ev: "cancel"): void;
+	(ev: "closed"): void;
 }>();
 
-let username = $ref('');
-let host = $ref('');
+let username = $ref("");
+let host = $ref("");
 let users: misskey.entities.UserDetailed[] = $ref([]);
 let recentUsers: misskey.entities.UserDetailed[] = $ref([]);
 let selected: misskey.entities.UserDetailed | null = $ref(null);
 let dialogEl = $ref();
 
 const search = () => {
-	if (username === '' && host === '') {
+	if (username === "" && host === "") {
 		users = [];
 		return;
 	}
-	os.api('users/search-by-username-and-host', {
+	os.api("users/search-by-username-and-host", {
 		username: username,
 		host: host,
 		limit: 10,
 		detail: false,
-	}).then(_users => {
+	}).then((_users) => {
 		users = _users;
 	});
 };
 
 const ok = () => {
 	if (selected == null) return;
-	emit('ok', selected);
+	emit("ok", selected);
 	dialogEl.close();
 
 	// 最近使ったユーザー更新
 	let recents = defaultStore.state.recentlyUsedUsers;
-	recents = recents.filter(x => x !== selected.id);
+	recents = recents.filter((x) => x !== selected.id);
 	recents.unshift(selected.id);
-	defaultStore.set('recentlyUsedUsers', recents.splice(0, 16));
+	defaultStore.set("recentlyUsedUsers", recents.splice(0, 16));
 };
 
 const cancel = () => {
-	emit('cancel');
+	emit("cancel");
 	dialogEl.close();
 };
 
 onMounted(() => {
-	os.api('users/show', {
+	os.api("users/show", {
 		userIds: defaultStore.state.recentlyUsedUsers,
-	}).then(users => {
+	}).then((users) => {
 		recentUsers = users;
 	});
 });
@@ -121,7 +155,8 @@ onMounted(() => {
 		padding: 0 var(--root-margin);
 	}
 
-	> .result, > .recent {
+	> .result,
+	> .recent {
 		display: flex;
 		flex-direction: column;
 		overflow: auto;
diff --git a/packages/client/src/components/MkUsersTooltip.vue b/packages/client/src/components/MkUsersTooltip.vue
index 4ccc44b47e..972864d1f1 100644
--- a/packages/client/src/components/MkUsersTooltip.vue
+++ b/packages/client/src/components/MkUsersTooltip.vue
@@ -1,18 +1,25 @@
 <template>
-<MkTooltip ref="tooltip" :target-element="targetElement" :max-width="250" @closed="emit('closed')">
-	<div class="beaffaef">
-		<div v-for="u in users" :key="u.id" class="user">
-			<MkAvatar class="avatar" :user="u"/>
-			<MkUserName class="name" :user="u" :nowrap="true"/>
+	<MkTooltip
+		ref="tooltip"
+		:target-element="targetElement"
+		:max-width="250"
+		@closed="emit('closed')"
+	>
+		<div class="beaffaef">
+			<div v-for="u in users" :key="u.id" class="user">
+				<MkAvatar class="avatar" :user="u" />
+				<MkUserName class="name" :user="u" :nowrap="true" />
+			</div>
+			<div v-if="users.length < count" class="omitted">
+				+{{ count - users.length }}
+			</div>
 		</div>
-		<div v-if="users.length < count" class="omitted">+{{ count - users.length }}</div>
-	</div>
-</MkTooltip>
+	</MkTooltip>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import MkTooltip from './MkTooltip.vue';
+import {} from "vue";
+import MkTooltip from "./MkTooltip.vue";
 
 const props = defineProps<{
 	users: any[]; // TODO
@@ -21,7 +28,7 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-	(ev: 'closed'): void;
+	(ev: "closed"): void;
 }>();
 </script>
 
diff --git a/packages/client/src/components/MkVisibility.vue b/packages/client/src/components/MkVisibility.vue
index ff6535ed41..04fd6aaef2 100644
--- a/packages/client/src/components/MkVisibility.vue
+++ b/packages/client/src/components/MkVisibility.vue
@@ -1,47 +1,62 @@
 <template>
-<span v-if="note.visibility !== 'public'" :class="$style.visibility">
-	<i v-if="note.visibility === 'home'" class="ph-house ph-bold ph-lg"></i>
-	<i v-else-if="note.visibility === 'followers'" class="ph-lock-simple-open ph-bold ph-lg"></i>
-	<i v-else-if="note.visibility === 'specified'" ref="specified" class="ph-envelope-simple-open ph-bold ph-lg"></i>
-</span>
-<span v-if="note.localOnly" :class="$style.localOnly"><i class="ph-hand-fist ph-bold ph-lg"></i></span>
+	<span v-if="note.visibility !== 'public'" :class="$style.visibility">
+		<i v-if="note.visibility === 'home'" class="ph-house ph-bold ph-lg"></i>
+		<i
+			v-else-if="note.visibility === 'followers'"
+			class="ph-lock-simple-open ph-bold ph-lg"
+		></i>
+		<i
+			v-else-if="note.visibility === 'specified'"
+			ref="specified"
+			class="ph-envelope-simple-open ph-bold ph-lg"
+		></i>
+	</span>
+	<span v-if="note.localOnly" :class="$style.localOnly"
+		><i class="ph-hand-fist ph-bold ph-lg"></i
+	></span>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
-import XDetails from '@/components/MkUsersTooltip.vue';
-import * as os from '@/os';
-import { useTooltip } from '@/scripts/use-tooltip';
+import { ref } from "vue";
+import XDetails from "@/components/MkUsersTooltip.vue";
+import * as os from "@/os";
+import { useTooltip } from "@/scripts/use-tooltip";
 
 const props = defineProps<{
 	note: {
 		visibility: string;
 		localOnly?: boolean;
 		visibleUserIds?: string[];
-	},
+	};
 }>();
 
 const specified = $ref<HTMLElement>();
 
-if (props.note.visibility === 'specified') {
+if (props.note.visibility === "specified") {
 	useTooltip($$(specified), async (showing) => {
-		const users = await os.api('users/show', {
+		const users = await os.api("users/show", {
 			userIds: props.note.visibleUserIds,
 			limit: 10,
 		});
 
-		os.popup(XDetails, {
-			showing,
-			users,
-			count: props.note.visibleUserIds.length,
-			targetElement: specified,
-		}, {}, 'closed');
+		os.popup(
+			XDetails,
+			{
+				showing,
+				users,
+				count: props.note.visibleUserIds.length,
+				targetElement: specified,
+			},
+			{},
+			"closed"
+		);
 	});
 }
 </script>
 
 <style lang="scss" module>
-.visibility, .localOnly {
+.visibility,
+.localOnly {
 	margin-left: 0.5em;
 }
 </style>
diff --git a/packages/client/src/components/MkVisibilityPicker.vue b/packages/client/src/components/MkVisibilityPicker.vue
index 2ad5210552..753d8bbbae 100644
--- a/packages/client/src/components/MkVisibilityPicker.vue
+++ b/packages/client/src/components/MkVisibilityPicker.vue
@@ -1,78 +1,162 @@
 <template>
-	<MkModal ref="modal" :z-priority="'high'" :src="src" @click="modal.close()" @closed="emit('closed')">
+	<MkModal
+		ref="modal"
+		:z-priority="'high'"
+		:src="src"
+		@click="modal.close()"
+		@closed="emit('closed')"
+	>
 		<div class="_popup" :class="$style.root">
-			<button key="public" class="_button" :class="[$style.item, { [$style.active]: v === 'public' }]" data-index="1" @click="choose('public')">
-				<div :class="$style.icon"><i class="ph-planet ph-bold ph-lg"></i></div>
+			<button
+				key="public"
+				class="_button"
+				:class="[$style.item, { [$style.active]: v === 'public' }]"
+				data-index="1"
+				@click="choose('public')"
+			>
+				<div :class="$style.icon">
+					<i class="ph-planet ph-bold ph-lg"></i>
+				</div>
 				<div :class="$style.body">
-					<span :class="$style.itemTitle">{{ i18n.ts._visibility.public }}</span>
-					<span :class="$style.itemDescription">{{ i18n.ts._visibility.publicDescription }}</span>
+					<span :class="$style.itemTitle">{{
+						i18n.ts._visibility.public
+					}}</span>
+					<span :class="$style.itemDescription">{{
+						i18n.ts._visibility.publicDescription
+					}}</span>
 				</div>
 			</button>
-			<button key="home" class="_button" :class="[$style.item, { [$style.active]: v === 'home' }]" data-index="2" @click="choose('home')">
-				<div :class="$style.icon"><i class="ph-house ph-bold ph-lg"></i></div>
+			<button
+				key="home"
+				class="_button"
+				:class="[$style.item, { [$style.active]: v === 'home' }]"
+				data-index="2"
+				@click="choose('home')"
+			>
+				<div :class="$style.icon">
+					<i class="ph-house ph-bold ph-lg"></i>
+				</div>
 				<div :class="$style.body">
-					<span :class="$style.itemTitle">{{ i18n.ts._visibility.home }}</span>
-					<span :class="$style.itemDescription">{{ i18n.ts._visibility.homeDescription }}</span>
+					<span :class="$style.itemTitle">{{
+						i18n.ts._visibility.home
+					}}</span>
+					<span :class="$style.itemDescription">{{
+						i18n.ts._visibility.homeDescription
+					}}</span>
 				</div>
 			</button>
-			<button key="followers" class="_button" :class="[$style.item, { [$style.active]: v === 'followers' }]" data-index="3" @click="choose('followers')">
-				<div :class="$style.icon"><i class="ph-lock-simple-open ph-bold ph-lg"></i></div>
+			<button
+				key="followers"
+				class="_button"
+				:class="[$style.item, { [$style.active]: v === 'followers' }]"
+				data-index="3"
+				@click="choose('followers')"
+			>
+				<div :class="$style.icon">
+					<i class="ph-lock-simple-open ph-bold ph-lg"></i>
+				</div>
 				<div :class="$style.body">
-					<span :class="$style.itemTitle">{{ i18n.ts._visibility.followers }}</span>
-					<span :class="$style.itemDescription">{{ i18n.ts._visibility.followersDescription }}</span>
+					<span :class="$style.itemTitle">{{
+						i18n.ts._visibility.followers
+					}}</span>
+					<span :class="$style.itemDescription">{{
+						i18n.ts._visibility.followersDescription
+					}}</span>
 				</div>
 			</button>
-			<button key="specified" :disabled="localOnly" class="_button" :class="[$style.item, { [$style.active]: v === 'specified' }]" data-index="4" @click="choose('specified')">
-				<div :class="$style.icon"><i class="ph-envelope-simple-open ph-bold ph-lg"></i></div>
+			<button
+				key="specified"
+				:disabled="localOnly"
+				class="_button"
+				:class="[$style.item, { [$style.active]: v === 'specified' }]"
+				data-index="4"
+				@click="choose('specified')"
+			>
+				<div :class="$style.icon">
+					<i class="ph-envelope-simple-open ph-bold ph-lg"></i>
+				</div>
 				<div :class="$style.body">
-					<span :class="$style.itemTitle">{{ i18n.ts._visibility.specified }}</span>
-					<span :class="$style.itemDescription">{{ i18n.ts._visibility.specifiedDescription }}</span>
+					<span :class="$style.itemTitle">{{
+						i18n.ts._visibility.specified
+					}}</span>
+					<span :class="$style.itemDescription">{{
+						i18n.ts._visibility.specifiedDescription
+					}}</span>
 				</div>
 			</button>
 			<div :class="$style.divider"></div>
-			<button key="localOnly" class="_button" :class="[$style.item, $style.localOnly, { [$style.active]: localOnly }]" data-index="5" @click="localOnly = !localOnly">
-				<div :class="$style.icon"><i class="ph-hand-fist ph-bold ph-lg"></i></div>
-				<div :class="$style.body">
-					<span :class="$style.itemTitle">{{ i18n.ts._visibility.localOnly }}</span>
-					<span :class="$style.itemDescription">{{ i18n.ts._visibility.localOnlyDescription }}</span>
+			<button
+				key="localOnly"
+				class="_button"
+				:class="[
+					$style.item,
+					$style.localOnly,
+					{ [$style.active]: localOnly },
+				]"
+				data-index="5"
+				@click="localOnly = !localOnly"
+			>
+				<div :class="$style.icon">
+					<i class="ph-hand-fist ph-bold ph-lg"></i>
+				</div>
+				<div :class="$style.body">
+					<span :class="$style.itemTitle">{{
+						i18n.ts._visibility.localOnly
+					}}</span>
+					<span :class="$style.itemDescription">{{
+						i18n.ts._visibility.localOnlyDescription
+					}}</span>
+				</div>
+				<div :class="$style.toggle">
+					<i
+						:class="
+							localOnly
+								? 'ph-toggle-right ph-bold ph-lg'
+								: 'ph-toggle-left ph-bold ph-lg'
+						"
+					></i>
 				</div>
-				<div :class="$style.toggle"><i :class="localOnly ? 'ph-toggle-right ph-bold ph-lg' : 'ph-toggle-left ph-bold ph-lg'"></i></div>
 			</button>
 		</div>
 	</MkModal>
 </template>
 
 <script lang="ts" setup>
-import { nextTick, watch } from 'vue';
-import * as misskey from 'calckey-js';
-import MkModal from '@/components/MkModal.vue';
-import { i18n } from '@/i18n';
+import { nextTick, watch } from "vue";
+import * as misskey from "calckey-js";
+import MkModal from "@/components/MkModal.vue";
+import { i18n } from "@/i18n";
 
 const modal = $shallowRef<InstanceType<typeof MkModal>>();
 
-const props = withDefaults(defineProps<{
-	currentVisibility: typeof misskey.noteVisibilities[number];
-	currentLocalOnly: boolean;
-	src?: HTMLElement;
-}>(), {
-});
+const props = withDefaults(
+	defineProps<{
+		currentVisibility: (typeof misskey.noteVisibilities)[number];
+		currentLocalOnly: boolean;
+		src?: HTMLElement;
+	}>(),
+	{}
+);
 
 const emit = defineEmits<{
-	(ev: 'changeVisibility', v: typeof misskey.noteVisibilities[number]): void;
-	(ev: 'changeLocalOnly', v: boolean): void;
-	(ev: 'closed'): void;
+	(
+		ev: "changeVisibility",
+		v: (typeof misskey.noteVisibilities)[number]
+	): void;
+	(ev: "changeLocalOnly", v: boolean): void;
+	(ev: "closed"): void;
 }>();
 
 let v = $ref(props.currentVisibility);
 let localOnly = $ref(props.currentLocalOnly);
 
 watch($$(localOnly), () => {
-	emit('changeLocalOnly', localOnly);
+	emit("changeLocalOnly", localOnly);
 });
 
-function choose(visibility: typeof misskey.noteVisibilities[number]): void {
+function choose(visibility: (typeof misskey.noteVisibilities)[number]): void {
 	v = visibility;
-	emit('changeVisibility', visibility);
+	emit("changeVisibility", visibility);
 	nextTick(() => {
 		modal.close();
 	});
diff --git a/packages/client/src/components/MkWaitingDialog.vue b/packages/client/src/components/MkWaitingDialog.vue
index cd46f67398..acd394c1e0 100644
--- a/packages/client/src/components/MkWaitingDialog.vue
+++ b/packages/client/src/components/MkWaitingDialog.vue
@@ -1,16 +1,37 @@
 <template>
-<MkModal ref="modal" :prefer-type="'dialog'" :z-priority="'high'" @click="success ? done() : () => {}" @closed="emit('closed')">
-	<div :class="[$style.root, { [$style.iconOnly]: (text == null) || success }]">
-		<i v-if="success" :class="[$style.icon, $style.success]" class="ph-check ph-bold ph-lg"></i>
-		<MkLoading v-else :class="[$style.icon, $style.waiting]" :em="true"/>
-		<div v-if="text && !success" :class="$style.text">{{ text }}<MkEllipsis/></div>
-	</div>
-</MkModal>
+	<MkModal
+		ref="modal"
+		:prefer-type="'dialog'"
+		:z-priority="'high'"
+		@click="success ? done() : () => {}"
+		@closed="emit('closed')"
+	>
+		<div
+			:class="[
+				$style.root,
+				{ [$style.iconOnly]: text == null || success },
+			]"
+		>
+			<i
+				v-if="success"
+				:class="[$style.icon, $style.success]"
+				class="ph-check ph-bold ph-lg"
+			></i>
+			<MkLoading
+				v-else
+				:class="[$style.icon, $style.waiting]"
+				:em="true"
+			/>
+			<div v-if="text && !success" :class="$style.text">
+				{{ text }}<MkEllipsis />
+			</div>
+		</div>
+	</MkModal>
 </template>
 
 <script lang="ts" setup>
-import { watch, shallowRef } from 'vue';
-import MkModal from '@/components/MkModal.vue';
+import { watch, shallowRef } from "vue";
+import MkModal from "@/components/MkModal.vue";
 
 const modal = shallowRef<InstanceType<typeof MkModal>>();
 
@@ -21,18 +42,21 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-	(ev: 'done');
-	(ev: 'closed');
+	(ev: "done");
+	(ev: "closed");
 }>();
 
 function done() {
-	emit('done');
+	emit("done");
 	modal.value?.close();
 }
 
-watch(() => props.showing, () => {
-	if (!props.showing) done();
-});
+watch(
+	() => props.showing,
+	() => {
+		if (!props.showing) done();
+	}
+);
 </script>
 
 <style lang="scss" module>
diff --git a/packages/client/src/components/MkWidgets.vue b/packages/client/src/components/MkWidgets.vue
index 4bb1c0bb81..07e845032f 100644
--- a/packages/client/src/components/MkWidgets.vue
+++ b/packages/client/src/components/MkWidgets.vue
@@ -1,45 +1,90 @@
 <template>
-<div class="vjoppmmu">
-	<template v-if="edit">
-		<header>
-			<MkSelect v-model="widgetAdderSelected" style="margin-bottom: var(--margin)" class="mk-widget-select">
-				<template #label>{{ i18n.ts.selectWidget }}</template>
-				<option v-for="widget in widgetDefs" :key="widget" :value="widget">{{ i18n.t(`_widgets.${widget}`) }}</option>
-			</MkSelect>
-			<MkButton inline primary class="mk-widget-add" @click="addWidget"><i class="ph-plus ph-bold ph-lg"></i> {{ i18n.ts.add }}</MkButton>
-			<MkButton inline @click="$emit('exit')">{{ i18n.ts.close }}</MkButton>
-		</header>
-		<XDraggable
-			v-model="widgets_"
-			item-key="id"
-			handle=".handle"
-			animation="150"
-		>
-			<template #item="{element}">
-				<div class="customize-container">
-					<button class="config _button" @click.prevent.stop="configWidget(element.id)"><i class="ph-gear-six ph-bold ph-lg"></i></button>
-					<button class="remove _button" @click.prevent.stop="removeWidget(element)"><i class="ph-x ph-bold ph-lg"></i></button>
-					<div class="handle">
-						<component :is="`mkw-${element.name}`" :ref="el => widgetRefs[element.id] = el" class="widget" :widget="element" @updateProps="updateWidget(element.id, $event)"/>
+	<div class="vjoppmmu">
+		<template v-if="edit">
+			<header>
+				<MkSelect
+					v-model="widgetAdderSelected"
+					style="margin-bottom: var(--margin)"
+					class="mk-widget-select"
+				>
+					<template #label>{{ i18n.ts.selectWidget }}</template>
+					<option
+						v-for="widget in widgetDefs"
+						:key="widget"
+						:value="widget"
+					>
+						{{ i18n.t(`_widgets.${widget}`) }}
+					</option>
+				</MkSelect>
+				<MkButton
+					inline
+					primary
+					class="mk-widget-add"
+					@click="addWidget"
+					><i class="ph-plus ph-bold ph-lg"></i>
+					{{ i18n.ts.add }}</MkButton
+				>
+				<MkButton inline @click="$emit('exit')">{{
+					i18n.ts.close
+				}}</MkButton>
+			</header>
+			<XDraggable
+				v-model="widgets_"
+				item-key="id"
+				handle=".handle"
+				animation="150"
+			>
+				<template #item="{ element }">
+					<div class="customize-container">
+						<button
+							class="config _button"
+							@click.prevent.stop="configWidget(element.id)"
+						>
+							<i class="ph-gear-six ph-bold ph-lg"></i>
+						</button>
+						<button
+							class="remove _button"
+							@click.prevent.stop="removeWidget(element)"
+						>
+							<i class="ph-x ph-bold ph-lg"></i>
+						</button>
+						<div class="handle">
+							<component
+								:is="`mkw-${element.name}`"
+								:ref="(el) => (widgetRefs[element.id] = el)"
+								class="widget"
+								:widget="element"
+								@updateProps="updateWidget(element.id, $event)"
+							/>
+						</div>
 					</div>
-				</div>
-			</template>
-		</XDraggable>
-	</template>
-	<component :is="`mkw-${widget.name}`" v-for="widget in widgets" v-else :key="widget.id" :ref="el => widgetRefs[widget.id] = el" class="widget" :widget="widget" @updateProps="updateWidget(widget.id, $event)" @contextmenu.stop="onContextmenu(widget, $event)"/>
-</div>
+				</template>
+			</XDraggable>
+		</template>
+		<component
+			:is="`mkw-${widget.name}`"
+			v-for="widget in widgets"
+			v-else
+			:key="widget.id"
+			:ref="(el) => (widgetRefs[widget.id] = el)"
+			class="widget"
+			:widget="widget"
+			@updateProps="updateWidget(widget.id, $event)"
+			@contextmenu.stop="onContextmenu(widget, $event)"
+		/>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent, reactive, ref, computed } from 'vue';
-import { v4 as uuid } from 'uuid';
-import MkSelect from '@/components/form/select.vue';
-import MkButton from '@/components/MkButton.vue';
-import { widgets as widgetDefs } from '@/widgets';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
+import { defineAsyncComponent, reactive, ref, computed } from "vue";
+import { v4 as uuid } from "uuid";
+import MkSelect from "@/components/form/select.vue";
+import MkButton from "@/components/MkButton.vue";
+import { widgets as widgetDefs } from "@/widgets";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
 
-const XDraggable = defineAsyncComponent(() => import('vuedraggable'));
+const XDraggable = defineAsyncComponent(() => import("vuedraggable"));
 
 type Widget = {
 	name: string;
@@ -53,11 +98,11 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-	(ev: 'updateWidgets', widgets: Widget[]): void;
-	(ev: 'addWidget', widget: Widget): void;
-	(ev: 'removeWidget', widget: Widget): void;
-	(ev: 'updateWidget', widget: Partial<Widget>): void;
-	(ev: 'exit'): void;
+	(ev: "updateWidgets", widgets: Widget[]): void;
+	(ev: "addWidget", widget: Widget): void;
+	(ev: "removeWidget", widget: Widget): void;
+	(ev: "updateWidget", widget: Partial<Widget>): void;
+	(ev: "exit"): void;
 }>();
 
 const widgetRefs = {};
@@ -68,7 +113,7 @@ const widgetAdderSelected = ref(null);
 const addWidget = () => {
 	if (widgetAdderSelected.value == null) return;
 
-	emit('addWidget', {
+	emit("addWidget", {
 		name: widgetAdderSelected.value,
 		id: uuid(),
 		data: {},
@@ -77,39 +122,51 @@ const addWidget = () => {
 	widgetAdderSelected.value = null;
 };
 const removeWidget = (widget) => {
-	emit('removeWidget', widget);
+	emit("removeWidget", widget);
 };
 const updateWidget = (id, data) => {
-	emit('updateWidget', { id, data });
+	emit("updateWidget", { id, data });
 };
 const widgets_ = computed({
 	get: () => props.widgets,
 	set: (value) => {
-		emit('updateWidgets', value);
+		emit("updateWidgets", value);
 	},
 });
 
 function onContextmenu(widget: Widget, ev: MouseEvent) {
 	const isLink = (el: HTMLElement) => {
-		if (el.tagName === 'A') return true;
+		if (el.tagName === "A") return true;
 		if (el.parentElement) {
 			return isLink(el.parentElement);
 		}
 	};
 	if (isLink(ev.target)) return;
-	if (['INPUT', 'TEXTAREA', 'IMG', 'VIDEO', 'CANVAS'].includes(ev.target.tagName) || ev.target.attributes['contenteditable']) return;
-	if (window.getSelection()?.toString() !== '') return;
+	if (
+		["INPUT", "TEXTAREA", "IMG", "VIDEO", "CANVAS"].includes(
+			ev.target.tagName
+		) ||
+		ev.target.attributes["contenteditable"]
+	)
+		return;
+	if (window.getSelection()?.toString() !== "") return;
 
-	os.contextMenu([{
-		type: 'label',
-		text: i18n.t(`_widgets.${widget.name}`),
-	}, {
-		icon: 'ph-gear-six ph-bold ph-lg',
-		text: i18n.ts.settings,
-		action: () => {
-			configWidget(widget.id);
-		},
-	}], ev);
+	os.contextMenu(
+		[
+			{
+				type: "label",
+				text: i18n.t(`_widgets.${widget.name}`),
+			},
+			{
+				icon: "ph-gear-six ph-bold ph-lg",
+				text: i18n.ts.settings,
+				action: () => {
+					configWidget(widget.id);
+				},
+			},
+		],
+		ev
+	);
 }
 </script>
 
@@ -124,7 +181,8 @@ function onContextmenu(widget: Widget, ev: MouseEvent) {
 		}
 	}
 
-	> .widget, .customize-container {
+	> .widget,
+	.customize-container {
 		contain: content;
 		margin: var(--margin) 0;
 
diff --git a/packages/client/src/components/MkWindow.vue b/packages/client/src/components/MkWindow.vue
index 6d43b0dc06..5aa3adef21 100644
--- a/packages/client/src/components/MkWindow.vue
+++ b/packages/client/src/components/MkWindow.vue
@@ -1,107 +1,190 @@
 <template>
-<transition :name="$store.state.animation ? 'window' : ''" appear @after-leave="$emit('closed')">
-	<div v-if="showing" ref="rootEl" class="ebkgocck" :class="{ maximized }">
-		<div class="body _shadow _narrow_" @mousedown="onBodyMousedown" @keydown="onKeydown">
-			<div class="header" :class="{ mini }" @contextmenu.prevent.stop="onContextmenu">
-				<span class="left">
-					<button v-for="button in buttonsLeft" v-tooltip="button.title" class="button _button" :class="{ highlighted: button.highlighted }" @click="button.onClick"><i :class="button.icon"></i></button>
-				</span>
-				<span class="title" @mousedown.prevent="onHeaderMousedown" @touchstart.prevent="onHeaderMousedown">
-					<slot name="header"></slot>
-				</span>
-				<span class="right">
-					<button v-for="button in buttonsRight" v-tooltip="button.title" class="button _button" :class="{ highlighted: button.highlighted }" @click="button.onClick"><i :class="button.icon"></i></button>
-					<button v-if="canResize && maximized" class="button _button" @click="unMaximize()"><i class="ph-copy ph-bold ph-lg"></i></button>
-					<button v-else-if="canResize && !maximized" class="button _button" @click="maximize()"><i class="ph-browser ph-bold ph-lg"></i></button>
-					<button v-if="closeButton" class="button _button" @click="close()"><i class="ph-x ph-bold ph-lg"></i></button>
-				</span>
-			</div>
-			<div class="body">
-				<slot></slot>
+	<transition
+		:name="$store.state.animation ? 'window' : ''"
+		appear
+		@after-leave="$emit('closed')"
+	>
+		<div
+			v-if="showing"
+			ref="rootEl"
+			class="ebkgocck"
+			:class="{ maximized }"
+		>
+			<div
+				class="body _shadow _narrow_"
+				@mousedown="onBodyMousedown"
+				@keydown="onKeydown"
+			>
+				<div
+					class="header"
+					:class="{ mini }"
+					@contextmenu.prevent.stop="onContextmenu"
+				>
+					<span class="left">
+						<button
+							v-for="button in buttonsLeft"
+							v-tooltip="button.title"
+							class="button _button"
+							:class="{ highlighted: button.highlighted }"
+							@click="button.onClick"
+						>
+							<i :class="button.icon"></i>
+						</button>
+					</span>
+					<span
+						class="title"
+						@mousedown.prevent="onHeaderMousedown"
+						@touchstart.prevent="onHeaderMousedown"
+					>
+						<slot name="header"></slot>
+					</span>
+					<span class="right">
+						<button
+							v-for="button in buttonsRight"
+							v-tooltip="button.title"
+							class="button _button"
+							:class="{ highlighted: button.highlighted }"
+							@click="button.onClick"
+						>
+							<i :class="button.icon"></i>
+						</button>
+						<button
+							v-if="canResize && maximized"
+							class="button _button"
+							@click="unMaximize()"
+						>
+							<i class="ph-copy ph-bold ph-lg"></i>
+						</button>
+						<button
+							v-else-if="canResize && !maximized"
+							class="button _button"
+							@click="maximize()"
+						>
+							<i class="ph-browser ph-bold ph-lg"></i>
+						</button>
+						<button
+							v-if="closeButton"
+							class="button _button"
+							@click="close()"
+						>
+							<i class="ph-x ph-bold ph-lg"></i>
+						</button>
+					</span>
+				</div>
+				<div class="body">
+					<slot></slot>
+				</div>
 			</div>
+			<template v-if="canResize">
+				<div
+					class="handle top"
+					@mousedown.prevent="onTopHandleMousedown"
+				></div>
+				<div
+					class="handle right"
+					@mousedown.prevent="onRightHandleMousedown"
+				></div>
+				<div
+					class="handle bottom"
+					@mousedown.prevent="onBottomHandleMousedown"
+				></div>
+				<div
+					class="handle left"
+					@mousedown.prevent="onLeftHandleMousedown"
+				></div>
+				<div
+					class="handle top-left"
+					@mousedown.prevent="onTopLeftHandleMousedown"
+				></div>
+				<div
+					class="handle top-right"
+					@mousedown.prevent="onTopRightHandleMousedown"
+				></div>
+				<div
+					class="handle bottom-right"
+					@mousedown.prevent="onBottomRightHandleMousedown"
+				></div>
+				<div
+					class="handle bottom-left"
+					@mousedown.prevent="onBottomLeftHandleMousedown"
+				></div>
+			</template>
 		</div>
-		<template v-if="canResize">
-			<div class="handle top" @mousedown.prevent="onTopHandleMousedown"></div>
-			<div class="handle right" @mousedown.prevent="onRightHandleMousedown"></div>
-			<div class="handle bottom" @mousedown.prevent="onBottomHandleMousedown"></div>
-			<div class="handle left" @mousedown.prevent="onLeftHandleMousedown"></div>
-			<div class="handle top-left" @mousedown.prevent="onTopLeftHandleMousedown"></div>
-			<div class="handle top-right" @mousedown.prevent="onTopRightHandleMousedown"></div>
-			<div class="handle bottom-right" @mousedown.prevent="onBottomRightHandleMousedown"></div>
-			<div class="handle bottom-left" @mousedown.prevent="onBottomLeftHandleMousedown"></div>
-		</template>
-	</div>
-</transition>
+	</transition>
 </template>
 
 <script lang="ts" setup>
-import { onBeforeUnmount, onMounted, provide } from 'vue';
-import contains from '@/scripts/contains';
-import * as os from '@/os';
-import { MenuItem } from '@/types/menu';
+import { onBeforeUnmount, onMounted, provide } from "vue";
+import contains from "@/scripts/contains";
+import * as os from "@/os";
+import { MenuItem } from "@/types/menu";
 
 const minHeight = 50;
 const minWidth = 250;
 
 function dragListen(fn: (ev: MouseEvent) => void) {
-	window.addEventListener('mousemove', fn);
-	window.addEventListener('touchmove', fn);
-	window.addEventListener('mouseleave', dragClear.bind(null, fn));
-	window.addEventListener('mouseup', dragClear.bind(null, fn));
-	window.addEventListener('touchend', dragClear.bind(null, fn));
+	window.addEventListener("mousemove", fn);
+	window.addEventListener("touchmove", fn);
+	window.addEventListener("mouseleave", dragClear.bind(null, fn));
+	window.addEventListener("mouseup", dragClear.bind(null, fn));
+	window.addEventListener("touchend", dragClear.bind(null, fn));
 }
 
 function dragClear(fn) {
-	window.removeEventListener('mousemove', fn);
-	window.removeEventListener('touchmove', fn);
-	window.removeEventListener('mouseleave', dragClear);
-	window.removeEventListener('mouseup', dragClear);
-	window.removeEventListener('touchend', dragClear);
+	window.removeEventListener("mousemove", fn);
+	window.removeEventListener("touchmove", fn);
+	window.removeEventListener("mouseleave", dragClear);
+	window.removeEventListener("mouseup", dragClear);
+	window.removeEventListener("touchend", dragClear);
 }
 
-const props = withDefaults(defineProps<{
-	initialWidth?: number;
-	initialHeight?: number | null;
-	canResize?: boolean;
-	closeButton?: boolean;
-	mini?: boolean;
-	front?: boolean;
-	contextmenu?: MenuItem[] | null;
-	buttonsLeft?: any[];
-	buttonsRight?: any[];
-}>(), {
-	initialWidth: 400,
-	initialHeight: null,
-	canResize: false,
-	closeButton: true,
-	mini: false,
-	front: false,
-	contextmenu: null,
-	buttonsLeft: () => [],
-	buttonsRight: () => [],
-});
+const props = withDefaults(
+	defineProps<{
+		initialWidth?: number;
+		initialHeight?: number | null;
+		canResize?: boolean;
+		closeButton?: boolean;
+		mini?: boolean;
+		front?: boolean;
+		contextmenu?: MenuItem[] | null;
+		buttonsLeft?: any[];
+		buttonsRight?: any[];
+	}>(),
+	{
+		initialWidth: 400,
+		initialHeight: null,
+		canResize: false,
+		closeButton: true,
+		mini: false,
+		front: false,
+		contextmenu: null,
+		buttonsLeft: () => [],
+		buttonsRight: () => [],
+	}
+);
 
 const emit = defineEmits<{
-	(ev: 'closed'): void;
+	(ev: "closed"): void;
 }>();
 
-provide('inWindow', true);
+provide("inWindow", true);
 
 let rootEl = $ref<HTMLElement | null>();
 let showing = $ref(true);
 let beforeClickedAt = 0;
 let maximized = $ref(false);
-let unMaximizedTop = '';
-let unMaximizedLeft = '';
-let unMaximizedWidth = '';
-let unMaximizedHeight = '';
+let unMaximizedTop = "";
+let unMaximizedLeft = "";
+let unMaximizedWidth = "";
+let unMaximizedHeight = "";
 
 function close() {
 	showing = false;
 }
 
 function onKeydown(evt) {
-	if (evt.which === 27) { // Esc
+	if (evt.which === 27) {
+		// Esc
 		evt.preventDefault();
 		evt.stopPropagation();
 		close();
@@ -117,7 +200,7 @@ function onContextmenu(ev: MouseEvent) {
 // 最前面へ移動
 function top() {
 	if (rootEl) {
-		rootEl.style.zIndex = os.claimZIndex(props.front ? 'middle' : 'low');
+		rootEl.style.zIndex = os.claimZIndex(props.front ? "middle" : "low");
 	}
 }
 
@@ -127,10 +210,10 @@ function maximize() {
 	unMaximizedLeft = rootEl.style.left;
 	unMaximizedWidth = rootEl.style.width;
 	unMaximizedHeight = rootEl.style.height;
-	rootEl.style.top = '0';
-	rootEl.style.left = '0';
-	rootEl.style.width = '100%';
-	rootEl.style.height = '100%';
+	rootEl.style.top = "0";
+	rootEl.style.left = "0";
+	rootEl.style.width = "100%";
+	rootEl.style.height = "100%";
 }
 
 function unMaximize() {
@@ -176,9 +259,17 @@ function onHeaderMousedown(evt: MouseEvent) {
 
 	const position = main.getBoundingClientRect();
 
-	const clickX = evt.touches && evt.touches.length > 0 ? evt.touches[0].clientX : evt.clientX;
-	const clickY = evt.touches && evt.touches.length > 0 ? evt.touches[0].clientY : evt.clientY;
-	const moveBaseX = beforeMaximized ? parseInt(unMaximizedWidth, 10) / 2 : clickX - position.left; // TODO: parseIntやめる
+	const clickX =
+		evt.touches && evt.touches.length > 0
+			? evt.touches[0].clientX
+			: evt.clientX;
+	const clickY =
+		evt.touches && evt.touches.length > 0
+			? evt.touches[0].clientY
+			: evt.clientY;
+	const moveBaseX = beforeMaximized
+		? parseInt(unMaximizedWidth, 10) / 2
+		: clickX - position.left; // TODO: parseIntやめる
 	const moveBaseY = beforeMaximized ? 20 : clickY - position.top;
 	const browserWidth = window.innerWidth;
 	const browserHeight = window.innerHeight;
@@ -190,7 +281,8 @@ function onHeaderMousedown(evt: MouseEvent) {
 		let moveTop = y - moveBaseY;
 
 		// 下はみ出し
-		if (moveTop + windowHeight > browserHeight) moveTop = browserHeight - windowHeight;
+		if (moveTop + windowHeight > browserHeight)
+			moveTop = browserHeight - windowHeight;
 
 		// 左はみ出し
 		if (moveLeft < 0) moveLeft = 0;
@@ -199,10 +291,11 @@ function onHeaderMousedown(evt: MouseEvent) {
 		if (moveTop < 0) moveTop = 0;
 
 		// 右はみ出し
-		if (moveLeft + windowWidth > browserWidth) moveLeft = browserWidth - windowWidth;
+		if (moveLeft + windowWidth > browserWidth)
+			moveLeft = browserWidth - windowWidth;
 
-		rootEl.style.left = moveLeft + 'px';
-		rootEl.style.top = moveTop + 'px';
+		rootEl.style.left = moveLeft + "px";
+		rootEl.style.top = moveTop + "px";
 	}
 
 	if (beforeMaximized) {
@@ -210,9 +303,15 @@ function onHeaderMousedown(evt: MouseEvent) {
 	}
 
 	// 動かした時
-	dragListen(me => {
-		const x = me.touches && me.touches.length > 0 ? me.touches[0].clientX : me.clientX;
-		const y = me.touches && me.touches.length > 0 ? me.touches[0].clientY : me.clientY;
+	dragListen((me) => {
+		const x =
+			me.touches && me.touches.length > 0
+				? me.touches[0].clientX
+				: me.clientX;
+		const y =
+			me.touches && me.touches.length > 0
+				? me.touches[0].clientY
+				: me.clientY;
 
 		move(x, y);
 	});
@@ -223,21 +322,23 @@ function onTopHandleMousedown(evt) {
 	const main = rootEl;
 
 	const base = evt.clientY;
-	const height = parseInt(getComputedStyle(main, '').height, 10);
-	const top = parseInt(getComputedStyle(main, '').top, 10);
+	const height = parseInt(getComputedStyle(main, "").height, 10);
+	const top = parseInt(getComputedStyle(main, "").top, 10);
 
 	// 動かした時
-	dragListen(me => {
+	dragListen((me) => {
 		const move = me.clientY - base;
 		if (top + move > 0) {
 			if (height + -move > minHeight) {
 				applyTransformHeight(height + -move);
 				applyTransformTop(top + move);
-			} else { // 最小の高さより小さくなろうとした時
+			} else {
+				// 最小の高さより小さくなろうとした時
 				applyTransformHeight(minHeight);
 				applyTransformTop(top + (height - minHeight));
 			}
-		} else { // 上のはみ出し時
+		} else {
+			// 上のはみ出し時
 			applyTransformHeight(top + height);
 			applyTransformTop(0);
 		}
@@ -249,20 +350,22 @@ function onRightHandleMousedown(evt) {
 	const main = rootEl;
 
 	const base = evt.clientX;
-	const width = parseInt(getComputedStyle(main, '').width, 10);
-	const left = parseInt(getComputedStyle(main, '').left, 10);
+	const width = parseInt(getComputedStyle(main, "").width, 10);
+	const left = parseInt(getComputedStyle(main, "").left, 10);
 	const browserWidth = window.innerWidth;
 
 	// 動かした時
-	dragListen(me => {
+	dragListen((me) => {
 		const move = me.clientX - base;
 		if (left + width + move < browserWidth) {
 			if (width + move > minWidth) {
 				applyTransformWidth(width + move);
-			} else { // 最小の幅より小さくなろうとした時
+			} else {
+				// 最小の幅より小さくなろうとした時
 				applyTransformWidth(minWidth);
 			}
-		} else { // 右のはみ出し時
+		} else {
+			// 右のはみ出し時
 			applyTransformWidth(browserWidth - left);
 		}
 	});
@@ -273,20 +376,22 @@ function onBottomHandleMousedown(evt) {
 	const main = rootEl;
 
 	const base = evt.clientY;
-	const height = parseInt(getComputedStyle(main, '').height, 10);
-	const top = parseInt(getComputedStyle(main, '').top, 10);
+	const height = parseInt(getComputedStyle(main, "").height, 10);
+	const top = parseInt(getComputedStyle(main, "").top, 10);
 	const browserHeight = window.innerHeight;
 
 	// 動かした時
-	dragListen(me => {
+	dragListen((me) => {
 		const move = me.clientY - base;
 		if (top + height + move < browserHeight) {
 			if (height + move > minHeight) {
 				applyTransformHeight(height + move);
-			} else { // 最小の高さより小さくなろうとした時
+			} else {
+				// 最小の高さより小さくなろうとした時
 				applyTransformHeight(minHeight);
 			}
-		} else { // 下のはみ出し時
+		} else {
+			// 下のはみ出し時
 			applyTransformHeight(browserHeight - top);
 		}
 	});
@@ -297,21 +402,23 @@ function onLeftHandleMousedown(evt) {
 	const main = rootEl;
 
 	const base = evt.clientX;
-	const width = parseInt(getComputedStyle(main, '').width, 10);
-	const left = parseInt(getComputedStyle(main, '').left, 10);
+	const width = parseInt(getComputedStyle(main, "").width, 10);
+	const left = parseInt(getComputedStyle(main, "").left, 10);
 
 	// 動かした時
-	dragListen(me => {
+	dragListen((me) => {
 		const move = me.clientX - base;
 		if (left + move > 0) {
 			if (width + -move > minWidth) {
 				applyTransformWidth(width + -move);
 				applyTransformLeft(left + move);
-			} else { // 最小の幅より小さくなろうとした時
+			} else {
+				// 最小の幅より小さくなろうとした時
 				applyTransformWidth(minWidth);
 				applyTransformLeft(left + (width - minWidth));
 			}
-		} else { // 左のはみ出し時
+		} else {
+			// 左のはみ出し時
 			applyTransformWidth(left + width);
 			applyTransformLeft(0);
 		}
@@ -345,23 +452,23 @@ function onBottomLeftHandleMousedown(evt) {
 // 高さを適用
 function applyTransformHeight(height) {
 	if (height > window.innerHeight) height = window.innerHeight;
-	rootEl.style.height = height + 'px';
+	rootEl.style.height = height + "px";
 }
 
 // 幅を適用
 function applyTransformWidth(width) {
 	if (width > window.innerWidth) width = window.innerWidth;
-	rootEl.style.width = width + 'px';
+	rootEl.style.width = width + "px";
 }
 
 // Y座標を適用
 function applyTransformTop(top) {
-	rootEl.style.top = top + 'px';
+	rootEl.style.top = top + "px";
 }
 
 // X座標を適用
 function applyTransformLeft(left) {
-	rootEl.style.left = left + 'px';
+	rootEl.style.left = left + "px";
 }
 
 function onBrowserResize() {
@@ -371,27 +478,29 @@ function onBrowserResize() {
 	const browserHeight = window.innerHeight;
 	const windowWidth = main.offsetWidth;
 	const windowHeight = main.offsetHeight;
-	if (position.left < 0) main.style.left = '0'; // 左はみ出し
-	if (position.top + windowHeight > browserHeight) main.style.top = browserHeight - windowHeight + 'px'; // 下はみ出し
-	if (position.left + windowWidth > browserWidth) main.style.left = browserWidth - windowWidth + 'px'; // 右はみ出し
-	if (position.top < 0) main.style.top = '0'; // 上はみ出し
+	if (position.left < 0) main.style.left = "0"; // 左はみ出し
+	if (position.top + windowHeight > browserHeight)
+		main.style.top = browserHeight - windowHeight + "px"; // 下はみ出し
+	if (position.left + windowWidth > browserWidth)
+		main.style.left = browserWidth - windowWidth + "px"; // 右はみ出し
+	if (position.top < 0) main.style.top = "0"; // 上はみ出し
 }
 
 onMounted(() => {
 	if (props.initialWidth) applyTransformWidth(props.initialWidth);
 	if (props.initialHeight) applyTransformHeight(props.initialHeight);
 
-	applyTransformTop((window.innerHeight / 2) - (rootEl.offsetHeight / 2));
-	applyTransformLeft((window.innerWidth / 2) - (rootEl.offsetWidth / 2));
+	applyTransformTop(window.innerHeight / 2 - rootEl.offsetHeight / 2);
+	applyTransformLeft(window.innerWidth / 2 - rootEl.offsetWidth / 2);
 
 	// 他のウィンドウ内のボタンなどを押してこのウィンドウが開かれた場合、親が最前面になろうとするのでそれに隠されないようにする
 	top();
 
-	window.addEventListener('resize', onBrowserResize);
+	window.addEventListener("resize", onBrowserResize);
 });
 
 onBeforeUnmount(() => {
-	window.removeEventListener('resize', onBrowserResize);
+	window.removeEventListener("resize", onBrowserResize);
 });
 
 defineExpose({
@@ -400,10 +509,12 @@ defineExpose({
 </script>
 
 <style lang="scss" scoped>
-.window-enter-active, .window-leave-active {
+.window-enter-active,
+.window-leave-active {
 	transition: opacity 0.2s, transform 0.2s !important;
 }
-.window-enter-from, .window-leave-to {
+.window-enter-from,
+.window-leave-to {
 	pointer-events: none;
 	opacity: 0;
 	transform: scale(0.9);
@@ -443,7 +554,8 @@ defineExpose({
 			font-size: 95%;
 			font-weight: bold;
 
-			> .left, > .right {
+			> .left,
+			> .right {
 				> .button {
 					height: var(--height);
 					width: var(--height);
diff --git a/packages/client/src/components/form/checkbox.vue b/packages/client/src/components/form/checkbox.vue
index a50b172465..a4d9716bbb 100644
--- a/packages/client/src/components/form/checkbox.vue
+++ b/packages/client/src/components/form/checkbox.vue
@@ -1,30 +1,33 @@
 <template>
-<div
-	class="ziffeoms"
-	:class="{ disabled, checked }"
->
-	<input
-		ref="input"
-		type="checkbox"
-		:disabled="disabled"
-		@keydown.enter="toggle"
-	>
-	<span ref="button" v-adaptive-border v-tooltip="checked ? i18n.ts.itsOn : i18n.ts.itsOff" class="button" @click.prevent="toggle">
-		<i class="check ph-check ph-bold ph-lg"></i>
-	</span>
-	<span class="label">
-		<!-- TODO: 無名slotの方は廃止 -->
-		<span @click="toggle"><slot name="label"></slot><slot></slot></span>
-		<p class="caption"><slot name="caption"></slot></p>
-	</span>
-</div>
+	<div class="ziffeoms" :class="{ disabled, checked }">
+		<input
+			ref="input"
+			type="checkbox"
+			:disabled="disabled"
+			@keydown.enter="toggle"
+		/>
+		<span
+			ref="button"
+			v-adaptive-border
+			v-tooltip="checked ? i18n.ts.itsOn : i18n.ts.itsOff"
+			class="button"
+			@click.prevent="toggle"
+		>
+			<i class="check ph-check ph-bold ph-lg"></i>
+		</span>
+		<span class="label">
+			<!-- TODO: 無名slotの方は廃止 -->
+			<span @click="toggle"><slot name="label"></slot><slot></slot></span>
+			<p class="caption"><slot name="caption"></slot></p>
+		</span>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { toRefs, Ref } from 'vue';
-import * as os from '@/os';
-import Ripple from '@/components/MkRipple.vue';
-import { i18n } from '@/i18n';
+import { toRefs, Ref } from "vue";
+import * as os from "@/os";
+import Ripple from "@/components/MkRipple.vue";
+import { i18n } from "@/i18n";
 
 const props = defineProps<{
 	modelValue: boolean | Ref<boolean>;
@@ -32,20 +35,20 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-	(ev: 'update:modelValue', v: boolean): void;
+	(ev: "update:modelValue", v: boolean): void;
 }>();
 
 let button = $ref<HTMLElement>();
 const checked = toRefs(props).modelValue;
 const toggle = () => {
 	if (props.disabled) return;
-	emit('update:modelValue', !checked.value);
+	emit("update:modelValue", !checked.value);
 
 	if (!checked.value) {
 		const rect = button.getBoundingClientRect();
-		const x = rect.left + (button.offsetWidth / 2);
-		const y = rect.top + (button.offsetHeight / 2);
-		os.popup(Ripple, { x, y, particle: false }, {}, 'end');
+		const x = rect.left + button.offsetWidth / 2;
+		const y = rect.top + button.offsetHeight / 2;
+		os.popup(Ripple, { x, y, particle: false }, {}, "end");
 	}
 };
 </script>
diff --git a/packages/client/src/components/form/folder.vue b/packages/client/src/components/form/folder.vue
index 1a179879b4..8868f57845 100644
--- a/packages/client/src/components/form/folder.vue
+++ b/packages/client/src/components/form/folder.vue
@@ -1,30 +1,33 @@
 <template>
-<div class="dwzlatin" :class="{ opened }">
-	<div class="header _button" @click="toggle">
-		<span class="icon"><slot name="icon"></slot></span>
-		<span class="text"><slot name="label"></slot></span>
-		<span class="right">
-			<span class="text"><slot name="suffix"></slot></span>
-			<i v-if="opened" class="ph-caret-up ph-bold ph-lg icon"></i>
-			<i v-else class="ph-caret-down ph-bold ph-lg icon"></i>
-		</span>
-	</div>
-	<KeepAlive>
-		<div v-if="openedAtLeastOnce" v-show="opened" class="body">
-			<MkSpacer :margin-min="14" :margin-max="22">
-				<slot></slot>
-			</MkSpacer>
+	<div class="dwzlatin" :class="{ opened }">
+		<div class="header _button" @click="toggle">
+			<span class="icon"><slot name="icon"></slot></span>
+			<span class="text"><slot name="label"></slot></span>
+			<span class="right">
+				<span class="text"><slot name="suffix"></slot></span>
+				<i v-if="opened" class="ph-caret-up ph-bold ph-lg icon"></i>
+				<i v-else class="ph-caret-down ph-bold ph-lg icon"></i>
+			</span>
 		</div>
-	</KeepAlive>
-</div>
+		<KeepAlive>
+			<div v-if="openedAtLeastOnce" v-show="opened" class="body">
+				<MkSpacer :margin-min="14" :margin-max="22">
+					<slot></slot>
+				</MkSpacer>
+			</div>
+		</KeepAlive>
+	</div>
 </template>
 
 <script lang="ts" setup>
-const props = withDefaults(defineProps<{
-	defaultOpen: boolean;
-}>(), {
-  defaultOpen: false,
-});
+const props = withDefaults(
+	defineProps<{
+		defaultOpen: boolean;
+	}>(),
+	{
+		defaultOpen: false,
+	}
+);
 
 let opened: boolean = $ref(props.defaultOpen);
 let openedAtLeastOnce: boolean = $ref(props.defaultOpen);
diff --git a/packages/client/src/components/form/input.vue b/packages/client/src/components/form/input.vue
index ee53711759..1304464e4e 100644
--- a/packages/client/src/components/form/input.vue
+++ b/packages/client/src/components/form/input.vue
@@ -1,48 +1,70 @@
 <template>
-<div class="matxzzsk">
-	<div class="label" @click="focus"><slot name="label"></slot></div>
-	<div class="input" :class="{ inline, disabled, focused }">
-		<div ref="prefixEl" class="prefix"><slot name="prefix"></slot></div>
-		<input
-			ref="inputEl"
-			v-model="v"
-			v-adaptive-border
-			:type="type"
-			:disabled="disabled"
-			:required="required"
-			:readonly="readonly"
-			:placeholder="placeholder"
-			:pattern="pattern"
-			:autocomplete="autocomplete"
-			:spellcheck="spellcheck"
-			:step="step"
-			:list="id"
-			@focus="focused = true"
-			@blur="focused = false"
-			@keydown="onKeydown($event)"
-			@input="onInput"
-		>
-		<datalist v-if="datalist" :id="id">
-			<option v-for="data in datalist" :value="data"/>
-		</datalist>
-		<div ref="suffixEl" class="suffix"><slot name="suffix"></slot></div>
-	</div>
-	<div class="caption"><slot name="caption"></slot></div>
+	<div class="matxzzsk">
+		<div class="label" @click="focus"><slot name="label"></slot></div>
+		<div class="input" :class="{ inline, disabled, focused }">
+			<div ref="prefixEl" class="prefix"><slot name="prefix"></slot></div>
+			<input
+				ref="inputEl"
+				v-model="v"
+				v-adaptive-border
+				:type="type"
+				:disabled="disabled"
+				:required="required"
+				:readonly="readonly"
+				:placeholder="placeholder"
+				:pattern="pattern"
+				:autocomplete="autocomplete"
+				:spellcheck="spellcheck"
+				:step="step"
+				:list="id"
+				@focus="focused = true"
+				@blur="focused = false"
+				@keydown="onKeydown($event)"
+				@input="onInput"
+			/>
+			<datalist v-if="datalist" :id="id">
+				<option v-for="data in datalist" :value="data" />
+			</datalist>
+			<div ref="suffixEl" class="suffix"><slot name="suffix"></slot></div>
+		</div>
+		<div class="caption"><slot name="caption"></slot></div>
 
-	<MkButton v-if="manualSave && changed" primary class="save" @click="updated"><i class="ph-check ph-bold ph-lg"></i> {{ i18n.ts.save }}</MkButton>
-</div>
+		<MkButton
+			v-if="manualSave && changed"
+			primary
+			class="save"
+			@click="updated"
+			><i class="ph-check ph-bold ph-lg"></i> {{ i18n.ts.save }}</MkButton
+		>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, nextTick, ref, watch, computed, toRefs } from 'vue';
-import { debounce } from 'throttle-debounce';
-import MkButton from '@/components/MkButton.vue';
-import { useInterval } from '@/scripts/use-interval';
-import { i18n } from '@/i18n';
+import {
+	onMounted,
+	onUnmounted,
+	nextTick,
+	ref,
+	watch,
+	computed,
+	toRefs,
+} from "vue";
+import { debounce } from "throttle-debounce";
+import MkButton from "@/components/MkButton.vue";
+import { useInterval } from "@/scripts/use-interval";
+import { i18n } from "@/i18n";
 
 const props = defineProps<{
 	modelValue: string | number;
-	type?: 'text' | 'number' | 'password' | 'email' | 'url' | 'date' | 'time' | 'search';
+	type?:
+		| "text"
+		| "number"
+		| "password"
+		| "email"
+		| "url"
+		| "date"
+		| "time"
+		| "search";
 	required?: boolean;
 	readonly?: boolean;
 	disabled?: boolean;
@@ -61,10 +83,10 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-	(ev: 'change', _ev: KeyboardEvent): void;
-	(ev: 'keydown', _ev: KeyboardEvent): void;
-	(ev: 'enter'): void;
-	(ev: 'update:modelValue', value: string | number): void;
+	(ev: "change", _ev: KeyboardEvent): void;
+	(ev: "keydown", _ev: KeyboardEvent): void;
+	(ev: "enter"): void;
+	(ev: "update:modelValue", value: string | number): void;
 }>();
 
 const { modelValue, type, autofocus } = toRefs(props);
@@ -73,44 +95,41 @@ const id = Math.random().toString(); // TODO: uuid?
 const focused = ref(false);
 const changed = ref(false);
 const invalid = ref(false);
-const filled = computed(() => v.value !== '' && v.value != null);
+const filled = computed(() => v.value !== "" && v.value != null);
 const inputEl = ref<HTMLElement>();
 const prefixEl = ref<HTMLElement>();
 const suffixEl = ref<HTMLElement>();
-const height =
-	props.small ? 36 :
-	props.large ? 40 :
-	38;
+const height = props.small ? 36 : props.large ? 40 : 38;
 
 const focus = () => inputEl.value.focus();
 const onInput = (ev: KeyboardEvent) => {
 	changed.value = true;
-	emit('change', ev);
+	emit("change", ev);
 };
 const onKeydown = (ev: KeyboardEvent) => {
-	emit('keydown', ev);
+	emit("keydown", ev);
 
-	if (ev.code === 'Enter') {
-		emit('enter');
+	if (ev.code === "Enter") {
+		emit("enter");
 	}
 };
 
 const updated = () => {
 	changed.value = false;
-	if (type.value === 'number') {
-		emit('update:modelValue', parseFloat(v.value));
+	if (type.value === "number") {
+		emit("update:modelValue", parseFloat(v.value));
 	} else {
-		emit('update:modelValue', v.value);
+		emit("update:modelValue", v.value);
 	}
 };
 
 const debouncedUpdated = debounce(1000, updated);
 
-watch(modelValue, newValue => {
+watch(modelValue, (newValue) => {
 	v.value = newValue;
 });
 
-watch(v, newValue => {
+watch(v, (newValue) => {
 	if (!props.manualSave) {
 		if (props.debounce) {
 			debouncedUpdated();
@@ -124,21 +143,27 @@ watch(v, newValue => {
 
 // このコンポーネントが作成された時、非表示状態である場合がある
 // 非表示状態だと要素の幅などは0になってしまうので、定期的に計算する
-useInterval(() => {
-	if (prefixEl.value) {
-		if (prefixEl.value.offsetWidth) {
-			inputEl.value.style.paddingLeft = prefixEl.value.offsetWidth + 'px';
+useInterval(
+	() => {
+		if (prefixEl.value) {
+			if (prefixEl.value.offsetWidth) {
+				inputEl.value.style.paddingLeft =
+					prefixEl.value.offsetWidth + "px";
+			}
 		}
-	}
-	if (suffixEl.value) {
-		if (suffixEl.value.offsetWidth) {
-			inputEl.value.style.paddingRight = suffixEl.value.offsetWidth + 'px';
+		if (suffixEl.value) {
+			if (suffixEl.value.offsetWidth) {
+				inputEl.value.style.paddingRight =
+					suffixEl.value.offsetWidth + "px";
+			}
 		}
+	},
+	100,
+	{
+		immediate: true,
+		afterMounted: true,
 	}
-}, 100, {
-	immediate: true,
-	afterMounted: true,
-});
+);
 
 onMounted(() => {
 	nextTick(() => {
@@ -250,7 +275,8 @@ onMounted(() => {
 		&.disabled {
 			opacity: 0.7;
 
-			&, * {
+			&,
+			* {
 				cursor: not-allowed !important;
 			}
 		}
diff --git a/packages/client/src/components/form/link.vue b/packages/client/src/components/form/link.vue
index de675d08be..01acb2951b 100644
--- a/packages/client/src/components/form/link.vue
+++ b/packages/client/src/components/form/link.vue
@@ -1,32 +1,38 @@
 <template>
-<div class="ffcbddfc" :class="{ inline }">
-	<a v-if="external" class="main _button" :href="to" target="_blank">
-		<span class="icon"><slot name="icon"></slot></span>
-		<span class="text"><slot></slot></span>
-		<span class="right">
-			<span class="text"><slot name="suffix"></slot></span>
-			<i class="ph-arrow-square-out ph-bold ph-lg icon"></i>
-		</span>
-	</a>
-	<MkA v-else class="main _button" :class="{ active }" :to="to" :behavior="behavior">
-		<span class="icon"><slot name="icon"></slot></span>
-		<span class="text"><slot></slot></span>
-		<span class="right">
-			<span class="text"><slot name="suffix"></slot></span>
-			<i class="ph-caret-right ph-bold ph-lg icon"></i>
-		</span>
-	</MkA>
-</div>
+	<div class="ffcbddfc" :class="{ inline }">
+		<a v-if="external" class="main _button" :href="to" target="_blank">
+			<span class="icon"><slot name="icon"></slot></span>
+			<span class="text"><slot></slot></span>
+			<span class="right">
+				<span class="text"><slot name="suffix"></slot></span>
+				<i class="ph-arrow-square-out ph-bold ph-lg icon"></i>
+			</span>
+		</a>
+		<MkA
+			v-else
+			class="main _button"
+			:class="{ active }"
+			:to="to"
+			:behavior="behavior"
+		>
+			<span class="icon"><slot name="icon"></slot></span>
+			<span class="text"><slot></slot></span>
+			<span class="right">
+				<span class="text"><slot name="suffix"></slot></span>
+				<i class="ph-caret-right ph-bold ph-lg icon"></i>
+			</span>
+		</MkA>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
+import {} from "vue";
 
 const props = defineProps<{
 	to: string;
 	active?: boolean;
 	external?: boolean;
-	behavior?: null | 'window' | 'browser' | 'modalWindow';
+	behavior?: null | "window" | "browser" | "modalWindow";
 	inline?: boolean;
 }>();
 </script>
diff --git a/packages/client/src/components/form/radio.vue b/packages/client/src/components/form/radio.vue
index b36f7e9fdc..493b2d0105 100644
--- a/packages/client/src/components/form/radio.vue
+++ b/packages/client/src/components/form/radio.vue
@@ -1,25 +1,22 @@
 <template>
-<div
-	v-adaptive-border
-	class="novjtctn"
-	:class="{ disabled, checked }"
-	:aria-checked="checked"
-	:aria-disabled="disabled"
-	@click="toggle"
->
-	<input
-		type="radio"
-		:disabled="disabled"
+	<div
+		v-adaptive-border
+		class="novjtctn"
+		:class="{ disabled, checked }"
+		:aria-checked="checked"
+		:aria-disabled="disabled"
+		@click="toggle"
 	>
-	<span class="button">
-		<span></span>
-	</span>
-	<span class="label"><slot></slot></span>
-</div>
+		<input type="radio" :disabled="disabled" />
+		<span class="button">
+			<span></span>
+		</span>
+		<span class="label"><slot></slot></span>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
+import {} from "vue";
 
 const props = defineProps<{
 	modelValue: any;
@@ -28,14 +25,14 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-	(ev: 'update:modelValue', value: any): void;
+	(ev: "update:modelValue", value: any): void;
 }>();
 
 let checked = $computed(() => props.modelValue === props.value);
 
 function toggle(): void {
 	if (props.disabled) return;
-	emit('update:modelValue', props.value);
+	emit("update:modelValue", props.value);
 }
 </script>
 
@@ -60,7 +57,8 @@ function toggle(): void {
 	&.disabled {
 		opacity: 0.6;
 
-		&, * {
+		&,
+		* {
 			cursor: not-allowed !important;
 		}
 	}
@@ -74,7 +72,8 @@ function toggle(): void {
 		border-color: var(--accentedBg) !important;
 		color: var(--accent);
 
-		&, * {
+		&,
+		* {
 			cursor: default !important;
 		}
 
@@ -107,7 +106,7 @@ function toggle(): void {
 		transition: inherit;
 
 		&:after {
-			content: '';
+			content: "";
 			display: block;
 			position: absolute;
 			top: 3px;
diff --git a/packages/client/src/components/form/radios.vue b/packages/client/src/components/form/radios.vue
index bde4a8fb00..5c98edce38 100644
--- a/packages/client/src/components/form/radios.vue
+++ b/packages/client/src/components/form/radios.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
-import { defineComponent, h } from 'vue';
-import MkRadio from './radio.vue';
+import { defineComponent, h } from "vue";
+import MkRadio from "./radio.vue";
 
 export default defineComponent({
 	components: {
@@ -18,7 +18,7 @@ export default defineComponent({
 	},
 	watch: {
 		value() {
-			this.$emit('update:modelValue', this.value);
+			this.$emit("update:modelValue", this.value);
 		},
 	},
 	render() {
@@ -27,27 +27,58 @@ export default defineComponent({
 		const caption = this.$slots.caption && this.$slots.caption();
 
 		// なぜかFragmentになることがあるため
-		if (options.length === 1 && options[0].props == null) options = options[0].children;
+		if (options.length === 1 && options[0].props == null)
+			options = options[0].children;
 
-		return h('div', {
-			class: 'novjtcto',
-		}, [
-			...(label ? [h('div', {
-				class: 'label',
-			}, [label])] : []),
-			h('div', {
-				class: 'body',
-			}, options.map(option => h(MkRadio, {
-				key: option.key,
-				value: option.props.value,
-				modelValue: this.value,
-				'onUpdate:modelValue': value => this.value = value,
-			}, option.children)),
-			),
-			...(caption ? [h('div', {
-				class: 'caption',
-			}, [caption])] : []),
-		]);
+		return h(
+			"div",
+			{
+				class: "novjtcto",
+			},
+			[
+				...(label
+					? [
+							h(
+								"div",
+								{
+									class: "label",
+								},
+								[label]
+							),
+					  ]
+					: []),
+				h(
+					"div",
+					{
+						class: "body",
+					},
+					options.map((option) =>
+						h(
+							MkRadio,
+							{
+								key: option.key,
+								value: option.props.value,
+								modelValue: this.value,
+								"onUpdate:modelValue": (value) =>
+									(this.value = value),
+							},
+							option.children
+						)
+					)
+				),
+				...(caption
+					? [
+							h(
+								"div",
+								{
+									class: "caption",
+								},
+								[caption]
+							),
+					  ]
+					: []),
+			]
+		);
 	},
 });
 </script>
@@ -66,8 +97,8 @@ export default defineComponent({
 
 	> .body {
 		display: flex;
-    gap: 12px;
-    flex-wrap: wrap;
+		gap: 12px;
+		flex-wrap: wrap;
 	}
 
 	> .caption {
diff --git a/packages/client/src/components/form/range.vue b/packages/client/src/components/form/range.vue
index db21c35717..e5ec44f687 100644
--- a/packages/client/src/components/form/range.vue
+++ b/packages/client/src/components/form/range.vue
@@ -1,42 +1,66 @@
 <template>
-<div class="timctyfi" :class="{ disabled, easing }">
-	<div class="label"><slot name="label"></slot></div>
-	<div v-adaptive-border class="body">
-		<div ref="containerEl" class="container">
-			<div class="track">
-				<div class="highlight" :style="{ width: (steppedRawValue * 100) + '%' }"></div>
+	<div class="timctyfi" :class="{ disabled, easing }">
+		<div class="label"><slot name="label"></slot></div>
+		<div v-adaptive-border class="body">
+			<div ref="containerEl" class="container">
+				<div class="track">
+					<div
+						class="highlight"
+						:style="{ width: steppedRawValue * 100 + '%' }"
+					></div>
+				</div>
+				<div v-if="steps && showTicks" class="ticks">
+					<div
+						v-for="i in steps + 1"
+						class="tick"
+						:style="{ left: ((i - 1) / steps) * 100 + '%' }"
+					></div>
+				</div>
+				<div
+					ref="thumbEl"
+					v-tooltip="textConverter(finalValue)"
+					class="thumb"
+					:style="{ left: thumbPosition + 'px' }"
+					@mousedown="onMousedown"
+					@touchstart="onMousedown"
+				></div>
 			</div>
-			<div v-if="steps && showTicks" class="ticks">
-				<div v-for="i in (steps + 1)" class="tick" :style="{ left: (((i - 1) / steps) * 100) + '%' }"></div>
-			</div>
-			<div ref="thumbEl" v-tooltip="textConverter(finalValue)" class="thumb" :style="{ left: thumbPosition + 'px' }" @mousedown="onMousedown" @touchstart="onMousedown"></div>
 		</div>
+		<div class="caption"><slot name="caption"></slot></div>
 	</div>
-	<div class="caption"><slot name="caption"></slot></div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { computed, defineAsyncComponent, onMounted, onUnmounted, ref, watch } from 'vue';
-import * as os from '@/os';
+import {
+	computed,
+	defineAsyncComponent,
+	onMounted,
+	onUnmounted,
+	ref,
+	watch,
+} from "vue";
+import * as os from "@/os";
 
-const props = withDefaults(defineProps<{
-	modelValue: number;
-	disabled?: boolean;
-	min: number;
-	max: number;
-	step?: number;
-	textConverter?: (value: number) => string,
-	showTicks?: boolean;
-	easing?: boolean;
-}>(), {
-	step: 1,
-	textConverter: (v) => v.toString(),
-	easing: false,
-});
+const props = withDefaults(
+	defineProps<{
+		modelValue: number;
+		disabled?: boolean;
+		min: number;
+		max: number;
+		step?: number;
+		textConverter?: (value: number) => string;
+		showTicks?: boolean;
+		easing?: boolean;
+	}>(),
+	{
+		step: 1,
+		textConverter: (v) => v.toString(),
+		easing: false,
+	}
+);
 
 const emit = defineEmits<{
-	(ev: 'update:modelValue', value: number): void;
+	(ev: "update:modelValue", value: number): void;
 }>();
 
 const containerEl = ref<HTMLElement>();
@@ -46,16 +70,18 @@ const rawValue = ref((props.modelValue - props.min) / (props.max - props.min));
 const steppedRawValue = computed(() => {
 	if (props.step) {
 		const step = props.step / (props.max - props.min);
-		return (step * Math.round(rawValue.value / step));
+		return step * Math.round(rawValue.value / step);
 	} else {
 		return rawValue.value;
 	}
 });
 const finalValue = computed(() => {
 	if (Number.isInteger(props.step)) {
-		return Math.round((steppedRawValue.value * (props.max - props.min)) + props.min);
+		return Math.round(
+			steppedRawValue.value * (props.max - props.min) + props.min
+		);
 	} else {
-		return (steppedRawValue.value * (props.max - props.min)) + props.min;
+		return steppedRawValue.value * (props.max - props.min) + props.min;
 	}
 });
 
@@ -68,7 +94,9 @@ const calcThumbPosition = () => {
 	if (containerEl.value == null) {
 		thumbPosition.value = 0;
 	} else {
-		thumbPosition.value = (containerEl.value.offsetWidth - thumbWidth.value) * steppedRawValue.value;
+		thumbPosition.value =
+			(containerEl.value.offsetWidth - thumbWidth.value) *
+			steppedRawValue.value;
 	}
 };
 watch([steppedRawValue, containerEl], calcThumbPosition);
@@ -98,24 +126,44 @@ const onMousedown = (ev: MouseEvent | TouchEvent) => {
 	ev.preventDefault();
 
 	const tooltipShowing = ref(true);
-	os.popup(defineAsyncComponent(() => import('@/components/MkTooltip.vue')), {
-		showing: tooltipShowing,
-		text: computed(() => {
-			return props.textConverter(finalValue.value);
-		}),
-		targetElement: thumbEl,
-	}, {}, 'closed');
+	os.popup(
+		defineAsyncComponent(() => import("@/components/MkTooltip.vue")),
+		{
+			showing: tooltipShowing,
+			text: computed(() => {
+				return props.textConverter(finalValue.value);
+			}),
+			targetElement: thumbEl,
+		},
+		{},
+		"closed"
+	);
 
-	const style = document.createElement('style');
-	style.appendChild(document.createTextNode('* { cursor: grabbing !important; } body * { pointer-events: none !important; }'));
+	const style = document.createElement("style");
+	style.appendChild(
+		document.createTextNode(
+			"* { cursor: grabbing !important; } body * { pointer-events: none !important; }"
+		)
+	);
 	document.head.appendChild(style);
 
 	const onDrag = (ev: MouseEvent | TouchEvent) => {
 		ev.preventDefault();
 		const containerRect = containerEl.value!.getBoundingClientRect();
-		const pointerX = ev.touches && ev.touches.length > 0 ? ev.touches[0].clientX : ev.clientX;
-		const pointerPositionOnContainer = pointerX - (containerRect.left + (thumbWidth.value / 2));
-		rawValue.value = Math.min(1, Math.max(0, pointerPositionOnContainer / (containerEl.value!.offsetWidth - thumbWidth.value)));
+		const pointerX =
+			ev.touches && ev.touches.length > 0
+				? ev.touches[0].clientX
+				: ev.clientX;
+		const pointerPositionOnContainer =
+			pointerX - (containerRect.left + thumbWidth.value / 2);
+		rawValue.value = Math.min(
+			1,
+			Math.max(
+				0,
+				pointerPositionOnContainer /
+					(containerEl.value!.offsetWidth - thumbWidth.value)
+			)
+		);
 	};
 
 	let beforeValue = finalValue.value;
@@ -123,21 +171,21 @@ const onMousedown = (ev: MouseEvent | TouchEvent) => {
 	const onMouseup = () => {
 		document.head.removeChild(style);
 		tooltipShowing.value = false;
-		window.removeEventListener('mousemove', onDrag);
-		window.removeEventListener('touchmove', onDrag);
-		window.removeEventListener('mouseup', onMouseup);
-		window.removeEventListener('touchend', onMouseup);
+		window.removeEventListener("mousemove", onDrag);
+		window.removeEventListener("touchmove", onDrag);
+		window.removeEventListener("mouseup", onMouseup);
+		window.removeEventListener("touchend", onMouseup);
 
 		// 値が変わってたら通知
 		if (beforeValue !== finalValue.value) {
-			emit('update:modelValue', finalValue.value);
+			emit("update:modelValue", finalValue.value);
 		}
 	};
 
-	window.addEventListener('mousemove', onDrag);
-	window.addEventListener('touchmove', onDrag);
-	window.addEventListener('mouseup', onMouseup, { once: true });
-	window.addEventListener('touchend', onMouseup, { once: true });
+	window.addEventListener("mousemove", onDrag);
+	window.addEventListener("touchmove", onDrag);
+	window.addEventListener("mouseup", onMouseup, { once: true });
+	window.addEventListener("touchend", onMouseup, { once: true });
 };
 </script>
 
@@ -219,7 +267,7 @@ const onMousedown = (ev: MouseEvent | TouchEvent) => {
 					bottom: 0;
 					width: $tickWidth;
 					height: 3px;
-					margin-left: - math.div($tickWidth, 2);
+					margin-left: -math.div($tickWidth, 2);
 					background: var(--divider);
 					border-radius: 999px;
 				}
@@ -245,12 +293,12 @@ const onMousedown = (ev: MouseEvent | TouchEvent) => {
 			> .container {
 				> .track {
 					> .highlight {
-						transition: width 0.2s cubic-bezier(0,0,0,1);
+						transition: width 0.2s cubic-bezier(0, 0, 0, 1);
 					}
 				}
 
 				> .thumb {
-					transition: left 0.2s cubic-bezier(0,0,0,1);
+					transition: left 0.2s cubic-bezier(0, 0, 0, 1);
 				}
 			}
 		}
diff --git a/packages/client/src/components/form/section.vue b/packages/client/src/components/form/section.vue
index c6e34ef1cc..f2c5fa13f8 100644
--- a/packages/client/src/components/form/section.vue
+++ b/packages/client/src/components/form/section.vue
@@ -1,14 +1,13 @@
 <template>
-<div class="vrtktovh _formBlock">
-	<div class="label"><slot name="label"></slot></div>
-	<div class="main _formRoot">
-		<slot></slot>
+	<div class="vrtktovh _formBlock">
+		<div class="label"><slot name="label"></slot></div>
+		<div class="main _formRoot">
+			<slot></slot>
+		</div>
 	</div>
-</div>
 </template>
 
-<script lang="ts" setup>
-</script>
+<script lang="ts" setup></script>
 
 <style lang="scss" scoped>
 .vrtktovh {
diff --git a/packages/client/src/components/form/select.vue b/packages/client/src/components/form/select.vue
index b81865d4f9..20e69e13ef 100644
--- a/packages/client/src/components/form/select.vue
+++ b/packages/client/src/components/form/select.vue
@@ -1,37 +1,57 @@
 <template>
-<div class="vblkjoeq">
-	<div class="label" @click="focus"><slot name="label"></slot></div>
-	<div ref="container" class="input" :class="{ inline, disabled, focused }" @click.prevent="onClick">
-		<div ref="prefixEl" class="prefix"><slot name="prefix"></slot></div>
-		<select
-			ref="inputEl"
-			v-model="v"
-			v-adaptive-border
-			class="select"
-			:disabled="disabled"
-			:required="required"
-			:readonly="readonly"
-			:placeholder="placeholder"
-			@focus="focused = true"
-			@blur="focused = false"
-			@input="onInput"
+	<div class="vblkjoeq">
+		<div class="label" @click="focus"><slot name="label"></slot></div>
+		<div
+			ref="container"
+			class="input"
+			:class="{ inline, disabled, focused }"
+			@click.prevent="onClick"
 		>
-			<slot></slot>
-		</select>
-		<div ref="suffixEl" class="suffix"><i class="ph-caret-down ph-bold ph-lg"></i></div>
-	</div>
-	<div class="caption"><slot name="caption"></slot></div>
+			<div ref="prefixEl" class="prefix"><slot name="prefix"></slot></div>
+			<select
+				ref="inputEl"
+				v-model="v"
+				v-adaptive-border
+				class="select"
+				:disabled="disabled"
+				:required="required"
+				:readonly="readonly"
+				:placeholder="placeholder"
+				@focus="focused = true"
+				@blur="focused = false"
+				@input="onInput"
+			>
+				<slot></slot>
+			</select>
+			<div ref="suffixEl" class="suffix">
+				<i class="ph-caret-down ph-bold ph-lg"></i>
+			</div>
+		</div>
+		<div class="caption"><slot name="caption"></slot></div>
 
-	<MkButton v-if="manualSave && changed" primary @click="updated"><i class="ph-floppy-disk-back ph-bold ph-lg"></i> {{ i18n.ts.save }}</MkButton>
-</div>
+		<MkButton v-if="manualSave && changed" primary @click="updated"
+			><i class="ph-floppy-disk-back ph-bold ph-lg"></i>
+			{{ i18n.ts.save }}</MkButton
+		>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, nextTick, ref, watch, computed, toRefs, VNode, useSlots } from 'vue';
-import MkButton from '@/components/MkButton.vue';
-import * as os from '@/os';
-import { useInterval } from '@/scripts/use-interval';
-import { i18n } from '@/i18n';
+import {
+	onMounted,
+	onUnmounted,
+	nextTick,
+	ref,
+	watch,
+	computed,
+	toRefs,
+	VNode,
+	useSlots,
+} from "vue";
+import MkButton from "@/components/MkButton.vue";
+import * as os from "@/os";
+import { useInterval } from "@/scripts/use-interval";
+import { i18n } from "@/i18n";
 
 const props = defineProps<{
 	modelValue: string;
@@ -47,8 +67,8 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-	(ev: 'change', _ev: KeyboardEvent): void;
-	(ev: 'update:modelValue', value: string): void;
+	(ev: "change", _ev: KeyboardEvent): void;
+	(ev: "update:modelValue", value: string): void;
 }>();
 
 const slots = useSlots();
@@ -58,32 +78,29 @@ const v = ref(modelValue.value);
 const focused = ref(false);
 const changed = ref(false);
 const invalid = ref(false);
-const filled = computed(() => v.value !== '' && v.value != null);
+const filled = computed(() => v.value !== "" && v.value != null);
 const inputEl = ref(null);
 const prefixEl = ref(null);
 const suffixEl = ref(null);
 const container = ref(null);
-const height =
-	props.small ? 36 :
-	props.large ? 40 :
-	38;
+const height = props.small ? 36 : props.large ? 40 : 38;
 
 const focus = () => inputEl.value.focus();
 const onInput = (ev) => {
 	changed.value = true;
-	emit('change', ev);
+	emit("change", ev);
 };
 
 const updated = () => {
 	changed.value = false;
-	emit('update:modelValue', v.value);
+	emit("update:modelValue", v.value);
 };
 
-watch(modelValue, newValue => {
+watch(modelValue, (newValue) => {
 	v.value = newValue;
 });
 
-watch(v, newValue => {
+watch(v, (newValue) => {
 	if (!props.manualSave) {
 		updated();
 	}
@@ -93,21 +110,27 @@ watch(v, newValue => {
 
 // このコンポーネントが作成された時、非表示状態である場合がある
 // 非表示状態だと要素の幅などは0になってしまうので、定期的に計算する
-useInterval(() => {
-	if (prefixEl.value) {
-		if (prefixEl.value.offsetWidth) {
-			inputEl.value.style.paddingLeft = prefixEl.value.offsetWidth + 'px';
+useInterval(
+	() => {
+		if (prefixEl.value) {
+			if (prefixEl.value.offsetWidth) {
+				inputEl.value.style.paddingLeft =
+					prefixEl.value.offsetWidth + "px";
+			}
 		}
-	}
-	if (suffixEl.value) {
-		if (suffixEl.value.offsetWidth) {
-			inputEl.value.style.paddingRight = suffixEl.value.offsetWidth + 'px';
+		if (suffixEl.value) {
+			if (suffixEl.value.offsetWidth) {
+				inputEl.value.style.paddingRight =
+					suffixEl.value.offsetWidth + "px";
+			}
 		}
+	},
+	100,
+	{
+		immediate: true,
+		afterMounted: true,
 	}
-}, 100, {
-	immediate: true,
-	afterMounted: true,
-});
+);
 
 onMounted(() => {
 	nextTick(() => {
@@ -135,17 +158,19 @@ const onClick = (ev: MouseEvent) => {
 
 	const scanOptions = (options: VNode[]) => {
 		for (const vnode of options) {
-			if (vnode.type === 'optgroup') {
+			if (vnode.type === "optgroup") {
 				const optgroup = vnode;
 				menu.push({
-					type: 'label',
+					type: "label",
 					text: optgroup.props.label,
 				});
 				scanOptions(optgroup.children);
-			} else if (Array.isArray(vnode.children)) { // 何故かフラグメントになってくることがある
+			} else if (Array.isArray(vnode.children)) {
+				// 何故かフラグメントになってくることがある
 				const fragment = vnode;
 				scanOptions(fragment.children);
-			} else if (vnode.props == null) { // v-if で条件が false のときにこうなる
+			} else if (vnode.props == null) {
+				// v-if で条件が false のときにこうなる
 				// nop?
 			} else {
 				const option = vnode;
@@ -272,7 +297,8 @@ const onClick = (ev: MouseEvent) => {
 		&.disabled {
 			opacity: 0.7;
 
-			&, * {
+			&,
+			* {
 				cursor: not-allowed !important;
 			}
 		}
diff --git a/packages/client/src/components/form/slot.vue b/packages/client/src/components/form/slot.vue
index 79ce8fe51f..f570fa60da 100644
--- a/packages/client/src/components/form/slot.vue
+++ b/packages/client/src/components/form/slot.vue
@@ -1,15 +1,15 @@
 <template>
-<div class="adhpbeou">
-	<div class="label" @click="focus"><slot name="label"></slot></div>
-	<div class="content">
-		<slot></slot>
+	<div class="adhpbeou">
+		<div class="label" @click="focus"><slot name="label"></slot></div>
+		<div class="content">
+			<slot></slot>
+		</div>
+		<div class="caption"><slot name="caption"></slot></div>
 	</div>
-	<div class="caption"><slot name="caption"></slot></div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
+import {} from "vue";
 
 function focus() {
 	// TODO
diff --git a/packages/client/src/components/form/split.vue b/packages/client/src/components/form/split.vue
index 301a8a84e5..40d1d43ac3 100644
--- a/packages/client/src/components/form/split.vue
+++ b/packages/client/src/components/form/split.vue
@@ -1,23 +1,26 @@
 <template>
-<div class="terlnhxf _formBlock">
-	<slot></slot>
-</div>
+	<div class="terlnhxf _formBlock">
+		<slot></slot>
+	</div>
 </template>
 
 <script lang="ts" setup>
-const props = withDefaults(defineProps<{
-	minWidth?: number;
-}>(), {
-	minWidth: 210,
-});
+const props = withDefaults(
+	defineProps<{
+		minWidth?: number;
+	}>(),
+	{
+		minWidth: 210,
+	}
+);
 
-const minWidth = props.minWidth + 'px';
+const minWidth = props.minWidth + "px";
 </script>
 
 <style lang="scss" scoped>
 .terlnhxf {
 	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(v-bind('minWidth'), 1fr));
+	grid-template-columns: repeat(auto-fill, minmax(v-bind("minWidth"), 1fr));
 	grid-gap: 12px;
 
 	> ::v-deep(*) {
diff --git a/packages/client/src/components/form/suspense.vue b/packages/client/src/components/form/suspense.vue
index 29217f4b20..33fd032334 100644
--- a/packages/client/src/components/form/suspense.vue
+++ b/packages/client/src/components/form/suspense.vue
@@ -1,24 +1,30 @@
 <template>
-<transition :name="$store.state.animation ? 'fade' : ''" mode="out-in">
-	<div v-if="pending">
-		<MkLoading/>
-	</div>
-	<div v-else-if="resolved">
-		<slot :result="result"></slot>
-	</div>
-	<div v-else>
-		<div class="wszdbhzo">
-			<div><i class="ph-warning ph-bold ph-lg"></i> {{ i18n.ts.somethingHappened }}</div>
-			<MkButton inline class="retry" @click="retry"><i class="ph-arrow-clockwise ph-bold ph-lg"></i> {{ i18n.ts.retry }}</MkButton>
+	<transition :name="$store.state.animation ? 'fade' : ''" mode="out-in">
+		<div v-if="pending">
+			<MkLoading />
 		</div>
-	</div>
-</transition>
+		<div v-else-if="resolved">
+			<slot :result="result"></slot>
+		</div>
+		<div v-else>
+			<div class="wszdbhzo">
+				<div>
+					<i class="ph-warning ph-bold ph-lg"></i>
+					{{ i18n.ts.somethingHappened }}
+				</div>
+				<MkButton inline class="retry" @click="retry"
+					><i class="ph-arrow-clockwise ph-bold ph-lg"></i>
+					{{ i18n.ts.retry }}</MkButton
+				>
+			</div>
+		</div>
+	</transition>
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, ref, watch } from 'vue';
-import MkButton from '@/components/MkButton.vue';
-import { i18n } from '@/i18n';
+import { defineComponent, PropType, ref, watch } from "vue";
+import MkButton from "@/components/MkButton.vue";
+import { i18n } from "@/i18n";
 
 export default defineComponent({
 	components: {
@@ -29,7 +35,7 @@ export default defineComponent({
 		p: {
 			type: Function as PropType<() => Promise<any>>,
 			required: true,
-		}
+		},
 	},
 
 	setup(props, context) {
@@ -57,11 +63,15 @@ export default defineComponent({
 			});
 		};
 
-		watch(() => props.p, () => {
-			process();
-		}, {
-			immediate: true,
-		});
+		watch(
+			() => props.p,
+			() => {
+				process();
+			},
+			{
+				immediate: true,
+			}
+		);
 
 		const retry = () => {
 			process();
@@ -75,7 +85,7 @@ export default defineComponent({
 			retry,
 			i18n,
 		};
-	}
+	},
 });
 </script>
 
diff --git a/packages/client/src/components/form/switch.vue b/packages/client/src/components/form/switch.vue
index 1ed00ae655..efaf488a9f 100644
--- a/packages/client/src/components/form/switch.vue
+++ b/packages/client/src/components/form/switch.vue
@@ -1,29 +1,31 @@
 <template>
-<div
-	class="ziffeomt"
-	:class="{ disabled, checked }"
->
-	<input
-		ref="input"
-		type="checkbox"
-		:disabled="disabled"
-		@keydown.enter="toggle"
-	>
-	<span ref="button" v-tooltip="checked ? i18n.ts.itsOn : i18n.ts.itsOff" class="button" @click.prevent="toggle">
-		<div class="knob"></div>
-	</span>
-	<span class="label">
-		<!-- TODO: 無名slotの方は廃止 -->
-		<span @click="toggle"><slot name="label"></slot><slot></slot></span>
-		<p class="caption"><slot name="caption"></slot></p>
-	</span>
-</div>
+	<div class="ziffeomt" :class="{ disabled, checked }">
+		<input
+			ref="input"
+			type="checkbox"
+			:disabled="disabled"
+			@keydown.enter="toggle"
+		/>
+		<span
+			ref="button"
+			v-tooltip="checked ? i18n.ts.itsOn : i18n.ts.itsOff"
+			class="button"
+			@click.prevent="toggle"
+		>
+			<div class="knob"></div>
+		</span>
+		<span class="label">
+			<!-- TODO: 無名slotの方は廃止 -->
+			<span @click="toggle"><slot name="label"></slot><slot></slot></span>
+			<p class="caption"><slot name="caption"></slot></p>
+		</span>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { toRefs, Ref } from 'vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
+import { toRefs, Ref } from "vue";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
 
 const props = defineProps<{
 	modelValue: boolean | Ref<boolean>;
@@ -31,17 +33,16 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-	(ev: 'update:modelValue', v: boolean): void;
+	(ev: "update:modelValue", v: boolean): void;
 }>();
 
 let button = $ref<HTMLElement>();
 const checked = toRefs(props).modelValue;
 const toggle = () => {
 	if (props.disabled) return;
-	emit('update:modelValue', !checked.value);
+	emit("update:modelValue", !checked.value);
 
 	if (!checked.value) {
-
 	}
 };
 </script>
diff --git a/packages/client/src/components/form/textarea.vue b/packages/client/src/components/form/textarea.vue
index 0cf61458a9..19c33cfece 100644
--- a/packages/client/src/components/form/textarea.vue
+++ b/packages/client/src/components/form/textarea.vue
@@ -1,36 +1,52 @@
 <template>
-<div class="adhpbeos">
-	<div class="label" @click="focus"><slot name="label"></slot></div>
-	<div class="input" :class="{ disabled, focused, tall, pre }">
-		<textarea
-			ref="inputEl"
-			v-model="v"
-			v-adaptive-border
-			:class="{ code, _monospace: code }"
-			:disabled="disabled"
-			:required="required"
-			:readonly="readonly"
-			:placeholder="placeholder"
-			:pattern="pattern"
-			:autocomplete="autocomplete"
-			:spellcheck="spellcheck"
-			@focus="focused = true"
-			@blur="focused = false"
-			@keydown="onKeydown($event)"
-			@input="onInput"
-		></textarea>
-	</div>
-	<div class="caption"><slot name="caption"></slot></div>
+	<div class="adhpbeos">
+		<div class="label" @click="focus"><slot name="label"></slot></div>
+		<div class="input" :class="{ disabled, focused, tall, pre }">
+			<textarea
+				ref="inputEl"
+				v-model="v"
+				v-adaptive-border
+				:class="{ code, _monospace: code }"
+				:disabled="disabled"
+				:required="required"
+				:readonly="readonly"
+				:placeholder="placeholder"
+				:pattern="pattern"
+				:autocomplete="autocomplete"
+				:spellcheck="spellcheck"
+				@focus="focused = true"
+				@blur="focused = false"
+				@keydown="onKeydown($event)"
+				@input="onInput"
+			></textarea>
+		</div>
+		<div class="caption"><slot name="caption"></slot></div>
 
-	<MkButton v-if="manualSave && changed" primary class="save" @click="updated"><i class="ph-floppy-disk-back ph-bold ph-lg"></i> {{ i18n.ts.save }}</MkButton>
-</div>
+		<MkButton
+			v-if="manualSave && changed"
+			primary
+			class="save"
+			@click="updated"
+			><i class="ph-floppy-disk-back ph-bold ph-lg"></i>
+			{{ i18n.ts.save }}</MkButton
+		>
+	</div>
 </template>
 
 <script lang="ts">
-import { defineComponent, onMounted, onUnmounted, nextTick, ref, watch, computed, toRefs } from 'vue';
-import { debounce } from 'throttle-debounce';
-import MkButton from '@/components/MkButton.vue';
-import { i18n } from '@/i18n';
+import {
+	defineComponent,
+	onMounted,
+	onUnmounted,
+	nextTick,
+	ref,
+	watch,
+	computed,
+	toRefs,
+} from "vue";
+import { debounce } from "throttle-debounce";
+import MkButton from "@/components/MkButton.vue";
+import { i18n } from "@/i18n";
 
 export default defineComponent({
 	components: {
@@ -102,7 +118,7 @@ export default defineComponent({
 		},
 	},
 
-	emits: ['change', 'keydown', 'enter', 'update:modelValue'],
+	emits: ["change", "keydown", "enter", "update:modelValue"],
 
 	setup(props, context) {
 		const { modelValue, autofocus } = toRefs(props);
@@ -110,30 +126,30 @@ export default defineComponent({
 		const focused = ref(false);
 		const changed = ref(false);
 		const invalid = ref(false);
-		const filled = computed(() => v.value !== '' && v.value != null);
+		const filled = computed(() => v.value !== "" && v.value != null);
 		const inputEl = ref(null);
 
 		const focus = () => inputEl.value.focus();
 		const onInput = (ev) => {
 			changed.value = true;
-			context.emit('change', ev);
+			context.emit("change", ev);
 		};
 		const onKeydown = (ev: KeyboardEvent) => {
-			context.emit('keydown', ev);
+			context.emit("keydown", ev);
 
-			if (ev.code === 'Enter') {
-				context.emit('enter');
+			if (ev.code === "Enter") {
+				context.emit("enter");
 			}
 		};
 
 		const updated = () => {
 			changed.value = false;
-			context.emit('update:modelValue', v.value);
+			context.emit("update:modelValue", v.value);
 		};
 
 		const debouncedUpdated = debounce(1000, updated);
 
-		watch(modelValue, newValue => {
+		watch(modelValue, (newValue) => {
 			v.value = newValue;
 		});
 
@@ -235,7 +251,8 @@ export default defineComponent({
 		&.disabled {
 			opacity: 0.7;
 
-			&, * {
+			&,
+			* {
 				cursor: not-allowed !important;
 			}
 		}
diff --git a/packages/client/src/components/global/MkA.vue b/packages/client/src/components/global/MkA.vue
index 6619827876..e1a50ad35e 100644
--- a/packages/client/src/components/global/MkA.vue
+++ b/packages/client/src/components/global/MkA.vue
@@ -1,26 +1,35 @@
 <template>
-<a :href="to" :class="active ? activeClass : null" @click="nav" @contextmenu.prevent.stop="onContextmenu" @click.stop>
-	<slot></slot>
-</a>
+	<a
+		:href="to"
+		:class="active ? activeClass : null"
+		@click="nav"
+		@contextmenu.prevent.stop="onContextmenu"
+		@click.stop
+	>
+		<slot></slot>
+	</a>
 </template>
 
 <script lang="ts" setup>
-import { inject } from 'vue';
-import * as os from '@/os';
-import copyToClipboard from '@/scripts/copy-to-clipboard';
-import { url } from '@/config';
-import { popout as popout_ } from '@/scripts/popout';
-import { i18n } from '@/i18n';
-import { useRouter } from '@/router';
+import { inject } from "vue";
+import * as os from "@/os";
+import copyToClipboard from "@/scripts/copy-to-clipboard";
+import { url } from "@/config";
+import { popout as popout_ } from "@/scripts/popout";
+import { i18n } from "@/i18n";
+import { useRouter } from "@/router";
 
-const props = withDefaults(defineProps<{
-	to: string;
-	activeClass?: null | string;
-	behavior?: null | 'window' | 'browser' | 'modalWindow';
-}>(), {
-	activeClass: null,
-	behavior: null,
-});
+const props = withDefaults(
+	defineProps<{
+		to: string;
+		activeClass?: null | string;
+		behavior?: null | "window" | "browser" | "modalWindow";
+	}>(),
+	{
+		activeClass: null,
+		behavior: null,
+	}
+);
 
 const router = useRouter();
 
@@ -36,35 +45,45 @@ const active = $computed(() => {
 
 function onContextmenu(ev) {
 	const selection = window.getSelection();
-	if (selection && selection.toString() !== '') return;
-	os.contextMenu([{
-		type: 'label',
-		text: props.to,
-	}, {
-		icon: 'ph-browser ph-bold ph-lg',
-		text: i18n.ts.openInWindow,
-		action: () => {
-			os.pageWindow(props.to);
-		},
-	}, {
-		icon: 'ph-arrows-out-simple ph-bold ph-lg',
-		text: i18n.ts.showInPage,
-		action: () => {
-			router.push(props.to, 'forcePage');
-		},
-	}, null, {
-		icon: 'ph-arrow-square-out ph-bold ph-lg',
-		text: i18n.ts.openInNewTab,
-		action: () => {
-			window.open(props.to, '_blank');
-		},
-	}, {
-		icon: 'ph-link-simple ph-bold ph-lg',
-		text: i18n.ts.copyLink,
-		action: () => {
-			copyToClipboard(`${url}${props.to}`);
-		},
-	}], ev);
+	if (selection && selection.toString() !== "") return;
+	os.contextMenu(
+		[
+			{
+				type: "label",
+				text: props.to,
+			},
+			{
+				icon: "ph-browser ph-bold ph-lg",
+				text: i18n.ts.openInWindow,
+				action: () => {
+					os.pageWindow(props.to);
+				},
+			},
+			{
+				icon: "ph-arrows-out-simple ph-bold ph-lg",
+				text: i18n.ts.showInPage,
+				action: () => {
+					router.push(props.to, "forcePage");
+				},
+			},
+			null,
+			{
+				icon: "ph-arrow-square-out ph-bold ph-lg",
+				text: i18n.ts.openInNewTab,
+				action: () => {
+					window.open(props.to, "_blank");
+				},
+			},
+			{
+				icon: "ph-link-simple ph-bold ph-lg",
+				text: i18n.ts.copyLink,
+				action: () => {
+					copyToClipboard(`${url}${props.to}`);
+				},
+			},
+		],
+		ev
+	);
 }
 
 function openWindow() {
@@ -83,15 +102,15 @@ function nav(ev: MouseEvent) {
 	if (!ev.ctrlKey) {
 		ev.preventDefault();
 
-		if (props.behavior === 'browser') {
+		if (props.behavior === "browser") {
 			location.href = props.to;
 			return;
 		}
 
 		if (props.behavior) {
-			if (props.behavior === 'window') {
+			if (props.behavior === "window") {
 				return openWindow();
-			} else if (props.behavior === 'modalWindow') {
+			} else if (props.behavior === "modalWindow") {
 				return modalWindow();
 			}
 		}
@@ -100,7 +119,7 @@ function nav(ev: MouseEvent) {
 			return openWindow();
 		}
 
-		router.push(props.to, ev.ctrlKey ? 'forcePage' : null);
+		router.push(props.to, ev.ctrlKey ? "forcePage" : null);
 	}
 }
 </script>
diff --git a/packages/client/src/components/global/MkAcct.vue b/packages/client/src/components/global/MkAcct.vue
index 6c3da424c6..c77ad6a4e1 100644
--- a/packages/client/src/components/global/MkAcct.vue
+++ b/packages/client/src/components/global/MkAcct.vue
@@ -1,14 +1,18 @@
 <template>
-<span class="mk-acct">
-	<span class="name">@{{ user.username }}</span>
-	<span v-if="user.host || detail || $store.state.showFullAcct" class="host">@{{ user.host || host }}</span>
-</span>
+	<span class="mk-acct">
+		<span class="name">@{{ user.username }}</span>
+		<span
+			v-if="user.host || detail || $store.state.showFullAcct"
+			class="host"
+			>@{{ user.host || host }}</span
+		>
+	</span>
 </template>
 
 <script lang="ts" setup>
-import * as misskey from 'calckey-js';
-import { toUnicode } from 'punycode/';
-import { host as hostRaw } from '@/config';
+import * as misskey from "calckey-js";
+import { toUnicode } from "punycode/";
+import { host as hostRaw } from "@/config";
 
 defineProps<{
 	user: misskey.entities.UserDetailed;
diff --git a/packages/client/src/components/global/MkAd.vue b/packages/client/src/components/global/MkAd.vue
index 29639ca8dc..e826e14458 100644
--- a/packages/client/src/components/global/MkAd.vue
+++ b/packages/client/src/components/global/MkAd.vue
@@ -1,24 +1,37 @@
 <template>
-	<div v-if="chosen && chosen.length > 0 && defaultStore.state.showAds" v-for="chosenItem in chosen" class="qiivuoyo">
+	<div
+		v-if="chosen && chosen.length > 0 && defaultStore.state.showAds"
+		v-for="chosenItem in chosen"
+		class="qiivuoyo"
+	>
 		<div v-if="!showMenu" class="main" :class="chosenItem.place">
 			<a :href="chosenItem.url" target="_blank">
-				<img :src="chosenItem.imageUrl">
+				<img :src="chosenItem.imageUrl" />
 			</a>
 		</div>
 	</div>
 	<div v-else-if="chosen && defaultStore.state.showAds" class="qiivuoyo">
 		<div v-if="!showMenu" class="main" :class="chosen.place">
 			<a :href="chosen.url" target="_blank">
-				<img :src="chosen.imageUrl">
-				<button class="_button menu" @click.prevent.stop="toggleMenu"><span class="ph-info ph-bold ph-lg info-circle"></span></button>
+				<img :src="chosen.imageUrl" />
+				<button class="_button menu" @click.prevent.stop="toggleMenu">
+					<span class="ph-info ph-bold ph-lg info-circle"></span>
+				</button>
 			</a>
 		</div>
 		<div v-else class="menu">
 			<div class="body">
 				<div>Ads by {{ host }}</div>
 				<!--<MkButton class="button" primary>{{ i18n.ts._ad.like }}</MkButton>-->
-				<MkButton v-if="chosen.ratio !== 0" class="button" @click="reduceFrequency">{{ i18n.ts._ad.reduceFrequencyOfThisAd }}</MkButton>
-				<button class="_textButton" @click="toggleMenu">{{ i18n.ts._ad.back }}</button>
+				<MkButton
+					v-if="chosen.ratio !== 0"
+					class="button"
+					@click="reduceFrequency"
+					>{{ i18n.ts._ad.reduceFrequencyOfThisAd }}</MkButton
+				>
+				<button class="_textButton" @click="toggleMenu">
+					{{ i18n.ts._ad.back }}
+				</button>
 			</div>
 		</div>
 	</div>
@@ -26,15 +39,15 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
-import { instance } from '@/instance';
-import { host } from '@/config';
-import MkButton from '@/components/MkButton.vue';
-import { defaultStore } from '@/store';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
+import { ref } from "vue";
+import { instance } from "@/instance";
+import { host } from "@/config";
+import MkButton from "@/components/MkButton.vue";
+import { defaultStore } from "@/store";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
 
-type Ad = (typeof instance)['ads'][number];
+type Ad = (typeof instance)["ads"][number];
 
 const props = defineProps<{
 	prefer: string[];
@@ -51,26 +64,32 @@ const choseAd = (): Ad | null => {
 		return props.specify;
 	}
 
-	const allAds = instance.ads.map(ad => defaultStore.state.mutedAds.includes(ad.id) ? {
-		...ad,
-		ratio: 0,
-	} : ad);
+	const allAds = instance.ads.map((ad) =>
+		defaultStore.state.mutedAds.includes(ad.id)
+			? {
+					...ad,
+					ratio: 0,
+			  }
+			: ad
+	);
 
-	let ads = allAds.filter(ad => props.prefer.includes(ad.place));
+	let ads = allAds.filter((ad) => props.prefer.includes(ad.place));
 
 	if (ads.length === 0) {
-		ads = allAds.filter(ad => ad.place === 'square');
+		ads = allAds.filter((ad) => ad.place === "square");
 	}
 
-	const lowPriorityAds = ads.filter(ad => ad.ratio === 0);
-	const widgetAds = ads.filter(ad => ad.place === 'widget');
-	ads = ads.filter(ad => ad.ratio !== 0);
-	
+	const lowPriorityAds = ads.filter((ad) => ad.ratio === 0);
+	const widgetAds = ads.filter((ad) => ad.place === "widget");
+	ads = ads.filter((ad) => ad.ratio !== 0);
+
 	if (widgetAds.length !== 0) {
-			return widgetAds;
+		return widgetAds;
 	} else if (ads.length === 0) {
-		 if (lowPriorityAds.length !== 0) {
-			return lowPriorityAds[Math.floor(Math.random() * lowPriorityAds.length)];
+		if (lowPriorityAds.length !== 0) {
+			return lowPriorityAds[
+				Math.floor(Math.random() * lowPriorityAds.length)
+			];
 		} else {
 			return null;
 		}
@@ -96,7 +115,7 @@ const chosen = ref(choseAd());
 function reduceFrequency(): void {
 	if (chosen.value == null) return;
 	if (defaultStore.state.mutedAds.includes(chosen.value.id)) return;
-	defaultStore.push('mutedAds', chosen.value.id);
+	defaultStore.push("mutedAds", chosen.value.id);
 	os.success();
 	chosen.value = choseAd();
 	showMenu.value = false;
@@ -106,7 +125,13 @@ function reduceFrequency(): void {
 <style lang="scss" scoped>
 .qiivuoyo {
 	background-size: auto auto;
-	background-image: repeating-linear-gradient(45deg, transparent, transparent 8px, var(--ad) 8px, var(--ad) 14px );
+	background-image: repeating-linear-gradient(
+		45deg,
+		transparent,
+		transparent 8px,
+		var(--ad) 8px,
+		var(--ad) 14px
+	);
 
 	> .main {
 		text-align: center;
@@ -143,7 +168,7 @@ function reduceFrequency(): void {
 		}
 
 		&.widget {
-			> a ,
+			> a,
 			> a > img {
 				max-width: min(300px, 100%);
 				max-height: 300px;
@@ -153,7 +178,7 @@ function reduceFrequency(): void {
 		&.inline {
 			padding: 8px;
 
-			> a ,
+			> a,
 			> a > img {
 				max-width: min(600px, 100%);
 				max-height: 80px;
@@ -163,7 +188,7 @@ function reduceFrequency(): void {
 		&.inline-big {
 			padding: 8px;
 
-			> a ,
+			> a,
 			> a > img {
 				max-width: min(600px, 100%);
 				max-height: 250px;
@@ -171,7 +196,7 @@ function reduceFrequency(): void {
 		}
 
 		&.vertical {
-			> a ,
+			> a,
 			> a > img {
 				max-width: min(100px, 100%);
 			}
diff --git a/packages/client/src/components/global/MkAvatar.vue b/packages/client/src/components/global/MkAvatar.vue
index f2a39de61d..d904ece265 100644
--- a/packages/client/src/components/global/MkAvatar.vue
+++ b/packages/client/src/components/global/MkAvatar.vue
@@ -1,72 +1,127 @@
 <template>
-<span v-if="disableLink" v-user-preview="disablePreview ? undefined : user.id" class="eiwwqkts _noSelect" :class="{ cat: user.isCat, square: $store.state.squareAvatars }" :style="{ color }" :title="acct(user)" @click="onClick">
-	<img class="inner" :src="url" decoding="async"/>
-	<MkUserOnlineIndicator v-if="showIndicator && user.instance == null" class="indicator" :user="user"/>
-</span>
-<MkA v-else v-user-preview="disablePreview ? undefined : user.id" class="eiwwqkts _noSelect" :class="{ cat: user.isCat, square: $store.state.squareAvatars }" :style="{ color }" :to="userPage(user)" :title="acct(user)" :target="target" @click.stop>
-	<img class="inner" :src="url" decoding="async"/>
-	<MkUserOnlineIndicator v-if="showIndicator && user.instance == null" class="indicator" :user="user"/>
-</MkA>
+	<span
+		v-if="disableLink"
+		v-user-preview="disablePreview ? undefined : user.id"
+		class="eiwwqkts _noSelect"
+		:class="{ cat: user.isCat, square: $store.state.squareAvatars }"
+		:style="{ color }"
+		:title="acct(user)"
+		@click="onClick"
+	>
+		<img class="inner" :src="url" decoding="async" />
+		<MkUserOnlineIndicator
+			v-if="showIndicator && user.instance == null"
+			class="indicator"
+			:user="user"
+		/>
+	</span>
+	<MkA
+		v-else
+		v-user-preview="disablePreview ? undefined : user.id"
+		class="eiwwqkts _noSelect"
+		:class="{ cat: user.isCat, square: $store.state.squareAvatars }"
+		:style="{ color }"
+		:to="userPage(user)"
+		:title="acct(user)"
+		:target="target"
+		@click.stop
+	>
+		<img class="inner" :src="url" decoding="async" />
+		<MkUserOnlineIndicator
+			v-if="showIndicator && user.instance == null"
+			class="indicator"
+			:user="user"
+		/>
+	</MkA>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, watch } from 'vue';
-import * as misskey from 'calckey-js';
-import { getStaticImageUrl } from '@/scripts/get-static-image-url';
-import { extractAvgColorFromBlurhash } from '@/scripts/extract-avg-color-from-blurhash';
-import { acct, userPage } from '@/filters/user';
-import MkUserOnlineIndicator from '@/components/MkUserOnlineIndicator.vue';
-import { defaultStore } from '@/store';
+import { onMounted, watch } from "vue";
+import * as misskey from "calckey-js";
+import { getStaticImageUrl } from "@/scripts/get-static-image-url";
+import { extractAvgColorFromBlurhash } from "@/scripts/extract-avg-color-from-blurhash";
+import { acct, userPage } from "@/filters/user";
+import MkUserOnlineIndicator from "@/components/MkUserOnlineIndicator.vue";
+import { defaultStore } from "@/store";
 
-const props = withDefaults(defineProps<{
-	user: misskey.entities.User;
-	target?: string | null;
-	disableLink?: boolean;
-	disablePreview?: boolean;
-	showIndicator?: boolean;
-}>(), {
-	target: null,
-	disableLink: false,
-	disablePreview: false,
-	showIndicator: false,
-});
+const props = withDefaults(
+	defineProps<{
+		user: misskey.entities.User;
+		target?: string | null;
+		disableLink?: boolean;
+		disablePreview?: boolean;
+		showIndicator?: boolean;
+	}>(),
+	{
+		target: null,
+		disableLink: false,
+		disablePreview: false,
+		showIndicator: false,
+	}
+);
 
 const emit = defineEmits<{
-	(ev: 'click', v: MouseEvent): void;
+	(ev: "click", v: MouseEvent): void;
 }>();
 
-const url = $computed(() => defaultStore.state.disableShowingAnimatedImages
-	? getStaticImageUrl(props.user.avatarUrl)
-	: props.user.avatarUrl);
+const url = $computed(() =>
+	defaultStore.state.disableShowingAnimatedImages
+		? getStaticImageUrl(props.user.avatarUrl)
+		: props.user.avatarUrl
+);
 
 function onClick(ev: MouseEvent) {
-	emit('click', ev);
+	emit("click", ev);
 }
 
 let color = $ref();
 
-watch(() => props.user.avatarBlurhash, () => {
-	color = extractAvgColorFromBlurhash(props.user.avatarBlurhash);
-}, {
-	immediate: true,
-});
+watch(
+	() => props.user.avatarBlurhash,
+	() => {
+		color = extractAvgColorFromBlurhash(props.user.avatarBlurhash);
+	},
+	{
+		immediate: true,
+	}
+);
 </script>
 
 <style lang="scss" scoped>
 @keyframes earwiggleleft {
-	from { transform: rotate(37.6deg) skew(30deg); }
-	25% { transform: rotate(10deg) skew(30deg); }
-	50% { transform: rotate(20deg) skew(30deg); }
-	75% { transform: rotate(0deg) skew(30deg); }
-	to { transform: rotate(37.6deg) skew(30deg); }
+	from {
+		transform: rotate(37.6deg) skew(30deg);
+	}
+	25% {
+		transform: rotate(10deg) skew(30deg);
+	}
+	50% {
+		transform: rotate(20deg) skew(30deg);
+	}
+	75% {
+		transform: rotate(0deg) skew(30deg);
+	}
+	to {
+		transform: rotate(37.6deg) skew(30deg);
+	}
 }
 
 @keyframes earwiggleright {
-	from { transform: rotate(-37.6deg) skew(-30deg); }
-	30% { transform: rotate(-10deg) skew(-30deg); }
-	55% { transform: rotate(-20deg) skew(-30deg); }
-	75% { transform: rotate(0deg) skew(-30deg); }
-	to { transform: rotate(-37.6deg) skew(-30deg); }
+	from {
+		transform: rotate(-37.6deg) skew(-30deg);
+	}
+	30% {
+		transform: rotate(-10deg) skew(-30deg);
+	}
+	55% {
+		transform: rotate(-20deg) skew(-30deg);
+	}
+	75% {
+		transform: rotate(0deg) skew(-30deg);
+	}
+	to {
+		transform: rotate(-37.6deg) skew(-30deg);
+	}
 }
 
 .eiwwqkts {
@@ -109,11 +164,12 @@ watch(() => props.user.avatarBlurhash, () => {
 	}
 
 	&.cat {
-		&:before, &:after {
+		&:before,
+		&:after {
 			background: #ebbcba;
 			border: solid 4px currentColor;
 			box-sizing: border-box;
-			content: '';
+			content: "";
 			display: inline-block;
 			height: 50%;
 			width: 50%;
diff --git a/packages/client/src/components/global/MkEllipsis.vue b/packages/client/src/components/global/MkEllipsis.vue
index 0a46f486d6..6226c12ec8 100644
--- a/packages/client/src/components/global/MkEllipsis.vue
+++ b/packages/client/src/components/global/MkEllipsis.vue
@@ -24,7 +24,9 @@
 }
 
 @keyframes ellipsis {
-	0%, 80%, 100% {
+	0%,
+	80%,
+	100% {
 		opacity: 1;
 	}
 	40% {
diff --git a/packages/client/src/components/global/MkEmoji.vue b/packages/client/src/components/global/MkEmoji.vue
index 9b2d79a5a4..eb08ff5c28 100644
--- a/packages/client/src/components/global/MkEmoji.vue
+++ b/packages/client/src/components/global/MkEmoji.vue
@@ -1,17 +1,32 @@
 <template>
-<img v-if="customEmoji" class="mk-emoji custom" :class="{ normal, noStyle }" :src="url" :alt="alt" :title="alt" decoding="async"/>
-<img v-else-if="char && !useOsNativeEmojis" class="mk-emoji" :src="url" :alt="alt" :title="alt" decoding="async"/>
-<span v-else-if="char && useOsNativeEmojis">{{ char }}</span>
-<span v-else>{{ emoji }}</span>
+	<img
+		v-if="customEmoji"
+		class="mk-emoji custom"
+		:class="{ normal, noStyle }"
+		:src="url"
+		:alt="alt"
+		:title="alt"
+		decoding="async"
+	/>
+	<img
+		v-else-if="char && !useOsNativeEmojis"
+		class="mk-emoji"
+		:src="url"
+		:alt="alt"
+		:title="alt"
+		decoding="async"
+	/>
+	<span v-else-if="char && useOsNativeEmojis">{{ char }}</span>
+	<span v-else>{{ emoji }}</span>
 </template>
 
 <script lang="ts" setup>
-import { computed, ref, watch } from 'vue';
-import { CustomEmoji } from 'calckey-js/built/entities';
-import { getStaticImageUrl } from '@/scripts/get-static-image-url';
-import { char2filePath } from '@/scripts/twemoji-base';
-import { defaultStore } from '@/store';
-import { instance } from '@/instance';
+import { computed, ref, watch } from "vue";
+import { CustomEmoji } from "calckey-js/built/entities";
+import { getStaticImageUrl } from "@/scripts/get-static-image-url";
+import { char2filePath } from "@/scripts/twemoji-base";
+import { defaultStore } from "@/store";
+import { instance } from "@/instance";
 
 const props = defineProps<{
 	emoji: string;
@@ -21,11 +36,19 @@ const props = defineProps<{
 	isReaction?: boolean;
 }>();
 
-const isCustom = computed(() => props.emoji.startsWith(':'));
-const char = computed(() => isCustom.value ? null : props.emoji);
-const useOsNativeEmojis = computed(() => defaultStore.state.useOsNativeEmojis && !props.isReaction);
+const isCustom = computed(() => props.emoji.startsWith(":"));
+const char = computed(() => (isCustom.value ? null : props.emoji));
+const useOsNativeEmojis = computed(
+	() => defaultStore.state.useOsNativeEmojis && !props.isReaction
+);
 const ce = computed(() => props.customEmojis ?? instance.emojis ?? []);
-const customEmoji = computed(() => isCustom.value ? ce.value.find(x => x.name === props.emoji.substr(1, props.emoji.length - 2)) : null);
+const customEmoji = computed(() =>
+	isCustom.value
+		? ce.value.find(
+				(x) => x.name === props.emoji.substr(1, props.emoji.length - 2)
+		  )
+		: null
+);
 const url = computed(() => {
 	if (char.value) {
 		return char2filePath(char.value);
@@ -35,7 +58,9 @@ const url = computed(() => {
 			: customEmoji.value.url;
 	}
 });
-const alt = computed(() => customEmoji.value ? `:${customEmoji.value.name}:` : char.value);
+const alt = computed(() =>
+	customEmoji.value ? `:${customEmoji.value.name}:` : char.value
+);
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/components/global/MkError.vue b/packages/client/src/components/global/MkError.vue
index 266e6b253f..38d6244b95 100644
--- a/packages/client/src/components/global/MkError.vue
+++ b/packages/client/src/components/global/MkError.vue
@@ -1,16 +1,25 @@
 <template>
-<transition :name="$store.state.animation ? 'zoom' : ''" appear>
-	<div class="mjndxjcg">
-		<img src="/static-assets/badges/error.png" class="_ghost" alt="Error"/>
-		<p><i class="ph-warning ph-bold ph-lg"></i> {{ i18n.ts.somethingHappened }}</p>
-		<MkButton class="button" @click="() => $emit('retry')">{{ i18n.ts.retry }}</MkButton>
-	</div>
-</transition>
+	<transition :name="$store.state.animation ? 'zoom' : ''" appear>
+		<div class="mjndxjcg">
+			<img
+				src="/static-assets/badges/error.png"
+				class="_ghost"
+				alt="Error"
+			/>
+			<p>
+				<i class="ph-warning ph-bold ph-lg"></i>
+				{{ i18n.ts.somethingHappened }}
+			</p>
+			<MkButton class="button" @click="() => $emit('retry')">{{
+				i18n.ts.retry
+			}}</MkButton>
+		</div>
+	</transition>
 </template>
 
 <script lang="ts" setup>
-import MkButton from '@/components/MkButton.vue';
-import { i18n } from '@/i18n';
+import MkButton from "@/components/MkButton.vue";
+import { i18n } from "@/i18n";
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/components/global/MkLoading.vue b/packages/client/src/components/global/MkLoading.vue
index dc61e577b1..343108f045 100644
--- a/packages/client/src/components/global/MkLoading.vue
+++ b/packages/client/src/components/global/MkLoading.vue
@@ -1,27 +1,51 @@
 <template>
-<div :class="[$style.root, { [$style.inline]: inline, [$style.colored]: colored, [$style.mini]: mini }]">
-	<div :class="$style.container" aria-hidden="true">
-		<svg :class="[$style.spinner]" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
-			<circle :class="[$style.path]" cx="25" cy="25" r="20" fill="none" stroke-width="6px" style="fill:none;stroke:currentColor;stroke-width:6px;"></circle>
-		</svg>
+	<div
+		:class="[
+			$style.root,
+			{
+				[$style.inline]: inline,
+				[$style.colored]: colored,
+				[$style.mini]: mini,
+			},
+		]"
+	>
+		<div :class="$style.container" aria-hidden="true">
+			<svg
+				:class="[$style.spinner]"
+				viewBox="0 0 50 50"
+				xmlns="http://www.w3.org/2000/svg"
+			>
+				<circle
+					:class="[$style.path]"
+					cx="25"
+					cy="25"
+					r="20"
+					fill="none"
+					stroke-width="6px"
+					style="fill: none; stroke: currentColor; stroke-width: 6px"
+				></circle>
+			</svg>
+		</div>
 	</div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
+import {} from "vue";
 
-const props = withDefaults(defineProps<{
-	inline?: boolean;
-	colored?: boolean;
-	mini?: boolean;
-	em?: boolean;
-}>(), {
-	inline: false,
-	colored: true,
-	mini: false,
-	em: false,
-});
+const props = withDefaults(
+	defineProps<{
+		inline?: boolean;
+		colored?: boolean;
+		mini?: boolean;
+		em?: boolean;
+	}>(),
+	{
+		inline: false,
+		colored: true,
+		mini: false,
+		em: false,
+	}
+);
 </script>
 
 <style lang="scss" module>
@@ -102,5 +126,4 @@ const props = withDefaults(defineProps<{
 	stroke-linecap: round;
 	animation: dash 1.2s ease-in-out infinite;
 }
-
 </style>
diff --git a/packages/client/src/components/global/MkMisskeyFlavoredMarkdown.vue b/packages/client/src/components/global/MkMisskeyFlavoredMarkdown.vue
index 19e1d88e1e..c235b48354 100644
--- a/packages/client/src/components/global/MkMisskeyFlavoredMarkdown.vue
+++ b/packages/client/src/components/global/MkMisskeyFlavoredMarkdown.vue
@@ -1,24 +1,36 @@
 <template>
-<MfmCore :text="text" :plain="plain" :nowrap="nowrap" :author="author" :customEmojis="customEmojis" :isNote="isNote" class="havbbuyv" :class="{ nowrap }"/>
+	<MfmCore
+		:text="text"
+		:plain="plain"
+		:nowrap="nowrap"
+		:author="author"
+		:customEmojis="customEmojis"
+		:isNote="isNote"
+		class="havbbuyv"
+		:class="{ nowrap }"
+	/>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import MfmCore from '@/components/mfm';
+import {} from "vue";
+import MfmCore from "@/components/mfm";
 
-const props = withDefaults(defineProps<{
-	text: string;
-	plain?: boolean;
-	nowrap?: boolean;
-	author?: any;
-	customEmojis?: any;
-	isNote?: boolean;
-}>(), {
-	plain: false,
-	nowrap: false,
-	author: null,
-	isNote: true,
-});
+const props = withDefaults(
+	defineProps<{
+		text: string;
+		plain?: boolean;
+		nowrap?: boolean;
+		author?: any;
+		customEmojis?: any;
+		isNote?: boolean;
+	}>(),
+	{
+		plain: false,
+		nowrap: false,
+		author: null,
+		isNote: true,
+	}
+);
 </script>
 
 <style lang="scss">
@@ -34,14 +46,20 @@ const props = withDefaults(defineProps<{
 	--mfm-zoom-size: 600%;
 }
 
-.mfm-x2, .mfm-x3, .mfm-x4 {
+.mfm-x2,
+.mfm-x3,
+.mfm-x4 {
 	font-size: var(--mfm-zoom-size);
 
-	.mfm-x2, .mfm-x3, .mfm-x4 {
+	.mfm-x2,
+	.mfm-x3,
+	.mfm-x4 {
 		/* only half effective */
 		font-size: calc(var(--mfm-zoom-size) / 2 + 50%);
 
-		.mfm-x2, .mfm-x3, .mfm-x4 {
+		.mfm-x2,
+		.mfm-x3,
+		.mfm-x4 {
 			/* disabled */
 			font-size: 100%;
 		}
@@ -49,103 +67,237 @@ const props = withDefaults(defineProps<{
 }
 
 @keyframes mfm-spin {
-	0% { transform: rotate(0deg); }
-	100% { transform: rotate(360deg); }
+	0% {
+		transform: rotate(0deg);
+	}
+	100% {
+		transform: rotate(360deg);
+	}
 }
 
 @keyframes mfm-spinX {
-	0% { transform: perspective(128px) rotateX(0deg); }
-	100% { transform: perspective(128px) rotateX(360deg); }
+	0% {
+		transform: perspective(128px) rotateX(0deg);
+	}
+	100% {
+		transform: perspective(128px) rotateX(360deg);
+	}
 }
 
 @keyframes mfm-spinY {
-	0% { transform: perspective(128px) rotateY(0deg); }
-	100% { transform: perspective(128px) rotateY(360deg); }
+	0% {
+		transform: perspective(128px) rotateY(0deg);
+	}
+	100% {
+		transform: perspective(128px) rotateY(360deg);
+	}
 }
 
 @keyframes mfm-jump {
-	0% { transform: translateY(0); }
-	25% { transform: translateY(-16px); }
-	50% { transform: translateY(0); }
-	75% { transform: translateY(-8px); }
-	100% { transform: translateY(0); }
+	0% {
+		transform: translateY(0);
+	}
+	25% {
+		transform: translateY(-16px);
+	}
+	50% {
+		transform: translateY(0);
+	}
+	75% {
+		transform: translateY(-8px);
+	}
+	100% {
+		transform: translateY(0);
+	}
 }
 
 @keyframes mfm-bounce {
-	0% { transform: translateY(0) scale(1, 1); }
-	25% { transform: translateY(-16px) scale(1, 1); }
-	50% { transform: translateY(0) scale(1, 1); }
-	75% { transform: translateY(0) scale(1.5, 0.75); }
-	100% { transform: translateY(0) scale(1, 1); }
+	0% {
+		transform: translateY(0) scale(1, 1);
+	}
+	25% {
+		transform: translateY(-16px) scale(1, 1);
+	}
+	50% {
+		transform: translateY(0) scale(1, 1);
+	}
+	75% {
+		transform: translateY(0) scale(1.5, 0.75);
+	}
+	100% {
+		transform: translateY(0) scale(1, 1);
+	}
 }
 
 // const val = () => `translate(${Math.floor(Math.random() * 20) - 10}px, ${Math.floor(Math.random() * 20) - 10}px)`;
 // let css = '';
 // for (let i = 0; i <= 100; i += 5) { css += `${i}% { transform: ${val()} }\n`; }
 @keyframes mfm-twitch {
-	0% { transform: translate(7px, -2px) }
-	5% { transform: translate(-3px, 1px) }
-	10% { transform: translate(-7px, -1px) }
-	15% { transform: translate(0px, -1px) }
-	20% { transform: translate(-8px, 6px) }
-	25% { transform: translate(-4px, -3px) }
-	30% { transform: translate(-4px, -6px) }
-	35% { transform: translate(-8px, -8px) }
-	40% { transform: translate(4px, 6px) }
-	45% { transform: translate(-3px, 1px) }
-	50% { transform: translate(2px, -10px) }
-	55% { transform: translate(-7px, 0px) }
-	60% { transform: translate(-2px, 4px) }
-	65% { transform: translate(3px, -8px) }
-	70% { transform: translate(6px, 7px) }
-	75% { transform: translate(-7px, -2px) }
-	80% { transform: translate(-7px, -8px) }
-	85% { transform: translate(9px, 3px) }
-	90% { transform: translate(-3px, -2px) }
-	95% { transform: translate(-10px, 2px) }
-	100% { transform: translate(-2px, -6px) }
+	0% {
+		transform: translate(7px, -2px);
+	}
+	5% {
+		transform: translate(-3px, 1px);
+	}
+	10% {
+		transform: translate(-7px, -1px);
+	}
+	15% {
+		transform: translate(0px, -1px);
+	}
+	20% {
+		transform: translate(-8px, 6px);
+	}
+	25% {
+		transform: translate(-4px, -3px);
+	}
+	30% {
+		transform: translate(-4px, -6px);
+	}
+	35% {
+		transform: translate(-8px, -8px);
+	}
+	40% {
+		transform: translate(4px, 6px);
+	}
+	45% {
+		transform: translate(-3px, 1px);
+	}
+	50% {
+		transform: translate(2px, -10px);
+	}
+	55% {
+		transform: translate(-7px, 0px);
+	}
+	60% {
+		transform: translate(-2px, 4px);
+	}
+	65% {
+		transform: translate(3px, -8px);
+	}
+	70% {
+		transform: translate(6px, 7px);
+	}
+	75% {
+		transform: translate(-7px, -2px);
+	}
+	80% {
+		transform: translate(-7px, -8px);
+	}
+	85% {
+		transform: translate(9px, 3px);
+	}
+	90% {
+		transform: translate(-3px, -2px);
+	}
+	95% {
+		transform: translate(-10px, 2px);
+	}
+	100% {
+		transform: translate(-2px, -6px);
+	}
 }
 
 // const val = () => `translate(${Math.floor(Math.random() * 6) - 3}px, ${Math.floor(Math.random() * 6) - 3}px) rotate(${Math.floor(Math.random() * 24) - 12}deg)`;
 // let css = '';
 // for (let i = 0; i <= 100; i += 5) { css += `${i}% { transform: ${val()} }\n`; }
 @keyframes mfm-shake {
-	0% { transform: translate(-3px, -1px) rotate(-8deg) }
-	5% { transform: translate(0px, -1px) rotate(-10deg) }
-	10% { transform: translate(1px, -3px) rotate(0deg) }
-	15% { transform: translate(1px, 1px) rotate(11deg) }
-	20% { transform: translate(-2px, 1px) rotate(1deg) }
-	25% { transform: translate(-1px, -2px) rotate(-2deg) }
-	30% { transform: translate(-1px, 2px) rotate(-3deg) }
-	35% { transform: translate(2px, 1px) rotate(6deg) }
-	40% { transform: translate(-2px, -3px) rotate(-9deg) }
-	45% { transform: translate(0px, -1px) rotate(-12deg) }
-	50% { transform: translate(1px, 2px) rotate(10deg) }
-	55% { transform: translate(0px, -3px) rotate(8deg) }
-	60% { transform: translate(1px, -1px) rotate(8deg) }
-	65% { transform: translate(0px, -1px) rotate(-7deg) }
-	70% { transform: translate(-1px, -3px) rotate(6deg) }
-	75% { transform: translate(0px, -2px) rotate(4deg) }
-	80% { transform: translate(-2px, -1px) rotate(3deg) }
-	85% { transform: translate(1px, -3px) rotate(-10deg) }
-	90% { transform: translate(1px, 0px) rotate(3deg) }
-	95% { transform: translate(-2px, 0px) rotate(-3deg) }
-	100% { transform: translate(2px, 1px) rotate(2deg) }
+	0% {
+		transform: translate(-3px, -1px) rotate(-8deg);
+	}
+	5% {
+		transform: translate(0px, -1px) rotate(-10deg);
+	}
+	10% {
+		transform: translate(1px, -3px) rotate(0deg);
+	}
+	15% {
+		transform: translate(1px, 1px) rotate(11deg);
+	}
+	20% {
+		transform: translate(-2px, 1px) rotate(1deg);
+	}
+	25% {
+		transform: translate(-1px, -2px) rotate(-2deg);
+	}
+	30% {
+		transform: translate(-1px, 2px) rotate(-3deg);
+	}
+	35% {
+		transform: translate(2px, 1px) rotate(6deg);
+	}
+	40% {
+		transform: translate(-2px, -3px) rotate(-9deg);
+	}
+	45% {
+		transform: translate(0px, -1px) rotate(-12deg);
+	}
+	50% {
+		transform: translate(1px, 2px) rotate(10deg);
+	}
+	55% {
+		transform: translate(0px, -3px) rotate(8deg);
+	}
+	60% {
+		transform: translate(1px, -1px) rotate(8deg);
+	}
+	65% {
+		transform: translate(0px, -1px) rotate(-7deg);
+	}
+	70% {
+		transform: translate(-1px, -3px) rotate(6deg);
+	}
+	75% {
+		transform: translate(0px, -2px) rotate(4deg);
+	}
+	80% {
+		transform: translate(-2px, -1px) rotate(3deg);
+	}
+	85% {
+		transform: translate(1px, -3px) rotate(-10deg);
+	}
+	90% {
+		transform: translate(1px, 0px) rotate(3deg);
+	}
+	95% {
+		transform: translate(-2px, 0px) rotate(-3deg);
+	}
+	100% {
+		transform: translate(2px, 1px) rotate(2deg);
+	}
 }
 
 @keyframes mfm-rubberBand {
-	from { transform: scale3d(1, 1, 1); }
-	30% { transform: scale3d(1.25, 0.75, 1); }
-	40% { transform: scale3d(0.75, 1.25, 1); }
-	50% { transform: scale3d(1.15, 0.85, 1); }
-	65% { transform: scale3d(0.95, 1.05, 1); }
-	75% { transform: scale3d(1.05, 0.95, 1); }
-	to { transform: scale3d(1, 1, 1); }
+	from {
+		transform: scale3d(1, 1, 1);
+	}
+	30% {
+		transform: scale3d(1.25, 0.75, 1);
+	}
+	40% {
+		transform: scale3d(0.75, 1.25, 1);
+	}
+	50% {
+		transform: scale3d(1.15, 0.85, 1);
+	}
+	65% {
+		transform: scale3d(0.95, 1.05, 1);
+	}
+	75% {
+		transform: scale3d(1.05, 0.95, 1);
+	}
+	to {
+		transform: scale3d(1, 1, 1);
+	}
 }
 
 @keyframes mfm-rainbow {
-	0% { filter: hue-rotate(0deg) contrast(150%) saturate(150%); }
-	100% { filter: hue-rotate(360deg) contrast(150%) saturate(150%); }
+	0% {
+		filter: hue-rotate(0deg) contrast(150%) saturate(150%);
+	}
+	100% {
+		filter: hue-rotate(360deg) contrast(150%) saturate(150%);
+	}
 }
 </style>
 
diff --git a/packages/client/src/components/global/MkPageHeader.vue b/packages/client/src/components/global/MkPageHeader.vue
index ccfe5b95cd..ad1d80ca6a 100644
--- a/packages/client/src/components/global/MkPageHeader.vue
+++ b/packages/client/src/components/global/MkPageHeader.vue
@@ -1,24 +1,78 @@
 <template>
-	<div v-if="show" ref="el" class="fdidabkb" :class="{ slim: narrow, thin: thin_ }" :style="{ background: bg }" @click="onClick">
-		<i @click="goBack()" v-if="props.displayBackButton" v-tooltip.noDelay="i18n.ts.goBack" class="icon backButton ph-caret-left ph-bold ph-lg"></i>
+	<div
+		v-if="show"
+		ref="el"
+		class="fdidabkb"
+		:class="{ slim: narrow, thin: thin_ }"
+		:style="{ background: bg }"
+		@click="onClick"
+	>
+		<i
+			@click="goBack()"
+			v-if="props.displayBackButton"
+			v-tooltip.noDelay="i18n.ts.goBack"
+			class="icon backButton ph-caret-left ph-bold ph-lg"
+		></i>
 		<div v-if="narrow" class="buttons left" @click="openAccountMenu">
-			<MkAvatar v-if="props.displayMyAvatar && $i" class="avatar" :user="$i" :disable-preview="true"/>
+			<MkAvatar
+				v-if="props.displayMyAvatar && $i"
+				class="avatar"
+				:user="$i"
+				:disable-preview="true"
+			/>
 		</div>
-	<template v-if="metadata">
-		<div v-if="!hideTitle" class="titleContainer" @click="showTabsPopup">
-			<MkAvatar v-if="metadata.avatar" class="avatar" :user="metadata.avatar" :disable-preview="true" :show-indicator="true"/>
-				<i v-else-if="metadata.icon && !narrow" class="icon" :class="metadata.icon"></i>
+		<template v-if="metadata">
+			<div
+				v-if="!hideTitle"
+				class="titleContainer"
+				@click="showTabsPopup"
+			>
+				<MkAvatar
+					v-if="metadata.avatar"
+					class="avatar"
+					:user="metadata.avatar"
+					:disable-preview="true"
+					:show-indicator="true"
+				/>
+				<i
+					v-else-if="metadata.icon && !narrow"
+					class="icon"
+					:class="metadata.icon"
+				></i>
 
 				<div class="title">
-					<MkUserName v-if="metadata.userName" :user="metadata.userName" :nowrap="true" class="title"/>
-					<div v-else-if="metadata.title && !(tabs != null && tabs.length > 0 && narrow)" class="title">{{ metadata.title }}</div>
+					<MkUserName
+						v-if="metadata.userName"
+						:user="metadata.userName"
+						:nowrap="true"
+						class="title"
+					/>
+					<div
+						v-else-if="
+							metadata.title &&
+							!(tabs != null && tabs.length > 0 && narrow)
+						"
+						class="title"
+					>
+						{{ metadata.title }}
+					</div>
 					<div v-if="!narrow && metadata.subtitle" class="subtitle">
 						{{ metadata.subtitle }}
 					</div>
 				</div>
 			</div>
 			<div ref="tabsEl" v-if="hasTabs" class="tabs">
-				<button v-for="tab in tabs" :ref="(el) => tabRefs[tab.key] = el" v-tooltip.noDelay="tab.title" class="tab _button" :class="{ active: tab.key != null && tab.key === props.tab }" @mousedown="(ev) => onTabMousedown(tab, ev)" @click="(ev) => onTabClick(tab, ev)">
+				<button
+					v-for="tab in tabs"
+					:ref="(el) => (tabRefs[tab.key] = el)"
+					v-tooltip.noDelay="tab.title"
+					class="tab _button"
+					:class="{
+						active: tab.key != null && tab.key === props.tab,
+					}"
+					@mousedown="(ev) => onTabMousedown(tab, ev)"
+					@click="(ev) => onTabClick(tab, ev)"
+				>
 					<i v-if="tab.icon" class="icon" :class="tab.icon"></i>
 					<span class="title">{{ tab.title }}</span>
 				</button>
@@ -27,21 +81,39 @@
 		</template>
 		<div class="buttons right">
 			<template v-for="action in actions">
-				<button v-tooltip.noDelay="action.text" class="_button button" :class="{ highlighted: action.highlighted }" @click.stop="action.handler" @touchstart="preventDrag"><i :class="action.icon"></i></button>
+				<button
+					v-tooltip.noDelay="action.text"
+					class="_button button"
+					:class="{ highlighted: action.highlighted }"
+					@click.stop="action.handler"
+					@touchstart="preventDrag"
+				>
+					<i :class="action.icon"></i>
+				</button>
 			</template>
 		</div>
 	</div>
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted, onUnmounted, ref, inject, watch, shallowReactive, nextTick, reactive } from 'vue';
-import tinycolor from 'tinycolor2';
-import { popupMenu } from '@/os';
-import { scrollToTop } from '@/scripts/scroll';
-import { globalEvents } from '@/events';
-import { injectPageMetadata } from '@/scripts/page-metadata';
-import { $i, openAccountMenu as openAccountMenu_ } from '@/account';
-import { i18n } from '@/i18n';
+import {
+	computed,
+	onMounted,
+	onUnmounted,
+	ref,
+	inject,
+	watch,
+	shallowReactive,
+	nextTick,
+	reactive,
+} from "vue";
+import tinycolor from "tinycolor2";
+import { popupMenu } from "@/os";
+import { scrollToTop } from "@/scripts/scroll";
+import { globalEvents } from "@/events";
+import { injectPageMetadata } from "@/scripts/page-metadata";
+import { $i, openAccountMenu as openAccountMenu_ } from "@/account";
+import { i18n } from "@/i18n";
 
 type Tab = {
 	key?: string | null;
@@ -65,13 +137,13 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-	(ev: 'update:tab', key: string);
+	(ev: "update:tab", key: string);
 }>();
 
 const metadata = injectPageMetadata();
 
-const hideTitle = inject('shouldOmitHeaderTitle', false);
-const thin_ = props.thin || inject('shouldHeaderThin', false);
+const hideTitle = inject("shouldOmitHeaderTitle", false);
+const thin_ = props.thin || inject("shouldHeaderThin", false);
 
 const el = $ref<HTMLElement | null>(null);
 const tabRefs = {};
@@ -87,9 +159,12 @@ const show = $computed(() => {
 });
 
 const openAccountMenu = (ev: MouseEvent) => {
-	openAccountMenu_({
-		withExtraOperation: true,
-	}, ev);
+	openAccountMenu_(
+		{
+			withExtraOperation: true,
+		},
+		ev
+	);
 };
 
 const showTabsPopup = (ev: MouseEvent) => {
@@ -97,7 +172,7 @@ const showTabsPopup = (ev: MouseEvent) => {
 	if (!narrow) return;
 	ev.preventDefault();
 	ev.stopPropagation();
-	const menu = props.tabs.map(tab => ({
+	const menu = props.tabs.map((tab) => ({
 		text: tab.title,
 		icon: tab.icon,
 		active: tab.key != null && tab.key === props.tab,
@@ -113,13 +188,13 @@ const preventDrag = (ev: TouchEvent) => {
 };
 
 const onClick = () => {
-	scrollToTop(el, { behavior: 'smooth' });
+	scrollToTop(el, { behavior: "smooth" });
 };
 
 function onTabMousedown(tab: Tab, ev: MouseEvent): void {
 	// ユーザビリティの観点からmousedown時にはonClickは呼ばない
 	if (tab.key) {
-		emit('update:tab', tab.key);
+		emit("update:tab", tab.key);
 	}
 }
 
@@ -130,7 +205,7 @@ function onTabClick(tab: Tab, ev: MouseEvent): void {
 		tab.onClick(ev);
 	}
 	if (tab.key) {
-		emit('update:tab', tab.key);
+		emit("update:tab", tab.key);
 	}
 }
 
@@ -139,8 +214,14 @@ function goBack(): void {
 }
 
 const calcBg = () => {
-	const rawBg = metadata?.bg || 'var(--bg)';
-	const tinyBg = tinycolor(rawBg.startsWith('var(') ? getComputedStyle(document.documentElement).getPropertyValue(rawBg.slice(4, -1)) : rawBg);
+	const rawBg = metadata?.bg || "var(--bg)";
+	const tinyBg = tinycolor(
+		rawBg.startsWith("var(")
+			? getComputedStyle(document.documentElement).getPropertyValue(
+					rawBg.slice(4, -1)
+			  )
+			: rawBg
+	);
 	tinyBg.setAlpha(0.85);
 	bg.value = tinyBg.toRgbString();
 };
@@ -149,31 +230,39 @@ let ro: ResizeObserver | null;
 
 onMounted(() => {
 	calcBg();
-	globalEvents.on('themeChanged', calcBg);
+	globalEvents.on("themeChanged", calcBg);
 
-	watch(() => [props.tab, props.tabs], () => {
-		nextTick(() => {
-			const tabEl = tabRefs[props.tab];
-			if (tabEl && tabHighlightEl) {
-				// offsetWidth や offsetLeft は少数を丸めてしまうため getBoundingClientRect を使う必要がある
-				// https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/offsetWidth#%E5%80%A4
-				const tabSizeX = tabEl.scrollWidth + 20; // + the tab's padding
-				tabEl.style = `--width: ${tabSizeX}px`;
-				setTimeout(() => {
-					const parentRect = tabsEl.getBoundingClientRect();
-					const rect = tabEl.getBoundingClientRect();
-					const left = (rect.left - parentRect.left + tabsEl?.scrollLeft);
-					tabHighlightEl.style.width = tabSizeX + 'px';
-					tabHighlightEl.style.transform = `translateX(${left}px)`;
-					window.requestAnimationFrame(() => {
-						tabsEl?.scrollTo({left: left - 60, behavior: "smooth"});
-					})
-				}, 200);
-			}
-		});
-	}, {
-		immediate: true,
-	});
+	watch(
+		() => [props.tab, props.tabs],
+		() => {
+			nextTick(() => {
+				const tabEl = tabRefs[props.tab];
+				if (tabEl && tabHighlightEl) {
+					// offsetWidth や offsetLeft は少数を丸めてしまうため getBoundingClientRect を使う必要がある
+					// https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/offsetWidth#%E5%80%A4
+					const tabSizeX = tabEl.scrollWidth + 20; // + the tab's padding
+					tabEl.style = `--width: ${tabSizeX}px`;
+					setTimeout(() => {
+						const parentRect = tabsEl.getBoundingClientRect();
+						const rect = tabEl.getBoundingClientRect();
+						const left =
+							rect.left - parentRect.left + tabsEl?.scrollLeft;
+						tabHighlightEl.style.width = tabSizeX + "px";
+						tabHighlightEl.style.transform = `translateX(${left}px)`;
+						window.requestAnimationFrame(() => {
+							tabsEl?.scrollTo({
+								left: left - 60,
+								behavior: "smooth",
+							});
+						});
+					}, 200);
+				}
+			});
+		},
+		{
+			immediate: true,
+		}
+	);
 
 	if (el && el.parentElement) {
 		narrow = el.parentElement.offsetWidth < 500;
@@ -187,7 +276,7 @@ onMounted(() => {
 });
 
 onUnmounted(() => {
-	globalEvents.off('themeChanged', calcBg);
+	globalEvents.off("themeChanged", calcBg);
 	if (ro) ro.disconnect();
 });
 </script>
@@ -227,8 +316,18 @@ onUnmounted(() => {
 		}
 		> .tabs {
 			padding-inline: 12px;
-			mask: linear-gradient(to right, transparent, black 10px 80%, transparent);
-			-webkit-mask: linear-gradient(to right, transparent, black 10px 80%, transparent);
+			mask: linear-gradient(
+				to right,
+				transparent,
+				black 10px 80%,
+				transparent
+			);
+			-webkit-mask: linear-gradient(
+				to right,
+				transparent,
+				black 10px 80%,
+				transparent
+			);
 			margin-left: -10px;
 			padding-left: 22px;
 			scrollbar-width: none;
@@ -238,7 +337,8 @@ onUnmounted(() => {
 			&::-webkit-scrollbar {
 				display: none;
 			}
-			&::after { // Force right padding
+			&::after {
+				// Force right padding
 				content: "";
 				display: inline-block;
 				min-width: 20%;
@@ -393,7 +493,7 @@ onUnmounted(() => {
 			width: 38px;
 			--width: 38px;
 			overflow: hidden;
-			transition: color .2s, opacity .2s, width .2s;
+			transition: color 0.2s, opacity 0.2s, width 0.2s;
 
 			&:hover {
 				opacity: 1;
@@ -413,7 +513,7 @@ onUnmounted(() => {
 				margin-left: 8px;
 			}
 			> .title {
-				transition: opacity .2s;
+				transition: opacity 0.2s;
 			}
 		}
 
@@ -424,8 +524,8 @@ onUnmounted(() => {
 			height: 3px;
 			background: var(--accent);
 			border-radius: 999px;
-			transition: width .2s, transform .2s;
-			transition-timing-function: cubic-bezier(0,0,0,1.2);
+			transition: width 0.2s, transform 0.2s;
+			transition-timing-function: cubic-bezier(0, 0, 0, 1.2);
 			pointer-events: none;
 		}
 	}
diff --git a/packages/client/src/components/global/MkSpacer.vue b/packages/client/src/components/global/MkSpacer.vue
index 53adf07771..3dc93efdd0 100644
--- a/packages/client/src/components/global/MkSpacer.vue
+++ b/packages/client/src/components/global/MkSpacer.vue
@@ -1,38 +1,44 @@
 <template>
-<div ref="root" :class="$style.root" :style="{ padding: margin + 'px' }">
-	<div ref="content" :class="$style.content">
-		<slot></slot>
+	<div ref="root" :class="$style.root" :style="{ padding: margin + 'px' }">
+		<div ref="content" :class="$style.content">
+			<slot></slot>
+		</div>
 	</div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { inject, onMounted, onUnmounted, ref } from 'vue';
-import { deviceKind } from '@/scripts/device-kind';
+import { inject, onMounted, onUnmounted, ref } from "vue";
+import { deviceKind } from "@/scripts/device-kind";
 
-const props = withDefaults(defineProps<{
-	contentMax?: number | null;
-	marginMin?: number;
-	marginMax?: number;
-}>(), {
-	contentMax: null,
-	marginMin: 12,
-	marginMax: 24,
-});
+const props = withDefaults(
+	defineProps<{
+		contentMax?: number | null;
+		marginMin?: number;
+		marginMax?: number;
+	}>(),
+	{
+		contentMax: null,
+		marginMin: 12,
+		marginMax: 24,
+	}
+);
 
 let ro: ResizeObserver;
 let root = $ref<HTMLElement>();
 let content = $ref<HTMLElement>();
 let margin = $ref(0);
-const shouldSpacerMin = inject('shouldSpacerMin', false);
+const shouldSpacerMin = inject("shouldSpacerMin", false);
 
-const adjust = (rect: { width: number; height: number; }) => {
-	if (shouldSpacerMin || deviceKind === 'smartphone') {
+const adjust = (rect: { width: number; height: number }) => {
+	if (shouldSpacerMin || deviceKind === "smartphone") {
 		margin = props.marginMin;
 		return;
 	}
 
-	if (rect.width > (props.contentMax ?? 0) || (rect.width > 360 && window.innerWidth > 400)) {
+	if (
+		rect.width > (props.contentMax ?? 0) ||
+		(rect.width > 360 && window.innerWidth > 400)
+	) {
 		margin = props.marginMax;
 	} else {
 		margin = props.marginMin;
diff --git a/packages/client/src/components/global/MkStickyContainer.vue b/packages/client/src/components/global/MkStickyContainer.vue
index 44f4f065a6..0818dd3eff 100644
--- a/packages/client/src/components/global/MkStickyContainer.vue
+++ b/packages/client/src/components/global/MkStickyContainer.vue
@@ -1,22 +1,22 @@
 <template>
-<div ref="rootEl">
-	<div ref="headerEl">
-		<slot name="header"></slot>
+	<div ref="rootEl">
+		<div ref="headerEl">
+			<slot name="header"></slot>
+		</div>
+		<div ref="bodyEl" :data-sticky-container-header-height="headerHeight">
+			<slot></slot>
+		</div>
 	</div>
-	<div ref="bodyEl" :data-sticky-container-header-height="headerHeight">
-		<slot></slot>
-	</div>
-</div>
 </template>
 
 <script lang="ts">
 // なんか動かない
 //const CURRENT_STICKY_TOP = Symbol('CURRENT_STICKY_TOP');
-const CURRENT_STICKY_TOP = 'CURRENT_STICKY_TOP';
+const CURRENT_STICKY_TOP = "CURRENT_STICKY_TOP";
 </script>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, provide, inject, Ref, ref, watch } from 'vue';
+import { onMounted, onUnmounted, provide, inject, Ref, ref, watch } from "vue";
 
 const rootEl = $ref<HTMLElement>();
 const headerEl = $ref<HTMLElement>();
@@ -43,15 +43,19 @@ onMounted(() => {
 
 	watch(parentStickyTop, calc);
 
-	watch($$(childStickyTop), () => {
-		bodyEl.style.setProperty('--stickyTop', `${childStickyTop}px`);
-	}, {
-		immediate: true,
-	});
+	watch(
+		$$(childStickyTop),
+		() => {
+			bodyEl.style.setProperty("--stickyTop", `${childStickyTop}px`);
+		},
+		{
+			immediate: true,
+		}
+	);
 
-	headerEl.style.position = 'sticky';
-	headerEl.style.top = 'var(--stickyTop, 0)';
-	headerEl.style.zIndex = '1000';
+	headerEl.style.position = "sticky";
+	headerEl.style.top = "var(--stickyTop, 0)";
+	headerEl.style.zIndex = "1000";
 
 	observer.observe(headerEl);
 });
@@ -61,6 +65,4 @@ onUnmounted(() => {
 });
 </script>
 
-<style lang="scss" module>
-
-</style>
+<style lang="scss" module></style>
diff --git a/packages/client/src/components/global/MkTime.vue b/packages/client/src/components/global/MkTime.vue
index f72b153f56..66a6416e89 100644
--- a/packages/client/src/components/global/MkTime.vue
+++ b/packages/client/src/components/global/MkTime.vue
@@ -1,38 +1,51 @@
 <template>
-<time :title="absolute">
-	<template v-if="mode === 'relative'">{{ relative }}</template>
-	<template v-else-if="mode === 'absolute'">{{ absolute }}</template>
-	<template v-else-if="mode === 'detail'">{{ absolute }} ({{ relative }})</template>
-</time>
+	<time :title="absolute">
+		<template v-if="mode === 'relative'">{{ relative }}</template>
+		<template v-else-if="mode === 'absolute'">{{ absolute }}</template>
+		<template v-else-if="mode === 'detail'"
+			>{{ absolute }} ({{ relative }})</template
+		>
+	</time>
 </template>
 
 <script lang="ts" setup>
-import { onUnmounted } from 'vue';
-import { i18n } from '@/i18n';
+import { onUnmounted } from "vue";
+import { i18n } from "@/i18n";
 
-const props = withDefaults(defineProps<{
-	time: Date | string;
-	mode?: 'relative' | 'absolute' | 'detail';
-}>(), {
-	mode: 'relative',
-});
+const props = withDefaults(
+	defineProps<{
+		time: Date | string;
+		mode?: "relative" | "absolute" | "detail";
+	}>(),
+	{
+		mode: "relative",
+	}
+);
 
-const _time = typeof props.time === 'string' ? new Date(props.time) : props.time;
+const _time =
+	typeof props.time === "string" ? new Date(props.time) : props.time;
 const absolute = _time.toLocaleString();
 
 let now = $shallowRef(new Date());
 const relative = $computed(() => {
-	const ago = (now.getTime() - _time.getTime()) / 1000/*ms*/;
-	return (
-		ago >= 31536000 ? i18n.t('_ago.yearsAgo', { n: Math.round(ago / 31536000).toString() }) :
-		ago >= 2592000 ? i18n.t('_ago.monthsAgo', { n: Math.round(ago / 2592000).toString() }) :
-		ago >= 604800 ? i18n.t('_ago.weeksAgo', { n: Math.round(ago / 604800).toString() }) :
-		ago >= 86400 ? i18n.t('_ago.daysAgo', { n: Math.round(ago / 86400).toString() }) :
-		ago >= 3600 ? i18n.t('_ago.hoursAgo', { n: Math.round(ago / 3600).toString() }) :
-		ago >= 60 ? i18n.t('_ago.minutesAgo', { n: (~~(ago / 60)).toString() }) :
-		ago >= 10 ? i18n.t('_ago.secondsAgo', { n: (~~(ago % 60)).toString() }) :
-		ago >= -1 ? i18n.ts._ago.justNow :
-		i18n.ts._ago.future);
+	const ago = (now.getTime() - _time.getTime()) / 1000; /*ms*/
+	return ago >= 31536000
+		? i18n.t("_ago.yearsAgo", { n: Math.round(ago / 31536000).toString() })
+		: ago >= 2592000
+		? i18n.t("_ago.monthsAgo", { n: Math.round(ago / 2592000).toString() })
+		: ago >= 604800
+		? i18n.t("_ago.weeksAgo", { n: Math.round(ago / 604800).toString() })
+		: ago >= 86400
+		? i18n.t("_ago.daysAgo", { n: Math.round(ago / 86400).toString() })
+		: ago >= 3600
+		? i18n.t("_ago.hoursAgo", { n: Math.round(ago / 3600).toString() })
+		: ago >= 60
+		? i18n.t("_ago.minutesAgo", { n: (~~(ago / 60)).toString() })
+		: ago >= 10
+		? i18n.t("_ago.secondsAgo", { n: (~~(ago % 60)).toString() })
+		: ago >= -1
+		? i18n.ts._ago.justNow
+		: i18n.ts._ago.future;
 });
 
 function tick() {
@@ -46,7 +59,7 @@ function tick() {
 
 let tickId: number;
 
-if (props.mode === 'relative' || props.mode === 'detail') {
+if (props.mode === "relative" || props.mode === "detail") {
 	tickId = window.requestAnimationFrame(tick);
 
 	onUnmounted(() => {
diff --git a/packages/client/src/components/global/MkUrl.vue b/packages/client/src/components/global/MkUrl.vue
index 1fe4b02691..787119104e 100644
--- a/packages/client/src/components/global/MkUrl.vue
+++ b/packages/client/src/components/global/MkUrl.vue
@@ -1,30 +1,41 @@
 <template>
-<component
-	:is="self ? 'MkA' : 'a'" ref="el" class="ieqqeuvs _link" :[attr]="self ? url.substr(local.length) : url" :rel="rel" :target="target"
-	@contextmenu.stop="() => {}" @click.stop
->
-	<template v-if="!self">
-		<span class="schema">{{ schema }}//</span>
-		<span class="hostname">{{ hostname }}</span>
-		<span v-if="port != ''" class="port">:{{ port }}</span>
-	</template>
-	<template v-if="pathname === '/' && self">
-		<span class="self">{{ hostname }}</span>
-	</template>
-	<span v-if="pathname != ''" class="pathname">{{ self ? pathname.substr(1) : pathname }}</span>
-	<span class="query">{{ query }}</span>
-	<span class="hash">{{ hash }}</span>
-	<i v-if="target === '_blank'" class="ph-arrow-square-out ph-bold ph-lg icon"></i>
-</component>
+	<component
+		:is="self ? 'MkA' : 'a'"
+		ref="el"
+		class="ieqqeuvs _link"
+		:[attr]="self ? url.substr(local.length) : url"
+		:rel="rel"
+		:target="target"
+		@contextmenu.stop="() => {}"
+		@click.stop
+	>
+		<template v-if="!self">
+			<span class="schema">{{ schema }}//</span>
+			<span class="hostname">{{ hostname }}</span>
+			<span v-if="port != ''" class="port">:{{ port }}</span>
+		</template>
+		<template v-if="pathname === '/' && self">
+			<span class="self">{{ hostname }}</span>
+		</template>
+		<span v-if="pathname != ''" class="pathname">{{
+			self ? pathname.substr(1) : pathname
+		}}</span>
+		<span class="query">{{ query }}</span>
+		<span class="hash">{{ hash }}</span>
+		<i
+			v-if="target === '_blank'"
+			class="ph-arrow-square-out ph-bold ph-lg icon"
+		></i>
+	</component>
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent, ref } from 'vue';
-import { toUnicode as decodePunycode } from 'punycode/';
-import { url as local } from '@/config';
-import * as os from '@/os';
-import { useTooltip } from '@/scripts/use-tooltip';
-import { safeURIDecode } from '@/scripts/safe-uri-decode';
+import { defineAsyncComponent, ref } from "vue";
+import { toUnicode as decodePunycode } from "punycode/";
+import { url as local } from "@/config";
+import * as os from "@/os";
+import { useTooltip } from "@/scripts/use-tooltip";
+import { safeURIDecode } from "@/scripts/safe-uri-decode";
 
 const props = defineProps<{
 	url: string;
@@ -33,15 +44,22 @@ const props = defineProps<{
 
 const self = props.url.startsWith(local);
 const url = new URL(props.url);
-if (!['http:', 'https:'].includes(url.protocol)) throw new Error('invalid url');
+if (!["http:", "https:"].includes(url.protocol)) throw new Error("invalid url");
 const el = ref();
 
 useTooltip(el, (showing) => {
-	os.popup(defineAsyncComponent(() => import('@/components/MkUrlPreviewPopup.vue')), {
-		showing,
-		url: props.url,
-		source: el.value,
-	}, {}, 'closed');
+	os.popup(
+		defineAsyncComponent(
+			() => import("@/components/MkUrlPreviewPopup.vue")
+		),
+		{
+			showing,
+			url: props.url,
+			source: el.value,
+		},
+		{},
+		"closed"
+	);
 });
 
 const schema = url.protocol;
@@ -50,8 +68,8 @@ const port = url.port;
 const pathname = safeURIDecode(url.pathname);
 const query = safeURIDecode(url.search);
 const hash = safeURIDecode(url.hash);
-const attr = self ? 'to' : 'href';
-const target = self ? null : '_blank';
+const attr = self ? "to" : "href";
+const target = self ? null : "_blank";
 </script>
 
 <style lang="scss" scoped>
@@ -60,7 +78,7 @@ const target = self ? null : '_blank';
 
 	> .icon {
 		padding-left: 2px;
-		font-size: .9em;
+		font-size: 0.9em;
 	}
 
 	> .self {
diff --git a/packages/client/src/components/global/MkUserName.vue b/packages/client/src/components/global/MkUserName.vue
index 4dfa91b18c..a79add3c26 100644
--- a/packages/client/src/components/global/MkUserName.vue
+++ b/packages/client/src/components/global/MkUserName.vue
@@ -1,17 +1,26 @@
 <template>
-<Mfm :class="$style.root" :text="user.name || user.username" :plain="true" :nowrap="nowrap" :custom-emojis="user.emojis"/>
+	<Mfm
+		:class="$style.root"
+		:text="user.name || user.username"
+		:plain="true"
+		:nowrap="nowrap"
+		:custom-emojis="user.emojis"
+	/>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import * as misskey from 'calckey-js';
+import {} from "vue";
+import * as misskey from "calckey-js";
 
-const props = withDefaults(defineProps<{
-	user: misskey.entities.User;
-	nowrap?: boolean;
-}>(), {
-	nowrap: true,
-});
+const props = withDefaults(
+	defineProps<{
+		user: misskey.entities.User;
+		nowrap?: boolean;
+	}>(),
+	{
+		nowrap: true,
+	}
+);
 </script>
 
 <style lang="scss" module>
diff --git a/packages/client/src/components/global/RouterView.vue b/packages/client/src/components/global/RouterView.vue
index e21a57471c..8423ce7739 100644
--- a/packages/client/src/components/global/RouterView.vue
+++ b/packages/client/src/components/global/RouterView.vue
@@ -1,32 +1,44 @@
 <template>
-<KeepAlive :max="defaultStore.state.numberOfPageCache">
-	<Suspense>
-		<component :is="currentPageComponent" :key="key" v-bind="Object.fromEntries(currentPageProps)"/>
+	<KeepAlive :max="defaultStore.state.numberOfPageCache">
+		<Suspense>
+			<component
+				:is="currentPageComponent"
+				:key="key"
+				v-bind="Object.fromEntries(currentPageProps)"
+			/>
 
-		<template #fallback>
-			<MkLoading/>
-		</template>
-	</Suspense>
-</KeepAlive>
+			<template #fallback>
+				<MkLoading />
+			</template>
+		</Suspense>
+	</KeepAlive>
 </template>
 
 <script lang="ts" setup>
-import { inject, nextTick, onBeforeUnmount, onMounted, onUnmounted, provide, watch } from 'vue';
-import { Resolved, Router } from '@/nirax';
-import { defaultStore } from '@/store';
+import {
+	inject,
+	nextTick,
+	onBeforeUnmount,
+	onMounted,
+	onUnmounted,
+	provide,
+	watch,
+} from "vue";
+import { Resolved, Router } from "@/nirax";
+import { defaultStore } from "@/store";
 
 const props = defineProps<{
 	router?: Router;
 }>();
 
-const router = props.router ?? inject('router');
+const router = props.router ?? inject("router");
 
 if (router == null) {
-	throw new Error('no router provided');
+	throw new Error("no router provided");
 }
 
-const currentDepth = inject('routerCurrentDepth', 0);
-provide('routerCurrentDepth', currentDepth + 1);
+const currentDepth = inject("routerCurrentDepth", 0);
+provide("routerCurrentDepth", currentDepth + 1);
 
 function resolveNested(current: Resolved, d = 0): Resolved | null {
 	if (d === currentDepth) {
@@ -43,19 +55,22 @@ function resolveNested(current: Resolved, d = 0): Resolved | null {
 const current = resolveNested(router.current)!;
 let currentPageComponent = $shallowRef(current.route.component);
 let currentPageProps = $ref(current.props);
-let key = $ref(current.route.path + JSON.stringify(Object.fromEntries(current.props)));
+let key = $ref(
+	current.route.path + JSON.stringify(Object.fromEntries(current.props))
+);
 
 function onChange({ resolved, key: newKey }) {
 	const current = resolveNested(resolved);
 	if (current == null) return;
 	currentPageComponent = current.route.component;
 	currentPageProps = current.props;
-	key = current.route.path + JSON.stringify(Object.fromEntries(current.props));
+	key =
+		current.route.path + JSON.stringify(Object.fromEntries(current.props));
 }
 
-router.addListener('change', onChange);
+router.addListener("change", onChange);
 
 onBeforeUnmount(() => {
-	router.removeListener('change', onChange);
+	router.removeListener("change", onChange);
 });
 </script>
diff --git a/packages/client/src/components/page/page.block.vue b/packages/client/src/components/page/page.block.vue
index d7984afac2..edeb33a143 100644
--- a/packages/client/src/components/page/page.block.vue
+++ b/packages/client/src/components/page/page.block.vue
@@ -1,44 +1,64 @@
 <template>
-<component :is="'x-' + block.type" :key="block.id" :block="block" :hpml="hpml" :h="h"/>
+	<component
+		:is="'x-' + block.type"
+		:key="block.id"
+		:block="block"
+		:hpml="hpml"
+		:h="h"
+	/>
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from 'vue';
-import XText from './page.text.vue';
-import XSection from './page.section.vue';
-import XImage from './page.image.vue';
-import XButton from './page.button.vue';
-import XNumberInput from './page.number-input.vue';
-import XTextInput from './page.text-input.vue';
-import XTextareaInput from './page.textarea-input.vue';
-import XSwitch from './page.switch.vue';
-import XIf from './page.if.vue';
-import XTextarea from './page.textarea.vue';
-import XPost from './page.post.vue';
-import XCounter from './page.counter.vue';
-import XRadioButton from './page.radio-button.vue';
-import XCanvas from './page.canvas.vue';
-import XNote from './page.note.vue';
-import { Hpml } from '@/scripts/hpml/evaluator';
-import { Block } from '@/scripts/hpml/block';
+import { defineComponent, PropType } from "vue";
+import XText from "./page.text.vue";
+import XSection from "./page.section.vue";
+import XImage from "./page.image.vue";
+import XButton from "./page.button.vue";
+import XNumberInput from "./page.number-input.vue";
+import XTextInput from "./page.text-input.vue";
+import XTextareaInput from "./page.textarea-input.vue";
+import XSwitch from "./page.switch.vue";
+import XIf from "./page.if.vue";
+import XTextarea from "./page.textarea.vue";
+import XPost from "./page.post.vue";
+import XCounter from "./page.counter.vue";
+import XRadioButton from "./page.radio-button.vue";
+import XCanvas from "./page.canvas.vue";
+import XNote from "./page.note.vue";
+import { Hpml } from "@/scripts/hpml/evaluator";
+import { Block } from "@/scripts/hpml/block";
 
 export default defineComponent({
 	components: {
-		XText, XSection, XImage, XButton, XNumberInput, XTextInput, XTextareaInput, XTextarea, XPost, XSwitch, XIf, XCounter, XRadioButton, XCanvas, XNote
+		XText,
+		XSection,
+		XImage,
+		XButton,
+		XNumberInput,
+		XTextInput,
+		XTextareaInput,
+		XTextarea,
+		XPost,
+		XSwitch,
+		XIf,
+		XCounter,
+		XRadioButton,
+		XCanvas,
+		XNote,
 	},
 	props: {
 		block: {
 			type: Object as PropType<Block>,
-			required: true
+			required: true,
 		},
 		hpml: {
 			type: Object as PropType<Hpml>,
-			required: true
+			required: true,
 		},
 		h: {
 			type: Number,
-			required: true
-		}
+			required: true,
+		},
 	},
 });
 </script>
diff --git a/packages/client/src/components/page/page.button.vue b/packages/client/src/components/page/page.button.vue
index e8878df8de..b3c42eb603 100644
--- a/packages/client/src/components/page/page.button.vue
+++ b/packages/client/src/components/page/page.button.vue
@@ -1,58 +1,62 @@
 <template>
-<div>
-	<MkButton class="kudkigyw" :primary="block.primary" @click="click()">{{ hpml.interpolate(block.text) }}</MkButton>
-</div>
+	<div>
+		<MkButton class="kudkigyw" :primary="block.primary" @click="click()">{{
+			hpml.interpolate(block.text)
+		}}</MkButton>
+	</div>
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, unref } from 'vue';
-import MkButton from '../MkButton.vue';
-import * as os from '@/os';
-import { ButtonBlock } from '@/scripts/hpml/block';
-import { Hpml } from '@/scripts/hpml/evaluator';
+import { defineComponent, PropType, unref } from "vue";
+import MkButton from "../MkButton.vue";
+import * as os from "@/os";
+import { ButtonBlock } from "@/scripts/hpml/block";
+import { Hpml } from "@/scripts/hpml/evaluator";
 
 export default defineComponent({
 	components: {
-		MkButton
+		MkButton,
 	},
 	props: {
 		block: {
 			type: Object as PropType<ButtonBlock>,
-			required: true
+			required: true,
 		},
 		hpml: {
 			type: Object as PropType<Hpml>,
-			required: true
-		}
+			required: true,
+		},
 	},
 	methods: {
 		click() {
-			if (this.block.action === 'dialog') {
+			if (this.block.action === "dialog") {
 				this.hpml.eval();
 				os.alert({
-					text: this.hpml.interpolate(this.block.content)
+					text: this.hpml.interpolate(this.block.content),
 				});
-			} else if (this.block.action === 'resetRandom') {
+			} else if (this.block.action === "resetRandom") {
 				this.hpml.updateRandomSeed(Math.random());
 				this.hpml.eval();
-			} else if (this.block.action === 'pushEvent') {
-				os.api('page-push', {
+			} else if (this.block.action === "pushEvent") {
+				os.api("page-push", {
 					pageId: this.hpml.page.id,
 					event: this.block.event,
-					...(this.block.var ? {
-						var: unref(this.hpml.vars)[this.block.var]
-					} : {})
+					...(this.block.var
+						? {
+								var: unref(this.hpml.vars)[this.block.var],
+						  }
+						: {}),
 				});
 
 				os.alert({
-					type: 'success',
-					text: this.hpml.interpolate(this.block.message)
+					type: "success",
+					text: this.hpml.interpolate(this.block.message),
 				});
-			} else if (this.block.action === 'callAiScript') {
+			} else if (this.block.action === "callAiScript") {
 				this.hpml.callAiScript(this.block.fn);
 			}
-		}
-	}
+		},
+	},
 });
 </script>
 
diff --git a/packages/client/src/components/page/page.canvas.vue b/packages/client/src/components/page/page.canvas.vue
index 8f49b88e5e..1ed96e2ac5 100644
--- a/packages/client/src/components/page/page.canvas.vue
+++ b/packages/client/src/components/page/page.canvas.vue
@@ -1,25 +1,25 @@
 <template>
-<div class="ysrxegms">
-	<canvas ref="canvas" :width="block.width" :height="block.height"/>
-</div>
+	<div class="ysrxegms">
+		<canvas ref="canvas" :width="block.width" :height="block.height" />
+	</div>
 </template>
 
 <script lang="ts">
-import { defineComponent, onMounted, PropType, Ref, ref } from 'vue';
-import * as os from '@/os';
-import { CanvasBlock } from '@/scripts/hpml/block';
-import { Hpml } from '@/scripts/hpml/evaluator';
+import { defineComponent, onMounted, PropType, Ref, ref } from "vue";
+import * as os from "@/os";
+import { CanvasBlock } from "@/scripts/hpml/block";
+import { Hpml } from "@/scripts/hpml/evaluator";
 
 export default defineComponent({
 	props: {
 		block: {
 			type: Object as PropType<CanvasBlock>,
-			required: true
+			required: true,
 		},
 		hpml: {
 			type: Object as PropType<Hpml>,
-			required: true
-		}
+			required: true,
+		},
 	},
 	setup(props, ctx) {
 		const canvas: Ref<any> = ref(null);
@@ -29,9 +29,9 @@ export default defineComponent({
 		});
 
 		return {
-			canvas
+			canvas,
 		};
-	}
+	},
 });
 </script>
 
diff --git a/packages/client/src/components/page/page.counter.vue b/packages/client/src/components/page/page.counter.vue
index 6eeef71431..9ee49fe4ef 100644
--- a/packages/client/src/components/page/page.counter.vue
+++ b/packages/client/src/components/page/page.counter.vue
@@ -1,29 +1,31 @@
 <template>
-<div>
-	<MkButton class="llumlmnx" @click="click()">{{ hpml.interpolate(block.text) }}</MkButton>
-</div>
+	<div>
+		<MkButton class="llumlmnx" @click="click()">{{
+			hpml.interpolate(block.text)
+		}}</MkButton>
+	</div>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from 'vue';
-import MkButton from '../MkButton.vue';
-import * as os from '@/os';
-import { CounterVarBlock } from '@/scripts/hpml/block';
-import { Hpml } from '@/scripts/hpml/evaluator';
+import { computed, defineComponent, PropType } from "vue";
+import MkButton from "../MkButton.vue";
+import * as os from "@/os";
+import { CounterVarBlock } from "@/scripts/hpml/block";
+import { Hpml } from "@/scripts/hpml/evaluator";
 
 export default defineComponent({
 	components: {
-		MkButton
+		MkButton,
 	},
 	props: {
 		block: {
 			type: Object as PropType<CounterVarBlock>,
-			required: true
+			required: true,
 		},
 		hpml: {
 			type: Object as PropType<Hpml>,
-			required: true
-		}
+			required: true,
+		},
 	},
 	setup(props, ctx) {
 		const value = computed(() => {
@@ -31,14 +33,17 @@ export default defineComponent({
 		});
 
 		function click() {
-			props.hpml.updatePageVar(props.block.name, value.value + (props.block.inc || 1));
+			props.hpml.updatePageVar(
+				props.block.name,
+				value.value + (props.block.inc || 1)
+			);
 			props.hpml.eval();
 		}
 
 		return {
-			click
+			click,
 		};
-	}
+	},
 });
 </script>
 
diff --git a/packages/client/src/components/page/page.if.vue b/packages/client/src/components/page/page.if.vue
index 6dc7a429a6..7cc25f2125 100644
--- a/packages/client/src/components/page/page.if.vue
+++ b/packages/client/src/components/page/page.if.vue
@@ -1,31 +1,37 @@
 <template>
-<div v-show="hpml.vars.value[block.var]">
-	<XBlock v-for="child in block.children" :key="child.id" :block="child" :hpml="hpml" :h="h"/>
-</div>
+	<div v-show="hpml.vars.value[block.var]">
+		<XBlock
+			v-for="child in block.children"
+			:key="child.id"
+			:block="child"
+			:hpml="hpml"
+			:h="h"
+		/>
+	</div>
 </template>
 
 <script lang="ts">
-import { IfBlock } from '@/scripts/hpml/block';
-import { Hpml } from '@/scripts/hpml/evaluator';
-import { defineComponent, defineAsyncComponent, PropType } from 'vue';
+import { IfBlock } from "@/scripts/hpml/block";
+import { Hpml } from "@/scripts/hpml/evaluator";
+import { defineComponent, defineAsyncComponent, PropType } from "vue";
 
 export default defineComponent({
 	components: {
-		XBlock: defineAsyncComponent(() => import('./page.block.vue'))
+		XBlock: defineAsyncComponent(() => import("./page.block.vue")),
 	},
 	props: {
 		block: {
 			type: Object as PropType<IfBlock>,
-			required: true
+			required: true,
 		},
 		hpml: {
 			type: Object as PropType<Hpml>,
-			required: true
+			required: true,
 		},
 		h: {
 			type: Number,
-			required: true
-		}
+			required: true,
+		},
 	},
 });
 </script>
diff --git a/packages/client/src/components/page/page.image.vue b/packages/client/src/components/page/page.image.vue
index 8ba70c5855..0b82975d9e 100644
--- a/packages/client/src/components/page/page.image.vue
+++ b/packages/client/src/components/page/page.image.vue
@@ -1,22 +1,31 @@
 <template>
-<div class="lzyxtsnt">
-	<ImgWithBlurhash v-if="image" :hash="image.blurhash" :src="image.url" :alt="image.comment" :title="image.comment" :cover="false"/>
-</div>
+	<div class="lzyxtsnt">
+		<ImgWithBlurhash
+			v-if="image"
+			:hash="image.blurhash"
+			:src="image.url"
+			:alt="image.comment"
+			:title="image.comment"
+			:cover="false"
+		/>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { defineComponent, PropType } from 'vue';
-import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
-import * as os from '@/os';
-import { ImageBlock } from '@/scripts/hpml/block';
-import { Hpml } from '@/scripts/hpml/evaluator';
+import { defineComponent, PropType } from "vue";
+import ImgWithBlurhash from "@/components/MkImgWithBlurhash.vue";
+import * as os from "@/os";
+import { ImageBlock } from "@/scripts/hpml/block";
+import { Hpml } from "@/scripts/hpml/evaluator";
 
 const props = defineProps<{
-	block: PropType<ImageBlock>,
-	hpml: PropType<Hpml>,
+	block: PropType<ImageBlock>;
+	hpml: PropType<Hpml>;
 }>();
 
-const image = props.hpml.page.attachedFiles.find(x => x.id === props.block.fileId);
+const image = props.hpml.page.attachedFiles.find(
+	(x) => x.id === props.block.fileId
+);
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/components/page/page.note.vue b/packages/client/src/components/page/page.note.vue
index 431f0b08df..9e10d0f63d 100644
--- a/packages/client/src/components/page/page.note.vue
+++ b/packages/client/src/components/page/page.note.vue
@@ -1,16 +1,24 @@
 <template>
-<div class="voxdxuby">
-	<XNote v-if="note && !block.detailed" :key="note.id + ':normal'" v-model:note="note"/>
-	<XNoteDetailed v-if="note && block.detailed" :key="note.id + ':detail'" v-model:note="note"/>
-</div>
+	<div class="voxdxuby">
+		<XNote
+			v-if="note && !block.detailed"
+			:key="note.id + ':normal'"
+			v-model:note="note"
+		/>
+		<XNoteDetailed
+			v-if="note && block.detailed"
+			:key="note.id + ':detail'"
+			v-model:note="note"
+		/>
+	</div>
 </template>
 
 <script lang="ts">
-import { defineComponent, onMounted, PropType, Ref, ref } from 'vue';
-import XNote from '@/components/MkNote.vue';
-import XNoteDetailed from '@/components/MkNoteDetailed.vue';
-import * as os from '@/os';
-import { NoteBlock } from '@/scripts/hpml/block';
+import { defineComponent, onMounted, PropType, Ref, ref } from "vue";
+import XNote from "@/components/MkNote.vue";
+import XNoteDetailed from "@/components/MkNoteDetailed.vue";
+import * as os from "@/os";
+import { NoteBlock } from "@/scripts/hpml/block";
 
 export default defineComponent({
 	components: {
@@ -20,23 +28,24 @@ export default defineComponent({
 	props: {
 		block: {
 			type: Object as PropType<NoteBlock>,
-			required: true
-		}
+			required: true,
+		},
 	},
 	setup(props, ctx) {
 		const note: Ref<Record<string, any> | null> = ref(null);
 
 		onMounted(() => {
-			os.api('notes/show', { noteId: props.block.note })
-			.then(result => {
-				note.value = result;
-			});
+			os.api("notes/show", { noteId: props.block.note }).then(
+				(result) => {
+					note.value = result;
+				}
+			);
 		});
 
 		return {
-			note
+			note,
 		};
-	}
+	},
 });
 </script>
 
diff --git a/packages/client/src/components/page/page.number-input.vue b/packages/client/src/components/page/page.number-input.vue
index 47ff2a0177..3426cf6677 100644
--- a/packages/client/src/components/page/page.number-input.vue
+++ b/packages/client/src/components/page/page.number-input.vue
@@ -1,31 +1,36 @@
 <template>
-<div>
-	<MkInput class="kudkigyw" :model-value="value" type="number" @update:modelValue="updateValue($event)">
-		<template #label>{{ hpml.interpolate(block.text) }}</template>
-	</MkInput>
-</div>
+	<div>
+		<MkInput
+			class="kudkigyw"
+			:model-value="value"
+			type="number"
+			@update:modelValue="updateValue($event)"
+		>
+			<template #label>{{ hpml.interpolate(block.text) }}</template>
+		</MkInput>
+	</div>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from 'vue';
-import MkInput from '../form/input.vue';
-import * as os from '@/os';
-import { Hpml } from '@/scripts/hpml/evaluator';
-import { NumberInputVarBlock } from '@/scripts/hpml/block';
+import { computed, defineComponent, PropType } from "vue";
+import MkInput from "../form/input.vue";
+import * as os from "@/os";
+import { Hpml } from "@/scripts/hpml/evaluator";
+import { NumberInputVarBlock } from "@/scripts/hpml/block";
 
 export default defineComponent({
 	components: {
-		MkInput
+		MkInput,
 	},
 	props: {
 		block: {
 			type: Object as PropType<NumberInputVarBlock>,
-			required: true
+			required: true,
 		},
 		hpml: {
 			type: Object as PropType<Hpml>,
-			required: true
-		}
+			required: true,
+		},
 	},
 	setup(props, ctx) {
 		const value = computed(() => {
@@ -39,9 +44,9 @@ export default defineComponent({
 
 		return {
 			value,
-			updateValue
+			updateValue,
 		};
-	}
+	},
 });
 </script>
 
diff --git a/packages/client/src/components/page/page.post.vue b/packages/client/src/components/page/page.post.vue
index 7ab9092bdc..ee30da1f08 100644
--- a/packages/client/src/components/page/page.post.vue
+++ b/packages/client/src/components/page/page.post.vue
@@ -1,21 +1,26 @@
 <template>
-<div class="ngbfujlo">
-	<MkTextarea :model-value="text" readonly style="margin: 0;"></MkTextarea>
-	<MkButton class="button" primary :disabled="posting || posted" @click="post()">
-		<i v-if="posted" class="ph-check ph-bold ph-lg"></i>
-		<i v-else class="ph-paper-plane-tilt ph-bold ph-lg"></i>
-	</MkButton>
-</div>
+	<div class="ngbfujlo">
+		<MkTextarea :model-value="text" readonly style="margin: 0"></MkTextarea>
+		<MkButton
+			class="button"
+			primary
+			:disabled="posting || posted"
+			@click="post()"
+		>
+			<i v-if="posted" class="ph-check ph-bold ph-lg"></i>
+			<i v-else class="ph-paper-plane-tilt ph-bold ph-lg"></i>
+		</MkButton>
+	</div>
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from 'vue';
-import MkTextarea from '../form/textarea.vue';
-import MkButton from '../MkButton.vue';
-import { apiUrl } from '@/config';
-import * as os from '@/os';
-import { PostBlock } from '@/scripts/hpml/block';
-import { Hpml } from '@/scripts/hpml/evaluator';
+import { defineComponent, PropType } from "vue";
+import MkTextarea from "../form/textarea.vue";
+import MkButton from "../MkButton.vue";
+import { apiUrl } from "@/config";
+import * as os from "@/os";
+import { PostBlock } from "@/scripts/hpml/block";
+import { Hpml } from "@/scripts/hpml/evaluator";
 
 export default defineComponent({
 	components: {
@@ -25,12 +30,12 @@ export default defineComponent({
 	props: {
 		block: {
 			type: Object as PropType<PostBlock>,
-			required: true
+			required: true,
 		},
 		hpml: {
 			type: Object as PropType<Hpml>,
-			required: true
-		}
+			required: true,
+		},
 	},
 	data() {
 		return {
@@ -40,35 +45,38 @@ export default defineComponent({
 		};
 	},
 	watch: {
-		'hpml.vars': {
+		"hpml.vars": {
 			handler() {
 				this.text = this.hpml.interpolate(this.block.text);
 			},
-			deep: true
-		}
+			deep: true,
+		},
 	},
 	methods: {
 		upload() {
 			const promise = new Promise((ok) => {
 				const canvas = this.hpml.canvases[this.block.canvasId];
-				canvas.toBlob(blob => {
+				canvas.toBlob((blob) => {
 					const formData = new FormData();
-					formData.append('file', blob);
+					formData.append("file", blob);
 					if (this.$store.state.uploadFolder) {
-						formData.append('folderId', this.$store.state.uploadFolder);
+						formData.append(
+							"folderId",
+							this.$store.state.uploadFolder
+						);
 					}
 
-					fetch(apiUrl + '/drive/files/create', {
-						method: 'POST',
+					fetch(apiUrl + "/drive/files/create", {
+						method: "POST",
 						body: formData,
 						headers: {
 							authorization: `Bearer ${this.$i.token}`,
 						},
 					})
-					.then(response => response.json())
-					.then(f => {
-						ok(f);
-					});
+						.then((response) => response.json())
+						.then((f) => {
+							ok(f);
+						});
 				});
 			});
 			os.promiseDialog(promise);
@@ -76,15 +84,17 @@ export default defineComponent({
 		},
 		async post() {
 			this.posting = true;
-			const file = this.block.attachCanvasImage ? await this.upload() : null;
-			os.apiWithDialog('notes/create', {
-				text: this.text === '' ? null : this.text,
+			const file = this.block.attachCanvasImage
+				? await this.upload()
+				: null;
+			os.apiWithDialog("notes/create", {
+				text: this.text === "" ? null : this.text,
 				fileIds: file ? [file.id] : undefined,
 			}).then(() => {
 				this.posted = true;
 			});
-		}
-	}
+		},
+	},
 });
 </script>
 
diff --git a/packages/client/src/components/page/page.radio-button.vue b/packages/client/src/components/page/page.radio-button.vue
index 5a726da229..3d3878e4fb 100644
--- a/packages/client/src/components/page/page.radio-button.vue
+++ b/packages/client/src/components/page/page.radio-button.vue
@@ -1,30 +1,37 @@
 <template>
-<div>
-	<div>{{ hpml.interpolate(block.title) }}</div>
-	<MkRadio v-for="item in block.values" :key="item" :modelValue="value" :value="item" @update:modelValue="updateValue($event)">{{ item }}</MkRadio>
-</div>
+	<div>
+		<div>{{ hpml.interpolate(block.title) }}</div>
+		<MkRadio
+			v-for="item in block.values"
+			:key="item"
+			:modelValue="value"
+			:value="item"
+			@update:modelValue="updateValue($event)"
+			>{{ item }}</MkRadio
+		>
+	</div>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from 'vue';
-import MkRadio from '../form/radio.vue';
-import * as os from '@/os';
-import { Hpml } from '@/scripts/hpml/evaluator';
-import { RadioButtonVarBlock } from '@/scripts/hpml/block';
+import { computed, defineComponent, PropType } from "vue";
+import MkRadio from "../form/radio.vue";
+import * as os from "@/os";
+import { Hpml } from "@/scripts/hpml/evaluator";
+import { RadioButtonVarBlock } from "@/scripts/hpml/block";
 
 export default defineComponent({
 	components: {
-		MkRadio
+		MkRadio,
 	},
 	props: {
 		block: {
 			type: Object as PropType<RadioButtonVarBlock>,
-			required: true
+			required: true,
 		},
 		hpml: {
 			type: Object as PropType<Hpml>,
-			required: true
-		}
+			required: true,
+		},
 	},
 	setup(props, ctx) {
 		const value = computed(() => {
@@ -38,8 +45,8 @@ export default defineComponent({
 
 		return {
 			value,
-			updateValue
+			updateValue,
 		};
-	}
+	},
 });
 </script>
diff --git a/packages/client/src/components/page/page.section.vue b/packages/client/src/components/page/page.section.vue
index a2cd662833..04de165f1e 100644
--- a/packages/client/src/components/page/page.section.vue
+++ b/packages/client/src/components/page/page.section.vue
@@ -1,35 +1,41 @@
 <template>
-<section class="sdgxphyu">
-	<component :is="'h' + h">{{ block.title }}</component>
+	<section class="sdgxphyu">
+		<component :is="'h' + h">{{ block.title }}</component>
 
-	<div class="children">
-		<XBlock v-for="child in block.children" :key="child.id" :block="child" :hpml="hpml" :h="h + 1"/>
-	</div>
-</section>
+		<div class="children">
+			<XBlock
+				v-for="child in block.children"
+				:key="child.id"
+				:block="child"
+				:hpml="hpml"
+				:h="h + 1"
+			/>
+		</div>
+	</section>
 </template>
 
 <script lang="ts">
-import { defineComponent, defineAsyncComponent, PropType } from 'vue';
-import * as os from '@/os';
-import { SectionBlock } from '@/scripts/hpml/block';
-import { Hpml } from '@/scripts/hpml/evaluator';
+import { defineComponent, defineAsyncComponent, PropType } from "vue";
+import * as os from "@/os";
+import { SectionBlock } from "@/scripts/hpml/block";
+import { Hpml } from "@/scripts/hpml/evaluator";
 
 export default defineComponent({
 	components: {
-		XBlock: defineAsyncComponent(() => import('./page.block.vue'))
+		XBlock: defineAsyncComponent(() => import("./page.block.vue")),
 	},
 	props: {
 		block: {
 			type: Object as PropType<SectionBlock>,
-			required: true
+			required: true,
 		},
 		hpml: {
 			type: Object as PropType<Hpml>,
-			required: true
+			required: true,
 		},
 		h: {
-			required: true
-		}
+			required: true,
+		},
 	},
 });
 </script>
diff --git a/packages/client/src/components/page/page.switch.vue b/packages/client/src/components/page/page.switch.vue
index 1ece88157f..7a00694e09 100644
--- a/packages/client/src/components/page/page.switch.vue
+++ b/packages/client/src/components/page/page.switch.vue
@@ -1,29 +1,33 @@
 <template>
-<div class="hkcxmtwj">
-	<MkSwitch :model-value="value" @update:modelValue="updateValue($event)">{{ hpml.interpolate(block.text) }}</MkSwitch>
-</div>
+	<div class="hkcxmtwj">
+		<MkSwitch
+			:model-value="value"
+			@update:modelValue="updateValue($event)"
+			>{{ hpml.interpolate(block.text) }}</MkSwitch
+		>
+	</div>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from 'vue';
-import MkSwitch from '../form/switch.vue';
-import * as os from '@/os';
-import { Hpml } from '@/scripts/hpml/evaluator';
-import { SwitchVarBlock } from '@/scripts/hpml/block';
+import { computed, defineComponent, PropType } from "vue";
+import MkSwitch from "../form/switch.vue";
+import * as os from "@/os";
+import { Hpml } from "@/scripts/hpml/evaluator";
+import { SwitchVarBlock } from "@/scripts/hpml/block";
 
 export default defineComponent({
 	components: {
-		MkSwitch
+		MkSwitch,
 	},
 	props: {
 		block: {
 			type: Object as PropType<SwitchVarBlock>,
-			required: true
+			required: true,
 		},
 		hpml: {
 			type: Object as PropType<Hpml>,
-			required: true
-		}
+			required: true,
+		},
 	},
 	setup(props, ctx) {
 		const value = computed(() => {
@@ -37,9 +41,9 @@ export default defineComponent({
 
 		return {
 			value,
-			updateValue
+			updateValue,
 		};
-	}
+	},
 });
 </script>
 
diff --git a/packages/client/src/components/page/page.text-input.vue b/packages/client/src/components/page/page.text-input.vue
index 30a0379df9..eb76d1890b 100644
--- a/packages/client/src/components/page/page.text-input.vue
+++ b/packages/client/src/components/page/page.text-input.vue
@@ -1,31 +1,36 @@
 <template>
-<div>
-	<MkInput class="kudkigyw" :model-value="value" type="text" @update:modelValue="updateValue($event)">
-		<template #label>{{ hpml.interpolate(block.text) }}</template>
-	</MkInput>
-</div>
+	<div>
+		<MkInput
+			class="kudkigyw"
+			:model-value="value"
+			type="text"
+			@update:modelValue="updateValue($event)"
+		>
+			<template #label>{{ hpml.interpolate(block.text) }}</template>
+		</MkInput>
+	</div>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from 'vue';
-import MkInput from '../form/input.vue';
-import * as os from '@/os';
-import { Hpml } from '@/scripts/hpml/evaluator';
-import { TextInputVarBlock } from '@/scripts/hpml/block';
+import { computed, defineComponent, PropType } from "vue";
+import MkInput from "../form/input.vue";
+import * as os from "@/os";
+import { Hpml } from "@/scripts/hpml/evaluator";
+import { TextInputVarBlock } from "@/scripts/hpml/block";
 
 export default defineComponent({
 	components: {
-		MkInput
+		MkInput,
 	},
 	props: {
 		block: {
 			type: Object as PropType<TextInputVarBlock>,
-			required: true
+			required: true,
 		},
 		hpml: {
 			type: Object as PropType<Hpml>,
-			required: true
-		}
+			required: true,
+		},
 	},
 	setup(props, ctx) {
 		const value = computed(() => {
@@ -39,9 +44,9 @@ export default defineComponent({
 
 		return {
 			value,
-			updateValue
+			updateValue,
 		};
-	}
+	},
 });
 </script>
 
diff --git a/packages/client/src/components/page/page.text.vue b/packages/client/src/components/page/page.text.vue
index 54f52ee05e..c380f48442 100644
--- a/packages/client/src/components/page/page.text.vue
+++ b/packages/client/src/components/page/page.text.vue
@@ -1,29 +1,31 @@
 <template>
-<div class="mrdgzndn">
-	<Mfm :key="text" :text="text" :is-note="false" :i="$i"/>
-	<MkUrlPreview v-for="url in urls" :key="url" :url="url" class="url"/>
-</div>
+	<div class="mrdgzndn">
+		<Mfm :key="text" :text="text" :is-note="false" :i="$i" />
+		<MkUrlPreview v-for="url in urls" :key="url" :url="url" class="url" />
+	</div>
 </template>
 
 <script lang="ts">
-import { TextBlock } from '@/scripts/hpml/block';
-import { Hpml } from '@/scripts/hpml/evaluator';
-import { defineAsyncComponent, defineComponent, PropType } from 'vue';
-import * as mfm from 'mfm-js';
-import { extractUrlFromMfm } from '@/scripts/extract-url-from-mfm';
+import { TextBlock } from "@/scripts/hpml/block";
+import { Hpml } from "@/scripts/hpml/evaluator";
+import { defineAsyncComponent, defineComponent, PropType } from "vue";
+import * as mfm from "mfm-js";
+import { extractUrlFromMfm } from "@/scripts/extract-url-from-mfm";
 export default defineComponent({
 	components: {
-		MkUrlPreview: defineAsyncComponent(() => import('@/components/MkUrlPreview.vue')),
+		MkUrlPreview: defineAsyncComponent(
+			() => import("@/components/MkUrlPreview.vue")
+		),
 	},
 	props: {
 		block: {
 			type: Object as PropType<TextBlock>,
-			required: true
+			required: true,
 		},
 		hpml: {
 			type: Object as PropType<Hpml>,
-			required: true
-		}
+			required: true,
+		},
 	},
 	data() {
 		return {
@@ -37,29 +39,29 @@ export default defineComponent({
 			} else {
 				return [];
 			}
-		}
+		},
 	},
 	watch: {
-		'hpml.vars': {
+		"hpml.vars": {
 			handler() {
 				this.text = this.hpml.interpolate(this.block.text);
 			},
-			deep: true
-		}
+			deep: true,
+		},
 	},
 });
 </script>
 
-	<style lang="scss" scoped>
-	.mrdgzndn {
-		&:not(:first-child) {
-			margin-top: 0.5em;
-		}
-		&:not(:last-child) {
-			margin-bottom: 0.5em;
-		}
-		> .url {
-			margin: 0.5em 0;
-		}
+<style lang="scss" scoped>
+.mrdgzndn {
+	&:not(:first-child) {
+		margin-top: 0.5em;
 	}
-	</style>
+	&:not(:last-child) {
+		margin-bottom: 0.5em;
+	}
+	> .url {
+		margin: 0.5em 0;
+	}
+}
+</style>
diff --git a/packages/client/src/components/page/page.textarea-input.vue b/packages/client/src/components/page/page.textarea-input.vue
index 6e082b2bef..fab665c6db 100644
--- a/packages/client/src/components/page/page.textarea-input.vue
+++ b/packages/client/src/components/page/page.textarea-input.vue
@@ -1,32 +1,35 @@
 <template>
-<div>
-	<MkTextarea :model-value="value" @update:modelValue="updateValue($event)">
-		<template #label>{{ hpml.interpolate(block.text) }}</template>
-	</MkTextarea>
-</div>
+	<div>
+		<MkTextarea
+			:model-value="value"
+			@update:modelValue="updateValue($event)"
+		>
+			<template #label>{{ hpml.interpolate(block.text) }}</template>
+		</MkTextarea>
+	</div>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from 'vue';
-import MkTextarea from '../form/textarea.vue';
-import * as os from '@/os';
-import { Hpml } from '@/scripts/hpml/evaluator';
-import { HpmlTextInput } from '@/scripts/hpml';
-import { TextInputVarBlock } from '@/scripts/hpml/block';
+import { computed, defineComponent, PropType } from "vue";
+import MkTextarea from "../form/textarea.vue";
+import * as os from "@/os";
+import { Hpml } from "@/scripts/hpml/evaluator";
+import { HpmlTextInput } from "@/scripts/hpml";
+import { TextInputVarBlock } from "@/scripts/hpml/block";
 
 export default defineComponent({
 	components: {
-		MkTextarea
+		MkTextarea,
 	},
 	props: {
 		block: {
 			type: Object as PropType<TextInputVarBlock>,
-			required: true
+			required: true,
 		},
 		hpml: {
 			type: Object as PropType<Hpml>,
-			required: true
-		}
+			required: true,
+		},
 	},
 	setup(props, ctx) {
 		const value = computed(() => {
@@ -40,8 +43,8 @@ export default defineComponent({
 
 		return {
 			value,
-			updateValue
+			updateValue,
 		};
-	}
+	},
 });
 </script>
diff --git a/packages/client/src/components/page/page.textarea.vue b/packages/client/src/components/page/page.textarea.vue
index 54ba8a86ef..aa720321f1 100644
--- a/packages/client/src/components/page/page.textarea.vue
+++ b/packages/client/src/components/page/page.textarea.vue
@@ -1,24 +1,28 @@
 <template>
-<MkTextarea :model-value="text" readonly></MkTextarea>
+	<MkTextarea :model-value="text" readonly></MkTextarea>
 </template>
 
 <script lang="ts" setup>
-import { watch } from 'vue';
-import MkTextarea from '../form/textarea.vue';
-import { TextBlock } from '@/scripts/hpml/block';
-import { Hpml } from '@/scripts/hpml/evaluator';
+import { watch } from "vue";
+import MkTextarea from "../form/textarea.vue";
+import { TextBlock } from "@/scripts/hpml/block";
+import { Hpml } from "@/scripts/hpml/evaluator";
 
 const props = defineProps<{
 	block: TextBlock;
 	hpml: Hpml;
 }>();
 
-let text = $ref('');
+let text = $ref("");
 
-watch(props.hpml.vars, () => {
-	text = props.hpml.interpolate(props.block.text) as string;
-}, {
-	deep: true,
-	immediate: true,
-});
+watch(
+	props.hpml.vars,
+	() => {
+		text = props.hpml.interpolate(props.block.text) as string;
+	},
+	{
+		deep: true,
+		immediate: true,
+	}
+);
 </script>
diff --git a/packages/client/src/components/page/page.vue b/packages/client/src/components/page/page.vue
index 58c43b22bc..f2079c9ba8 100644
--- a/packages/client/src/components/page/page.vue
+++ b/packages/client/src/components/page/page.vue
@@ -1,26 +1,42 @@
 <template>
-<div v-if="hpml" class="iroscrza" :class="{ center: page.alignCenter, serif: page.font === 'serif' }">
-	<XBlock v-for="child in page.content" :key="child.id" :block="child" :hpml="hpml" :h="2"/>
-</div>
+	<div
+		v-if="hpml"
+		class="iroscrza"
+		:class="{ center: page.alignCenter, serif: page.font === 'serif' }"
+	>
+		<XBlock
+			v-for="child in page.content"
+			:key="child.id"
+			:block="child"
+			:hpml="hpml"
+			:h="2"
+		/>
+	</div>
 </template>
 
 <script lang="ts">
-import { defineComponent, onMounted, nextTick, onUnmounted, PropType } from 'vue';
-import { parse } from '@syuilo/aiscript';
-import XBlock from './page.block.vue';
-import { Hpml } from '@/scripts/hpml/evaluator';
-import { url } from '@/config';
-import { $i } from '@/account';
-import { defaultStore } from '@/store';
+import {
+	defineComponent,
+	onMounted,
+	nextTick,
+	onUnmounted,
+	PropType,
+} from "vue";
+import { parse } from "@syuilo/aiscript";
+import XBlock from "./page.block.vue";
+import { Hpml } from "@/scripts/hpml/evaluator";
+import { url } from "@/config";
+import { $i } from "@/account";
+import { defaultStore } from "@/store";
 
 export default defineComponent({
 	components: {
-		XBlock
+		XBlock,
 	},
 	props: {
 		page: {
 			type: Object as PropType<Record<string, any>>,
-			required: true
+			required: true,
 		},
 	},
 	setup(props, ctx) {
@@ -28,7 +44,7 @@ export default defineComponent({
 			randomSeed: Math.random(),
 			visitor: $i,
 			url: url,
-			enableAiScript: !defaultStore.state.disablePagesScript
+			enableAiScript: !defaultStore.state.disablePagesScript,
 		});
 
 		onMounted(() => {
@@ -45,15 +61,18 @@ export default defineComponent({
 						});*/
 						return;
 					}
-					hpml.aiscript.exec(ast).then(() => {
-						hpml.eval();
-					}).catch(err => {
-						console.error(err);
-						/*os.alert({
+					hpml.aiscript
+						.exec(ast)
+						.then(() => {
+							hpml.eval();
+						})
+						.catch((err) => {
+							console.error(err);
+							/*os.alert({
 							type: 'error',
 							text: err
 						});*/
-					});
+						});
 				} else {
 					hpml.eval();
 				}
diff --git a/packages/client/src/components/queue-chart.vue b/packages/client/src/components/queue-chart.vue
deleted file mode 100644
index 109708d1a5..0000000000
--- a/packages/client/src/components/queue-chart.vue
+++ /dev/null
@@ -1,129 +0,0 @@
-<template>
-<canvas ref="chartEl"></canvas>
-</template>
-
-<script lang="ts" setup>
-import { onMounted, onUnmounted, ref } from 'vue';
-import {
-	Chart,
-	ArcElement,
-	LineElement,
-	BarElement,
-	PointElement,
-	BarController,
-	LineController,
-	CategoryScale,
-	LinearScale,
-	TimeScale,
-	Legend,
-	Title,
-	Tooltip,
-	SubTitle,
-	Filler,
-} from 'chart.js';
-import number from '@/filters/number';
-import * as os from '@/os';
-import { defaultStore } from '@/store';
-
-Chart.register(
-	ArcElement,
-	LineElement,
-	BarElement,
-	PointElement,
-	BarController,
-	LineController,
-	CategoryScale,
-	LinearScale,
-	TimeScale,
-	Legend,
-	Title,
-	Tooltip,
-	SubTitle,
-	Filler,
-);
-
-const props = defineProps<{
-	domain: string,
-	connection: any,
-}>();
-
-const chartEl = ref<HTMLCanvasElement>(null);
-
-const gridColor = defaultStore.state.darkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';
-
-// フォントカラー
-Chart.defaults.color = getComputedStyle(document.documentElement).getPropertyValue('--fg');
-
-onMounted(() => {
-	const chartInstance = new Chart(chartEl.value, {
-		type: 'line',
-		data: {
-			labels: [],
-			datasets: [{
-				label: 'Process',
-				pointRadius: 0,
-				tension: 0,
-				borderWidth: 2,
-				borderJoinStyle: 'round',
-				borderColor: '#9ccfd8',
-				backgroundColor: '#9ccfd81A',
-				data: []
-			}, {
-				label: 'Active',
-				pointRadius: 0,
-				tension: 0,
-				borderWidth: 2,
-				borderJoinStyle: 'round',
-				borderColor: '#31748f',
-				backgroundColor: '#31748f1A',
-				data: []
-			}, {
-				label: 'Waiting',
-				pointRadius: 0,
-				tension: 0,
-				borderWidth: 2,
-				borderJoinStyle: 'round',
-				borderColor: '#f6c177',
-				backgroundColor: '#f6c1771A',
-				yAxisID: 'y2',
-				data: []
-			}, {
-				label: 'Delayed',
-				pointRadius: 0,
-				tension: 0,
-				borderWidth: 2,
-				borderJoinStyle: 'round',
-				borderColor: '#eb6f92',
-				borderDash: [5, 5],
-				fill: false,
-				yAxisID: 'y2',
-				data: []
-			}],
-		},
-		options: {
-			aspectRatio: 2.5,
-			layout: {
-				padding: {
-					left: 16,
-					right: 16,
-					top: 16,
-					bottom: 8,
-				},
-			},
-			scales: {
-				x: {
-					grid: {
-						display: true,
-						color: gridColor,
-						borderColor: '#1f1d2e',
-					},
-					ticks: {
-						display: false,
-						maxTicksLimit: 10
-					},
-				},
-				y: {
-					min: 0,
-					stack: 'queue',
-					stackWeight: 2,
-					grid: {
diff --git a/packages/client/src/pages/_empty_.vue b/packages/client/src/pages/_empty_.vue
index 000b6decc9..3dee6cd459 100644
--- a/packages/client/src/pages/_empty_.vue
+++ b/packages/client/src/pages/_empty_.vue
@@ -1,7 +1,7 @@
 <template>
-<div></div>
+	<div></div>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
+import {} from "vue";
 </script>
diff --git a/packages/client/src/pages/_error_.vue b/packages/client/src/pages/_error_.vue
index f2b2c67fb2..ac0c808708 100644
--- a/packages/client/src/pages/_error_.vue
+++ b/packages/client/src/pages/_error_.vue
@@ -1,52 +1,74 @@
 <template>
-<MkLoading v-if="!loaded"/>
-<transition :name="$store.state.animation ? 'zoom' : ''" appear>
-	<div v-show="loaded" class="mjndxjch">
-		<img src="/static-assets/badges/error.png" class="_ghost" alt="Error"/>
-		<p><b><i class="ph-warning ph-bold ph-lg"></i> {{ i18n.ts.pageLoadError }}</b></p>
-		<p v-if="meta && (version === meta.version)">{{ i18n.ts.pageLoadErrorDescription }}</p>
-		<p v-else-if="serverIsDead">{{ i18n.ts.serverIsDead }}</p>
-		<template v-else>
-			<p>{{ i18n.ts.newVersionOfClientAvailable }}</p>
-			<p>{{ i18n.ts.youShouldUpgradeClient }}</p>
-			<MkButton class="button primary" @click="reload">{{ i18n.ts.reload }}</MkButton>
-		</template>
-		<p><MkA to="/docs/general/troubleshooting" class="_link">{{ i18n.ts.troubleshooting }}</MkA></p>
-		<p v-if="error" class="error">ERROR: {{ error }}</p>
-	</div>
-</transition>
+	<MkLoading v-if="!loaded" />
+	<transition :name="$store.state.animation ? 'zoom' : ''" appear>
+		<div v-show="loaded" class="mjndxjch">
+			<img
+				src="/static-assets/badges/error.png"
+				class="_ghost"
+				alt="Error"
+			/>
+			<p>
+				<b
+					><i class="ph-warning ph-bold ph-lg"></i>
+					{{ i18n.ts.pageLoadError }}</b
+				>
+			</p>
+			<p v-if="meta && version === meta.version">
+				{{ i18n.ts.pageLoadErrorDescription }}
+			</p>
+			<p v-else-if="serverIsDead">{{ i18n.ts.serverIsDead }}</p>
+			<template v-else>
+				<p>{{ i18n.ts.newVersionOfClientAvailable }}</p>
+				<p>{{ i18n.ts.youShouldUpgradeClient }}</p>
+				<MkButton class="button primary" @click="reload">{{
+					i18n.ts.reload
+				}}</MkButton>
+			</template>
+			<p>
+				<MkA to="/docs/general/troubleshooting" class="_link">{{
+					i18n.ts.troubleshooting
+				}}</MkA>
+			</p>
+			<p v-if="error" class="error">ERROR: {{ error }}</p>
+		</div>
+	</transition>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import * as misskey from 'calckey-js';
-import MkButton from '@/components/MkButton.vue';
-import { version } from '@/config';
-import * as os from '@/os';
-import { unisonReload } from '@/scripts/unison-reload';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import {} from "vue";
+import * as misskey from "calckey-js";
+import MkButton from "@/components/MkButton.vue";
+import { version } from "@/config";
+import * as os from "@/os";
+import { unisonReload } from "@/scripts/unison-reload";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
-const props = withDefaults(defineProps<{
-	error?: Error;
-}>(), {
-});
+const props = withDefaults(
+	defineProps<{
+		error?: Error;
+	}>(),
+	{}
+);
 
 let loaded = $ref(false);
 let serverIsDead = $ref(false);
 let meta = $ref<misskey.entities.LiteInstanceMetadata | null>(null);
 
-os.api('meta', {
+os.api("meta", {
 	detail: false,
-}).then(res => {
-	loaded = true;
-	serverIsDead = false;
-	meta = res;
-	localStorage.setItem('v', res.version);
-}, () => {
-	loaded = true;
-	serverIsDead = true;
-});
+}).then(
+	(res) => {
+		loaded = true;
+		serverIsDead = false;
+		meta = res;
+		localStorage.setItem("v", res.version);
+	},
+	() => {
+		loaded = true;
+		serverIsDead = true;
+	}
+);
 
 function reload() {
 	unisonReload();
@@ -58,7 +80,7 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.error,
-	icon: 'ph-warning ph-bold ph-lg',
+	icon: "ph-warning ph-bold ph-lg",
 });
 </script>
 
diff --git a/packages/client/src/pages/_loading_.vue b/packages/client/src/pages/_loading_.vue
index 1dd2e46e10..832c05916c 100644
--- a/packages/client/src/pages/_loading_.vue
+++ b/packages/client/src/pages/_loading_.vue
@@ -1,6 +1,5 @@
 <template>
-<MkLoading/>
+	<MkLoading />
 </template>
 
-<script lang="ts" setup>
-</script>
+<script lang="ts" setup></script>
diff --git a/packages/client/src/pages/about-calckey.vue b/packages/client/src/pages/about-calckey.vue
index a768be59ce..fa0eeff0be 100644
--- a/packages/client/src/pages/about-calckey.vue
+++ b/packages/client/src/pages/about-calckey.vue
@@ -1,82 +1,167 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
-	<div style="overflow: clip;">
-		<MkSpacer :content-max="600" :margin-min="20">
-			<div class="_formRoot znqjceqz">
-				<div id="debug"></div>
-				<div ref="containerEl" v-panel class="_formBlock about" :class="{ playing: easterEggEngine != null }">
-					<img src="/client-assets/about-icon.png" alt="" class="icon" draggable="false" @load="iconLoaded" @click="gravity"/>
-					<div class="misskey">Calckey</div>
-					<div class="version">v{{ version }}</div>
-					<span v-for="emoji in easterEggEmojis" :key="emoji.id" class="emoji" :data-physics-x="emoji.left" :data-physics-y="emoji.top" :class="{ _physics_circle_: !emoji.emoji.startsWith(':') }"><MkEmoji class="emoji" :emoji="emoji.emoji" :custom-emojis="$instance.emojis" :is-reaction="false" :normal="true" :no-style="true"/></span>
-				</div>
-				<div class="_formBlock" style="text-align: center;">
-					{{ i18n.ts._aboutMisskey.about }}<br><a href="https://codeberg.org/calckey/calckey" target="_blank" class="_link">{{ i18n.ts.learnMore }}</a>
-				</div>
-				<div class="_formBlock" style="text-align: center;">
-					<MkButton primary rounded inline @click="iLoveMisskey">I <Mfm text="$[jelly ❤]"/> #Calckey</MkButton>
-				</div>
-				<FormSection>
-					<div class="_formLinks">
-						<FormLink to="https://codeberg.org/calckey/calckey" external>
-							<template #icon><i class="ph-code ph-bold ph-lg"></i></template>
-							{{ i18n.ts._aboutMisskey.source }}
-							<template #suffix>Codeberg</template>
-						</FormLink>
-						<FormLink to="https://liberapay.com/ThatOneCalculator" external>
-							<template #icon><i class="ph-money ph-bold ph-lg"></i></template>
-							{{ i18n.ts._aboutMisskey.donate }}
-							<template #suffix>Donate</template>
-						</FormLink>
-						<FormLink to="https://hosted.weblate.org/engage/calckey/" external>
-							<template #icon><i class="ph-translate ph-bold ph-lg"></i></template>
-							{{ i18n.ts._aboutMisskey.translation }}
-							<template #suffix>Translate</template>
-						</FormLink>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader :actions="headerActions" :tabs="headerTabs"
+		/></template>
+		<div style="overflow: clip">
+			<MkSpacer :content-max="600" :margin-min="20">
+				<div class="_formRoot znqjceqz">
+					<div id="debug"></div>
+					<div
+						ref="containerEl"
+						v-panel
+						class="_formBlock about"
+						:class="{ playing: easterEggEngine != null }"
+					>
+						<img
+							src="/client-assets/about-icon.png"
+							alt=""
+							class="icon"
+							draggable="false"
+							@load="iconLoaded"
+							@click="gravity"
+						/>
+						<div class="misskey">Calckey</div>
+						<div class="version">v{{ version }}</div>
+						<span
+							v-for="emoji in easterEggEmojis"
+							:key="emoji.id"
+							class="emoji"
+							:data-physics-x="emoji.left"
+							:data-physics-y="emoji.top"
+							:class="{
+								_physics_circle_: !emoji.emoji.startsWith(':'),
+							}"
+							><MkEmoji
+								class="emoji"
+								:emoji="emoji.emoji"
+								:custom-emojis="$instance.emojis"
+								:is-reaction="false"
+								:normal="true"
+								:no-style="true"
+						/></span>
 					</div>
-				</FormSection>
-				<FormSection>
-					<template #label>{{ i18n.ts._aboutMisskey.contributors }}</template>
-					<div class="_formLinks">
-						<FormLink to="/@kainoa@calckey.social"><Mfm :text="'$[sparkle @kainoa@calckey.social] (Main developer)'"/></FormLink>
-						<FormLink to="/@cleo@bz.pawdev.me"><Mfm :text="'@cleo@bz.pawdev.me (Maintainer)'"/></FormLink>
-						<FormLink to="/@panos@i.calckey.cloud"><Mfm :text="'@panos@i.calckey.cloud (Management)'"/></FormLink>
-						<FormLink to="/@freeplay@bz.pawdev.me"><Mfm :text="'@freeplay@bz.pawdev.me (UI/UX Designer)'"/></FormLink>
-						<FormLink to="https://www.youtube.com/c/Henkiwashere" external>Henki (error images artist)</FormLink>
+					<div class="_formBlock" style="text-align: center">
+						{{ i18n.ts._aboutMisskey.about }}<br /><a
+							href="https://codeberg.org/calckey/calckey"
+							target="_blank"
+							class="_link"
+							>{{ i18n.ts.learnMore }}</a
+						>
 					</div>
-					<template #caption><MkLink url="https://codeberg.org/calckey/calckey/activity">{{ i18n.ts._aboutMisskey.allContributors }}</MkLink></template>
-				</FormSection>
-				<FormSection>
-					<template #label><Mfm text="$[jelly ❤]"/> {{ i18n.ts._aboutMisskey.patrons }}</template>
-					<MkSparkle>
-						<div v-for="patron in patrons" :key="patron" style="margin-bottom: 0.5rem">
-							<Mfm :text="`${patron}`"/>
+					<div class="_formBlock" style="text-align: center">
+						<MkButton primary rounded inline @click="iLoveMisskey"
+							>I <Mfm text="$[jelly ❤]" /> #Calckey</MkButton
+						>
+					</div>
+					<FormSection>
+						<div class="_formLinks">
+							<FormLink
+								to="https://codeberg.org/calckey/calckey"
+								external
+							>
+								<template #icon
+									><i class="ph-code ph-bold ph-lg"></i
+								></template>
+								{{ i18n.ts._aboutMisskey.source }}
+								<template #suffix>Codeberg</template>
+							</FormLink>
+							<FormLink
+								to="https://liberapay.com/ThatOneCalculator"
+								external
+							>
+								<template #icon
+									><i class="ph-money ph-bold ph-lg"></i
+								></template>
+								{{ i18n.ts._aboutMisskey.donate }}
+								<template #suffix>Donate</template>
+							</FormLink>
+							<FormLink
+								to="https://hosted.weblate.org/engage/calckey/"
+								external
+							>
+								<template #icon
+									><i class="ph-translate ph-bold ph-lg"></i
+								></template>
+								{{ i18n.ts._aboutMisskey.translation }}
+								<template #suffix>Translate</template>
+							</FormLink>
 						</div>
-					</MkSparkle>
-					<template #caption>{{ i18n.ts._aboutMisskey.morePatrons }}</template>
-				</FormSection>
-			</div>
-		</MkSpacer>
-	</div>
-</MkStickyContainer>
+					</FormSection>
+					<FormSection>
+						<template #label>{{
+							i18n.ts._aboutMisskey.contributors
+						}}</template>
+						<div class="_formLinks">
+							<FormLink to="/@kainoa@calckey.social"
+								><Mfm
+									:text="'$[sparkle @kainoa@calckey.social] (Main developer)'"
+							/></FormLink>
+							<FormLink to="/@cleo@bz.pawdev.me"
+								><Mfm :text="'@cleo@bz.pawdev.me (Maintainer)'"
+							/></FormLink>
+							<FormLink to="/@panos@i.calckey.cloud"
+								><Mfm
+									:text="'@panos@i.calckey.cloud (Management)'"
+							/></FormLink>
+							<FormLink to="/@freeplay@bz.pawdev.me"
+								><Mfm
+									:text="'@freeplay@bz.pawdev.me (UI/UX Designer)'"
+							/></FormLink>
+							<FormLink
+								to="https://www.youtube.com/c/Henkiwashere"
+								external
+								>Henki (error images artist)</FormLink
+							>
+						</div>
+						<template #caption
+							><MkLink
+								url="https://codeberg.org/calckey/calckey/activity"
+								>{{
+									i18n.ts._aboutMisskey.allContributors
+								}}</MkLink
+							></template
+						>
+					</FormSection>
+					<FormSection>
+						<template #label
+							><Mfm text="$[jelly ❤]" />
+							{{ i18n.ts._aboutMisskey.patrons }}</template
+						>
+						<MkSparkle>
+							<div
+								v-for="patron in patrons"
+								:key="patron"
+								style="margin-bottom: 0.5rem"
+							>
+								<Mfm :text="`${patron}`" />
+							</div>
+						</MkSparkle>
+						<template #caption>{{
+							i18n.ts._aboutMisskey.morePatrons
+						}}</template>
+					</FormSection>
+				</div>
+			</MkSpacer>
+		</div>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { nextTick, onBeforeUnmount } from 'vue';
-import { version } from '@/config';
-import FormLink from '@/components/form/link.vue';
-import FormSection from '@/components/form/section.vue';
-import MkButton from '@/components/MkButton.vue';
-import MkLink from '@/components/MkLink.vue';
-import MkSparkle from '@/components/MkSparkle.vue';
-import { physics } from '@/scripts/physics';
-import { i18n } from '@/i18n';
-import { defaultStore } from '@/store';
-import * as os from '@/os';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import { nextTick, onBeforeUnmount } from "vue";
+import { version } from "@/config";
+import FormLink from "@/components/form/link.vue";
+import FormSection from "@/components/form/section.vue";
+import MkButton from "@/components/MkButton.vue";
+import MkLink from "@/components/MkLink.vue";
+import MkSparkle from "@/components/MkSparkle.vue";
+import { physics } from "@/scripts/physics";
+import { i18n } from "@/i18n";
+import { defaultStore } from "@/store";
+import * as os from "@/os";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
-const patrons = await os.api('patrons');
+const patrons = await os.api("patrons");
 
 let easterEggReady = false;
 let easterEggEmojis = $ref([]);
@@ -89,8 +174,8 @@ function iconLoaded() {
 	for (let i = 0; i < 32; i++) {
 		easterEggEmojis.push({
 			id: i.toString(),
-			top: -(128 + (Math.random() * 256)),
-			left: (Math.random() * containerWidth),
+			top: -(128 + Math.random() * 256),
+			left: Math.random() * containerWidth,
 			emoji: emojis[Math.floor(Math.random() * emojis.length)],
 		});
 	}
@@ -108,7 +193,7 @@ function gravity() {
 
 function iLoveMisskey() {
 	os.post({
-		initialText: 'I $[jelly ❤] #Calckey',
+		initialText: "I $[jelly ❤] #Calckey",
 		instant: true,
 	});
 }
@@ -138,7 +223,8 @@ definePageMetadata({
 		border-radius: var(--radius);
 
 		&.playing {
-			&, * {
+			&,
+			* {
 				user-select: none;
 			}
 
diff --git a/packages/client/src/pages/about.emojis.vue b/packages/client/src/pages/about.emojis.vue
index 2a2ac64311..90d9fb8065 100644
--- a/packages/client/src/pages/about.emojis.vue
+++ b/packages/client/src/pages/about.emojis.vue
@@ -1,44 +1,62 @@
 <template>
-<div class="driuhtrh">
-	<div class="query">
-		<MkInput v-model="q" class="" :placeholder="i18n.ts.search">
-			<template #prefix><i class="ph-magnifying-glass ph-bold ph-lg"></i></template>
-		</MkInput>
+	<div class="driuhtrh">
+		<div class="query">
+			<MkInput v-model="q" class="" :placeholder="i18n.ts.search">
+				<template #prefix
+					><i class="ph-magnifying-glass ph-bold ph-lg"></i
+				></template>
+			</MkInput>
 
-		<!-- たくさんあると邪魔
+			<!-- たくさんあると邪魔
 		<div class="tags">
 			<span class="tag _button" v-for="tag in tags" :class="{ active: selectedTags.has(tag) }" @click="toggleTag(tag)">{{ tag }}</span>
 		</div>
 		-->
+		</div>
+
+		<MkFolder v-if="searchEmojis" class="emojis">
+			<template #header>{{ i18n.ts.searchResult }}</template>
+			<div class="zuvgdzyt">
+				<XEmoji
+					v-for="emoji in searchEmojis"
+					:key="emoji.name"
+					class="emoji"
+					:emoji="emoji"
+				/>
+			</div>
+		</MkFolder>
+
+		<MkFolder
+			v-for="category in customEmojiCategories"
+			:key="category"
+			class="emojis"
+		>
+			<template #header>{{ category || i18n.ts.other }}</template>
+			<div class="zuvgdzyt">
+				<XEmoji
+					v-for="emoji in customEmojis.filter(
+						(e) => e.category === category
+					)"
+					:key="emoji.name"
+					class="emoji"
+					:emoji="emoji"
+				/>
+			</div>
+		</MkFolder>
 	</div>
-
-	<MkFolder v-if="searchEmojis" class="emojis">
-		<template #header>{{ i18n.ts.searchResult }}</template>
-		<div class="zuvgdzyt">
-			<XEmoji v-for="emoji in searchEmojis" :key="emoji.name" class="emoji" :emoji="emoji"/>
-		</div>
-	</MkFolder>
-
-	<MkFolder v-for="category in customEmojiCategories" :key="category" class="emojis">
-		<template #header>{{ category || i18n.ts.other }}</template>
-		<div class="zuvgdzyt">
-			<XEmoji v-for="emoji in customEmojis.filter(e => e.category === category)" :key="emoji.name" class="emoji" :emoji="emoji"/>
-		</div>
-	</MkFolder>
-</div>
 </template>
 
 <script lang="ts">
-import { defineComponent, computed } from 'vue';
-import XEmoji from './emojis.emoji.vue';
-import MkButton from '@/components/MkButton.vue';
-import MkInput from '@/components/form/input.vue';
-import MkSelect from '@/components/form/select.vue';
-import MkFolder from '@/components/MkFolder.vue';
-import MkTab from '@/components/MkTab.vue';
-import * as os from '@/os';
-import { emojiCategories, emojiTags } from '@/instance';
-import { i18n } from '@/i18n';
+import { defineComponent, computed } from "vue";
+import XEmoji from "./emojis.emoji.vue";
+import MkButton from "@/components/MkButton.vue";
+import MkInput from "@/components/form/input.vue";
+import MkSelect from "@/components/form/select.vue";
+import MkFolder from "@/components/MkFolder.vue";
+import MkTab from "@/components/MkTab.vue";
+import * as os from "@/os";
+import { emojiCategories, emojiTags } from "@/instance";
+import { i18n } from "@/i18n";
 
 export default defineComponent({
 	components: {
@@ -52,7 +70,7 @@ export default defineComponent({
 
 	data() {
 		return {
-			q: '',
+			q: "",
 			customEmojiCategories: emojiCategories,
 			customEmojis: this.$instance.emojis,
 			tags: emojiTags,
@@ -63,7 +81,9 @@ export default defineComponent({
 	},
 
 	watch: {
-		q() { this.search(); },
+		q() {
+			this.search();
+		},
 		selectedTags: {
 			handler() {
 				this.search();
@@ -74,15 +94,29 @@ export default defineComponent({
 
 	methods: {
 		search() {
-			if ((this.q === '' || this.q == null) && this.selectedTags.size === 0) {
+			if (
+				(this.q === "" || this.q == null) &&
+				this.selectedTags.size === 0
+			) {
 				this.searchEmojis = null;
 				return;
 			}
 
 			if (this.selectedTags.size === 0) {
-				this.searchEmojis = this.customEmojis.filter(emoji => emoji.name.includes(this.q) || emoji.aliases.includes(this.q));
+				this.searchEmojis = this.customEmojis.filter(
+					(emoji) =>
+						emoji.name.includes(this.q) ||
+						emoji.aliases.includes(this.q)
+				);
 			} else {
-				this.searchEmojis = this.customEmojis.filter(emoji => (emoji.name.includes(this.q) || emoji.aliases.includes(this.q)) && [...this.selectedTags].every(t => emoji.aliases.includes(t)));
+				this.searchEmojis = this.customEmojis.filter(
+					(emoji) =>
+						(emoji.name.includes(this.q) ||
+							emoji.aliases.includes(this.q)) &&
+						[...this.selectedTags].every((t) =>
+							emoji.aliases.includes(t)
+						)
+				);
 			}
 		},
 
diff --git a/packages/client/src/pages/about.federation.vue b/packages/client/src/pages/about.federation.vue
index c8f4594d68..ac4d4c8761 100644
--- a/packages/client/src/pages/about.federation.vue
+++ b/packages/client/src/pages/about.federation.vue
@@ -1,88 +1,150 @@
 <template>
-<div class="taeiyria">
-	<div class="query">
-		<MkInput v-model="host" :debounce="true" class="">
-			<template #prefix><i class="ph-magnifying-glass ph-bold ph-lg"></i></template>
-			<template #label>{{ i18n.ts.host }}</template>
-		</MkInput>
-		<FormSplit style="margin-top: var(--margin);">
-			<MkSelect v-model="state">
-				<template #label>{{ i18n.ts.state }}</template>
-				<option value="all">{{ i18n.ts.all }}</option>
-				<option value="federating">{{ i18n.ts.federating }}</option>
-				<option value="subscribing">{{ i18n.ts.subscribing }}</option>
-				<option value="publishing">{{ i18n.ts.publishing }}</option>
-				<option value="suspended">{{ i18n.ts.suspended }}</option>
-				<option value="blocked">{{ i18n.ts.blocked }}</option>
-				<option value="notResponding">{{ i18n.ts.notResponding }}</option>
-			</MkSelect>
-			<MkSelect v-model="sort">
-				<template #label>{{ i18n.ts.sort }}</template>
-				<option value="+pubSub">{{ i18n.ts.pubSub }} ({{ i18n.ts.descendingOrder }})</option>
-				<option value="-pubSub">{{ i18n.ts.pubSub }} ({{ i18n.ts.ascendingOrder }})</option>
-				<option value="+notes">{{ i18n.ts.notes }} ({{ i18n.ts.descendingOrder }})</option>
-				<option value="-notes">{{ i18n.ts.notes }} ({{ i18n.ts.ascendingOrder }})</option>
-				<option value="+users">{{ i18n.ts.users }} ({{ i18n.ts.descendingOrder }})</option>
-				<option value="-users">{{ i18n.ts.users }} ({{ i18n.ts.ascendingOrder }})</option>
-				<option value="+following">{{ i18n.ts.following }} ({{ i18n.ts.descendingOrder }})</option>
-				<option value="-following">{{ i18n.ts.following }} ({{ i18n.ts.ascendingOrder }})</option>
-				<option value="+followers">{{ i18n.ts.followers }} ({{ i18n.ts.descendingOrder }})</option>
-				<option value="-followers">{{ i18n.ts.followers }} ({{ i18n.ts.ascendingOrder }})</option>
-				<option value="+caughtAt">{{ i18n.ts.registeredAt }} ({{ i18n.ts.descendingOrder }})</option>
-				<option value="-caughtAt">{{ i18n.ts.registeredAt }} ({{ i18n.ts.ascendingOrder }})</option>
-				<option value="+lastCommunicatedAt">{{ i18n.ts.lastCommunication }} ({{ i18n.ts.descendingOrder }})</option>
-				<option value="-lastCommunicatedAt">{{ i18n.ts.lastCommunication }} ({{ i18n.ts.ascendingOrder }})</option>
-			</MkSelect>
-		</FormSplit>
-	</div>
-
-	<MkPagination v-slot="{items}" ref="instances" :key="host + state" :pagination="pagination">
-		<div class="dqokceoi">
-			<MkA v-for="instance in items" :key="instance.id" v-tooltip.mfm="`Last communicated: ${new Date(instance.lastCommunicatedAt).toLocaleString()}\nStatus: ${getStatus(instance)}`" class="instance" :to="`/instance-info/${instance.host}`">
-				<MkInstanceCardMini :instance="instance"/>
-			</MkA>
+	<div class="taeiyria">
+		<div class="query">
+			<MkInput v-model="host" :debounce="true" class="">
+				<template #prefix
+					><i class="ph-magnifying-glass ph-bold ph-lg"></i
+				></template>
+				<template #label>{{ i18n.ts.host }}</template>
+			</MkInput>
+			<FormSplit style="margin-top: var(--margin)">
+				<MkSelect v-model="state">
+					<template #label>{{ i18n.ts.state }}</template>
+					<option value="all">{{ i18n.ts.all }}</option>
+					<option value="federating">{{ i18n.ts.federating }}</option>
+					<option value="subscribing">
+						{{ i18n.ts.subscribing }}
+					</option>
+					<option value="publishing">{{ i18n.ts.publishing }}</option>
+					<option value="suspended">{{ i18n.ts.suspended }}</option>
+					<option value="blocked">{{ i18n.ts.blocked }}</option>
+					<option value="notResponding">
+						{{ i18n.ts.notResponding }}
+					</option>
+				</MkSelect>
+				<MkSelect v-model="sort">
+					<template #label>{{ i18n.ts.sort }}</template>
+					<option value="+pubSub">
+						{{ i18n.ts.pubSub }} ({{ i18n.ts.descendingOrder }})
+					</option>
+					<option value="-pubSub">
+						{{ i18n.ts.pubSub }} ({{ i18n.ts.ascendingOrder }})
+					</option>
+					<option value="+notes">
+						{{ i18n.ts.notes }} ({{ i18n.ts.descendingOrder }})
+					</option>
+					<option value="-notes">
+						{{ i18n.ts.notes }} ({{ i18n.ts.ascendingOrder }})
+					</option>
+					<option value="+users">
+						{{ i18n.ts.users }} ({{ i18n.ts.descendingOrder }})
+					</option>
+					<option value="-users">
+						{{ i18n.ts.users }} ({{ i18n.ts.ascendingOrder }})
+					</option>
+					<option value="+following">
+						{{ i18n.ts.following }} ({{ i18n.ts.descendingOrder }})
+					</option>
+					<option value="-following">
+						{{ i18n.ts.following }} ({{ i18n.ts.ascendingOrder }})
+					</option>
+					<option value="+followers">
+						{{ i18n.ts.followers }} ({{ i18n.ts.descendingOrder }})
+					</option>
+					<option value="-followers">
+						{{ i18n.ts.followers }} ({{ i18n.ts.ascendingOrder }})
+					</option>
+					<option value="+caughtAt">
+						{{ i18n.ts.registeredAt }} ({{
+							i18n.ts.descendingOrder
+						}})
+					</option>
+					<option value="-caughtAt">
+						{{ i18n.ts.registeredAt }} ({{
+							i18n.ts.ascendingOrder
+						}})
+					</option>
+					<option value="+lastCommunicatedAt">
+						{{ i18n.ts.lastCommunication }} ({{
+							i18n.ts.descendingOrder
+						}})
+					</option>
+					<option value="-lastCommunicatedAt">
+						{{ i18n.ts.lastCommunication }} ({{
+							i18n.ts.ascendingOrder
+						}})
+					</option>
+				</MkSelect>
+			</FormSplit>
 		</div>
-	</MkPagination>
-</div>
+
+		<MkPagination
+			v-slot="{ items }"
+			ref="instances"
+			:key="host + state"
+			:pagination="pagination"
+		>
+			<div class="dqokceoi">
+				<MkA
+					v-for="instance in items"
+					:key="instance.id"
+					v-tooltip.mfm="
+						`Last communicated: ${new Date(
+							instance.lastCommunicatedAt
+						).toLocaleString()}\nStatus: ${getStatus(instance)}`
+					"
+					class="instance"
+					:to="`/instance-info/${instance.host}`"
+				>
+					<MkInstanceCardMini :instance="instance" />
+				</MkA>
+			</div>
+		</MkPagination>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
-import MkButton from '@/components/MkButton.vue';
-import MkInput from '@/components/form/input.vue';
-import MkSelect from '@/components/form/select.vue';
-import MkPagination from '@/components/MkPagination.vue';
-import MkInstanceCardMini from '@/components/MkInstanceCardMini.vue';
-import FormSplit from '@/components/form/split.vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
+import { computed } from "vue";
+import MkButton from "@/components/MkButton.vue";
+import MkInput from "@/components/form/input.vue";
+import MkSelect from "@/components/form/select.vue";
+import MkPagination from "@/components/MkPagination.vue";
+import MkInstanceCardMini from "@/components/MkInstanceCardMini.vue";
+import FormSplit from "@/components/form/split.vue";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
 
-let host = $ref('');
-let state = $ref('federating');
-let sort = $ref('+pubSub');
+let host = $ref("");
+let state = $ref("federating");
+let sort = $ref("+pubSub");
 const pagination = {
-	endpoint: 'federation/instances' as const,
+	endpoint: "federation/instances" as const,
 	limit: 10,
 	offsetMode: true,
 	params: computed(() => ({
 		sort: sort,
-		host: host !== '' ? host : null,
-		...(
-			state === 'federating' ? { federating: true } :
-			state === 'subscribing' ? { subscribing: true } :
-			state === 'publishing' ? { publishing: true } :
-			state === 'suspended' ? { suspended: true } :
-			state === 'blocked' ? { blocked: true } :
-			state === 'notResponding' ? { notResponding: true } :
-			{}),
+		host: host !== "" ? host : null,
+		...(state === "federating"
+			? { federating: true }
+			: state === "subscribing"
+			? { subscribing: true }
+			: state === "publishing"
+			? { publishing: true }
+			: state === "suspended"
+			? { suspended: true }
+			: state === "blocked"
+			? { blocked: true }
+			: state === "notResponding"
+			? { notResponding: true }
+			: {}),
 	})),
 };
 
 function getStatus(instance) {
-	if (instance.isSuspended) return 'Suspended';
-	if (instance.isBlocked) return 'Blocked';
-	if (instance.isNotResponding) return 'Error';
-	return 'Alive';
+	if (instance.isSuspended) return "Suspended";
+	if (instance.isBlocked) return "Blocked";
+	if (instance.isNotResponding) return "Error";
+	return "Alive";
 }
 </script>
 
diff --git a/packages/client/src/pages/about.vue b/packages/client/src/pages/about.vue
index 0a0335a303..4b9e62cf80 100644
--- a/packages/client/src/pages/about.vue
+++ b/packages/client/src/pages/about.vue
@@ -1,172 +1,247 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
-	<MkSpacer :content-max="600" :margin-min="20">
-		<swiper
-			:modules="[Virtual]"
-			:space-between="20"
-			:virtual="true"
-			:allow-touch-move="!(deviceKind === 'desktop' && !defaultStore.state.swipeOnDesktop)"
-			@swiper="setSwiperRef"
-			@slide-change="onSlideChange"
-		>
-			<swiper-slide>
-				<div class="_formRoot">
-					<div class="_formBlock fwhjspax" :style="{ backgroundImage: `url(${ $instance.bannerUrl })` }">
-						<div class="content">
-							<img ref="instanceIcon" :src="$instance.iconUrl || $instance.faviconUrl || '/favicon.ico'" aria-label="none" class="icon" :class="instanceIconAnimation" @click="easterEgg"/>
-							<div class="name">
-								<b>{{ $instance.name || host }}</b>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader
+				v-model:tab="tab"
+				:actions="headerActions"
+				:tabs="headerTabs"
+		/></template>
+		<MkSpacer :content-max="600" :margin-min="20">
+			<swiper
+				:modules="[Virtual]"
+				:space-between="20"
+				:virtual="true"
+				:allow-touch-move="
+					!(
+						deviceKind === 'desktop' &&
+						!defaultStore.state.swipeOnDesktop
+					)
+				"
+				@swiper="setSwiperRef"
+				@slide-change="onSlideChange"
+			>
+				<swiper-slide>
+					<div class="_formRoot">
+						<div
+							class="_formBlock fwhjspax"
+							:style="{
+								backgroundImage: `url(${$instance.bannerUrl})`,
+							}"
+						>
+							<div class="content">
+								<img
+									ref="instanceIcon"
+									:src="
+										$instance.iconUrl ||
+										$instance.faviconUrl ||
+										'/favicon.ico'
+									"
+									aria-label="none"
+									class="icon"
+									:class="instanceIconAnimation"
+									@click="easterEgg"
+								/>
+								<div class="name">
+									<b>{{ $instance.name || host }}</b>
+								</div>
 							</div>
 						</div>
-					</div>
 
-					<MkKeyValue class="_formBlock">
-						<template #key>{{ i18n.ts.description }}</template>
-						<template #value>{{ $instance.description }}</template>
-					</MkKeyValue>
-
-					<FormSection>
-						<MkKeyValue class="_formBlock" :copy="version">
-							<template #key>Calckey</template>
-							<template #value>{{ version }}</template>
+						<MkKeyValue class="_formBlock">
+							<template #key>{{ i18n.ts.description }}</template>
+							<template #value>{{
+								$instance.description
+							}}</template>
 						</MkKeyValue>
-						<FormLink to="/about-calckey">{{ i18n.ts.aboutMisskey }}</FormLink>
-					</FormSection>
 
-					<FormSection>
-						<FormSplit>
-							<MkKeyValue class="_formBlock">
-								<template #key>{{ i18n.ts.administrator }}</template>
-								<template #value>{{ $instance.maintainerName }}</template>
-							</MkKeyValue>
-							<MkKeyValue class="_formBlock">
-								<template #key>{{ i18n.ts.contact }}</template>
-								<template #value>{{ $instance.maintainerEmail }}</template>
-							</MkKeyValue>
-						</FormSplit>
-						<FormLink v-if="$instance.tosUrl" :to="$instance.tosUrl" class="_formBlock" external>{{ i18n.ts.tos }}</FormLink>
-					</FormSection>
-
-					<FormSuspense :p="initStats">
 						<FormSection>
-							<template #label>{{ i18n.ts.statistics }}</template>
+							<MkKeyValue class="_formBlock" :copy="version">
+								<template #key>Calckey</template>
+								<template #value>{{ version }}</template>
+							</MkKeyValue>
+							<FormLink to="/about-calckey">{{
+								i18n.ts.aboutMisskey
+							}}</FormLink>
+						</FormSection>
+
+						<FormSection>
 							<FormSplit>
 								<MkKeyValue class="_formBlock">
-									<template #key>{{ i18n.ts.users }}</template>
-									<template #value>{{ number(stats.originalUsersCount) }}</template>
+									<template #key>{{
+										i18n.ts.administrator
+									}}</template>
+									<template #value>{{
+										$instance.maintainerName
+									}}</template>
 								</MkKeyValue>
 								<MkKeyValue class="_formBlock">
-									<template #key>{{ i18n.ts.notes }}</template>
-									<template #value>{{ number(stats.originalNotesCount) }}</template>
+									<template #key>{{
+										i18n.ts.contact
+									}}</template>
+									<template #value>{{
+										$instance.maintainerEmail
+									}}</template>
 								</MkKeyValue>
 							</FormSplit>
+							<FormLink
+								v-if="$instance.tosUrl"
+								:to="$instance.tosUrl"
+								class="_formBlock"
+								external
+								>{{ i18n.ts.tos }}</FormLink
+							>
 						</FormSection>
-					</FormSuspense>
 
-					<FormSection>
-						<template #label>Well-known resources</template>
-						<div class="_formLinks">
-							<FormLink :to="`/.well-known/host-meta`" external>host-meta</FormLink>
-							<FormLink :to="`/.well-known/host-meta.json`" external>host-meta.json</FormLink>
-							<FormLink :to="`/.well-known/nodeinfo`" external>nodeinfo</FormLink>
-							<FormLink :to="`/robots.txt`" external>robots.txt</FormLink>
-							<FormLink :to="`/manifest.json`" external>manifest.json</FormLink>
-						</div>
-					</FormSection>
-				</div>
-			</swiper-slide>
-			<swiper-slide>
-				<XEmojis/>
-			</swiper-slide>
-			<swiper-slide>
-				<MkInstanceStats :chart-limit="500" :detailed="true"/>
-			</swiper-slide>
-			<swiper-slide>
-				<XFederation/>
-			</swiper-slide>
-		</swiper>
-	</MkSpacer>
-</MkStickyContainer>
+						<FormSuspense :p="initStats">
+							<FormSection>
+								<template #label>{{
+									i18n.ts.statistics
+								}}</template>
+								<FormSplit>
+									<MkKeyValue class="_formBlock">
+										<template #key>{{
+											i18n.ts.users
+										}}</template>
+										<template #value>{{
+											number(stats.originalUsersCount)
+										}}</template>
+									</MkKeyValue>
+									<MkKeyValue class="_formBlock">
+										<template #key>{{
+											i18n.ts.notes
+										}}</template>
+										<template #value>{{
+											number(stats.originalNotesCount)
+										}}</template>
+									</MkKeyValue>
+								</FormSplit>
+							</FormSection>
+						</FormSuspense>
+
+						<FormSection>
+							<template #label>Well-known resources</template>
+							<div class="_formLinks">
+								<FormLink
+									:to="`/.well-known/host-meta`"
+									external
+									>host-meta</FormLink
+								>
+								<FormLink
+									:to="`/.well-known/host-meta.json`"
+									external
+									>host-meta.json</FormLink
+								>
+								<FormLink :to="`/.well-known/nodeinfo`" external
+									>nodeinfo</FormLink
+								>
+								<FormLink :to="`/robots.txt`" external
+									>robots.txt</FormLink
+								>
+								<FormLink :to="`/manifest.json`" external
+									>manifest.json</FormLink
+								>
+							</div>
+						</FormSection>
+					</div>
+				</swiper-slide>
+				<swiper-slide>
+					<XEmojis />
+				</swiper-slide>
+				<swiper-slide>
+					<MkInstanceStats :chart-limit="500" :detailed="true" />
+				</swiper-slide>
+				<swiper-slide>
+					<XFederation />
+				</swiper-slide>
+			</swiper>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { ref, computed, onMounted, watch } from 'vue';
-import { Virtual } from 'swiper';
-import { Swiper, SwiperSlide } from 'swiper/vue';
-import XEmojis from './about.emojis.vue';
-import XFederation from './about.federation.vue';
-import { version, instanceName , host } from '@/config';
-import FormLink from '@/components/form/link.vue';
-import FormSection from '@/components/form/section.vue';
-import FormSuspense from '@/components/form/suspense.vue';
-import FormSplit from '@/components/form/split.vue';
-import MkKeyValue from '@/components/MkKeyValue.vue';
-import MkInstanceStats from '@/components/MkInstanceStats.vue';
-import * as os from '@/os';
-import number from '@/filters/number';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import { deviceKind } from '@/scripts/device-kind';
-import { iAmModerator } from '@/account';
-import { instance } from '@/instance';
-import { defaultStore } from '@/store';
-import 'swiper/scss';
-import 'swiper/scss/virtual';
+import { ref, computed, onMounted, watch } from "vue";
+import { Virtual } from "swiper";
+import { Swiper, SwiperSlide } from "swiper/vue";
+import XEmojis from "./about.emojis.vue";
+import XFederation from "./about.federation.vue";
+import { version, instanceName, host } from "@/config";
+import FormLink from "@/components/form/link.vue";
+import FormSection from "@/components/form/section.vue";
+import FormSuspense from "@/components/form/suspense.vue";
+import FormSplit from "@/components/form/split.vue";
+import MkKeyValue from "@/components/MkKeyValue.vue";
+import MkInstanceStats from "@/components/MkInstanceStats.vue";
+import * as os from "@/os";
+import number from "@/filters/number";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
+import { deviceKind } from "@/scripts/device-kind";
+import { iAmModerator } from "@/account";
+import { instance } from "@/instance";
+import { defaultStore } from "@/store";
+import "swiper/scss";
+import "swiper/scss/virtual";
 
-withDefaults(defineProps<{
-	initialTab?: string;
-}>(), {
-	initialTab: 'overview',
-});
+withDefaults(
+	defineProps<{
+		initialTab?: string;
+	}>(),
+	{
+		initialTab: "overview",
+	}
+);
 
 let stats = $ref(null);
 let instanceIcon = $ref<HTMLImageElement>();
-let instanceIconAnimation = 'none';
+let instanceIconAnimation = "none";
 let iconClicks = 0;
-let tabs = ['overview', 'emojis', 'charts'];
+let tabs = ["overview", "emojis", "charts"];
 let tab = $ref(tabs[0]);
-watch($$(tab), () => (syncSlide(tabs.indexOf(tab))));
+watch($$(tab), () => syncSlide(tabs.indexOf(tab)));
 
-if (iAmModerator) tabs.push('federation');
+if (iAmModerator) tabs.push("federation");
 
-const initStats = () => os.api('stats', {
-}).then((res) => {
-	stats = res;
-});
+const initStats = () =>
+	os.api("stats", {}).then((res) => {
+		stats = res;
+	});
 
 const headerActions = $computed(() => []);
 
-let theTabs = [{
-	key: 'overview',
-	title: i18n.ts.overview,
-	icon: 'ph-map-trifold ph-bold ph-lg',
-}, {
-	key: 'emojis',
-	title: i18n.ts.customEmojis,
-	icon: 'ph-smiley ph-bold ph-lg',
-}, {
-	key: 'charts',
-	title: i18n.ts.charts,
-	icon: 'ph-chart-bar ph-bold ph-lg',
-}];
+let theTabs = [
+	{
+		key: "overview",
+		title: i18n.ts.overview,
+		icon: "ph-map-trifold ph-bold ph-lg",
+	},
+	{
+		key: "emojis",
+		title: i18n.ts.customEmojis,
+		icon: "ph-smiley ph-bold ph-lg",
+	},
+	{
+		key: "charts",
+		title: i18n.ts.charts,
+		icon: "ph-chart-bar ph-bold ph-lg",
+	},
+];
 
 if (iAmModerator) {
-	theTabs.push(
-		{
-			key: 'federation',
-			title: i18n.ts.federation,
-			icon: 'ph-planet ph-bold ph-lg',
-		},
-	);
+	theTabs.push({
+		key: "federation",
+		title: i18n.ts.federation,
+		icon: "ph-planet ph-bold ph-lg",
+	});
 }
 
 let headerTabs = $computed(() => theTabs);
 
-definePageMetadata(computed(() => ({
-	title: i18n.ts.instanceInfo,
-	icon: 'ph-info ph-bold ph-lg',
-})));
+definePageMetadata(
+	computed(() => ({
+		title: i18n.ts.instanceInfo,
+		icon: "ph-info ph-bold ph-lg",
+	}))
+);
 
 async function sleep(seconds) {
 	return new Promise((resolve) => setTimeout(resolve, seconds * 1000));
@@ -174,14 +249,13 @@ async function sleep(seconds) {
 
 onMounted(() => {
 	if (defaultStore.state.woozyMode) {
-		instanceIcon.src = '/static-assets/woozy.png';
+		instanceIcon.src = "/static-assets/woozy.png";
 	}
 });
 
-
 function easterEgg() {
 	iconClicks++;
-	instanceIconAnimation = 'noAnimation';
+	instanceIconAnimation = "noAnimation";
 	console.log(instanceIconAnimation);
 	sleep(0.1);
 	const normalizedCount = (iconClicks % 3) + 1;
@@ -189,14 +263,14 @@ function easterEgg() {
 	if (iconClicks % 3 === 0) {
 		defaultStore.state.woozyMode = !defaultStore.state.woozyMode;
 		sleep(0.4);
-		instanceIconAnimation = 'noAnimation';
-		instanceIconAnimation = 'doSpinY';
+		instanceIconAnimation = "noAnimation";
+		instanceIconAnimation = "doSpinY";
 		console.log(instanceIconAnimation);
 		if (iconClicks % 6 === 0) {
-			instanceIcon.src = instance.iconUrl || instance.faviconUrl || '/favicon.ico'
-		}
-		else {
-			instanceIcon.src = '/static-assets/woozy.png';
+			instanceIcon.src =
+				instance.iconUrl || instance.faviconUrl || "/favicon.ico";
+		} else {
+			instanceIcon.src = "/static-assets/woozy.png";
 		}
 	}
 }
@@ -215,55 +289,124 @@ function onSlideChange() {
 function syncSlide(index) {
 	swiperRef.slideTo(index);
 }
-
 </script>
 
 <style lang="scss" scoped>
 @keyframes iconShake1 {
-	0% { transform: translate(2px, 0px) rotate(-1deg) }
-	10% { transform: translate(2px, -3px) rotate(5deg) }
-	20% { transform: translate(-1px, -3px) rotate(3deg) }
-	30% { transform: translate(-2px, 0px) rotate(-1deg) }
-	40% { transform: translate(-2px, -1px) rotate(4deg) }
-	50% { transform: translate(-1px, -1px) rotate(1deg) }
-	60% { transform: translate(-2px, 0px) rotate(-8deg) }
-	70% { transform: translate(1px, 2px) rotate(-2deg) }
-	80% { transform: translate(-1px, 2px) rotate(4deg) }
-	90% { transform: translate(-1px, 1px) rotate(11deg) }
-	100% { transform: translate(-3px, -3px) rotate(-5deg) }
+	0% {
+		transform: translate(2px, 0px) rotate(-1deg);
+	}
+	10% {
+		transform: translate(2px, -3px) rotate(5deg);
+	}
+	20% {
+		transform: translate(-1px, -3px) rotate(3deg);
+	}
+	30% {
+		transform: translate(-2px, 0px) rotate(-1deg);
+	}
+	40% {
+		transform: translate(-2px, -1px) rotate(4deg);
+	}
+	50% {
+		transform: translate(-1px, -1px) rotate(1deg);
+	}
+	60% {
+		transform: translate(-2px, 0px) rotate(-8deg);
+	}
+	70% {
+		transform: translate(1px, 2px) rotate(-2deg);
+	}
+	80% {
+		transform: translate(-1px, 2px) rotate(4deg);
+	}
+	90% {
+		transform: translate(-1px, 1px) rotate(11deg);
+	}
+	100% {
+		transform: translate(-3px, -3px) rotate(-5deg);
+	}
 }
 
 @keyframes iconShake2 {
-	0% { transform: translate(-1px, 5px) rotate(33deg) }
-	10% { transform: translate(-2px, 7px) rotate(20deg) }
-	20% { transform: translate(8px, 5px) rotate(31deg) }
-	30% { transform: translate(-2px, 5px) rotate(3deg) }
-	40% { transform: translate(4px, 6px) rotate(16deg) }
-	50% { transform: translate(8px, -3px) rotate(19deg) }
-	60% { transform: translate(7px, -2px) rotate(0deg) }
-	70% { transform: translate(4px, 4px) rotate(8deg) }
-	80% { transform: translate(7px, -3px) rotate(13deg) }
-	90% { transform: translate(6px, 7px) rotate(4deg) }
-	100% { transform: translate(4px, -2px) rotate(-2deg) }
+	0% {
+		transform: translate(-1px, 5px) rotate(33deg);
+	}
+	10% {
+		transform: translate(-2px, 7px) rotate(20deg);
+	}
+	20% {
+		transform: translate(8px, 5px) rotate(31deg);
+	}
+	30% {
+		transform: translate(-2px, 5px) rotate(3deg);
+	}
+	40% {
+		transform: translate(4px, 6px) rotate(16deg);
+	}
+	50% {
+		transform: translate(8px, -3px) rotate(19deg);
+	}
+	60% {
+		transform: translate(7px, -2px) rotate(0deg);
+	}
+	70% {
+		transform: translate(4px, 4px) rotate(8deg);
+	}
+	80% {
+		transform: translate(7px, -3px) rotate(13deg);
+	}
+	90% {
+		transform: translate(6px, 7px) rotate(4deg);
+	}
+	100% {
+		transform: translate(4px, -2px) rotate(-2deg);
+	}
 }
 
 @keyframes iconShake3 {
-	0% { transform: translate(12px, -2px) rotate(57deg) }
-	10% { transform: translate(10px, 2px) rotate(12deg) }
-	20% { transform: translate(10px, 4px) rotate(3deg) }
-	30% { transform: translate(17px, 11px) rotate(15deg) }
-	40% { transform: translate(12px, 20px) rotate(-11deg) }
-	50% { transform: translate(5px, 12px) rotate(43deg) }
-	60% { transform: translate(16px, 8px) rotate(-4deg) }
-	70% { transform: translate(14px, 11px) rotate(22deg) }
-	80% { transform: translate(9px, 19px) rotate(-3deg) }
-	90% { transform: translate(0px, 12px) rotate(-3deg) }
-	100% { transform: translate(17px, 3px) rotate(57deg) }
+	0% {
+		transform: translate(12px, -2px) rotate(57deg);
+	}
+	10% {
+		transform: translate(10px, 2px) rotate(12deg);
+	}
+	20% {
+		transform: translate(10px, 4px) rotate(3deg);
+	}
+	30% {
+		transform: translate(17px, 11px) rotate(15deg);
+	}
+	40% {
+		transform: translate(12px, 20px) rotate(-11deg);
+	}
+	50% {
+		transform: translate(5px, 12px) rotate(43deg);
+	}
+	60% {
+		transform: translate(16px, 8px) rotate(-4deg);
+	}
+	70% {
+		transform: translate(14px, 11px) rotate(22deg);
+	}
+	80% {
+		transform: translate(9px, 19px) rotate(-3deg);
+	}
+	90% {
+		transform: translate(0px, 12px) rotate(-3deg);
+	}
+	100% {
+		transform: translate(17px, 3px) rotate(57deg);
+	}
 }
 
 @keyframes spinY {
-	0% { transform: perspective(128px) rotateY(0deg); }
-	100% { transform: perspective(128px) rotateY(360deg); }
+	0% {
+		transform: perspective(128px) rotateY(0deg);
+	}
+	100% {
+		transform: perspective(128px) rotateY(360deg);
+	}
 }
 
 .fwhjspax {
diff --git a/packages/client/src/pages/admin-file.vue b/packages/client/src/pages/admin-file.vue
index 30e3d420cf..7806cf23c0 100644
--- a/packages/client/src/pages/admin-file.vue
+++ b/packages/client/src/pages/admin-file.vue
@@ -1,121 +1,197 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
-	<MkSpacer :content-max="600" :margin-min="16" :margin-max="32">
-		<swiper
-			:modules="[Virtual]"
-			:space-between="20"
-			:virtual="true"
-			:allow-touch-move="!(deviceKind === 'desktop' && !defaultStore.state.swipeOnDesktop)"
-			@swiper="setSwiperRef"
-			@slide-change="onSlideChange"
-		>
-			<swiper-slide>
-				<div class="cxqhhsmd _formRoot">
-					<a class="_formBlock thumbnail" :href="file.url" target="_blank">
-						<MkDriveFileThumbnail class="thumbnail" :file="file" fit="contain"/>
-					</a>
-					<div class="_formBlock">
-						<MkKeyValue :copy="file.type" oneline style="margin: 1em 0;">
-							<template #key>MIME Type</template>
-							<template #value><span class="_monospace">{{ file.type }}</span></template>
-						</MkKeyValue>
-						<MkKeyValue oneline style="margin: 1em 0;">
-							<template #key>Size</template>
-							<template #value><span class="_monospace">{{ bytes(file.size) }}</span></template>
-						</MkKeyValue>
-						<MkKeyValue :copy="file.id" oneline style="margin: 1em 0;">
-							<template #key>ID</template>
-							<template #value><span class="_monospace">{{ file.id }}</span></template>
-						</MkKeyValue>
-						<MkKeyValue :copy="file.md5" oneline style="margin: 1em 0;">
-							<template #key>MD5</template>
-							<template #value><span class="_monospace">{{ file.md5 }}</span></template>
-						</MkKeyValue>
-						<MkKeyValue oneline style="margin: 1em 0;">
-							<template #key>{{ i18n.ts.createdAt }}</template>
-							<template #value><span class="_monospace"><MkTime :time="file.createdAt" mode="detail" style="display: block;"/></span></template>
-						</MkKeyValue>
-					</div>
-					<MkA v-if="file.user" class="user" :to="`/user-info/${file.user.id}`">
-						<MkUserCardMini :user="file.user"/>
-					</MkA>
-					<div class="_formBlock">
-						<MkSwitch v-model="isSensitive" @update:modelValue="toggleIsSensitive">NSFW</MkSwitch>
-					</div>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader
+				v-model:tab="tab"
+				:actions="headerActions"
+				:tabs="headerTabs"
+		/></template>
+		<MkSpacer :content-max="600" :margin-min="16" :margin-max="32">
+			<swiper
+				:modules="[Virtual]"
+				:space-between="20"
+				:virtual="true"
+				:allow-touch-move="
+					!(
+						deviceKind === 'desktop' &&
+						!defaultStore.state.swipeOnDesktop
+					)
+				"
+				@swiper="setSwiperRef"
+				@slide-change="onSlideChange"
+			>
+				<swiper-slide>
+					<div class="cxqhhsmd _formRoot">
+						<a
+							class="_formBlock thumbnail"
+							:href="file.url"
+							target="_blank"
+						>
+							<MkDriveFileThumbnail
+								class="thumbnail"
+								:file="file"
+								fit="contain"
+							/>
+						</a>
+						<div class="_formBlock">
+							<MkKeyValue
+								:copy="file.type"
+								oneline
+								style="margin: 1em 0"
+							>
+								<template #key>MIME Type</template>
+								<template #value
+									><span class="_monospace">{{
+										file.type
+									}}</span></template
+								>
+							</MkKeyValue>
+							<MkKeyValue oneline style="margin: 1em 0">
+								<template #key>Size</template>
+								<template #value
+									><span class="_monospace">{{
+										bytes(file.size)
+									}}</span></template
+								>
+							</MkKeyValue>
+							<MkKeyValue
+								:copy="file.id"
+								oneline
+								style="margin: 1em 0"
+							>
+								<template #key>ID</template>
+								<template #value
+									><span class="_monospace">{{
+										file.id
+									}}</span></template
+								>
+							</MkKeyValue>
+							<MkKeyValue
+								:copy="file.md5"
+								oneline
+								style="margin: 1em 0"
+							>
+								<template #key>MD5</template>
+								<template #value
+									><span class="_monospace">{{
+										file.md5
+									}}</span></template
+								>
+							</MkKeyValue>
+							<MkKeyValue oneline style="margin: 1em 0">
+								<template #key>{{
+									i18n.ts.createdAt
+								}}</template>
+								<template #value
+									><span class="_monospace"
+										><MkTime
+											:time="file.createdAt"
+											mode="detail"
+											style="display: block" /></span
+								></template>
+							</MkKeyValue>
+						</div>
+						<MkA
+							v-if="file.user"
+							class="user"
+							:to="`/user-info/${file.user.id}`"
+						>
+							<MkUserCardMini :user="file.user" />
+						</MkA>
+						<div class="_formBlock">
+							<MkSwitch
+								v-model="isSensitive"
+								@update:modelValue="toggleIsSensitive"
+								>NSFW</MkSwitch
+							>
+						</div>
 
-					<div class="_formBlock">
-						<MkButton danger @click="del"><i class="ph-trash ph-bold ph-lg"></i> {{ i18n.ts.delete }}</MkButton>
+						<div class="_formBlock">
+							<MkButton danger @click="del"
+								><i class="ph-trash ph-bold ph-lg"></i>
+								{{ i18n.ts.delete }}</MkButton
+							>
+						</div>
 					</div>
-				</div>
-			</swiper-slide>
-			<swiper-slide>
-				<div v-if="info" class="_formRoot">
-					<MkInfo v-if="!iAmAdmin" warn>{{ i18n.ts.requireAdminForView }}</MkInfo>
-					<MkKeyValue v-if="info.requestIp" class="_formBlock _monospace" :copy="info.requestIp" oneline>
-						<template #key>IP</template>
-						<template #value>{{ info.requestIp }}</template>
-					</MkKeyValue>
-					<FormSection v-if="info.requestHeaders">
-						<template #label>Headers</template>
-						<MkKeyValue v-for="(v, k) in info.requestHeaders" :key="k" class="_formBlock _monospace">
-							<template #key>{{ k }}</template>
-							<template #value>{{ v }}</template>
+				</swiper-slide>
+				<swiper-slide>
+					<div v-if="info" class="_formRoot">
+						<MkInfo v-if="!iAmAdmin" warn>{{
+							i18n.ts.requireAdminForView
+						}}</MkInfo>
+						<MkKeyValue
+							v-if="info.requestIp"
+							class="_formBlock _monospace"
+							:copy="info.requestIp"
+							oneline
+						>
+							<template #key>IP</template>
+							<template #value>{{ info.requestIp }}</template>
 						</MkKeyValue>
-					</FormSection>
-				</div>
-			</swiper-slide>
-			<swiper-slide>
-				<div class="_formRoot">
-					<MkObjectView v-if="info" tall :value="info">
-					</MkObjectView>
-				</div>
-			</swiper-slide>
-		</swiper>
-	</MkSpacer>
-</MkStickyContainer>
+						<FormSection v-if="info.requestHeaders">
+							<template #label>Headers</template>
+							<MkKeyValue
+								v-for="(v, k) in info.requestHeaders"
+								:key="k"
+								class="_formBlock _monospace"
+							>
+								<template #key>{{ k }}</template>
+								<template #value>{{ v }}</template>
+							</MkKeyValue>
+						</FormSection>
+					</div>
+				</swiper-slide>
+				<swiper-slide>
+					<div class="_formRoot">
+						<MkObjectView v-if="info" tall :value="info">
+						</MkObjectView>
+					</div>
+				</swiper-slide>
+			</swiper>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { computed, watch } from 'vue';
-import { Virtual } from 'swiper';
-import { Swiper, SwiperSlide } from 'swiper/vue';
-import MkButton from '@/components/MkButton.vue';
-import MkSwitch from '@/components/form/switch.vue';
-import MkObjectView from '@/components/MkObjectView.vue';
-import MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue';
-import MkKeyValue from '@/components/MkKeyValue.vue';
-import FormSection from '@/components/form/section.vue';
-import MkUserCardMini from '@/components/MkUserCardMini.vue';
-import MkInfo from '@/components/MkInfo.vue';
-import bytes from '@/filters/bytes';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import { deviceKind } from '@/scripts/device-kind';
-import { acct } from '@/filters/user';
-import { iAmAdmin, iAmModerator } from '@/account';
-import { defaultStore } from '@/store';
-import 'swiper/scss';
-import 'swiper/scss/virtual';
+import { computed, watch } from "vue";
+import { Virtual } from "swiper";
+import { Swiper, SwiperSlide } from "swiper/vue";
+import MkButton from "@/components/MkButton.vue";
+import MkSwitch from "@/components/form/switch.vue";
+import MkObjectView from "@/components/MkObjectView.vue";
+import MkDriveFileThumbnail from "@/components/MkDriveFileThumbnail.vue";
+import MkKeyValue from "@/components/MkKeyValue.vue";
+import FormSection from "@/components/form/section.vue";
+import MkUserCardMini from "@/components/MkUserCardMini.vue";
+import MkInfo from "@/components/MkInfo.vue";
+import bytes from "@/filters/bytes";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
+import { deviceKind } from "@/scripts/device-kind";
+import { acct } from "@/filters/user";
+import { iAmAdmin, iAmModerator } from "@/account";
+import { defaultStore } from "@/store";
+import "swiper/scss";
+import "swiper/scss/virtual";
 
-let tabs = ['overview'];
-if (iAmModerator) tabs.push('ip');
-tabs.push('raw');
+let tabs = ["overview"];
+if (iAmModerator) tabs.push("ip");
+tabs.push("raw");
 let tab = $ref(tabs[0]);
-watch($$(tab), () => (syncSlide(tabs.indexOf(tab))));
+watch($$(tab), () => syncSlide(tabs.indexOf(tab)));
 
 let file: any = $ref(null);
 let info: any = $ref(null);
 let isSensitive: boolean = $ref(false);
 
 const props = defineProps<{
-	fileId: string,
+	fileId: string;
 }>();
 
 async function fetch() {
-	file = await os.api('drive/files/show', { fileId: props.fileId });
-	info = await os.api('admin/drive/show-file', { fileId: props.fileId });
+	file = await os.api("drive/files/show", { fileId: props.fileId });
+	info = await os.api("admin/drive/show-file", { fileId: props.fileId });
 	isSensitive = file.isSensitive;
 }
 
@@ -123,47 +199,60 @@ fetch();
 
 async function del() {
 	const { canceled } = await os.confirm({
-		type: 'warning',
-		text: i18n.t('removeAreYouSure', { x: file.name }),
+		type: "warning",
+		text: i18n.t("removeAreYouSure", { x: file.name }),
 	});
 	if (canceled) return;
 
-	os.apiWithDialog('drive/files/delete', {
+	os.apiWithDialog("drive/files/delete", {
 		fileId: file.id,
 	});
 }
 
 async function toggleIsSensitive(v) {
-	await os.api('drive/files/update', { fileId: props.fileId, isSensitive: v });
+	await os.api("drive/files/update", {
+		fileId: props.fileId,
+		isSensitive: v,
+	});
 	isSensitive = v;
 }
 
-const headerActions = $computed(() => [{
-	text: i18n.ts.openInNewTab,
-	icon: 'ph-arrow-square-out ph-bold ph-lg',
-	handler: () => {
-		window.open(file.url, '_blank');
+const headerActions = $computed(() => [
+	{
+		text: i18n.ts.openInNewTab,
+		icon: "ph-arrow-square-out ph-bold ph-lg",
+		handler: () => {
+			window.open(file.url, "_blank");
+		},
 	},
-}]);
+]);
 
-const headerTabs = $computed(() => [{
-	key: 'overview',
-	title: i18n.ts.overview,
-	icon: 'ph-info ph-bold ph-lg',
-}, iAmModerator ? {
-	key: 'ip',
-	title: 'IP',
-	icon: 'ph-receipt ph-bold ph-lg',
-} : null, {
-	key: 'raw',
-	title: 'Raw data',
-	icon: 'ph-code ph-bold ph-lg',
-}]);
+const headerTabs = $computed(() => [
+	{
+		key: "overview",
+		title: i18n.ts.overview,
+		icon: "ph-info ph-bold ph-lg",
+	},
+	iAmModerator
+		? {
+				key: "ip",
+				title: "IP",
+				icon: "ph-receipt ph-bold ph-lg",
+		  }
+		: null,
+	{
+		key: "raw",
+		title: "Raw data",
+		icon: "ph-code ph-bold ph-lg",
+	},
+]);
 
-definePageMetadata(computed(() => ({
-	title: file ? i18n.ts.file + ': ' + file.name : i18n.ts.file,
-	icon: 'ph-file ph-bold ph-lg',
-})));
+definePageMetadata(
+	computed(() => ({
+		title: file ? i18n.ts.file + ": " + file.name : i18n.ts.file,
+		icon: "ph-file ph-bold ph-lg",
+	}))
+);
 
 let swiperRef = null;
 
diff --git a/packages/client/src/pages/admin/_header_.vue b/packages/client/src/pages/admin/_header_.vue
index bdb41b2d2c..69fd1bc588 100644
--- a/packages/client/src/pages/admin/_header_.vue
+++ b/packages/client/src/pages/admin/_header_.vue
@@ -1,42 +1,78 @@
 <template>
-<div ref="el" class="fdidabkc" :style="{ background: bg }" @click="onClick">
-	<template v-if="metadata">
-		<div class="titleContainer" @click="showTabsPopup">
-			<i v-if="metadata.icon" class="icon" :class="metadata.icon"></i>
+	<div ref="el" class="fdidabkc" :style="{ background: bg }" @click="onClick">
+		<template v-if="metadata">
+			<div class="titleContainer" @click="showTabsPopup">
+				<i v-if="metadata.icon" class="icon" :class="metadata.icon"></i>
 
-			<div class="title">
-				<div class="title">{{ metadata.title }}</div>
+				<div class="title">
+					<div class="title">{{ metadata.title }}</div>
+				</div>
+			</div>
+			<div class="tabs">
+				<button
+					v-for="tab in tabs"
+					:ref="(el) => (tabRefs[tab.key] = el)"
+					v-tooltip.noDelay="tab.title"
+					class="tab _button"
+					:class="{
+						active: tab.key != null && tab.key === props.tab,
+					}"
+					@mousedown="(ev) => onTabMousedown(tab, ev)"
+					@click="(ev) => onTabClick(tab, ev)"
+				>
+					<i v-if="tab.icon" class="icon" :class="tab.icon"></i>
+					<span v-if="!tab.iconOnly" class="title">{{
+						tab.title
+					}}</span>
+				</button>
+				<div ref="tabHighlightEl" class="highlight"></div>
 			</div>
-		</div>
-		<div class="tabs">
-			<button v-for="tab in tabs" :ref="(el) => tabRefs[tab.key] = el" v-tooltip.noDelay="tab.title" class="tab _button" :class="{ active: tab.key != null && tab.key === props.tab }" @mousedown="(ev) => onTabMousedown(tab, ev)" @click="(ev) => onTabClick(tab, ev)">
-				<i v-if="tab.icon" class="icon" :class="tab.icon"></i>
-				<span v-if="!tab.iconOnly" class="title">{{ tab.title }}</span>
-			</button>
-			<div ref="tabHighlightEl" class="highlight"></div>
-		</div>
-	</template>
-	<div class="buttons right">
-		<template v-if="actions">
-			<template v-for="action in actions">
-				<MkButton v-if="action.asFullButton" class="fullButton" primary @click.stop="action.handler"><i :class="action.icon" style="margin-right: 6px;"></i>{{ action.text }}</MkButton>
-				<button v-else v-tooltip.noDelay="action.text" class="_button button" :class="{ highlighted: action.highlighted }" @click.stop="action.handler" @touchstart="preventDrag"><i :class="action.icon"></i></button>
-			</template>
 		</template>
+		<div class="buttons right">
+			<template v-if="actions">
+				<template v-for="action in actions">
+					<MkButton
+						v-if="action.asFullButton"
+						class="fullButton"
+						primary
+						@click.stop="action.handler"
+						><i :class="action.icon" style="margin-right: 6px"></i
+						>{{ action.text }}</MkButton
+					>
+					<button
+						v-else
+						v-tooltip.noDelay="action.text"
+						class="_button button"
+						:class="{ highlighted: action.highlighted }"
+						@click.stop="action.handler"
+						@touchstart="preventDrag"
+					>
+						<i :class="action.icon"></i>
+					</button>
+				</template>
+			</template>
+		</div>
 	</div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted, onUnmounted, ref, inject, watch, nextTick } from 'vue';
-import tinycolor from 'tinycolor2';
-import { popupMenu } from '@/os';
-import { url } from '@/config';
-import { scrollToTop } from '@/scripts/scroll';
-import MkButton from '@/components/MkButton.vue';
-import { i18n } from '@/i18n';
-import { globalEvents } from '@/events';
-import { injectPageMetadata } from '@/scripts/page-metadata';
+import {
+	computed,
+	onMounted,
+	onUnmounted,
+	ref,
+	inject,
+	watch,
+	nextTick,
+} from "vue";
+import tinycolor from "tinycolor2";
+import { popupMenu } from "@/os";
+import { url } from "@/config";
+import { scrollToTop } from "@/scripts/scroll";
+import MkButton from "@/components/MkButton.vue";
+import { i18n } from "@/i18n";
+import { globalEvents } from "@/events";
+import { injectPageMetadata } from "@/scripts/page-metadata";
 
 type Tab = {
 	key?: string | null;
@@ -59,7 +95,7 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-	(ev: 'update:tab', key: string);
+	(ev: "update:tab", key: string);
 }>();
 
 const metadata = injectPageMetadata();
@@ -77,7 +113,7 @@ const showTabsPopup = (ev: MouseEvent) => {
 	if (!hasTabs.value) return;
 	ev.preventDefault();
 	ev.stopPropagation();
-	const menu = props.tabs.map(tab => ({
+	const menu = props.tabs.map((tab) => ({
 		text: tab.title,
 		icon: tab.icon,
 		active: tab.key != null && tab.key === props.tab,
@@ -93,13 +129,13 @@ const preventDrag = (ev: TouchEvent) => {
 };
 
 const onClick = () => {
-	scrollToTop(el.value, { behavior: 'smooth' });
+	scrollToTop(el.value, { behavior: "smooth" });
 };
 
 function onTabMousedown(tab: Tab, ev: MouseEvent): void {
 	// ユーザビリティの観点からmousedown時にはonClickは呼ばない
 	if (tab.key) {
-		emit('update:tab', tab.key);
+		emit("update:tab", tab.key);
 	}
 }
 
@@ -110,40 +146,52 @@ function onTabClick(tab: Tab, ev: MouseEvent): void {
 		tab.onClick(ev);
 	}
 	if (tab.key) {
-		emit('update:tab', tab.key);
+		emit("update:tab", tab.key);
 	}
 }
 
 const calcBg = () => {
-	const rawBg = metadata?.bg || 'var(--bg)';
-	const tinyBg = tinycolor(rawBg.startsWith('var(') ? getComputedStyle(document.documentElement).getPropertyValue(rawBg.slice(4, -1)) : rawBg);
+	const rawBg = metadata?.bg || "var(--bg)";
+	const tinyBg = tinycolor(
+		rawBg.startsWith("var(")
+			? getComputedStyle(document.documentElement).getPropertyValue(
+					rawBg.slice(4, -1)
+			  )
+			: rawBg
+	);
 	tinyBg.setAlpha(0.85);
 	bg.value = tinyBg.toRgbString();
 };
 
 onMounted(() => {
 	calcBg();
-	globalEvents.on('themeChanged', calcBg);
+	globalEvents.on("themeChanged", calcBg);
 
-	watch(() => [props.tab, props.tabs], () => {
-		nextTick(() => {
-			const tabEl = tabRefs[props.tab];
-			if (tabEl && tabHighlightEl) {
-				// offsetWidth や offsetLeft は少数を丸めてしまうため getBoundingClientRect を使う必要がある
-				// https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/offsetWidth#%E5%80%A4
-				const parentRect = tabEl.parentElement.getBoundingClientRect();
-				const rect = tabEl.getBoundingClientRect();
-				tabHighlightEl.style.width = rect.width + 'px';
-				tabHighlightEl.style.left = (rect.left - parentRect.left) + 'px';
-			}
-		});
-	}, {
-		immediate: true,
-	});
+	watch(
+		() => [props.tab, props.tabs],
+		() => {
+			nextTick(() => {
+				const tabEl = tabRefs[props.tab];
+				if (tabEl && tabHighlightEl) {
+					// offsetWidth や offsetLeft は少数を丸めてしまうため getBoundingClientRect を使う必要がある
+					// https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/offsetWidth#%E5%80%A4
+					const parentRect =
+						tabEl.parentElement.getBoundingClientRect();
+					const rect = tabEl.getBoundingClientRect();
+					tabHighlightEl.style.width = rect.width + "px";
+					tabHighlightEl.style.left =
+						rect.left - parentRect.left + "px";
+				}
+			});
+		},
+		{
+			immediate: true,
+		}
+	);
 });
 
 onUnmounted(() => {
-	globalEvents.off('themeChanged', calcBg);
+	globalEvents.off("themeChanged", calcBg);
 });
 </script>
 
@@ -158,7 +206,7 @@ onUnmounted(() => {
 	> .buttons {
 		--margin: 8px;
 		display: flex;
-    align-items: center;
+		align-items: center;
 		height: var(--height);
 		margin: 0 var(--margin);
 
diff --git a/packages/client/src/pages/admin/abuses.vue b/packages/client/src/pages/admin/abuses.vue
index 5d11120a12..27d8a700cb 100644
--- a/packages/client/src/pages/admin/abuses.vue
+++ b/packages/client/src/pages/admin/abuses.vue
@@ -1,31 +1,65 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs" :display-back-button="true"/></template>
-	<MkSpacer :content-max="900">
-		<div class="lcixvhis">
-			<div class="_section reports">
-				<div class="_content">
-					<div class="inputs" style="display: flex;">
-						<MkSelect v-model="state" style="margin: 0; flex: 1;">
-							<template #label>{{ i18n.ts.state }}</template>
-							<option value="all">{{ i18n.ts.all }}</option>
-							<option value="unresolved">{{ i18n.ts.unresolved }}</option>
-							<option value="resolved">{{ i18n.ts.resolved }}</option>
-						</MkSelect>
-						<MkSelect v-model="targetUserOrigin" style="margin: 0; flex: 1;">
-							<template #label>{{ i18n.ts.reporteeOrigin }}</template>
-							<option value="combined">{{ i18n.ts.all }}</option>
-							<option value="local">{{ i18n.ts.local }}</option>
-							<option value="remote">{{ i18n.ts.remote }}</option>
-						</MkSelect>
-						<MkSelect v-model="reporterOrigin" style="margin: 0; flex: 1;">
-							<template #label>{{ i18n.ts.reporterOrigin }}</template>
-							<option value="combined">{{ i18n.ts.all }}</option>
-							<option value="local">{{ i18n.ts.local }}</option>
-							<option value="remote">{{ i18n.ts.remote }}</option>
-						</MkSelect>
-					</div>
-					<!-- TODO
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader
+				:actions="headerActions"
+				:tabs="headerTabs"
+				:display-back-button="true"
+		/></template>
+		<MkSpacer :content-max="900">
+			<div class="lcixvhis">
+				<div class="_section reports">
+					<div class="_content">
+						<div class="inputs" style="display: flex">
+							<MkSelect
+								v-model="state"
+								style="margin: 0; flex: 1"
+							>
+								<template #label>{{ i18n.ts.state }}</template>
+								<option value="all">{{ i18n.ts.all }}</option>
+								<option value="unresolved">
+									{{ i18n.ts.unresolved }}
+								</option>
+								<option value="resolved">
+									{{ i18n.ts.resolved }}
+								</option>
+							</MkSelect>
+							<MkSelect
+								v-model="targetUserOrigin"
+								style="margin: 0; flex: 1"
+							>
+								<template #label>{{
+									i18n.ts.reporteeOrigin
+								}}</template>
+								<option value="combined">
+									{{ i18n.ts.all }}
+								</option>
+								<option value="local">
+									{{ i18n.ts.local }}
+								</option>
+								<option value="remote">
+									{{ i18n.ts.remote }}
+								</option>
+							</MkSelect>
+							<MkSelect
+								v-model="reporterOrigin"
+								style="margin: 0; flex: 1"
+							>
+								<template #label>{{
+									i18n.ts.reporterOrigin
+								}}</template>
+								<option value="combined">
+									{{ i18n.ts.all }}
+								</option>
+								<option value="local">
+									{{ i18n.ts.local }}
+								</option>
+								<option value="remote">
+									{{ i18n.ts.remote }}
+								</option>
+							</MkSelect>
+						</div>
+						<!-- TODO
 			<div class="inputs" style="display: flex; padding-top: 1.2em;">
 				<MkInput v-model="searchUsername" style="margin: 0; flex: 1;" type="text" :spellcheck="false">
 					<span>{{ i18n.ts.username }}</span>
@@ -36,37 +70,47 @@
 			</div>
 			-->
 
-					<MkPagination v-slot="{items}" ref="reports" :pagination="pagination" style="margin-top: var(--margin);">
-						<XAbuseReport v-for="report in items" :key="report.id" :report="report" @resolved="resolved"/>
-					</MkPagination>
+						<MkPagination
+							v-slot="{ items }"
+							ref="reports"
+							:pagination="pagination"
+							style="margin-top: var(--margin)"
+						>
+							<XAbuseReport
+								v-for="report in items"
+								:key="report.id"
+								:report="report"
+								@resolved="resolved"
+							/>
+						</MkPagination>
+					</div>
 				</div>
 			</div>
-		</div>
-	</MkSpacer>
-</MkStickyContainer>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
+import { computed } from "vue";
 
-import MkInput from '@/components/form/input.vue';
-import MkSelect from '@/components/form/select.vue';
-import MkPagination from '@/components/MkPagination.vue';
-import XAbuseReport from '@/components/MkAbuseReport.vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import MkInput from "@/components/form/input.vue";
+import MkSelect from "@/components/form/select.vue";
+import MkPagination from "@/components/MkPagination.vue";
+import XAbuseReport from "@/components/MkAbuseReport.vue";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
 let reports = $ref<InstanceType<typeof MkPagination>>();
 
-let state = $ref('unresolved');
-let reporterOrigin = $ref('combined');
-let targetUserOrigin = $ref('combined');
-let searchUsername = $ref('');
-let searchHost = $ref('');
+let state = $ref("unresolved");
+let reporterOrigin = $ref("combined");
+let targetUserOrigin = $ref("combined");
+let searchUsername = $ref("");
+let searchHost = $ref("");
 
 const pagination = {
-	endpoint: 'admin/abuse-user-reports' as const,
+	endpoint: "admin/abuse-user-reports" as const,
 	limit: 10,
 	params: computed(() => ({
 		state,
@@ -76,7 +120,7 @@ const pagination = {
 };
 
 function resolved(reportId) {
-	reports.removeItem(item => item.id === reportId);
+	reports.removeItem((item) => item.id === reportId);
 }
 
 const headerActions = $computed(() => []);
@@ -85,7 +129,7 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.abuseReports,
-	icon: 'ph-warning-circle ph-bold ph-lg',
+	icon: "ph-warning-circle ph-bold ph-lg",
 });
 </script>
 
diff --git a/packages/client/src/pages/admin/announcements.vue b/packages/client/src/pages/admin/announcements.vue
index 6bc0069fa5..9853158deb 100644
--- a/packages/client/src/pages/admin/announcements.vue
+++ b/packages/client/src/pages/admin/announcements.vue
@@ -1,106 +1,139 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs" :display-back-button="true"/></template>
-	<MkSpacer :content-max="900">
-		<div class="ztgjmzrw">
-			<section v-for="announcement in announcements" class="_card _gap announcements">
-				<div class="_content announcement">
-					<MkInput v-model="announcement.title">
-						<template #label>{{ i18n.ts.title }}</template>
-					</MkInput>
-					<MkTextarea v-model="announcement.text">
-						<template #label>{{ i18n.ts.text }}</template>
-					</MkTextarea>
-					<MkInput v-model="announcement.imageUrl">
-						<template #label>{{ i18n.ts.imageUrl }}</template>
-					</MkInput>
-					<p v-if="announcement.reads">{{ i18n.t('nUsersRead', { n: announcement.reads }) }}</p>
-					<div class="buttons">
-						<MkButton class="button" inline primary @click="save(announcement)"><i class="ph-floppy-disk-back ph-bold ph-lg"></i> {{ i18n.ts.save }}</MkButton>
-						<MkButton class="button" inline @click="remove(announcement)"><i class="ph-trash ph-bold ph-lg"></i> {{ i18n.ts.remove }}</MkButton>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader
+				:actions="headerActions"
+				:tabs="headerTabs"
+				:display-back-button="true"
+		/></template>
+		<MkSpacer :content-max="900">
+			<div class="ztgjmzrw">
+				<section
+					v-for="announcement in announcements"
+					class="_card _gap announcements"
+				>
+					<div class="_content announcement">
+						<MkInput v-model="announcement.title">
+							<template #label>{{ i18n.ts.title }}</template>
+						</MkInput>
+						<MkTextarea v-model="announcement.text">
+							<template #label>{{ i18n.ts.text }}</template>
+						</MkTextarea>
+						<MkInput v-model="announcement.imageUrl">
+							<template #label>{{ i18n.ts.imageUrl }}</template>
+						</MkInput>
+						<p v-if="announcement.reads">
+							{{
+								i18n.t("nUsersRead", { n: announcement.reads })
+							}}
+						</p>
+						<div class="buttons">
+							<MkButton
+								class="button"
+								inline
+								primary
+								@click="save(announcement)"
+								><i
+									class="ph-floppy-disk-back ph-bold ph-lg"
+								></i>
+								{{ i18n.ts.save }}</MkButton
+							>
+							<MkButton
+								class="button"
+								inline
+								@click="remove(announcement)"
+								><i class="ph-trash ph-bold ph-lg"></i>
+								{{ i18n.ts.remove }}</MkButton
+							>
+						</div>
 					</div>
-				</div>
-			</section>
-		</div>
-	</MkSpacer>
-</MkStickyContainer>
+				</section>
+			</div>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import MkButton from '@/components/MkButton.vue';
-import MkInput from '@/components/form/input.vue';
-import MkTextarea from '@/components/form/textarea.vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import {} from "vue";
+import MkButton from "@/components/MkButton.vue";
+import MkInput from "@/components/form/input.vue";
+import MkTextarea from "@/components/form/textarea.vue";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
 let announcements: any[] = $ref([]);
 
-os.api('admin/announcements/list').then(announcementResponse => {
+os.api("admin/announcements/list").then((announcementResponse) => {
 	announcements = announcementResponse;
 });
 
 function add() {
 	announcements.unshift({
 		id: null,
-		title: '',
-		text: '',
+		title: "",
+		text: "",
 		imageUrl: null,
 	});
 }
 
 function remove(announcement) {
 	os.confirm({
-		type: 'warning',
-		text: i18n.t('removeAreYouSure', { x: announcement.title }),
+		type: "warning",
+		text: i18n.t("removeAreYouSure", { x: announcement.title }),
 	}).then(({ canceled }) => {
 		if (canceled) return;
-		announcements = announcements.filter(x => x !== announcement);
-		os.api('admin/announcements/delete', announcement);
+		announcements = announcements.filter((x) => x !== announcement);
+		os.api("admin/announcements/delete", announcement);
 	});
 }
 
 function save(announcement) {
 	if (announcement.id == null) {
-		os.api('admin/announcements/create', announcement).then(() => {
-			os.alert({
-				type: 'success',
-				text: i18n.ts.saved,
+		os.api("admin/announcements/create", announcement)
+			.then(() => {
+				os.alert({
+					type: "success",
+					text: i18n.ts.saved,
+				});
+			})
+			.catch((err) => {
+				os.alert({
+					type: "error",
+					text: err,
+				});
 			});
-		}).catch(err => {
-			os.alert({
-				type: 'error',
-				text: err,
-			});
-		});
 	} else {
-		os.api('admin/announcements/update', announcement).then(() => {
-			os.alert({
-				type: 'success',
-				text: i18n.ts.saved,
+		os.api("admin/announcements/update", announcement)
+			.then(() => {
+				os.alert({
+					type: "success",
+					text: i18n.ts.saved,
+				});
+			})
+			.catch((err) => {
+				os.alert({
+					type: "error",
+					text: err,
+				});
 			});
-		}).catch(err => {
-			os.alert({
-				type: 'error',
-				text: err,
-			});
-		});
 	}
 }
 
-const headerActions = $computed(() => [{
-	asFullButton: true,
-	icon: 'ph-plus ph-bold ph-lg',
-	text: i18n.ts.add,
-	handler: add,
-}]);
+const headerActions = $computed(() => [
+	{
+		asFullButton: true,
+		icon: "ph-plus ph-bold ph-lg",
+		text: i18n.ts.add,
+		handler: add,
+	},
+]);
 
 const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.announcements,
-	icon: 'ph-megaphone-simple ph-bold ph-lg',
+	icon: "ph-megaphone-simple ph-bold ph-lg",
 });
 </script>
 
diff --git a/packages/client/src/pages/admin/bot-protection.vue b/packages/client/src/pages/admin/bot-protection.vue
index 910bd83349..f47300e05c 100644
--- a/packages/client/src/pages/admin/bot-protection.vue
+++ b/packages/client/src/pages/admin/bot-protection.vue
@@ -1,60 +1,92 @@
 <template>
-<div>
-	<FormSuspense :p="init">
-		<div class="_formRoot">
-			<FormRadios v-model="provider" class="_formBlock">
-				<option :value="null">{{ i18n.ts.none }} ({{ i18n.ts.notRecommended }})</option>
-				<option value="hcaptcha">hCaptcha</option>
-				<option value="recaptcha">reCAPTCHA</option>
-			</FormRadios>
+	<div>
+		<FormSuspense :p="init">
+			<div class="_formRoot">
+				<FormRadios v-model="provider" class="_formBlock">
+					<option :value="null">
+						{{ i18n.ts.none }} ({{ i18n.ts.notRecommended }})
+					</option>
+					<option value="hcaptcha">hCaptcha</option>
+					<option value="recaptcha">reCAPTCHA</option>
+				</FormRadios>
 
-			<template v-if="provider === 'hcaptcha'">
-				<FormInput v-model="hcaptchaSiteKey" class="_formBlock">
-					<template #prefix><i class="ph-key ph-bold ph-lg"></i></template>
-					<template #label>{{ i18n.ts.hcaptchaSiteKey }}</template>
-				</FormInput>
-				<FormInput v-model="hcaptchaSecretKey" class="_formBlock">
-					<template #prefix><i class="ph-key ph-bold ph-lg"></i></template>
-					<template #label>{{ i18n.ts.hcaptchaSecretKey }}</template>
-				</FormInput>
-				<FormSlot class="_formBlock">
-					<template #label>{{ i18n.ts.preview }}</template>
-					<MkCaptcha provider="hcaptcha" :sitekey="hcaptchaSiteKey || '10000000-ffff-ffff-ffff-000000000001'"/>
-				</FormSlot>
-			</template>
-			<template v-else-if="provider === 'recaptcha'">
-				<FormInput v-model="recaptchaSiteKey" class="_formBlock">
-					<template #prefix><i class="ph-key ph-bold ph-lg"></i></template>
-					<template #label>{{ i18n.ts.recaptchaSiteKey }}</template>
-				</FormInput>
-				<FormInput v-model="recaptchaSecretKey" class="_formBlock">
-					<template #prefix><i class="ph-key ph-bold ph-lg"></i></template>
-					<template #label>{{ i18n.ts.recaptchaSecretKey }}</template>
-				</FormInput>
-				<FormSlot v-if="recaptchaSiteKey" class="_formBlock">
-					<template #label>{{ i18n.ts.preview }}</template>
-					<MkCaptcha provider="recaptcha" :sitekey="recaptchaSiteKey"/>
-				</FormSlot>
-			</template>
+				<template v-if="provider === 'hcaptcha'">
+					<FormInput v-model="hcaptchaSiteKey" class="_formBlock">
+						<template #prefix
+							><i class="ph-key ph-bold ph-lg"></i
+						></template>
+						<template #label>{{
+							i18n.ts.hcaptchaSiteKey
+						}}</template>
+					</FormInput>
+					<FormInput v-model="hcaptchaSecretKey" class="_formBlock">
+						<template #prefix
+							><i class="ph-key ph-bold ph-lg"></i
+						></template>
+						<template #label>{{
+							i18n.ts.hcaptchaSecretKey
+						}}</template>
+					</FormInput>
+					<FormSlot class="_formBlock">
+						<template #label>{{ i18n.ts.preview }}</template>
+						<MkCaptcha
+							provider="hcaptcha"
+							:sitekey="
+								hcaptchaSiteKey ||
+								'10000000-ffff-ffff-ffff-000000000001'
+							"
+						/>
+					</FormSlot>
+				</template>
+				<template v-else-if="provider === 'recaptcha'">
+					<FormInput v-model="recaptchaSiteKey" class="_formBlock">
+						<template #prefix
+							><i class="ph-key ph-bold ph-lg"></i
+						></template>
+						<template #label>{{
+							i18n.ts.recaptchaSiteKey
+						}}</template>
+					</FormInput>
+					<FormInput v-model="recaptchaSecretKey" class="_formBlock">
+						<template #prefix
+							><i class="ph-key ph-bold ph-lg"></i
+						></template>
+						<template #label>{{
+							i18n.ts.recaptchaSecretKey
+						}}</template>
+					</FormInput>
+					<FormSlot v-if="recaptchaSiteKey" class="_formBlock">
+						<template #label>{{ i18n.ts.preview }}</template>
+						<MkCaptcha
+							provider="recaptcha"
+							:sitekey="recaptchaSiteKey"
+						/>
+					</FormSlot>
+				</template>
 
-			<FormButton primary @click="save"><i class="ph-floppy-disk-back ph-bold ph-lg"></i> {{ i18n.ts.save }}</FormButton>
-		</div>
-	</FormSuspense>
-</div>
+				<FormButton primary @click="save"
+					><i class="ph-floppy-disk-back ph-bold ph-lg"></i>
+					{{ i18n.ts.save }}</FormButton
+				>
+			</div>
+		</FormSuspense>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent } from 'vue';
-import FormRadios from '@/components/form/radios.vue';
-import FormInput from '@/components/form/input.vue';
-import FormButton from '@/components/MkButton.vue';
-import FormSuspense from '@/components/form/suspense.vue';
-import FormSlot from '@/components/form/slot.vue';
-import * as os from '@/os';
-import { fetchInstance } from '@/instance';
-import { i18n } from '@/i18n';
+import { defineAsyncComponent } from "vue";
+import FormRadios from "@/components/form/radios.vue";
+import FormInput from "@/components/form/input.vue";
+import FormButton from "@/components/MkButton.vue";
+import FormSuspense from "@/components/form/suspense.vue";
+import FormSlot from "@/components/form/slot.vue";
+import * as os from "@/os";
+import { fetchInstance } from "@/instance";
+import { i18n } from "@/i18n";
 
-const MkCaptcha = defineAsyncComponent(() => import('@/components/MkCaptcha.vue'));
+const MkCaptcha = defineAsyncComponent(
+	() => import("@/components/MkCaptcha.vue")
+);
 
 let provider = $ref(null);
 let hcaptchaSiteKey: string | null = $ref(null);
@@ -63,21 +95,25 @@ let recaptchaSiteKey: string | null = $ref(null);
 let recaptchaSecretKey: string | null = $ref(null);
 
 async function init() {
-	const meta = await os.api('admin/meta');
+	const meta = await os.api("admin/meta");
 	hcaptchaSiteKey = meta.hcaptchaSiteKey;
 	hcaptchaSecretKey = meta.hcaptchaSecretKey;
 	recaptchaSiteKey = meta.recaptchaSiteKey;
 	recaptchaSecretKey = meta.recaptchaSecretKey;
 
-	provider = meta.enableHcaptcha ? 'hcaptcha' : meta.enableRecaptcha ? 'recaptcha' : null;
+	provider = meta.enableHcaptcha
+		? "hcaptcha"
+		: meta.enableRecaptcha
+		? "recaptcha"
+		: null;
 }
 
 function save() {
-	os.apiWithDialog('admin/update-meta', {
-		enableHcaptcha: provider === 'hcaptcha',
+	os.apiWithDialog("admin/update-meta", {
+		enableHcaptcha: provider === "hcaptcha",
 		hcaptchaSiteKey,
 		hcaptchaSecretKey,
-		enableRecaptcha: provider === 'recaptcha',
+		enableRecaptcha: provider === "recaptcha",
 		recaptchaSiteKey,
 		recaptchaSecretKey,
 	}).then(() => {
diff --git a/packages/client/src/pages/admin/custom-css.vue b/packages/client/src/pages/admin/custom-css.vue
index 8c0e0459ea..2362c1f93a 100644
--- a/packages/client/src/pages/admin/custom-css.vue
+++ b/packages/client/src/pages/admin/custom-css.vue
@@ -1,23 +1,31 @@
 <template>
-<div class="_formRoot">
-	<FormInfo warn class="_formBlock">{{ i18n.ts.adminCustomCssWarn }}</FormInfo>
+	<div class="_formRoot">
+		<FormInfo warn class="_formBlock">{{
+			i18n.ts.adminCustomCssWarn
+		}}</FormInfo>
 
-	<FormTextarea v-model="globalCustomCss" manual-save tall class="_monospace _formBlock" style="tab-size: 2;">
-		<template #label>Instance CSS</template>
-	</FormTextarea>
-</div>
+		<FormTextarea
+			v-model="globalCustomCss"
+			manual-save
+			tall
+			class="_monospace _formBlock"
+			style="tab-size: 2"
+		>
+			<template #label>Instance CSS</template>
+		</FormTextarea>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { ref, watch } from 'vue';
-import FormTextarea from '@/components/form/textarea.vue';
-import FormInfo from '@/components/MkInfo.vue';
-import * as os from '@/os';
-import { unisonReload } from '@/scripts/unison-reload';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import { ref, watch } from "vue";
+import FormTextarea from "@/components/form/textarea.vue";
+import FormInfo from "@/components/MkInfo.vue";
+import * as os from "@/os";
+import { unisonReload } from "@/scripts/unison-reload";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
-const localCustomCss = ref(localStorage.getItem('customCss') ?? '');
+const localCustomCss = ref(localStorage.getItem("customCss") ?? "");
 
 /*
 async function apply() {
@@ -43,6 +51,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.customCss,
-	icon: 'ph-code ph-bold ph-lg',
+	icon: "ph-code ph-bold ph-lg",
 });
 </script>
diff --git a/packages/client/src/pages/admin/database.vue b/packages/client/src/pages/admin/database.vue
index f8d49d8298..f665d38138 100644
--- a/packages/client/src/pages/admin/database.vue
+++ b/packages/client/src/pages/admin/database.vue
@@ -1,26 +1,48 @@
-<template><MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs" :display-back-button="true"/></template>
+<template>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader
+				:actions="headerActions"
+				:tabs="headerTabs"
+				:display-back-button="true"
+		/></template>
 		<MkSpacer :content-max="800" :margin-min="16" :margin-max="32">
-	<FormButton primary @click="indexPosts">{{ i18n.ts.indexPosts }}</FormButton>
-	<FormSuspense v-slot="{ result: database }" :p="databasePromiseFactory">
-		<MkKeyValue v-for="table in database" :key="table[0]" oneline style="margin: 1em 0;">
-			<template #key>{{ table[0] }}</template>
-			<template #value>{{ bytes(table[1].size) }} ({{ number(table[1].count) }} recs)</template>
-		</MkKeyValue>
-	</FormSuspense>
-</MkSpacer></MkStickyContainer>
+			<FormButton primary @click="indexPosts">{{
+				i18n.ts.indexPosts
+			}}</FormButton>
+			<FormSuspense
+				v-slot="{ result: database }"
+				:p="databasePromiseFactory"
+			>
+				<MkKeyValue
+					v-for="table in database"
+					:key="table[0]"
+					oneline
+					style="margin: 1em 0"
+				>
+					<template #key>{{ table[0] }}</template>
+					<template #value
+						>{{ bytes(table[1].size) }} ({{
+							number(table[1].count)
+						}}
+						recs)</template
+					>
+				</MkKeyValue>
+			</FormSuspense>
+		</MkSpacer></MkStickyContainer
+	>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import FormSuspense from '@/components/form/suspense.vue';
-import FormButton from '@/components/MkButton.vue';
-import MkKeyValue from '@/components/MkKeyValue.vue';
-import * as os from '@/os';
-import bytes from '@/filters/bytes';
-import number from '@/filters/number';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import {} from "vue";
+import FormSuspense from "@/components/form/suspense.vue";
+import FormButton from "@/components/MkButton.vue";
+import MkKeyValue from "@/components/MkKeyValue.vue";
+import * as os from "@/os";
+import bytes from "@/filters/bytes";
+import number from "@/filters/number";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
 async function indexPosts() {
 	const { canceled, result: index } = await os.inputText({
@@ -29,24 +51,28 @@ async function indexPosts() {
 	if (canceled) return;
 
 	if (index == null || index === "") {
-		await os.api('admin/search/index-all');
+		await os.api("admin/search/index-all");
 		await os.alert({
-			type: 'info',
-			text: i18n.ts.indexNotice
+			type: "info",
+			text: i18n.ts.indexNotice,
 		});
-	}
-	else {
-		await os.api('admin/search/index-all', {
-			cursor: index
+	} else {
+		await os.api("admin/search/index-all", {
+			cursor: index,
 		});
 		await os.alert({
-			type: 'info',
-			text: i18n.ts.indexNotice
+			type: "info",
+			text: i18n.ts.indexNotice,
 		});
 	}
 }
 
-const databasePromiseFactory = () => os.api('admin/get-table-stats').then(res => Object.entries(res).sort((a, b) => b[1].size - a[1].size));
+const databasePromiseFactory = () =>
+	os
+		.api("admin/get-table-stats")
+		.then((res) =>
+			Object.entries(res).sort((a, b) => b[1].size - a[1].size)
+		);
 
 const headerActions = $computed(() => []);
 
@@ -54,6 +80,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.database,
-	icon: 'ph-database ph-bold ph-lg',
+	icon: "ph-database ph-bold ph-lg",
 });
 </script>
diff --git a/packages/client/src/pages/admin/email-settings.vue b/packages/client/src/pages/admin/email-settings.vue
index 00116238b9..3eaee5566e 100644
--- a/packages/client/src/pages/admin/email-settings.vue
+++ b/packages/client/src/pages/admin/email-settings.vue
@@ -1,73 +1,118 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs" :display-back-button="true"/></template>
-	<MkSpacer :content-max="700" :margin-min="16" :margin-max="32">
-		<FormSuspense :p="init">
-			<div class="_formRoot">
-				<FormSwitch v-model="enableEmail" class="_formBlock">
-					<template #label>{{ i18n.ts.enableEmail }} ({{ i18n.ts.recommended }})</template>
-					<template #caption>{{ i18n.ts.emailConfigInfo }}</template>
-				</FormSwitch>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader
+				:actions="headerActions"
+				:tabs="headerTabs"
+				:display-back-button="true"
+		/></template>
+		<MkSpacer :content-max="700" :margin-min="16" :margin-max="32">
+			<FormSuspense :p="init">
+				<div class="_formRoot">
+					<FormSwitch v-model="enableEmail" class="_formBlock">
+						<template #label
+							>{{ i18n.ts.enableEmail }} ({{
+								i18n.ts.recommended
+							}})</template
+						>
+						<template #caption>{{
+							i18n.ts.emailConfigInfo
+						}}</template>
+					</FormSwitch>
 
-				<template v-if="enableEmail">
-					<FormInput v-model="email" type="email" class="_formBlock">
-						<template #label>{{ i18n.ts.emailAddress }}</template>
-					</FormInput>
+					<template v-if="enableEmail">
+						<FormInput
+							v-model="email"
+							type="email"
+							class="_formBlock"
+						>
+							<template #label>{{
+								i18n.ts.emailAddress
+							}}</template>
+						</FormInput>
 
-					<FormSection>
-						<template #label>{{ i18n.ts.smtpConfig }}</template>
-						<FormSplit :min-width="280">
-							<FormInput v-model="smtpHost" class="_formBlock">
-								<template #label>{{ i18n.ts.smtpHost }}</template>
-							</FormInput>
-							<FormInput v-model="smtpPort" type="number" class="_formBlock">
-								<template #label>{{ i18n.ts.smtpPort }}</template>
-							</FormInput>
-						</FormSplit>
-						<FormSplit :min-width="280">
-							<FormInput v-model="smtpUser" class="_formBlock">
-								<template #label>{{ i18n.ts.smtpUser }}</template>
-							</FormInput>
-							<FormInput v-model="smtpPass" type="password" class="_formBlock">
-								<template #label>{{ i18n.ts.smtpPass }}</template>
-							</FormInput>
-						</FormSplit>
-						<FormInfo class="_formBlock">{{ i18n.ts.emptyToDisableSmtpAuth }}</FormInfo>
-						<FormSwitch v-model="smtpSecure" class="_formBlock">
-							<template #label>{{ i18n.ts.smtpSecure }}</template>
-							<template #caption>{{ i18n.ts.smtpSecureInfo }}</template>
-						</FormSwitch>
-					</FormSection>
-				</template>
-			</div>
-		</FormSuspense>
-	</MkSpacer>
-</MkStickyContainer>
+						<FormSection>
+							<template #label>{{ i18n.ts.smtpConfig }}</template>
+							<FormSplit :min-width="280">
+								<FormInput
+									v-model="smtpHost"
+									class="_formBlock"
+								>
+									<template #label>{{
+										i18n.ts.smtpHost
+									}}</template>
+								</FormInput>
+								<FormInput
+									v-model="smtpPort"
+									type="number"
+									class="_formBlock"
+								>
+									<template #label>{{
+										i18n.ts.smtpPort
+									}}</template>
+								</FormInput>
+							</FormSplit>
+							<FormSplit :min-width="280">
+								<FormInput
+									v-model="smtpUser"
+									class="_formBlock"
+								>
+									<template #label>{{
+										i18n.ts.smtpUser
+									}}</template>
+								</FormInput>
+								<FormInput
+									v-model="smtpPass"
+									type="password"
+									class="_formBlock"
+								>
+									<template #label>{{
+										i18n.ts.smtpPass
+									}}</template>
+								</FormInput>
+							</FormSplit>
+							<FormInfo class="_formBlock">{{
+								i18n.ts.emptyToDisableSmtpAuth
+							}}</FormInfo>
+							<FormSwitch v-model="smtpSecure" class="_formBlock">
+								<template #label>{{
+									i18n.ts.smtpSecure
+								}}</template>
+								<template #caption>{{
+									i18n.ts.smtpSecureInfo
+								}}</template>
+							</FormSwitch>
+						</FormSection>
+					</template>
+				</div>
+			</FormSuspense>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import FormSwitch from '@/components/form/switch.vue';
-import FormInput from '@/components/form/input.vue';
-import FormInfo from '@/components/MkInfo.vue';
-import FormSuspense from '@/components/form/suspense.vue';
-import FormSplit from '@/components/form/split.vue';
-import FormSection from '@/components/form/section.vue';
-import * as os from '@/os';
-import { fetchInstance, instance } from '@/instance';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import {} from "vue";
+import FormSwitch from "@/components/form/switch.vue";
+import FormInput from "@/components/form/input.vue";
+import FormInfo from "@/components/MkInfo.vue";
+import FormSuspense from "@/components/form/suspense.vue";
+import FormSplit from "@/components/form/split.vue";
+import FormSection from "@/components/form/section.vue";
+import * as os from "@/os";
+import { fetchInstance, instance } from "@/instance";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
 let enableEmail: boolean = $ref(false);
 let email: any = $ref(null);
 let smtpSecure: boolean = $ref(false);
-let smtpHost: string = $ref('');
+let smtpHost: string = $ref("");
 let smtpPort: number = $ref(0);
-let smtpUser: string = $ref('');
-let smtpPass: string = $ref('');
+let smtpUser: string = $ref("");
+let smtpPass: string = $ref("");
 
 async function init() {
-	const meta = await os.api('admin/meta');
+	const meta = await os.api("admin/meta");
 	enableEmail = meta.enableEmail;
 	email = meta.email;
 	smtpSecure = meta.smtpSecure;
@@ -80,19 +125,19 @@ async function init() {
 async function testEmail() {
 	const { canceled, result: destination } = await os.inputText({
 		title: i18n.ts.destination,
-		type: 'email',
+		type: "email",
 		placeholder: instance.maintainerEmail,
 	});
 	if (canceled) return;
-	os.apiWithDialog('admin/send-email', {
+	os.apiWithDialog("admin/send-email", {
 		to: destination,
-		subject: 'Test email',
-		text: 'Yo',
+		subject: "Test email",
+		text: "Yo",
 	});
 }
 
 function save() {
-	os.apiWithDialog('admin/update-meta', {
+	os.apiWithDialog("admin/update-meta", {
 		enableEmail,
 		email,
 		smtpSecure,
@@ -105,22 +150,25 @@ function save() {
 	});
 }
 
-const headerActions = $computed(() => [{
-	asFullButton: true,
-	icon: 'ph-test-tube ph-bold ph-lg',
-	text: i18n.ts.testEmail,
-	handler: testEmail,
-}, {
-	asFullButton: true,
-	icon: 'ph-check ph-bold ph-lg',
-	text: i18n.ts.save,
-	handler: save,
-}]);
+const headerActions = $computed(() => [
+	{
+		asFullButton: true,
+		icon: "ph-test-tube ph-bold ph-lg",
+		text: i18n.ts.testEmail,
+		handler: testEmail,
+	},
+	{
+		asFullButton: true,
+		icon: "ph-check ph-bold ph-lg",
+		text: i18n.ts.save,
+		handler: save,
+	},
+]);
 
 const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.emailServer,
-	icon: 'ph-envelope-simple-open ph-bold ph-lg',
+	icon: "ph-envelope-simple-open ph-bold ph-lg",
 });
 </script>
diff --git a/packages/client/src/pages/admin/emoji-edit-dialog.vue b/packages/client/src/pages/admin/emoji-edit-dialog.vue
index 6a969b6177..73c3bab340 100644
--- a/packages/client/src/pages/admin/emoji-edit-dialog.vue
+++ b/packages/client/src/pages/admin/emoji-edit-dialog.vue
@@ -1,61 +1,70 @@
 <template>
-<XModalWindow
-	ref="dialog"
-	:width="370"
-	:with-ok-button="true"
-	@close="$refs.dialog.close()"
-	@closed="$emit('closed')"
-	@ok="ok()"
->
-	<template #header>:{{ emoji.name }}:</template>
+	<XModalWindow
+		ref="dialog"
+		:width="370"
+		:with-ok-button="true"
+		@close="$refs.dialog.close()"
+		@closed="$emit('closed')"
+		@ok="ok()"
+	>
+		<template #header>:{{ emoji.name }}:</template>
 
-	<div class="_monolithic_">
-		<div class="yigymqpb _section">
-			<img :src="emoji.url" class="img"/>
-			<MkInput v-model="name" class="_formBlock">
-				<template #label>{{ i18n.ts.name }}</template>
-			</MkInput>
-			<MkInput v-model="category" class="_formBlock" :datalist="categories">
-				<template #label>{{ i18n.ts.category }}</template>
-			</MkInput>
-			<MkInput v-model="aliases" class="_formBlock">
-				<template #label>{{ i18n.ts.tags }}</template>
-				<template #caption>{{ i18n.ts.setMultipleBySeparatingWithSpace }}</template>
-			</MkInput>
-			<MkTextarea v-model="license" class="_formBlock">
-				<template #label>{{ i18n.ts.license }}</template>
-			</MkTextarea>
-			<MkButton danger @click="del()"><i class="ph-trash ph-bold ph-lg"></i> {{ i18n.ts.delete }}</MkButton>
+		<div class="_monolithic_">
+			<div class="yigymqpb _section">
+				<img :src="emoji.url" class="img" />
+				<MkInput v-model="name" class="_formBlock">
+					<template #label>{{ i18n.ts.name }}</template>
+				</MkInput>
+				<MkInput
+					v-model="category"
+					class="_formBlock"
+					:datalist="categories"
+				>
+					<template #label>{{ i18n.ts.category }}</template>
+				</MkInput>
+				<MkInput v-model="aliases" class="_formBlock">
+					<template #label>{{ i18n.ts.tags }}</template>
+					<template #caption>{{
+						i18n.ts.setMultipleBySeparatingWithSpace
+					}}</template>
+				</MkInput>
+				<MkTextarea v-model="license" class="_formBlock">
+					<template #label>{{ i18n.ts.license }}</template>
+				</MkTextarea>
+				<MkButton danger @click="del()"
+					><i class="ph-trash ph-bold ph-lg"></i>
+					{{ i18n.ts.delete }}</MkButton
+				>
+			</div>
 		</div>
-	</div>
-</XModalWindow>
+	</XModalWindow>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import XModalWindow from '@/components/MkModalWindow.vue';
-import MkButton from '@/components/MkButton.vue';
-import MkInput from '@/components/form/input.vue';
-import MkTextarea from '@/components/form/textarea.vue';
-import * as os from '@/os';
-import { unique } from '@/scripts/array';
-import { i18n } from '@/i18n';
-import { emojiCategories } from '@/instance';
+import {} from "vue";
+import XModalWindow from "@/components/MkModalWindow.vue";
+import MkButton from "@/components/MkButton.vue";
+import MkInput from "@/components/form/input.vue";
+import MkTextarea from "@/components/form/textarea.vue";
+import * as os from "@/os";
+import { unique } from "@/scripts/array";
+import { i18n } from "@/i18n";
+import { emojiCategories } from "@/instance";
 
 const props = defineProps<{
-	emoji: any,
+	emoji: any;
 }>();
 
 let dialog = $ref(null);
 let name: string = $ref(props.emoji.name);
 let category: string = $ref(props.emoji.category);
-let aliases: string = $ref(props.emoji.aliases.join(' '));
+let aliases: string = $ref(props.emoji.aliases.join(" "));
 let categories: string[] = $ref(emojiCategories);
-let license: string = $ref(props.emoji.license ?? '');
+let license: string = $ref(props.emoji.license ?? "");
 
 const emit = defineEmits<{
-	(ev: 'done', v: { deleted?: boolean, updated?: any }): void,
-	(ev: 'closed'): void
+	(ev: "done", v: { deleted?: boolean; updated?: any }): void;
+	(ev: "closed"): void;
 }>();
 
 function ok() {
@@ -63,21 +72,21 @@ function ok() {
 }
 
 async function update() {
-	await os.apiWithDialog('admin/emoji/update', {
+	await os.apiWithDialog("admin/emoji/update", {
 		id: props.emoji.id,
 		name,
 		category,
-		aliases: aliases.split(' '),
-		license: license === '' ? null : license,
+		aliases: aliases.split(" "),
+		license: license === "" ? null : license,
 	});
 
-	emit('done', {
+	emit("done", {
 		updated: {
 			id: props.emoji.id,
 			name,
 			category,
-			aliases: aliases.split(' '),
-			license: license === '' ? null : license,
+			aliases: aliases.split(" "),
+			license: license === "" ? null : license,
 		},
 	});
 
@@ -86,15 +95,15 @@ async function update() {
 
 async function del() {
 	const { canceled } = await os.confirm({
-		type: 'warning',
-		text: i18n.t('removeAreYouSure', { x: name }),
+		type: "warning",
+		text: i18n.t("removeAreYouSure", { x: name }),
 	});
 	if (canceled) return;
 
-	os.api('admin/emoji/delete', {
+	os.api("admin/emoji/delete", {
 		id: props.emoji.id,
 	}).then(() => {
-		emit('done', {
+		emit("done", {
 			deleted: true,
 		});
 		dialog.close();
diff --git a/packages/client/src/pages/admin/emojis.vue b/packages/client/src/pages/admin/emojis.vue
index 766fc8b491..2db08cfddd 100644
--- a/packages/client/src/pages/admin/emojis.vue
+++ b/packages/client/src/pages/admin/emojis.vue
@@ -1,89 +1,180 @@
 <template>
-<div>
-	<MkStickyContainer>
-		<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs" :display-back-button="true"/></template>
-		<MkSpacer :content-max="900">
-			<div class="ogwlenmc">
-				<div v-if="tab === 'local'" class="local">
-					<MkInput v-model="query" :debounce="true" type="search">
-						<template #prefix><i class="ph-magnifying-glass ph-bold ph-lg"></i></template>
-						<template #label>{{ i18n.ts.search }}</template>
-					</MkInput>
-					<MkSwitch v-model="selectMode" style="margin: 8px 0;">
-						<template #label>Select mode</template>
-					</MkSwitch>
-					<div v-if="selectMode" style="display: flex; gap: var(--margin); flex-wrap: wrap;">
-						<MkButton inline @click="selectAll">Select all</MkButton>
-						<MkButton inline @click="setCategoryBulk">Set category</MkButton>
-						<MkButton inline @click="addTagBulk">Add tag</MkButton>
-						<MkButton inline @click="removeTagBulk">Remove tag</MkButton>
-						<MkButton inline @click="setTagBulk">Set tag</MkButton>
-						<MkButton inline @click="setLicenseBulk">Set license</MkButton>
-						<MkButton inline danger @click="delBulk">Delete</MkButton>
-					</div>
-					<MkPagination ref="emojisPaginationComponent" :pagination="pagination">
-						<template #empty><span>{{ i18n.ts.noCustomEmojis }}</span></template>
-						<template #default="{items}">
-							<div class="ldhfsamy">
-								<button v-for="emoji in items" :key="emoji.id" class="emoji _panel _button" :class="{ selected: selectedEmojis.includes(emoji.id) }" @click="selectMode ? toggleSelect(emoji) : edit(emoji)">
-									<img :src="emoji.url" class="img" :alt="emoji.name"/>
-									<div class="body">
-										<div class="name _monospace">{{ emoji.name }}</div>
-										<div class="info">{{ emoji.category }}</div>
-									</div>
-								</button>
-							</div>
-						</template>
-					</MkPagination>
-				</div>
-
-				<div v-else-if="tab === 'remote'" class="remote">
-					<FormSplit>
-						<MkInput v-model="queryRemote" :debounce="true" type="search">
-							<template #prefix><i class="ph-magnifying-glass ph-bold ph-lg"></i></template>
+	<div>
+		<MkStickyContainer>
+			<template #header
+				><MkPageHeader
+					v-model:tab="tab"
+					:actions="headerActions"
+					:tabs="headerTabs"
+					:display-back-button="true"
+			/></template>
+			<MkSpacer :content-max="900">
+				<div class="ogwlenmc">
+					<div v-if="tab === 'local'" class="local">
+						<MkInput v-model="query" :debounce="true" type="search">
+							<template #prefix
+								><i
+									class="ph-magnifying-glass ph-bold ph-lg"
+								></i
+							></template>
 							<template #label>{{ i18n.ts.search }}</template>
 						</MkInput>
-						<MkInput v-model="host" :debounce="true">
-							<template #label>{{ i18n.ts.host }}</template>
-						</MkInput>
-					</FormSplit>
-					<MkPagination :pagination="remotePagination">
-						<template #empty><span>{{ i18n.ts.noCustomEmojis }}</span></template>
-						<template #default="{items}">
-							<div class="ldhfsamy">
-								<div v-for="emoji in items" :key="emoji.id" class="emoji _panel _button" @click="remoteMenu(emoji, $event)">
-									<img :src="emoji.url" class="img" :alt="emoji.name"/>
-									<div class="body">
-										<div class="name _monospace">{{ emoji.name }}</div>
-										<div class="info">{{ emoji.host }}</div>
+						<MkSwitch v-model="selectMode" style="margin: 8px 0">
+							<template #label>Select mode</template>
+						</MkSwitch>
+						<div
+							v-if="selectMode"
+							style="
+								display: flex;
+								gap: var(--margin);
+								flex-wrap: wrap;
+							"
+						>
+							<MkButton inline @click="selectAll"
+								>Select all</MkButton
+							>
+							<MkButton inline @click="setCategoryBulk"
+								>Set category</MkButton
+							>
+							<MkButton inline @click="addTagBulk"
+								>Add tag</MkButton
+							>
+							<MkButton inline @click="removeTagBulk"
+								>Remove tag</MkButton
+							>
+							<MkButton inline @click="setTagBulk"
+								>Set tag</MkButton
+							>
+							<MkButton inline @click="setLicenseBulk"
+								>Set license</MkButton
+							>
+							<MkButton inline danger @click="delBulk"
+								>Delete</MkButton
+							>
+						</div>
+						<MkPagination
+							ref="emojisPaginationComponent"
+							:pagination="pagination"
+						>
+							<template #empty
+								><span>{{
+									i18n.ts.noCustomEmojis
+								}}</span></template
+							>
+							<template #default="{ items }">
+								<div class="ldhfsamy">
+									<button
+										v-for="emoji in items"
+										:key="emoji.id"
+										class="emoji _panel _button"
+										:class="{
+											selected: selectedEmojis.includes(
+												emoji.id
+											),
+										}"
+										@click="
+											selectMode
+												? toggleSelect(emoji)
+												: edit(emoji)
+										"
+									>
+										<img
+											:src="emoji.url"
+											class="img"
+											:alt="emoji.name"
+										/>
+										<div class="body">
+											<div class="name _monospace">
+												{{ emoji.name }}
+											</div>
+											<div class="info">
+												{{ emoji.category }}
+											</div>
+										</div>
+									</button>
+								</div>
+							</template>
+						</MkPagination>
+					</div>
+
+					<div v-else-if="tab === 'remote'" class="remote">
+						<FormSplit>
+							<MkInput
+								v-model="queryRemote"
+								:debounce="true"
+								type="search"
+							>
+								<template #prefix
+									><i
+										class="ph-magnifying-glass ph-bold ph-lg"
+									></i
+								></template>
+								<template #label>{{ i18n.ts.search }}</template>
+							</MkInput>
+							<MkInput v-model="host" :debounce="true">
+								<template #label>{{ i18n.ts.host }}</template>
+							</MkInput>
+						</FormSplit>
+						<MkPagination :pagination="remotePagination">
+							<template #empty
+								><span>{{
+									i18n.ts.noCustomEmojis
+								}}</span></template
+							>
+							<template #default="{ items }">
+								<div class="ldhfsamy">
+									<div
+										v-for="emoji in items"
+										:key="emoji.id"
+										class="emoji _panel _button"
+										@click="remoteMenu(emoji, $event)"
+									>
+										<img
+											:src="emoji.url"
+											class="img"
+											:alt="emoji.name"
+										/>
+										<div class="body">
+											<div class="name _monospace">
+												{{ emoji.name }}
+											</div>
+											<div class="info">
+												{{ emoji.host }}
+											</div>
+										</div>
 									</div>
 								</div>
-							</div>
-						</template>
-					</MkPagination>
+							</template>
+						</MkPagination>
+					</div>
 				</div>
-			</div>
-		</MkSpacer>
-	</MkStickyContainer>
-</div>
+			</MkSpacer>
+		</MkStickyContainer>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { computed, defineAsyncComponent, defineComponent, ref, toRef } from 'vue';
-import MkButton from '@/components/MkButton.vue';
-import MkInput from '@/components/form/input.vue';
-import MkPagination from '@/components/MkPagination.vue';
-import MkTab from '@/components/MkTab.vue';
-import MkSwitch from '@/components/form/switch.vue';
-import FormSplit from '@/components/form/split.vue';
-import { selectFile, selectFiles } from '@/scripts/select-file';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import {
+	computed,
+	defineAsyncComponent,
+	defineComponent,
+	ref,
+	toRef,
+} from "vue";
+import MkButton from "@/components/MkButton.vue";
+import MkInput from "@/components/form/input.vue";
+import MkPagination from "@/components/MkPagination.vue";
+import MkTab from "@/components/MkTab.vue";
+import MkSwitch from "@/components/form/switch.vue";
+import FormSplit from "@/components/form/split.vue";
+import { selectFile, selectFiles } from "@/scripts/select-file";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
 const emojisPaginationComponent = ref<InstanceType<typeof MkPagination>>();
 
-const tab = ref('local');
+const tab = ref("local");
 const query = ref(null);
 const queryRemote = ref(null);
 const host = ref(null);
@@ -91,19 +182,22 @@ const selectMode = ref(false);
 const selectedEmojis = ref<string[]>([]);
 
 const pagination = {
-	endpoint: 'admin/emoji/list' as const,
+	endpoint: "admin/emoji/list" as const,
 	limit: 30,
 	params: computed(() => ({
-		query: (query.value && query.value !== '') ? query.value : null,
+		query: query.value && query.value !== "" ? query.value : null,
 	})),
 };
 
 const remotePagination = {
-	endpoint: 'admin/emoji/list-remote' as const,
+	endpoint: "admin/emoji/list-remote" as const,
 	limit: 30,
 	params: computed(() => ({
-		query: (queryRemote.value && queryRemote.value !== '') ? queryRemote.value : null,
-		host: (host.value && host.value !== '') ? host.value : null,
+		query:
+			queryRemote.value && queryRemote.value !== ""
+				? queryRemote.value
+				: null,
+		host: host.value && host.value !== "" ? host.value : null,
 	})),
 };
 
@@ -111,13 +205,17 @@ const selectAll = () => {
 	if (selectedEmojis.value.length > 0) {
 		selectedEmojis.value = [];
 	} else {
-		selectedEmojis.value = emojisPaginationComponent.value.items.map(item => item.id);
+		selectedEmojis.value = emojisPaginationComponent.value.items.map(
+			(item) => item.id
+		);
 	}
 };
 
 const toggleSelect = (emoji) => {
 	if (selectedEmojis.value.includes(emoji.id)) {
-		selectedEmojis.value = selectedEmojis.value.filter(x => x !== emoji.id);
+		selectedEmojis.value = selectedEmojis.value.filter(
+			(x) => x !== emoji.id
+		);
 	} else {
 		selectedEmojis.value.push(emoji.id);
 	}
@@ -126,9 +224,13 @@ const toggleSelect = (emoji) => {
 const add = async (ev: MouseEvent) => {
 	const files = await selectFiles(ev.currentTarget ?? ev.target, null);
 
-	const promise = Promise.all(files.map(file => os.api('admin/emoji/add', {
-		fileId: file.id,
-	})));
+	const promise = Promise.all(
+		files.map((file) =>
+			os.api("admin/emoji/add", {
+				fileId: file.id,
+			})
+		)
+	);
 	promise.then(() => {
 		emojisPaginationComponent.value.reload();
 	});
@@ -136,87 +238,114 @@ const add = async (ev: MouseEvent) => {
 };
 
 const edit = (emoji) => {
-	os.popup(defineAsyncComponent(() => import('./emoji-edit-dialog.vue')), {
-		emoji: emoji,
-	}, {
-		done: result => {
-			if (result.updated) {
-				emojisPaginationComponent.value.updateItem(result.updated.id, (oldEmoji: any) => ({
-					...oldEmoji,
-					...result.updated,
-				}));
-			} else if (result.deleted) {
-				emojisPaginationComponent.value.removeItem((item) => item.id === emoji.id);
-			}
+	os.popup(
+		defineAsyncComponent(() => import("./emoji-edit-dialog.vue")),
+		{
+			emoji: emoji,
 		},
-	}, 'closed');
+		{
+			done: (result) => {
+				if (result.updated) {
+					emojisPaginationComponent.value.updateItem(
+						result.updated.id,
+						(oldEmoji: any) => ({
+							...oldEmoji,
+							...result.updated,
+						})
+					);
+				} else if (result.deleted) {
+					emojisPaginationComponent.value.removeItem(
+						(item) => item.id === emoji.id
+					);
+				}
+			},
+		},
+		"closed"
+	);
 };
 
 const im = (emoji) => {
-	os.apiWithDialog('admin/emoji/copy', {
+	os.apiWithDialog("admin/emoji/copy", {
 		emojiId: emoji.id,
 	});
 };
 
 const remoteMenu = (emoji, ev: MouseEvent) => {
-	os.popupMenu([{
-		type: 'label',
-		text: ':' + emoji.name + ':',
-	}, {
-		text: i18n.ts.import,
-		icon: 'ph-plus ph-bold ph-lg',
-		action: () => { im(emoji); },
-	}], ev.currentTarget ?? ev.target);
+	os.popupMenu(
+		[
+			{
+				type: "label",
+				text: ":" + emoji.name + ":",
+			},
+			{
+				text: i18n.ts.import,
+				icon: "ph-plus ph-bold ph-lg",
+				action: () => {
+					im(emoji);
+				},
+			},
+		],
+		ev.currentTarget ?? ev.target
+	);
 };
 
 const menu = (ev: MouseEvent) => {
-	os.popupMenu([{
-		icon: 'ph-download-simple ph-bold ph-lg',
-		text: i18n.ts.export,
-		action: async () => {
-			os.api('export-custom-emojis', {
-			})
-				.then(() => {
-					os.alert({
-						type: 'info',
-						text: i18n.ts.exportRequested,
-					});
-				}).catch((err) => {
-					os.alert({
-						type: 'error',
-						text: err.message,
-					});
-				});
-		},
-	}, {
-		icon: 'ph-upload-simple ph-bold ph-lg',
-		text: i18n.ts.import,
-		action: async () => {
-			const file = await selectFile(ev.currentTarget ?? ev.target);
-			os.api('admin/emoji/import-zip', {
-				fileId: file.id,
-			})
-				.then(() => {
-					os.alert({
-						type: 'info',
-						text: i18n.ts.importRequested,
-					});
-				}).catch((err) => {
-					os.alert({
-						type: 'error',
-						text: err.message,
-					});
-				});
-		},
-	}], ev.currentTarget ?? ev.target);
+	os.popupMenu(
+		[
+			{
+				icon: "ph-download-simple ph-bold ph-lg",
+				text: i18n.ts.export,
+				action: async () => {
+					os.api("export-custom-emojis", {})
+						.then(() => {
+							os.alert({
+								type: "info",
+								text: i18n.ts.exportRequested,
+							});
+						})
+						.catch((err) => {
+							os.alert({
+								type: "error",
+								text: err.message,
+							});
+						});
+				},
+			},
+			{
+				icon: "ph-upload-simple ph-bold ph-lg",
+				text: i18n.ts.import,
+				action: async () => {
+					const file = await selectFile(
+						ev.currentTarget ?? ev.target
+					);
+					os.api("admin/emoji/import-zip", {
+						fileId: file.id,
+					})
+						.then(() => {
+							os.alert({
+								type: "info",
+								text: i18n.ts.importRequested,
+							});
+						})
+						.catch((err) => {
+							os.alert({
+								type: "error",
+								text: err.message,
+							});
+						});
+				},
+			},
+		],
+		ev.currentTarget ?? ev.target
+	);
 };
 
 const setCategoryBulk = async () => {
 	const { canceled, result } = await os.inputText({
-		title: 'Category',
+		title: "Category",
 	});
 	if (canceled) return;
-	await os.apiWithDialog('admin/emoji/set-category-bulk', {
+	await os.apiWithDialog("admin/emoji/set-category-bulk", {
 		ids: selectedEmojis.value,
 		category: result,
 	});
@@ -225,46 +354,46 @@ const setCategoryBulk = async () => {
 
 const addTagBulk = async () => {
 	const { canceled, result } = await os.inputText({
-		title: 'Tag',
+		title: "Tag",
 	});
 	if (canceled) return;
-	await os.apiWithDialog('admin/emoji/add-aliases-bulk', {
+	await os.apiWithDialog("admin/emoji/add-aliases-bulk", {
 		ids: selectedEmojis.value,
-		aliases: result.split(' '),
+		aliases: result.split(" "),
 	});
 	emojisPaginationComponent.value.reload();
 };
 
 const removeTagBulk = async () => {
 	const { canceled, result } = await os.inputText({
-		title: 'Tag',
+		title: "Tag",
 	});
 	if (canceled) return;
-	await os.apiWithDialog('admin/emoji/remove-aliases-bulk', {
+	await os.apiWithDialog("admin/emoji/remove-aliases-bulk", {
 		ids: selectedEmojis.value,
-		aliases: result.split(' '),
+		aliases: result.split(" "),
 	});
 	emojisPaginationComponent.value.reload();
 };
 
 const setTagBulk = async () => {
 	const { canceled, result } = await os.inputText({
-		title: 'Tag',
+		title: "Tag",
 	});
 	if (canceled) return;
-	await os.apiWithDialog('admin/emoji/set-aliases-bulk', {
+	await os.apiWithDialog("admin/emoji/set-aliases-bulk", {
 		ids: selectedEmojis.value,
-		aliases: result.split(' '),
+		aliases: result.split(" "),
 	});
 	emojisPaginationComponent.value.reload();
 };
 
 const setLicenseBulk = async () => {
 	const { canceled, result } = await os.inputParagraph({
-		title: 'License',
+		title: "License",
 	});
 	if (canceled) return;
-	await os.apiWithDialog('admin/emoji/set-license-bulk', {
+	await os.apiWithDialog("admin/emoji/set-license-bulk", {
 		ids: selectedEmojis.value,
 		license: result,
 	});
@@ -273,40 +402,48 @@ const setLicenseBulk = async () => {
 
 const delBulk = async () => {
 	const { canceled } = await os.confirm({
-		type: 'warning',
+		type: "warning",
 		text: i18n.ts.deleteConfirm,
 	});
 	if (canceled) return;
-	await os.apiWithDialog('admin/emoji/delete-bulk', {
+	await os.apiWithDialog("admin/emoji/delete-bulk", {
 		ids: selectedEmojis.value,
 	});
 	emojisPaginationComponent.value.reload();
 };
 
-const headerActions = $computed(() => [{
-	asFullButton: true,
-	icon: 'ph-plus ph-bold ph-lg',
-	text: i18n.ts.addEmoji,
-	handler: add,
-}, {
-	icon: 'ph-dots-three-outline ph-bold ph-lg',
-	handler: menu,
-}]);
+const headerActions = $computed(() => [
+	{
+		asFullButton: true,
+		icon: "ph-plus ph-bold ph-lg",
+		text: i18n.ts.addEmoji,
+		handler: add,
+	},
+	{
+		icon: "ph-dots-three-outline ph-bold ph-lg",
+		handler: menu,
+	},
+]);
 
-const headerTabs = $computed(() => [{
-	key: 'local',
-	icon: 'ph-hand-fist ph-bold ph-lg',
-	title: i18n.ts.local,
-}, {
-	key: 'remote',
-	icon: 'ph-planet ph-bold ph-lg',
-	title: i18n.ts.remote,
-}]);
+const headerTabs = $computed(() => [
+	{
+		key: "local",
+		icon: "ph-hand-fist ph-bold ph-lg",
+		title: i18n.ts.local,
+	},
+	{
+		key: "remote",
+		icon: "ph-planet ph-bold ph-lg",
+		title: i18n.ts.remote,
+	},
+]);
 
-definePageMetadata(computed(() => ({
-	title: i18n.ts.customEmojis,
-	icon: 'ph-smiley ph-bold ph-lg',
-})));
+definePageMetadata(
+	computed(() => ({
+		title: i18n.ts.customEmojis,
+		icon: "ph-smiley ph-bold ph-lg",
+	}))
+);
 </script>
 
 <style lang="scss" scoped>
@@ -321,7 +458,7 @@ definePageMetadata(computed(() => ({
 			grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
 			grid-gap: 12px;
 			margin: var(--margin) 0;
-	
+
 			> .emoji {
 				display: flex;
 				align-items: center;
diff --git a/packages/client/src/pages/admin/federation.vue b/packages/client/src/pages/admin/federation.vue
index 04294740c6..325ba32be8 100644
--- a/packages/client/src/pages/admin/federation.vue
+++ b/packages/client/src/pages/admin/federation.vue
@@ -1,26 +1,34 @@
 <template>
-<div>
-	<MkStickyContainer>
-		<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs" :display-back-button="true"/></template>
-		<MkSpacer :content-max="900">
-			<XFederation/>
-		</MkSpacer>
-	</MkStickyContainer>
-</div>
+	<div>
+		<MkStickyContainer>
+			<template #header
+				><MkPageHeader
+					v-model:tab="tab"
+					:actions="headerActions"
+					:tabs="headerTabs"
+					:display-back-button="true"
+			/></template>
+			<MkSpacer :content-max="900">
+				<XFederation />
+			</MkSpacer>
+		</MkStickyContainer>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import { i18n } from '@/i18n';
-import XFederation from '@/pages/about.federation.vue';
+import { computed } from "vue";
+import { definePageMetadata } from "@/scripts/page-metadata";
+import { i18n } from "@/i18n";
+import XFederation from "@/pages/about.federation.vue";
 
 const headerActions = $computed(() => []);
 
 const headerTabs = $computed(() => []);
 
-definePageMetadata(computed(() => ({
-	title: i18n.ts.federation,
-	icon: 'ph-planet ph-bold ph-lg',
-})));
+definePageMetadata(
+	computed(() => ({
+		title: i18n.ts.federation,
+		icon: "ph-planet ph-bold ph-lg",
+	}))
+);
 </script>
diff --git a/packages/client/src/pages/admin/files.vue b/packages/client/src/pages/admin/files.vue
index 9bae0053cb..e752eb82c6 100644
--- a/packages/client/src/pages/admin/files.vue
+++ b/packages/client/src/pages/admin/files.vue
@@ -1,73 +1,120 @@
 <template>
-<div>
-	<MkStickyContainer>
-		<template #header><MkPageHeader :actions="headerActions"/></template>
-		<MkSpacer :content-max="900">
-			<div class="xrmjdkdw">
-				<div>
-					<div class="inputs" style="display: flex; gap: var(--margin); flex-wrap: wrap;">
-						<MkSelect v-model="origin" style="margin: 0; flex: 1;">
-							<template #label>{{ i18n.ts.instance }}</template>
-							<option value="combined">{{ i18n.ts.all }}</option>
-							<option value="local">{{ i18n.ts.local }}</option>
-							<option value="remote">{{ i18n.ts.remote }}</option>
-						</MkSelect>
-						<MkInput v-model="searchHost" :debounce="true" type="search" style="margin: 0; flex: 1;" :disabled="pagination.params.origin === 'local'">
-							<template #label>{{ i18n.ts.host }}</template>
-						</MkInput>
+	<div>
+		<MkStickyContainer>
+			<template #header
+				><MkPageHeader :actions="headerActions"
+			/></template>
+			<MkSpacer :content-max="900">
+				<div class="xrmjdkdw">
+					<div>
+						<div
+							class="inputs"
+							style="
+								display: flex;
+								gap: var(--margin);
+								flex-wrap: wrap;
+							"
+						>
+							<MkSelect
+								v-model="origin"
+								style="margin: 0; flex: 1"
+							>
+								<template #label>{{
+									i18n.ts.instance
+								}}</template>
+								<option value="combined">
+									{{ i18n.ts.all }}
+								</option>
+								<option value="local">
+									{{ i18n.ts.local }}
+								</option>
+								<option value="remote">
+									{{ i18n.ts.remote }}
+								</option>
+							</MkSelect>
+							<MkInput
+								v-model="searchHost"
+								:debounce="true"
+								type="search"
+								style="margin: 0; flex: 1"
+								:disabled="pagination.params.origin === 'local'"
+							>
+								<template #label>{{ i18n.ts.host }}</template>
+							</MkInput>
+						</div>
+						<div
+							class="inputs"
+							style="
+								display: flex;
+								gap: var(--margin);
+								flex-wrap: wrap;
+								padding-top: 1.2em;
+							"
+						>
+							<MkInput
+								v-model="userId"
+								:debounce="true"
+								type="search"
+								style="margin: 0; flex: 1"
+							>
+								<template #label>User ID</template>
+							</MkInput>
+							<MkInput
+								v-model="type"
+								:debounce="true"
+								type="search"
+								style="margin: 0; flex: 1"
+							>
+								<template #label>MIME type</template>
+							</MkInput>
+						</div>
+						<MkFileListForAdmin
+							:pagination="pagination"
+							:view-mode="viewMode"
+						/>
 					</div>
-					<div class="inputs" style="display: flex; gap: var(--margin); flex-wrap: wrap; padding-top: 1.2em;">
-						<MkInput v-model="userId" :debounce="true" type="search" style="margin: 0; flex: 1;">
-							<template #label>User ID</template>
-						</MkInput>
-						<MkInput v-model="type" :debounce="true" type="search" style="margin: 0; flex: 1;">
-							<template #label>MIME type</template>
-						</MkInput>
-					</div>
-					<MkFileListForAdmin :pagination="pagination" :view-mode="viewMode"/>
 				</div>
-			</div>
-		</MkSpacer>
-	</MkStickyContainer>
-</div>
+			</MkSpacer>
+		</MkStickyContainer>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { computed, defineAsyncComponent } from 'vue';
-import * as Acct from 'calckey-js/built/acct';
-import MkButton from '@/components/MkButton.vue';
-import MkInput from '@/components/form/input.vue';
-import MkSelect from '@/components/form/select.vue';
-import MkFileListForAdmin from '@/components/MkFileListForAdmin.vue';
-import bytes from '@/filters/bytes';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import { computed, defineAsyncComponent } from "vue";
+import * as Acct from "calckey-js/built/acct";
+import MkButton from "@/components/MkButton.vue";
+import MkInput from "@/components/form/input.vue";
+import MkSelect from "@/components/form/select.vue";
+import MkFileListForAdmin from "@/components/MkFileListForAdmin.vue";
+import bytes from "@/filters/bytes";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
-let origin = $ref('local');
+let origin = $ref("local");
 let type = $ref(null);
-let searchHost = $ref('');
-let userId = $ref('');
-let viewMode = $ref('grid');
+let searchHost = $ref("");
+let userId = $ref("");
+let viewMode = $ref("grid");
 const pagination = {
-	endpoint: 'admin/drive/files' as const,
+	endpoint: "admin/drive/files" as const,
 	limit: 10,
 	params: computed(() => ({
-		type: (type && type !== '') ? type : null,
-		userId: (userId && userId !== '') ? userId : null,
+		type: type && type !== "" ? type : null,
+		userId: userId && userId !== "" ? userId : null,
 		origin: origin,
-		hostname: (searchHost && searchHost !== '') ? searchHost : null,
+		hostname: searchHost && searchHost !== "" ? searchHost : null,
 	})),
 };
 
 function clear() {
 	os.confirm({
-		type: 'warning',
+		type: "warning",
 		text: i18n.ts.clearCachedFilesConfirm,
 	}).then(({ canceled }) => {
 		if (canceled) return;
 
-		os.apiWithDialog('admin/drive/clean-remote-files', {});
+		os.apiWithDialog("admin/drive/clean-remote-files", {});
 	});
 }
 
@@ -82,34 +129,46 @@ async function find() {
 	});
 	if (canceled) return;
 
-	os.api('admin/drive/show-file', q.startsWith('http://') || q.startsWith('https://') ? { url: q.trim() } : { fileId: q.trim() }).then(file => {
-		show(file);
-	}).catch(err => {
-		if (err.code === 'NO_SUCH_FILE') {
-			os.alert({
-				type: 'error',
-				text: i18n.ts.notFound,
-			});
-		}
-	});
+	os.api(
+		"admin/drive/show-file",
+		q.startsWith("http://") || q.startsWith("https://")
+			? { url: q.trim() }
+			: { fileId: q.trim() }
+	)
+		.then((file) => {
+			show(file);
+		})
+		.catch((err) => {
+			if (err.code === "NO_SUCH_FILE") {
+				os.alert({
+					type: "error",
+					text: i18n.ts.notFound,
+				});
+			}
+		});
 }
 
-const headerActions = $computed(() => [{
-	text: i18n.ts.lookup,
-	icon: 'ph-magnifying-glass ph-bold ph-lg',
-	handler: find,
-}, {
-	text: i18n.ts.clearCachedFiles,
-	icon: 'ph-trash ph-bold ph-lg',
-	handler: clear,
-}]);
+const headerActions = $computed(() => [
+	{
+		text: i18n.ts.lookup,
+		icon: "ph-magnifying-glass ph-bold ph-lg",
+		handler: find,
+	},
+	{
+		text: i18n.ts.clearCachedFiles,
+		icon: "ph-trash ph-bold ph-lg",
+		handler: clear,
+	},
+]);
 
 const headerTabs = $computed(() => []);
 
-definePageMetadata(computed(() => ({
-	title: i18n.ts.files,
-	icon: 'ph-cloud ph-bold ph-lg',
-})));
+definePageMetadata(
+	computed(() => ({
+		title: i18n.ts.files,
+		icon: "ph-cloud ph-bold ph-lg",
+	}))
+);
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/pages/admin/index.vue b/packages/client/src/pages/admin/index.vue
index cbab4a6400..1e4438a66b 100644
--- a/packages/client/src/pages/admin/index.vue
+++ b/packages/client/src/pages/admin/index.vue
@@ -1,78 +1,131 @@
 <template>
-<div ref="el" class="hiyeyicy" :class="{ wide: !narrow }">
-	<div v-if="!narrow || currentPage?.route.name == null" class="nav">
-		<MkSpacer :content-max="700" :margin-min="16">
-			<div class="lxpfedzu">
-				<div class="banner">
-					<img :src="$instance.iconUrl || '/favicon.ico'" alt="" class="icon"/>
+	<div ref="el" class="hiyeyicy" :class="{ wide: !narrow }">
+		<div v-if="!narrow || currentPage?.route.name == null" class="nav">
+			<MkSpacer :content-max="700" :margin-min="16">
+				<div class="lxpfedzu">
+					<div class="banner">
+						<img
+							:src="$instance.iconUrl || '/favicon.ico'"
+							alt=""
+							class="icon"
+						/>
+					</div>
+
+					<MkInfo
+						v-if="thereIsUnresolvedAbuseReport"
+						warn
+						class="info"
+						>{{ i18n.ts.thereIsUnresolvedAbuseReportWarning }}
+						<MkA to="/admin/abuses" class="_link">{{
+							i18n.ts.check
+						}}</MkA></MkInfo
+					>
+					<MkInfo v-if="noMaintainerInformation" warn class="info"
+						>{{ i18n.ts.noMaintainerInformationWarning }}
+						<MkA to="/admin/settings" class="_link">{{
+							i18n.ts.configure
+						}}</MkA></MkInfo
+					>
+					<MkInfo v-if="noBotProtection" warn class="info"
+						>{{ i18n.ts.noBotProtectionWarning }}
+						<MkA to="/admin/security" class="_link">{{
+							i18n.ts.configure
+						}}</MkA></MkInfo
+					>
+					<MkInfo v-if="noEmailServer" warn class="info"
+						>{{ i18n.ts.noEmailServerWarning }}
+						<MkA to="/admin/email-settings" class="_link">{{
+							i18n.ts.configure
+						}}</MkA></MkInfo
+					>
+					<MkInfo v-if="updateAvailable" warn class="info"
+						>{{ i18n.ts.updateAvailable }}
+						<a
+							href="https://codeberg.org/calckey/calckey/releases"
+							target="_bank"
+							class="_link"
+							>{{ i18n.ts.check }}</a
+						></MkInfo
+					>
+
+					<MkSuperMenu :def="menuDef" :grid="narrow"></MkSuperMenu>
 				</div>
-
-				<MkInfo v-if="thereIsUnresolvedAbuseReport" warn class="info">{{ i18n.ts.thereIsUnresolvedAbuseReportWarning }} <MkA to="/admin/abuses" class="_link">{{ i18n.ts.check }}</MkA></MkInfo>
-				<MkInfo v-if="noMaintainerInformation" warn class="info">{{ i18n.ts.noMaintainerInformationWarning }} <MkA to="/admin/settings" class="_link">{{ i18n.ts.configure }}</MkA></MkInfo>
-				<MkInfo v-if="noBotProtection" warn class="info">{{ i18n.ts.noBotProtectionWarning }} <MkA to="/admin/security" class="_link">{{ i18n.ts.configure }}</MkA></MkInfo>
-				<MkInfo v-if="noEmailServer" warn class="info">{{ i18n.ts.noEmailServerWarning }} <MkA to="/admin/email-settings" class="_link">{{ i18n.ts.configure }}</MkA></MkInfo>
-				<MkInfo v-if="updateAvailable" warn class="info">{{ i18n.ts.updateAvailable }} <a href="https://codeberg.org/calckey/calckey/releases" target="_bank" class="_link">{{ i18n.ts.check }}</a></MkInfo>
-
-				<MkSuperMenu :def="menuDef" :grid="narrow"></MkSuperMenu>
-			</div>
-		</MkSpacer>
+			</MkSpacer>
+		</div>
+		<div v-if="!(narrow && currentPage?.route.name == null)" class="main">
+			<RouterView />
+		</div>
 	</div>
-	<div v-if="!(narrow && currentPage?.route.name == null)" class="main">
-		<RouterView/>
-	</div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent, inject, nextTick, onMounted, onUnmounted, onActivated, provide, watch, ref } from 'vue';
-import { i18n } from '@/i18n';
-import MkSuperMenu from '@/components/MkSuperMenu.vue';
-import MkInfo from '@/components/MkInfo.vue';
-import { scroll } from '@/scripts/scroll';
-import { instance } from '@/instance';
-import { version } from '@/config';
-import { $i } from '@/account'
-import * as os from '@/os';
-import { lookupUser } from '@/scripts/lookup-user';
-import { defaultStore } from '@/store';
-import { useRouter } from '@/router';
-import { definePageMetadata, provideMetadataReceiver, setPageMetadata } from '@/scripts/page-metadata';
+import {
+	defineAsyncComponent,
+	inject,
+	nextTick,
+	onMounted,
+	onUnmounted,
+	onActivated,
+	provide,
+	watch,
+	ref,
+} from "vue";
+import { i18n } from "@/i18n";
+import MkSuperMenu from "@/components/MkSuperMenu.vue";
+import MkInfo from "@/components/MkInfo.vue";
+import { scroll } from "@/scripts/scroll";
+import { instance } from "@/instance";
+import { version } from "@/config";
+import { $i } from "@/account";
+import * as os from "@/os";
+import { lookupUser } from "@/scripts/lookup-user";
+import { defaultStore } from "@/store";
+import { useRouter } from "@/router";
+import {
+	definePageMetadata,
+	provideMetadataReceiver,
+	setPageMetadata,
+} from "@/scripts/page-metadata";
 
-const isEmpty = (x: string | null) => x == null || x === '';
+const isEmpty = (x: string | null) => x == null || x === "";
 const el = ref<HTMLElement | null>(null);
 const router = useRouter();
 
 const indexInfo = {
 	title: i18n.ts.controlPanel,
-	icon: 'ph-gear-six ph-bold ph-lg',
+	icon: "ph-gear-six ph-bold ph-lg",
 	hideHeader: true,
 };
 
-provide('shouldOmitHeaderTitle', false);
+provide("shouldOmitHeaderTitle", false);
 
 let INFO = $ref(indexInfo);
 let childInfo = $ref(null);
 let narrow = $ref(false);
 let view = $ref(null);
 let pageProps = $ref({});
-let noMaintainerInformation = isEmpty(instance.maintainerName) || isEmpty(instance.maintainerEmail);
-let noBotProtection = !instance.disableRegistration && !instance.enableHcaptcha && !instance.enableRecaptcha;
+let noMaintainerInformation =
+	isEmpty(instance.maintainerName) || isEmpty(instance.maintainerEmail);
+let noBotProtection =
+	!instance.disableRegistration &&
+	!instance.enableHcaptcha &&
+	!instance.enableRecaptcha;
 let noEmailServer = !instance.enableEmail;
 let thereIsUnresolvedAbuseReport = $ref(false);
 let updateAvailable = $ref(false);
 let currentPage = $computed(() => router.currentRef.value.child);
 
-os.api('admin/abuse-user-reports', {
-	state: 'unresolved',
+os.api("admin/abuse-user-reports", {
+	state: "unresolved",
 	limit: 1,
-}).then(reports => {
+}).then((reports) => {
 	if (reports?.length > 0) thereIsUnresolvedAbuseReport = true;
 });
 
 if (defaultStore.state.showAdminUpdates) {
-	os.api('latest-version').then(res => {
-		const cleanRes = parseInt(res?.tag_name.replace(/[^0-9]/g, ''));
-		const cleanVersion = parseInt(version.replace(/[^0-9]/g, ''));
+	os.api("latest-version").then((res) => {
+		const cleanRes = parseInt(res?.tag_name.replace(/[^0-9]/g, ""));
+		const cleanVersion = parseInt(version.replace(/[^0-9]/g, ""));
 		if (cleanRes > cleanVersion) {
 			updateAvailable = true;
 		}
@@ -85,121 +138,158 @@ const ro = new ResizeObserver((entries, observer) => {
 	narrow = entries[0].borderBoxSize[0].inlineSize < NARROW_THRESHOLD;
 });
 
-const menuDef = $computed(() => [{
-	title: i18n.ts.quickAction,
-	items: [{
-		type: 'button',
-		icon: 'ph-magnifying-glass ph-bold ph-lg',
-		text: i18n.ts.lookup,
-		action: lookup,
-	}, ...(instance.disableRegistration ? [{
-		type: 'button',
-		icon: 'ph-user-plus ph-bold ph-lg',
-		text: i18n.ts.invite,
-		action: invite,
-	}] : [])],
-}, {
-	title: i18n.ts.administration,
-	items: [{
-		icon: 'ph-gauge ph-bold ph-lg',
-		text: i18n.ts.dashboard,
-		to: '/admin/overview',
-		active: currentPage?.route.name === 'overview',
-	}, {
-		icon: 'ph-users ph-bold ph-lg',
-		text: i18n.ts.users,
-		to: '/admin/users',
-		active: currentPage?.route.name === 'users',
-	}, {
-		icon: 'ph-smiley ph-bold ph-lg',
-		text: i18n.ts.customEmojis,
-		to: '/admin/emojis',
-		active: currentPage?.route.name === 'emojis',
-	}, {
-		icon: 'ph-planet ph-bold ph-lg',
-		text: i18n.ts.federation,
-		to: '/admin/federation',
-		active: currentPage?.route.name === 'federation',
-	}, {
-		icon: 'ph-clipboard-text ph-bold ph-lg',
-		text: i18n.ts.jobQueue,
-		to: '/admin/queue',
-		active: currentPage?.route.name === 'queue',
-	}, {
-		icon: 'ph-cloud ph-bold ph-lg',
-		text: i18n.ts.files,
-		to: '/admin/files',
-		active: currentPage?.route.name === 'files',
-	}, {
-		icon: 'ph-megaphone-simple ph-bold ph-lg',
-		text: i18n.ts.announcements,
-		to: '/admin/announcements',
-		active: currentPage?.route.name === 'announcements',
-	}, {
-		icon: 'ph-money ph-bold ph-lg',
-		text: i18n.ts.ads,
-		to: '/admin/ads',
-		active: currentPage?.route.name === 'ads',
-	}, {
-		icon: 'ph-warning-circle ph-bold ph-lg',
-		text: i18n.ts.abuseReports,
-		to: '/admin/abuses',
-		active: currentPage?.route.name === 'abuses',
-	}],
-}, ...($i?.isAdmin ? [{
-	title: i18n.ts.settings,
-	items: [{
-		icon: 'ph-gear-six ph-bold ph-lg',
-		text: i18n.ts.general,
-		to: '/admin/settings',
-		active: currentPage?.route.name === 'settings',
-	}, {
-		icon: 'ph-envelope-simple-open ph-bold ph-lg',
-		text: i18n.ts.emailServer,
-		to: '/admin/email-settings',
-		active: currentPage?.route.name === 'email-settings',
-	}, {
-		icon: 'ph-cloud ph-bold ph-lg',
-		text: i18n.ts.objectStorage,
-		to: '/admin/object-storage',
-		active: currentPage?.route.name === 'object-storage',
-	}, {
-		icon: 'ph-lock ph-bold ph-lg',
-		text: i18n.ts.security,
-		to: '/admin/security',
-		active: currentPage?.route.name === 'security',
-	}, {
-		icon: 'ph-flow-arrow ph-bold ph-lg',
-		text: i18n.ts.relays,
-		to: '/admin/relays',
-		active: currentPage?.route.name === 'relays',
-	}, {
-		icon: 'ph-plug ph-bold ph-lg',
-		text: i18n.ts.integration,
-		to: '/admin/integrations',
-		active: currentPage?.route.name === 'integrations',
-	}, {
-		icon: 'ph-prohibit ph-bold ph-lg',
-		text: i18n.ts.instanceBlocking,
-		to: '/admin/instance-block',
-		active: currentPage?.route.name === 'instance-block',
-	}, {
-		icon: 'ph-ghost ph-bold ph-lg',
-		text: i18n.ts.proxyAccount,
-		to: '/admin/proxy-account',
-		active: currentPage?.route.name === 'proxy-account',
+const menuDef = $computed(() => [
+	{
+		title: i18n.ts.quickAction,
+		items: [
+			{
+				type: "button",
+				icon: "ph-magnifying-glass ph-bold ph-lg",
+				text: i18n.ts.lookup,
+				action: lookup,
+			},
+			...(instance.disableRegistration
+				? [
+						{
+							type: "button",
+							icon: "ph-user-plus ph-bold ph-lg",
+							text: i18n.ts.invite,
+							action: invite,
+						},
+				  ]
+				: []),
+		],
 	},
 	{
-		icon: 'ph-database ph-bold ph-lg',
-		text: i18n.ts.database,
-		to: '/admin/database',
-		active: currentPage?.route.name === 'database',
-	}],
-}] : [])]);
+		title: i18n.ts.administration,
+		items: [
+			{
+				icon: "ph-gauge ph-bold ph-lg",
+				text: i18n.ts.dashboard,
+				to: "/admin/overview",
+				active: currentPage?.route.name === "overview",
+			},
+			{
+				icon: "ph-users ph-bold ph-lg",
+				text: i18n.ts.users,
+				to: "/admin/users",
+				active: currentPage?.route.name === "users",
+			},
+			{
+				icon: "ph-smiley ph-bold ph-lg",
+				text: i18n.ts.customEmojis,
+				to: "/admin/emojis",
+				active: currentPage?.route.name === "emojis",
+			},
+			{
+				icon: "ph-planet ph-bold ph-lg",
+				text: i18n.ts.federation,
+				to: "/admin/federation",
+				active: currentPage?.route.name === "federation",
+			},
+			{
+				icon: "ph-clipboard-text ph-bold ph-lg",
+				text: i18n.ts.jobQueue,
+				to: "/admin/queue",
+				active: currentPage?.route.name === "queue",
+			},
+			{
+				icon: "ph-cloud ph-bold ph-lg",
+				text: i18n.ts.files,
+				to: "/admin/files",
+				active: currentPage?.route.name === "files",
+			},
+			{
+				icon: "ph-megaphone-simple ph-bold ph-lg",
+				text: i18n.ts.announcements,
+				to: "/admin/announcements",
+				active: currentPage?.route.name === "announcements",
+			},
+			{
+				icon: "ph-money ph-bold ph-lg",
+				text: i18n.ts.ads,
+				to: "/admin/ads",
+				active: currentPage?.route.name === "ads",
+			},
+			{
+				icon: "ph-warning-circle ph-bold ph-lg",
+				text: i18n.ts.abuseReports,
+				to: "/admin/abuses",
+				active: currentPage?.route.name === "abuses",
+			},
+		],
+	},
+	...($i?.isAdmin
+		? [
+				{
+					title: i18n.ts.settings,
+					items: [
+						{
+							icon: "ph-gear-six ph-bold ph-lg",
+							text: i18n.ts.general,
+							to: "/admin/settings",
+							active: currentPage?.route.name === "settings",
+						},
+						{
+							icon: "ph-envelope-simple-open ph-bold ph-lg",
+							text: i18n.ts.emailServer,
+							to: "/admin/email-settings",
+							active:
+								currentPage?.route.name === "email-settings",
+						},
+						{
+							icon: "ph-cloud ph-bold ph-lg",
+							text: i18n.ts.objectStorage,
+							to: "/admin/object-storage",
+							active:
+								currentPage?.route.name === "object-storage",
+						},
+						{
+							icon: "ph-lock ph-bold ph-lg",
+							text: i18n.ts.security,
+							to: "/admin/security",
+							active: currentPage?.route.name === "security",
+						},
+						{
+							icon: "ph-flow-arrow ph-bold ph-lg",
+							text: i18n.ts.relays,
+							to: "/admin/relays",
+							active: currentPage?.route.name === "relays",
+						},
+						{
+							icon: "ph-plug ph-bold ph-lg",
+							text: i18n.ts.integration,
+							to: "/admin/integrations",
+							active: currentPage?.route.name === "integrations",
+						},
+						{
+							icon: "ph-prohibit ph-bold ph-lg",
+							text: i18n.ts.instanceBlocking,
+							to: "/admin/instance-block",
+							active:
+								currentPage?.route.name === "instance-block",
+						},
+						{
+							icon: "ph-ghost ph-bold ph-lg",
+							text: i18n.ts.proxyAccount,
+							to: "/admin/proxy-account",
+							active: currentPage?.route.name === "proxy-account",
+						},
+						{
+							icon: "ph-database ph-bold ph-lg",
+							text: i18n.ts.database,
+							to: "/admin/database",
+							active: currentPage?.route.name === "database",
+						},
+					],
+				},
+		  ]
+		: []),
+]);
 
 watch(narrow, () => {
 	if (currentPage?.route.name == null && !narrow) {
-		router.push('/admin/overview');
+		router.push("/admin/overview");
 	}
 });
 
@@ -208,7 +298,7 @@ onMounted(() => {
 
 	narrow = el.value.offsetWidth < NARROW_THRESHOLD;
 	if (currentPage?.route.name == null && !narrow) {
-		router.push('/admin/overview');
+		router.push("/admin/overview");
 	}
 });
 
@@ -216,7 +306,7 @@ onActivated(() => {
 	narrow = el.value.offsetWidth < NARROW_THRESHOLD;
 
 	if (!narrow && currentPage?.route.name == null) {
-		router.replace('/admin/overview');
+		router.replace("/admin/overview");
 	}
 });
 
@@ -226,7 +316,7 @@ onUnmounted(() => {
 
 watch(router.currentRef, (to) => {
 	if (to.route.path === "/admin" && to.child?.route.name == null && !narrow) {
-		router.replace('/admin/overview');
+		router.replace("/admin/overview");
 	}
 });
 
@@ -239,45 +329,55 @@ provideMetadataReceiver((info) => {
 });
 
 const invite = () => {
-	os.api('admin/invite').then(x => {
-		os.alert({
-			type: 'info',
-			text: x.code,
+	os.api("admin/invite")
+		.then((x) => {
+			os.alert({
+				type: "info",
+				text: x.code,
+			});
+		})
+		.catch((err) => {
+			os.alert({
+				type: "error",
+				text: err,
+			});
 		});
-	}).catch(err => {
-		os.alert({
-			type: 'error',
-			text: err,
-		});
-	});
 };
 
 const lookup = (ev) => {
-	os.popupMenu([{
-		text: i18n.ts.user,
-		icon: 'ph-user ph-bold ph-lg',
-		action: () => {
-			lookupUser();
-		},
-	}, {
-		text: i18n.ts.note,
-		icon: 'ph-pencil ph-bold ph-lg',
-		action: () => {
-			alert('TODO');
-		},
-	}, {
-		text: i18n.ts.file,
-		icon: 'ph-cloud ph-bold ph-lg',
-		action: () => {
-			alert('TODO');
-		},
-	}, {
-		text: i18n.ts.instance,
-		icon: 'ph-planet ph-bold ph-lg',
-		action: () => {
-			alert('TODO');
-		},
-	}], ev.currentTarget ?? ev.target);
+	os.popupMenu(
+		[
+			{
+				text: i18n.ts.user,
+				icon: "ph-user ph-bold ph-lg",
+				action: () => {
+					lookupUser();
+				},
+			},
+			{
+				text: i18n.ts.note,
+				icon: "ph-pencil ph-bold ph-lg",
+				action: () => {
+					alert("TODO");
+				},
+			},
+			{
+				text: i18n.ts.file,
+				icon: "ph-cloud ph-bold ph-lg",
+				action: () => {
+					alert("TODO");
+				},
+			},
+			{
+				text: i18n.ts.instance,
+				icon: "ph-planet ph-bold ph-lg",
+				action: () => {
+					alert("TODO");
+				},
+			},
+		],
+		ev.currentTarget ?? ev.target
+	);
 };
 
 const headerActions = $computed(() => []);
diff --git a/packages/client/src/pages/admin/instance-block.vue b/packages/client/src/pages/admin/instance-block.vue
index 70edf5ce07..80231b11e2 100644
--- a/packages/client/src/pages/admin/instance-block.vue
+++ b/packages/client/src/pages/admin/instance-block.vue
@@ -1,39 +1,49 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs" :display-back-button="true"/></template>
-	<MkSpacer :content-max="700" :margin-min="16" :margin-max="32">
-		<FormSuspense :p="init">
-			<FormTextarea v-model="blockedHosts" class="_formBlock">
-				<span>{{ i18n.ts.blockedInstances }}</span>
-				<template #caption>{{ i18n.ts.blockedInstancesDescription }}</template>
-			</FormTextarea>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader
+				:actions="headerActions"
+				:tabs="headerTabs"
+				:display-back-button="true"
+		/></template>
+		<MkSpacer :content-max="700" :margin-min="16" :margin-max="32">
+			<FormSuspense :p="init">
+				<FormTextarea v-model="blockedHosts" class="_formBlock">
+					<span>{{ i18n.ts.blockedInstances }}</span>
+					<template #caption>{{
+						i18n.ts.blockedInstancesDescription
+					}}</template>
+				</FormTextarea>
 
-			<FormButton primary class="_formBlock" @click="save"><i class="ph-floppy-disk-back ph-bold ph-lg"></i> {{ i18n.ts.save }}</FormButton>
-		</FormSuspense>
-	</MkSpacer>
-</MkStickyContainer>
+				<FormButton primary class="_formBlock" @click="save"
+					><i class="ph-floppy-disk-back ph-bold ph-lg"></i>
+					{{ i18n.ts.save }}</FormButton
+				>
+			</FormSuspense>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import FormButton from '@/components/MkButton.vue';
-import FormTextarea from '@/components/form/textarea.vue';
-import FormSuspense from '@/components/form/suspense.vue';
-import * as os from '@/os';
-import { fetchInstance } from '@/instance';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import {} from "vue";
+import FormButton from "@/components/MkButton.vue";
+import FormTextarea from "@/components/form/textarea.vue";
+import FormSuspense from "@/components/form/suspense.vue";
+import * as os from "@/os";
+import { fetchInstance } from "@/instance";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
-let blockedHosts: string = $ref('');
+let blockedHosts: string = $ref("");
 
 async function init() {
-	const meta = await os.api('admin/meta');
-	blockedHosts = meta.blockedHosts.join('\n');
+	const meta = await os.api("admin/meta");
+	blockedHosts = meta.blockedHosts.join("\n");
 }
 
 function save() {
-	os.apiWithDialog('admin/update-meta', {
-		blockedHosts: blockedHosts.split('\n').map(h => h.trim()) || [],
+	os.apiWithDialog("admin/update-meta", {
+		blockedHosts: blockedHosts.split("\n").map((h) => h.trim()) || [],
 	}).then(() => {
 		fetchInstance();
 	});
@@ -45,6 +55,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.instanceBlocking,
-	icon: 'ph-prohibit ph-bold ph-lg',
+	icon: "ph-prohibit ph-bold ph-lg",
 });
 </script>
diff --git a/packages/client/src/pages/admin/integrations.discord.vue b/packages/client/src/pages/admin/integrations.discord.vue
index 3f16c92c99..2bf047069d 100644
--- a/packages/client/src/pages/admin/integrations.discord.vue
+++ b/packages/client/src/pages/admin/integrations.discord.vue
@@ -1,47 +1,56 @@
 <template>
-<FormSuspense :p="init">
-	<div class="_formRoot">
-		<FormSwitch v-model="enableDiscordIntegration" class="_formBlock">
-			<template #label>{{ i18n.ts.enable }}</template>
-		</FormSwitch>
+	<FormSuspense :p="init">
+		<div class="_formRoot">
+			<FormSwitch v-model="enableDiscordIntegration" class="_formBlock">
+				<template #label>{{ i18n.ts.enable }}</template>
+			</FormSwitch>
 
-		<template v-if="enableDiscordIntegration">
-			<FormInfo class="_formBlock">Callback URL: {{ `${uri}/api/dc/cb` }}</FormInfo>
+			<template v-if="enableDiscordIntegration">
+				<FormInfo class="_formBlock"
+					>Callback URL: {{ `${uri}/api/dc/cb` }}</FormInfo
+				>
 
-			<FormInput v-model="discordClientId" class="_formBlock">
-				<template #prefix><i class="ph-key ph-bold ph-lg"></i></template>
-				<template #label>Client ID</template>
-			</FormInput>
+				<FormInput v-model="discordClientId" class="_formBlock">
+					<template #prefix
+						><i class="ph-key ph-bold ph-lg"></i
+					></template>
+					<template #label>Client ID</template>
+				</FormInput>
 
-			<FormInput v-model="discordClientSecret" class="_formBlock">
-				<template #prefix><i class="ph-key ph-bold ph-lg"></i></template>
-				<template #label>Client Secret</template>
-			</FormInput>
-		</template>
+				<FormInput v-model="discordClientSecret" class="_formBlock">
+					<template #prefix
+						><i class="ph-key ph-bold ph-lg"></i
+					></template>
+					<template #label>Client Secret</template>
+				</FormInput>
+			</template>
 
-		<FormButton primary class="_formBlock" @click="save"><i class="ph-floppy-disk-back ph-bold ph-lg"></i> {{ i18n.ts.save }}</FormButton>
-	</div>
-</FormSuspense>
+			<FormButton primary class="_formBlock" @click="save"
+				><i class="ph-floppy-disk-back ph-bold ph-lg"></i>
+				{{ i18n.ts.save }}</FormButton
+			>
+		</div>
+	</FormSuspense>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import FormSwitch from '@/components/form/switch.vue';
-import FormInput from '@/components/form/input.vue';
-import FormButton from '@/components/MkButton.vue';
-import FormInfo from '@/components/MkInfo.vue';
-import FormSuspense from '@/components/form/suspense.vue';
-import * as os from '@/os';
-import { fetchInstance } from '@/instance';
-import { i18n } from '@/i18n';
+import {} from "vue";
+import FormSwitch from "@/components/form/switch.vue";
+import FormInput from "@/components/form/input.vue";
+import FormButton from "@/components/MkButton.vue";
+import FormInfo from "@/components/MkInfo.vue";
+import FormSuspense from "@/components/form/suspense.vue";
+import * as os from "@/os";
+import { fetchInstance } from "@/instance";
+import { i18n } from "@/i18n";
 
-let uri: string = $ref('');
+let uri: string = $ref("");
 let enableDiscordIntegration: boolean = $ref(false);
 let discordClientId: string | null = $ref(null);
 let discordClientSecret: string | null = $ref(null);
 
 async function init() {
-	const meta = await os.api('admin/meta');
+	const meta = await os.api("admin/meta");
 	uri = meta.uri;
 	enableDiscordIntegration = meta.enableDiscordIntegration;
 	discordClientId = meta.discordClientId;
@@ -49,7 +58,7 @@ async function init() {
 }
 
 function save() {
-	os.apiWithDialog('admin/update-meta', {
+	os.apiWithDialog("admin/update-meta", {
 		enableDiscordIntegration,
 		discordClientId,
 		discordClientSecret,
diff --git a/packages/client/src/pages/admin/integrations.github.vue b/packages/client/src/pages/admin/integrations.github.vue
index 186e4d70f1..67c57a7dd1 100644
--- a/packages/client/src/pages/admin/integrations.github.vue
+++ b/packages/client/src/pages/admin/integrations.github.vue
@@ -1,47 +1,56 @@
 <template>
-<FormSuspense :p="init">
-	<div class="_formRoot">
-		<FormSwitch v-model="enableGithubIntegration" class="_formBlock">
-			<template #label>{{ i18n.ts.enable }}</template>
-		</FormSwitch>
+	<FormSuspense :p="init">
+		<div class="_formRoot">
+			<FormSwitch v-model="enableGithubIntegration" class="_formBlock">
+				<template #label>{{ i18n.ts.enable }}</template>
+			</FormSwitch>
 
-		<template v-if="enableGithubIntegration">
-			<FormInfo class="_formBlock">Callback URL: {{ `${uri}/api/gh/cb` }}</FormInfo>
-		
-			<FormInput v-model="githubClientId" class="_formBlock">
-				<template #prefix><i class="ph-key ph-bold ph-lg"></i></template>
-				<template #label>Client ID</template>
-			</FormInput>
+			<template v-if="enableGithubIntegration">
+				<FormInfo class="_formBlock"
+					>Callback URL: {{ `${uri}/api/gh/cb` }}</FormInfo
+				>
 
-			<FormInput v-model="githubClientSecret" class="_formBlock">
-				<template #prefix><i class="ph-key ph-bold ph-lg"></i></template>
-				<template #label>Client Secret</template>
-			</FormInput>
-		</template>
+				<FormInput v-model="githubClientId" class="_formBlock">
+					<template #prefix
+						><i class="ph-key ph-bold ph-lg"></i
+					></template>
+					<template #label>Client ID</template>
+				</FormInput>
 
-		<FormButton primary class="_formBlock" @click="save"><i class="ph-floppy-disk-back ph-bold ph-lg"></i> {{ i18n.ts.save }}</FormButton>
-	</div>
-</FormSuspense>
+				<FormInput v-model="githubClientSecret" class="_formBlock">
+					<template #prefix
+						><i class="ph-key ph-bold ph-lg"></i
+					></template>
+					<template #label>Client Secret</template>
+				</FormInput>
+			</template>
+
+			<FormButton primary class="_formBlock" @click="save"
+				><i class="ph-floppy-disk-back ph-bold ph-lg"></i>
+				{{ i18n.ts.save }}</FormButton
+			>
+		</div>
+	</FormSuspense>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import FormSwitch from '@/components/form/switch.vue';
-import FormInput from '@/components/form/input.vue';
-import FormButton from '@/components/MkButton.vue';
-import FormInfo from '@/components/MkInfo.vue';
-import FormSuspense from '@/components/form/suspense.vue';
-import * as os from '@/os';
-import { fetchInstance } from '@/instance';
-import { i18n } from '@/i18n';
+import {} from "vue";
+import FormSwitch from "@/components/form/switch.vue";
+import FormInput from "@/components/form/input.vue";
+import FormButton from "@/components/MkButton.vue";
+import FormInfo from "@/components/MkInfo.vue";
+import FormSuspense from "@/components/form/suspense.vue";
+import * as os from "@/os";
+import { fetchInstance } from "@/instance";
+import { i18n } from "@/i18n";
 
-let uri: string = $ref('');
+let uri: string = $ref("");
 let enableGithubIntegration: boolean = $ref(false);
 let githubClientId: string | null = $ref(null);
 let githubClientSecret: string | null = $ref(null);
 
 async function init() {
-	const meta = await os.api('admin/meta');
+	const meta = await os.api("admin/meta");
 	uri = meta.uri;
 	enableGithubIntegration = meta.enableGithubIntegration;
 	githubClientId = meta.githubClientId;
@@ -49,7 +58,7 @@ async function init() {
 }
 
 function save() {
-	os.apiWithDialog('admin/update-meta', {
+	os.apiWithDialog("admin/update-meta", {
 		enableGithubIntegration,
 		githubClientId,
 		githubClientSecret,
diff --git a/packages/client/src/pages/admin/integrations.vue b/packages/client/src/pages/admin/integrations.vue
index a4d786b6f5..510b32a08d 100644
--- a/packages/client/src/pages/admin/integrations.vue
+++ b/packages/client/src/pages/admin/integrations.vue
@@ -1,41 +1,58 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs" :display-back-button="true"/></template>
-	<MkSpacer :content-max="700" :margin-min="16" :margin-max="32">
-		<FormSuspense :p="init">
-			<FormFolder class="_formBlock">
-				<template #icon><i class="ph-github-logo ph-bold ph-lg"></i></template>
-				<template #label>GitHub</template>
-				<template #suffix>{{ enableGithubIntegration ? i18n.ts.enabled : i18n.ts.disabled }}</template>
-				<XGithub/>
-			</FormFolder>
-			<FormFolder class="_formBlock">
-				<template #icon><i class="ph-discord-logo ph-bold ph-lg"></i></template>
-				<template #label>Discord</template>
-				<template #suffix>{{ enableDiscordIntegration ? i18n.ts.enabled : i18n.ts.disabled }}</template>
-				<XDiscord/>
-			</FormFolder>
-		</FormSuspense>
-	</MkSpacer>
-</MkStickyContainer>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader
+				:actions="headerActions"
+				:tabs="headerTabs"
+				:display-back-button="true"
+		/></template>
+		<MkSpacer :content-max="700" :margin-min="16" :margin-max="32">
+			<FormSuspense :p="init">
+				<FormFolder class="_formBlock">
+					<template #icon
+						><i class="ph-github-logo ph-bold ph-lg"></i
+					></template>
+					<template #label>GitHub</template>
+					<template #suffix>{{
+						enableGithubIntegration
+							? i18n.ts.enabled
+							: i18n.ts.disabled
+					}}</template>
+					<XGithub />
+				</FormFolder>
+				<FormFolder class="_formBlock">
+					<template #icon
+						><i class="ph-discord-logo ph-bold ph-lg"></i
+					></template>
+					<template #label>Discord</template>
+					<template #suffix>{{
+						enableDiscordIntegration
+							? i18n.ts.enabled
+							: i18n.ts.disabled
+					}}</template>
+					<XDiscord />
+				</FormFolder>
+			</FormSuspense>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import XGithub from './integrations.github.vue';
-import XDiscord from './integrations.discord.vue';
-import FormSuspense from '@/components/form/suspense.vue';
-import FormFolder from '@/components/form/folder.vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import {} from "vue";
+import XGithub from "./integrations.github.vue";
+import XDiscord from "./integrations.discord.vue";
+import FormSuspense from "@/components/form/suspense.vue";
+import FormFolder from "@/components/form/folder.vue";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
 let enableTwitterIntegration: boolean = $ref(false);
 let enableGithubIntegration: boolean = $ref(false);
 let enableDiscordIntegration: boolean = $ref(false);
 
 async function init() {
-	const meta = await os.api('admin/meta');
+	const meta = await os.api("admin/meta");
 	enableTwitterIntegration = meta.enableTwitterIntegration;
 	enableGithubIntegration = meta.enableGithubIntegration;
 	enableDiscordIntegration = meta.enableDiscordIntegration;
@@ -47,6 +64,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.integration,
-	icon: 'ph-plug ph-bold ph-lg',
+	icon: "ph-plug ph-bold ph-lg",
 });
 </script>
diff --git a/packages/client/src/pages/admin/metrics.vue b/packages/client/src/pages/admin/metrics.vue
index 071e5ebe70..d0b9de74bc 100644
--- a/packages/client/src/pages/admin/metrics.vue
+++ b/packages/client/src/pages/admin/metrics.vue
@@ -1,57 +1,111 @@
 <template>
-<div class="_debobigegoItem">
-	<div class="_debobigegoLabel"><i class="ph-microchip ph-bold ph-lg"></i> {{ i18n.ts.cpuAndMemory }}</div>
-	<div class="_debobigegoPanel xhexznfu">
-		<div>
-			<canvas :ref="cpumem"></canvas>
+	<div class="_debobigegoItem">
+		<div class="_debobigegoLabel">
+			<i class="ph-microchip ph-bold ph-lg"></i>
+			{{ i18n.ts.cpuAndMemory }}
 		</div>
-		<div v-if="serverInfo">
-			<div class="_table">
-				<div class="_row">
-					<div class="_cell"><div class="_label">MEM total</div>{{ bytes(serverInfo.mem.total) }}</div>
-					<div class="_cell"><div class="_label">MEM used</div>{{ bytes(memUsage) }} ({{ (memUsage / serverInfo.mem.total * 100).toFixed(0) }}%)</div>
-					<div class="_cell"><div class="_label">MEM free</div>{{ bytes(serverInfo.mem.total - memUsage) }} ({{ ((serverInfo.mem.total - memUsage) / serverInfo.mem.total * 100).toFixed(0) }}%)</div>
+		<div class="_debobigegoPanel xhexznfu">
+			<div>
+				<canvas :ref="cpumem"></canvas>
+			</div>
+			<div v-if="serverInfo">
+				<div class="_table">
+					<div class="_row">
+						<div class="_cell">
+							<div class="_label">MEM total</div>
+							{{ bytes(serverInfo.mem.total) }}
+						</div>
+						<div class="_cell">
+							<div class="_label">MEM used</div>
+							{{ bytes(memUsage) }} ({{
+								(
+									(memUsage / serverInfo.mem.total) *
+									100
+								).toFixed(0)
+							}}%)
+						</div>
+						<div class="_cell">
+							<div class="_label">MEM free</div>
+							{{ bytes(serverInfo.mem.total - memUsage) }} ({{
+								(
+									((serverInfo.mem.total - memUsage) /
+										serverInfo.mem.total) *
+									100
+								).toFixed(0)
+							}}%)
+						</div>
+					</div>
 				</div>
 			</div>
 		</div>
 	</div>
-</div>
-<div class="_debobigegoItem">
-	<div class="_debobigegoLabel"><i class="ph-hard-drives ph-bold ph-lg"></i> {{ i18n.ts.disk }}</div>
-	<div class="_debobigegoPanel xhexznfu">
-		<div>
-			<canvas :ref="disk"></canvas>
+	<div class="_debobigegoItem">
+		<div class="_debobigegoLabel">
+			<i class="ph-hard-drives ph-bold ph-lg"></i> {{ i18n.ts.disk }}
 		</div>
-		<div v-if="serverInfo">
-			<div class="_table">
-				<div class="_row">
-					<div class="_cell"><div class="_label">Disk total</div>{{ bytes(serverInfo.fs.total) }}</div>
-					<div class="_cell"><div class="_label">Disk used</div>{{ bytes(serverInfo.fs.used) }} ({{ (serverInfo.fs.used / serverInfo.fs.total * 100).toFixed(0) }}%)</div>
-					<div class="_cell"><div class="_label">Disk free</div>{{ bytes(serverInfo.fs.total - serverInfo.fs.used) }} ({{ ((serverInfo.fs.total - serverInfo.fs.used) / serverInfo.fs.total * 100).toFixed(0) }}%)</div>
+		<div class="_debobigegoPanel xhexznfu">
+			<div>
+				<canvas :ref="disk"></canvas>
+			</div>
+			<div v-if="serverInfo">
+				<div class="_table">
+					<div class="_row">
+						<div class="_cell">
+							<div class="_label">Disk total</div>
+							{{ bytes(serverInfo.fs.total) }}
+						</div>
+						<div class="_cell">
+							<div class="_label">Disk used</div>
+							{{ bytes(serverInfo.fs.used) }} ({{
+								(
+									(serverInfo.fs.used / serverInfo.fs.total) *
+									100
+								).toFixed(0)
+							}}%)
+						</div>
+						<div class="_cell">
+							<div class="_label">Disk free</div>
+							{{
+								bytes(serverInfo.fs.total - serverInfo.fs.used)
+							}}
+							({{
+								(
+									((serverInfo.fs.total -
+										serverInfo.fs.used) /
+										serverInfo.fs.total) *
+									100
+								).toFixed(0)
+							}}%)
+						</div>
+					</div>
 				</div>
 			</div>
 		</div>
 	</div>
-</div>
-<div class="_debobigegoItem">
-	<div class="_debobigegoLabel"><i class="ph-swap ph-bold ph-lg"></i> {{ i18n.ts.network }}</div>
-	<div class="_debobigegoPanel xhexznfu">
-		<div>
-			<canvas :ref="net"></canvas>
+	<div class="_debobigegoItem">
+		<div class="_debobigegoLabel">
+			<i class="ph-swap ph-bold ph-lg"></i> {{ i18n.ts.network }}
 		</div>
-		<div v-if="serverInfo">
-			<div class="_table">
-				<div class="_row">
-					<div class="_cell"><div class="_label">Interface</div>{{ serverInfo.net.interface }}</div>
+		<div class="_debobigegoPanel xhexznfu">
+			<div>
+				<canvas :ref="net"></canvas>
+			</div>
+			<div v-if="serverInfo">
+				<div class="_table">
+					<div class="_row">
+						<div class="_cell">
+							<div class="_label">Interface</div>
+							{{ serverInfo.net.interface }}
+						</div>
+					</div>
 				</div>
 			</div>
 		</div>
 	</div>
-</div>
 </template>
 
 <script lang="ts">
-import { defineComponent, markRaw } from 'vue';
+import { defineComponent, markRaw } from "vue";
 import {
 	Chart,
 	ArcElement,
@@ -66,17 +120,17 @@ import {
 	Title,
 	Tooltip,
 	SubTitle,
-} from 'chart.js';
-import MkwFederation from '../../widgets/federation.vue';
-import MkButton from '@/components/MkButton.vue';
-import MkSelect from '@/components/form/select.vue';
-import MkInput from '@/components/form/input.vue';
-import MkContainer from '@/components/MkContainer.vue';
-import MkFolder from '@/components/MkFolder.vue';
-import { version, url } from '@/config';
-import bytes from '@/filters/bytes';
-import number from '@/filters/number';
-import { i18n } from '@/i18n';
+} from "chart.js";
+import MkwFederation from "../../widgets/federation.vue";
+import MkButton from "@/components/MkButton.vue";
+import MkSelect from "@/components/form/select.vue";
+import MkInput from "@/components/form/input.vue";
+import MkContainer from "@/components/MkContainer.vue";
+import MkFolder from "@/components/MkFolder.vue";
+import { version, url } from "@/config";
+import bytes from "@/filters/bytes";
+import number from "@/filters/number";
+import { i18n } from "@/i18n";
 
 Chart.register(
 	ArcElement,
@@ -90,7 +144,7 @@ Chart.register(
 	Legend,
 	Title,
 	Tooltip,
-	SubTitle,
+	SubTitle
 );
 
 const alpha = (hex, a) => {
@@ -100,8 +154,8 @@ const alpha = (hex, a) => {
 	const b = parseInt(result[3], 16);
 	return `rgba(${r}, ${g}, ${b}, ${a})`;
 };
-import * as os from '@/os';
-import { stream } from '@/stream';
+import * as os from "@/os";
+import { stream } from "@/stream";
 
 export default defineComponent({
 	components: {
@@ -120,18 +174,18 @@ export default defineComponent({
 			stats: null,
 			serverInfo: null,
 			connection: null,
-			queueConnection: markRaw(stream.useChannel('queueStats')),
+			queueConnection: markRaw(stream.useChannel("queueStats")),
 			memUsage: 0,
 			chartCpuMem: null,
 			chartNet: null,
 			jobs: [],
 			logs: [],
-			logLevel: 'all',
-			logDomain: '',
+			logLevel: "all",
+			logDomain: "",
 			modLogs: [],
 			dbInfo: null,
-			overviewHeight: '1fr',
-			queueHeight: '1fr',
+			overviewHeight: "1fr",
+			queueHeight: "1fr",
 			paused: false,
 			i18n,
 		};
@@ -140,28 +194,32 @@ export default defineComponent({
 	computed: {
 		gridColor() {
 			// TODO: var(--panel)の色が暗いか明るいかで判定する
-			return this.$store.state.darkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';
+			return this.$store.state.darkMode
+				? "rgba(255, 255, 255, 0.1)"
+				: "rgba(0, 0, 0, 0.1)";
 		},
 	},
 
 	mounted() {
 		this.fetchJobs();
 
-		Chart.defaults.color = getComputedStyle(document.documentElement).getPropertyValue('--fg');
+		Chart.defaults.color = getComputedStyle(
+			document.documentElement
+		).getPropertyValue("--fg");
 
-		os.api('admin/server-info', {}).then(res => {
+		os.api("admin/server-info", {}).then((res) => {
 			this.serverInfo = res;
 
-			this.connection = markRaw(stream.useChannel('serverStats'));
-			this.connection.on('stats', this.onStats);
-			this.connection.on('statsLog', this.onStatsLog);
-			this.connection.send('requestLog', {
+			this.connection = markRaw(stream.useChannel("serverStats"));
+			this.connection.on("stats", this.onStats);
+			this.connection.on("statsLog", this.onStatsLog);
+			this.connection.send("requestLog", {
 				id: Math.random().toString().substr(2, 8),
 				length: 150,
 			});
 
 			this.$nextTick(() => {
-				this.queueConnection.send('requestLog', {
+				this.queueConnection.send("requestLog", {
 					id: Math.random().toString().substr(2, 8),
 					length: 200,
 				});
@@ -171,8 +229,8 @@ export default defineComponent({
 
 	beforeUnmount() {
 		if (this.connection) {
-			this.connection.off('stats', this.onStats);
-			this.connection.off('statsLog', this.onStatsLog);
+			this.connection.off("stats", this.onStats);
+			this.connection.off("statsLog", this.onStatsLog);
 			this.connection.dispose();
 		}
 		this.queueConnection.dispose();
@@ -181,229 +239,245 @@ export default defineComponent({
 	methods: {
 		cpumem(el) {
 			if (this.chartCpuMem != null) return;
-			this.chartCpuMem = markRaw(new Chart(el, {
-				type: 'line',
-				data: {
-					labels: [],
-					datasets: [{
-						label: 'CPU',
-						pointRadius: 0,
-						tension: 0,
-						borderWidth: 2,
-						borderColor: '#31748f',
-						backgroundColor: alpha('#31748f', 0.1),
-						data: [],
-					}, {
-						label: 'MEM (active)',
-						pointRadius: 0,
-						tension: 0,
-						borderWidth: 2,
-						borderColor: '#c4a7e7',
-						backgroundColor: alpha('#c4a7e7', 0.02),
-						data: [],
-					}, {
-						label: 'MEM (used)',
-						pointRadius: 0,
-						tension: 0,
-						borderWidth: 2,
-						borderColor: '#ebbcba',
-						borderDash: [5, 5],
-						fill: false,
-						data: [],
-					}],
-				},
-				options: {
-					aspectRatio: 3,
-					layout: {
-						padding: {
-							left: 16,
-							right: 16,
-							top: 16,
-							bottom: 0,
-						},
-					},
-					legend: {
-						position: 'bottom',
-						labels: {
-							boxWidth: 16,
-						},
-					},
-					scales: {
-						x: {
-							gridLines: {
-								display: false,
-								color: this.gridColor,
-								zeroLineColor: this.gridColor,
+			this.chartCpuMem = markRaw(
+				new Chart(el, {
+					type: "line",
+					data: {
+						labels: [],
+						datasets: [
+							{
+								label: "CPU",
+								pointRadius: 0,
+								tension: 0,
+								borderWidth: 2,
+								borderColor: "#31748f",
+								backgroundColor: alpha("#31748f", 0.1),
+								data: [],
 							},
-							ticks: {
-								display: false,
+							{
+								label: "MEM (active)",
+								pointRadius: 0,
+								tension: 0,
+								borderWidth: 2,
+								borderColor: "#c4a7e7",
+								backgroundColor: alpha("#c4a7e7", 0.02),
+								data: [],
+							},
+							{
+								label: "MEM (used)",
+								pointRadius: 0,
+								tension: 0,
+								borderWidth: 2,
+								borderColor: "#ebbcba",
+								borderDash: [5, 5],
+								fill: false,
+								data: [],
+							},
+						],
+					},
+					options: {
+						aspectRatio: 3,
+						layout: {
+							padding: {
+								left: 16,
+								right: 16,
+								top: 16,
+								bottom: 0,
 							},
 						},
-						y: {
-							position: 'right',
-							gridLines: {
-								display: true,
-								color: this.gridColor,
-								zeroLineColor: this.gridColor,
-							},
-							ticks: {
-								display: false,
-								max: 100,
+						legend: {
+							position: "bottom",
+							labels: {
+								boxWidth: 16,
 							},
 						},
+						scales: {
+							x: {
+								gridLines: {
+									display: false,
+									color: this.gridColor,
+									zeroLineColor: this.gridColor,
+								},
+								ticks: {
+									display: false,
+								},
+							},
+							y: {
+								position: "right",
+								gridLines: {
+									display: true,
+									color: this.gridColor,
+									zeroLineColor: this.gridColor,
+								},
+								ticks: {
+									display: false,
+									max: 100,
+								},
+							},
+						},
+						tooltips: {
+							intersect: false,
+							mode: "index",
+						},
 					},
-					tooltips: {
-						intersect: false,
-						mode: 'index',
-					},
-				},
-			}));
+				})
+			);
 		},
 
 		net(el) {
 			if (this.chartNet != null) return;
-			this.chartNet = markRaw(new Chart(el, {
-				type: 'line',
-				data: {
-					labels: [],
-					datasets: [{
-						label: 'In',
-						pointRadius: 0,
-						tension: 0,
-						borderWidth: 2,
-						borderColor: '#94a029',
-						backgroundColor: alpha('#94a029', 0.1),
-						data: [],
-					}, {
-						label: 'Out',
-						pointRadius: 0,
-						tension: 0,
-						borderWidth: 2,
-						borderColor: '#ff9156',
-						backgroundColor: alpha('#ff9156', 0.1),
-						data: [],
-					}],
-				},
-				options: {
-					aspectRatio: 3,
-					layout: {
-						padding: {
-							left: 16,
-							right: 16,
-							top: 16,
-							bottom: 0,
-						},
-					},
-					legend: {
-						position: 'bottom',
-						labels: {
-							boxWidth: 16,
-						},
-					},
-					scales: {
-						x: {
-							gridLines: {
-								display: false,
-								color: this.gridColor,
-								zeroLineColor: this.gridColor,
+			this.chartNet = markRaw(
+				new Chart(el, {
+					type: "line",
+					data: {
+						labels: [],
+						datasets: [
+							{
+								label: "In",
+								pointRadius: 0,
+								tension: 0,
+								borderWidth: 2,
+								borderColor: "#94a029",
+								backgroundColor: alpha("#94a029", 0.1),
+								data: [],
 							},
-							ticks: {
-								display: false,
+							{
+								label: "Out",
+								pointRadius: 0,
+								tension: 0,
+								borderWidth: 2,
+								borderColor: "#ff9156",
+								backgroundColor: alpha("#ff9156", 0.1),
+								data: [],
+							},
+						],
+					},
+					options: {
+						aspectRatio: 3,
+						layout: {
+							padding: {
+								left: 16,
+								right: 16,
+								top: 16,
+								bottom: 0,
 							},
 						},
-						y: {
-							position: 'right',
-							gridLines: {
-								display: true,
-								color: this.gridColor,
-								zeroLineColor: this.gridColor,
-							},
-							ticks: {
-								display: false,
+						legend: {
+							position: "bottom",
+							labels: {
+								boxWidth: 16,
 							},
 						},
+						scales: {
+							x: {
+								gridLines: {
+									display: false,
+									color: this.gridColor,
+									zeroLineColor: this.gridColor,
+								},
+								ticks: {
+									display: false,
+								},
+							},
+							y: {
+								position: "right",
+								gridLines: {
+									display: true,
+									color: this.gridColor,
+									zeroLineColor: this.gridColor,
+								},
+								ticks: {
+									display: false,
+								},
+							},
+						},
+						tooltips: {
+							intersect: false,
+							mode: "index",
+						},
 					},
-					tooltips: {
-						intersect: false,
-						mode: 'index',
-					},
-				},
-			}));
+				})
+			);
 		},
 
 		disk(el) {
 			if (this.chartDisk != null) return;
-			this.chartDisk = markRaw(new Chart(el, {
-				type: 'line',
-				data: {
-					labels: [],
-					datasets: [{
-						label: 'Read',
-						pointRadius: 0,
-						tension: 0,
-						borderWidth: 2,
-						borderColor: '#94a029',
-						backgroundColor: alpha('#94a029', 0.1),
-						data: [],
-					}, {
-						label: 'Write',
-						pointRadius: 0,
-						tension: 0,
-						borderWidth: 2,
-						borderColor: '#ff9156',
-						backgroundColor: alpha('#ff9156', 0.1),
-						data: [],
-					}],
-				},
-				options: {
-					aspectRatio: 3,
-					layout: {
-						padding: {
-							left: 16,
-							right: 16,
-							top: 16,
-							bottom: 0,
-						},
-					},
-					legend: {
-						position: 'bottom',
-						labels: {
-							boxWidth: 16,
-						},
-					},
-					scales: {
-						x: {
-							gridLines: {
-								display: false,
-								color: this.gridColor,
-								zeroLineColor: this.gridColor,
+			this.chartDisk = markRaw(
+				new Chart(el, {
+					type: "line",
+					data: {
+						labels: [],
+						datasets: [
+							{
+								label: "Read",
+								pointRadius: 0,
+								tension: 0,
+								borderWidth: 2,
+								borderColor: "#94a029",
+								backgroundColor: alpha("#94a029", 0.1),
+								data: [],
 							},
-							ticks: {
-								display: false,
+							{
+								label: "Write",
+								pointRadius: 0,
+								tension: 0,
+								borderWidth: 2,
+								borderColor: "#ff9156",
+								backgroundColor: alpha("#ff9156", 0.1),
+								data: [],
+							},
+						],
+					},
+					options: {
+						aspectRatio: 3,
+						layout: {
+							padding: {
+								left: 16,
+								right: 16,
+								top: 16,
+								bottom: 0,
 							},
 						},
-						y: {
-							position: 'right',
-							gridLines: {
-								display: true,
-								color: this.gridColor,
-								zeroLineColor: this.gridColor,
-							},
-							ticks: {
-								display: false,
+						legend: {
+							position: "bottom",
+							labels: {
+								boxWidth: 16,
 							},
 						},
+						scales: {
+							x: {
+								gridLines: {
+									display: false,
+									color: this.gridColor,
+									zeroLineColor: this.gridColor,
+								},
+								ticks: {
+									display: false,
+								},
+							},
+							y: {
+								position: "right",
+								gridLines: {
+									display: true,
+									color: this.gridColor,
+									zeroLineColor: this.gridColor,
+								},
+								ticks: {
+									display: false,
+								},
+							},
+						},
+						tooltips: {
+							intersect: false,
+							mode: "index",
+						},
 					},
-					tooltips: {
-						intersect: false,
-						mode: 'index',
-					},
-				},
-			}));
+				})
+			);
 		},
 
 		fetchJobs() {
-			os.api('admin/queue/deliver-delayed', {}).then(jobs => {
+			os.api("admin/queue/deliver-delayed", {}).then((jobs) => {
 				this.jobs = jobs;
 			});
 		},
@@ -412,18 +486,24 @@ export default defineComponent({
 			if (this.paused) return;
 
 			const cpu = (stats.cpu * 100).toFixed(0);
-			const memActive = (stats.mem.active / this.serverInfo.mem.total * 100).toFixed(0);
-			const memUsed = (stats.mem.used / this.serverInfo.mem.total * 100).toFixed(0);
+			const memActive = (
+				(stats.mem.active / this.serverInfo.mem.total) *
+				100
+			).toFixed(0);
+			const memUsed = (
+				(stats.mem.used / this.serverInfo.mem.total) *
+				100
+			).toFixed(0);
 			this.memUsage = stats.mem.active;
 
-			this.chartCpuMem.data.labels.push('');
+			this.chartCpuMem.data.labels.push("");
 			this.chartCpuMem.data.datasets[0].data.push(cpu);
 			this.chartCpuMem.data.datasets[1].data.push(memActive);
 			this.chartCpuMem.data.datasets[2].data.push(memUsed);
-			this.chartNet.data.labels.push('');
+			this.chartNet.data.labels.push("");
 			this.chartNet.data.datasets[0].data.push(stats.net.rx);
 			this.chartNet.data.datasets[1].data.push(stats.net.tx);
-			this.chartDisk.data.labels.push('');
+			this.chartDisk.data.labels.push("");
 			this.chartDisk.data.datasets[0].data.push(stats.fs.r);
 			this.chartDisk.data.datasets[1].data.push(stats.fs.w);
 			if (this.chartCpuMem.data.datasets[0].data.length > 150) {
diff --git a/packages/client/src/pages/admin/object-storage.vue b/packages/client/src/pages/admin/object-storage.vue
index 2847b10a63..46760b8168 100644
--- a/packages/client/src/pages/admin/object-storage.vue
+++ b/packages/client/src/pages/admin/object-storage.vue
@@ -1,84 +1,158 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs" :display-back-button="true"/></template>
-	<MkSpacer :content-max="700" :margin-min="16" :margin-max="32">
-		<FormSuspense :p="init">
-			<div class="_formRoot">
-				<FormSwitch v-model="useObjectStorage" class="_formBlock">{{ i18n.ts.useObjectStorage }}</FormSwitch>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader
+				:actions="headerActions"
+				:tabs="headerTabs"
+				:display-back-button="true"
+		/></template>
+		<MkSpacer :content-max="700" :margin-min="16" :margin-max="32">
+			<FormSuspense :p="init">
+				<div class="_formRoot">
+					<FormSwitch v-model="useObjectStorage" class="_formBlock">{{
+						i18n.ts.useObjectStorage
+					}}</FormSwitch>
 
-				<template v-if="useObjectStorage">
-					<FormInput v-model="objectStorageBaseUrl" class="_formBlock">
-						<template #label>{{ i18n.ts.objectStorageBaseUrl }}</template>
-						<template #caption>{{ i18n.ts.objectStorageBaseUrlDesc }}</template>
-					</FormInput>
-
-					<FormInput v-model="objectStorageBucket" class="_formBlock">
-						<template #label>{{ i18n.ts.objectStorageBucket }}</template>
-						<template #caption>{{ i18n.ts.objectStorageBucketDesc }}</template>
-					</FormInput>
-
-					<FormInput v-model="objectStoragePrefix" class="_formBlock">
-						<template #label>{{ i18n.ts.objectStoragePrefix }}</template>
-						<template #caption>{{ i18n.ts.objectStoragePrefixDesc }}</template>
-					</FormInput>
-
-					<FormInput v-model="objectStorageEndpoint" class="_formBlock">
-						<template #label>{{ i18n.ts.objectStorageEndpoint }}</template>
-						<template #caption>{{ i18n.ts.objectStorageEndpointDesc }}</template>
-					</FormInput>
-
-					<FormInput v-model="objectStorageRegion" class="_formBlock">
-						<template #label>{{ i18n.ts.objectStorageRegion }}</template>
-						<template #caption>{{ i18n.ts.objectStorageRegionDesc }}</template>
-					</FormInput>
-
-					<FormSplit :min-width="280">
-						<FormInput v-model="objectStorageAccessKey" class="_formBlock">
-							<template #prefix><i class="ph-key ph-bold ph-lg"></i></template>
-							<template #label>Access key</template>
+					<template v-if="useObjectStorage">
+						<FormInput
+							v-model="objectStorageBaseUrl"
+							class="_formBlock"
+						>
+							<template #label>{{
+								i18n.ts.objectStorageBaseUrl
+							}}</template>
+							<template #caption>{{
+								i18n.ts.objectStorageBaseUrlDesc
+							}}</template>
 						</FormInput>
 
-						<FormInput v-model="objectStorageSecretKey" class="_formBlock">
-							<template #prefix><i class="ph-key ph-bold ph-lg"></i></template>
-							<template #label>Secret key</template>
+						<FormInput
+							v-model="objectStorageBucket"
+							class="_formBlock"
+						>
+							<template #label>{{
+								i18n.ts.objectStorageBucket
+							}}</template>
+							<template #caption>{{
+								i18n.ts.objectStorageBucketDesc
+							}}</template>
 						</FormInput>
-					</FormSplit>
 
-					<FormSwitch v-model="objectStorageUseSSL" class="_formBlock">
-						<template #label>{{ i18n.ts.objectStorageUseSSL }}</template>
-						<template #caption>{{ i18n.ts.objectStorageUseSSLDesc }}</template>
-					</FormSwitch>
+						<FormInput
+							v-model="objectStoragePrefix"
+							class="_formBlock"
+						>
+							<template #label>{{
+								i18n.ts.objectStoragePrefix
+							}}</template>
+							<template #caption>{{
+								i18n.ts.objectStoragePrefixDesc
+							}}</template>
+						</FormInput>
 
-					<FormSwitch v-model="objectStorageUseProxy" class="_formBlock">
-						<template #label>{{ i18n.ts.objectStorageUseProxy }}</template>
-						<template #caption>{{ i18n.ts.objectStorageUseProxyDesc }}</template>
-					</FormSwitch>
+						<FormInput
+							v-model="objectStorageEndpoint"
+							class="_formBlock"
+						>
+							<template #label>{{
+								i18n.ts.objectStorageEndpoint
+							}}</template>
+							<template #caption>{{
+								i18n.ts.objectStorageEndpointDesc
+							}}</template>
+						</FormInput>
 
-					<FormSwitch v-model="objectStorageSetPublicRead" class="_formBlock">
-						<template #label>{{ i18n.ts.objectStorageSetPublicRead }}</template>
-					</FormSwitch>
+						<FormInput
+							v-model="objectStorageRegion"
+							class="_formBlock"
+						>
+							<template #label>{{
+								i18n.ts.objectStorageRegion
+							}}</template>
+							<template #caption>{{
+								i18n.ts.objectStorageRegionDesc
+							}}</template>
+						</FormInput>
 
-					<FormSwitch v-model="objectStorageS3ForcePathStyle" class="_formBlock">
-						<template #label>s3ForcePathStyle</template>
-					</FormSwitch>
-				</template>
-			</div>
-		</FormSuspense>
-	</MkSpacer>
-</MkStickyContainer>
+						<FormSplit :min-width="280">
+							<FormInput
+								v-model="objectStorageAccessKey"
+								class="_formBlock"
+							>
+								<template #prefix
+									><i class="ph-key ph-bold ph-lg"></i
+								></template>
+								<template #label>Access key</template>
+							</FormInput>
+
+							<FormInput
+								v-model="objectStorageSecretKey"
+								class="_formBlock"
+							>
+								<template #prefix
+									><i class="ph-key ph-bold ph-lg"></i
+								></template>
+								<template #label>Secret key</template>
+							</FormInput>
+						</FormSplit>
+
+						<FormSwitch
+							v-model="objectStorageUseSSL"
+							class="_formBlock"
+						>
+							<template #label>{{
+								i18n.ts.objectStorageUseSSL
+							}}</template>
+							<template #caption>{{
+								i18n.ts.objectStorageUseSSLDesc
+							}}</template>
+						</FormSwitch>
+
+						<FormSwitch
+							v-model="objectStorageUseProxy"
+							class="_formBlock"
+						>
+							<template #label>{{
+								i18n.ts.objectStorageUseProxy
+							}}</template>
+							<template #caption>{{
+								i18n.ts.objectStorageUseProxyDesc
+							}}</template>
+						</FormSwitch>
+
+						<FormSwitch
+							v-model="objectStorageSetPublicRead"
+							class="_formBlock"
+						>
+							<template #label>{{
+								i18n.ts.objectStorageSetPublicRead
+							}}</template>
+						</FormSwitch>
+
+						<FormSwitch
+							v-model="objectStorageS3ForcePathStyle"
+							class="_formBlock"
+						>
+							<template #label>s3ForcePathStyle</template>
+						</FormSwitch>
+					</template>
+				</div>
+			</FormSuspense>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import FormSwitch from '@/components/form/switch.vue';
-import FormInput from '@/components/form/input.vue';
-import FormSuspense from '@/components/form/suspense.vue';
-import FormSplit from '@/components/form/split.vue';
-import FormSection from '@/components/form/section.vue';
-import * as os from '@/os';
-import { fetchInstance } from '@/instance';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import {} from "vue";
+import FormSwitch from "@/components/form/switch.vue";
+import FormInput from "@/components/form/input.vue";
+import FormSuspense from "@/components/form/suspense.vue";
+import FormSplit from "@/components/form/split.vue";
+import FormSection from "@/components/form/section.vue";
+import * as os from "@/os";
+import { fetchInstance } from "@/instance";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
 let useObjectStorage: boolean = $ref(false);
 let objectStorageBaseUrl: string | null = $ref(null);
@@ -95,7 +169,7 @@ let objectStorageSetPublicRead: boolean = $ref(false);
 let objectStorageS3ForcePathStyle: boolean = $ref(true);
 
 async function init() {
-	const meta = await os.api('admin/meta');
+	const meta = await os.api("admin/meta");
 	useObjectStorage = meta.useObjectStorage;
 	objectStorageBaseUrl = meta.objectStorageBaseUrl;
 	objectStorageBucket = meta.objectStorageBucket;
@@ -112,7 +186,7 @@ async function init() {
 }
 
 function save() {
-	os.apiWithDialog('admin/update-meta', {
+	os.apiWithDialog("admin/update-meta", {
 		useObjectStorage,
 		objectStorageBaseUrl,
 		objectStorageBucket,
@@ -131,17 +205,19 @@ function save() {
 	});
 }
 
-const headerActions = $computed(() => [{
-	asFullButton: true,
-	icon: 'ph-check ph-bold ph-lg',
-	text: i18n.ts.save,
-	handler: save,
-}]);
+const headerActions = $computed(() => [
+	{
+		asFullButton: true,
+		icon: "ph-check ph-bold ph-lg",
+		text: i18n.ts.save,
+		handler: save,
+	},
+]);
 
 const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.objectStorage,
-	icon: 'ph-cloud ph-bold ph-lg',
+	icon: "ph-cloud ph-bold ph-lg",
 });
 </script>
diff --git a/packages/client/src/pages/admin/other-settings.vue b/packages/client/src/pages/admin/other-settings.vue
index 140ca4f557..1d74e752a0 100644
--- a/packages/client/src/pages/admin/other-settings.vue
+++ b/packages/client/src/pages/admin/other-settings.vue
@@ -1,43 +1,48 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs" :display-back-button="true"/></template>
-	<MkSpacer :content-max="700" :margin-min="16" :margin-max="32">
-		<FormSuspense :p="init">
-			none
-		</FormSuspense>
-	</MkSpacer>
-</MkStickyContainer>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader
+				:actions="headerActions"
+				:tabs="headerTabs"
+				:display-back-button="true"
+		/></template>
+		<MkSpacer :content-max="700" :margin-min="16" :margin-max="32">
+			<FormSuspense :p="init"> none </FormSuspense>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import FormSuspense from '@/components/form/suspense.vue';
-import * as os from '@/os';
-import { fetchInstance } from '@/instance';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import {} from "vue";
+import FormSuspense from "@/components/form/suspense.vue";
+import * as os from "@/os";
+import { fetchInstance } from "@/instance";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
 async function init() {
-	await os.api('admin/meta');
+	await os.api("admin/meta");
 }
 
 function save() {
-	os.apiWithDialog('admin/update-meta').then(() => {
+	os.apiWithDialog("admin/update-meta").then(() => {
 		fetchInstance();
 	});
 }
 
-const headerActions = $computed(() => [{
-	asFullButton: true,
-	icon: 'ph-check ph-bold ph-lg',
-	text: i18n.ts.save,
-	handler: save,
-}]);
+const headerActions = $computed(() => [
+	{
+		asFullButton: true,
+		icon: "ph-check ph-bold ph-lg",
+		text: i18n.ts.save,
+		handler: save,
+	},
+]);
 
 const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.other,
-	icon: 'ph-gear-six ph-bold ph-lg',
+	icon: "ph-gear-six ph-bold ph-lg",
 });
 </script>
diff --git a/packages/client/src/pages/admin/overview.active-users.vue b/packages/client/src/pages/admin/overview.active-users.vue
index ee8f42c432..25dcac494d 100644
--- a/packages/client/src/pages/admin/overview.active-users.vue
+++ b/packages/client/src/pages/admin/overview.active-users.vue
@@ -1,23 +1,29 @@
 <template>
-<div>
-	<MkLoading v-if="fetching"/>
-	<div v-show="!fetching" :class="$style.root" class="_panel">
-		<canvas ref="chartEl"></canvas>
+	<div>
+		<MkLoading v-if="fetching" />
+		<div v-show="!fetching" :class="$style.root" class="_panel">
+			<canvas ref="chartEl"></canvas>
+		</div>
 	</div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { markRaw, version as vueVersion, onMounted, onBeforeUnmount, nextTick } from 'vue';
-import { Chart } from 'chart.js';
-import tinycolor from 'tinycolor2';
-import gradient from 'chartjs-plugin-gradient';
-import * as os from '@/os';
-import { defaultStore } from '@/store';
-import { useChartTooltip } from '@/scripts/use-chart-tooltip';
-import { chartVLine } from '@/scripts/chart-vline';
-import { alpha } from '@/scripts/color';
-import { initChart } from '@/scripts/init-chart';
+import {
+	markRaw,
+	version as vueVersion,
+	onMounted,
+	onBeforeUnmount,
+	nextTick,
+} from "vue";
+import { Chart } from "chart.js";
+import tinycolor from "tinycolor2";
+import gradient from "chartjs-plugin-gradient";
+import * as os from "@/os";
+import { defaultStore } from "@/store";
+import { useChartTooltip } from "@/scripts/use-chart-tooltip";
+import { chartVLine } from "@/scripts/chart-vline";
+import { alpha } from "@/scripts/color";
+import { initChart } from "@/scripts/init-chart";
 
 initChart();
 
@@ -49,43 +55,51 @@ async function renderChart() {
 		}));
 	};
 
-	const raw = await os.api('charts/active-users', { limit: chartLimit, span: 'day' });
+	const raw = await os.api("charts/active-users", {
+		limit: chartLimit,
+		span: "day",
+	});
 
-	const vLineColor = defaultStore.state.darkMode ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)';
+	const vLineColor = defaultStore.state.darkMode
+		? "rgba(255, 255, 255, 0.2)"
+		: "rgba(0, 0, 0, 0.2)";
 
-	const colorRead = '#eb6f92';
-	const colorWrite = '#f6c177';
+	const colorRead = "#eb6f92";
+	const colorWrite = "#f6c177";
 
 	const max = Math.max(...raw.read);
 
 	chartInstance = new Chart(chartEl, {
-		type: 'bar',
+		type: "bar",
 		data: {
-			datasets: [{
-				parsing: false,
-				label: 'Read',
-				data: format(raw.read).slice().reverse(),
-				pointRadius: 0,
-				borderWidth: 0,
-				borderJoinStyle: 'round',
-				borderRadius: 4,
-				backgroundColor: colorRead,
-				barPercentage: 0.7,
-				categoryPercentage: 0.5,
-				fill: true,
-			}, {
-				parsing: false,
-				label: 'Write',
-				data: format(raw.write).slice().reverse(),
-				pointRadius: 0,
-				borderWidth: 0,
-				borderJoinStyle: 'round',
-				borderRadius: 4,
-				backgroundColor: colorWrite,
-				barPercentage: 0.7,
-				categoryPercentage: 0.5,
-				fill: true,
-			}],
+			datasets: [
+				{
+					parsing: false,
+					label: "Read",
+					data: format(raw.read).slice().reverse(),
+					pointRadius: 0,
+					borderWidth: 0,
+					borderJoinStyle: "round",
+					borderRadius: 4,
+					backgroundColor: colorRead,
+					barPercentage: 0.7,
+					categoryPercentage: 0.5,
+					fill: true,
+				},
+				{
+					parsing: false,
+					label: "Write",
+					data: format(raw.write).slice().reverse(),
+					pointRadius: 0,
+					borderWidth: 0,
+					borderJoinStyle: "round",
+					borderRadius: 4,
+					backgroundColor: colorWrite,
+					barPercentage: 0.7,
+					categoryPercentage: 0.5,
+					fill: true,
+				},
+			],
 		},
 		options: {
 			aspectRatio: 2.5,
@@ -99,14 +113,14 @@ async function renderChart() {
 			},
 			scales: {
 				x: {
-					type: 'time',
+					type: "time",
 					offset: true,
 					time: {
 						stepSize: 1,
-						unit: 'day',
+						unit: "day",
 						displayFormats: {
-							day: 'M/d',
-							month: 'Y/M',
+							day: "M/d",
+							month: "Y/M",
 						},
 					},
 					grid: {
@@ -119,7 +133,7 @@ async function renderChart() {
 					},
 				},
 				y: {
-					position: 'left',
+					position: "left",
 					suggestedMax: 10,
 					grid: {
 						display: true,
@@ -132,7 +146,7 @@ async function renderChart() {
 			},
 			interaction: {
 				intersect: false,
-				mode: 'index',
+				mode: "index",
 			},
 			plugins: {
 				legend: {
@@ -140,7 +154,7 @@ async function renderChart() {
 				},
 				tooltip: {
 					enabled: false,
-					mode: 'index',
+					mode: "index",
 					animation: {
 						duration: 0,
 					},
diff --git a/packages/client/src/pages/admin/overview.ap-requests.vue b/packages/client/src/pages/admin/overview.ap-requests.vue
index e481465a1c..c655336e83 100644
--- a/packages/client/src/pages/admin/overview.ap-requests.vue
+++ b/packages/client/src/pages/admin/overview.ap-requests.vue
@@ -1,34 +1,34 @@
 <template>
-<div>
-	<MkLoading v-if="fetching"/>
-	<div v-show="!fetching" :class="$style.root">
-		<div class="charts _panel">
-			<div class="chart">
-				<canvas ref="chartEl2"></canvas>
-			</div>
-			<div class="chart">
-				<canvas ref="chartEl"></canvas>
+	<div>
+		<MkLoading v-if="fetching" />
+		<div v-show="!fetching" :class="$style.root">
+			<div class="charts _panel">
+				<div class="chart">
+					<canvas ref="chartEl2"></canvas>
+				</div>
+				<div class="chart">
+					<canvas ref="chartEl"></canvas>
+				</div>
 			</div>
 		</div>
 	</div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, ref } from 'vue';
-import { Chart } from 'chart.js';
-import gradient from 'chartjs-plugin-gradient';
-import tinycolor from 'tinycolor2';
-import MkMiniChart from '@/components/MkMiniChart.vue';
-import * as os from '@/os';
-import number from '@/filters/number';
-import MkNumberDiff from '@/components/MkNumberDiff.vue';
-import { i18n } from '@/i18n';
-import { useChartTooltip } from '@/scripts/use-chart-tooltip';
-import { chartVLine } from '@/scripts/chart-vline';
-import { defaultStore } from '@/store';
-import { alpha } from '@/scripts/color';
-import { initChart } from '@/scripts/init-chart';
+import { onMounted, onUnmounted, ref } from "vue";
+import { Chart } from "chart.js";
+import gradient from "chartjs-plugin-gradient";
+import tinycolor from "tinycolor2";
+import MkMiniChart from "@/components/MkMiniChart.vue";
+import * as os from "@/os";
+import number from "@/filters/number";
+import MkNumberDiff from "@/components/MkNumberDiff.vue";
+import { i18n } from "@/i18n";
+import { useChartTooltip } from "@/scripts/use-chart-tooltip";
+import { chartVLine } from "@/scripts/chart-vline";
+import { defaultStore } from "@/store";
+import { alpha } from "@/scripts/color";
+import { initChart } from "@/scripts/init-chart";
 
 initChart();
 
@@ -65,47 +65,55 @@ onMounted(async () => {
 		}));
 	};
 
-	const raw = await os.api('charts/ap-request', { limit: chartLimit, span: 'day' });
+	const raw = await os.api("charts/ap-request", {
+		limit: chartLimit,
+		span: "day",
+	});
 
-	const vLineColor = defaultStore.state.darkMode ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)';
-	const succColor = '#9ccfd8';
-	const failColor = '#f6c177';
+	const vLineColor = defaultStore.state.darkMode
+		? "rgba(255, 255, 255, 0.2)"
+		: "rgba(0, 0, 0, 0.2)";
+	const succColor = "#9ccfd8";
+	const failColor = "#f6c177";
 
 	const succMax = Math.max(...raw.deliverSucceeded);
 	const failMax = Math.max(...raw.deliverFailed);
 
 	new Chart(chartEl, {
-		type: 'line',
+		type: "line",
 		data: {
-			datasets: [{
-				stack: 'a',
-				parsing: false,
-				label: 'Out: Succ',
-				data: format(raw.deliverSucceeded).slice().reverse(),
-				tension: 0.3,
-				pointRadius: 0,
-				borderWidth: 2,
-				borderColor: succColor,
-				borderJoinStyle: 'round',
-				borderRadius: 4,
-				backgroundColor: alpha(succColor, 0.35),
-				fill: true,
-				clip: 8,
-			}, {
-				stack: 'a',
-				parsing: false,
-				label: 'Out: Fail',
-				data: formatMinus(raw.deliverFailed).slice().reverse(),
-				tension: 0.3,
-				pointRadius: 0,
-				borderWidth: 2,
-				borderColor: failColor,
-				borderJoinStyle: 'round',
-				borderRadius: 4,
-				backgroundColor: alpha(failColor, 0.35),
-				fill: true,
-				clip: 8,
-			}],
+			datasets: [
+				{
+					stack: "a",
+					parsing: false,
+					label: "Out: Succ",
+					data: format(raw.deliverSucceeded).slice().reverse(),
+					tension: 0.3,
+					pointRadius: 0,
+					borderWidth: 2,
+					borderColor: succColor,
+					borderJoinStyle: "round",
+					borderRadius: 4,
+					backgroundColor: alpha(succColor, 0.35),
+					fill: true,
+					clip: 8,
+				},
+				{
+					stack: "a",
+					parsing: false,
+					label: "Out: Fail",
+					data: formatMinus(raw.deliverFailed).slice().reverse(),
+					tension: 0.3,
+					pointRadius: 0,
+					borderWidth: 2,
+					borderColor: failColor,
+					borderJoinStyle: "round",
+					borderRadius: 4,
+					backgroundColor: alpha(failColor, 0.35),
+					fill: true,
+					clip: 8,
+				},
+			],
 		},
 		options: {
 			aspectRatio: 2.5,
@@ -119,12 +127,12 @@ onMounted(async () => {
 			},
 			scales: {
 				x: {
-					type: 'time',
+					type: "time",
 					stacked: true,
 					offset: false,
 					time: {
 						stepSize: 1,
-						unit: 'day',
+						unit: "day",
 					},
 					grid: {
 						display: true,
@@ -138,7 +146,7 @@ onMounted(async () => {
 				},
 				y: {
 					stacked: true,
-					position: 'left',
+					position: "left",
 					suggestedMax: 10,
 					grid: {
 						display: true,
@@ -146,13 +154,14 @@ onMounted(async () => {
 					ticks: {
 						display: true,
 						//mirror: true,
-						callback: (value, index, values) => value < 0 ? -value : value,
+						callback: (value, index, values) =>
+							value < 0 ? -value : value,
 					},
 				},
 			},
 			interaction: {
 				intersect: false,
-				mode: 'index',
+				mode: "index",
 			},
 			elements: {
 				point: {
@@ -166,7 +175,7 @@ onMounted(async () => {
 				},
 				tooltip: {
 					enabled: false,
-					mode: 'index',
+					mode: "index",
 					animation: {
 						duration: 0,
 					},
@@ -179,23 +188,25 @@ onMounted(async () => {
 	});
 
 	new Chart(chartEl2, {
-		type: 'bar',
+		type: "bar",
 		data: {
-			datasets: [{
-				parsing: false,
-				label: 'In',
-				data: format(raw.inboxReceived).slice().reverse(),
-				tension: 0.3,
-				pointRadius: 0,
-				borderWidth: 0,
-				borderJoinStyle: 'round',
-				borderRadius: 4,
-				backgroundColor: '#c4a7e7',
-				barPercentage: 0.8,
-				categoryPercentage: 0.9,
-				fill: true,
-				clip: 8,
-			}],
+			datasets: [
+				{
+					parsing: false,
+					label: "In",
+					data: format(raw.inboxReceived).slice().reverse(),
+					tension: 0.3,
+					pointRadius: 0,
+					borderWidth: 0,
+					borderJoinStyle: "round",
+					borderRadius: 4,
+					backgroundColor: "#c4a7e7",
+					barPercentage: 0.8,
+					categoryPercentage: 0.9,
+					fill: true,
+					clip: 8,
+				},
+			],
 		},
 		options: {
 			aspectRatio: 5,
@@ -209,14 +220,14 @@ onMounted(async () => {
 			},
 			scales: {
 				x: {
-					type: 'time',
+					type: "time",
 					offset: false,
 					time: {
 						stepSize: 1,
-						unit: 'day',
+						unit: "day",
 						displayFormats: {
-							day: 'M/d',
-							month: 'Y/M',
+							day: "M/d",
+							month: "Y/M",
 						},
 					},
 					grid: {
@@ -230,7 +241,7 @@ onMounted(async () => {
 					min: getDate(chartLimit).getTime(),
 				},
 				y: {
-					position: 'left',
+					position: "left",
 					suggestedMax: 10,
 					grid: {
 						display: true,
@@ -239,7 +250,7 @@ onMounted(async () => {
 			},
 			interaction: {
 				intersect: false,
-				mode: 'index',
+				mode: "index",
 			},
 			elements: {
 				point: {
@@ -253,7 +264,7 @@ onMounted(async () => {
 				},
 				tooltip: {
 					enabled: false,
-					mode: 'index',
+					mode: "index",
 					animation: {
 						duration: 0,
 					},
@@ -284,4 +295,3 @@ onMounted(async () => {
 	}
 }
 </style>
-
diff --git a/packages/client/src/pages/admin/overview.federation.vue b/packages/client/src/pages/admin/overview.federation.vue
index b9e53d17d0..ab4dd2c69b 100644
--- a/packages/client/src/pages/admin/overview.federation.vue
+++ b/packages/client/src/pages/admin/overview.federation.vue
@@ -1,54 +1,69 @@
 <template>
-<div>
-	<MkLoading v-if="fetching"/>
-	<div v-show="!fetching" :class="$style.root">
-		<div v-if="topSubInstancesForPie && topPubInstancesForPie" class="pies">
-			<div class="pie deliver _panel">
-				<div class="title">Sub</div>
-				<XPie :data="topSubInstancesForPie" class="chart"/>
-				<div class="subTitle">Top 10</div>
-			</div>
-			<div class="pie inbox _panel">
-				<div class="title">Pub</div>
-				<XPie :data="topPubInstancesForPie" class="chart"/>
-				<div class="subTitle">Top 10</div>
-			</div>
-		</div>
-		<div v-if="!fetching" class="items">
-			<div class="item _panel sub">
-				<div class="icon"><i class="ph-download ph-bold ph-xl"></i></div>
-				<div class="body">
-					<div class="value">
-						{{ number(federationSubActive) }}
-						<MkNumberDiff v-tooltip="i18n.ts.dayOverDayChanges" class="diff" :value="federationSubActiveDiff"></MkNumberDiff>
-					</div>
-					<div class="label">Sub</div>
+	<div>
+		<MkLoading v-if="fetching" />
+		<div v-show="!fetching" :class="$style.root">
+			<div
+				v-if="topSubInstancesForPie && topPubInstancesForPie"
+				class="pies"
+			>
+				<div class="pie deliver _panel">
+					<div class="title">Sub</div>
+					<XPie :data="topSubInstancesForPie" class="chart" />
+					<div class="subTitle">Top 10</div>
+				</div>
+				<div class="pie inbox _panel">
+					<div class="title">Pub</div>
+					<XPie :data="topPubInstancesForPie" class="chart" />
+					<div class="subTitle">Top 10</div>
 				</div>
 			</div>
-			<div class="item _panel pub">
-				<div class="icon"><i class="ph-upload ph-bold ph-xl"></i></div>
-				<div class="body">
-					<div class="value">
-						{{ number(federationPubActive) }}
-						<MkNumberDiff v-tooltip="i18n.ts.dayOverDayChanges" class="diff" :value="federationPubActiveDiff"></MkNumberDiff>
+			<div v-if="!fetching" class="items">
+				<div class="item _panel sub">
+					<div class="icon">
+						<i class="ph-download ph-bold ph-xl"></i>
+					</div>
+					<div class="body">
+						<div class="value">
+							{{ number(federationSubActive) }}
+							<MkNumberDiff
+								v-tooltip="i18n.ts.dayOverDayChanges"
+								class="diff"
+								:value="federationSubActiveDiff"
+							></MkNumberDiff>
+						</div>
+						<div class="label">Sub</div>
+					</div>
+				</div>
+				<div class="item _panel pub">
+					<div class="icon">
+						<i class="ph-upload ph-bold ph-xl"></i>
+					</div>
+					<div class="body">
+						<div class="value">
+							{{ number(federationPubActive) }}
+							<MkNumberDiff
+								v-tooltip="i18n.ts.dayOverDayChanges"
+								class="diff"
+								:value="federationPubActiveDiff"
+							></MkNumberDiff>
+						</div>
+						<div class="label">Pub</div>
 					</div>
-					<div class="label">Pub</div>
 				</div>
 			</div>
 		</div>
 	</div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, ref } from 'vue';
-import XPie from './overview.pie.vue';
-import MkMiniChart from '@/components/MkMiniChart.vue';
-import * as os from '@/os';
-import number from '@/filters/number';
-import MkNumberDiff from '@/components/MkNumberDiff.vue';
-import { i18n } from '@/i18n';
-import { useChartTooltip } from '@/scripts/use-chart-tooltip';
+import { onMounted, onUnmounted, ref } from "vue";
+import XPie from "./overview.pie.vue";
+import MkMiniChart from "@/components/MkMiniChart.vue";
+import * as os from "@/os";
+import number from "@/filters/number";
+import MkNumberDiff from "@/components/MkNumberDiff.vue";
+import { i18n } from "@/i18n";
+import { useChartTooltip } from "@/scripts/use-chart-tooltip";
 
 let topSubInstancesForPie: any = $ref(null);
 let topPubInstancesForPie: any = $ref(null);
@@ -61,29 +76,48 @@ let fetching = $ref(true);
 const { handler: externalTooltipHandler } = useChartTooltip();
 
 onMounted(async () => {
-	const chart = await os.apiGet('charts/federation', { limit: 2, span: 'day' });
+	const chart = await os.apiGet("charts/federation", {
+		limit: 2,
+		span: "day",
+	});
 	federationPubActive = chart.pubActive[0];
 	federationPubActiveDiff = chart.pubActive[0] - chart.pubActive[1];
 	federationSubActive = chart.subActive[0];
 	federationSubActiveDiff = chart.subActive[0] - chart.subActive[1];
 
-	os.apiGet('federation/stats', { limit: 10 }).then(res => {
-		topSubInstancesForPie = res.topSubInstances.map(x => ({
-			name: x.host,
-			color: x.themeColor,
-			value: x.followersCount,
-			onClick: () => {
-				os.pageWindow(`/instance-info/${x.host}`);
-			},
-		})).concat([{ name: '(other)', color: '#80808080', value: res.otherFollowersCount }]);
-		topPubInstancesForPie = res.topPubInstances.map(x => ({
-			name: x.host,
-			color: x.themeColor,
-			value: x.followingCount,
-			onClick: () => {
-				os.pageWindow(`/instance-info/${x.host}`);
-			},
-		})).concat([{ name: '(other)', color: '#80808080', value: res.otherFollowingCount }]);
+	os.apiGet("federation/stats", { limit: 10 }).then((res) => {
+		topSubInstancesForPie = res.topSubInstances
+			.map((x) => ({
+				name: x.host,
+				color: x.themeColor,
+				value: x.followersCount,
+				onClick: () => {
+					os.pageWindow(`/instance-info/${x.host}`);
+				},
+			}))
+			.concat([
+				{
+					name: "(other)",
+					color: "#80808080",
+					value: res.otherFollowersCount,
+				},
+			]);
+		topPubInstancesForPie = res.topPubInstances
+			.map((x) => ({
+				name: x.host,
+				color: x.themeColor,
+				value: x.followingCount,
+				onClick: () => {
+					os.pageWindow(`/instance-info/${x.host}`);
+				},
+			}))
+			.concat([
+				{
+					name: "(other)",
+					color: "#80808080",
+					value: res.otherFollowingCount,
+				},
+			]);
 	});
 
 	fetching = false;
@@ -92,7 +126,6 @@ onMounted(async () => {
 
 <style lang="scss" module>
 .root {
-
 	&:global {
 		> .pies {
 			display: grid;
@@ -182,4 +215,3 @@ onMounted(async () => {
 	}
 }
 </style>
-
diff --git a/packages/client/src/pages/admin/overview.heatmap.vue b/packages/client/src/pages/admin/overview.heatmap.vue
index 7628209c7c..1a4984ba76 100644
--- a/packages/client/src/pages/admin/overview.heatmap.vue
+++ b/packages/client/src/pages/admin/overview.heatmap.vue
@@ -1,21 +1,27 @@
 <template>
-<div class="_panel" :class="$style.root">
-	<MkSelect v-model="src" style="margin: 0 0 12px 0;" small>
-		<option value="notes">Notes</option>
-		<option value="active-users">Active users</option>
-		<option value="ap-requests-inbox-received">Fediverse Requests: inboxReceived</option>
-		<option value="ap-requests-deliver-succeeded">Fediverse Requests: deliverSucceeded</option>
-		<option value="ap-requests-deliver-failed">Fediverse Requests: deliverFailed</option>
-	</MkSelect>
-	<MkHeatmap :src="src"/>
-</div>
+	<div class="_panel" :class="$style.root">
+		<MkSelect v-model="src" style="margin: 0 0 12px 0" small>
+			<option value="notes">Notes</option>
+			<option value="active-users">Active users</option>
+			<option value="ap-requests-inbox-received">
+				Fediverse Requests: inboxReceived
+			</option>
+			<option value="ap-requests-deliver-succeeded">
+				Fediverse Requests: deliverSucceeded
+			</option>
+			<option value="ap-requests-deliver-failed">
+				Fediverse Requests: deliverFailed
+			</option>
+		</MkSelect>
+		<MkHeatmap :src="src" />
+	</div>
 </template>
 
 <script lang="ts" setup>
-import MkHeatmap from '@/components/MkHeatmap.vue';
-import MkSelect from '@/components/form/select.vue';
+import MkHeatmap from "@/components/MkHeatmap.vue";
+import MkSelect from "@/components/form/select.vue";
 
-let src = $ref('notes');
+let src = $ref("notes");
 </script>
 
 <style lang="scss" module>
diff --git a/packages/client/src/pages/admin/overview.instances.vue b/packages/client/src/pages/admin/overview.instances.vue
index 15dbdc4639..e5d0d1d32c 100644
--- a/packages/client/src/pages/admin/overview.instances.vue
+++ b/packages/client/src/pages/admin/overview.instances.vue
@@ -1,28 +1,39 @@
 <template>
-<div class="wbrkwale">
-	<Transition :name="$store.state.animation ? '_transition_zoom' : ''" mode="out-in">
-		<MkLoading v-if="fetching"/>
-		<div v-else class="instances">
-			<MkA v-for="(instance, i) in instances" :key="instance.id" v-tooltip.mfm.noDelay="`${instance.name}\n${instance.host}\n${instance.softwareName} ${instance.softwareVersion}`" :to="`/instance-info/${instance.host}`" class="instance">
-				<MkInstanceCardMini :instance="instance"/>
-			</MkA>
-		</div>
-	</Transition>
-</div>
+	<div class="wbrkwale">
+		<Transition
+			:name="$store.state.animation ? '_transition_zoom' : ''"
+			mode="out-in"
+		>
+			<MkLoading v-if="fetching" />
+			<div v-else class="instances">
+				<MkA
+					v-for="(instance, i) in instances"
+					:key="instance.id"
+					v-tooltip.mfm.noDelay="
+						`${instance.name}\n${instance.host}\n${instance.softwareName} ${instance.softwareVersion}`
+					"
+					:to="`/instance-info/${instance.host}`"
+					class="instance"
+				>
+					<MkInstanceCardMini :instance="instance" />
+				</MkA>
+			</div>
+		</Transition>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, ref } from 'vue';
-import * as os from '@/os';
-import { useInterval } from '@/scripts/use-interval';
-import MkInstanceCardMini from '@/components/MkInstanceCardMini.vue';
+import { onMounted, onUnmounted, ref } from "vue";
+import * as os from "@/os";
+import { useInterval } from "@/scripts/use-interval";
+import MkInstanceCardMini from "@/components/MkInstanceCardMini.vue";
 
 const instances = ref([]);
 const fetching = ref(true);
 
 const fetch = async () => {
-	const fetchedInstances = await os.api('federation/instances', {
-		sort: '+latestRequestReceivedAt',
+	const fetchedInstances = await os.api("federation/instances", {
+		sort: "+latestRequestReceivedAt",
 		limit: 6,
 	});
 	instances.value = fetchedInstances;
diff --git a/packages/client/src/pages/admin/overview.moderators.vue b/packages/client/src/pages/admin/overview.moderators.vue
index 1a51601725..6184cfb107 100644
--- a/packages/client/src/pages/admin/overview.moderators.vue
+++ b/packages/client/src/pages/admin/overview.moderators.vue
@@ -1,29 +1,37 @@
 <template>
-<div>
-	<Transition :name="$store.state.animation ? '_transition_zoom' : ''" mode="out-in">
-		<MkLoading v-if="fetching"/>
-		<div v-else :class="$style.root" class="_panel">
-			<MkA v-for="user in moderators" :key="user.id" class="user" :to="`/user-info/${user.id}`">
-				<MkAvatar :user="user" class="avatar" indicator/>
-			</MkA>
-		</div>
-	</Transition>
-</div>
+	<div>
+		<Transition
+			:name="$store.state.animation ? '_transition_zoom' : ''"
+			mode="out-in"
+		>
+			<MkLoading v-if="fetching" />
+			<div v-else :class="$style.root" class="_panel">
+				<MkA
+					v-for="user in moderators"
+					:key="user.id"
+					class="user"
+					:to="`/user-info/${user.id}`"
+				>
+					<MkAvatar :user="user" class="avatar" indicator />
+				</MkA>
+			</div>
+		</Transition>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, ref } from 'vue';
-import * as os from '@/os';
-import number from '@/filters/number';
-import { i18n } from '@/i18n';
+import { onMounted, onUnmounted, ref } from "vue";
+import * as os from "@/os";
+import number from "@/filters/number";
+import { i18n } from "@/i18n";
 
 let moderators: any = $ref(null);
 let fetching = $ref(true);
 
 onMounted(async () => {
-	moderators = await os.api('admin/show-users', {
-		sort: '+updatedAt',
-		state: 'adminOrModerator',
+	moderators = await os.api("admin/show-users", {
+		sort: "+updatedAt",
+		state: "adminOrModerator",
 		limit: 30,
 	});
 
diff --git a/packages/client/src/pages/admin/overview.pie.vue b/packages/client/src/pages/admin/overview.pie.vue
index 416e963356..9de9f5c4b7 100644
--- a/packages/client/src/pages/admin/overview.pie.vue
+++ b/packages/client/src/pages/admin/overview.pie.vue
@@ -1,41 +1,50 @@
 <template>
-<canvas ref="chartEl"></canvas>
+	<canvas ref="chartEl"></canvas>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, ref, shallowRef } from 'vue';
-import { Chart } from 'chart.js';
-import number from '@/filters/number';
-import { defaultStore } from '@/store';
-import { useChartTooltip } from '@/scripts/use-chart-tooltip';
-import { initChart } from '@/scripts/init-chart';
+import { onMounted, onUnmounted, ref, shallowRef } from "vue";
+import { Chart } from "chart.js";
+import number from "@/filters/number";
+import { defaultStore } from "@/store";
+import { useChartTooltip } from "@/scripts/use-chart-tooltip";
+import { initChart } from "@/scripts/init-chart";
 
 initChart();
 
 const props = defineProps<{
-	data: { name: string; value: number; color: string; onClick?: () => void }[];
+	data: {
+		name: string;
+		value: number;
+		color: string;
+		onClick?: () => void;
+	}[];
 }>();
 
 const chartEl = shallowRef<HTMLCanvasElement>(null);
 
 const { handler: externalTooltipHandler } = useChartTooltip({
-	position: 'middle',
+	position: "middle",
 });
 
 let chartInstance: Chart;
 
 onMounted(() => {
 	chartInstance = new Chart(chartEl.value, {
-		type: 'doughnut',
+		type: "doughnut",
 		data: {
-			labels: props.data.map(x => x.name),
-			datasets: [{
-				backgroundColor: props.data.map(x => x.color),
-				borderColor: getComputedStyle(document.documentElement).getPropertyValue('--panel'),
-				borderWidth: 2,
-				hoverOffset: 0,
-				data: props.data.map(x => x.value),
-			}],
+			labels: props.data.map((x) => x.name),
+			datasets: [
+				{
+					backgroundColor: props.data.map((x) => x.color),
+					borderColor: getComputedStyle(
+						document.documentElement
+					).getPropertyValue("--panel"),
+					borderWidth: 2,
+					hoverOffset: 0,
+					data: props.data.map((x) => x.value),
+				},
+			],
 		},
 		options: {
 			layout: {
@@ -47,7 +56,12 @@ onMounted(() => {
 				},
 			},
 			onClick: (ev) => {
-				const hit = chartInstance.getElementsAtEventForMode(ev, 'nearest', { intersect: true }, false)[0];
+				const hit = chartInstance.getElementsAtEventForMode(
+					ev,
+					"nearest",
+					{ intersect: true },
+					false
+				)[0];
 				if (hit && props.data[hit.index].onClick) {
 					props.data[hit.index].onClick();
 				}
@@ -58,7 +72,7 @@ onMounted(() => {
 				},
 				tooltip: {
 					enabled: false,
-					mode: 'index',
+					mode: "index",
 					animation: {
 						duration: 0,
 					},
@@ -70,6 +84,4 @@ onMounted(() => {
 });
 </script>
 
-<style lang="scss" scoped>
-
-</style>
+<style lang="scss" scoped></style>
diff --git a/packages/client/src/pages/admin/overview.queue-chart.vue b/packages/client/src/pages/admin/overview.queue-chart.vue
index 15d4835a53..ebc344fa0b 100644
--- a/packages/client/src/pages/admin/overview.queue-chart.vue
+++ b/packages/client/src/pages/admin/overview.queue-chart.vue
@@ -1,9 +1,9 @@
 <template>
-<canvas ref="chartEl"></canvas>
+	<canvas ref="chartEl"></canvas>
 </template>
 
 <script lang="ts" setup>
-import { defineComponent, onMounted, onUnmounted, ref } from 'vue';
+import { defineComponent, onMounted, onUnmounted, ref } from "vue";
 import {
 	Chart,
 	ArcElement,
@@ -20,11 +20,11 @@ import {
 	Tooltip,
 	SubTitle,
 	Filler,
-} from 'chart.js';
-import number from '@/filters/number';
-import * as os from '@/os';
-import { defaultStore } from '@/store';
-import { useChartTooltip } from '@/scripts/use-chart-tooltip';
+} from "chart.js";
+import number from "@/filters/number";
+import * as os from "@/os";
+import { defaultStore } from "@/store";
+import { useChartTooltip } from "@/scripts/use-chart-tooltip";
 
 Chart.register(
 	ArcElement,
@@ -40,7 +40,7 @@ Chart.register(
 	Title,
 	Tooltip,
 	SubTitle,
-	Filler,
+	Filler
 );
 
 const props = defineProps<{
@@ -58,18 +58,24 @@ const alpha = (hex, a) => {
 
 const chartEl = ref<HTMLCanvasElement>(null);
 
-const gridColor = defaultStore.state.darkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';
+const gridColor = defaultStore.state.darkMode
+	? "rgba(255, 255, 255, 0.1)"
+	: "rgba(0, 0, 0, 0.1)";
 
 // フォントカラー
-Chart.defaults.color = getComputedStyle(document.documentElement).getPropertyValue('--fg');
+Chart.defaults.color = getComputedStyle(
+	document.documentElement
+).getPropertyValue("--fg");
 
 const { handler: externalTooltipHandler } = useChartTooltip();
 
 let chartInstance: Chart;
 
 const onStats = (stats) => {
-	chartInstance.data.labels.push('');
-	chartInstance.data.datasets[0].data.push(stats[props.domain].activeSincePrevTick);
+	chartInstance.data.labels.push("");
+	chartInstance.data.datasets[0].data.push(
+		stats[props.domain].activeSincePrevTick
+	);
 	chartInstance.data.datasets[1].data.push(stats[props.domain].active);
 	chartInstance.data.datasets[2].data.push(stats[props.domain].waiting);
 	chartInstance.data.datasets[3].data.push(stats[props.domain].delayed);
@@ -85,8 +91,10 @@ const onStats = (stats) => {
 
 const onStatsLog = (statsLog) => {
 	for (const stats of [...statsLog].reverse()) {
-		chartInstance.data.labels.push('');
-		chartInstance.data.datasets[0].data.push(stats[props.domain].activeSincePrevTick);
+		chartInstance.data.labels.push("");
+		chartInstance.data.datasets[0].data.push(
+			stats[props.domain].activeSincePrevTick
+		);
 		chartInstance.data.datasets[1].data.push(stats[props.domain].active);
 		chartInstance.data.datasets[2].data.push(stats[props.domain].waiting);
 		chartInstance.data.datasets[3].data.push(stats[props.domain].delayed);
@@ -103,47 +111,52 @@ const onStatsLog = (statsLog) => {
 
 onMounted(() => {
 	chartInstance = new Chart(chartEl.value, {
-		type: 'line',
+		type: "line",
 		data: {
 			labels: [],
-			datasets: [{
-				label: 'Process',
-				pointRadius: 0,
-				tension: 0.3,
-				borderWidth: 2,
-				borderJoinStyle: 'round',
-				borderColor: '#9ccfd8',
-				backgroundColor: alpha('#9ccfd8', 0.1),
-				data: [],
-			}, {
-				label: 'Active',
-				pointRadius: 0,
-				tension: 0.3,
-				borderWidth: 2,
-				borderJoinStyle: 'round',
-				borderColor: '#31748f',
-				backgroundColor: alpha('#31748f', 0.1),
-				data: [],
-			}, {
-				label: 'Waiting',
-				pointRadius: 0,
-				tension: 0.3,
-				borderWidth: 2,
-				borderJoinStyle: 'round',
-				borderColor: '#f6c177',
-				backgroundColor: alpha('#f6c177', 0.1),
-				data: [],
-			}, {
-				label: 'Delayed',
-				pointRadius: 0,
-				tension: 0.3,
-				borderWidth: 2,
-				borderJoinStyle: 'round',
-				borderColor: '#eb6f92',
-				borderDash: [5, 5],
-				fill: false,
-				data: [],
-			}],
+			datasets: [
+				{
+					label: "Process",
+					pointRadius: 0,
+					tension: 0.3,
+					borderWidth: 2,
+					borderJoinStyle: "round",
+					borderColor: "#9ccfd8",
+					backgroundColor: alpha("#9ccfd8", 0.1),
+					data: [],
+				},
+				{
+					label: "Active",
+					pointRadius: 0,
+					tension: 0.3,
+					borderWidth: 2,
+					borderJoinStyle: "round",
+					borderColor: "#31748f",
+					backgroundColor: alpha("#31748f", 0.1),
+					data: [],
+				},
+				{
+					label: "Waiting",
+					pointRadius: 0,
+					tension: 0.3,
+					borderWidth: 2,
+					borderJoinStyle: "round",
+					borderColor: "#f6c177",
+					backgroundColor: alpha("#f6c177", 0.1),
+					data: [],
+				},
+				{
+					label: "Delayed",
+					pointRadius: 0,
+					tension: 0.3,
+					borderWidth: 2,
+					borderJoinStyle: "round",
+					borderColor: "#eb6f92",
+					borderDash: [5, 5],
+					fill: false,
+					data: [],
+				},
+			],
 		},
 		options: {
 			aspectRatio: 2.5,
@@ -186,7 +199,7 @@ onMounted(() => {
 				},
 				tooltip: {
 					enabled: false,
-					mode: 'index',
+					mode: "index",
 					animation: {
 						duration: 0,
 					},
@@ -196,16 +209,14 @@ onMounted(() => {
 		},
 	});
 
-	props.connection.on('stats', onStats);
-	props.connection.on('statsLog', onStatsLog);
+	props.connection.on("stats", onStats);
+	props.connection.on("statsLog", onStatsLog);
 });
 
 onUnmounted(() => {
-	props.connection.off('stats', onStats);
-	props.connection.off('statsLog', onStatsLog);
+	props.connection.off("stats", onStats);
+	props.connection.off("statsLog", onStatsLog);
 });
 </script>
 
-<style lang="scss" scoped>
-
-</style>
+<style lang="scss" scoped></style>
diff --git a/packages/client/src/pages/admin/overview.queue.chart.vue b/packages/client/src/pages/admin/overview.queue.chart.vue
index 46d030687b..01a0d0ec07 100644
--- a/packages/client/src/pages/admin/overview.queue.chart.vue
+++ b/packages/client/src/pages/admin/overview.queue.chart.vue
@@ -1,17 +1,17 @@
 <template>
-<canvas ref="chartEl"></canvas>
+	<canvas ref="chartEl"></canvas>
 </template>
 
 <script lang="ts" setup>
-import { watch, onMounted, onUnmounted, ref, shallowRef } from 'vue';
-import { Chart } from 'chart.js';
-import number from '@/filters/number';
-import * as os from '@/os';
-import { defaultStore } from '@/store';
-import { useChartTooltip } from '@/scripts/use-chart-tooltip';
-import { chartVLine } from '@/scripts/chart-vline';
-import { alpha } from '@/scripts/color';
-import { initChart } from '@/scripts/init-chart';
+import { watch, onMounted, onUnmounted, ref, shallowRef } from "vue";
+import { Chart } from "chart.js";
+import number from "@/filters/number";
+import * as os from "@/os";
+import { defaultStore } from "@/store";
+import { useChartTooltip } from "@/scripts/use-chart-tooltip";
+import { chartVLine } from "@/scripts/chart-vline";
+import { alpha } from "@/scripts/color";
+import { initChart } from "@/scripts/init-chart";
 
 initChart();
 
@@ -28,7 +28,7 @@ let chartInstance: Chart;
 function setData(values) {
 	if (chartInstance == null) return;
 	for (const value of values) {
-		chartInstance.data.labels.push('');
+		chartInstance.data.labels.push("");
 		chartInstance.data.datasets[0].data.push(value);
 		if (chartInstance.data.datasets[0].data.length > 100) {
 			chartInstance.data.labels.shift();
@@ -40,7 +40,7 @@ function setData(values) {
 
 function pushData(value) {
 	if (chartInstance == null) return;
-	chartInstance.data.labels.push('');
+	chartInstance.data.labels.push("");
 	chartInstance.data.datasets[0].data.push(value);
 	if (chartInstance.data.datasets[0].data.length > 100) {
 		chartInstance.data.labels.shift();
@@ -50,37 +50,49 @@ function pushData(value) {
 }
 
 const label =
-	props.type === 'process' ? 'Process' :
-	props.type === 'active' ? 'Active' :
-	props.type === 'delayed' ? 'Delayed' :
-	props.type === 'waiting' ? 'Waiting' :
-	'?' as never;
+	props.type === "process"
+		? "Process"
+		: props.type === "active"
+		? "Active"
+		: props.type === "delayed"
+		? "Delayed"
+		: props.type === "waiting"
+		? "Waiting"
+		: ("?" as never);
 
 const color =
-	props.type === 'process' ? '#c4a7e7' :
-	props.type === 'active' ? '#31748f' :
-	props.type === 'delayed' ? '#eb6f92' :
-	props.type === 'waiting' ? '#f6c177' :
-	'?' as never;
+	props.type === "process"
+		? "#c4a7e7"
+		: props.type === "active"
+		? "#31748f"
+		: props.type === "delayed"
+		? "#eb6f92"
+		: props.type === "waiting"
+		? "#f6c177"
+		: ("?" as never);
 
 onMounted(() => {
-	const vLineColor = defaultStore.state.darkMode ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)';
+	const vLineColor = defaultStore.state.darkMode
+		? "rgba(255, 255, 255, 0.2)"
+		: "rgba(0, 0, 0, 0.2)";
 
 	chartInstance = new Chart(chartEl.value, {
-		type: 'line',
+		type: "line",
 		data: {
 			labels: [],
-			datasets: [{
-				label: label,
-				pointRadius: 0,
-				tension: 0.3,
-				borderWidth: 2,
-				borderJoinStyle: 'round',
-				borderColor: color,
-				backgroundColor: alpha(color, 0.2),
-				fill: true,
-				data: [],
-			}],
+			datasets: [
+				{
+					label: label,
+					pointRadius: 0,
+					tension: 0.3,
+					borderWidth: 2,
+					borderJoinStyle: "round",
+					borderColor: color,
+					backgroundColor: alpha(color, 0.2),
+					fill: true,
+					data: [],
+				},
+			],
 		},
 		options: {
 			aspectRatio: 2.5,
@@ -104,8 +116,7 @@ onMounted(() => {
 				},
 				y: {
 					min: 0,
-					grid: {
-					},
+					grid: {},
 				},
 			},
 			interaction: {
@@ -117,7 +128,7 @@ onMounted(() => {
 				},
 				tooltip: {
 					enabled: false,
-					mode: 'index',
+					mode: "index",
 					animation: {
 						duration: 0,
 					},
@@ -135,6 +146,4 @@ defineExpose({
 });
 </script>
 
-<style lang="scss" scoped>
-
-</style>
+<style lang="scss" scoped></style>
diff --git a/packages/client/src/pages/admin/overview.queue.vue b/packages/client/src/pages/admin/overview.queue.vue
index 7e58882938..5b003887eb 100644
--- a/packages/client/src/pages/admin/overview.queue.vue
+++ b/packages/client/src/pages/admin/overview.queue.vue
@@ -1,43 +1,55 @@
 <template>
-<div :class="$style.root">
-	<div class="_table status">
-		<div class="_row">
-			<div class="_cell" style="text-align: center;"><div class="_label">Process</div>{{ number(activeSincePrevTick) }}</div>
-			<div class="_cell" style="text-align: center;"><div class="_label">Active</div>{{ number(active) }}</div>
-			<div class="_cell" style="text-align: center;"><div class="_label">Waiting</div>{{ number(waiting) }}</div>
-			<div class="_cell" style="text-align: center;"><div class="_label">Delayed</div>{{ number(delayed) }}</div>
+	<div :class="$style.root">
+		<div class="_table status">
+			<div class="_row">
+				<div class="_cell" style="text-align: center">
+					<div class="_label">Process</div>
+					{{ number(activeSincePrevTick) }}
+				</div>
+				<div class="_cell" style="text-align: center">
+					<div class="_label">Active</div>
+					{{ number(active) }}
+				</div>
+				<div class="_cell" style="text-align: center">
+					<div class="_label">Waiting</div>
+					{{ number(waiting) }}
+				</div>
+				<div class="_cell" style="text-align: center">
+					<div class="_label">Delayed</div>
+					{{ number(delayed) }}
+				</div>
+			</div>
+		</div>
+		<div class="charts">
+			<div class="chart">
+				<div class="title">Process</div>
+				<XChart ref="chartProcess" type="process" />
+			</div>
+			<div class="chart">
+				<div class="title">Active</div>
+				<XChart ref="chartActive" type="active" />
+			</div>
+			<div class="chart">
+				<div class="title">Delayed</div>
+				<XChart ref="chartDelayed" type="delayed" />
+			</div>
+			<div class="chart">
+				<div class="title">Waiting</div>
+				<XChart ref="chartWaiting" type="waiting" />
+			</div>
 		</div>
 	</div>
-	<div class="charts">
-		<div class="chart">
-			<div class="title">Process</div>
-			<XChart ref="chartProcess" type="process"/>
-		</div>
-		<div class="chart">
-			<div class="title">Active</div>
-			<XChart ref="chartActive" type="active"/>
-		</div>
-		<div class="chart">
-			<div class="title">Delayed</div>
-			<XChart ref="chartDelayed" type="delayed"/>
-		</div>
-		<div class="chart">
-			<div class="title">Waiting</div>
-			<XChart ref="chartWaiting" type="waiting"/>
-		</div>
-	</div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { markRaw, onMounted, onUnmounted, ref } from 'vue';
-import XChart from './overview.queue.chart.vue';
-import number from '@/filters/number';
-import * as os from '@/os';
-import { stream } from '@/stream';
-import { i18n } from '@/i18n';
+import { markRaw, onMounted, onUnmounted, ref } from "vue";
+import XChart from "./overview.queue.chart.vue";
+import number from "@/filters/number";
+import * as os from "@/os";
+import { stream } from "@/stream";
+import { i18n } from "@/i18n";
 
-const connection = markRaw(stream.useChannel('queueStats'));
+const connection = markRaw(stream.useChannel("queueStats"));
 
 const activeSincePrevTick = ref(0);
 const active = ref(0);
@@ -84,17 +96,17 @@ const onStatsLog = (statsLog) => {
 };
 
 onMounted(() => {
-	connection.on('stats', onStats);
-	connection.on('statsLog', onStatsLog);
-	connection.send('requestLog', {
+	connection.on("stats", onStats);
+	connection.on("statsLog", onStatsLog);
+	connection.send("requestLog", {
 		id: Math.random().toString().substr(2, 8),
 		length: 100,
 	});
 });
 
 onUnmounted(() => {
-	connection.off('stats', onStats);
-	connection.off('statsLog', onStatsLog);
+	connection.off("stats", onStats);
+	connection.off("statsLog", onStatsLog);
 	connection.dispose();
 });
 </script>
@@ -124,4 +136,4 @@ onUnmounted(() => {
 		}
 	}
 }
-</style>	
+</style>
diff --git a/packages/client/src/pages/admin/overview.stats.vue b/packages/client/src/pages/admin/overview.stats.vue
index 797a0ba08a..b6d9e0bf14 100644
--- a/packages/client/src/pages/admin/overview.stats.vue
+++ b/packages/client/src/pages/admin/overview.stats.vue
@@ -1,59 +1,90 @@
 <template>
-<div>
-	<Transition :name="$store.state.animation ? '_transition_zoom' : ''" mode="out-in">
-		<MkLoading v-if="fetching"/>
-		<div v-else :class="$style.root">
-			<div class="item _panel users">
-				<div class="icon"><i class="ph-users ph-bold ph-xl"></i></div>
-				<div class="body">
-					<div class="value">
-						<MkNumber :value="stats.originalUsersCount" style="margin-right: 0.5em;"/>
-						<MkNumberDiff v-tooltip="i18n.ts.dayOverDayChanges" class="diff" :value="usersComparedToThePrevDay"></MkNumberDiff>
+	<div>
+		<Transition
+			:name="$store.state.animation ? '_transition_zoom' : ''"
+			mode="out-in"
+		>
+			<MkLoading v-if="fetching" />
+			<div v-else :class="$style.root">
+				<div class="item _panel users">
+					<div class="icon">
+						<i class="ph-users ph-bold ph-xl"></i>
+					</div>
+					<div class="body">
+						<div class="value">
+							<MkNumber
+								:value="stats.originalUsersCount"
+								style="margin-right: 0.5em"
+							/>
+							<MkNumberDiff
+								v-tooltip="i18n.ts.dayOverDayChanges"
+								class="diff"
+								:value="usersComparedToThePrevDay"
+							></MkNumberDiff>
+						</div>
+						<div class="label">Users</div>
+					</div>
+				</div>
+				<div class="item _panel notes">
+					<div class="icon">
+						<i class="ph-pencil ph-bold ph-xl"></i>
+					</div>
+					<div class="body">
+						<div class="value">
+							<MkNumber
+								:value="stats.originalNotesCount"
+								style="margin-right: 0.5em"
+							/>
+							<MkNumberDiff
+								v-tooltip="i18n.ts.dayOverDayChanges"
+								class="diff"
+								:value="notesComparedToThePrevDay"
+							></MkNumberDiff>
+						</div>
+						<div class="label">Posts</div>
+					</div>
+				</div>
+				<div class="item _panel instances">
+					<div class="icon">
+						<i class="ph-planet ph-bold ph-xl"></i>
+					</div>
+					<div class="body">
+						<div class="value">
+							<MkNumber
+								:value="stats.instances"
+								style="margin-right: 0.5em"
+							/>
+						</div>
+						<div class="label">Instances</div>
+					</div>
+				</div>
+				<div class="item _panel online">
+					<div class="icon">
+						<i class="ph-broadcast ph-bold ph-xl"></i>
+					</div>
+					<div class="body">
+						<div class="value">
+							<MkNumber
+								:value="onlineUsersCount"
+								style="margin-right: 0.5em"
+							/>
+						</div>
+						<div class="label">Online</div>
 					</div>
-					<div class="label">Users</div>
 				</div>
 			</div>
-			<div class="item _panel notes">
-				<div class="icon"><i class="ph-pencil ph-bold ph-xl"></i></div>
-				<div class="body">
-					<div class="value">
-						<MkNumber :value="stats.originalNotesCount" style="margin-right: 0.5em;"/>
-						<MkNumberDiff v-tooltip="i18n.ts.dayOverDayChanges" class="diff" :value="notesComparedToThePrevDay"></MkNumberDiff>
-					</div>
-					<div class="label">Posts</div>
-				</div>
-			</div>
-			<div class="item _panel instances">
-				<div class="icon"><i class="ph-planet ph-bold ph-xl"></i></div>
-				<div class="body">
-					<div class="value">
-						<MkNumber :value="stats.instances" style="margin-right: 0.5em;"/>
-					</div>
-					<div class="label">Instances</div>
-				</div>
-			</div>
-			<div class="item _panel online">
-				<div class="icon"><i class="ph-broadcast ph-bold ph-xl"></i></div>
-				<div class="body">
-					<div class="value">
-						<MkNumber :value="onlineUsersCount" style="margin-right: 0.5em;"/>
-					</div>
-					<div class="label">Online</div>
-				</div>
-			</div>
-		</div>
-	</Transition>
-</div>
+		</Transition>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, ref } from 'vue';
-import MkMiniChart from '@/components/MkMiniChart.vue';
-import * as os from '@/os';
-import number from '@/filters/number';
-import MkNumberDiff from '@/components/MkNumberDiff.vue';
-import MkNumber from '@/components/MkNumber.vue';
-import { i18n } from '@/i18n';
+import { onMounted, onUnmounted, ref } from "vue";
+import MkMiniChart from "@/components/MkMiniChart.vue";
+import * as os from "@/os";
+import number from "@/filters/number";
+import MkNumberDiff from "@/components/MkNumberDiff.vue";
+import MkNumber from "@/components/MkNumber.vue";
+import { i18n } from "@/i18n";
 
 let stats: any = $ref(null);
 let usersComparedToThePrevDay = $ref<number>();
@@ -63,18 +94,20 @@ let fetching = $ref(true);
 
 onMounted(async () => {
 	const [_stats, _onlineUsersCount] = await Promise.all([
-		os.api('stats', {}),
-		os.api('get-online-users-count').then(res => res.count),
+		os.api("stats", {}),
+		os.api("get-online-users-count").then((res) => res.count),
 	]);
 	stats = _stats;
 	onlineUsersCount = _onlineUsersCount;
 
-	os.apiGet('charts/users', { limit: 2, span: 'day' }).then(chart => {
-		usersComparedToThePrevDay = stats.originalUsersCount - chart.local.total[1];
+	os.apiGet("charts/users", { limit: 2, span: "day" }).then((chart) => {
+		usersComparedToThePrevDay =
+			stats.originalUsersCount - chart.local.total[1];
 	});
 
-	os.apiGet('charts/notes', { limit: 2, span: 'day' }).then(chart => {
-		notesComparedToThePrevDay = stats.originalNotesCount - chart.local.total[1];
+	os.apiGet("charts/notes", { limit: 2, span: "day" }).then((chart) => {
+		notesComparedToThePrevDay =
+			stats.originalNotesCount - chart.local.total[1];
 	});
 
 	fetching = false;
@@ -128,7 +161,7 @@ onMounted(async () => {
 			&.emojis {
 				> .icon {
 					background: #ea9d3422;
-						color: #f6c177;
+					color: #f6c177;
 				}
 			}
 
diff --git a/packages/client/src/pages/admin/overview.user.vue b/packages/client/src/pages/admin/overview.user.vue
index 52f676e72b..89370cee86 100644
--- a/packages/client/src/pages/admin/overview.user.vue
+++ b/packages/client/src/pages/admin/overview.user.vue
@@ -1,19 +1,26 @@
 <template>
-<MkA :class="[$style.root]" :to="`/user-info/${user.id}`">
-	<MkAvatar class="avatar" :user="user" :disable-link="true" :show-indicator="true"/>
-	<div class="body">
-		<span class="name"><MkUserName class="name" :user="user"/></span>
-		<span class="sub"><span class="acct _monospace">@{{ acct(user) }}</span></span>
-	</div>
-	<MkMiniChart v-if="chart" class="chart" :src="chart.inc"/>
-</MkA>
+	<MkA :class="[$style.root]" :to="`/user-info/${user.id}`">
+		<MkAvatar
+			class="avatar"
+			:user="user"
+			:disable-link="true"
+			:show-indicator="true"
+		/>
+		<div class="body">
+			<span class="name"><MkUserName class="name" :user="user" /></span>
+			<span class="sub"
+				><span class="acct _monospace">@{{ acct(user) }}</span></span
+			>
+		</div>
+		<MkMiniChart v-if="chart" class="chart" :src="chart.inc" />
+	</MkA>
 </template>
 
 <script lang="ts" setup>
-import * as misskey from 'calckey-js';
-import MkMiniChart from '@/components/MkMiniChart.vue';
-import * as os from '@/os';
-import { acct } from '@/filters/user';
+import * as misskey from "calckey-js";
+import MkMiniChart from "@/components/MkMiniChart.vue";
+import * as os from "@/os";
+import { acct } from "@/filters/user";
 
 const props = defineProps<{
 	user: misskey.entities.User;
@@ -21,7 +28,11 @@ const props = defineProps<{
 
 let chart = $ref(null);
 
-os.apiGet('charts/user/notes', { userId: props.user.id, limit: 16, span: 'day' }).then(res => {
+os.apiGet("charts/user/notes", {
+	userId: props.user.id,
+	limit: 16,
+	span: "day",
+}).then((res) => {
 	chart = res;
 });
 </script>
diff --git a/packages/client/src/pages/admin/overview.users.vue b/packages/client/src/pages/admin/overview.users.vue
index 5390d9d8cb..9017eb2a2c 100644
--- a/packages/client/src/pages/admin/overview.users.vue
+++ b/packages/client/src/pages/admin/overview.users.vue
@@ -1,30 +1,38 @@
 <template>
-<div :class="$style.root">
-	<Transition :name="$store.state.animation ? '_transition_zoom' : ''" mode="out-in">
-		<MkLoading v-if="fetching"/>
-		<div v-else class="users">
-			<MkA v-for="(user, i) in newUsers" :key="user.id" :to="`/user-info/${user.id}`" class="user">
-				<MkUserCardMini :user="user"/>
-			</MkA>
-		</div>
-	</Transition>
-</div>
+	<div :class="$style.root">
+		<Transition
+			:name="$store.state.animation ? '_transition_zoom' : ''"
+			mode="out-in"
+		>
+			<MkLoading v-if="fetching" />
+			<div v-else class="users">
+				<MkA
+					v-for="(user, i) in newUsers"
+					:key="user.id"
+					:to="`/user-info/${user.id}`"
+					class="user"
+				>
+					<MkUserCardMini :user="user" />
+				</MkA>
+			</div>
+		</Transition>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, ref } from 'vue';
-import * as os from '@/os';
-import { useInterval } from '@/scripts/use-interval';
-import MkUserCardMini from '@/components/MkUserCardMini.vue';
+import { onMounted, onUnmounted, ref } from "vue";
+import * as os from "@/os";
+import { useInterval } from "@/scripts/use-interval";
+import MkUserCardMini from "@/components/MkUserCardMini.vue";
 
 let newUsers = $ref(null);
 let fetching = $ref(true);
 
 const fetch = async () => {
-	const _newUsers = await os.api('admin/show-users', {
+	const _newUsers = await os.api("admin/show-users", {
 		limit: 5,
-		sort: '+createdAt',
-		origin: 'local',
+		sort: "+createdAt",
+		origin: "local",
 	});
 	newUsers = _newUsers;
 	fetching = false;
diff --git a/packages/client/src/pages/admin/overview.vue b/packages/client/src/pages/admin/overview.vue
index f5873d0804..4c3391ce43 100644
--- a/packages/client/src/pages/admin/overview.vue
+++ b/packages/client/src/pages/admin/overview.vue
@@ -3,77 +3,83 @@
 		<div ref="rootEl" class="edbbcaef">
 			<MkFolder class="item">
 				<template #header>Stats</template>
-				<XStats/>
+				<XStats />
 			</MkFolder>
 
 			<MkFolder class="item">
 				<template #header>Active users</template>
-				<XActiveUsers/>
+				<XActiveUsers />
 			</MkFolder>
 
 			<MkFolder class="item">
 				<template #header>Heatmap</template>
-				<XHeatmap/>
+				<XHeatmap />
 			</MkFolder>
 
 			<MkFolder class="item">
 				<template #header>Moderators</template>
-				<XModerators/>
+				<XModerators />
 			</MkFolder>
 
 			<MkFolder class="item">
 				<template #header>Federation</template>
-				<XFederation/>
+				<XFederation />
 			</MkFolder>
 
 			<MkFolder class="item">
 				<template #header>Instances</template>
-				<XInstances/>
+				<XInstances />
 			</MkFolder>
 
 			<MkFolder class="item">
 				<template #header>Fediverse Requests</template>
-				<XApRequests/>
+				<XApRequests />
 			</MkFolder>
 
 			<MkFolder class="item">
 				<template #header>New users</template>
-				<XUsers/>
+				<XUsers />
 			</MkFolder>
 
 			<MkFolder class="item">
 				<template #header>Deliver queue</template>
-				<XQueue domain="deliver"/>
+				<XQueue domain="deliver" />
 			</MkFolder>
 
 			<MkFolder class="item">
 				<template #header>Inbox queue</template>
-				<XQueue domain="inbox"/>
+				<XQueue domain="inbox" />
 			</MkFolder>
 		</div>
 	</MkSpacer>
 </template>
 
 <script lang="ts" setup>
-import { markRaw, version as vueVersion, onMounted, onBeforeUnmount, nextTick } from 'vue';
-import XFederation from './overview.federation.vue';
-import XInstances from './overview.instances.vue';
-import XQueue from './overview.queue.vue';
-import XApRequests from './overview.ap-requests.vue';
-import XUsers from './overview.users.vue';
-import XActiveUsers from './overview.active-users.vue';
-import XStats from './overview.stats.vue';
-import XModerators from './overview.moderators.vue';
-import XHeatmap from './overview.heatmap.vue';
-import MkTagCloud from '@/components/MkTagCloud.vue';
-import { version, url } from '@/config';
-import * as os from '@/os';
-import { stream } from '@/stream';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import { defaultStore } from '@/store';
-import MkFileListForAdmin from '@/components/MkFileListForAdmin.vue';
-import MkFolder from '@/components/MkFolder.vue';
+import {
+	markRaw,
+	version as vueVersion,
+	onMounted,
+	onBeforeUnmount,
+	nextTick,
+} from "vue";
+import XFederation from "./overview.federation.vue";
+import XInstances from "./overview.instances.vue";
+import XQueue from "./overview.queue.vue";
+import XApRequests from "./overview.ap-requests.vue";
+import XUsers from "./overview.users.vue";
+import XActiveUsers from "./overview.active-users.vue";
+import XStats from "./overview.stats.vue";
+import XModerators from "./overview.moderators.vue";
+import XHeatmap from "./overview.heatmap.vue";
+import MkTagCloud from "@/components/MkTagCloud.vue";
+import { version, url } from "@/config";
+import * as os from "@/os";
+import { stream } from "@/stream";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
+import { defaultStore } from "@/store";
+import MkFileListForAdmin from "@/components/MkFileListForAdmin.vue";
+import MkFolder from "@/components/MkFolder.vue";
 
 const rootEl = $shallowRef<HTMLElement>();
 let serverInfo: any = $ref(null);
@@ -85,10 +91,10 @@ let federationSubActive = $ref<number | null>(null);
 let federationSubActiveDiff = $ref<number | null>(null);
 let newUsers = $ref(null);
 let activeInstances = $shallowRef(null);
-const queueStatsConnection = markRaw(stream.useChannel('queueStats'));
+const queueStatsConnection = markRaw(stream.useChannel("queueStats"));
 const now = new Date();
 const filesPagination = {
-	endpoint: 'admin/drive/files' as const,
+	endpoint: "admin/drive/files" as const,
 	limit: 9,
 	noPaging: true,
 };
@@ -108,52 +114,68 @@ onMounted(async () => {
 	magicGrid.listen();
 	*/
 
-	os.apiGet('charts/federation', { limit: 2, span: 'day' }).then(chart => {
+	os.apiGet("charts/federation", { limit: 2, span: "day" }).then((chart) => {
 		federationPubActive = chart.pubActive[0];
 		federationPubActiveDiff = chart.pubActive[0] - chart.pubActive[1];
 		federationSubActive = chart.subActive[0];
 		federationSubActiveDiff = chart.subActive[0] - chart.subActive[1];
 	});
 
-	os.apiGet('federation/stats', { limit: 10 }).then(res => {
-		topSubInstancesForPie = res.topSubInstances.map(x => ({
-			name: x.host,
-			color: x.themeColor,
-			value: x.followersCount,
-			onClick: () => {
-				os.pageWindow(`/instance-info/${x.host}`);
-			},
-		})).concat([{ name: '(other)', color: '#80808080', value: res.otherFollowersCount }]);
-		topPubInstancesForPie = res.topPubInstances.map(x => ({
-			name: x.host,
-			color: x.themeColor,
-			value: x.followingCount,
-			onClick: () => {
-				os.pageWindow(`/instance-info/${x.host}`);
-			},
-		})).concat([{ name: '(other)', color: '#80808080', value: res.otherFollowingCount }]);
+	os.apiGet("federation/stats", { limit: 10 }).then((res) => {
+		topSubInstancesForPie = res.topSubInstances
+			.map((x) => ({
+				name: x.host,
+				color: x.themeColor,
+				value: x.followersCount,
+				onClick: () => {
+					os.pageWindow(`/instance-info/${x.host}`);
+				},
+			}))
+			.concat([
+				{
+					name: "(other)",
+					color: "#80808080",
+					value: res.otherFollowersCount,
+				},
+			]);
+		topPubInstancesForPie = res.topPubInstances
+			.map((x) => ({
+				name: x.host,
+				color: x.themeColor,
+				value: x.followingCount,
+				onClick: () => {
+					os.pageWindow(`/instance-info/${x.host}`);
+				},
+			}))
+			.concat([
+				{
+					name: "(other)",
+					color: "#80808080",
+					value: res.otherFollowingCount,
+				},
+			]);
 	});
 
-	os.api('admin/server-info').then(serverInfoResponse => {
+	os.api("admin/server-info").then((serverInfoResponse) => {
 		serverInfo = serverInfoResponse;
 	});
 
-	os.api('admin/show-users', {
+	os.api("admin/show-users", {
 		limit: 5,
-		sort: '+createdAt',
-	}).then(res => {
+		sort: "+createdAt",
+	}).then((res) => {
 		newUsers = res;
 	});
 
-	os.api('federation/instances', {
-		sort: '+latestRequestReceivedAt',
+	os.api("federation/instances", {
+		sort: "+latestRequestReceivedAt",
 		limit: 25,
-	}).then(res => {
+	}).then((res) => {
 		activeInstances = res;
 	});
 
 	nextTick(() => {
-		queueStatsConnection.send('requestLog', {
+		queueStatsConnection.send("requestLog", {
 			id: Math.random().toString().substr(2, 8),
 			length: 100,
 		});
@@ -170,7 +192,7 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.dashboard,
-	icon: 'ph-gauge ph-bold ph-lg',
+	icon: "ph-gauge ph-bold ph-lg",
 });
 </script>
 
diff --git a/packages/client/src/pages/admin/promotions.vue b/packages/client/src/pages/admin/promotions.vue
index 97d5f0e2fc..50e764627e 100644
--- a/packages/client/src/pages/admin/promotions.vue
+++ b/packages/client/src/pages/admin/promotions.vue
@@ -1,58 +1,82 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs" :display-back-button="true"/></template>
-	<MkSpacer :content-max="900">
-		<div class="uqshojas">
-			<div v-for="ad in ads" class="_panel _formRoot ad">
-				<MkAd v-if="ad.url" :specify="ad"/>
-				<MkInput v-model="ad.url" type="url" class="_formBlock">
-					<template #label>URL</template>
-				</MkInput>
-				<MkInput v-model="ad.imageUrl" class="_formBlock">
-					<template #label>{{ i18n.ts.imageUrl }}</template>
-				</MkInput>
-				<FormRadios v-model="ad.place" class="_formBlock">
-					<template #label>Form</template>
-					<option value="widget">widget</option>
-					<option value="inline">inline</option>
-					<option value="inline-big">inline-big</option>
-				</FormRadios>
-				<FormSplit>
-					<MkInput :disabled="ad.place === 'widget'" v-model="ad.ratio" type="number">
-						<template #label>{{ i18n.ts.ratio }}</template>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader
+				:actions="headerActions"
+				:tabs="headerTabs"
+				:display-back-button="true"
+		/></template>
+		<MkSpacer :content-max="900">
+			<div class="uqshojas">
+				<div v-for="ad in ads" class="_panel _formRoot ad">
+					<MkAd v-if="ad.url" :specify="ad" />
+					<MkInput v-model="ad.url" type="url" class="_formBlock">
+						<template #label>URL</template>
 					</MkInput>
-					<MkInput v-model="ad.expiresAt" type="date">
-						<template #label>{{ i18n.ts.expiration }}</template>
+					<MkInput v-model="ad.imageUrl" class="_formBlock">
+						<template #label>{{ i18n.ts.imageUrl }}</template>
 					</MkInput>
-				</FormSplit>
-				<MkTextarea v-model="ad.memo" class="_formBlock">
-					<template #label>{{ i18n.ts.memo }}</template>
-				</MkTextarea>
-				<div class="buttons _formBlock">
-					<MkButton class="button" inline primary style="margin-right: 12px;" @click="save(ad)"><i class="ph-floppy-disk-back ph-bold ph-lg"></i> {{ i18n.ts.save }}</MkButton>
-					<MkButton class="button" inline danger @click="remove(ad)"><i class="ph-trash ph-bold ph-lg"></i> {{ i18n.ts.remove }}</MkButton>
+					<FormRadios v-model="ad.place" class="_formBlock">
+						<template #label>Form</template>
+						<option value="widget">widget</option>
+						<option value="inline">inline</option>
+						<option value="inline-big">inline-big</option>
+					</FormRadios>
+					<FormSplit>
+						<MkInput
+							:disabled="ad.place === 'widget'"
+							v-model="ad.ratio"
+							type="number"
+						>
+							<template #label>{{ i18n.ts.ratio }}</template>
+						</MkInput>
+						<MkInput v-model="ad.expiresAt" type="date">
+							<template #label>{{ i18n.ts.expiration }}</template>
+						</MkInput>
+					</FormSplit>
+					<MkTextarea v-model="ad.memo" class="_formBlock">
+						<template #label>{{ i18n.ts.memo }}</template>
+					</MkTextarea>
+					<div class="buttons _formBlock">
+						<MkButton
+							class="button"
+							inline
+							primary
+							style="margin-right: 12px"
+							@click="save(ad)"
+							><i class="ph-floppy-disk-back ph-bold ph-lg"></i>
+							{{ i18n.ts.save }}</MkButton
+						>
+						<MkButton
+							class="button"
+							inline
+							danger
+							@click="remove(ad)"
+							><i class="ph-trash ph-bold ph-lg"></i>
+							{{ i18n.ts.remove }}</MkButton
+						>
+					</div>
 				</div>
 			</div>
-		</div>
-	</MkSpacer>
-</MkStickyContainer>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import MkButton from '@/components/MkButton.vue';
-import MkInput from '@/components/form/input.vue';
-import MkTextarea from '@/components/form/textarea.vue';
-import FormRadios from '@/components/form/radios.vue';
-import FormSplit from '@/components/form/split.vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import { formatDateTimeString } from '@/scripts/format-time-string';
+import {} from "vue";
+import MkButton from "@/components/MkButton.vue";
+import MkInput from "@/components/form/input.vue";
+import MkTextarea from "@/components/form/textarea.vue";
+import FormRadios from "@/components/form/radios.vue";
+import FormSplit from "@/components/form/split.vue";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
+import { formatDateTimeString } from "@/scripts/format-time-string";
 
 let ads: any[] = $ref([]);
 
-os.api('admin/ad/list').then(adsResponse => {
+os.api("admin/ad/list").then((adsResponse) => {
 	ads = adsResponse;
 	// The date format should be changed to yyyy-MM-dd in order to be properly displayed
 	for (let i in ads) {
@@ -61,14 +85,17 @@ os.api('admin/ad/list').then(adsResponse => {
 });
 
 function add() {
-	const tomorrow = formatDateTimeString(new Date(new Date().setDate(new Date().getDate() + 1)), 'yyyy-MM-dd');
+	const tomorrow = formatDateTimeString(
+		new Date(new Date().setDate(new Date().getDate() + 1)),
+		"yyyy-MM-dd"
+	);
 	ads.unshift({
 		id: null,
-		memo: '',
-		place: 'widget',
-		priority: 'middle',
+		memo: "",
+		place: "widget",
+		priority: "middle",
 		ratio: 1,
-		url: '',
+		url: "",
 		imageUrl: null,
 		expiresAt: tomorrow,
 	});
@@ -76,12 +103,12 @@ function add() {
 
 function remove(ad) {
 	os.confirm({
-		type: 'warning',
-		text: i18n.t('removeAreYouSure', { x: ad.url }),
+		type: "warning",
+		text: i18n.t("removeAreYouSure", { x: ad.url }),
 	}).then(({ canceled }) => {
 		if (canceled) return;
-		ads = ads.filter(x => x !== ad);
-		os.apiWithDialog('admin/ad/delete', {
+		ads = ads.filter((x) => x !== ad);
+		os.apiWithDialog("admin/ad/delete", {
 			id: ad.id,
 		});
 	});
@@ -89,30 +116,32 @@ function remove(ad) {
 
 function save(ad) {
 	if (ad.id == null) {
-		os.apiWithDialog('admin/ad/create', {
+		os.apiWithDialog("admin/ad/create", {
 			...ad,
 			expiresAt: new Date(ad.expiresAt).getTime(),
 		});
 	} else {
-		os.apiWithDialog('admin/ad/update', {
+		os.apiWithDialog("admin/ad/update", {
 			...ad,
 			expiresAt: new Date(ad.expiresAt).getTime(),
 		});
 	}
 }
 
-const headerActions = $computed(() => [{
-	asFullButton: true,
-	icon: 'ph-plus ph-bold ph-lg',
-	text: i18n.ts.add,
-	handler: add,
-}]);
+const headerActions = $computed(() => [
+	{
+		asFullButton: true,
+		icon: "ph-plus ph-bold ph-lg",
+		text: i18n.ts.add,
+		handler: add,
+	},
+]);
 
 const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.ads,
-	icon: 'ph-money ph-bold ph-lg',
+	icon: "ph-money ph-bold ph-lg",
 });
 </script>
 
diff --git a/packages/client/src/pages/admin/proxy-account.vue b/packages/client/src/pages/admin/proxy-account.vue
index aeec71d379..87b3c684e2 100644
--- a/packages/client/src/pages/admin/proxy-account.vue
+++ b/packages/client/src/pages/admin/proxy-account.vue
@@ -1,44 +1,60 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs" :display-back-button="true"/></template>
-	<MkSpacer :content-max="700" :margin-min="16" :margin-max="32">
-		<FormSuspense :p="init">
-			<MkInfo class="_formBlock">{{ i18n.ts.proxyAccountDescription }}</MkInfo>
-			<MkKeyValue class="_formBlock">
-				<template #key>{{ i18n.ts.proxyAccount }}</template>
-				<template #value>{{ proxyAccount ? `@${proxyAccount.username}` : i18n.ts.none }}</template>
-			</MkKeyValue>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader
+				:actions="headerActions"
+				:tabs="headerTabs"
+				:display-back-button="true"
+		/></template>
+		<MkSpacer :content-max="700" :margin-min="16" :margin-max="32">
+			<FormSuspense :p="init">
+				<MkInfo class="_formBlock">{{
+					i18n.ts.proxyAccountDescription
+				}}</MkInfo>
+				<MkKeyValue class="_formBlock">
+					<template #key>{{ i18n.ts.proxyAccount }}</template>
+					<template #value>{{
+						proxyAccount
+							? `@${proxyAccount.username}`
+							: i18n.ts.none
+					}}</template>
+				</MkKeyValue>
 
-			<FormButton primary class="_formBlock" @click="chooseProxyAccount">{{ i18n.ts.selectAccount }}</FormButton>
-		</FormSuspense>
-	</MkSpacer>
-</MkStickyContainer>
+				<FormButton
+					primary
+					class="_formBlock"
+					@click="chooseProxyAccount"
+					>{{ i18n.ts.selectAccount }}</FormButton
+				>
+			</FormSuspense>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import MkKeyValue from '@/components/MkKeyValue.vue';
-import FormButton from '@/components/MkButton.vue';
-import MkInfo from '@/components/MkInfo.vue';
-import FormSuspense from '@/components/form/suspense.vue';
-import * as os from '@/os';
-import { fetchInstance } from '@/instance';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import {} from "vue";
+import MkKeyValue from "@/components/MkKeyValue.vue";
+import FormButton from "@/components/MkButton.vue";
+import MkInfo from "@/components/MkInfo.vue";
+import FormSuspense from "@/components/form/suspense.vue";
+import * as os from "@/os";
+import { fetchInstance } from "@/instance";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
 let proxyAccount: any = $ref(null);
 let proxyAccountId: any = $ref(null);
 
 async function init() {
-	const meta = await os.api('admin/meta');
+	const meta = await os.api("admin/meta");
 	proxyAccountId = meta.proxyAccountId;
 	if (proxyAccountId) {
-		proxyAccount = await os.api('users/show', { userId: proxyAccountId });
+		proxyAccount = await os.api("users/show", { userId: proxyAccountId });
 	}
 }
 
 function chooseProxyAccount() {
-	os.selectUser().then(user => {
+	os.selectUser().then((user) => {
 		proxyAccount = user;
 		proxyAccountId = user.id;
 		save();
@@ -46,7 +62,7 @@ function chooseProxyAccount() {
 }
 
 function save() {
-	os.apiWithDialog('admin/update-meta', {
+	os.apiWithDialog("admin/update-meta", {
 		proxyAccountId: proxyAccountId,
 	}).then(() => {
 		fetchInstance();
@@ -59,6 +75,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.proxyAccount,
-	icon: 'ph-ghost ph-bold ph-lg',
+	icon: "ph-ghost ph-bold ph-lg",
 });
 </script>
diff --git a/packages/client/src/pages/admin/queue.chart.chart.vue b/packages/client/src/pages/admin/queue.chart.chart.vue
index ba6f6505ce..bb7d3c1a13 100644
--- a/packages/client/src/pages/admin/queue.chart.chart.vue
+++ b/packages/client/src/pages/admin/queue.chart.chart.vue
@@ -1,9 +1,9 @@
 <template>
-<canvas ref="chartEl"></canvas>
+	<canvas ref="chartEl"></canvas>
 </template>
 
 <script lang="ts" setup>
-import { watch, onMounted, onUnmounted, ref } from 'vue';
+import { watch, onMounted, onUnmounted, ref } from "vue";
 import {
 	Chart,
 	ArcElement,
@@ -20,11 +20,11 @@ import {
 	Tooltip,
 	SubTitle,
 	Filler,
-} from 'chart.js';
-import number from '@/filters/number';
-import * as os from '@/os';
-import { defaultStore } from '@/store';
-import { useChartTooltip } from '@/scripts/use-chart-tooltip';
+} from "chart.js";
+import number from "@/filters/number";
+import * as os from "@/os";
+import { defaultStore } from "@/store";
+import { useChartTooltip } from "@/scripts/use-chart-tooltip";
 
 Chart.register(
 	ArcElement,
@@ -40,7 +40,7 @@ Chart.register(
 	Title,
 	Tooltip,
 	SubTitle,
-	Filler,
+	Filler
 );
 
 const props = defineProps<{
@@ -57,10 +57,14 @@ const alpha = (hex, a) => {
 
 const chartEl = ref<HTMLCanvasElement>(null);
 
-const gridColor = defaultStore.state.darkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';
+const gridColor = defaultStore.state.darkMode
+	? "rgba(255, 255, 255, 0.1)"
+	: "rgba(0, 0, 0, 0.1)";
 
 // フォントカラー
-Chart.defaults.color = getComputedStyle(document.documentElement).getPropertyValue('--fg');
+Chart.defaults.color = getComputedStyle(
+	document.documentElement
+).getPropertyValue("--fg");
 
 const { handler: externalTooltipHandler } = useChartTooltip();
 
@@ -69,7 +73,7 @@ let chartInstance: Chart;
 function setData(values) {
 	if (chartInstance == null) return;
 	for (const value of values) {
-		chartInstance.data.labels.push('');
+		chartInstance.data.labels.push("");
 		chartInstance.data.datasets[0].data.push(value);
 		if (chartInstance.data.datasets[0].data.length > 200) {
 			chartInstance.data.labels.shift();
@@ -81,7 +85,7 @@ function setData(values) {
 
 function pushData(value) {
 	if (chartInstance == null) return;
-	chartInstance.data.labels.push('');
+	chartInstance.data.labels.push("");
 	chartInstance.data.datasets[0].data.push(value);
 	if (chartInstance.data.datasets[0].data.length > 200) {
 		chartInstance.data.labels.shift();
@@ -91,34 +95,44 @@ function pushData(value) {
 }
 
 const label =
-	props.type === 'process' ? 'Process' :
-	props.type === 'active' ? 'Active' :
-	props.type === 'delayed' ? 'Delayed' :
-	props.type === 'waiting' ? 'Waiting' :
-	'?' as never;
+	props.type === "process"
+		? "Process"
+		: props.type === "active"
+		? "Active"
+		: props.type === "delayed"
+		? "Delayed"
+		: props.type === "waiting"
+		? "Waiting"
+		: ("?" as never);
 
 const color =
-	props.type === 'process' ? '#9ccfd8' :
-	props.type === 'active' ? '#31748f' :
-	props.type === 'delayed' ? '#eb6f92' :
-	props.type === 'waiting' ? '#f6c177' :
-	'?' as never;
+	props.type === "process"
+		? "#9ccfd8"
+		: props.type === "active"
+		? "#31748f"
+		: props.type === "delayed"
+		? "#eb6f92"
+		: props.type === "waiting"
+		? "#f6c177"
+		: ("?" as never);
 
 onMounted(() => {
 	chartInstance = new Chart(chartEl.value, {
-		type: 'line',
+		type: "line",
 		data: {
 			labels: [],
-			datasets: [{
-				label: label,
-				pointRadius: 0,
-				tension: 0.3,
-				borderWidth: 2,
-				borderJoinStyle: 'round',
-				borderColor: color,
-				backgroundColor: alpha(color, 0.1),
-				data: [],
-			}],
+			datasets: [
+				{
+					label: label,
+					pointRadius: 0,
+					tension: 0.3,
+					borderWidth: 2,
+					borderJoinStyle: "round",
+					borderColor: color,
+					backgroundColor: alpha(color, 0.1),
+					data: [],
+				},
+			],
 		},
 		options: {
 			aspectRatio: 2.5,
@@ -135,7 +149,7 @@ onMounted(() => {
 					grid: {
 						display: true,
 						color: gridColor,
-						borderColor: 'rgb(0, 0, 0, 0)',
+						borderColor: "rgb(0, 0, 0, 0)",
 					},
 					ticks: {
 						display: false,
@@ -146,7 +160,7 @@ onMounted(() => {
 					min: 0,
 					grid: {
 						color: gridColor,
-						borderColor: 'rgb(0, 0, 0, 0)',
+						borderColor: "rgb(0, 0, 0, 0)",
 					},
 				},
 			},
@@ -159,7 +173,7 @@ onMounted(() => {
 				},
 				tooltip: {
 					enabled: false,
-					mode: 'index',
+					mode: "index",
 					animation: {
 						duration: 0,
 					},
@@ -176,6 +190,4 @@ defineExpose({
 });
 </script>
 
-<style lang="scss" scoped>
-
-</style>
+<style lang="scss" scoped></style>
diff --git a/packages/client/src/pages/admin/queue.chart.vue b/packages/client/src/pages/admin/queue.chart.vue
index 186a22c43e..e9d0f0655e 100644
--- a/packages/client/src/pages/admin/queue.chart.vue
+++ b/packages/client/src/pages/admin/queue.chart.vue
@@ -1,52 +1,66 @@
 <template>
-<div class="pumxzjhg">
-	<div class="_table status">
-		<div class="_row">
-			<div class="_cell"><div class="_label">Process</div>{{ number(activeSincePrevTick) }}</div>
-			<div class="_cell"><div class="_label">Active</div>{{ number(active) }}</div>
-			<div class="_cell"><div class="_label">Waiting</div>{{ number(waiting) }}</div>
-			<div class="_cell"><div class="_label">Delayed</div>{{ number(delayed) }}</div>
-		</div>
-	</div>
-	<div class="charts">
-		<div class="chart">
-			<div class="title">Process</div>
-			<XChart ref="chartProcess" type="process"/>
-		</div>
-		<div class="chart">
-			<div class="title">Active</div>
-			<XChart ref="chartActive" type="active"/>
-		</div>
-		<div class="chart">
-			<div class="title">Delayed</div>
-			<XChart ref="chartDelayed" type="delayed"/>
-		</div>
-		<div class="chart">
-			<div class="title">Waiting</div>
-			<XChart ref="chartWaiting" type="waiting"/>
-		</div>
-	</div>
-	<div class="jobs">
-		<div v-if="jobs.length > 0">
-			<div v-for="job in jobs" :key="job[0]">
-				<span>{{ job[0] }}</span>
-				<span style="margin-left: 8px; opacity: 0.7;">({{ number(job[1]) }} jobs)</span>
+	<div class="pumxzjhg">
+		<div class="_table status">
+			<div class="_row">
+				<div class="_cell">
+					<div class="_label">Process</div>
+					{{ number(activeSincePrevTick) }}
+				</div>
+				<div class="_cell">
+					<div class="_label">Active</div>
+					{{ number(active) }}
+				</div>
+				<div class="_cell">
+					<div class="_label">Waiting</div>
+					{{ number(waiting) }}
+				</div>
+				<div class="_cell">
+					<div class="_label">Delayed</div>
+					{{ number(delayed) }}
+				</div>
 			</div>
 		</div>
-		<span v-else style="opacity: 0.5;">{{ i18n.ts.noJobs }}</span>
+		<div class="charts">
+			<div class="chart">
+				<div class="title">Process</div>
+				<XChart ref="chartProcess" type="process" />
+			</div>
+			<div class="chart">
+				<div class="title">Active</div>
+				<XChart ref="chartActive" type="active" />
+			</div>
+			<div class="chart">
+				<div class="title">Delayed</div>
+				<XChart ref="chartDelayed" type="delayed" />
+			</div>
+			<div class="chart">
+				<div class="title">Waiting</div>
+				<XChart ref="chartWaiting" type="waiting" />
+			</div>
+		</div>
+		<div class="jobs">
+			<div v-if="jobs.length > 0">
+				<div v-for="job in jobs" :key="job[0]">
+					<span>{{ job[0] }}</span>
+					<span style="margin-left: 8px; opacity: 0.7"
+						>({{ number(job[1]) }} jobs)</span
+					>
+				</div>
+			</div>
+			<span v-else style="opacity: 0.5">{{ i18n.ts.noJobs }}</span>
+		</div>
 	</div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { markRaw, onMounted, onUnmounted, ref } from 'vue';
-import XChart from './queue.chart.chart.vue';
-import number from '@/filters/number';
-import * as os from '@/os';
-import { stream } from '@/stream';
-import { i18n } from '@/i18n';
+import { markRaw, onMounted, onUnmounted, ref } from "vue";
+import XChart from "./queue.chart.chart.vue";
+import number from "@/filters/number";
+import * as os from "@/os";
+import { stream } from "@/stream";
+import { i18n } from "@/i18n";
 
-const connection = markRaw(stream.useChannel('queueStats'));
+const connection = markRaw(stream.useChannel("queueStats"));
 
 const activeSincePrevTick = ref(0);
 const active = ref(0);
@@ -94,21 +108,28 @@ const onStatsLog = (statsLog) => {
 };
 
 onMounted(() => {
-	os.api(props.domain === 'inbox' ? 'admin/queue/inbox-delayed' : props.domain === 'deliver' ? 'admin/queue/deliver-delayed' : null, {}).then(result => {
+	os.api(
+		props.domain === "inbox"
+			? "admin/queue/inbox-delayed"
+			: props.domain === "deliver"
+			? "admin/queue/deliver-delayed"
+			: null,
+		{}
+	).then((result) => {
 		jobs.value = result;
 	});
 
-	connection.on('stats', onStats);
-	connection.on('statsLog', onStatsLog);
-	connection.send('requestLog', {
+	connection.on("stats", onStats);
+	connection.on("statsLog", onStatsLog);
+	connection.send("requestLog", {
 		id: Math.random().toString().substr(2, 8),
 		length: 200,
 	});
 });
 
 onUnmounted(() => {
-	connection.off('stats', onStats);
-	connection.off('statsLog', onStatsLog);
+	connection.off("stats", onStats);
+	connection.off("statsLog", onStatsLog);
 	connection.dispose();
 });
 </script>
@@ -144,6 +165,5 @@ onUnmounted(() => {
 		background: var(--panel);
 		border-radius: var(--radius);
 	}
-
 }
 </style>
diff --git a/packages/client/src/pages/admin/queue.vue b/packages/client/src/pages/admin/queue.vue
index f4c74b7062..b43da1f0a7 100644
--- a/packages/client/src/pages/admin/queue.vue
+++ b/packages/client/src/pages/admin/queue.vue
@@ -1,57 +1,68 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs" :display-back-button="true"/></template>
-	<MkSpacer :content-max="800">
-		<XQueue v-if="tab === 'deliver'" domain="deliver"/>
-		<XQueue v-else-if="tab === 'inbox'" domain="inbox"/>
-	</MkSpacer>
-</MkStickyContainer>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader
+				v-model:tab="tab"
+				:actions="headerActions"
+				:tabs="headerTabs"
+				:display-back-button="true"
+		/></template>
+		<MkSpacer :content-max="800">
+			<XQueue v-if="tab === 'deliver'" domain="deliver" />
+			<XQueue v-else-if="tab === 'inbox'" domain="inbox" />
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { markRaw, onMounted, onBeforeUnmount, nextTick } from 'vue';
-import XQueue from './queue.chart.vue';
-import MkButton from '@/components/MkButton.vue';
-import * as os from '@/os';
-import * as config from '@/config';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import { markRaw, onMounted, onBeforeUnmount, nextTick } from "vue";
+import XQueue from "./queue.chart.vue";
+import MkButton from "@/components/MkButton.vue";
+import * as os from "@/os";
+import * as config from "@/config";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
-let tab = $ref('deliver');
+let tab = $ref("deliver");
 
 function clear() {
 	os.confirm({
-		type: 'warning',
+		type: "warning",
 		title: i18n.ts.clearQueueConfirmTitle,
 		text: i18n.ts.clearQueueConfirmText,
 	}).then(({ canceled }) => {
 		if (canceled) return;
 
-		os.apiWithDialog('admin/queue/clear');
+		os.apiWithDialog("admin/queue/clear");
 	});
 }
 
-const headerActions = $computed(() => [{
-	asFullButton: true,
-	icon: 'ph-arrow-square-up-right ph-bold ph-lg',
-	text: i18n.ts.dashboard,
-	handler: () => {
-		window.open(config.url + '/queue', '_blank');
+const headerActions = $computed(() => [
+	{
+		asFullButton: true,
+		icon: "ph-arrow-square-up-right ph-bold ph-lg",
+		text: i18n.ts.dashboard,
+		handler: () => {
+			window.open(config.url + "/queue", "_blank");
+		},
 	},
-}]);
+]);
 
-const headerTabs = $computed(() => [{
-	key: 'deliver',
-	title: 'Deliver',
-	icon: 'ph-upload ph-bold ph-lg',
-}, {
-	key: 'inbox',
-	title: 'Inbox',
-	icon: 'ph-download ph-bold ph-lg',
-}]);
+const headerTabs = $computed(() => [
+	{
+		key: "deliver",
+		title: "Deliver",
+		icon: "ph-upload ph-bold ph-lg",
+	},
+	{
+		key: "inbox",
+		title: "Inbox",
+		icon: "ph-download ph-bold ph-lg",
+	},
+]);
 
 definePageMetadata({
 	title: i18n.ts.jobQueue,
-	icon: 'ph-clipboard-text ph-bold ph-lg',
+	icon: "ph-clipboard-text ph-bold ph-lg",
 });
 </script>
diff --git a/packages/client/src/pages/admin/relays.vue b/packages/client/src/pages/admin/relays.vue
index 232faefac3..2565ac16cb 100644
--- a/packages/client/src/pages/admin/relays.vue
+++ b/packages/client/src/pages/admin/relays.vue
@@ -1,82 +1,114 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs" :display-back-button="true"/></template>
-	<MkSpacer :content-max="800">
-		<div v-for="relay in relays" :key="relay.inbox" class="relaycxt _panel _block" style="padding: 16px;">
-			<div>{{ relay.inbox }}</div>
-			<div class="status">
-				<i v-if="relay.status === 'accepted'" class="ph-check ph-bold ph-lg icon accepted"></i>
-				<i v-else-if="relay.status === 'rejected'" class="ph-prohibit ph-bold ph-lg icon rejected"></i>
-				<i v-else class="ph-clock ph-bold ph-lg icon requesting"></i>
-				<span>{{ i18n.t(`_relayStatus.${relay.status}`) }}</span>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader
+				:actions="headerActions"
+				:tabs="headerTabs"
+				:display-back-button="true"
+		/></template>
+		<MkSpacer :content-max="800">
+			<div
+				v-for="relay in relays"
+				:key="relay.inbox"
+				class="relaycxt _panel _block"
+				style="padding: 16px"
+			>
+				<div>{{ relay.inbox }}</div>
+				<div class="status">
+					<i
+						v-if="relay.status === 'accepted'"
+						class="ph-check ph-bold ph-lg icon accepted"
+					></i>
+					<i
+						v-else-if="relay.status === 'rejected'"
+						class="ph-prohibit ph-bold ph-lg icon rejected"
+					></i>
+					<i
+						v-else
+						class="ph-clock ph-bold ph-lg icon requesting"
+					></i>
+					<span>{{ i18n.t(`_relayStatus.${relay.status}`) }}</span>
+				</div>
+				<MkButton
+					class="button"
+					inline
+					danger
+					@click="remove(relay.inbox)"
+					><i class="ph-trash ph-bold ph-lg"></i>
+					{{ i18n.ts.remove }}</MkButton
+				>
 			</div>
-			<MkButton class="button" inline danger @click="remove(relay.inbox)"><i class="ph-trash ph-bold ph-lg"></i> {{ i18n.ts.remove }}</MkButton>
-		</div>
-	</MkSpacer>
-</MkStickyContainer>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import MkButton from '@/components/MkButton.vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import {} from "vue";
+import MkButton from "@/components/MkButton.vue";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
 let relays: any[] = $ref([]);
 
 async function addRelay() {
 	const { canceled, result: inbox } = await os.inputText({
 		title: i18n.ts.addRelay,
-		type: 'url',
+		type: "url",
 		placeholder: i18n.ts.inboxUrl,
 	});
 	if (canceled) return;
-	os.api('admin/relays/add', {
+	os.api("admin/relays/add", {
 		inbox,
-	}).then((relay: any) => {
-		refresh();
-	}).catch((err: any) => {
-		os.alert({
-			type: 'error',
-			text: err.message || err,
+	})
+		.then((relay: any) => {
+			refresh();
+		})
+		.catch((err: any) => {
+			os.alert({
+				type: "error",
+				text: err.message || err,
+			});
 		});
-	});
 }
 
 function remove(inbox: string) {
-	os.api('admin/relays/remove', {
+	os.api("admin/relays/remove", {
 		inbox,
-	}).then(() => {
-		refresh();
-	}).catch((err: any) => {
-		os.alert({
-			type: 'error',
-			text: err.message || err,
+	})
+		.then(() => {
+			refresh();
+		})
+		.catch((err: any) => {
+			os.alert({
+				type: "error",
+				text: err.message || err,
+			});
 		});
-	});
 }
 
 function refresh() {
-	os.api('admin/relays/list').then((relayList: any) => {
+	os.api("admin/relays/list").then((relayList: any) => {
 		relays = relayList;
 	});
 }
 
 refresh();
 
-const headerActions = $computed(() => [{
-	asFullButton: true,
-	icon: 'ph-plus ph-bold ph-lg',
-	text: i18n.ts.addRelay,
-	handler: addRelay,
-}]);
+const headerActions = $computed(() => [
+	{
+		asFullButton: true,
+		icon: "ph-plus ph-bold ph-lg",
+		text: i18n.ts.addRelay,
+		handler: addRelay,
+	},
+]);
 
 const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.relays,
-	icon: 'ph-flow-arrow ph-bold ph-lg',
+	icon: "ph-flow-arrow ph-bold ph-lg",
 });
 </script>
 
diff --git a/packages/client/src/pages/admin/security.vue b/packages/client/src/pages/admin/security.vue
index 60079c8ebc..b93c803611 100644
--- a/packages/client/src/pages/admin/security.vue
+++ b/packages/client/src/pages/admin/security.vue
@@ -1,146 +1,280 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs" :display-back-button="true"/></template>
-	<MkSpacer :content-max="700" :margin-min="16" :margin-max="32">
-		<FormSuspense :p="init">
-			<div class="_formRoot">
-				<FormFolder class="_formBlock">
-					<template #icon><i class="ph-robot ph-bold ph-lg"></i></template>
-					<template #label>{{ i18n.ts.botProtection }}</template>
-					<template v-if="enableHcaptcha" #suffix>hCaptcha</template>
-					<template v-else-if="enableRecaptcha" #suffix>reCAPTCHA</template>
-					<template v-else #suffix>{{ i18n.ts.none }} ({{ i18n.ts.notRecommended }})</template>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader
+				:actions="headerActions"
+				:tabs="headerTabs"
+				:display-back-button="true"
+		/></template>
+		<MkSpacer :content-max="700" :margin-min="16" :margin-max="32">
+			<FormSuspense :p="init">
+				<div class="_formRoot">
+					<FormFolder class="_formBlock">
+						<template #icon
+							><i class="ph-robot ph-bold ph-lg"></i
+						></template>
+						<template #label>{{ i18n.ts.botProtection }}</template>
+						<template v-if="enableHcaptcha" #suffix
+							>hCaptcha</template
+						>
+						<template v-else-if="enableRecaptcha" #suffix
+							>reCAPTCHA</template
+						>
+						<template v-else #suffix
+							>{{ i18n.ts.none }} ({{
+								i18n.ts.notRecommended
+							}})</template
+						>
 
-					<XBotProtection/>
-				</FormFolder>
+						<XBotProtection />
+					</FormFolder>
 
-				<FormFolder class="_formBlock">
-					<template #icon><i class="ph-eye-slash ph-bold ph-lg"></i></template>
-					<template #label>{{ i18n.ts.sensitiveMediaDetection }}</template>
-					<template v-if="sensitiveMediaDetection === 'all'" #suffix>{{ i18n.ts.all }}</template>
-					<template v-else-if="sensitiveMediaDetection === 'local'" #suffix>{{ i18n.ts.localOnly }}</template>
-					<template v-else-if="sensitiveMediaDetection === 'remote'" #suffix>{{ i18n.ts.remoteOnly }}</template>
-					<template v-else #suffix>{{ i18n.ts.none }}</template>
+					<FormFolder class="_formBlock">
+						<template #icon
+							><i class="ph-eye-slash ph-bold ph-lg"></i
+						></template>
+						<template #label>{{
+							i18n.ts.sensitiveMediaDetection
+						}}</template>
+						<template
+							v-if="sensitiveMediaDetection === 'all'"
+							#suffix
+							>{{ i18n.ts.all }}</template
+						>
+						<template
+							v-else-if="sensitiveMediaDetection === 'local'"
+							#suffix
+							>{{ i18n.ts.localOnly }}</template
+						>
+						<template
+							v-else-if="sensitiveMediaDetection === 'remote'"
+							#suffix
+							>{{ i18n.ts.remoteOnly }}</template
+						>
+						<template v-else #suffix>{{ i18n.ts.none }}</template>
 
-					<div class="_formRoot">
-						<span class="_formBlock">{{ i18n.ts._sensitiveMediaDetection.description }}</span>
+						<div class="_formRoot">
+							<span class="_formBlock">{{
+								i18n.ts._sensitiveMediaDetection.description
+							}}</span>
 
-						<FormRadios v-model="sensitiveMediaDetection" class="_formBlock">
-							<option value="none">{{ i18n.ts.none }}</option>
-							<option value="all">{{ i18n.ts.all }}</option>
-							<option value="local">{{ i18n.ts.localOnly }}</option>
-							<option value="remote">{{ i18n.ts.remoteOnly }}</option>
-						</FormRadios>
+							<FormRadios
+								v-model="sensitiveMediaDetection"
+								class="_formBlock"
+							>
+								<option value="none">{{ i18n.ts.none }}</option>
+								<option value="all">{{ i18n.ts.all }}</option>
+								<option value="local">
+									{{ i18n.ts.localOnly }}
+								</option>
+								<option value="remote">
+									{{ i18n.ts.remoteOnly }}
+								</option>
+							</FormRadios>
 
-						<FormRange v-model="sensitiveMediaDetectionSensitivity" :min="0" :max="4" :step="1" :text-converter="(v) => `${v + 1}`" class="_formBlock">
-							<template #label>{{ i18n.ts._sensitiveMediaDetection.sensitivity }}</template>
-							<template #caption>{{ i18n.ts._sensitiveMediaDetection.sensitivityDescription }}</template>
-						</FormRange>
+							<FormRange
+								v-model="sensitiveMediaDetectionSensitivity"
+								:min="0"
+								:max="4"
+								:step="1"
+								:text-converter="(v) => `${v + 1}`"
+								class="_formBlock"
+							>
+								<template #label>{{
+									i18n.ts._sensitiveMediaDetection.sensitivity
+								}}</template>
+								<template #caption>{{
+									i18n.ts._sensitiveMediaDetection
+										.sensitivityDescription
+								}}</template>
+							</FormRange>
 
-						<FormSwitch v-model="enableSensitiveMediaDetectionForVideos" class="_formBlock">
-							<template #label>{{ i18n.ts._sensitiveMediaDetection.analyzeVideos }}<span class="_beta">{{ i18n.ts.beta }}</span></template>
-							<template #caption>{{ i18n.ts._sensitiveMediaDetection.analyzeVideosDescription }}</template>
-						</FormSwitch>
+							<FormSwitch
+								v-model="enableSensitiveMediaDetectionForVideos"
+								class="_formBlock"
+							>
+								<template #label
+									>{{
+										i18n.ts._sensitiveMediaDetection
+											.analyzeVideos
+									}}<span class="_beta">{{
+										i18n.ts.beta
+									}}</span></template
+								>
+								<template #caption>{{
+									i18n.ts._sensitiveMediaDetection
+										.analyzeVideosDescription
+								}}</template>
+							</FormSwitch>
 
-						<FormSwitch v-model="setSensitiveFlagAutomatically" class="_formBlock">
-							<template #label>{{ i18n.ts._sensitiveMediaDetection.setSensitiveFlagAutomatically }} ({{ i18n.ts.notRecommended }})</template>
-							<template #caption>{{ i18n.ts._sensitiveMediaDetection.setSensitiveFlagAutomaticallyDescription }}</template>
-						</FormSwitch>
+							<FormSwitch
+								v-model="setSensitiveFlagAutomatically"
+								class="_formBlock"
+							>
+								<template #label
+									>{{
+										i18n.ts._sensitiveMediaDetection
+											.setSensitiveFlagAutomatically
+									}}
+									({{ i18n.ts.notRecommended }})</template
+								>
+								<template #caption>{{
+									i18n.ts._sensitiveMediaDetection
+										.setSensitiveFlagAutomaticallyDescription
+								}}</template>
+							</FormSwitch>
 
-						<!-- 現状 false positive が多すぎて実用に耐えない
+							<!-- 現状 false positive が多すぎて実用に耐えない
 						<FormSwitch v-model="disallowUploadWhenPredictedAsPorn" class="_formBlock">
 							<template #label>{{ i18n.ts._sensitiveMediaDetection.disallowUploadWhenPredictedAsPorn }}</template>
 						</FormSwitch>
 						-->
 
-						<FormButton primary class="_formBlock" @click="save"><i class="ph-floppy-disk-back ph-bold ph-lg"></i> {{ i18n.ts.save }}</FormButton>
-					</div>
-				</FormFolder>
+							<FormButton primary class="_formBlock" @click="save"
+								><i
+									class="ph-floppy-disk-back ph-bold ph-lg"
+								></i>
+								{{ i18n.ts.save }}</FormButton
+							>
+						</div>
+					</FormFolder>
 
-				<FormFolder class="_formBlock">
-					<template #label>Active Email Validation</template>
-					<template v-if="enableActiveEmailValidation" #suffix>Enabled</template>
-					<template v-else #suffix>Disabled</template>
+					<FormFolder class="_formBlock">
+						<template #label>Active Email Validation</template>
+						<template v-if="enableActiveEmailValidation" #suffix
+							>Enabled</template
+						>
+						<template v-else #suffix>Disabled</template>
 
-					<div class="_formRoot">
-						<span class="_formBlock">{{ i18n.ts.activeEmailValidationDescription }}</span>
-						<FormSwitch v-model="enableActiveEmailValidation" class="_formBlock" @update:modelValue="save">
-							<template #label>Enable</template>
-						</FormSwitch>
-					</div>
-				</FormFolder>
+						<div class="_formRoot">
+							<span class="_formBlock">{{
+								i18n.ts.activeEmailValidationDescription
+							}}</span>
+							<FormSwitch
+								v-model="enableActiveEmailValidation"
+								class="_formBlock"
+								@update:modelValue="save"
+							>
+								<template #label>Enable</template>
+							</FormSwitch>
+						</div>
+					</FormFolder>
 
-				<FormFolder class="_formBlock">
-					<template #label>Log IP address</template>
-					<template v-if="enableIpLogging" #suffix>Enabled</template>
-					<template v-else #suffix>Disabled</template>
+					<FormFolder class="_formBlock">
+						<template #label>Log IP address</template>
+						<template v-if="enableIpLogging" #suffix
+							>Enabled</template
+						>
+						<template v-else #suffix>Disabled</template>
 
-					<div class="_formRoot">
-						<FormSwitch v-model="enableIpLogging" class="_formBlock" @update:modelValue="save">
-							<template #label>Enable</template>
-						</FormSwitch>
-					</div>
-				</FormFolder>
+						<div class="_formRoot">
+							<FormSwitch
+								v-model="enableIpLogging"
+								class="_formBlock"
+								@update:modelValue="save"
+							>
+								<template #label>Enable</template>
+							</FormSwitch>
+						</div>
+					</FormFolder>
 
-				<FormFolder class="_formBlock">
-					<template #label>Summaly Proxy</template>
+					<FormFolder class="_formBlock">
+						<template #label>Summaly Proxy</template>
 
-					<div class="_formRoot">
-						<FormInput v-model="summalyProxy" class="_formBlock">
-							<template #prefix><i class="ph-link-simple ph-bold ph-lg"></i></template>
-							<template #label>Summaly Proxy URL</template>
-						</FormInput>
+						<div class="_formRoot">
+							<FormInput
+								v-model="summalyProxy"
+								class="_formBlock"
+							>
+								<template #prefix
+									><i class="ph-link-simple ph-bold ph-lg"></i
+								></template>
+								<template #label>Summaly Proxy URL</template>
+							</FormInput>
 
-						<FormButton primary class="_formBlock" @click="save"><i class="ph-floppy-disk-back ph-bold ph-lg"></i> {{ i18n.ts.save }}</FormButton>
-					</div>
-				</FormFolder>
+							<FormButton primary class="_formBlock" @click="save"
+								><i
+									class="ph-floppy-disk-back ph-bold ph-lg"
+								></i>
+								{{ i18n.ts.save }}</FormButton
+							>
+						</div>
+					</FormFolder>
 
-				<FormFolder class="_formBlock">
-					<template #label>{{ i18n.ts.instanceSecurity }}</template>
+					<FormFolder class="_formBlock">
+						<template #label>{{
+							i18n.ts.instanceSecurity
+						}}</template>
 
-					<div class="_formRoot">
-						<FormSwitch v-if="!privateMode" v-model="secureMode">
-							<template #label>{{ i18n.ts.secureMode }}</template>
-							<template #caption>{{ i18n.ts.secureModeInfo }}</template>
-						</FormSwitch>
-						<FormSwitch v-model="privateMode">
-							<template #label>{{ i18n.ts.privateMode }}</template>
-							<template #caption>{{ i18n.ts.privateModeInfo }}</template>
-						</FormSwitch>
-						<FormTextarea v-if="privateMode" v-model="allowedHosts">
-							<template #label>{{ i18n.ts.allowedInstances }}</template>
-							<template #caption>{{ i18n.ts.allowedInstancesDescription }}</template>
-						</FormTextarea>
-						<FormButton primary class="_formBlock" @click="saveInstance"><i class="ph-floppy-disk-back ph-bold ph-lg"></i> {{ i18n.ts.save }}</FormButton>
-					</div>
-				</FormFolder>
-			</div>
-		</FormSuspense>
-	</MkSpacer>
-</MkStickyContainer>
+						<div class="_formRoot">
+							<FormSwitch
+								v-if="!privateMode"
+								v-model="secureMode"
+							>
+								<template #label>{{
+									i18n.ts.secureMode
+								}}</template>
+								<template #caption>{{
+									i18n.ts.secureModeInfo
+								}}</template>
+							</FormSwitch>
+							<FormSwitch v-model="privateMode">
+								<template #label>{{
+									i18n.ts.privateMode
+								}}</template>
+								<template #caption>{{
+									i18n.ts.privateModeInfo
+								}}</template>
+							</FormSwitch>
+							<FormTextarea
+								v-if="privateMode"
+								v-model="allowedHosts"
+							>
+								<template #label>{{
+									i18n.ts.allowedInstances
+								}}</template>
+								<template #caption>{{
+									i18n.ts.allowedInstancesDescription
+								}}</template>
+							</FormTextarea>
+							<FormButton
+								primary
+								class="_formBlock"
+								@click="saveInstance"
+								><i
+									class="ph-floppy-disk-back ph-bold ph-lg"
+								></i>
+								{{ i18n.ts.save }}</FormButton
+							>
+						</div>
+					</FormFolder>
+				</div>
+			</FormSuspense>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import XBotProtection from './bot-protection.vue';
-import FormFolder from '@/components/form/folder.vue';
-import FormRadios from '@/components/form/radios.vue';
-import FormSwitch from '@/components/form/switch.vue';
-import FormInfo from '@/components/MkInfo.vue';
-import FormSuspense from '@/components/form/suspense.vue';
-import FormRange from '@/components/form/range.vue';
-import FormInput from '@/components/form/input.vue';
-import FormTextarea from '@/components/form/textarea.vue';
-import FormButton from '@/components/MkButton.vue';
-import * as os from '@/os';
-import { fetchInstance } from '@/instance';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import {} from "vue";
+import XBotProtection from "./bot-protection.vue";
+import FormFolder from "@/components/form/folder.vue";
+import FormRadios from "@/components/form/radios.vue";
+import FormSwitch from "@/components/form/switch.vue";
+import FormInfo from "@/components/MkInfo.vue";
+import FormSuspense from "@/components/form/suspense.vue";
+import FormRange from "@/components/form/range.vue";
+import FormInput from "@/components/form/input.vue";
+import FormTextarea from "@/components/form/textarea.vue";
+import FormButton from "@/components/MkButton.vue";
+import * as os from "@/os";
+import { fetchInstance } from "@/instance";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
-let summalyProxy: string = $ref('');
+let summalyProxy: string = $ref("");
 let enableHcaptcha: boolean = $ref(false);
 let enableRecaptcha: boolean = $ref(false);
-let sensitiveMediaDetection: string = $ref('none');
+let sensitiveMediaDetection: string = $ref("none");
 let sensitiveMediaDetectionSensitivity: number = $ref(0);
 let setSensitiveFlagAutomatically: boolean = $ref(false);
 let enableSensitiveMediaDetectionForVideos: boolean = $ref(false);
@@ -149,41 +283,53 @@ let enableActiveEmailValidation: boolean = $ref(false);
 
 let secureMode: boolean = $ref(false);
 let privateMode: boolean = $ref(false);
-let allowedHosts: string = $ref('');
+let allowedHosts: string = $ref("");
 
 async function init() {
-	const meta = await os.api('admin/meta');
+	const meta = await os.api("admin/meta");
 	summalyProxy = meta.summalyProxy;
 	enableHcaptcha = meta.enableHcaptcha;
 	enableRecaptcha = meta.enableRecaptcha;
 	sensitiveMediaDetection = meta.sensitiveMediaDetection;
 	sensitiveMediaDetectionSensitivity =
-		meta.sensitiveMediaDetectionSensitivity === 'veryLow' ? 0 :
-		meta.sensitiveMediaDetectionSensitivity === 'low' ? 1 :
-		meta.sensitiveMediaDetectionSensitivity === 'medium' ? 2 :
-		meta.sensitiveMediaDetectionSensitivity === 'high' ? 3 :
-		meta.sensitiveMediaDetectionSensitivity === 'veryHigh' ? 4 : 0;
+		meta.sensitiveMediaDetectionSensitivity === "veryLow"
+			? 0
+			: meta.sensitiveMediaDetectionSensitivity === "low"
+			? 1
+			: meta.sensitiveMediaDetectionSensitivity === "medium"
+			? 2
+			: meta.sensitiveMediaDetectionSensitivity === "high"
+			? 3
+			: meta.sensitiveMediaDetectionSensitivity === "veryHigh"
+			? 4
+			: 0;
 	setSensitiveFlagAutomatically = meta.setSensitiveFlagAutomatically;
-	enableSensitiveMediaDetectionForVideos = meta.enableSensitiveMediaDetectionForVideos;
+	enableSensitiveMediaDetectionForVideos =
+		meta.enableSensitiveMediaDetectionForVideos;
 	enableIpLogging = meta.enableIpLogging;
 	enableActiveEmailValidation = meta.enableActiveEmailValidation;
 
 	secureMode = meta.secureMode;
 	privateMode = meta.privateMode;
-	allowedHosts = meta.allowedHosts.join('\n');
+	allowedHosts = meta.allowedHosts.join("\n");
 }
 
 function save() {
-	os.apiWithDialog('admin/update-meta', {
+	os.apiWithDialog("admin/update-meta", {
 		summalyProxy,
 		sensitiveMediaDetection,
 		sensitiveMediaDetectionSensitivity:
-			sensitiveMediaDetectionSensitivity === 0 ? 'veryLow' :
-			sensitiveMediaDetectionSensitivity === 1 ? 'low' :
-			sensitiveMediaDetectionSensitivity === 2 ? 'medium' :
-			sensitiveMediaDetectionSensitivity === 3 ? 'high' :
-			sensitiveMediaDetectionSensitivity === 4 ? 'veryHigh' :
-			0,
+			sensitiveMediaDetectionSensitivity === 0
+				? "veryLow"
+				: sensitiveMediaDetectionSensitivity === 1
+				? "low"
+				: sensitiveMediaDetectionSensitivity === 2
+				? "medium"
+				: sensitiveMediaDetectionSensitivity === 3
+				? "high"
+				: sensitiveMediaDetectionSensitivity === 4
+				? "veryHigh"
+				: 0,
 		setSensitiveFlagAutomatically,
 		enableSensitiveMediaDetectionForVideos,
 		enableIpLogging,
@@ -194,10 +340,10 @@ function save() {
 }
 
 function saveInstance() {
-	os.apiWithDialog('admin/update-meta', {
+	os.apiWithDialog("admin/update-meta", {
 		secureMode,
 		privateMode,
-		allowedHosts: allowedHosts.split('\n'),
+		allowedHosts: allowedHosts.split("\n"),
 	}).then(() => {
 		fetchInstance();
 	});
@@ -209,6 +355,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.security,
-	icon: 'ph-lock ph-bold ph-lg',
+	icon: "ph-lock ph-bold ph-lg",
 });
 </script>
diff --git a/packages/client/src/pages/admin/settings.vue b/packages/client/src/pages/admin/settings.vue
index 9716b4f9bc..5349df805a 100644
--- a/packages/client/src/pages/admin/settings.vue
+++ b/packages/client/src/pages/admin/settings.vue
@@ -1,211 +1,397 @@
 <template>
-<div>
-	<MkStickyContainer>
-		<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs" :display-back-button="true"/></template>
-		<MkSpacer :content-max="700" :margin-min="16" :margin-max="32">
-			<FormSuspense :p="init">
-				<div class="_formRoot">
-					<FormInput v-model="name" class="_formBlock">
-						<template #label>{{ i18n.ts.instanceName }}</template>
-					</FormInput>
-
-					<FormTextarea v-model="description" class="_formBlock">
-						<template #label>{{ i18n.ts.instanceDescription }}</template>
-					</FormTextarea>
-
-					<FormInput v-model="tosUrl" class="_formBlock">
-						<template #prefix><i class="ph-link-simple ph-bold ph-lg"></i></template>
-						<template #label>{{ i18n.ts.tosUrl }}</template>
-					</FormInput>
-
-					<FormSplit :min-width="300">
-						<FormInput v-model="maintainerName" class="_formBlock">
-							<template #label>{{ i18n.ts.maintainerName }}</template>
+	<div>
+		<MkStickyContainer>
+			<template #header
+				><MkPageHeader
+					:actions="headerActions"
+					:tabs="headerTabs"
+					:display-back-button="true"
+			/></template>
+			<MkSpacer :content-max="700" :margin-min="16" :margin-max="32">
+				<FormSuspense :p="init">
+					<div class="_formRoot">
+						<FormInput v-model="name" class="_formBlock">
+							<template #label>{{
+								i18n.ts.instanceName
+							}}</template>
 						</FormInput>
 
-						<FormInput v-model="maintainerEmail" type="email" class="_formBlock">
-							<template #prefix><i class="ph-envelope-simple-open ph-bold ph-lg"></i></template>
-							<template #label>{{ i18n.ts.maintainerEmail }}</template>
-						</FormInput>
-					</FormSplit>
-
-					<FormTextarea v-model="pinnedUsers" class="_formBlock">
-						<template #label>{{ i18n.ts.pinnedUsers }}</template>
-						<template #caption>{{ i18n.ts.pinnedUsersDescription }}</template>
-					</FormTextarea>
-
-					<FormSection>
-						<FormSwitch v-model="enableRegistration" class="_formBlock">
-							<template #label>{{ i18n.ts.enableRegistration }}</template>
-						</FormSwitch>
-
-						<FormSwitch v-model="emailRequiredForSignup" class="_formBlock">
-							<template #label>{{ i18n.ts.emailRequiredForSignup }}</template>
-						</FormSwitch>
-					</FormSection>
-
-					<FormSection>
-						<FormSwitch v-model="enableRecommendedTimeline" class="_formBlock">{{ i18n.ts.enableRecommendedTimeline }}</FormSwitch>
-						<FormTextarea v-model="recommendedInstances" class="_formBlock">
-							<template #label>{{ i18n.ts.recommendedInstances }}</template>
-							<template #caption>{{ i18n.ts.recommendedInstancesDescription }}</template>
-						</FormTextarea>
-					</FormSection>
-
-					<FormSection>
-						<FormSwitch v-model="enableLocalTimeline" class="_formBlock">{{ i18n.ts.enableLocalTimeline }}</FormSwitch>
-						<FormSwitch v-model="enableGlobalTimeline" class="_formBlock">{{ i18n.ts.enableGlobalTimeline }}</FormSwitch>
-						<FormInfo class="_formBlock">{{ i18n.ts.disablingTimelinesInfo }}</FormInfo>
-					</FormSection>
-
-					<FormSection>
-						<MkRadios v-model="defaultReaction" class="_formBlock">
-							<template #label>{{ i18n.ts.defaultReaction }}</template>
-							<option value="⭐">
-								<MkEmoji class="emoji" emoji="⭐" style="height: 1.7em"/>
-							</option>
-							<option value="👍">
-								<MkEmoji class="emoji" emoji="👍" style="height: 1.7em"/>
-							</option>
-							<option value="❤️">
-								<MkEmoji class="emoji" emoji="❤️" style="height: 1.7em"/>
-							</option>
-							<option value="custom">
-								<FormInput v-model="defaultReactionCustom" class="_formBlock" :small="true" :placeholder="`:custom:`" style="margin: 0 0 !important"/>
-							</option>
-						</MkRadios>
-					</FormSection>
-
-					<FormSection>
-						<template #label>{{ i18n.ts.theme }}</template>
-
-						<FormInput v-model="iconUrl" class="_formBlock">
-							<template #prefix><i class="ph-link-simple ph-bold ph-lg"></i></template>
-							<template #label>{{ i18n.ts.iconUrl }}</template>
-						</FormInput>
-
-						<FormInput v-model="bannerUrl" class="_formBlock">
-							<template #prefix><i class="ph-link-simple ph-bold ph-lg"></i></template>
-							<template #label>{{ i18n.ts.bannerUrl }}</template>
-						</FormInput>
-
-						<FormInput v-model="logoImageUrl" class="_formBlock">
-							<template #prefix><i class="ph-link-simple ph-bold ph-lg"></i></template>
-							<template #label>{{ i18n.ts.logoImageUrl }}</template>
-						</FormInput>
-
-						<FormInput v-model="backgroundImageUrl" class="_formBlock">
-							<template #prefix><i class="ph-link-simple ph-bold ph-lg"></i></template>
-							<template #label>{{ i18n.ts.backgroundImageUrl }}</template>
-						</FormInput>
-
-						<FormInput v-model="themeColor" class="_formBlock">
-							<template #prefix><i class="ph-palette ph-bold ph-lg"></i></template>
-							<template #label>{{ i18n.ts.themeColor }}</template>
-							<template #caption>#RRGGBB</template>
-						</FormInput>
-
-						<FormTextarea v-model="defaultLightTheme" class="_formBlock">
-							<template #label>{{ i18n.ts.instanceDefaultLightTheme }}</template>
-							<template #caption>{{ i18n.ts.instanceDefaultThemeDescription }}</template>
+						<FormTextarea v-model="description" class="_formBlock">
+							<template #label>{{
+								i18n.ts.instanceDescription
+							}}</template>
 						</FormTextarea>
 
-						<FormTextarea v-model="defaultDarkTheme" class="_formBlock">
-							<template #label>{{ i18n.ts.instanceDefaultDarkTheme }}</template>
-							<template #caption>{{ i18n.ts.instanceDefaultThemeDescription }}</template>
-						</FormTextarea>
-					</FormSection>
+						<FormInput v-model="tosUrl" class="_formBlock">
+							<template #prefix
+								><i class="ph-link-simple ph-bold ph-lg"></i
+							></template>
+							<template #label>{{ i18n.ts.tosUrl }}</template>
+						</FormInput>
 
-					<FormSection>
-						<template #label>{{ i18n.ts.splash }}</template>
-
-						<FormTextarea v-model="customMOTD" class="_formBlock">
-							<template #label>{{ i18n.ts.customMOTD }}</template>
-							<template #caption>{{ i18n.ts.customMOTDDescription }}</template>
-						</FormTextarea>
-
-						<FormTextarea v-model="customSplashIcons" class="_formBlock">
-							<template #label>{{ i18n.ts.customSplashIcons }}</template>
-							<template #caption>{{ i18n.ts.customSplashIconsDescription }}</template>
-						</FormTextarea>
-					</FormSection>
-
-					<FormSection>
-						<template #label>{{ i18n.ts.files }}</template>
-
-						<FormSwitch v-model="cacheRemoteFiles" class="_formBlock">
-							<template #label>{{ i18n.ts.cacheRemoteFiles }}</template>
-							<template #caption>{{ i18n.ts.cacheRemoteFilesDescription }}</template>
-						</FormSwitch>
-
-						<FormSplit :min-width="280">
-							<FormInput v-model="localDriveCapacityMb" type="number" class="_formBlock">
-								<template #label>{{ i18n.ts.driveCapacityPerLocalAccount }}</template>
-								<template #suffix>MB</template>
-								<template #caption>{{ i18n.ts.inMb }}</template>
+						<FormSplit :min-width="300">
+							<FormInput
+								v-model="maintainerName"
+								class="_formBlock"
+							>
+								<template #label>{{
+									i18n.ts.maintainerName
+								}}</template>
 							</FormInput>
 
-							<FormInput v-model="remoteDriveCapacityMb" type="number" :disabled="!cacheRemoteFiles" class="_formBlock">
-								<template #label>{{ i18n.ts.driveCapacityPerRemoteAccount }}</template>
-								<template #suffix>MB</template>
-								<template #caption>{{ i18n.ts.inMb }}</template>
+							<FormInput
+								v-model="maintainerEmail"
+								type="email"
+								class="_formBlock"
+							>
+								<template #prefix
+									><i
+										class="ph-envelope-simple-open ph-bold ph-lg"
+									></i
+								></template>
+								<template #label>{{
+									i18n.ts.maintainerEmail
+								}}</template>
 							</FormInput>
 						</FormSplit>
-					</FormSection>
 
-					<FormSection>
-						<template #label>ServiceWorker</template>
+						<FormTextarea v-model="pinnedUsers" class="_formBlock">
+							<template #label>{{
+								i18n.ts.pinnedUsers
+							}}</template>
+							<template #caption>{{
+								i18n.ts.pinnedUsersDescription
+							}}</template>
+						</FormTextarea>
 
-						<FormSwitch v-model="enableServiceWorker" class="_formBlock">
-							<template #label>{{ i18n.ts.enableServiceworker }}</template>
-							<template #caption>{{ i18n.ts.serviceworkerInfo }}</template>
-						</FormSwitch>
+						<FormSection>
+							<FormSwitch
+								v-model="enableRegistration"
+								class="_formBlock"
+							>
+								<template #label>{{
+									i18n.ts.enableRegistration
+								}}</template>
+							</FormSwitch>
 
-						<template v-if="enableServiceWorker">
-							<FormInput v-model="swPublicKey" class="_formBlock">
-								<template #prefix><i class="ph-key ph-bold ph-lg"></i></template>
-								<template #label>Public key</template>
+							<FormSwitch
+								v-model="emailRequiredForSignup"
+								class="_formBlock"
+							>
+								<template #label>{{
+									i18n.ts.emailRequiredForSignup
+								}}</template>
+							</FormSwitch>
+						</FormSection>
+
+						<FormSection>
+							<FormSwitch
+								v-model="enableRecommendedTimeline"
+								class="_formBlock"
+								>{{
+									i18n.ts.enableRecommendedTimeline
+								}}</FormSwitch
+							>
+							<FormTextarea
+								v-model="recommendedInstances"
+								class="_formBlock"
+							>
+								<template #label>{{
+									i18n.ts.recommendedInstances
+								}}</template>
+								<template #caption>{{
+									i18n.ts.recommendedInstancesDescription
+								}}</template>
+							</FormTextarea>
+						</FormSection>
+
+						<FormSection>
+							<FormSwitch
+								v-model="enableLocalTimeline"
+								class="_formBlock"
+								>{{ i18n.ts.enableLocalTimeline }}</FormSwitch
+							>
+							<FormSwitch
+								v-model="enableGlobalTimeline"
+								class="_formBlock"
+								>{{ i18n.ts.enableGlobalTimeline }}</FormSwitch
+							>
+							<FormInfo class="_formBlock">{{
+								i18n.ts.disablingTimelinesInfo
+							}}</FormInfo>
+						</FormSection>
+
+						<FormSection>
+							<MkRadios
+								v-model="defaultReaction"
+								class="_formBlock"
+							>
+								<template #label>{{
+									i18n.ts.defaultReaction
+								}}</template>
+								<option value="⭐">
+									<MkEmoji
+										class="emoji"
+										emoji="⭐"
+										style="height: 1.7em"
+									/>
+								</option>
+								<option value="👍">
+									<MkEmoji
+										class="emoji"
+										emoji="👍"
+										style="height: 1.7em"
+									/>
+								</option>
+								<option value="❤️">
+									<MkEmoji
+										class="emoji"
+										emoji="❤️"
+										style="height: 1.7em"
+									/>
+								</option>
+								<option value="custom">
+									<FormInput
+										v-model="defaultReactionCustom"
+										class="_formBlock"
+										:small="true"
+										:placeholder="`:custom:`"
+										style="margin: 0 0 !important"
+									/>
+								</option>
+							</MkRadios>
+						</FormSection>
+
+						<FormSection>
+							<template #label>{{ i18n.ts.theme }}</template>
+
+							<FormInput v-model="iconUrl" class="_formBlock">
+								<template #prefix
+									><i class="ph-link-simple ph-bold ph-lg"></i
+								></template>
+								<template #label>{{
+									i18n.ts.iconUrl
+								}}</template>
 							</FormInput>
 
-							<FormInput v-model="swPrivateKey" class="_formBlock">
-								<template #prefix><i class="ph-key ph-bold ph-lg"></i></template>
-								<template #label>Private key</template>
+							<FormInput v-model="bannerUrl" class="_formBlock">
+								<template #prefix
+									><i class="ph-link-simple ph-bold ph-lg"></i
+								></template>
+								<template #label>{{
+									i18n.ts.bannerUrl
+								}}</template>
 							</FormInput>
-						</template>
-					</FormSection>
 
-					<FormSection>
-						<template #label>DeepL Translation</template>
+							<FormInput
+								v-model="logoImageUrl"
+								class="_formBlock"
+							>
+								<template #prefix
+									><i class="ph-link-simple ph-bold ph-lg"></i
+								></template>
+								<template #label>{{
+									i18n.ts.logoImageUrl
+								}}</template>
+							</FormInput>
 
-						<FormInput v-model="deeplAuthKey" class="_formBlock">
-							<template #prefix><i class="ph-key ph-bold ph-lg"></i></template>
-							<template #label>DeepL Auth Key</template>
-						</FormInput>
-						<FormSwitch v-model="deeplIsPro" class="_formBlock">
-							<template #label>Pro account</template>
-						</FormSwitch>
-					</FormSection>
-				</div>
-			</FormSuspense>
-		</MkSpacer>
-	</MkStickyContainer>
-</div>
+							<FormInput
+								v-model="backgroundImageUrl"
+								class="_formBlock"
+							>
+								<template #prefix
+									><i class="ph-link-simple ph-bold ph-lg"></i
+								></template>
+								<template #label>{{
+									i18n.ts.backgroundImageUrl
+								}}</template>
+							</FormInput>
+
+							<FormInput v-model="themeColor" class="_formBlock">
+								<template #prefix
+									><i class="ph-palette ph-bold ph-lg"></i
+								></template>
+								<template #label>{{
+									i18n.ts.themeColor
+								}}</template>
+								<template #caption>#RRGGBB</template>
+							</FormInput>
+
+							<FormTextarea
+								v-model="defaultLightTheme"
+								class="_formBlock"
+							>
+								<template #label>{{
+									i18n.ts.instanceDefaultLightTheme
+								}}</template>
+								<template #caption>{{
+									i18n.ts.instanceDefaultThemeDescription
+								}}</template>
+							</FormTextarea>
+
+							<FormTextarea
+								v-model="defaultDarkTheme"
+								class="_formBlock"
+							>
+								<template #label>{{
+									i18n.ts.instanceDefaultDarkTheme
+								}}</template>
+								<template #caption>{{
+									i18n.ts.instanceDefaultThemeDescription
+								}}</template>
+							</FormTextarea>
+						</FormSection>
+
+						<FormSection>
+							<template #label>{{ i18n.ts.splash }}</template>
+
+							<FormTextarea
+								v-model="customMOTD"
+								class="_formBlock"
+							>
+								<template #label>{{
+									i18n.ts.customMOTD
+								}}</template>
+								<template #caption>{{
+									i18n.ts.customMOTDDescription
+								}}</template>
+							</FormTextarea>
+
+							<FormTextarea
+								v-model="customSplashIcons"
+								class="_formBlock"
+							>
+								<template #label>{{
+									i18n.ts.customSplashIcons
+								}}</template>
+								<template #caption>{{
+									i18n.ts.customSplashIconsDescription
+								}}</template>
+							</FormTextarea>
+						</FormSection>
+
+						<FormSection>
+							<template #label>{{ i18n.ts.files }}</template>
+
+							<FormSwitch
+								v-model="cacheRemoteFiles"
+								class="_formBlock"
+							>
+								<template #label>{{
+									i18n.ts.cacheRemoteFiles
+								}}</template>
+								<template #caption>{{
+									i18n.ts.cacheRemoteFilesDescription
+								}}</template>
+							</FormSwitch>
+
+							<FormSplit :min-width="280">
+								<FormInput
+									v-model="localDriveCapacityMb"
+									type="number"
+									class="_formBlock"
+								>
+									<template #label>{{
+										i18n.ts.driveCapacityPerLocalAccount
+									}}</template>
+									<template #suffix>MB</template>
+									<template #caption>{{
+										i18n.ts.inMb
+									}}</template>
+								</FormInput>
+
+								<FormInput
+									v-model="remoteDriveCapacityMb"
+									type="number"
+									:disabled="!cacheRemoteFiles"
+									class="_formBlock"
+								>
+									<template #label>{{
+										i18n.ts.driveCapacityPerRemoteAccount
+									}}</template>
+									<template #suffix>MB</template>
+									<template #caption>{{
+										i18n.ts.inMb
+									}}</template>
+								</FormInput>
+							</FormSplit>
+						</FormSection>
+
+						<FormSection>
+							<template #label>ServiceWorker</template>
+
+							<FormSwitch
+								v-model="enableServiceWorker"
+								class="_formBlock"
+							>
+								<template #label>{{
+									i18n.ts.enableServiceworker
+								}}</template>
+								<template #caption>{{
+									i18n.ts.serviceworkerInfo
+								}}</template>
+							</FormSwitch>
+
+							<template v-if="enableServiceWorker">
+								<FormInput
+									v-model="swPublicKey"
+									class="_formBlock"
+								>
+									<template #prefix
+										><i class="ph-key ph-bold ph-lg"></i
+									></template>
+									<template #label>Public key</template>
+								</FormInput>
+
+								<FormInput
+									v-model="swPrivateKey"
+									class="_formBlock"
+								>
+									<template #prefix
+										><i class="ph-key ph-bold ph-lg"></i
+									></template>
+									<template #label>Private key</template>
+								</FormInput>
+							</template>
+						</FormSection>
+
+						<FormSection>
+							<template #label>DeepL Translation</template>
+
+							<FormInput
+								v-model="deeplAuthKey"
+								class="_formBlock"
+							>
+								<template #prefix
+									><i class="ph-key ph-bold ph-lg"></i
+								></template>
+								<template #label>DeepL Auth Key</template>
+							</FormInput>
+							<FormSwitch v-model="deeplIsPro" class="_formBlock">
+								<template #label>Pro account</template>
+							</FormSwitch>
+						</FormSection>
+					</div>
+				</FormSuspense>
+			</MkSpacer>
+		</MkStickyContainer>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
-import FormSwitch from '@/components/form/switch.vue';
-import FormInput from '@/components/form/input.vue';
-import FormTextarea from '@/components/form/textarea.vue';
-import FormInfo from '@/components/MkInfo.vue';
-import FormSection from '@/components/form/section.vue';
-import FormSplit from '@/components/form/split.vue';
-import FormSuspense from '@/components/form/suspense.vue';
-import MkRadios from '@/components/form/radios.vue';
-import * as os from '@/os';
-import { fetchInstance } from '@/instance';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import { ref } from "vue";
+import FormSwitch from "@/components/form/switch.vue";
+import FormInput from "@/components/form/input.vue";
+import FormTextarea from "@/components/form/textarea.vue";
+import FormInfo from "@/components/MkInfo.vue";
+import FormSection from "@/components/form/section.vue";
+import FormSplit from "@/components/form/split.vue";
+import FormSuspense from "@/components/form/suspense.vue";
+import MkRadios from "@/components/form/radios.vue";
+import * as os from "@/os";
+import { fetchInstance } from "@/instance";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
 let name: string | null = $ref(null);
 let description: string | null = $ref(null);
@@ -222,10 +408,10 @@ let defaultDarkTheme: any = $ref(null);
 let enableLocalTimeline: boolean = $ref(false);
 let enableGlobalTimeline: boolean = $ref(false);
 let enableRecommendedTimeline: boolean = $ref(false);
-let pinnedUsers: string = $ref('');
-let customMOTD: string = $ref('');
-let recommendedInstances: string = $ref('');
-let customSplashIcons: string = $ref('');
+let pinnedUsers: string = $ref("");
+let customMOTD: string = $ref("");
+let recommendedInstances: string = $ref("");
+let customSplashIcons: string = $ref("");
 let cacheRemoteFiles: boolean = $ref(false);
 let localDriveCapacityMb: any = $ref(0);
 let remoteDriveCapacityMb: any = $ref(0);
@@ -234,13 +420,13 @@ let emailRequiredForSignup: boolean = $ref(false);
 let enableServiceWorker: boolean = $ref(false);
 let swPublicKey: any = $ref(null);
 let swPrivateKey: any = $ref(null);
-let deeplAuthKey: string = $ref('');
+let deeplAuthKey: string = $ref("");
 let deeplIsPro: boolean = $ref(false);
-let defaultReaction: string = $ref('');
-let defaultReactionCustom: string = $ref('');
+let defaultReaction: string = $ref("");
+let defaultReactionCustom: string = $ref("");
 
 async function init() {
-	const meta = await os.api('admin/meta');
+	const meta = await os.api("admin/meta");
 	name = meta.name;
 	description = meta.description;
 	tosUrl = meta.tosUrl;
@@ -256,10 +442,10 @@ async function init() {
 	enableLocalTimeline = !meta.disableLocalTimeline;
 	enableGlobalTimeline = !meta.disableGlobalTimeline;
 	enableRecommendedTimeline = !meta.disableRecommendedTimeline;
-	pinnedUsers = meta.pinnedUsers.join('\n');
-	customMOTD = meta.customMOTD.join('\n');
-	customSplashIcons = meta.customSplashIcons.join('\n');
-	recommendedInstances = meta.recommendedInstances.join('\n');
+	pinnedUsers = meta.pinnedUsers.join("\n");
+	customMOTD = meta.customMOTD.join("\n");
+	customSplashIcons = meta.customSplashIcons.join("\n");
+	recommendedInstances = meta.recommendedInstances.join("\n");
 	cacheRemoteFiles = meta.cacheRemoteFiles;
 	localDriveCapacityMb = meta.driveCapacityPerLocalUserMb;
 	remoteDriveCapacityMb = meta.driveCapacityPerRemoteUserMb;
@@ -270,15 +456,19 @@ async function init() {
 	swPrivateKey = meta.swPrivateKey;
 	deeplAuthKey = meta.deeplAuthKey;
 	deeplIsPro = meta.deeplIsPro;
-	defaultReaction = ['⭐', '👍', '❤️'].includes(meta.defaultReaction) ? meta.defaultReaction : 'custom';
-	defaultReactionCustom = ['⭐', '👍', '❤️'].includes(meta.defaultReaction) ? '' : meta.defaultReaction;
+	defaultReaction = ["⭐", "👍", "❤️"].includes(meta.defaultReaction)
+		? meta.defaultReaction
+		: "custom";
+	defaultReactionCustom = ["⭐", "👍", "❤️"].includes(meta.defaultReaction)
+		? ""
+		: meta.defaultReaction;
 }
 
 function save() {
-	if (defaultReaction === 'custom') {
+	if (defaultReaction === "custom") {
 		defaultReaction = defaultReactionCustom;
 	}
-	os.apiWithDialog('admin/update-meta', {
+	os.apiWithDialog("admin/update-meta", {
 		name,
 		description,
 		tosUrl,
@@ -286,18 +476,18 @@ function save() {
 		bannerUrl,
 		logoImageUrl,
 		backgroundImageUrl,
-		themeColor: themeColor === '' ? null : themeColor,
-		defaultLightTheme: defaultLightTheme === '' ? null : defaultLightTheme,
-		defaultDarkTheme: defaultDarkTheme === '' ? null : defaultDarkTheme,
+		themeColor: themeColor === "" ? null : themeColor,
+		defaultLightTheme: defaultLightTheme === "" ? null : defaultLightTheme,
+		defaultDarkTheme: defaultDarkTheme === "" ? null : defaultDarkTheme,
 		maintainerName,
 		maintainerEmail,
 		disableLocalTimeline: !enableLocalTimeline,
 		disableGlobalTimeline: !enableGlobalTimeline,
 		disableRecommendedTimeline: !enableRecommendedTimeline,
-		pinnedUsers: pinnedUsers.split('\n'),
-		customMOTD: customMOTD.split('\n'),
-		customSplashIcons: customSplashIcons.split('\n'),
-		recommendedInstances: recommendedInstances.split('\n'),
+		pinnedUsers: pinnedUsers.split("\n"),
+		customMOTD: customMOTD.split("\n"),
+		customSplashIcons: customSplashIcons.split("\n"),
+		recommendedInstances: recommendedInstances.split("\n"),
 		cacheRemoteFiles,
 		localDriveCapacityMb: parseInt(localDriveCapacityMb, 10),
 		remoteDriveCapacityMb: parseInt(remoteDriveCapacityMb, 10),
@@ -314,17 +504,19 @@ function save() {
 	});
 }
 
-const headerActions = $computed(() => [{
-	asFullButton: true,
-	icon: 'ph-check ph-bold ph-lg',
-	text: i18n.ts.save,
-	handler: save,
-}]);
+const headerActions = $computed(() => [
+	{
+		asFullButton: true,
+		icon: "ph-check ph-bold ph-lg",
+		text: i18n.ts.save,
+		handler: save,
+	},
+]);
 
 const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.general,
-	icon: 'ph-gear-six ph-bold ph-lg',
+	icon: "ph-gear-six ph-bold ph-lg",
 });
 </script>
diff --git a/packages/client/src/pages/admin/users.vue b/packages/client/src/pages/admin/users.vue
index 96da80fcfc..cf956c6845 100644
--- a/packages/client/src/pages/admin/users.vue
+++ b/packages/client/src/pages/admin/users.vue
@@ -1,77 +1,146 @@
 <template>
-<div>
-	<MkStickyContainer>
-		<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs" :display-back-button="true"/></template>
-		<MkSpacer :content-max="900">
-			<div class="lknzcolw">
-				<div class="users">
-					<div class="inputs">
-						<MkSelect v-model="sort" style="flex: 1;">
-							<template #label>{{ i18n.ts.sort }}</template>
-							<option value="-createdAt">{{ i18n.ts.registeredDate }} ({{ i18n.ts.ascendingOrder }})</option>
-							<option value="+createdAt">{{ i18n.ts.registeredDate }} ({{ i18n.ts.descendingOrder }})</option>
-							<option value="-updatedAt">{{ i18n.ts.lastUsed }} ({{ i18n.ts.ascendingOrder }})</option>
-							<option value="+updatedAt">{{ i18n.ts.lastUsed }} ({{ i18n.ts.descendingOrder }})</option>
-						</MkSelect>
-						<MkSelect v-model="state" style="flex: 1;">
-							<template #label>{{ i18n.ts.state }}</template>
-							<option value="all">{{ i18n.ts.all }}</option>
-							<option value="available">{{ i18n.ts.normal }}</option>
-							<option value="admin">{{ i18n.ts.administrator }}</option>
-							<option value="moderator">{{ i18n.ts.moderator }}</option>
-							<option value="silenced">{{ i18n.ts.silence }}</option>
-							<option value="suspended">{{ i18n.ts.suspend }}</option>
-						</MkSelect>
-						<MkSelect v-model="origin" style="flex: 1;">
-							<template #label>{{ i18n.ts.instance }}</template>
-							<option value="combined">{{ i18n.ts.all }}</option>
-							<option value="local">{{ i18n.ts.local }}</option>
-							<option value="remote">{{ i18n.ts.remote }}</option>
-						</MkSelect>
-					</div>
-					<div class="inputs">
-						<MkInput v-model="searchUsername" style="flex: 1;" type="text" :spellcheck="false" @update:modelValue="$refs.users.reload()">
-							<template #prefix>@</template>
-							<template #label>{{ i18n.ts.username }}</template>
-						</MkInput>
-						<MkInput v-model="searchHost" style="flex: 1;" type="text" :spellcheck="false" :disabled="pagination.params.origin === 'local'" @update:modelValue="$refs.users.reload()">
-							<template #prefix>@</template>
-							<template #label>{{ i18n.ts.host }}</template>
-						</MkInput>
-					</div>
+	<div>
+		<MkStickyContainer>
+			<template #header
+				><MkPageHeader
+					:actions="headerActions"
+					:tabs="headerTabs"
+					:display-back-button="true"
+			/></template>
+			<MkSpacer :content-max="900">
+				<div class="lknzcolw">
+					<div class="users">
+						<div class="inputs">
+							<MkSelect v-model="sort" style="flex: 1">
+								<template #label>{{ i18n.ts.sort }}</template>
+								<option value="-createdAt">
+									{{ i18n.ts.registeredDate }} ({{
+										i18n.ts.ascendingOrder
+									}})
+								</option>
+								<option value="+createdAt">
+									{{ i18n.ts.registeredDate }} ({{
+										i18n.ts.descendingOrder
+									}})
+								</option>
+								<option value="-updatedAt">
+									{{ i18n.ts.lastUsed }} ({{
+										i18n.ts.ascendingOrder
+									}})
+								</option>
+								<option value="+updatedAt">
+									{{ i18n.ts.lastUsed }} ({{
+										i18n.ts.descendingOrder
+									}})
+								</option>
+							</MkSelect>
+							<MkSelect v-model="state" style="flex: 1">
+								<template #label>{{ i18n.ts.state }}</template>
+								<option value="all">{{ i18n.ts.all }}</option>
+								<option value="available">
+									{{ i18n.ts.normal }}
+								</option>
+								<option value="admin">
+									{{ i18n.ts.administrator }}
+								</option>
+								<option value="moderator">
+									{{ i18n.ts.moderator }}
+								</option>
+								<option value="silenced">
+									{{ i18n.ts.silence }}
+								</option>
+								<option value="suspended">
+									{{ i18n.ts.suspend }}
+								</option>
+							</MkSelect>
+							<MkSelect v-model="origin" style="flex: 1">
+								<template #label>{{
+									i18n.ts.instance
+								}}</template>
+								<option value="combined">
+									{{ i18n.ts.all }}
+								</option>
+								<option value="local">
+									{{ i18n.ts.local }}
+								</option>
+								<option value="remote">
+									{{ i18n.ts.remote }}
+								</option>
+							</MkSelect>
+						</div>
+						<div class="inputs">
+							<MkInput
+								v-model="searchUsername"
+								style="flex: 1"
+								type="text"
+								:spellcheck="false"
+								@update:modelValue="$refs.users.reload()"
+							>
+								<template #prefix>@</template>
+								<template #label>{{
+									i18n.ts.username
+								}}</template>
+							</MkInput>
+							<MkInput
+								v-model="searchHost"
+								style="flex: 1"
+								type="text"
+								:spellcheck="false"
+								:disabled="pagination.params.origin === 'local'"
+								@update:modelValue="$refs.users.reload()"
+							>
+								<template #prefix>@</template>
+								<template #label>{{ i18n.ts.host }}</template>
+							</MkInput>
+						</div>
 
-					<MkPagination v-slot="{items}" ref="paginationComponent" :pagination="pagination" class="users">
-						<MkA v-for="user in items" :key="user.id" v-tooltip.mfm="`Last posted: ${new Date(user.updatedAt).toLocaleString()}`" class="user" :to="`/user-info/${user.id}`">
-							<MkUserCardMini :user="user"/>
-						</MkA>
-					</MkPagination>
+						<MkPagination
+							v-slot="{ items }"
+							ref="paginationComponent"
+							:pagination="pagination"
+							class="users"
+						>
+							<MkA
+								v-for="user in items"
+								:key="user.id"
+								v-tooltip.mfm="
+									`Last posted: ${new Date(
+										user.updatedAt
+									).toLocaleString()}`
+								"
+								class="user"
+								:to="`/user-info/${user.id}`"
+							>
+								<MkUserCardMini :user="user" />
+							</MkA>
+						</MkPagination>
+					</div>
 				</div>
-			</div>
-		</MkSpacer>
-	</MkStickyContainer>
-</div>
+			</MkSpacer>
+		</MkStickyContainer>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
-import MkInput from '@/components/form/input.vue';
-import MkSelect from '@/components/form/select.vue';
-import MkPagination from '@/components/MkPagination.vue';
-import * as os from '@/os';
-import { lookupUser } from '@/scripts/lookup-user';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import MkUserCardMini from '@/components/MkUserCardMini.vue';
+import { computed } from "vue";
+import MkInput from "@/components/form/input.vue";
+import MkSelect from "@/components/form/select.vue";
+import MkPagination from "@/components/MkPagination.vue";
+import * as os from "@/os";
+import { lookupUser } from "@/scripts/lookup-user";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
+import MkUserCardMini from "@/components/MkUserCardMini.vue";
 
 let paginationComponent = $ref<InstanceType<typeof MkPagination>>();
 
-let sort = $ref('+createdAt');
-let state = $ref('all');
-let origin = $ref('local');
-let searchUsername = $ref('');
-let searchHost = $ref('');
+let sort = $ref("+createdAt");
+let state = $ref("all");
+let origin = $ref("local");
+let searchUsername = $ref("");
+let searchHost = $ref("");
 const pagination = {
-	endpoint: 'admin/show-users' as const,
+	endpoint: "admin/show-users" as const,
 	limit: 10,
 	params: computed(() => ({
 		sort: sort,
@@ -84,7 +153,7 @@ const pagination = {
 };
 
 function searchUser() {
-	os.selectUser().then(user => {
+	os.selectUser().then((user) => {
 		show(user);
 	});
 }
@@ -97,14 +166,14 @@ async function addUser() {
 
 	const { canceled: canceled2, result: password } = await os.inputText({
 		title: i18n.ts.password,
-		type: 'password',
+		type: "password",
 	});
 	if (canceled2) return;
 
-	os.apiWithDialog('admin/accounts/create', {
+	os.apiWithDialog("admin/accounts/create", {
 		username: username,
 		password: password,
-	}).then(res => {
+	}).then((res) => {
 		paginationComponent.reload();
 	});
 }
@@ -113,34 +182,39 @@ function show(user) {
 	os.pageWindow(`/user-info/${user.id}`);
 }
 
-const headerActions = $computed(() => [{
-	icon: 'ph-magnifying-glass ph-bold ph-lg',
-	text: i18n.ts.search,
-	handler: searchUser,
-}, {
-	asFullButton: true,
-	icon: 'ph-plus ph-bold ph-lg',
-	text: i18n.ts.addUser,
-	handler: addUser,
-}, {
-	asFullButton: true,
-	icon: 'ph-magnifying-glass ph-bold ph-lg',
-	text: i18n.ts.lookup,
-	handler: lookupUser,
-}]);
+const headerActions = $computed(() => [
+	{
+		icon: "ph-magnifying-glass ph-bold ph-lg",
+		text: i18n.ts.search,
+		handler: searchUser,
+	},
+	{
+		asFullButton: true,
+		icon: "ph-plus ph-bold ph-lg",
+		text: i18n.ts.addUser,
+		handler: addUser,
+	},
+	{
+		asFullButton: true,
+		icon: "ph-magnifying-glass ph-bold ph-lg",
+		text: i18n.ts.lookup,
+		handler: lookupUser,
+	},
+]);
 
 const headerTabs = $computed(() => []);
 
-definePageMetadata(computed(() => ({
-	title: i18n.ts.users,
-	icon: 'ph-users ph-bold ph-lg',
-})));
+definePageMetadata(
+	computed(() => ({
+		title: i18n.ts.users,
+		icon: "ph-users ph-bold ph-lg",
+	}))
+);
 </script>
 
 <style lang="scss" scoped>
 .lknzcolw {
 	> .users {
-
 		> .inputs {
 			display: flex;
 			margin-bottom: 16px;
@@ -153,7 +227,7 @@ definePageMetadata(computed(() => ({
 				}
 			}
 		}
-	
+
 		> .users {
 			margin-top: var(--margin);
 			display: grid;
diff --git a/packages/client/src/pages/announcements.vue b/packages/client/src/pages/announcements.vue
index 452ab8014e..ba48f3bd0d 100644
--- a/packages/client/src/pages/announcements.vue
+++ b/packages/client/src/pages/announcements.vue
@@ -1,33 +1,52 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
-	<MkSpacer :content-max="800">
-		<MkPagination v-slot="{items}" :pagination="pagination" class="ruryvtyk _content">
-			<section v-for="(announcement, i) in items" :key="announcement.id" class="_card announcement">
-				<div class="_title"><span v-if="$i && !announcement.isRead">🆕 </span>{{ announcement.title }}</div>
-				<div class="_content">
-					<Mfm :text="announcement.text"/>
-					<img v-if="announcement.imageUrl" :src="announcement.imageUrl"/>
-				</div>
-				<div v-if="$i && !announcement.isRead" class="_footer">
-					<MkButton primary @click="read(items, announcement, i)"><i class="ph-check ph-bold ph-lg"></i> {{ i18n.ts.gotIt }}</MkButton>
-				</div>
-			</section>
-		</MkPagination>
-	</MkSpacer>
-</MkStickyContainer>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader :actions="headerActions" :tabs="headerTabs"
+		/></template>
+		<MkSpacer :content-max="800">
+			<MkPagination
+				v-slot="{ items }"
+				:pagination="pagination"
+				class="ruryvtyk _content"
+			>
+				<section
+					v-for="(announcement, i) in items"
+					:key="announcement.id"
+					class="_card announcement"
+				>
+					<div class="_title">
+						<span v-if="$i && !announcement.isRead">🆕 </span
+						>{{ announcement.title }}
+					</div>
+					<div class="_content">
+						<Mfm :text="announcement.text" />
+						<img
+							v-if="announcement.imageUrl"
+							:src="announcement.imageUrl"
+						/>
+					</div>
+					<div v-if="$i && !announcement.isRead" class="_footer">
+						<MkButton primary @click="read(items, announcement, i)"
+							><i class="ph-check ph-bold ph-lg"></i>
+							{{ i18n.ts.gotIt }}</MkButton
+						>
+					</div>
+				</section>
+			</MkPagination>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import MkPagination from '@/components/MkPagination.vue';
-import MkButton from '@/components/MkButton.vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import {} from "vue";
+import MkPagination from "@/components/MkPagination.vue";
+import MkButton from "@/components/MkButton.vue";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
 const pagination = {
-	endpoint: 'announcements' as const,
+	endpoint: "announcements" as const,
 	limit: 10,
 };
 
@@ -37,7 +56,7 @@ function read(items, announcement, i) {
 		...announcement,
 		isRead: true,
 	};
-	os.api('i/read-announcement', { announcementId: announcement.id });
+	os.api("i/read-announcement", { announcementId: announcement.id });
 }
 
 const headerActions = $computed(() => []);
@@ -46,7 +65,7 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.announcements,
-	icon: 'ph-megaphone-simple ph-bold ph-lg',
+	icon: "ph-megaphone-simple ph-bold ph-lg",
 });
 </script>
 
diff --git a/packages/client/src/pages/antenna-timeline.vue b/packages/client/src/pages/antenna-timeline.vue
index f883645e39..c33eed75f2 100644
--- a/packages/client/src/pages/antenna-timeline.vue
+++ b/packages/client/src/pages/antenna-timeline.vue
@@ -1,30 +1,42 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
-	<div ref="rootEl" v-hotkey.global="keymap" v-size="{ min: [800] }" class="tqmomfks">
-		<div v-if="queue > 0" class="new"><button class="_buttonPrimary" @click="top()">{{ i18n.ts.newNoteRecived }}</button></div>
-		<div class="tl _block">
-			<XTimeline
-				ref="tlEl" :key="antennaId"
-				class="tl"
-				src="antenna"
-				:antenna="antennaId"
-				:sound="true"
-				@queue="queueUpdated"
-			/>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader :actions="headerActions" :tabs="headerTabs"
+		/></template>
+		<div
+			ref="rootEl"
+			v-hotkey.global="keymap"
+			v-size="{ min: [800] }"
+			class="tqmomfks"
+		>
+			<div v-if="queue > 0" class="new">
+				<button class="_buttonPrimary" @click="top()">
+					{{ i18n.ts.newNoteRecived }}
+				</button>
+			</div>
+			<div class="tl _block">
+				<XTimeline
+					ref="tlEl"
+					:key="antennaId"
+					class="tl"
+					src="antenna"
+					:antenna="antennaId"
+					:sound="true"
+					@queue="queueUpdated"
+				/>
+			</div>
 		</div>
-	</div>
-</MkStickyContainer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, watch } from 'vue';
-import XTimeline from '@/components/MkTimeline.vue';
-import { scroll } from '@/scripts/scroll';
-import * as os from '@/os';
-import { useRouter } from '@/router';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import { i18n } from '@/i18n';
+import { computed, inject, watch } from "vue";
+import XTimeline from "@/components/MkTimeline.vue";
+import { scroll } from "@/scripts/scroll";
+import * as os from "@/os";
+import { useRouter } from "@/router";
+import { definePageMetadata } from "@/scripts/page-metadata";
+import { i18n } from "@/i18n";
 
 const router = useRouter();
 
@@ -37,7 +49,7 @@ let queue = $ref(0);
 let rootEl = $ref<HTMLElement>();
 let tlEl = $ref<InstanceType<typeof XTimeline>>();
 const keymap = $computed(() => ({
-	't': focus,
+	t: focus,
 }));
 
 function queueUpdated(q) {
@@ -62,15 +74,15 @@ function settings() {
 }
 
 async function doMarkRead() {
-	const ret = await os.api('antennas/mark-read', {
+	const ret = await os.api("antennas/mark-read", {
 		antennaId: props.antennaId,
 	});
 
 	if (ret) {
-		return true
+		return true;
 	}
 
-	throw new Error('Failed to mark all as read');
+	throw new Error("Failed to mark all as read");
 }
 
 async function markRead() {
@@ -81,32 +93,50 @@ function focus() {
 	tlEl.focus();
 }
 
-watch(() => props.antennaId, async () => {
-	antenna = await os.api('antennas/show', {
-		antennaId: props.antennaId,
-	});
-}, { immediate: true });
+watch(
+	() => props.antennaId,
+	async () => {
+		antenna = await os.api("antennas/show", {
+			antennaId: props.antennaId,
+		});
+	},
+	{ immediate: true }
+);
 
-const headerActions = $computed(() => antenna ? [{
-	icon: 'ph-calendar-blank ph-bold ph-lg',
-	text: i18n.ts.jumpToSpecifiedDate,
-	handler: timetravel,
-}, {
-	icon: 'ph-gear-six ph-bold ph-lg',
-	text: i18n.ts.settings,
-	handler: settings,
-}, {
-	icon: 'ph-check ph-bold ph-lg',
-	text: i18n.ts.markAllAsRead,
-	handler: markRead,
-}] : []);
+const headerActions = $computed(() =>
+	antenna
+		? [
+				{
+					icon: "ph-calendar-blank ph-bold ph-lg",
+					text: i18n.ts.jumpToSpecifiedDate,
+					handler: timetravel,
+				},
+				{
+					icon: "ph-gear-six ph-bold ph-lg",
+					text: i18n.ts.settings,
+					handler: settings,
+				},
+				{
+					icon: "ph-check ph-bold ph-lg",
+					text: i18n.ts.markAllAsRead,
+					handler: markRead,
+				},
+		  ]
+		: []
+);
 
 const headerTabs = $computed(() => []);
 
-definePageMetadata(computed(() => antenna ? {
-	title: antenna.name,
-	icon: 'ph-flying-saucer ph-bold ph-lg',
-} : null));
+definePageMetadata(
+	computed(() =>
+		antenna
+			? {
+					title: antenna.name,
+					icon: "ph-flying-saucer ph-bold ph-lg",
+			  }
+			: null
+	)
+);
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/pages/api-console.vue b/packages/client/src/pages/api-console.vue
index 0707f52f9f..214145d370 100644
--- a/packages/client/src/pages/api-console.vue
+++ b/packages/client/src/pages/api-console.vue
@@ -1,78 +1,109 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
-	<MkSpacer :content-max="700">
-		<div class="_formRoot">
-			<div class="_formBlock">
-				<MkInput v-model="endpoint" :datalist="endpoints" class="_formBlock" @update:modelValue="onEndpointChange()">
-					<template #label>Endpoint</template>
-				</MkInput>
-				<MkTextarea v-model="body" class="_formBlock" code>
-					<template #label>Params (JSON or JSON5)</template>
-				</MkTextarea>
-				<MkSwitch v-model="withCredential" class="_formBlock">
-					With credential
-				</MkSwitch>
-				<MkButton class="_formBlock" primary :disabled="sending" @click="send">
-					<template v-if="sending"><MkEllipsis/></template>
-					<template v-else><i class="ph-paper-plane-tilt ph-bold ph-lg"></i> Send</template>
-				</MkButton>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader :actions="headerActions" :tabs="headerTabs"
+		/></template>
+		<MkSpacer :content-max="700">
+			<div class="_formRoot">
+				<div class="_formBlock">
+					<MkInput
+						v-model="endpoint"
+						:datalist="endpoints"
+						class="_formBlock"
+						@update:modelValue="onEndpointChange()"
+					>
+						<template #label>Endpoint</template>
+					</MkInput>
+					<MkTextarea v-model="body" class="_formBlock" code>
+						<template #label>Params (JSON or JSON5)</template>
+					</MkTextarea>
+					<MkSwitch v-model="withCredential" class="_formBlock">
+						With credential
+					</MkSwitch>
+					<MkButton
+						class="_formBlock"
+						primary
+						:disabled="sending"
+						@click="send"
+					>
+						<template v-if="sending"><MkEllipsis /></template>
+						<template v-else
+							><i class="ph-paper-plane-tilt ph-bold ph-lg"></i>
+							Send</template
+						>
+					</MkButton>
+				</div>
+				<div v-if="res" class="_formBlock">
+					<MkTextarea v-model="res" code readonly tall>
+						<template #label>Response</template>
+					</MkTextarea>
+				</div>
 			</div>
-			<div v-if="res" class="_formBlock">
-				<MkTextarea v-model="res" code readonly tall>
-					<template #label>Response</template>
-				</MkTextarea>
-			</div>
-		</div>
-	</MkSpacer>
-</MkStickyContainer>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
-import JSON5 from 'json5';
-import { Endpoints } from 'calckey-js';
-import MkButton from '@/components/MkButton.vue';
-import MkInput from '@/components/form/input.vue';
-import MkTextarea from '@/components/form/textarea.vue';
-import MkSwitch from '@/components/form/switch.vue';
-import * as os from '@/os';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import { ref } from "vue";
+import JSON5 from "json5";
+import { Endpoints } from "calckey-js";
+import MkButton from "@/components/MkButton.vue";
+import MkInput from "@/components/form/input.vue";
+import MkTextarea from "@/components/form/textarea.vue";
+import MkSwitch from "@/components/form/switch.vue";
+import * as os from "@/os";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
-const body = ref('{}');
-const endpoint = ref('');
+const body = ref("{}");
+const endpoint = ref("");
 const endpoints = ref<any[]>([]);
 const sending = ref(false);
-const res = ref('');
+const res = ref("");
 const withCredential = ref(true);
 
-os.api('endpoints').then(endpointResponse => {
+os.api("endpoints").then((endpointResponse) => {
 	endpoints.value = endpointResponse;
 });
 
 function send() {
 	sending.value = true;
 	const requestBody = JSON5.parse(body.value);
-	os.api(endpoint.value as keyof Endpoints, requestBody, requestBody.i || (withCredential.value ? undefined : null)).then(resp => {
-		sending.value = false;
-		res.value = JSON5.stringify(resp, null, 2);
-	}, err => {
-		sending.value = false;
-		res.value = JSON5.stringify(err, null, 2);
-	});
+	os.api(
+		endpoint.value as keyof Endpoints,
+		requestBody,
+		requestBody.i || (withCredential.value ? undefined : null)
+	).then(
+		(resp) => {
+			sending.value = false;
+			res.value = JSON5.stringify(resp, null, 2);
+		},
+		(err) => {
+			sending.value = false;
+			res.value = JSON5.stringify(err, null, 2);
+		}
+	);
 }
 
 function onEndpointChange() {
-	os.api('endpoint', { endpoint: endpoint.value }, withCredential.value ? undefined : null).then(resp => {
+	os.api(
+		"endpoint",
+		{ endpoint: endpoint.value },
+		withCredential.value ? undefined : null
+	).then((resp) => {
 		const endpointBody = {};
 		for (const p of resp.params) {
 			endpointBody[p.name] =
-				p.type === 'String' ? '' :
-				p.type === 'Number' ? 0 :
-				p.type === 'Boolean' ? false :
-				p.type === 'Array' ? [] :
-				p.type === 'Object' ? {} :
-				null;
+				p.type === "String"
+					? ""
+					: p.type === "Number"
+					? 0
+					: p.type === "Boolean"
+					? false
+					: p.type === "Array"
+					? []
+					: p.type === "Object"
+					? {}
+					: null;
 		}
 		body.value = JSON5.stringify(endpointBody, null, 2);
 	});
@@ -83,7 +114,7 @@ const headerActions = $computed(() => []);
 const headerTabs = $computed(() => []);
 
 definePageMetadata({
-	title: 'API console',
-	icon: 'ph-terminal-window ph-bold ph-lg',
+	title: "API console",
+	icon: "ph-terminal-window ph-bold ph-lg",
 });
 </script>
diff --git a/packages/client/src/pages/apps.vue b/packages/client/src/pages/apps.vue
index 377c692e93..0ef511027e 100644
--- a/packages/client/src/pages/apps.vue
+++ b/packages/client/src/pages/apps.vue
@@ -1,87 +1,121 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
-	<div style="overflow: clip;">
-		<MkSpacer :content-max="600" :margin-min="20">
-			<div class="_formRoot">
-				<FormSection>
-					<template #label>{{ i18n.ts._apps.crossPlatform }}</template>
-					<div class="_formBlock" style="text-align: center;">
-						<pwa-install/>
-						<MkButton primary rounded inline @click="installPwa">{{ i18n.ts._apps.pwa }}</MkButton>
-					</div>
-					<div class="_formLinks">
-						<FormLink to="https://kaiteki.app" external>
-							<template #icon>
-								<i class="ph-android-logo ph-bold ph-xl"/>
-								<i class="ph-windows-logo ph-bold ph-xl"/>
-								<i class="ph-linux-logo ph-bold ph-xl"/>
-							</template>
-							{{ i18n.ts._apps.kaiteki }}
-							<template #suffix>{{ i18n.ts._apps.firstClass }}, {{ i18n.ts._apps.free }}</template>
-						</FormLink>
-					</div>
-				</FormSection>
-				<FormSection>
-					<template #label>{{ i18n.ts._apps.mobile }}</template>
-					<div class="_formLinks">
-						<FormLink to="https://play.google.com/store/apps/details?id=jp.panta.misskeyandroidclient" external>
-							<template #icon>
-								<i class="ph-android-logo ph-bold ph-xl"/>
-							</template>
-							{{ i18n.ts._apps.milktea }}
-							<template #suffix>{{ i18n.ts._apps.firstClass }}, {{ i18n.ts._apps.free }}</template>
-						</FormLink>
-						<FormLink to="https://testflight.apple.com/join/xNdgUbh6" external>
-							<template #icon>
-								<i class="ph-apple-logo ph-bold ph-xl"/>
-							</template>
-							{{ i18n.ts._apps.mona }}
-							<template #suffix>{{ i18n.ts._apps.thirdClass }}, {{ i18n.ts._apps.free }}</template>
-						</FormLink>
-					</div>
-				</FormSection>
-				<FormSection>
-					<template #label>{{ i18n.ts.desktop }}</template>
-					<div class="_formLinks">
-						<FormLink to="https://thedesk.top/" external>
-							<template #icon>
-								<i class="ph-apple-logo ph-bold ph-xl"/>
-								<i class="ph-windows-logo ph-bold ph-xl"/>
-								<i class="ph-linux-logo ph-bold ph-xl"/>
-							</template>
-							{{ i18n.ts._apps.theDesk }}
-							<template #suffix>{{ i18n.ts._apps.secondClass }}, {{ i18n.ts._apps.free }}</template>
-						</FormLink>
-						<FormLink to="https://uboar.github.io/missli/" external>
-							<template #icon>
-								<i class="ph-globe ph-bold ph-xl"/>
-							</template>
-							{{ i18n.ts._apps.missLi }}
-							<template #suffix>{{ i18n.ts._apps.secondClass }}, {{ i18n.ts._apps.free }}</template>
-						</FormLink>
-					</div>
-				</FormSection>
-			</div>
-		</MkSpacer>
-	</div>
-</MkStickyContainer>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader :actions="headerActions" :tabs="headerTabs"
+		/></template>
+		<div style="overflow: clip">
+			<MkSpacer :content-max="600" :margin-min="20">
+				<div class="_formRoot">
+					<FormSection>
+						<template #label>{{
+							i18n.ts._apps.crossPlatform
+						}}</template>
+						<div class="_formBlock" style="text-align: center">
+							<pwa-install />
+							<MkButton
+								primary
+								rounded
+								inline
+								@click="installPwa"
+								>{{ i18n.ts._apps.pwa }}</MkButton
+							>
+						</div>
+						<div class="_formLinks">
+							<FormLink to="https://kaiteki.app" external>
+								<template #icon>
+									<i class="ph-android-logo ph-bold ph-xl" />
+									<i class="ph-windows-logo ph-bold ph-xl" />
+									<i class="ph-linux-logo ph-bold ph-xl" />
+								</template>
+								{{ i18n.ts._apps.kaiteki }}
+								<template #suffix
+									>{{ i18n.ts._apps.firstClass }},
+									{{ i18n.ts._apps.free }}</template
+								>
+							</FormLink>
+						</div>
+					</FormSection>
+					<FormSection>
+						<template #label>{{ i18n.ts._apps.mobile }}</template>
+						<div class="_formLinks">
+							<FormLink
+								to="https://play.google.com/store/apps/details?id=jp.panta.misskeyandroidclient"
+								external
+							>
+								<template #icon>
+									<i class="ph-android-logo ph-bold ph-xl" />
+								</template>
+								{{ i18n.ts._apps.milktea }}
+								<template #suffix
+									>{{ i18n.ts._apps.firstClass }},
+									{{ i18n.ts._apps.free }}</template
+								>
+							</FormLink>
+							<FormLink
+								to="https://testflight.apple.com/join/xNdgUbh6"
+								external
+							>
+								<template #icon>
+									<i class="ph-apple-logo ph-bold ph-xl" />
+								</template>
+								{{ i18n.ts._apps.mona }}
+								<template #suffix
+									>{{ i18n.ts._apps.thirdClass }},
+									{{ i18n.ts._apps.free }}</template
+								>
+							</FormLink>
+						</div>
+					</FormSection>
+					<FormSection>
+						<template #label>{{ i18n.ts.desktop }}</template>
+						<div class="_formLinks">
+							<FormLink to="https://thedesk.top/" external>
+								<template #icon>
+									<i class="ph-apple-logo ph-bold ph-xl" />
+									<i class="ph-windows-logo ph-bold ph-xl" />
+									<i class="ph-linux-logo ph-bold ph-xl" />
+								</template>
+								{{ i18n.ts._apps.theDesk }}
+								<template #suffix
+									>{{ i18n.ts._apps.secondClass }},
+									{{ i18n.ts._apps.free }}</template
+								>
+							</FormLink>
+							<FormLink
+								to="https://uboar.github.io/missli/"
+								external
+							>
+								<template #icon>
+									<i class="ph-globe ph-bold ph-xl" />
+								</template>
+								{{ i18n.ts._apps.missLi }}
+								<template #suffix
+									>{{ i18n.ts._apps.secondClass }},
+									{{ i18n.ts._apps.free }}</template
+								>
+							</FormLink>
+						</div>
+					</FormSection>
+				</div>
+			</MkSpacer>
+		</div>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import FormLink from '@/components/form/link.vue';
-import FormSection from '@/components/form/section.vue';
-import MkButton from '@/components/MkButton.vue';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import '@khmyznikov/pwa-install';
+import FormLink from "@/components/form/link.vue";
+import FormSection from "@/components/form/section.vue";
+import MkButton from "@/components/MkButton.vue";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
+import "@khmyznikov/pwa-install";
 
 const headerActions = $computed(() => []);
 
 const headerTabs = $computed(() => []);
 
 function installPwa(ev: MouseEvent) {
-	const pwaInstall = document.getElementsByTagName('pwa-install')[0];
+	const pwaInstall = document.getElementsByTagName("pwa-install")[0];
 	pwaInstall.showDialog();
 }
 
diff --git a/packages/client/src/pages/auth.form.vue b/packages/client/src/pages/auth.form.vue
index 9d57a8c925..189650f30a 100644
--- a/packages/client/src/pages/auth.form.vue
+++ b/packages/client/src/pages/auth.form.vue
@@ -1,33 +1,39 @@
 <template>
-<section class="_section">
-	<div class="_title">{{ i18n.t('_auth.shareAccess', { name: app.name }) }}</div>
-	<div class="_content">
-		<h2>{{ app.name }}</h2>
-		<p class="id">{{ app.id }}</p>
-		<p class="description">{{ app.description }}</p>
-	</div>
-	<div class="_content">
-		<h2>{{ i18n.ts._auth.permissionAsk }}</h2>
-		<ul>
-			<li v-for="p in app.permission" :key="p">{{ i18n.t(`_permissions.${p}`) }}</li>
-		</ul>
-	</div>
-	<div class="_footer">
-		<MkButton inline @click="cancel">{{ i18n.ts.cancel }}</MkButton>
-		<MkButton inline primary @click="accept">{{ i18n.ts.accept }}</MkButton>
-	</div>
-</section>
+	<section class="_section">
+		<div class="_title">
+			{{ i18n.t("_auth.shareAccess", { name: app.name }) }}
+		</div>
+		<div class="_content">
+			<h2>{{ app.name }}</h2>
+			<p class="id">{{ app.id }}</p>
+			<p class="description">{{ app.description }}</p>
+		</div>
+		<div class="_content">
+			<h2>{{ i18n.ts._auth.permissionAsk }}</h2>
+			<ul>
+				<li v-for="p in app.permission" :key="p">
+					{{ i18n.t(`_permissions.${p}`) }}
+				</li>
+			</ul>
+		</div>
+		<div class="_footer">
+			<MkButton inline @click="cancel">{{ i18n.ts.cancel }}</MkButton>
+			<MkButton inline primary @click="accept">{{
+				i18n.ts.accept
+			}}</MkButton>
+		</div>
+	</section>
 </template>
 
 <script lang="ts" setup>
-import { defineComponent } from 'vue';
-import MkButton from '@/components/MkButton.vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
+import { defineComponent } from "vue";
+import MkButton from "@/components/MkButton.vue";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
 
 const emit = defineEmits<{
-	(ev: 'denied'): void;
-	(ev: 'accepted'): void;
+	(ev: "denied"): void;
+	(ev: "accepted"): void;
 }>();
 
 const props = defineProps<{
@@ -45,18 +51,18 @@ const props = defineProps<{
 const app = props.session.app;
 
 function cancel() {
-	os.api('auth/deny', {
+	os.api("auth/deny", {
 		token: props.session.token,
 	}).then(() => {
-		emit('denied');
+		emit("denied");
 	});
 }
 
 function accept() {
-	os.api('auth/accept', {
+	os.api("auth/accept", {
 		token: props.session.token,
 	}).then(() => {
-		emit('accepted');
+		emit("accepted");
 	});
 }
 </script>
diff --git a/packages/client/src/pages/auth.vue b/packages/client/src/pages/auth.vue
index 34508610c1..8762f54c83 100644
--- a/packages/client/src/pages/auth.vue
+++ b/packages/client/src/pages/auth.vue
@@ -1,113 +1,154 @@
 <template>
-<div v-if="$i && fetching" class="">
-	<MkLoading/>
-</div>
-<div v-else-if="$i">
-	<XForm
-		v-if="state == 'waiting'"
-		ref="form"
-		class="form"
-		:session="session"
-		@denied="state = 'denied'"
-		@accepted="accepted"
-	/>
-	<div v-if="state == 'denied'" class="denied">
-		<h1>{{ i18n.ts._auth.denied }}</h1>
+	<div v-if="$i && fetching" class="">
+		<MkLoading />
 	</div>
-	<div v-if="state == 'accepted'" class="accepted">
-		<h1>{{ session.app.isAuthorized ? i18n.t('already-authorized') : i18n.ts.allowed }}</h1>
-		<p v-if="session.app.callbackUrl && !auth_code">{{ i18n.ts._auth.callback }}<MkEllipsis/></p>
-		<MkKeyValue v-if="session.app.callbackUrl && auth_code" :copy="auth_code">
-			<template #key>{{ i18n.ts._auth.copyAsk }}</template>
-			<template #value>{{ auth_code }}</template>
-		</MkKeyValue>
-		<p v-if="!session.app.callbackUrl">{{ i18n.ts._auth.pleaseGoBack }}</p>
+	<div v-else-if="$i">
+		<XForm
+			v-if="state == 'waiting'"
+			ref="form"
+			class="form"
+			:session="session"
+			@denied="state = 'denied'"
+			@accepted="accepted"
+		/>
+		<div v-if="state == 'denied'" class="denied">
+			<h1>{{ i18n.ts._auth.denied }}</h1>
+		</div>
+		<div v-if="state == 'accepted'" class="accepted">
+			<h1>
+				{{
+					session.app.isAuthorized
+						? i18n.t("already-authorized")
+						: i18n.ts.allowed
+				}}
+			</h1>
+			<p v-if="session.app.callbackUrl && !auth_code">
+				{{ i18n.ts._auth.callback }}<MkEllipsis />
+			</p>
+			<MkKeyValue
+				v-if="session.app.callbackUrl && auth_code"
+				:copy="auth_code"
+			>
+				<template #key>{{ i18n.ts._auth.copyAsk }}</template>
+				<template #value>{{ auth_code }}</template>
+			</MkKeyValue>
+			<p v-if="!session.app.callbackUrl">
+				{{ i18n.ts._auth.pleaseGoBack }}
+			</p>
+		</div>
+		<div v-if="state == 'fetch-session-error'" class="error">
+			<p>{{ i18n.ts.somethingHappened }}</p>
+		</div>
 	</div>
-	<div v-if="state == 'fetch-session-error'" class="error">
-		<p>{{ i18n.ts.somethingHappened }}</p>
+	<div v-else class="signin">
+		<MkSignin @login="onLogin" />
 	</div>
-</div>
-<div v-else class="signin">
-	<MkSignin @login="onLogin"/>
-</div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
-import XForm from './auth.form.vue';
-import MkSignin from '@/components/MkSignin.vue';
-import MkKeyValue from '@/components/MkKeyValue.vue';
-import * as os from '@/os';
-import { login } from '@/account';
-import { i18n } from '@/i18n';
+import { defineComponent } from "vue";
+import XForm from "./auth.form.vue";
+import MkSignin from "@/components/MkSignin.vue";
+import MkKeyValue from "@/components/MkKeyValue.vue";
+import * as os from "@/os";
+import { login } from "@/account";
+import { i18n } from "@/i18n";
 
 export default defineComponent({
 	components: {
 		XForm,
 		MkSignin,
-		MkKeyValue
+		MkKeyValue,
 	},
-	props: ['token'],
+	props: ["token"],
 	data() {
 		return {
 			state: null,
 			session: null,
 			fetching: true,
 			i18n,
-			auth_code: null
+			auth_code: null,
 		};
 	},
 	mounted() {
 		if (!this.$i) return;
 
 		// Fetch session
-		os.api('auth/session/show', {
+		os.api("auth/session/show", {
 			token: this.token,
-		}).then(session => {
-			this.session = session;
-			this.fetching = false;
+		})
+			.then((session) => {
+				this.session = session;
+				this.fetching = false;
 
-			// 既に連携していた場合
-			if (this.session.app.isAuthorized) {
-				os.api('auth/accept', {
-					token: this.session.token,
-				}).then(() => {
-					this.accepted();
-				});
-			} else {
-				this.state = 'waiting';
-			}
-		}).catch(error => {
-			this.state = 'fetch-session-error';
-			this.fetching = false;
-		});
+				// 既に連携していた場合
+				if (this.session.app.isAuthorized) {
+					os.api("auth/accept", {
+						token: this.session.token,
+					}).then(() => {
+						this.accepted();
+					});
+				} else {
+					this.state = "waiting";
+				}
+			})
+			.catch((error) => {
+				this.state = "fetch-session-error";
+				this.fetching = false;
+			});
 	},
 	methods: {
 		accepted() {
-			this.state = 'accepted';
-			const getUrlParams = () => window.location.search.substring(1).split('&').reduce((result, query) => { const [k, v] = query.split('='); result[k] = decodeURI(v); return result; }, {});
-			const isMastodon = !!getUrlParams().mastodon
+			this.state = "accepted";
+			const getUrlParams = () =>
+				window.location.search
+					.substring(1)
+					.split("&")
+					.reduce((result, query) => {
+						const [k, v] = query.split("=");
+						result[k] = decodeURI(v);
+						return result;
+					}, {});
+			const isMastodon = !!getUrlParams().mastodon;
 			if (this.session.app.callbackUrl && isMastodon) {
 				const callbackUrl = new URL(this.session.app.callbackUrl);
 				callbackUrl.searchParams.append("code", this.session.token);
-				if (!!getUrlParams().state) callbackUrl.searchParams.append("state", getUrlParams().state);
+				if (!!getUrlParams().state)
+					callbackUrl.searchParams.append(
+						"state",
+						getUrlParams().state
+					);
 				location.href = callbackUrl.toString();
 			} else if (this.session.app.callbackUrl) {
 				const url = new URL(this.session.app.callbackUrl);
-				if (['javascript:', 'file:', 'data:', 'mailto:', 'tel:'].includes(url.protocol)) throw new Error('invalid url');
-				if (this.session.app.callbackUrl === "urn:ietf:wg:oauth:2.0:oob") {
+				if (
+					[
+						"javascript:",
+						"file:",
+						"data:",
+						"mailto:",
+						"tel:",
+					].includes(url.protocol)
+				)
+					throw new Error("invalid url");
+				if (
+					this.session.app.callbackUrl === "urn:ietf:wg:oauth:2.0:oob"
+				) {
 					this.auth_code = this.session.token;
 				} else {
-					location.href = `${this.session.app.callbackUrl}?token=${this.session.token}&code=${this.session.token}&state=${getUrlParams().state || ''}`;
+					location.href = `${this.session.app.callbackUrl}?token=${
+						this.session.token
+					}&code=${this.session.token}&state=${
+						getUrlParams().state || ""
+					}`;
 				}
 			}
-		}, onLogin(res) {
+		},
+		onLogin(res) {
 			login(res.i);
 		},
 	},
 });
 </script>
 
-<style lang="scss" scoped>
-
-</style>
+<style lang="scss" scoped></style>
diff --git a/packages/client/src/pages/channel-editor.vue b/packages/client/src/pages/channel-editor.vue
index 3aca69f3d4..433c87c389 100644
--- a/packages/client/src/pages/channel-editor.vue
+++ b/packages/client/src/pages/channel-editor.vue
@@ -1,41 +1,54 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
-	<MkSpacer :content-max="700">
-		<div class="_formRoot">
-			<MkInput v-model="name" class="_formBlock">
-				<template #label>{{ i18n.ts.name }}</template>
-			</MkInput>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader :actions="headerActions" :tabs="headerTabs"
+		/></template>
+		<MkSpacer :content-max="700">
+			<div class="_formRoot">
+				<MkInput v-model="name" class="_formBlock">
+					<template #label>{{ i18n.ts.name }}</template>
+				</MkInput>
 
-			<MkTextarea v-model="description" class="_formBlock">
-				<template #label>{{ i18n.ts.description }}</template>
-			</MkTextarea>
+				<MkTextarea v-model="description" class="_formBlock">
+					<template #label>{{ i18n.ts.description }}</template>
+				</MkTextarea>
 
-			<div class="banner">
-				<MkButton v-if="bannerId == null" @click="setBannerImage"><i class="ph-plus ph-bold ph-lg"></i> {{ i18n.ts._channel.setBanner }}</MkButton>
-				<div v-else-if="bannerUrl">
-					<img :src="bannerUrl" style="width: 100%;"/>
-					<MkButton @click="removeBannerImage()"><i class="ph-trash ph-bold ph-lg"></i> {{ i18n.ts._channel.removeBanner }}</MkButton>
+				<div class="banner">
+					<MkButton v-if="bannerId == null" @click="setBannerImage"
+						><i class="ph-plus ph-bold ph-lg"></i>
+						{{ i18n.ts._channel.setBanner }}</MkButton
+					>
+					<div v-else-if="bannerUrl">
+						<img :src="bannerUrl" style="width: 100%" />
+						<MkButton @click="removeBannerImage()"
+							><i class="ph-trash ph-bold ph-lg"></i>
+							{{ i18n.ts._channel.removeBanner }}</MkButton
+						>
+					</div>
+				</div>
+				<div class="_formBlock">
+					<MkButton primary @click="save()"
+						><i class="ph-floppy-disk-back ph-bold ph-lg"></i>
+						{{
+							channelId ? i18n.ts.save : i18n.ts.create
+						}}</MkButton
+					>
 				</div>
 			</div>
-			<div class="_formBlock">
-				<MkButton primary @click="save()"><i class="ph-floppy-disk-back ph-bold ph-lg"></i> {{ channelId ? i18n.ts.save : i18n.ts.create }}</MkButton>
-			</div>
-		</div>
-	</MkSpacer>
-</MkStickyContainer>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, watch } from 'vue';
-import MkTextarea from '@/components/form/textarea.vue';
-import MkButton from '@/components/MkButton.vue';
-import MkInput from '@/components/form/input.vue';
-import { selectFile } from '@/scripts/select-file';
-import * as os from '@/os';
-import { useRouter } from '@/router';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import { i18n } from '@/i18n';
+import { computed, inject, watch } from "vue";
+import MkTextarea from "@/components/form/textarea.vue";
+import MkButton from "@/components/MkButton.vue";
+import MkInput from "@/components/form/input.vue";
+import { selectFile } from "@/scripts/select-file";
+import * as os from "@/os";
+import { useRouter } from "@/router";
+import { definePageMetadata } from "@/scripts/page-metadata";
+import { i18n } from "@/i18n";
 
 const router = useRouter();
 
@@ -49,20 +62,25 @@ let description = $ref(null);
 let bannerUrl = $ref<string | null>(null);
 let bannerId = $ref<string | null>(null);
 
-watch(() => bannerId, async () => {
-	if (bannerId == null) {
-		bannerUrl = null;
-	} else {
-		bannerUrl = (await os.api('drive/files/show', {
-			fileId: bannerId,
-		})).url;
+watch(
+	() => bannerId,
+	async () => {
+		if (bannerId == null) {
+			bannerUrl = null;
+		} else {
+			bannerUrl = (
+				await os.api("drive/files/show", {
+					fileId: bannerId,
+				})
+			).url;
+		}
 	}
-});
+);
 
 async function fetchChannel() {
 	if (props.channelId == null) return;
 
-	channel = await os.api('channels/show', {
+	channel = await os.api("channels/show", {
 		channelId: props.channelId,
 	});
 
@@ -83,11 +101,11 @@ function save() {
 
 	if (props.channelId) {
 		params.channelId = props.channelId;
-		os.api('channels/update', params).then(() => {
+		os.api("channels/update", params).then(() => {
 			os.success();
 		});
 	} else {
-		os.api('channels/create', params).then(created => {
+		os.api("channels/create", params).then((created) => {
 			os.success();
 			router.push(`/channels/${created.id}`);
 		});
@@ -95,7 +113,7 @@ function save() {
 }
 
 function setBannerImage(evt) {
-	selectFile(evt.currentTarget ?? evt.target, null).then(file => {
+	selectFile(evt.currentTarget ?? evt.target, null).then((file) => {
 		bannerId = file.id;
 	});
 }
@@ -108,15 +126,19 @@ const headerActions = $computed(() => []);
 
 const headerTabs = $computed(() => []);
 
-definePageMetadata(computed(() => props.channelId ? {
-	title: i18n.ts._channel.edit,
-	icon: 'ph-television ph-bold ph-lg',
-} : {
-	title: i18n.ts._channel.create,
-	icon: 'ph-television ph-bold ph-lg',
-}));
+definePageMetadata(
+	computed(() =>
+		props.channelId
+			? {
+					title: i18n.ts._channel.edit,
+					icon: "ph-television ph-bold ph-lg",
+			  }
+			: {
+					title: i18n.ts._channel.create,
+					icon: "ph-television ph-bold ph-lg",
+			  }
+	)
+);
 </script>
 
-<style lang="scss" scoped>
-
-</style>
+<style lang="scss" scoped></style>
diff --git a/packages/client/src/pages/channel.vue b/packages/client/src/pages/channel.vue
index e1524974d2..4c9124ae26 100644
--- a/packages/client/src/pages/channel.vue
+++ b/packages/client/src/pages/channel.vue
@@ -1,47 +1,116 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs" :display-back-button="true"/></template>
-	<MkSpacer :content-max="700">
-		<div v-if="channel">
-			<div class="wpgynlbz _panel _gap" :class="{ hide: !showBanner }">
-				<XChannelFollowButton :channel="channel" :full="true" class="subscribe"/>
-				<button class="_button toggle" @click="() => showBanner = !showBanner">
-					<template v-if="showBanner"><i class="ph-caret-up ph-bold ph-lg"></i></template>
-					<template v-else><i class="ph-caret-down ph-bold ph-lg"></i></template>
-				</button>
-				<div v-if="!showBanner" class="hideOverlay">
-				</div>
-				<div :style="{ backgroundImage: channel.bannerUrl ? `url(${channel.bannerUrl})` : null }" class="banner">
-					<div class="status">
-						<div><i class="ph-users ph-bold ph-lg ph-fw ph-lg"></i><I18n :src="i18n.ts._channel.usersCount" tag="span" style="margin-left: 4px;"><template #n><b>{{ channel.usersCount }}</b></template></I18n></div>
-						<div><i class="ph-pencil ph-bold ph-lg ph-fw ph-lg"></i><I18n :src="i18n.ts._channel.notesCount" tag="span" style="margin-left: 4px;"><template #n><b>{{ channel.notesCount }}</b></template></I18n></div>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader
+				:actions="headerActions"
+				:tabs="headerTabs"
+				:display-back-button="true"
+		/></template>
+		<MkSpacer :content-max="700">
+			<div v-if="channel">
+				<div
+					class="wpgynlbz _panel _gap"
+					:class="{ hide: !showBanner }"
+				>
+					<XChannelFollowButton
+						:channel="channel"
+						:full="true"
+						class="subscribe"
+					/>
+					<button
+						class="_button toggle"
+						@click="() => (showBanner = !showBanner)"
+					>
+						<template v-if="showBanner"
+							><i class="ph-caret-up ph-bold ph-lg"></i
+						></template>
+						<template v-else
+							><i class="ph-caret-down ph-bold ph-lg"></i
+						></template>
+					</button>
+					<div v-if="!showBanner" class="hideOverlay"></div>
+					<div
+						:style="{
+							backgroundImage: channel.bannerUrl
+								? `url(${channel.bannerUrl})`
+								: null,
+						}"
+						class="banner"
+					>
+						<div class="status">
+							<div>
+								<i
+									class="ph-users ph-bold ph-lg ph-fw ph-lg"
+								></i
+								><I18n
+									:src="i18n.ts._channel.usersCount"
+									tag="span"
+									style="margin-left: 4px"
+									><template #n
+										><b>{{
+											channel.usersCount
+										}}</b></template
+									></I18n
+								>
+							</div>
+							<div>
+								<i
+									class="ph-pencil ph-bold ph-lg ph-fw ph-lg"
+								></i
+								><I18n
+									:src="i18n.ts._channel.notesCount"
+									tag="span"
+									style="margin-left: 4px"
+									><template #n
+										><b>{{
+											channel.notesCount
+										}}</b></template
+									></I18n
+								>
+							</div>
+						</div>
+						<div class="fade"></div>
+					</div>
+					<div v-if="channel.description" class="description">
+						<Mfm
+							:text="channel.description"
+							:is-note="false"
+							:i="$i"
+						/>
 					</div>
-					<div class="fade"></div>
-				</div>
-				<div v-if="channel.description" class="description">
-					<Mfm :text="channel.description" :is-note="false" :i="$i"/>
 				</div>
+
+				<XPostForm
+					v-if="$i"
+					:channel="channel"
+					class="post-form _panel _gap"
+					fixed
+				/>
+
+				<XTimeline
+					:key="channelId"
+					class="_gap"
+					src="channel"
+					:channel="channelId"
+					@before="before"
+					@after="after"
+				/>
 			</div>
-
-			<XPostForm v-if="$i" :channel="channel" class="post-form _panel _gap" fixed/>
-
-			<XTimeline :key="channelId" class="_gap" src="channel" :channel="channelId" @before="before" @after="after"/>
-		</div>
-	</MkSpacer>
-</MkStickyContainer>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, watch } from 'vue';
-import MkContainer from '@/components/MkContainer.vue';
-import XPostForm from '@/components/MkPostForm.vue';
-import XTimeline from '@/components/MkTimeline.vue';
-import XChannelFollowButton from '@/components/MkChannelFollowButton.vue';
-import * as os from '@/os';
-import { useRouter } from '@/router';
-import { $i } from '@/account';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import { computed, inject, watch } from "vue";
+import MkContainer from "@/components/MkContainer.vue";
+import XPostForm from "@/components/MkPostForm.vue";
+import XTimeline from "@/components/MkTimeline.vue";
+import XChannelFollowButton from "@/components/MkChannelFollowButton.vue";
+import * as os from "@/os";
+import { useRouter } from "@/router";
+import { $i } from "@/account";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
 const router = useRouter();
 
@@ -52,37 +121,44 @@ const props = defineProps<{
 let channel = $ref(null);
 let showBanner = $ref(true);
 
-watch(() => props.channelId, async () => {
-	channel = await os.api('channels/show', {
-		channelId: props.channelId,
-	});
-}, { immediate: true });
+watch(
+	() => props.channelId,
+	async () => {
+		channel = await os.api("channels/show", {
+			channelId: props.channelId,
+		});
+	},
+	{ immediate: true }
+);
 
 function edit() {
 	router.push(`/channels/${channel?.id}/edit`);
 }
 
-const headerActions = $computed(() =>  [
-	...(
-		channel
-		&& channel?.userId === $i?.id
+const headerActions = $computed(() => [
+	...(channel && channel?.userId === $i?.id
 		? [
-			{
-				icon: 'ph-gear-six ph-bold ph-lg',
-				text: i18n.ts.edit,
-				handler: edit,
-			}
-		]
-		: []
-	),
+				{
+					icon: "ph-gear-six ph-bold ph-lg",
+					text: i18n.ts.edit,
+					handler: edit,
+				},
+		  ]
+		: []),
 ]);
 
 const headerTabs = $computed(() => []);
 
-definePageMetadata(computed(() => channel ? {
-	title: channel.name,
-	icon: 'ph-television ph-bold ph-lg',
-} : null));
+definePageMetadata(
+	computed(() =>
+		channel
+			? {
+					title: channel.name,
+					icon: "ph-television ph-bold ph-lg",
+			  }
+			: null
+	)
+);
 </script>
 
 <style lang="scss" scoped>
@@ -99,7 +175,7 @@ definePageMetadata(computed(() => channel ? {
 	> .toggle {
 		position: absolute;
 		z-index: 2;
-    top: 8px;
+		top: 8px;
 		right: 8px;
 		font-size: 1.2em;
 		width: 48px;
@@ -107,12 +183,12 @@ definePageMetadata(computed(() => channel ? {
 		color: #fff;
 		background: rgba(0, 0, 0, 0.5);
 		border-radius: 100%;
-		
+
 		> i {
 			vertical-align: middle;
 		}
 	}
-	
+
 	> .banner {
 		position: relative;
 		height: 200px;
diff --git a/packages/client/src/pages/channels.vue b/packages/client/src/pages/channels.vue
index 7d96e60184..2d8eeefcfc 100644
--- a/packages/client/src/pages/channels.vue
+++ b/packages/client/src/pages/channels.vue
@@ -1,105 +1,149 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
-	<MkSpacer :content-max="700">
-		<swiper
-			:modules="[Virtual]"
-			:space-between="20"
-			:virtual="true"
-			:allow-touch-move="!(deviceKind === 'desktop' && !defaultStore.state.swipeOnDesktop)"
-			@swiper="setSwiperRef"
-			@slide-change="onSlideChange"
-		>
-			<swiper-slide>
-				<div class="_content grwlizim featured">
-					<MkPagination v-slot="{items}" :pagination="featuredPagination">
-						<MkChannelPreview v-for="channel in items" :key="channel.id" class="_gap" :channel="channel"/>
-					</MkPagination>
-				</div>
-			</swiper-slide>
-			<swiper-slide>
-				<div class="_content grwlizim following">
-					<MkPagination v-slot="{items}" :pagination="followingPagination">
-						<MkChannelPreview v-for="channel in items" :key="channel.id" class="_gap" :channel="channel"/>
-					</MkPagination>
-				</div>
-			</swiper-slide>
-			<swiper-slide>
-				<div class="_content grwlizim owned">
-					<MkButton class="new" @click="create()"><i class="ph-plus ph-bold ph-lg"></i></MkButton>
-					<MkPagination v-slot="{items}" :pagination="ownedPagination">
-						<MkChannelPreview v-for="channel in items" :key="channel.id" class="_gap" :channel="channel"/>
-					</MkPagination>
-				</div>
-			</swiper-slide>
-		</swiper>
-	</MkSpacer>
-</MkStickyContainer>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader
+				v-model:tab="tab"
+				:actions="headerActions"
+				:tabs="headerTabs"
+		/></template>
+		<MkSpacer :content-max="700">
+			<swiper
+				:modules="[Virtual]"
+				:space-between="20"
+				:virtual="true"
+				:allow-touch-move="
+					!(
+						deviceKind === 'desktop' &&
+						!defaultStore.state.swipeOnDesktop
+					)
+				"
+				@swiper="setSwiperRef"
+				@slide-change="onSlideChange"
+			>
+				<swiper-slide>
+					<div class="_content grwlizim featured">
+						<MkPagination
+							v-slot="{ items }"
+							:pagination="featuredPagination"
+						>
+							<MkChannelPreview
+								v-for="channel in items"
+								:key="channel.id"
+								class="_gap"
+								:channel="channel"
+							/>
+						</MkPagination>
+					</div>
+				</swiper-slide>
+				<swiper-slide>
+					<div class="_content grwlizim following">
+						<MkPagination
+							v-slot="{ items }"
+							:pagination="followingPagination"
+						>
+							<MkChannelPreview
+								v-for="channel in items"
+								:key="channel.id"
+								class="_gap"
+								:channel="channel"
+							/>
+						</MkPagination>
+					</div>
+				</swiper-slide>
+				<swiper-slide>
+					<div class="_content grwlizim owned">
+						<MkButton class="new" @click="create()"
+							><i class="ph-plus ph-bold ph-lg"></i
+						></MkButton>
+						<MkPagination
+							v-slot="{ items }"
+							:pagination="ownedPagination"
+						>
+							<MkChannelPreview
+								v-for="channel in items"
+								:key="channel.id"
+								class="_gap"
+								:channel="channel"
+							/>
+						</MkPagination>
+					</div>
+				</swiper-slide>
+			</swiper>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { computed, defineComponent, inject, watch } from 'vue';
-import { Virtual } from 'swiper';
-import { Swiper, SwiperSlide } from 'swiper/vue';
-import MkChannelPreview from '@/components/MkChannelPreview.vue';
-import MkPagination from '@/components/MkPagination.vue';
-import MkButton from '@/components/MkButton.vue';
-import { useRouter } from '@/router';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import { deviceKind } from '@/scripts/device-kind';
-import { i18n } from '@/i18n';
-import { defaultStore } from '@/store';
-import 'swiper/scss';
-import 'swiper/scss/virtual';
+import { computed, defineComponent, inject, watch } from "vue";
+import { Virtual } from "swiper";
+import { Swiper, SwiperSlide } from "swiper/vue";
+import MkChannelPreview from "@/components/MkChannelPreview.vue";
+import MkPagination from "@/components/MkPagination.vue";
+import MkButton from "@/components/MkButton.vue";
+import { useRouter } from "@/router";
+import { definePageMetadata } from "@/scripts/page-metadata";
+import { deviceKind } from "@/scripts/device-kind";
+import { i18n } from "@/i18n";
+import { defaultStore } from "@/store";
+import "swiper/scss";
+import "swiper/scss/virtual";
 
 const router = useRouter();
 
-const tabs = ['featured', 'following', 'owned'];
+const tabs = ["featured", "following", "owned"];
 let tab = $ref(tabs[0]);
-watch($$(tab), () => (syncSlide(tabs.indexOf(tab))));
+watch($$(tab), () => syncSlide(tabs.indexOf(tab)));
 
 const featuredPagination = {
-	endpoint: 'channels/featured' as const,
+	endpoint: "channels/featured" as const,
 	limit: 10,
 	noPaging: false,
 };
 const followingPagination = {
-	endpoint: 'channels/followed' as const,
+	endpoint: "channels/followed" as const,
 	limit: 10,
 };
 const ownedPagination = {
-	endpoint: 'channels/owned' as const,
+	endpoint: "channels/owned" as const,
 	limit: 10,
 };
 
 function create() {
-	router.push('/channels/new');
+	router.push("/channels/new");
 }
 
-const headerActions = $computed(() => [{
-	icon: 'ph-plus ph-bold ph-lg',
-	text: i18n.ts.create,
-	handler: create,
-}]);
+const headerActions = $computed(() => [
+	{
+		icon: "ph-plus ph-bold ph-lg",
+		text: i18n.ts.create,
+		handler: create,
+	},
+]);
 
-const headerTabs = $computed(() => [{
-	key: 'featured',
-	title: i18n.ts._channel.featured,
-	icon: 'ph-fire-simple ph-bold ph-lg',
-}, {
-	key: 'following',
-	title: i18n.ts._channel.following,
-	icon: 'ph-heart ph-bold ph-lg',
-}, {
-	key: 'owned',
-	title: i18n.ts._channel.owned,
-	icon: 'ph-crown-simple ph-bold ph-lg',
-}]);
+const headerTabs = $computed(() => [
+	{
+		key: "featured",
+		title: i18n.ts._channel.featured,
+		icon: "ph-fire-simple ph-bold ph-lg",
+	},
+	{
+		key: "following",
+		title: i18n.ts._channel.following,
+		icon: "ph-heart ph-bold ph-lg",
+	},
+	{
+		key: "owned",
+		title: i18n.ts._channel.owned,
+		icon: "ph-crown-simple ph-bold ph-lg",
+	},
+]);
 
-definePageMetadata(computed(() => ({
-	title: i18n.ts.channel,
-	icon: 'ph-television ph-bold ph-lg',
-})));
+definePageMetadata(
+	computed(() => ({
+		title: i18n.ts.channel,
+		icon: "ph-television ph-bold ph-lg",
+	}))
+);
 
 let swiperRef = null;
 
diff --git a/packages/client/src/pages/clip.vue b/packages/client/src/pages/clip.vue
index eb58b47692..bd6788b51e 100644
--- a/packages/client/src/pages/clip.vue
+++ b/packages/client/src/pages/clip.vue
@@ -1,108 +1,136 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions"/></template>
-	<MkSpacer :content-max="800">
-		<div v-if="clip">
-			<div class="okzinsic _panel">
-				<div v-if="clip.description" class="description">
-					<Mfm :text="clip.description" :is-note="false" :i="$i"/>
+	<MkStickyContainer>
+		<template #header><MkPageHeader :actions="headerActions" /></template>
+		<MkSpacer :content-max="800">
+			<div v-if="clip">
+				<div class="okzinsic _panel">
+					<div v-if="clip.description" class="description">
+						<Mfm
+							:text="clip.description"
+							:is-note="false"
+							:i="$i"
+						/>
+					</div>
+					<div class="user">
+						<MkAvatar
+							:user="clip.user"
+							class="avatar"
+							:show-indicator="true"
+						/>
+						<MkUserName :user="clip.user" :nowrap="false" />
+					</div>
 				</div>
-				<div class="user">
-					<MkAvatar :user="clip.user" class="avatar" :show-indicator="true"/> <MkUserName :user="clip.user" :nowrap="false"/>
-				</div>
-			</div>
 
-			<XNotes :pagination="pagination" :detail="true"/>
-		</div>
-	</MkSpacer>
-</MkStickyContainer>
+				<XNotes :pagination="pagination" :detail="true" />
+			</div>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { computed, watch, provide } from 'vue';
-import type * as misskey from 'calckey-js';
-import XNotes from '@/components/MkNotes.vue';
-import { $i } from '@/account';
-import { i18n } from '@/i18n';
-import * as os from '@/os';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import { computed, watch, provide } from "vue";
+import type * as misskey from "calckey-js";
+import XNotes from "@/components/MkNotes.vue";
+import { $i } from "@/account";
+import { i18n } from "@/i18n";
+import * as os from "@/os";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
 const props = defineProps<{
-	clipId: string,
+	clipId: string;
 }>();
 
 let clip: misskey.entities.Clip = $ref<misskey.entities.Clip>();
 const pagination = {
-	endpoint: 'clips/notes' as const,
+	endpoint: "clips/notes" as const,
 	limit: 10,
 	params: computed(() => ({
 		clipId: props.clipId,
 	})),
 };
 
-const isOwned: boolean | null = $computed<boolean | null>(() => $i && clip && ($i.id === clip.userId));
+const isOwned: boolean | null = $computed<boolean | null>(
+	() => $i && clip && $i.id === clip.userId
+);
 
-watch(() => props.clipId, async () => {
-	clip = await os.api('clips/show', {
-		clipId: props.clipId,
-	});
-}, {
-	immediate: true,
-});
-
-provide('currentClipPage', $$(clip));
-
-const headerActions = $computed(() => clip && isOwned ? [{
-	icon: 'ph-pencil ph-bold ph-lg',
-	text: i18n.ts.edit,
-	handler: async (): Promise<void> => {
-		const { canceled, result } = await os.form(clip.name, {
-			name: {
-				type: 'string',
-				label: i18n.ts.name,
-				default: clip.name,
-			},
-			description: {
-				type: 'string',
-				required: false,
-				multiline: true,
-				label: i18n.ts.description,
-				default: clip.description,
-			},
-			isPublic: {
-				type: 'boolean',
-				label: i18n.ts.public,
-				default: clip.isPublic,
-			},
-		});
-		if (canceled) return;
-
-		os.apiWithDialog('clips/update', {
-			clipId: clip.id,
-			...result,
+watch(
+	() => props.clipId,
+	async () => {
+		clip = await os.api("clips/show", {
+			clipId: props.clipId,
 		});
 	},
-}, {
-	icon: 'ph-trash ph-bold ph-lg',
-	text: i18n.ts.delete,
-	danger: true,
-	handler: async (): Promise<void> => {
-		const { canceled } = await os.confirm({
-			type: 'warning',
-			text: i18n.t('deleteAreYouSure', { x: clip.name }),
-		});
-		if (canceled) return;
+	{
+		immediate: true,
+	}
+);
 
-		await os.apiWithDialog('clips/delete', {
-			clipId: clip.id,
-		});
-	},
-}] : null);
+provide("currentClipPage", $$(clip));
 
-definePageMetadata(computed(() => clip ? {
-	title: clip.name,
-	icon: 'ph-paperclip ph-bold ph-lg',
-} : null));
+const headerActions = $computed(() =>
+	clip && isOwned
+		? [
+				{
+					icon: "ph-pencil ph-bold ph-lg",
+					text: i18n.ts.edit,
+					handler: async (): Promise<void> => {
+						const { canceled, result } = await os.form(clip.name, {
+							name: {
+								type: "string",
+								label: i18n.ts.name,
+								default: clip.name,
+							},
+							description: {
+								type: "string",
+								required: false,
+								multiline: true,
+								label: i18n.ts.description,
+								default: clip.description,
+							},
+							isPublic: {
+								type: "boolean",
+								label: i18n.ts.public,
+								default: clip.isPublic,
+							},
+						});
+						if (canceled) return;
+
+						os.apiWithDialog("clips/update", {
+							clipId: clip.id,
+							...result,
+						});
+					},
+				},
+				{
+					icon: "ph-trash ph-bold ph-lg",
+					text: i18n.ts.delete,
+					danger: true,
+					handler: async (): Promise<void> => {
+						const { canceled } = await os.confirm({
+							type: "warning",
+							text: i18n.t("deleteAreYouSure", { x: clip.name }),
+						});
+						if (canceled) return;
+
+						await os.apiWithDialog("clips/delete", {
+							clipId: clip.id,
+						});
+					},
+				},
+		  ]
+		: null
+);
+
+definePageMetadata(
+	computed(() =>
+		clip
+			? {
+					title: clip.name,
+					icon: "ph-paperclip ph-bold ph-lg",
+			  }
+			: null
+	)
+);
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/pages/drive.vue b/packages/client/src/pages/drive.vue
index bd38e9e422..8aeb97b46e 100644
--- a/packages/client/src/pages/drive.vue
+++ b/packages/client/src/pages/drive.vue
@@ -1,15 +1,15 @@
 <template>
-<div>
-	<XDrive ref="drive" @cd="x => folder = x"/>
-</div>
+	<div>
+		<XDrive ref="drive" @cd="(x) => (folder = x)" />
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
-import XDrive from '@/components/MkDrive.vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import { computed } from "vue";
+import XDrive from "@/components/MkDrive.vue";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
 let folder = $ref(null);
 
@@ -17,9 +17,11 @@ const headerActions = $computed(() => []);
 
 const headerTabs = $computed(() => []);
 
-definePageMetadata(computed(() => ({
-	title: folder ? folder.name : i18n.ts.drive,
-	icon: 'ph-cloud ph-bold ph-lg',
-	hideHeader: true,
-})));
+definePageMetadata(
+	computed(() => ({
+		title: folder ? folder.name : i18n.ts.drive,
+		icon: "ph-cloud ph-bold ph-lg",
+		hideHeader: true,
+	}))
+);
 </script>
diff --git a/packages/client/src/pages/emojis.emoji.vue b/packages/client/src/pages/emojis.emoji.vue
index e88eda5b2a..c8b7d64424 100644
--- a/packages/client/src/pages/emojis.emoji.vue
+++ b/packages/client/src/pages/emojis.emoji.vue
@@ -1,46 +1,55 @@
 <template>
-<button class="zuvgdzyu _button" @click="menu">
-	<img :src="emoji.url" class="img" :alt="emoji.name"/>
-	<div class="body">
-		<div class="name _monospace">{{ emoji.name }}</div>
-		<div class="info">{{ emoji.aliases.join(" ") }}</div>
-	</div>
-</button>
+	<button class="zuvgdzyu _button" @click="menu">
+		<img :src="emoji.url" class="img" :alt="emoji.name" />
+		<div class="body">
+			<div class="name _monospace">{{ emoji.name }}</div>
+			<div class="info">{{ emoji.aliases.join(" ") }}</div>
+		</div>
+	</button>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import * as os from '@/os';
-import copyToClipboard from '@/scripts/copy-to-clipboard';
-import { i18n } from '@/i18n';
+import {} from "vue";
+import * as os from "@/os";
+import copyToClipboard from "@/scripts/copy-to-clipboard";
+import { i18n } from "@/i18n";
 
 const props = defineProps<{
 	emoji: Record<string, unknown>; // TODO
 }>();
 
 function menu(ev) {
-	os.popupMenu([{
-		type: "label",
-		text: ":" + props.emoji.name + ":",
-	}, {
-		text: i18n.ts.copy,
-		icon: "ph-clipboard-text ph-bold ph-lg",
-		action: () => {
-			copyToClipboard(`:${props.emoji.name}:`);
-			os.success();
-		},
-	}, {
-		text: i18n.ts.license,
-		icon: "ph-info ph-bold ph-lg",
-		action: () => {
-			os.apiGet("emoji", { name: props.emoji.name }).then(res => {
-				os.alert({
-					type: "info",
-					text: `${res.license || i18n.ts.notSet}`,
-				});
-			});
-		},
-	}], ev.currentTarget ?? ev.target);
+	os.popupMenu(
+		[
+			{
+				type: "label",
+				text: ":" + props.emoji.name + ":",
+			},
+			{
+				text: i18n.ts.copy,
+				icon: "ph-clipboard-text ph-bold ph-lg",
+				action: () => {
+					copyToClipboard(`:${props.emoji.name}:`);
+					os.success();
+				},
+			},
+			{
+				text: i18n.ts.license,
+				icon: "ph-info ph-bold ph-lg",
+				action: () => {
+					os.apiGet("emoji", { name: props.emoji.name }).then(
+						(res) => {
+							os.alert({
+								type: "info",
+								text: `${res.license || i18n.ts.notSet}`,
+							});
+						}
+					);
+				},
+			},
+		],
+		ev.currentTarget ?? ev.target
+	);
 }
 </script>
 
diff --git a/packages/client/src/pages/explore.featured.vue b/packages/client/src/pages/explore.featured.vue
index 0f66307ab0..2d21bfcb43 100644
--- a/packages/client/src/pages/explore.featured.vue
+++ b/packages/client/src/pages/explore.featured.vue
@@ -1,38 +1,41 @@
 <template>
-<MkSpacer :content-max="800">
-	<MkTab v-model="tab" style="margin-bottom: var(--margin);">
-		<option value="local">{{ i18n.ts.local }}</option>
-		<option value="remote">{{ i18n.ts.remote }}</option>
-	</MkTab>
-	<XNotes v-if="tab === 'local'" :pagination="paginationForLocal"/>
-	<XNotes v-else-if="tab === 'remote'" :pagination="paginationForRemote"/>
-</MkSpacer>
+	<MkSpacer :content-max="800">
+		<MkTab v-model="tab" style="margin-bottom: var(--margin)">
+			<option value="local">{{ i18n.ts.local }}</option>
+			<option value="remote">{{ i18n.ts.remote }}</option>
+		</MkTab>
+		<XNotes v-if="tab === 'local'" :pagination="paginationForLocal" />
+		<XNotes
+			v-else-if="tab === 'remote'"
+			:pagination="paginationForRemote"
+		/>
+	</MkSpacer>
 </template>
 
 <script lang="ts" setup>
-import XNotes from '@/components/MkNotes.vue';
-import MkTab from '@/components/MkTab.vue';
-import { i18n } from '@/i18n';
+import XNotes from "@/components/MkNotes.vue";
+import MkTab from "@/components/MkTab.vue";
+import { i18n } from "@/i18n";
 
 const paginationForLocal = {
-	endpoint: 'notes/featured' as const,
+	endpoint: "notes/featured" as const,
 	limit: 10,
-	origin: 'local',
+	origin: "local",
 	offsetMode: true,
 	params: {
 		days: 14,
-	}
+	},
 };
 
 const paginationForRemote = {
-	endpoint: 'notes/featured' as const,
+	endpoint: "notes/featured" as const,
 	limit: 20,
 	offsetMode: true,
 	params: {
-		origin: 'remote',
+		origin: "remote",
 		days: 7,
-	}
-}
+	},
+};
 
 // const paginationForRemote = {
 // 	endpoint: 'notes/polls/recommendation' as const,
@@ -40,5 +43,5 @@ const paginationForRemote = {
 // 	offsetMode: true,
 // };
 
-let tab = $ref('local');
+let tab = $ref("local");
 </script>
diff --git a/packages/client/src/pages/explore.users.vue b/packages/client/src/pages/explore.users.vue
index d810b3115e..378801532c 100644
--- a/packages/client/src/pages/explore.users.vue
+++ b/packages/client/src/pages/explore.users.vue
@@ -1,139 +1,253 @@
-
 4.8 KiB
 <template>
-<MkSpacer :content-max="1200">
-	<MkTab v-model="origin" style="margin-bottom: var(--margin);">
-		<option value="local">{{ i18n.ts.local }}</option>
-		<option value="remote">{{ i18n.ts.remote }}</option>
-	</MkTab>
-	<div v-if="origin === 'local'">
-		<template v-if="tag == null">
-			<MkFolder class="_gap" persist-key="explore-pinned-users">
-				<template #header><i class="ph-bookmark ph-bold ph-lg ph-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.pinnedUsers }}</template>
-				<XUserList :pagination="pinnedUsers"/>
-			</MkFolder>
-			<MkFolder v-if="$i != null" class="_gap" persist-key="explore-popular-users">
-				<template #header><i class="ph-chart-line-up ph-bold ph-lg ph-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.popularUsers }}</template>
-				<XUserList :pagination="popularUsers"/>
-			</MkFolder>
-			<MkFolder v-if="$i != null" class="_gap" persist-key="explore-recently-updated-users">
-				<template #header><i class="ph-activity ph-bold ph-lg ph-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.recentlyUpdatedUsers }}</template>
-				<XUserList :pagination="recentlyUpdatedUsers"/>
-			</MkFolder>
-			<MkFolder v-if="$i != null" class="_gap" persist-key="explore-recently-registered-users">
-				<template #header><i class="ph-butterfly ph-bold ph-lg ph-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.recentlyRegisteredUsers }}</template>
-				<XUserList :pagination="recentlyRegisteredUsers"/>
-			</MkFolder>
-		</template>
-	</div>
-	<div v-else>
-		<MkFolder ref="tagsEl" :foldable="true" :expanded="false" class="_gap">
-			<template #header><i class="ph-compass ph-bold ph-lg ph-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.popularTags }}</template>
+	<MkSpacer :content-max="1200">
+		<MkTab v-model="origin" style="margin-bottom: var(--margin)">
+			<option value="local">{{ i18n.ts.local }}</option>
+			<option value="remote">{{ i18n.ts.remote }}</option>
+		</MkTab>
+		<div v-if="origin === 'local'">
+			<template v-if="tag == null">
+				<MkFolder class="_gap" persist-key="explore-pinned-users">
+					<template #header
+						><i
+							class="ph-bookmark ph-bold ph-lg ph-fw"
+							style="margin-right: 0.5em"
+						></i
+						>{{ i18n.ts.pinnedUsers }}</template
+					>
+					<XUserList :pagination="pinnedUsers" />
+				</MkFolder>
+				<MkFolder
+					v-if="$i != null"
+					class="_gap"
+					persist-key="explore-popular-users"
+				>
+					<template #header
+						><i
+							class="ph-chart-line-up ph-bold ph-lg ph-fw"
+							style="margin-right: 0.5em"
+						></i
+						>{{ i18n.ts.popularUsers }}</template
+					>
+					<XUserList :pagination="popularUsers" />
+				</MkFolder>
+				<MkFolder
+					v-if="$i != null"
+					class="_gap"
+					persist-key="explore-recently-updated-users"
+				>
+					<template #header
+						><i
+							class="ph-activity ph-bold ph-lg ph-fw"
+							style="margin-right: 0.5em"
+						></i
+						>{{ i18n.ts.recentlyUpdatedUsers }}</template
+					>
+					<XUserList :pagination="recentlyUpdatedUsers" />
+				</MkFolder>
+				<MkFolder
+					v-if="$i != null"
+					class="_gap"
+					persist-key="explore-recently-registered-users"
+				>
+					<template #header
+						><i
+							class="ph-butterfly ph-bold ph-lg ph-fw"
+							style="margin-right: 0.5em"
+						></i
+						>{{ i18n.ts.recentlyRegisteredUsers }}</template
+					>
+					<XUserList :pagination="recentlyRegisteredUsers" />
+				</MkFolder>
+			</template>
+		</div>
+		<div v-else>
+			<MkFolder
+				ref="tagsEl"
+				:foldable="true"
+				:expanded="false"
+				class="_gap"
+			>
+				<template #header
+					><i
+						class="ph-compass ph-bold ph-lg ph-fw"
+						style="margin-right: 0.5em"
+					></i
+					>{{ i18n.ts.popularTags }}</template
+				>
 
-			<div class="vxjfqztj">
-				<MkA v-for="tag in tagsLocal" :key="'local:' + tag.tag" :to="`/explore/tags/${tag.tag}`" class="local">{{ tag.tag }}</MkA>
-				<MkA v-for="tag in tagsRemote" :key="'remote:' + tag.tag" :to="`/explore/tags/${tag.tag}`">{{ tag.tag }}</MkA>
-			</div>
-		</MkFolder>
+				<div class="vxjfqztj">
+					<MkA
+						v-for="tag in tagsLocal"
+						:key="'local:' + tag.tag"
+						:to="`/explore/tags/${tag.tag}`"
+						class="local"
+						>{{ tag.tag }}</MkA
+					>
+					<MkA
+						v-for="tag in tagsRemote"
+						:key="'remote:' + tag.tag"
+						:to="`/explore/tags/${tag.tag}`"
+						>{{ tag.tag }}</MkA
+					>
+				</div>
+			</MkFolder>
 
-		<MkFolder v-if="tag != null" :key="`${tag}`" class="_gap">
-			<template #header><i class="ph-hash ph-bold ph-lg ph-fw" style="margin-right: 0.5em;"></i>{{ tag }}</template>
-			<XUserList :pagination="tagUsers"/>
-		</MkFolder>
+			<MkFolder v-if="tag != null" :key="`${tag}`" class="_gap">
+				<template #header
+					><i
+						class="ph-hash ph-bold ph-lg ph-fw"
+						style="margin-right: 0.5em"
+					></i
+					>{{ tag }}</template
+				>
+				<XUserList :pagination="tagUsers" />
+			</MkFolder>
 
-		<template v-if="tag == null && $i != null">
-			<MkFolder class="_gap">
-				<template #header><i class="ph-chart-line-up ph-bold ph-lg ph-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.popularUsers }}</template>
-				<XUserList :pagination="popularUsersF"/>
-			</MkFolder>
-			<MkFolder class="_gap">
-				<template #header><i class="ph-activity ph-bold ph-lg ph-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.recentlyUpdatedUsers }}</template>
-				<XUserList :pagination="recentlyUpdatedUsersF"/>
-			</MkFolder>
-			<MkFolder class="_gap">
-				<template #header><i class="ph-rocke-launch ph-bold ph-lg ph-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.recentlyDiscoveredUsers }}</template>
-				<XUserList :pagination="recentlyRegisteredUsersF"/>
-			</MkFolder>
-		</template>
-	</div>
-</MkSpacer>
+			<template v-if="tag == null && $i != null">
+				<MkFolder class="_gap">
+					<template #header
+						><i
+							class="ph-chart-line-up ph-bold ph-lg ph-fw"
+							style="margin-right: 0.5em"
+						></i
+						>{{ i18n.ts.popularUsers }}</template
+					>
+					<XUserList :pagination="popularUsersF" />
+				</MkFolder>
+				<MkFolder class="_gap">
+					<template #header
+						><i
+							class="ph-activity ph-bold ph-lg ph-fw"
+							style="margin-right: 0.5em"
+						></i
+						>{{ i18n.ts.recentlyUpdatedUsers }}</template
+					>
+					<XUserList :pagination="recentlyUpdatedUsersF" />
+				</MkFolder>
+				<MkFolder class="_gap">
+					<template #header
+						><i
+							class="ph-rocke-launch ph-bold ph-lg ph-fw"
+							style="margin-right: 0.5em"
+						></i
+						>{{ i18n.ts.recentlyDiscoveredUsers }}</template
+					>
+					<XUserList :pagination="recentlyRegisteredUsersF" />
+				</MkFolder>
+			</template>
+		</div>
+	</MkSpacer>
 </template>
 
 <script lang="ts" setup>
-import { computed, watch } from 'vue';
-import XUserList from '@/components/MkUserList.vue';
-import MkFolder from '@/components/MkFolder.vue';
-import MkTab from '@/components/MkTab.vue';
-import number from '@/filters/number';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { $i } from '@/account';
-import { instance } from '@/instance';
+import { computed, watch } from "vue";
+import XUserList from "@/components/MkUserList.vue";
+import MkFolder from "@/components/MkFolder.vue";
+import MkTab from "@/components/MkTab.vue";
+import number from "@/filters/number";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
+import { $i } from "@/account";
+import { instance } from "@/instance";
 
 const props = defineProps<{
-		tag?: string;
-	}>();
+	tag?: string;
+}>();
 
-let origin = $ref('local');
+let origin = $ref("local");
 let tagsEl = $ref<InstanceType<typeof MkFolder>>();
 let tagsLocal = $ref([]);
 let tagsRemote = $ref([]);
 
-watch(() => props.tag, () => {
-	if (tagsEl) tagsEl.toggleContent(props.tag == null);
-});
+watch(
+	() => props.tag,
+	() => {
+		if (tagsEl) tagsEl.toggleContent(props.tag == null);
+	}
+);
 
 const tagUsers = $computed(() => ({
-	endpoint: 'hashtags/users' as const,
+	endpoint: "hashtags/users" as const,
 	limit: 30,
 	params: {
 		tag: props.tag,
-		origin: 'combined',
-		sort: '+follower',
+		origin: "combined",
+		sort: "+follower",
 	},
 }));
 
-const pinnedUsers = { endpoint: 'pinned-users' };
-const popularUsers = { endpoint: 'users', limit: 10, noPaging: true, params: {
-	state: 'alive',
-	origin: 'local',
-	sort: '+follower',
-} };
-const recentlyUpdatedUsers = { endpoint: 'users', limit: 10, noPaging: true, params: {
-	origin: 'local',
-	sort: '+updatedAt',
-} };
-const recentlyRegisteredUsers = { endpoint: 'users', limit: 10, noPaging: true, params: {
-	origin: 'local',
-	state: 'alive',
-	sort: '+createdAt',
-} };
-const popularUsersF = { endpoint: 'users', limit: 10, noPaging: true, params: {
-	state: 'alive',
-	origin: 'remote',
-	sort: '+follower',
-} };
-const recentlyUpdatedUsersF = { endpoint: 'users', limit: 10, noPaging: true, params: {
-	origin: 'combined',
-	sort: '+updatedAt',
-} };
-const recentlyRegisteredUsersF = { endpoint: 'users', limit: 10, noPaging: true, params: {
-	origin: 'combined',
-	sort: '+createdAt',
-} };
+const pinnedUsers = { endpoint: "pinned-users" };
+const popularUsers = {
+	endpoint: "users",
+	limit: 10,
+	noPaging: true,
+	params: {
+		state: "alive",
+		origin: "local",
+		sort: "+follower",
+	},
+};
+const recentlyUpdatedUsers = {
+	endpoint: "users",
+	limit: 10,
+	noPaging: true,
+	params: {
+		origin: "local",
+		sort: "+updatedAt",
+	},
+};
+const recentlyRegisteredUsers = {
+	endpoint: "users",
+	limit: 10,
+	noPaging: true,
+	params: {
+		origin: "local",
+		state: "alive",
+		sort: "+createdAt",
+	},
+};
+const popularUsersF = {
+	endpoint: "users",
+	limit: 10,
+	noPaging: true,
+	params: {
+		state: "alive",
+		origin: "remote",
+		sort: "+follower",
+	},
+};
+const recentlyUpdatedUsersF = {
+	endpoint: "users",
+	limit: 10,
+	noPaging: true,
+	params: {
+		origin: "combined",
+		sort: "+updatedAt",
+	},
+};
+const recentlyRegisteredUsersF = {
+	endpoint: "users",
+	limit: 10,
+	noPaging: true,
+	params: {
+		origin: "combined",
+		sort: "+createdAt",
+	},
+};
 
-os.api('hashtags/list', {
-	sort: '+attachedLocalUsers',
+os.api("hashtags/list", {
+	sort: "+attachedLocalUsers",
 	attachedToLocalUserOnly: true,
 	limit: 30,
-}).then(tags => {
+}).then((tags) => {
 	tagsLocal = tags;
 });
-os.api('hashtags/list', {
-	sort: '+attachedRemoteUsers',
+os.api("hashtags/list", {
+	sort: "+attachedRemoteUsers",
 	attachedToRemoteUserOnly: true,
 	limit: 30,
-}).then(tags => {
+}).then((tags) => {
 	tagsRemote = tags;
 });
 </script>
diff --git a/packages/client/src/pages/explore.vue b/packages/client/src/pages/explore.vue
index cbc53f0667..0915d6ac85 100644
--- a/packages/client/src/pages/explore.vue
+++ b/packages/client/src/pages/explore.vue
@@ -1,72 +1,90 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
-	<div class="lznhrdub">
-		<MkSpacer :content-max="1200">
-			<swiper
-				:modules="[Virtual]"
-				:space-between="20"
-				:virtual="true"
-				:allow-touch-move="!(deviceKind === 'desktop' && !defaultStore.state.swipeOnDesktop)"
-				@swiper="setSwiperRef"
-				@slide-change="onSlideChange"
-			>
-				<swiper-slide>
-					<XFeatured/>
-				</swiper-slide>
-				<swiper-slide>
-					<XUsers/>
-				</swiper-slide>
-			</swiper>
-		</MkSpacer>
-	</div>
-</MkStickyContainer>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader
+				v-model:tab="tab"
+				:actions="headerActions"
+				:tabs="headerTabs"
+		/></template>
+		<div class="lznhrdub">
+			<MkSpacer :content-max="1200">
+				<swiper
+					:modules="[Virtual]"
+					:space-between="20"
+					:virtual="true"
+					:allow-touch-move="
+						!(
+							deviceKind === 'desktop' &&
+							!defaultStore.state.swipeOnDesktop
+						)
+					"
+					@swiper="setSwiperRef"
+					@slide-change="onSlideChange"
+				>
+					<swiper-slide>
+						<XFeatured />
+					</swiper-slide>
+					<swiper-slide>
+						<XUsers />
+					</swiper-slide>
+				</swiper>
+			</MkSpacer>
+		</div>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { computed, watch, onMounted } from 'vue';
-import { Virtual } from 'swiper';
-import { Swiper, SwiperSlide } from 'swiper/vue';
-import XFeatured from './explore.featured.vue';
-import XUsers from './explore.users.vue';
-import type MkFolder from '@/components/MkFolder.vue';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import { deviceKind } from '@/scripts/device-kind';
-import { i18n } from '@/i18n';
-import { defaultStore } from '@/store';
-import 'swiper/scss';
-import 'swiper/scss/virtual';
+import { computed, watch, onMounted } from "vue";
+import { Virtual } from "swiper";
+import { Swiper, SwiperSlide } from "swiper/vue";
+import XFeatured from "./explore.featured.vue";
+import XUsers from "./explore.users.vue";
+import type MkFolder from "@/components/MkFolder.vue";
+import { definePageMetadata } from "@/scripts/page-metadata";
+import { deviceKind } from "@/scripts/device-kind";
+import { i18n } from "@/i18n";
+import { defaultStore } from "@/store";
+import "swiper/scss";
+import "swiper/scss/virtual";
 
 const props = defineProps<{
 	tag?: string;
 }>();
 
-const tabs = ['featured', 'users'];
+const tabs = ["featured", "users"];
 let tab = $ref(tabs[0]);
-watch($$(tab), () => (syncSlide(tabs.indexOf(tab))));
+watch($$(tab), () => syncSlide(tabs.indexOf(tab)));
 
 let tagsEl = $ref<InstanceType<typeof MkFolder>>();
 
-watch(() => props.tag, () => {
-	if (tagsEl) tagsEl.toggleContent(props.tag == null);
-});
+watch(
+	() => props.tag,
+	() => {
+		if (tagsEl) tagsEl.toggleContent(props.tag == null);
+	}
+);
 
 const headerActions = $computed(() => []);
 
-const headerTabs = $computed(() => [{
-	key: 'featured',
-	icon: 'ph-lightning ph-bold ph-lg',
-	title: i18n.ts.featured,
-}, {
-	key: 'users',
-	icon: 'ph-users ph-bold ph-lg',
-	title: i18n.ts.users,
-}]);
+const headerTabs = $computed(() => [
+	{
+		key: "featured",
+		icon: "ph-lightning ph-bold ph-lg",
+		title: i18n.ts.featured,
+	},
+	{
+		key: "users",
+		icon: "ph-users ph-bold ph-lg",
+		title: i18n.ts.users,
+	},
+]);
 
-definePageMetadata(computed(() => ({
-	title: i18n.ts.explore,
-	icon: 'ph-compass ph-bold ph-lg',
-})));
+definePageMetadata(
+	computed(() => ({
+		title: i18n.ts.explore,
+		icon: "ph-compass ph-bold ph-lg",
+	}))
+);
 
 let swiperRef = null;
 
@@ -86,5 +104,4 @@ function syncSlide(index) {
 onMounted(() => {
 	syncSlide(tabs.indexOf(swiperRef.activeIndex));
 });
-
 </script>
diff --git a/packages/client/src/pages/favorites.vue b/packages/client/src/pages/favorites.vue
index 1fca212c20..84b5979ba7 100644
--- a/packages/client/src/pages/favorites.vue
+++ b/packages/client/src/pages/favorites.vue
@@ -22,7 +22,11 @@
 						:no-gap="false"
 						:ad="false"
 					>
-						<XNote :key="item.id" :note="item.note" :class="$style.note" />
+						<XNote
+							:key="item.id"
+							:note="item.note"
+							:class="$style.note"
+						/>
 					</XList>
 				</template>
 			</MkPagination>
diff --git a/packages/client/src/pages/follow-requests.vue b/packages/client/src/pages/follow-requests.vue
index 289a43bd47..2aac521635 100644
--- a/packages/client/src/pages/follow-requests.vue
+++ b/packages/client/src/pages/follow-requests.vue
@@ -1,62 +1,102 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader/></template>
-	<MkSpacer :content-max="800">
-		<MkPagination ref="paginationComponent" :pagination="pagination">
-			<template #empty>
-				<div class="_fullinfo">
-					<img src="/static-assets/badges/info.png" class="_ghost"/>
-					<div>{{ i18n.ts.noFollowRequests }}</div>
-				</div>
-			</template>
-			<template #default="{items}">
-				<div class="mk-follow-requests">
-					<div v-for="req in items" :key="req.id" class="user _panel">
-						<MkAvatar class="avatar" :user="req.follower" :show-indicator="true"/>
-						<div class="body">
-							<div class="name">
-								<MkA v-user-preview="req.follower.id" class="name" :to="userPage(req.follower)"><MkUserName :user="req.follower"/></MkA>
-								<p class="acct">@{{ acct(req.follower) }}</p>
-							</div>
-							<div v-if="req.follower.description" class="description" :title="req.follower.description">
-								<Mfm :text="req.follower.description" :is-note="false" :author="req.follower" :i="$i" :custom-emojis="req.follower.emojis" :plain="true" :nowrap="true"/>
-							</div>
-							<div class="actions">
-								<button class="_button" @click="accept(req.follower)"><i class="ph-check ph-bold ph-lg"></i></button>
-								<button class="_button" @click="reject(req.follower)"><i class="ph-x ph-bold ph-lg"></i></button>
+	<MkStickyContainer>
+		<template #header><MkPageHeader /></template>
+		<MkSpacer :content-max="800">
+			<MkPagination ref="paginationComponent" :pagination="pagination">
+				<template #empty>
+					<div class="_fullinfo">
+						<img
+							src="/static-assets/badges/info.png"
+							class="_ghost"
+						/>
+						<div>{{ i18n.ts.noFollowRequests }}</div>
+					</div>
+				</template>
+				<template #default="{ items }">
+					<div class="mk-follow-requests">
+						<div
+							v-for="req in items"
+							:key="req.id"
+							class="user _panel"
+						>
+							<MkAvatar
+								class="avatar"
+								:user="req.follower"
+								:show-indicator="true"
+							/>
+							<div class="body">
+								<div class="name">
+									<MkA
+										v-user-preview="req.follower.id"
+										class="name"
+										:to="userPage(req.follower)"
+										><MkUserName :user="req.follower"
+									/></MkA>
+									<p class="acct">
+										@{{ acct(req.follower) }}
+									</p>
+								</div>
+								<div
+									v-if="req.follower.description"
+									class="description"
+									:title="req.follower.description"
+								>
+									<Mfm
+										:text="req.follower.description"
+										:is-note="false"
+										:author="req.follower"
+										:i="$i"
+										:custom-emojis="req.follower.emojis"
+										:plain="true"
+										:nowrap="true"
+									/>
+								</div>
+								<div class="actions">
+									<button
+										class="_button"
+										@click="accept(req.follower)"
+									>
+										<i class="ph-check ph-bold ph-lg"></i>
+									</button>
+									<button
+										class="_button"
+										@click="reject(req.follower)"
+									>
+										<i class="ph-x ph-bold ph-lg"></i>
+									</button>
+								</div>
 							</div>
 						</div>
 					</div>
-				</div>
-			</template>
-		</MkPagination>
-	</MkSpacer>
-</MkStickyContainer>
+				</template>
+			</MkPagination>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { ref, computed } from 'vue';
-import MkPagination from '@/components/MkPagination.vue';
-import { userPage, acct } from '@/filters/user';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import { ref, computed } from "vue";
+import MkPagination from "@/components/MkPagination.vue";
+import { userPage, acct } from "@/filters/user";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
 const paginationComponent = ref<InstanceType<typeof MkPagination>>();
 
 const pagination = {
-	endpoint: 'following/requests/list' as const,
+	endpoint: "following/requests/list" as const,
 	limit: 10,
 };
 
 function accept(user) {
-	os.api('following/requests/accept', { userId: user.id }).then(() => {
+	os.api("following/requests/accept", { userId: user.id }).then(() => {
 		paginationComponent.value.reload();
 	});
 }
 
 function reject(user) {
-	os.api('following/requests/reject', { userId: user.id }).then(() => {
+	os.api("following/requests/reject", { userId: user.id }).then(() => {
 		paginationComponent.value.reload();
 	});
 }
@@ -65,10 +105,12 @@ const headerActions = $computed(() => []);
 
 const headerTabs = $computed(() => []);
 
-definePageMetadata(computed(() => ({
-	title: i18n.ts.followRequests,
-	icon: 'ph-hand-waving ph-bold ph-lg',
-})));
+definePageMetadata(
+	computed(() => ({
+		title: i18n.ts.followRequests,
+		icon: "ph-hand-waving ph-bold ph-lg",
+	}))
+);
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/pages/follow.vue b/packages/client/src/pages/follow.vue
index 57ef576601..6af698fa97 100644
--- a/packages/client/src/pages/follow.vue
+++ b/packages/client/src/pages/follow.vue
@@ -1,19 +1,18 @@
 <template>
-<div class="mk-follow-page">
-</div>
+	<div class="mk-follow-page"></div>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import * as Acct from 'calckey-js/built/acct';
-import * as os from '@/os';
-import { mainRouter } from '@/router';
-import { i18n } from '@/i18n';
+import {} from "vue";
+import * as Acct from "calckey-js/built/acct";
+import * as os from "@/os";
+import { mainRouter } from "@/router";
+import { i18n } from "@/i18n";
 
 async function follow(user): Promise<void> {
 	const { canceled } = await os.confirm({
-		type: 'question',
-		text: i18n.t('followConfirm', { name: user.name || user.username }),
+		type: "question",
+		text: i18n.t("followConfirm", { name: user.name || user.username }),
 	});
 
 	if (canceled) {
@@ -21,39 +20,39 @@ async function follow(user): Promise<void> {
 		return;
 	}
 
-	os.apiWithDialog('following/create', {
+	os.apiWithDialog("following/create", {
 		userId: user.id,
 	});
 }
 
-const acct = new URL(location.href).searchParams.get('acct');
+const acct = new URL(location.href).searchParams.get("acct");
 if (acct == null) {
-	throw new Error('acct required');
+	throw new Error("acct required");
 }
 
 let promise;
 
-if (acct.startsWith('https://')) {
-	promise = os.api('ap/show', {
+if (acct.startsWith("https://")) {
+	promise = os.api("ap/show", {
 		uri: acct,
 	});
-	promise.then(res => {
-		if (res.type === 'User') {
+	promise.then((res) => {
+		if (res.type === "User") {
 			follow(res.object);
-		} else if (res.type === 'Note') {
+		} else if (res.type === "Note") {
 			mainRouter.push(`/notes/${res.object.id}`);
 		} else {
 			os.alert({
-				type: 'error',
-				text: 'Not a user',
+				type: "error",
+				text: "Not a user",
 			}).then(() => {
 				window.close();
 			});
 		}
 	});
 } else {
-	promise = os.api('users/show', Acct.parse(acct));
-	promise.then(user => {
+	promise = os.api("users/show", Acct.parse(acct));
+	promise.then((user) => {
 		follow(user);
 	});
 }
diff --git a/packages/client/src/pages/gallery/edit.vue b/packages/client/src/pages/gallery/edit.vue
index c2b93d6a04..f03201cac6 100644
--- a/packages/client/src/pages/gallery/edit.vue
+++ b/packages/client/src/pages/gallery/edit.vue
@@ -1,47 +1,78 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
-	<MkSpacer :content-max="800" :margin-min="16" :margin-max="32">
-		<FormSuspense :p="init">
-			<FormInput v-model="title">
-				<template #label>{{ i18n.ts.title }}</template>
-			</FormInput>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader :actions="headerActions" :tabs="headerTabs"
+		/></template>
+		<MkSpacer :content-max="800" :margin-min="16" :margin-max="32">
+			<FormSuspense :p="init">
+				<FormInput v-model="title">
+					<template #label>{{ i18n.ts.title }}</template>
+				</FormInput>
 
-			<FormTextarea v-model="description" :max="500">
-				<template #label>{{ i18n.ts.description }}</template>
-			</FormTextarea>
+				<FormTextarea v-model="description" :max="500">
+					<template #label>{{ i18n.ts.description }}</template>
+				</FormTextarea>
 
-			<div class="">
-				<div v-for="file in files" :key="file.id" class="wqugxsfx" :style="{ backgroundImage: file ? `url(${ file.thumbnailUrl })` : null }">
-					<div class="name">{{ file.name }}</div>
-					<button v-tooltip="i18n.ts.remove" class="remove _button" @click="remove(file)"><i class="ph-x ph-bold ph-lg"></i></button>
+				<div class="">
+					<div
+						v-for="file in files"
+						:key="file.id"
+						class="wqugxsfx"
+						:style="{
+							backgroundImage: file
+								? `url(${file.thumbnailUrl})`
+								: null,
+						}"
+					>
+						<div class="name">{{ file.name }}</div>
+						<button
+							v-tooltip="i18n.ts.remove"
+							class="remove _button"
+							@click="remove(file)"
+						>
+							<i class="ph-x ph-bold ph-lg"></i>
+						</button>
+					</div>
+					<FormButton primary @click="selectFile"
+						><i class="ph-plus ph-bold ph-lg"></i>
+						{{ i18n.ts.attachFile }}</FormButton
+					>
 				</div>
-				<FormButton primary @click="selectFile"><i class="ph-plus ph-bold ph-lg"></i> {{ i18n.ts.attachFile }}</FormButton>
-			</div>
 
-			<FormSwitch v-model="isSensitive">{{ i18n.ts.markAsSensitive }}</FormSwitch>
+				<FormSwitch v-model="isSensitive">{{
+					i18n.ts.markAsSensitive
+				}}</FormSwitch>
 
-			<FormButton v-if="postId" primary @click="save"><i class="ph-floppy-disk-back ph-bold ph-lg"></i> {{ i18n.ts.save }}</FormButton>
-			<FormButton v-else primary @click="save"><i class="ph-floppy-disk-back ph-bold ph-lg"></i> {{ i18n.ts.publish }}</FormButton>
+				<FormButton v-if="postId" primary @click="save"
+					><i class="ph-floppy-disk-back ph-bold ph-lg"></i>
+					{{ i18n.ts.save }}</FormButton
+				>
+				<FormButton v-else primary @click="save"
+					><i class="ph-floppy-disk-back ph-bold ph-lg"></i>
+					{{ i18n.ts.publish }}</FormButton
+				>
 
-			<FormButton v-if="postId" danger @click="del"><i class="ph-trash ph-bold ph-lg"></i> {{ i18n.ts.delete }}</FormButton>
-		</FormSuspense>
-	</MkSpacer>
-</MkStickyContainer>
+				<FormButton v-if="postId" danger @click="del"
+					><i class="ph-trash ph-bold ph-lg"></i>
+					{{ i18n.ts.delete }}</FormButton
+				>
+			</FormSuspense>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, watch } from 'vue';
-import FormButton from '@/components/MkButton.vue';
-import FormInput from '@/components/form/input.vue';
-import FormTextarea from '@/components/form/textarea.vue';
-import FormSwitch from '@/components/form/switch.vue';
-import FormSuspense from '@/components/form/suspense.vue';
-import { selectFiles } from '@/scripts/select-file';
-import * as os from '@/os';
-import { useRouter } from '@/router';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import { i18n } from '@/i18n';
+import { computed, inject, watch } from "vue";
+import FormButton from "@/components/MkButton.vue";
+import FormInput from "@/components/form/input.vue";
+import FormTextarea from "@/components/form/textarea.vue";
+import FormSwitch from "@/components/form/switch.vue";
+import FormSuspense from "@/components/form/suspense.vue";
+import { selectFiles } from "@/scripts/select-file";
+import * as os from "@/os";
+import { useRouter } from "@/router";
+import { definePageMetadata } from "@/scripts/page-metadata";
+import { i18n } from "@/i18n";
 
 const router = useRouter();
 
@@ -56,30 +87,30 @@ let title = $ref(null);
 let isSensitive = $ref(false);
 
 function selectFile(evt) {
-	selectFiles(evt.currentTarget ?? evt.target, null).then(selected => {
+	selectFiles(evt.currentTarget ?? evt.target, null).then((selected) => {
 		files = files.concat(selected);
 	});
 }
 
 function remove(file) {
-	files = files.filter(f => f.id !== file.id);
+	files = files.filter((f) => f.id !== file.id);
 }
 
 async function save() {
 	if (props.postId) {
-		await os.apiWithDialog('gallery/posts/update', {
+		await os.apiWithDialog("gallery/posts/update", {
 			postId: props.postId,
 			title: title,
 			description: description,
-			fileIds: files.map(file => file.id),
+			fileIds: files.map((file) => file.id),
 			isSensitive: isSensitive,
 		});
 		router.push(`/gallery/${props.postId}`);
 	} else {
-		const created = await os.apiWithDialog('gallery/posts/create', {
+		const created = await os.apiWithDialog("gallery/posts/create", {
 			title: title,
 			description: description,
-			fileIds: files.map(file => file.id),
+			fileIds: files.map((file) => file.id),
 			isSensitive: isSensitive,
 		});
 		router.push(`/gallery/${created.id}`);
@@ -88,38 +119,53 @@ async function save() {
 
 async function del() {
 	const { canceled } = await os.confirm({
-		type: 'warning',
+		type: "warning",
 		text: i18n.ts.deleteConfirm,
 	});
 	if (canceled) return;
-	await os.apiWithDialog('gallery/posts/delete', {
+	await os.apiWithDialog("gallery/posts/delete", {
 		postId: props.postId,
 	});
-	router.push('/gallery');
+	router.push("/gallery");
 }
 
-watch(() => props.postId, () => {
-	init = () => props.postId ? os.api('gallery/posts/show', {
-		postId: props.postId,
-	}).then(post => {
-		files = post.files;
-		title = post.title;
-		description = post.description;
-		isSensitive = post.isSensitive;
-	}) : Promise.resolve(null);
-}, { immediate: true });
+watch(
+	() => props.postId,
+	() => {
+		init = () =>
+			props.postId
+				? os
+						.api("gallery/posts/show", {
+							postId: props.postId,
+						})
+						.then((post) => {
+							files = post.files;
+							title = post.title;
+							description = post.description;
+							isSensitive = post.isSensitive;
+						})
+				: Promise.resolve(null);
+	},
+	{ immediate: true }
+);
 
 const headerActions = $computed(() => []);
 
 const headerTabs = $computed(() => []);
 
-definePageMetadata(computed(() => props.postId ? {
-	title: i18n.ts.edit,
-	icon: 'ph-pencil ph-bold ph-lg',
-} : {
-	title: i18n.ts.postToGallery,
-	icon: 'ph-pencil ph-bold ph-lg',
-}));
+definePageMetadata(
+	computed(() =>
+		props.postId
+			? {
+					title: i18n.ts.edit,
+					icon: "ph-pencil ph-bold ph-lg",
+			  }
+			: {
+					title: i18n.ts.postToGallery,
+					icon: "ph-pencil ph-bold ph-lg",
+			  }
+	)
+);
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/pages/gallery/index.vue b/packages/client/src/pages/gallery/index.vue
index 2845ce957e..d4794ffbc0 100644
--- a/packages/client/src/pages/gallery/index.vue
+++ b/packages/client/src/pages/gallery/index.vue
@@ -1,67 +1,121 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs" :display-back-button="true"/></template>
-	<MkSpacer :content-max="1200">
-		<swiper
-			:modules="[Virtual]"
-			:space-between="20"
-			:virtual="true"
-			:allow-touch-move="!(deviceKind === 'desktop' && !defaultStore.state.swipeOnDesktop)"
-			@swiper="setSwiperRef"
-			@slide-change="onSlideChange"
-		>
-			<swiper-slide>
-				<MkFolder class="_gap">
-					<template #header><i class="ph-clock ph-bold ph-lg"></i> {{ i18n.ts.recentPosts }}</template>
-					<MkPagination v-slot="{items}" :pagination="recentPostsPagination" :disable-auto-load="true">
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader
+				v-model:tab="tab"
+				:actions="headerActions"
+				:tabs="headerTabs"
+				:display-back-button="true"
+		/></template>
+		<MkSpacer :content-max="1200">
+			<swiper
+				:modules="[Virtual]"
+				:space-between="20"
+				:virtual="true"
+				:allow-touch-move="
+					!(
+						deviceKind === 'desktop' &&
+						!defaultStore.state.swipeOnDesktop
+					)
+				"
+				@swiper="setSwiperRef"
+				@slide-change="onSlideChange"
+			>
+				<swiper-slide>
+					<MkFolder class="_gap">
+						<template #header
+							><i class="ph-clock ph-bold ph-lg"></i>
+							{{ i18n.ts.recentPosts }}</template
+						>
+						<MkPagination
+							v-slot="{ items }"
+							:pagination="recentPostsPagination"
+							:disable-auto-load="true"
+						>
+							<div class="vfpdbgtk">
+								<MkGalleryPostPreview
+									v-for="post in items"
+									:key="post.id"
+									:post="post"
+									class="post"
+								/>
+							</div>
+						</MkPagination>
+					</MkFolder>
+					<MkFolder class="_gap">
+						<template #header
+							><i class="ph-fire-simple ph-bold ph-lg"></i>
+							{{ i18n.ts.popularPosts }}</template
+						>
+						<MkPagination
+							v-slot="{ items }"
+							:pagination="popularPostsPagination"
+							:disable-auto-load="true"
+						>
+							<div class="vfpdbgtk">
+								<MkGalleryPostPreview
+									v-for="post in items"
+									:key="post.id"
+									:post="post"
+									class="post"
+								/>
+							</div>
+						</MkPagination>
+					</MkFolder>
+				</swiper-slide>
+				<swiper-slide>
+					<MkPagination
+						v-slot="{ items }"
+						:pagination="likedPostsPagination"
+					>
 						<div class="vfpdbgtk">
-							<MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/>
+							<MkGalleryPostPreview
+								v-for="like in items"
+								:key="like.id"
+								:post="like.post"
+								class="post"
+							/>
 						</div>
 					</MkPagination>
-				</MkFolder>
-				<MkFolder class="_gap">
-					<template #header><i class="ph-fire-simple ph-bold ph-lg"></i> {{ i18n.ts.popularPosts }}</template>
-					<MkPagination v-slot="{items}" :pagination="popularPostsPagination" :disable-auto-load="true">
+				</swiper-slide>
+				<swiper-slide>
+					<MkA to="/gallery/new" class="_link" style="margin: 16px"
+						><i class="ph-plus ph-bold ph-lg"></i>
+						{{ i18n.ts.postToGallery }}</MkA
+					>
+					<MkPagination
+						v-slot="{ items }"
+						:pagination="myPostsPagination"
+					>
 						<div class="vfpdbgtk">
-							<MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/>
+							<MkGalleryPostPreview
+								v-for="post in items"
+								:key="post.id"
+								:post="post"
+								class="post"
+							/>
 						</div>
 					</MkPagination>
-				</MkFolder>
-			</swiper-slide>
-			<swiper-slide>
-				<MkPagination v-slot="{items}" :pagination="likedPostsPagination">
-					<div class="vfpdbgtk">
-						<MkGalleryPostPreview v-for="like in items" :key="like.id" :post="like.post" class="post"/>
-					</div>
-				</MkPagination>
-			</swiper-slide>
-			<swiper-slide>
-				<MkA to="/gallery/new" class="_link" style="margin: 16px;"><i class="ph-plus ph-bold ph-lg"></i> {{ i18n.ts.postToGallery }}</MkA>
-				<MkPagination v-slot="{items}" :pagination="myPostsPagination">
-					<div class="vfpdbgtk">
-						<MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/>
-					</div>
-				</MkPagination>
-			</swiper-slide>
-		</swiper>
-	</MkSpacer>
-</MkStickyContainer>
+				</swiper-slide>
+			</swiper>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { computed, defineComponent, watch, onMounted } from 'vue';
-import { Virtual } from 'swiper';
-import { Swiper, SwiperSlide } from 'swiper/vue';
-import MkFolder from '@/components/MkFolder.vue';
-import MkPagination from '@/components/MkPagination.vue';
-import MkGalleryPostPreview from '@/components/MkGalleryPostPreview.vue';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import { deviceKind } from '@/scripts/device-kind';
-import { i18n } from '@/i18n';
-import { useRouter } from '@/router';
-import { defaultStore } from '@/store';
-import 'swiper/scss';
-import 'swiper/scss/virtual';
+import { computed, defineComponent, watch, onMounted } from "vue";
+import { Virtual } from "swiper";
+import { Swiper, SwiperSlide } from "swiper/vue";
+import MkFolder from "@/components/MkFolder.vue";
+import MkPagination from "@/components/MkPagination.vue";
+import MkGalleryPostPreview from "@/components/MkGalleryPostPreview.vue";
+import { definePageMetadata } from "@/scripts/page-metadata";
+import { deviceKind } from "@/scripts/device-kind";
+import { i18n } from "@/i18n";
+import { useRouter } from "@/router";
+import { defaultStore } from "@/store";
+import "swiper/scss";
+import "swiper/scss/virtual";
 
 const router = useRouter();
 
@@ -69,58 +123,67 @@ const props = defineProps<{
 	tag?: string;
 }>();
 
-const tabs = ['explore', 'liked', 'my'];
+const tabs = ["explore", "liked", "my"];
 let tab = $ref(tabs[0]);
-watch($$(tab), () => (syncSlide(tabs.indexOf(tab))));
+watch($$(tab), () => syncSlide(tabs.indexOf(tab)));
 
 let tagsRef = $ref();
 
 const recentPostsPagination = {
-	endpoint: 'gallery/posts' as const,
+	endpoint: "gallery/posts" as const,
 	limit: 6,
 };
 const popularPostsPagination = {
-	endpoint: 'gallery/featured' as const,
+	endpoint: "gallery/featured" as const,
 	limit: 5,
 };
 const myPostsPagination = {
-	endpoint: 'i/gallery/posts' as const,
+	endpoint: "i/gallery/posts" as const,
 	limit: 5,
 };
 const likedPostsPagination = {
-	endpoint: 'i/gallery/likes' as const,
+	endpoint: "i/gallery/likes" as const,
 	limit: 5,
 };
 
-watch(() => props.tag, () => {
-	if (tagsRef) tagsRef.tags.toggleContent(props.tag == null);
-});
+watch(
+	() => props.tag,
+	() => {
+		if (tagsRef) tagsRef.tags.toggleContent(props.tag == null);
+	}
+);
 
-const headerActions = $computed(() => [{
-	icon: 'ph-plus ph-bold ph-lg',
-	text: i18n.ts.create,
-	handler: () => {
-		router.push('/gallery/new');
+const headerActions = $computed(() => [
+	{
+		icon: "ph-plus ph-bold ph-lg",
+		text: i18n.ts.create,
+		handler: () => {
+			router.push("/gallery/new");
+		},
 	},
-}]);
+]);
 
-const headerTabs = $computed(() => [{
-	key: 'explore',
-	title: i18n.ts.gallery,
-	icon: 'ph-image-square ph-bold ph-lg',
-}, {
-	key: 'liked',
-	title: i18n.ts._gallery.liked,
-	icon: 'ph-heart ph-bold ph-lg',
-}, {
-	key: 'my',
-	title: i18n.ts._gallery.my,
-	icon: 'ph-crown-simple ph-bold ph-lg',
-}]);
+const headerTabs = $computed(() => [
+	{
+		key: "explore",
+		title: i18n.ts.gallery,
+		icon: "ph-image-square ph-bold ph-lg",
+	},
+	{
+		key: "liked",
+		title: i18n.ts._gallery.liked,
+		icon: "ph-heart ph-bold ph-lg",
+	},
+	{
+		key: "my",
+		title: i18n.ts._gallery.my,
+		icon: "ph-crown-simple ph-bold ph-lg",
+	},
+]);
 
 definePageMetadata({
 	title: i18n.ts.gallery,
-	icon: 'ph-image-square ph-bold ph-lg',
+	icon: "ph-image-square ph-bold ph-lg",
 });
 
 let swiperRef = null;
@@ -151,7 +214,6 @@ onMounted(() => {
 	margin: 0 var(--margin);
 
 	> .post {
-
 	}
 }
 </style>
diff --git a/packages/client/src/pages/gallery/post.vue b/packages/client/src/pages/gallery/post.vue
index dd2a445abe..0c104b4c7a 100644
--- a/packages/client/src/pages/gallery/post.vue
+++ b/packages/client/src/pages/gallery/post.vue
@@ -1,73 +1,163 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
-	<MkSpacer :content-max="1000" :margin-min="16" :margin-max="32">
-		<div class="_root">
-			<transition :name="$store.state.animation ? 'fade' : ''" mode="out-in">
-				<div v-if="post" class="rkxwuolj">
-					<div class="files">
-						<div v-for="file in post.files" :key="file.id" class="file">
-							<img :src="file.url"/>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader :actions="headerActions" :tabs="headerTabs"
+		/></template>
+		<MkSpacer :content-max="1000" :margin-min="16" :margin-max="32">
+			<div class="_root">
+				<transition
+					:name="$store.state.animation ? 'fade' : ''"
+					mode="out-in"
+				>
+					<div v-if="post" class="rkxwuolj">
+						<div class="files">
+							<div
+								v-for="file in post.files"
+								:key="file.id"
+								class="file"
+							>
+								<img :src="file.url" />
+							</div>
 						</div>
+						<div class="body _block">
+							<div class="title">{{ post.title }}</div>
+							<div class="description">
+								<Mfm :text="post.description" />
+							</div>
+							<div class="info">
+								<i class="ph-clock ph-bold ph-lg"></i>
+								<MkTime :time="post.createdAt" mode="detail" />
+							</div>
+							<div class="actions">
+								<div class="like">
+									<MkButton
+										v-if="post.isLiked"
+										v-tooltip="i18n.ts._gallery.unlike"
+										class="button"
+										primary
+										@click="unlike()"
+										><i class="ph-heart ph-fill ph-lg"></i
+										><span
+											v-if="post.likedCount > 0"
+											class="count"
+											>{{ post.likedCount }}</span
+										></MkButton
+									>
+									<MkButton
+										v-else
+										v-tooltip="i18n.ts._gallery.like"
+										class="button"
+										@click="like()"
+										><i class="ph-heart ph-bold"></i
+										><span
+											v-if="post.likedCount > 0"
+											class="count"
+											>{{ post.likedCount }}</span
+										></MkButton
+									>
+								</div>
+								<div class="other">
+									<button
+										v-if="$i && $i.id === post.user.id"
+										v-tooltip="i18n.ts.edit"
+										v-click-anime
+										class="_button"
+										@click="edit"
+									>
+										<i
+											class="ph-pencil ph-bold ph-lg ph-fw ph-lg"
+										></i>
+									</button>
+									<button
+										v-tooltip="i18n.ts.shareWithNote"
+										v-click-anime
+										class="_button"
+										@click="shareWithNote"
+									>
+										<i
+											class="ph-repeat ph-bold ph-lg ph-fw ph-lg"
+										></i>
+									</button>
+									<button
+										v-if="shareAvailable()"
+										v-tooltip="i18n.ts.share"
+										v-click-anime
+										class="_button"
+										@click="share"
+									>
+										<i
+											class="ph-share-network ph-bold ph-lg ph-fw ph-lg"
+										></i>
+									</button>
+								</div>
+							</div>
+							<div class="user">
+								<MkAvatar :user="post.user" class="avatar" />
+								<div class="name">
+									<MkUserName
+										:user="post.user"
+										style="display: block"
+									/>
+									<MkAcct :user="post.user" />
+								</div>
+								<MkFollowButton
+									v-if="!$i || $i.id != post.user.id"
+									:user="post.user"
+									:inline="true"
+									:transparent="false"
+									:full="true"
+									large
+									class="koudoku"
+								/>
+							</div>
+						</div>
+						<MkAd :prefer="['horizontal', 'horizontal-big']" />
+						<MkContainer
+							:max-height="300"
+							:foldable="true"
+							class="other"
+						>
+							<template #header
+								><i class="ph-clock ph-bold ph-lg"></i>
+								{{ i18n.ts.recentPosts }}</template
+							>
+							<MkPagination
+								v-slot="{ items }"
+								:pagination="otherPostsPagination"
+							>
+								<div class="sdrarzaf">
+									<MkGalleryPostPreview
+										v-for="post in items"
+										:key="post.id"
+										:post="post"
+										class="post"
+									/>
+								</div>
+							</MkPagination>
+						</MkContainer>
 					</div>
-					<div class="body _block">
-						<div class="title">{{ post.title }}</div>
-						<div class="description"><Mfm :text="post.description"/></div>
-						<div class="info">
-							<i class="ph-clock ph-bold ph-lg"></i> <MkTime :time="post.createdAt" mode="detail"/>
-						</div>
-						<div class="actions">
-							<div class="like">
-								<MkButton v-if="post.isLiked" v-tooltip="i18n.ts._gallery.unlike" class="button" primary @click="unlike()"><i class="ph-heart ph-fill ph-lg"></i><span v-if="post.likedCount > 0" class="count">{{ post.likedCount }}</span></MkButton>
-								<MkButton v-else v-tooltip="i18n.ts._gallery.like" class="button" @click="like()"><i class="ph-heart ph-bold"></i><span v-if="post.likedCount > 0" class="count">{{ post.likedCount }}</span></MkButton>
-							</div>
-							<div class="other">
-								<button v-if="$i && $i.id === post.user.id" v-tooltip="i18n.ts.edit" v-click-anime class="_button" @click="edit"><i class="ph-pencil ph-bold ph-lg ph-fw ph-lg"></i></button>
-								<button v-tooltip="i18n.ts.shareWithNote" v-click-anime class="_button" @click="shareWithNote"><i class="ph-repeat ph-bold ph-lg ph-fw ph-lg"></i></button>
-								<button v-if="shareAvailable()" v-tooltip="i18n.ts.share" v-click-anime class="_button" @click="share"><i class="ph-share-network ph-bold ph-lg ph-fw ph-lg"></i></button>
-							</div>
-						</div>
-						<div class="user">
-							<MkAvatar :user="post.user" class="avatar"/>
-							<div class="name">
-								<MkUserName :user="post.user" style="display: block;"/>
-								<MkAcct :user="post.user"/>
-							</div>
-							<MkFollowButton v-if="!$i || $i.id != post.user.id" :user="post.user" :inline="true" :transparent="false" :full="true" large class="koudoku"/>
-						</div>
-					</div>
-					<MkAd :prefer="['horizontal', 'horizontal-big']"/>
-					<MkContainer :max-height="300" :foldable="true" class="other">
-						<template #header><i class="ph-clock ph-bold ph-lg"></i> {{ i18n.ts.recentPosts }}</template>
-						<MkPagination v-slot="{items}" :pagination="otherPostsPagination">
-							<div class="sdrarzaf">
-								<MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/>
-							</div>
-						</MkPagination>
-					</MkContainer>
-				</div>
-				<MkError v-else-if="error" @retry="fetch()"/>
-				<MkLoading v-else/>
-			</transition>
-		</div>
-	</MkSpacer>
-</MkStickyContainer>
+					<MkError v-else-if="error" @retry="fetch()" />
+					<MkLoading v-else />
+				</transition>
+			</div>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { computed, defineComponent, inject, watch } from 'vue';
-import MkButton from '@/components/MkButton.vue';
-import * as os from '@/os';
-import MkContainer from '@/components/MkContainer.vue';
-import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
-import MkPagination from '@/components/MkPagination.vue';
-import MkGalleryPostPreview from '@/components/MkGalleryPostPreview.vue';
-import MkFollowButton from '@/components/MkFollowButton.vue';
-import { url } from '@/config';
-import { useRouter } from '@/router';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import { shareAvailable } from '@/scripts/share-available';
+import { computed, defineComponent, inject, watch } from "vue";
+import MkButton from "@/components/MkButton.vue";
+import * as os from "@/os";
+import MkContainer from "@/components/MkContainer.vue";
+import ImgWithBlurhash from "@/components/MkImgWithBlurhash.vue";
+import MkPagination from "@/components/MkPagination.vue";
+import MkGalleryPostPreview from "@/components/MkGalleryPostPreview.vue";
+import MkFollowButton from "@/components/MkFollowButton.vue";
+import { url } from "@/config";
+import { useRouter } from "@/router";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
+import { shareAvailable } from "@/scripts/share-available";
 
 const router = useRouter();
 
@@ -78,7 +168,7 @@ const props = defineProps<{
 let post = $ref(null);
 let error = $ref(null);
 const otherPostsPagination = {
-	endpoint: 'users/gallery/posts' as const,
+	endpoint: "users/gallery/posts" as const,
 	limit: 6,
 	params: computed(() => ({
 		userId: post.user.id,
@@ -87,13 +177,15 @@ const otherPostsPagination = {
 
 function fetchPost() {
 	post = null;
-	os.api('gallery/posts/show', {
+	os.api("gallery/posts/show", {
 		postId: props.postId,
-	}).then(_post => {
-		post = _post;
-	}).catch(_error => {
-		error = _error;
-	});
+	})
+		.then((_post) => {
+			post = _post;
+		})
+		.catch((_error) => {
+			error = _error;
+		});
 }
 
 function share() {
@@ -111,7 +203,7 @@ function shareWithNote() {
 }
 
 function like() {
-	os.apiWithDialog('gallery/posts/like', {
+	os.apiWithDialog("gallery/posts/like", {
 		postId: props.postId,
 	}).then(() => {
 		post.isLiked = true;
@@ -120,7 +212,7 @@ function like() {
 }
 
 async function unlike() {
-	os.api('gallery/posts/unlike', {
+	os.api("gallery/posts/unlike", {
 		postId: props.postId,
 	}).then(() => {
 		post.isLiked = false;
@@ -134,18 +226,26 @@ function edit() {
 
 watch(() => props.postId, fetchPost, { immediate: true });
 
-const headerActions = $computed(() => [{
-	icon: 'ph-pencil ph-bold ph-lg',
-	text: i18n.ts.edit,
-	handler: edit,
-}]);
+const headerActions = $computed(() => [
+	{
+		icon: "ph-pencil ph-bold ph-lg",
+		text: i18n.ts.edit,
+		handler: edit,
+	},
+]);
 
 const headerTabs = $computed(() => []);
 
-definePageMetadata(computed(() => post ? {
-	title: post.title,
-	avatar: post.user,
-} : null));
+definePageMetadata(
+	computed(() =>
+		post
+			? {
+					title: post.title,
+					avatar: post.user,
+			  }
+			: null
+	)
+);
 </script>
 
 <style lang="scss" scoped>
@@ -255,7 +355,6 @@ definePageMetadata(computed(() => post ? {
 	margin: var(--margin);
 
 	> .post {
-
 	}
 }
 </style>
diff --git a/packages/client/src/pages/instance-info.vue b/packages/client/src/pages/instance-info.vue
index f84e3b0147..5c81473516 100644
--- a/packages/client/src/pages/instance-info.vue
+++ b/packages/client/src/pages/instance-info.vue
@@ -1,164 +1,356 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
-	<MkSpacer v-if="instance" :content-max="600" :margin-min="16" :margin-max="32">
-		<swiper
-			:modules="[Virtual]"
-			:space-between="20"
-			:virtual="true"
-			:allow-touch-move="!(deviceKind === 'desktop' && !defaultStore.state.swipeOnDesktop)"
-			@swiper="setSwiperRef"
-			@slide-change="onSlideChange"
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader
+				v-model:tab="tab"
+				:actions="headerActions"
+				:tabs="headerTabs"
+		/></template>
+		<MkSpacer
+			v-if="instance"
+			:content-max="600"
+			:margin-min="16"
+			:margin-max="32"
 		>
-			<swiper-slide>
-				<div class="_formRoot">
-					<div class="fnfelxur">
-						<img :src="faviconUrl" alt="" class="icon"/>
-						<span class="name">{{ instance.name || `(${i18n.ts.unknown})` }}</span>
-					</div>
-					<MkKeyValue :copy="host" oneline style="margin: 1em 0;">
-						<template #key>Host</template>
-						<template #value><span class="_monospace"><MkLink :url="`https://${host}`">{{ host }}</MkLink></span></template>
-					</MkKeyValue>
-					<MkKeyValue oneline style="margin: 1em 0;">
-						<template #key>{{ i18n.ts.software }}</template>
-						<template #value><span class="_monospace">{{ instance.softwareName || `(${i18n.ts.unknown})` }} / {{ instance.softwareVersion || `(${i18n.ts.unknown})` }}</span></template>
-					</MkKeyValue>
-					<MkKeyValue oneline style="margin: 1em 0;">
-						<template #key>{{ i18n.ts.administrator }}</template>
-						<template #value>{{ instance.maintainerName || `(${i18n.ts.unknown})` }} ({{ instance.maintainerEmail || `(${i18n.ts.unknown})` }})</template>
-					</MkKeyValue>
-					<MkKeyValue>
-						<template #key>{{ i18n.ts.description }}</template>
-						<template #value>{{ instance.description }}</template>
-					</MkKeyValue>
-
-					<FormSection v-if="iAmModerator">
-						<template #label>Moderation</template>
-						<FormSuspense :p="init">
-							<FormSwitch v-model="suspended" class="_formBlock" @update:modelValue="toggleSuspend">{{ i18n.ts.stopActivityDelivery }}</FormSwitch>
-							<FormSwitch v-model="isBlocked" class="_formBlock" @update:modelValue="toggleBlock">{{ i18n.ts.blockThisInstance }}</FormSwitch>
-						</FormSuspense>
-						<MkButton @click="refreshMetadata"><i class="ph-arrows-clockwise ph-bold ph-lg"></i> Refresh metadata</MkButton>
-					</FormSection>
-
-					<FormSection>
-						<MkKeyValue oneline style="margin: 1em 0;">
-							<template #key>{{ i18n.ts.registeredAt }}</template>
-							<template #value><MkTime mode="detail" :time="instance.caughtAt"/></template>
-						</MkKeyValue>
-						<MkKeyValue oneline style="margin: 1em 0;">
-							<template #key>{{ i18n.ts.updatedAt }}</template>
-							<template #value><MkTime mode="detail" :time="instance.infoUpdatedAt"/></template>
-						</MkKeyValue>
-						<MkKeyValue oneline style="margin: 1em 0;">
-							<template #key>{{ i18n.ts.latestRequestSentAt }}</template>
-							<template #value><MkTime v-if="instance.latestRequestSentAt" :time="instance.latestRequestSentAt"/><span v-else>N/A</span></template>
-						</MkKeyValue>
-						<MkKeyValue oneline style="margin: 1em 0;">
-							<template #key>{{ i18n.ts.latestStatus }}</template>
-							<template #value>{{ instance.latestStatus ? instance.latestStatus : 'N/A' }}</template>
-						</MkKeyValue>
-						<MkKeyValue oneline style="margin: 1em 0;">
-							<template #key>{{ i18n.ts.latestRequestReceivedAt }}</template>
-							<template #value><MkTime v-if="instance.latestRequestReceivedAt" :time="instance.latestRequestReceivedAt"/><span v-else>N/A</span></template>
-						</MkKeyValue>
-					</FormSection>
-
-					<FormSection>
-						<MkKeyValue oneline style="margin: 1em 0;">
-							<template #key>Following (Pub)</template>
-							<template #value>{{ number(instance.followingCount) }}</template>
-						</MkKeyValue>
-						<MkKeyValue oneline style="margin: 1em 0;">
-							<template #key>Followers (Sub)</template>
-							<template #value>{{ number(instance.followersCount) }}</template>
-						</MkKeyValue>
-					</FormSection>
-
-					<FormSection>
-						<template #label>Well-known resources</template>
-						<FormLink :to="`https://${host}/.well-known/host-meta`" external style="margin-bottom: 8px;">host-meta</FormLink>
-						<FormLink :to="`https://${host}/.well-known/host-meta.json`" external style="margin-bottom: 8px;">host-meta.json</FormLink>
-						<FormLink :to="`https://${host}/.well-known/nodeinfo`" external style="margin-bottom: 8px;">nodeinfo</FormLink>
-						<FormLink :to="`https://${host}/robots.txt`" external style="margin-bottom: 8px;">robots.txt</FormLink>
-						<FormLink :to="`https://${host}/manifest.json`" external style="margin-bottom: 8px;">manifest.json</FormLink>
-					</FormSection>
-				</div>
-			</swiper-slide>
-			<swiper-slide>
-				<div class="_formRoot">
-					<div class="cmhjzshl">
-						<div class="selects">
-							<MkSelect v-model="chartSrc" style="margin: 0 10px 0 0; flex: 1;">
-								<option value="instance-requests">{{ i18n.ts._instanceCharts.requests }}</option>
-								<option value="instance-users">{{ i18n.ts._instanceCharts.users }}</option>
-								<option value="instance-users-total">{{ i18n.ts._instanceCharts.usersTotal }}</option>
-								<option value="instance-notes">{{ i18n.ts._instanceCharts.notes }}</option>
-								<option value="instance-notes-total">{{ i18n.ts._instanceCharts.notesTotal }}</option>
-								<option value="instance-ff">{{ i18n.ts._instanceCharts.ff }}</option>
-								<option value="instance-ff-total">{{ i18n.ts._instanceCharts.ffTotal }}</option>
-								<option value="instance-drive-usage">{{ i18n.ts._instanceCharts.cacheSize }}</option>
-								<option value="instance-drive-usage-total">{{ i18n.ts._instanceCharts.cacheSizeTotal }}</option>
-								<option value="instance-drive-files">{{ i18n.ts._instanceCharts.files }}</option>
-								<option value="instance-drive-files-total">{{ i18n.ts._instanceCharts.filesTotal }}</option>
-							</MkSelect>
+			<swiper
+				:modules="[Virtual]"
+				:space-between="20"
+				:virtual="true"
+				:allow-touch-move="
+					!(
+						deviceKind === 'desktop' &&
+						!defaultStore.state.swipeOnDesktop
+					)
+				"
+				@swiper="setSwiperRef"
+				@slide-change="onSlideChange"
+			>
+				<swiper-slide>
+					<div class="_formRoot">
+						<div class="fnfelxur">
+							<img :src="faviconUrl" alt="" class="icon" />
+							<span class="name">{{
+								instance.name || `(${i18n.ts.unknown})`
+							}}</span>
 						</div>
-						<div class="charts">
-							<div class="label">{{ i18n.t('recentNHours', { n: 90 }) }}</div>
-							<MkChart class="chart" :src="chartSrc" span="hour" :limit="90" :args="{ host: host }" :detailed="true"></MkChart>
-							<div class="label">{{ i18n.t('recentNDays', { n: 90 }) }}</div>
-							<MkChart class="chart" :src="chartSrc" span="day" :limit="90" :args="{ host: host }" :detailed="true"></MkChart>
+						<MkKeyValue :copy="host" oneline style="margin: 1em 0">
+							<template #key>Host</template>
+							<template #value
+								><span class="_monospace"
+									><MkLink :url="`https://${host}`">{{
+										host
+									}}</MkLink></span
+								></template
+							>
+						</MkKeyValue>
+						<MkKeyValue oneline style="margin: 1em 0">
+							<template #key>{{ i18n.ts.software }}</template>
+							<template #value
+								><span class="_monospace"
+									>{{
+										instance.softwareName ||
+										`(${i18n.ts.unknown})`
+									}}
+									/
+									{{
+										instance.softwareVersion ||
+										`(${i18n.ts.unknown})`
+									}}</span
+								></template
+							>
+						</MkKeyValue>
+						<MkKeyValue oneline style="margin: 1em 0">
+							<template #key>{{
+								i18n.ts.administrator
+							}}</template>
+							<template #value
+								>{{
+									instance.maintainerName ||
+									`(${i18n.ts.unknown})`
+								}}
+								({{
+									instance.maintainerEmail ||
+									`(${i18n.ts.unknown})`
+								}})</template
+							>
+						</MkKeyValue>
+						<MkKeyValue>
+							<template #key>{{ i18n.ts.description }}</template>
+							<template #value>{{
+								instance.description
+							}}</template>
+						</MkKeyValue>
+
+						<FormSection v-if="iAmModerator">
+							<template #label>Moderation</template>
+							<FormSuspense :p="init">
+								<FormSwitch
+									v-model="suspended"
+									class="_formBlock"
+									@update:modelValue="toggleSuspend"
+									>{{
+										i18n.ts.stopActivityDelivery
+									}}</FormSwitch
+								>
+								<FormSwitch
+									v-model="isBlocked"
+									class="_formBlock"
+									@update:modelValue="toggleBlock"
+									>{{ i18n.ts.blockThisInstance }}</FormSwitch
+								>
+							</FormSuspense>
+							<MkButton @click="refreshMetadata"
+								><i
+									class="ph-arrows-clockwise ph-bold ph-lg"
+								></i>
+								Refresh metadata</MkButton
+							>
+						</FormSection>
+
+						<FormSection>
+							<MkKeyValue oneline style="margin: 1em 0">
+								<template #key>{{
+									i18n.ts.registeredAt
+								}}</template>
+								<template #value
+									><MkTime
+										mode="detail"
+										:time="instance.caughtAt"
+								/></template>
+							</MkKeyValue>
+							<MkKeyValue oneline style="margin: 1em 0">
+								<template #key>{{
+									i18n.ts.updatedAt
+								}}</template>
+								<template #value
+									><MkTime
+										mode="detail"
+										:time="instance.infoUpdatedAt"
+								/></template>
+							</MkKeyValue>
+							<MkKeyValue oneline style="margin: 1em 0">
+								<template #key>{{
+									i18n.ts.latestRequestSentAt
+								}}</template>
+								<template #value
+									><MkTime
+										v-if="instance.latestRequestSentAt"
+										:time="instance.latestRequestSentAt"
+									/><span v-else>N/A</span></template
+								>
+							</MkKeyValue>
+							<MkKeyValue oneline style="margin: 1em 0">
+								<template #key>{{
+									i18n.ts.latestStatus
+								}}</template>
+								<template #value>{{
+									instance.latestStatus
+										? instance.latestStatus
+										: "N/A"
+								}}</template>
+							</MkKeyValue>
+							<MkKeyValue oneline style="margin: 1em 0">
+								<template #key>{{
+									i18n.ts.latestRequestReceivedAt
+								}}</template>
+								<template #value
+									><MkTime
+										v-if="instance.latestRequestReceivedAt"
+										:time="instance.latestRequestReceivedAt"
+									/><span v-else>N/A</span></template
+								>
+							</MkKeyValue>
+						</FormSection>
+
+						<FormSection>
+							<MkKeyValue oneline style="margin: 1em 0">
+								<template #key>Following (Pub)</template>
+								<template #value>{{
+									number(instance.followingCount)
+								}}</template>
+							</MkKeyValue>
+							<MkKeyValue oneline style="margin: 1em 0">
+								<template #key>Followers (Sub)</template>
+								<template #value>{{
+									number(instance.followersCount)
+								}}</template>
+							</MkKeyValue>
+						</FormSection>
+
+						<FormSection>
+							<template #label>Well-known resources</template>
+							<FormLink
+								:to="`https://${host}/.well-known/host-meta`"
+								external
+								style="margin-bottom: 8px"
+								>host-meta</FormLink
+							>
+							<FormLink
+								:to="`https://${host}/.well-known/host-meta.json`"
+								external
+								style="margin-bottom: 8px"
+								>host-meta.json</FormLink
+							>
+							<FormLink
+								:to="`https://${host}/.well-known/nodeinfo`"
+								external
+								style="margin-bottom: 8px"
+								>nodeinfo</FormLink
+							>
+							<FormLink
+								:to="`https://${host}/robots.txt`"
+								external
+								style="margin-bottom: 8px"
+								>robots.txt</FormLink
+							>
+							<FormLink
+								:to="`https://${host}/manifest.json`"
+								external
+								style="margin-bottom: 8px"
+								>manifest.json</FormLink
+							>
+						</FormSection>
+					</div>
+				</swiper-slide>
+				<swiper-slide>
+					<div class="_formRoot">
+						<div class="cmhjzshl">
+							<div class="selects">
+								<MkSelect
+									v-model="chartSrc"
+									style="margin: 0 10px 0 0; flex: 1"
+								>
+									<option value="instance-requests">
+										{{ i18n.ts._instanceCharts.requests }}
+									</option>
+									<option value="instance-users">
+										{{ i18n.ts._instanceCharts.users }}
+									</option>
+									<option value="instance-users-total">
+										{{ i18n.ts._instanceCharts.usersTotal }}
+									</option>
+									<option value="instance-notes">
+										{{ i18n.ts._instanceCharts.notes }}
+									</option>
+									<option value="instance-notes-total">
+										{{ i18n.ts._instanceCharts.notesTotal }}
+									</option>
+									<option value="instance-ff">
+										{{ i18n.ts._instanceCharts.ff }}
+									</option>
+									<option value="instance-ff-total">
+										{{ i18n.ts._instanceCharts.ffTotal }}
+									</option>
+									<option value="instance-drive-usage">
+										{{ i18n.ts._instanceCharts.cacheSize }}
+									</option>
+									<option value="instance-drive-usage-total">
+										{{
+											i18n.ts._instanceCharts
+												.cacheSizeTotal
+										}}
+									</option>
+									<option value="instance-drive-files">
+										{{ i18n.ts._instanceCharts.files }}
+									</option>
+									<option value="instance-drive-files-total">
+										{{ i18n.ts._instanceCharts.filesTotal }}
+									</option>
+								</MkSelect>
+							</div>
+							<div class="charts">
+								<div class="label">
+									{{ i18n.t("recentNHours", { n: 90 }) }}
+								</div>
+								<MkChart
+									class="chart"
+									:src="chartSrc"
+									span="hour"
+									:limit="90"
+									:args="{ host: host }"
+									:detailed="true"
+								></MkChart>
+								<div class="label">
+									{{ i18n.t("recentNDays", { n: 90 }) }}
+								</div>
+								<MkChart
+									class="chart"
+									:src="chartSrc"
+									span="day"
+									:limit="90"
+									:args="{ host: host }"
+									:detailed="true"
+								></MkChart>
+							</div>
 						</div>
 					</div>
-				</div>
-			</swiper-slide>
-			<swiper-slide>
-				<div class="_formRoot">
-					<MkPagination v-slot="{items}" :pagination="usersPagination" style="display: grid; grid-template-columns: repeat(auto-fill,minmax(270px,1fr)); grid-gap: 12px;">
-						<MkA v-for="user in items" :key="user.id" v-tooltip.mfm="`Last posted: ${new Date(user.updatedAt).toLocaleString()}`" class="user" :to="`/user-info/${user.id}`">
-							<MkUserCardMini :user="user"/>
-						</MkA>
-					</MkPagination>
-				</div>
-			</swiper-slide>
-			<swiper-slide>
-				<div class="_formRoot">
-					<MkObjectView tall :value="instance">
-					</MkObjectView>
-				</div>
-			</swiper-slide>
-		</swiper>
-	</MkSpacer>
-</MkStickyContainer>
+				</swiper-slide>
+				<swiper-slide>
+					<div class="_formRoot">
+						<MkPagination
+							v-slot="{ items }"
+							:pagination="usersPagination"
+							style="
+								display: grid;
+								grid-template-columns: repeat(
+									auto-fill,
+									minmax(270px, 1fr)
+								);
+								grid-gap: 12px;
+							"
+						>
+							<MkA
+								v-for="user in items"
+								:key="user.id"
+								v-tooltip.mfm="
+									`Last posted: ${new Date(
+										user.updatedAt
+									).toLocaleString()}`
+								"
+								class="user"
+								:to="`/user-info/${user.id}`"
+							>
+								<MkUserCardMini :user="user" />
+							</MkA>
+						</MkPagination>
+					</div>
+				</swiper-slide>
+				<swiper-slide>
+					<div class="_formRoot">
+						<MkObjectView tall :value="instance"> </MkObjectView>
+					</div>
+				</swiper-slide>
+			</swiper>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { watch } from 'vue';
-import { Virtual } from 'swiper';
-import { Swiper, SwiperSlide } from 'swiper/vue';
-import type * as misskey from 'calckey-js';
-import MkChart from '@/components/MkChart.vue';
-import MkObjectView from '@/components/MkObjectView.vue';
-import FormLink from '@/components/form/link.vue';
-import MkLink from '@/components/MkLink.vue';
-import MkButton from '@/components/MkButton.vue';
-import FormSection from '@/components/form/section.vue';
-import MkKeyValue from '@/components/MkKeyValue.vue';
-import MkSelect from '@/components/form/select.vue';
-import FormSwitch from '@/components/form/switch.vue';
-import * as os from '@/os';
-import number from '@/filters/number';
-import { iAmModerator } from '@/account';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import { deviceKind } from '@/scripts/device-kind';
-import { defaultStore } from '@/store';
-import { i18n } from '@/i18n';
-import MkUserCardMini from '@/components/MkUserCardMini.vue';
-import MkPagination from '@/components/MkPagination.vue';
-import 'swiper/scss';
-import 'swiper/scss/virtual';
-import { getProxiedImageUrlNullable } from '@/scripts/media-proxy';
+import { watch } from "vue";
+import { Virtual } from "swiper";
+import { Swiper, SwiperSlide } from "swiper/vue";
+import type * as misskey from "calckey-js";
+import MkChart from "@/components/MkChart.vue";
+import MkObjectView from "@/components/MkObjectView.vue";
+import FormLink from "@/components/form/link.vue";
+import MkLink from "@/components/MkLink.vue";
+import MkButton from "@/components/MkButton.vue";
+import FormSection from "@/components/form/section.vue";
+import MkKeyValue from "@/components/MkKeyValue.vue";
+import MkSelect from "@/components/form/select.vue";
+import FormSwitch from "@/components/form/switch.vue";
+import * as os from "@/os";
+import number from "@/filters/number";
+import { iAmModerator } from "@/account";
+import { definePageMetadata } from "@/scripts/page-metadata";
+import { deviceKind } from "@/scripts/device-kind";
+import { defaultStore } from "@/store";
+import { i18n } from "@/i18n";
+import MkUserCardMini from "@/components/MkUserCardMini.vue";
+import MkPagination from "@/components/MkPagination.vue";
+import "swiper/scss";
+import "swiper/scss/virtual";
+import { getProxiedImageUrlNullable } from "@/scripts/media-proxy";
 
 type AugmentedInstanceMetadata = misskey.entities.DetailedInstanceMetadata & {
 	blockedHosts: string[];
@@ -171,12 +363,12 @@ const props = defineProps<{
 	host: string;
 }>();
 
-let tabs = ['overview'];
-if (iAmModerator) tabs.push('chart', 'users', 'raw');
+let tabs = ["overview"];
+if (iAmModerator) tabs.push("chart", "users", "raw");
 let tab = $ref(tabs[0]);
-watch($$(tab), () => (syncSlide(tabs.indexOf(tab))));
+watch($$(tab), () => syncSlide(tabs.indexOf(tab)));
 
-let chartSrc = $ref('instance-requests');
+let chartSrc = $ref("instance-requests");
 let meta = $ref<AugmentedInstanceMetadata | null>(null);
 let instance = $ref<AugmentedInstance | null>(null);
 let suspended = $ref(false);
@@ -184,29 +376,29 @@ let isBlocked = $ref(false);
 let faviconUrl = $ref(null);
 
 const usersPagination = {
-	endpoint: iAmModerator ? 'admin/show-users' : 'users' as const,
+	endpoint: iAmModerator ? "admin/show-users" : ("users" as const),
 	limit: 10,
 	params: {
-		sort: '+updatedAt',
-		state: 'all',
+		sort: "+updatedAt",
+		state: "all",
 		hostname: props.host,
 	},
 	offsetMode: true,
 };
 
 async function init() {
-	meta = await os.api('admin/meta');
+	meta = await os.api("admin/meta");
 }
 
 async function fetch() {
-	instance = (await os.api('federation/show-instance', {
+	instance = (await os.api("federation/show-instance", {
 		host: props.host,
 	})) as AugmentedInstance;
 	suspended = instance.isSuspended;
 	isBlocked = instance.isBlocked;
 	faviconUrl =
-		getProxiedImageUrlNullable(instance.faviconUrl, 'preview') ??
-		getProxiedImageUrlNullable(instance.iconUrl, 'preview');
+		getProxiedImageUrlNullable(instance.faviconUrl, "preview") ??
+		getProxiedImageUrlNullable(instance.iconUrl, "preview");
 }
 
 async function toggleBlock() {
@@ -220,58 +412,64 @@ async function toggleBlock() {
 	} else {
 		blockedHosts = meta.blockedHosts.filter((x) => x !== instance!.host);
 	}
-	await os.api('admin/update-meta', {
+	await os.api("admin/update-meta", {
 		blockedHosts,
 	});
 }
 
 async function toggleSuspend(v) {
-	await os.api('admin/federation/update-instance', {
+	await os.api("admin/federation/update-instance", {
 		host: instance.host,
 		isSuspended: suspended,
 	});
 }
 
 function refreshMetadata() {
-	os.api('admin/federation/refresh-remote-instance-metadata', {
+	os.api("admin/federation/refresh-remote-instance-metadata", {
 		host: instance.host,
 	});
 	os.alert({
-		text: 'Refresh requested',
+		text: "Refresh requested",
 	});
 }
 
 fetch();
 
-const headerActions = $computed(() => [{
-	text: `https://${props.host}`,
-	icon: 'ph-arrow-square-out ph-bold ph-lg',
-	handler: () => {
-		window.open(`https://${props.host}`, '_blank');
+const headerActions = $computed(() => [
+	{
+		text: `https://${props.host}`,
+		icon: "ph-arrow-square-out ph-bold ph-lg",
+		handler: () => {
+			window.open(`https://${props.host}`, "_blank");
+		},
 	},
-}]);
+]);
 
-let theTabs = [{
-	key: 'overview',
-	title: i18n.ts.overview,
-	icon: 'ph-info ph-bold ph-lg',
-}];
+let theTabs = [
+	{
+		key: "overview",
+		title: i18n.ts.overview,
+		icon: "ph-info ph-bold ph-lg",
+	},
+];
 
 if (iAmModerator) {
 	theTabs.push(
 		{
-			key: 'chart',
+			key: "chart",
 			title: i18n.ts.charts,
-			icon: 'ph-chart-bar ph-bold ph-lg',
-		}, {
-			key: 'users',
-			title: i18n.ts.users,
-			icon: 'ph-users ph-bold ph-lg',
-		}, {
-			key: 'raw',
-			title: 'Raw',
-			icon: 'ph-code ph-bold ph-lg',
+			icon: "ph-chart-bar ph-bold ph-lg",
 		},
+		{
+			key: "users",
+			title: i18n.ts.users,
+			icon: "ph-users ph-bold ph-lg",
+		},
+		{
+			key: "raw",
+			title: "Raw",
+			icon: "ph-code ph-bold ph-lg",
+		}
 	);
 }
 
@@ -279,7 +477,7 @@ let headerTabs = $computed(() => theTabs);
 
 definePageMetadata({
 	title: props.host,
-	icon: 'ph-hard-drives ph-bold ph-lg',
+	icon: "ph-hard-drives ph-bold ph-lg",
 });
 
 let swiperRef = null;
diff --git a/packages/client/src/pages/messaging/index.vue b/packages/client/src/pages/messaging/index.vue
index b2fed66ded..768c58cc62 100644
--- a/packages/client/src/pages/messaging/index.vue
+++ b/packages/client/src/pages/messaging/index.vue
@@ -1,106 +1,162 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
-	<div>
-		<MkSpacer :content-max="800">
-			<swiper
-				:modules="[Virtual]"
-				:space-between="20"
-				:virtual="true"
-				:allow-touch-move="!(deviceKind === 'desktop' && !defaultStore.state.swipeOnDesktop)"
-				@swiper="setSwiperRef"
-				@slide-change="onSlideChange"
-			>
-				<swiper-slide>
-					<div class="_content yweeujhr dms">
-						<MkButton primary class="start" v-if="!isMobile" @click="startUser"><i class="ph-plus ph-bold ph-lg"></i> {{ i18n.ts.startMessaging }}</MkButton>
-						<MkPagination v-slot="{items}" :pagination="dmsPagination">
-							<MkChatPreview v-for="message in items" :key="message.id" class="yweeujhr message _block" :message="message"/>
-						</MkPagination>
-					</div>
-				</swiper-slide>
-				<swiper-slide>
-					<div class="_content yweeujhr groups">
-						<div v-if="!isMobile" class="groupsbuttons">
-							<MkButton primary class="start" :link="true" to="/my/groups"><i class="ph-user-circle-gear ph-bold ph-lg"></i> {{ i18n.ts.manageGroups }}</MkButton>
-							<MkButton primary class="start" @click="startGroup"><i class="ph-plus ph-bold ph-lg"></i> {{ i18n.ts.startMessaging }}</MkButton>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader
+				v-model:tab="tab"
+				:actions="headerActions"
+				:tabs="headerTabs"
+		/></template>
+		<div>
+			<MkSpacer :content-max="800">
+				<swiper
+					:modules="[Virtual]"
+					:space-between="20"
+					:virtual="true"
+					:allow-touch-move="
+						!(
+							deviceKind === 'desktop' &&
+							!defaultStore.state.swipeOnDesktop
+						)
+					"
+					@swiper="setSwiperRef"
+					@slide-change="onSlideChange"
+				>
+					<swiper-slide>
+						<div class="_content yweeujhr dms">
+							<MkButton
+								primary
+								class="start"
+								v-if="!isMobile"
+								@click="startUser"
+								><i class="ph-plus ph-bold ph-lg"></i>
+								{{ i18n.ts.startMessaging }}</MkButton
+							>
+							<MkPagination
+								v-slot="{ items }"
+								:pagination="dmsPagination"
+							>
+								<MkChatPreview
+									v-for="message in items"
+									:key="message.id"
+									class="yweeujhr message _block"
+									:message="message"
+								/>
+							</MkPagination>
 						</div>
-						<MkPagination v-slot="{items}" :pagination="groupsPagination">
-							<MkChatPreview v-for="message in items" :key="message.id" class="yweeujhr message _block" :message="message"/>
-						</MkPagination>
-					</div>
-				</swiper-slide>
-			</swiper>
-		</MkSpacer>
-	</div>
-</MkStickyContainer>
+					</swiper-slide>
+					<swiper-slide>
+						<div class="_content yweeujhr groups">
+							<div v-if="!isMobile" class="groupsbuttons">
+								<MkButton
+									primary
+									class="start"
+									:link="true"
+									to="/my/groups"
+									><i
+										class="ph-user-circle-gear ph-bold ph-lg"
+									></i>
+									{{ i18n.ts.manageGroups }}</MkButton
+								>
+								<MkButton
+									primary
+									class="start"
+									@click="startGroup"
+									><i class="ph-plus ph-bold ph-lg"></i>
+									{{ i18n.ts.startMessaging }}</MkButton
+								>
+							</div>
+							<MkPagination
+								v-slot="{ items }"
+								:pagination="groupsPagination"
+							>
+								<MkChatPreview
+									v-for="message in items"
+									:key="message.id"
+									class="yweeujhr message _block"
+									:message="message"
+								/>
+							</MkPagination>
+						</div>
+					</swiper-slide>
+				</swiper>
+			</MkSpacer>
+		</div>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { ref, markRaw, onMounted, onUnmounted, watch } from 'vue';
-import * as Acct from 'calckey-js/built/acct';
-import { Virtual } from 'swiper';
-import { Swiper, SwiperSlide } from 'swiper/vue';
-import MkButton from '@/components/MkButton.vue';
-import MkChatPreview from '@/components/MkChatPreview.vue';
-import MkPagination from '@/components/MkPagination.vue';
-import * as os from '@/os';
-import { stream } from '@/stream';
-import { useRouter } from '@/router';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import { $i } from '@/account';
-import { deviceKind } from '@/scripts/device-kind';
-import { defaultStore } from '@/store';
-import 'swiper/scss';
-import 'swiper/scss/virtual';
+import { ref, markRaw, onMounted, onUnmounted, watch } from "vue";
+import * as Acct from "calckey-js/built/acct";
+import { Virtual } from "swiper";
+import { Swiper, SwiperSlide } from "swiper/vue";
+import MkButton from "@/components/MkButton.vue";
+import MkChatPreview from "@/components/MkChatPreview.vue";
+import MkPagination from "@/components/MkPagination.vue";
+import * as os from "@/os";
+import { stream } from "@/stream";
+import { useRouter } from "@/router";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
+import { $i } from "@/account";
+import { deviceKind } from "@/scripts/device-kind";
+import { defaultStore } from "@/store";
+import "swiper/scss";
+import "swiper/scss/virtual";
 
 const router = useRouter();
 
 let messages = $ref([]);
 let connection = $ref(null);
 
-const tabs = ['dms', 'groups'];
+const tabs = ["dms", "groups"];
 let tab = $ref(tabs[0]);
-watch($$(tab), () => (syncSlide(tabs.indexOf(tab))));
+watch($$(tab), () => syncSlide(tabs.indexOf(tab)));
 
 const MOBILE_THRESHOLD = 500;
-const isMobile = ref(deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD);
-window.addEventListener('resize', () => {
-	isMobile.value = deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD;
+const isMobile = ref(
+	deviceKind === "smartphone" || window.innerWidth <= MOBILE_THRESHOLD
+);
+window.addEventListener("resize", () => {
+	isMobile.value =
+		deviceKind === "smartphone" || window.innerWidth <= MOBILE_THRESHOLD;
 });
 
-const headerActions = $computed(() => [{
-	asFullButton: true,
-	icon: 'ph-plus ph-bold ph-lg',
-	text: i18n.ts.addUser,
-	handler: startMenu,
-}]);
+const headerActions = $computed(() => [
+	{
+		asFullButton: true,
+		icon: "ph-plus ph-bold ph-lg",
+		text: i18n.ts.addUser,
+		handler: startMenu,
+	},
+]);
 
-const headerTabs = $computed(() => [{
-	key: 'dms',
-	title: i18n.ts._messaging.dms,
-	icon: 'ph-user ph-bold ph-lg',
-}, {
-	key: 'groups',
-	title: i18n.ts._messaging.groups,
-	icon: 'ph-users-three ph-bold ph-lg',
-}]);
+const headerTabs = $computed(() => [
+	{
+		key: "dms",
+		title: i18n.ts._messaging.dms,
+		icon: "ph-user ph-bold ph-lg",
+	},
+	{
+		key: "groups",
+		title: i18n.ts._messaging.groups,
+		icon: "ph-users-three ph-bold ph-lg",
+	},
+]);
 
 definePageMetadata({
 	title: i18n.ts.messaging,
-	icon: 'ph-chats-teardrop ph-bold ph-lg',
+	icon: "ph-chats-teardrop ph-bold ph-lg",
 });
 
 const dmsPagination = {
-	endpoint: 'messaging/history' as const,
+	endpoint: "messaging/history" as const,
 	limit: 15,
 	params: {
 		group: false,
 	},
 };
 const groupsPagination = {
-	endpoint: 'messaging/history' as const,
+	endpoint: "messaging/history" as const,
 	limit: 5,
 	params: {
 		group: true,
@@ -109,20 +165,26 @@ const groupsPagination = {
 
 function onMessage(message): void {
 	if (message.recipientId) {
-		messages = messages.filter(m => !(
-			(m.recipientId === message.recipientId && m.userId === message.userId) ||
-				(m.recipientId === message.userId && m.userId === message.recipientId)));
+		messages = messages.filter(
+			(m) =>
+				!(
+					(m.recipientId === message.recipientId &&
+						m.userId === message.userId) ||
+					(m.recipientId === message.userId &&
+						m.userId === message.recipientId)
+				)
+		);
 
 		messages.unshift(message);
 	} else if (message.groupId) {
-		messages = messages.filter(m => m.groupId !== message.groupId);
+		messages = messages.filter((m) => m.groupId !== message.groupId);
 		messages.unshift(message);
 	}
 }
 
 function onRead(ids): void {
 	for (const id of ids) {
-		const found = messages.find(m => m.id === id);
+		const found = messages.find((m) => m.id === id);
 		if (found) {
 			if (found.recipientId) {
 				found.isRead = true;
@@ -134,30 +196,39 @@ function onRead(ids): void {
 }
 
 function startMenu(ev) {
-	os.popupMenu([{
-		text: i18n.ts.messagingWithUser,
-		icon: 'ph-user ph-bold ph-lg',
-		action: () => { startUser(); },
-	}, {
-		text: i18n.ts.messagingWithGroup,
-		icon: 'ph-users-three ph-bold ph-lg',
-		action: () => { startGroup(); },
-	}], ev.currentTarget ?? ev.target);
+	os.popupMenu(
+		[
+			{
+				text: i18n.ts.messagingWithUser,
+				icon: "ph-user ph-bold ph-lg",
+				action: () => {
+					startUser();
+				},
+			},
+			{
+				text: i18n.ts.messagingWithGroup,
+				icon: "ph-users-three ph-bold ph-lg",
+				action: () => {
+					startGroup();
+				},
+			},
+		],
+		ev.currentTarget ?? ev.target
+	);
 }
 
-
 async function startUser(): void {
-	os.selectUser().then(user => {
+	os.selectUser().then((user) => {
 		router.push(`/my/messaging/${Acct.toString(user)}`);
 	});
 }
 
 async function startGroup(): void {
-	const groups1 = await os.api('users/groups/owned');
-	const groups2 = await os.api('users/groups/joined');
+	const groups1 = await os.api("users/groups/owned");
+	const groups2 = await os.api("users/groups/joined");
 	if (groups1.length === 0 && groups2.length === 0) {
 		os.alert({
-			type: 'warning',
+			type: "warning",
 			title: i18n.ts.youHaveNoGroups,
 			text: i18n.ts.joinOrCreateGroup,
 		});
@@ -165,8 +236,9 @@ async function startGroup(): void {
 	}
 	const { canceled, result: group } = await os.select({
 		title: i18n.ts.group,
-		items: groups1.concat(groups2).map(group => ({
-			value: group, text: group.name,
+		items: groups1.concat(groups2).map((group) => ({
+			value: group,
+			text: group.name,
 		})),
 	});
 	if (canceled) return;
@@ -191,18 +263,26 @@ function syncSlide(index) {
 onMounted(() => {
 	syncSlide(tabs.indexOf(swiperRef.activeIndex));
 
-	connection = markRaw(stream.useChannel('messagingIndex'));
+	connection = markRaw(stream.useChannel("messagingIndex"));
 
-	connection.on('message', onMessage);
-	connection.on('read', onRead);
+	connection.on("message", onMessage);
+	connection.on("read", onRead);
 
-	os.api('messaging/history', { group: false, limit: 5 }).then(userMessages => {
-		os.api('messaging/history', { group: true, limit: 5 }).then(groupMessages => {
-			const _messages = userMessages.concat(groupMessages);
-			_messages.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
-			messages = _messages;
-		});
-	});
+	os.api("messaging/history", { group: false, limit: 5 }).then(
+		(userMessages) => {
+			os.api("messaging/history", { group: true, limit: 5 }).then(
+				(groupMessages) => {
+					const _messages = userMessages.concat(groupMessages);
+					_messages.sort(
+						(a, b) =>
+							new Date(b.createdAt).getTime() -
+							new Date(a.createdAt).getTime()
+					);
+					messages = _messages;
+				}
+			);
+		}
+	);
 });
 
 onUnmounted(() => {
@@ -210,17 +290,17 @@ onUnmounted(() => {
 });
 </script>
 
-	<style lang="scss" scoped>
-	.yweeujhr {
-		> .start {
-			margin: 0 auto var(--margin) auto;
-		}
-
-		> .groupsbuttons {
-			max-width: 100%;
-			display: flex;
-			justify-content: center;
-			margin-bottom: 1rem;
-		}
+<style lang="scss" scoped>
+.yweeujhr {
+	> .start {
+		margin: 0 auto var(--margin) auto;
 	}
-	</style>
+
+	> .groupsbuttons {
+		max-width: 100%;
+		display: flex;
+		justify-content: center;
+		margin-bottom: 1rem;
+	}
+}
+</style>
diff --git a/packages/client/src/pages/messaging/messaging-room.form.vue b/packages/client/src/pages/messaging/messaging-room.form.vue
index 4e7fa30a68..4bc12ce9ad 100644
--- a/packages/client/src/pages/messaging/messaging-room.form.vue
+++ b/packages/client/src/pages/messaging/messaging-room.form.vue
@@ -1,45 +1,64 @@
 <template>
-<div
-	class="pemppnzi _block"
-	@dragover.stop="onDragover"
-	@drop.stop="onDrop"
->
-	<textarea
-		ref="textEl"
-		v-model="text"
-		:placeholder="i18n.ts.inputMessageHere"
-		@keydown="onKeydown"
-		@compositionupdate="onCompositionUpdate"
-		@paste="onPaste"
-	></textarea>
-	<footer>
-		<div v-if="file" class="file" @click="file = null">{{ file.name }}</div>
-		<div class="buttons">
-			<button class="_button" @click="chooseFile"><i class="ph-upload ph-bold ph-lg"></i></button>
-			<button class="_button" @click="insertEmoji"><i class="ph-smiley ph-bold ph-lg"></i></button>
-			<button class="send _button" :disabled="!canSend || sending" :title="i18n.ts.send" @click="send">
-				<template v-if="!sending"><i class="ph-paper-plane-tilt ph-bold ph-lg"></i></template><template v-if="sending"><i class="ph-circle-notch ph-bold ph-lg fa-pulse ph-fw ph-lg"></i></template>
-			</button>
-		</div>
-	</footer>
-	<input ref="fileEl" type="file" @change="onChangeFile"/>
-</div>
+	<div
+		class="pemppnzi _block"
+		@dragover.stop="onDragover"
+		@drop.stop="onDrop"
+	>
+		<textarea
+			ref="textEl"
+			v-model="text"
+			:placeholder="i18n.ts.inputMessageHere"
+			@keydown="onKeydown"
+			@compositionupdate="onCompositionUpdate"
+			@paste="onPaste"
+		></textarea>
+		<footer>
+			<div v-if="file" class="file" @click="file = null">
+				{{ file.name }}
+			</div>
+			<div class="buttons">
+				<button class="_button" @click="chooseFile">
+					<i class="ph-upload ph-bold ph-lg"></i>
+				</button>
+				<button class="_button" @click="insertEmoji">
+					<i class="ph-smiley ph-bold ph-lg"></i>
+				</button>
+				<button
+					class="send _button"
+					:disabled="!canSend || sending"
+					:title="i18n.ts.send"
+					@click="send"
+				>
+					<template v-if="!sending"
+						><i
+							class="ph-paper-plane-tilt ph-bold ph-lg"
+						></i></template
+					><template v-if="sending"
+						><i
+							class="ph-circle-notch ph-bold ph-lg fa-pulse ph-fw ph-lg"
+						></i
+					></template>
+				</button>
+			</div>
+		</footer>
+		<input ref="fileEl" type="file" @change="onChangeFile" />
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, watch } from 'vue';
-import * as Misskey from 'calckey-js';
-import autosize from 'autosize';
+import { onMounted, watch } from "vue";
+import * as Misskey from "calckey-js";
+import autosize from "autosize";
 //import insertTextAtCursor from 'insert-text-at-cursor';
-import { throttle } from 'throttle-debounce';
-import { Autocomplete } from '@/scripts/autocomplete';
-import { formatTimeString } from '@/scripts/format-time-string';
-import { selectFile } from '@/scripts/select-file';
-import * as os from '@/os';
-import { stream } from '@/stream';
-import { defaultStore } from '@/store';
-import { i18n } from '@/i18n';
-import { uploadFile } from '@/scripts/upload';
+import { throttle } from "throttle-debounce";
+import { Autocomplete } from "@/scripts/autocomplete";
+import { formatTimeString } from "@/scripts/format-time-string";
+import { selectFile } from "@/scripts/select-file";
+import * as os from "@/os";
+import { stream } from "@/stream";
+import { defaultStore } from "@/store";
+import { i18n } from "@/i18n";
+import { uploadFile } from "@/scripts/upload";
 
 const props = defineProps<{
 	user?: Misskey.entities.UserDetailed | null;
@@ -49,15 +68,22 @@ const props = defineProps<{
 let textEl = $ref<HTMLTextAreaElement>();
 let fileEl = $ref<HTMLInputElement>();
 
-let text = $ref<string>('');
+let text = $ref<string>("");
 let file = $ref<Misskey.entities.DriveFile | null>(null);
 let sending = $ref(false);
 const typing = throttle(3000, () => {
-	stream.send('typingOnMessaging', props.user ? { partner: props.user.id } : { group: props.group?.id });
+	stream.send(
+		"typingOnMessaging",
+		props.user ? { partner: props.user.id } : { group: props.group?.id }
+	);
 });
 
-let draftKey = $computed(() => props.user ? 'user:' + props.user.id : 'group:' + props.group?.id);
-let canSend = $computed(() => (text != null && text.trim() !== '') || file != null);
+let draftKey = $computed(() =>
+	props.user ? "user:" + props.user.id : "group:" + props.group?.id
+);
+let canSend = $computed(
+	() => (text != null && text.trim() !== "") || file != null
+);
 
 watch([$$(text), $$(file)], saveDraft);
 
@@ -68,18 +94,22 @@ async function onPaste(ev: ClipboardEvent) {
 	const items = clipboardData.items;
 
 	if (items.length === 1) {
-		if (items[0].kind === 'file') {
+		if (items[0].kind === "file") {
 			const pastedFile = items[0].getAsFile();
 			if (!pastedFile) return;
-			const lio = pastedFile.name.lastIndexOf('.');
-			const ext = lio >= 0 ? pastedFile.name.slice(lio) : '';
-			const formatted = formatTimeString(new Date(pastedFile.lastModified), defaultStore.state.pastedFileName).replace(/{{number}}/g, '1') + ext;
+			const lio = pastedFile.name.lastIndexOf(".");
+			const ext = lio >= 0 ? pastedFile.name.slice(lio) : "";
+			const formatted =
+				formatTimeString(
+					new Date(pastedFile.lastModified),
+					defaultStore.state.pastedFileName
+				).replace(/{{number}}/g, "1") + ext;
 			if (formatted) upload(pastedFile, formatted);
 		}
 	} else {
-		if (items[0].kind === 'file') {
+		if (items[0].kind === "file") {
 			os.alert({
-				type: 'error',
+				type: "error",
 				text: i18n.ts.onlyOneFileCanBeAttached,
 			});
 		}
@@ -89,11 +119,12 @@ async function onPaste(ev: ClipboardEvent) {
 function onDragover(ev: DragEvent) {
 	if (!ev.dataTransfer) return;
 
-	const isFile = ev.dataTransfer.items[0].kind === 'file';
+	const isFile = ev.dataTransfer.items[0].kind === "file";
 	const isDriveFile = ev.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FILE_;
 	if (isFile || isDriveFile) {
 		ev.preventDefault();
-		ev.dataTransfer.dropEffect = ev.dataTransfer.effectAllowed === 'all' ? 'copy' : 'move';
+		ev.dataTransfer.dropEffect =
+			ev.dataTransfer.effectAllowed === "all" ? "copy" : "move";
 	}
 }
 
@@ -108,7 +139,7 @@ function onDrop(ev: DragEvent): void {
 	} else if (ev.dataTransfer.files.length > 1) {
 		ev.preventDefault();
 		os.alert({
-			type: 'error',
+			type: "error",
 			text: i18n.ts.onlyOneFileCanBeAttached,
 		});
 		return;
@@ -116,7 +147,7 @@ function onDrop(ev: DragEvent): void {
 
 	//#region ドライブのファイル
 	const driveFile = ev.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FILE_);
-	if (driveFile != null && driveFile !== '') {
+	if (driveFile != null && driveFile !== "") {
 		file = JSON.parse(driveFile);
 		ev.preventDefault();
 	}
@@ -125,18 +156,23 @@ function onDrop(ev: DragEvent): void {
 
 function onKeydown(ev: KeyboardEvent) {
 	typing();
-	let sendOnEnter = localStorage.getItem('enterSendsMessage') === 'true' || defaultStore.state.enterSendsMessage;
+	let sendOnEnter =
+		localStorage.getItem("enterSendsMessage") === "true" ||
+		defaultStore.state.enterSendsMessage;
 	if (sendOnEnter) {
-		if ((ev.key === 'Enter') && (ev.ctrlKey || ev.metaKey)) {
-			textEl.value += '\n';
-		}
-		else if (ev.key === 'Enter' && !ev.shiftKey && !('ontouchstart' in document.documentElement) && canSend) {
+		if (ev.key === "Enter" && (ev.ctrlKey || ev.metaKey)) {
+			textEl.value += "\n";
+		} else if (
+			ev.key === "Enter" &&
+			!ev.shiftKey &&
+			!("ontouchstart" in document.documentElement) &&
+			canSend
+		) {
 			ev.preventDefault();
 			send();
 		}
-	}
-	else {
-		if ((ev.key === 'Enter') && (ev.ctrlKey || ev.metaKey) && canSend) {
+	} else {
+		if (ev.key === "Enter" && (ev.ctrlKey || ev.metaKey) && canSend) {
 			ev.preventDefault();
 			send();
 		}
@@ -148,9 +184,11 @@ function onCompositionUpdate() {
 }
 
 function chooseFile(ev: MouseEvent) {
-	selectFile(ev.currentTarget ?? ev.target, i18n.ts.selectFile).then(selectedFile => {
-		file = selectedFile;
-	});
+	selectFile(ev.currentTarget ?? ev.target, i18n.ts.selectFile).then(
+		(selectedFile) => {
+			file = selectedFile;
+		}
+	);
 }
 
 function onChangeFile() {
@@ -158,35 +196,40 @@ function onChangeFile() {
 }
 
 function upload(fileToUpload: File, name?: string) {
-	uploadFile(fileToUpload, defaultStore.state.uploadFolder, name).then(res => {
-		file = res;
-	});
+	uploadFile(fileToUpload, defaultStore.state.uploadFolder, name).then(
+		(res) => {
+			file = res;
+		}
+	);
 }
 
 function send() {
 	sending = true;
-	os.api('messaging/messages/create', {
+	os.api("messaging/messages/create", {
 		userId: props.user ? props.user.id : undefined,
 		groupId: props.group ? props.group.id : undefined,
 		text: text ? text : undefined,
 		fileId: file ? file.id : undefined,
-	}).then(message => {
-		clear();
-	}).catch(err => {
-		console.error(err);
-	}).then(() => {
-		sending = false;
-	});
+	})
+		.then((message) => {
+			clear();
+		})
+		.catch((err) => {
+			console.error(err);
+		})
+		.then(() => {
+			sending = false;
+		});
 }
 
 function clear() {
-	text = '';
+	text = "";
 	file = null;
 	deleteDraft();
 }
 
 function saveDraft() {
-	const drafts = JSON.parse(localStorage.getItem('message_drafts') || '{}');
+	const drafts = JSON.parse(localStorage.getItem("message_drafts") || "{}");
 
 	drafts[draftKey] = {
 		updatedAt: new Date(),
@@ -196,15 +239,15 @@ function saveDraft() {
 		},
 	};
 
-	localStorage.setItem('message_drafts', JSON.stringify(drafts));
+	localStorage.setItem("message_drafts", JSON.stringify(drafts));
 }
 
 function deleteDraft() {
-	const drafts = JSON.parse(localStorage.getItem('message_drafts') || '{}');
+	const drafts = JSON.parse(localStorage.getItem("message_drafts") || "{}");
 
 	delete drafts[draftKey];
 
-	localStorage.setItem('message_drafts', JSON.stringify(drafts));
+	localStorage.setItem("message_drafts", JSON.stringify(drafts));
 }
 
 async function insertEmoji(ev: MouseEvent) {
@@ -218,7 +261,9 @@ onMounted(() => {
 	new Autocomplete(textEl, $$(text));
 
 	// 書きかけの投稿を復元
-	const draft = JSON.parse(localStorage.getItem('message_drafts') || '{}')[draftKey];
+	const draft = JSON.parse(localStorage.getItem("message_drafts") || "{}")[
+		draftKey
+	];
 	if (draft) {
 		text = draft.data.text;
 		file = draft.data.file;
@@ -277,7 +322,7 @@ defineExpose({
 		list-style: none;
 
 		&:after {
-			content: '';
+			content: "";
 			display: block;
 			clear: both;
 		}
@@ -354,7 +399,7 @@ defineExpose({
 		}
 	}
 
-	input[type=file] {
+	input[type="file"] {
 		display: none;
 	}
 }
diff --git a/packages/client/src/pages/messaging/messaging-room.message.vue b/packages/client/src/pages/messaging/messaging-room.message.vue
index d281285063..e8cffc061e 100644
--- a/packages/client/src/pages/messaging/messaging-room.message.vue
+++ b/packages/client/src/pages/messaging/messaging-room.message.vue
@@ -1,50 +1,93 @@
 <template>
-<div v-size="{ max: [400, 500] }" class="thvuemwp" :class="{ isMe }">
-	<MkAvatar v-if="!isMe" class="avatar" :user="message.user" :show-indicator="true"/>
-	<div class="content">
-		<div class="balloon" :class="{ noText: message.text == null }">
-			<button v-if="isMe" class="delete-button" :title="i18n.ts.delete" @click="del">
-				<img src="/client-assets/remove.png" alt="Delete"/>
-			</button>
-			<div v-if="!message.isDeleted" class="content">
-				<Mfm v-if="message.text" ref="text" class="text" :text="message.text" :i="$i"/>
+	<div v-size="{ max: [400, 500] }" class="thvuemwp" :class="{ isMe }">
+		<MkAvatar
+			v-if="!isMe"
+			class="avatar"
+			:user="message.user"
+			:show-indicator="true"
+		/>
+		<div class="content">
+			<div class="balloon" :class="{ noText: message.text == null }">
+				<button
+					v-if="isMe"
+					class="delete-button"
+					:title="i18n.ts.delete"
+					@click="del"
+				>
+					<img src="/client-assets/remove.png" alt="Delete" />
+				</button>
+				<div v-if="!message.isDeleted" class="content">
+					<Mfm
+						v-if="message.text"
+						ref="text"
+						class="text"
+						:text="message.text"
+						:i="$i"
+					/>
+				</div>
+				<div v-else class="content">
+					<p class="is-deleted">{{ i18n.ts.deleted }}</p>
+				</div>
 			</div>
-			<div v-else class="content">
-				<p class="is-deleted">{{ i18n.ts.deleted }}</p>
+			<div v-if="message.file" class="file" width="400px">
+				<XMediaList
+					v-if="
+						message.file.type.split('/')[0] == 'image' ||
+						message.file.type.split('/')[0] == 'video'
+					"
+					:in-dm="true"
+					width="400px"
+					:media-list="[message.file]"
+					style="border-radius: 5px"
+				/>
+				<a
+					v-else
+					:href="message.file.url"
+					rel="noopener"
+					target="_blank"
+					:title="message.file.name"
+				>
+					<p>{{ message.file.name }}</p>
+				</a>
 			</div>
+			<div></div>
+			<MkUrlPreview
+				v-for="url in urls"
+				:key="url"
+				:url="url"
+				style="margin: 8px 0"
+			/>
+			<footer>
+				<template v-if="isGroup">
+					<span v-if="message.reads.length > 0" class="read"
+						>{{ i18n.ts.messageRead }}
+						{{ message.reads.length }}</span
+					>
+				</template>
+				<template v-else>
+					<span v-if="isMe && message.isRead" class="read">{{
+						i18n.ts.messageRead
+					}}</span>
+				</template>
+				<MkTime :time="message.createdAt" />
+				<template v-if="message.is_edited"
+					><i class="ph-pencil ph-bold ph-lg"></i
+				></template>
+			</footer>
 		</div>
-		<div v-if="message.file" class="file" width="400px">
-			<XMediaList v-if="message.file.type.split('/')[0] == 'image' || message.file.type.split('/')[0] == 'video'" :in-dm="true" width="400px" :media-list="[message.file]" style="border-radius: 5px"/>
-			<a v-else :href="message.file.url" rel="noopener" target="_blank" :title="message.file.name">
-				<p>{{ message.file.name }}</p>
-			</a>
-		</div>
-		<div></div>
-		<MkUrlPreview v-for="url in urls" :key="url" :url="url" style="margin: 8px 0;"/>
-		<footer>
-			<template v-if="isGroup">
-				<span v-if="message.reads.length > 0" class="read">{{ i18n.ts.messageRead }} {{ message.reads.length }}</span>
-			</template>
-			<template v-else>
-				<span v-if="isMe && message.isRead" class="read">{{ i18n.ts.messageRead }}</span>
-			</template>
-			<MkTime :time="message.createdAt"/>
-			<template v-if="message.is_edited"><i class="ph-pencil ph-bold ph-lg"></i></template>
-		</footer>
 	</div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import * as mfm from 'mfm-js';
-import type * as Misskey from 'calckey-js';
-import XMediaList from '@/components/MkMediaList.vue';
-import { extractUrlFromMfm } from '@/scripts/extract-url-from-mfm';
-import MkUrlPreview from '@/components/MkUrlPreview.vue';
-import * as os from '@/os';
-import { $i } from '@/account';
-import { i18n } from '@/i18n';
+import {} from "vue";
+import * as mfm from "mfm-js";
+import type * as Misskey from "calckey-js";
+import XMediaList from "@/components/MkMediaList.vue";
+import { extractUrlFromMfm } from "@/scripts/extract-url-from-mfm";
+import MkUrlPreview from "@/components/MkUrlPreview.vue";
+import * as os from "@/os";
+import { $i } from "@/account";
+import { i18n } from "@/i18n";
 
 const props = defineProps<{
 	message: Misskey.entities.MessagingMessage;
@@ -52,10 +95,12 @@ const props = defineProps<{
 }>();
 
 const isMe = $computed(() => props.message.userId === $i?.id);
-const urls = $computed(() => props.message.text ? extractUrlFromMfm(mfm.parse(props.message.text)) : []);
+const urls = $computed(() =>
+	props.message.text ? extractUrlFromMfm(mfm.parse(props.message.text)) : []
+);
 
 function del(): void {
-	os.api('messaging/messages/delete', {
+	os.api("messaging/messages/delete", {
 		messageId: props.message.id,
 	});
 }
@@ -274,13 +319,13 @@ function del(): void {
 				}
 
 				> .content {
-
 					> p.is-deleted {
 						color: rgba(#fff, 0.5);
 					}
 
 					> .text {
-						&, ::v-deep(*) {
+						&,
+						::v-deep(*) {
 							color: var(--fgOnAccent) !important;
 						}
 					}
diff --git a/packages/client/src/pages/messaging/messaging-room.vue b/packages/client/src/pages/messaging/messaging-room.vue
index 17532cebdc..ed3b4e2270 100644
--- a/packages/client/src/pages/messaging/messaging-room.vue
+++ b/packages/client/src/pages/messaging/messaging-room.vue
@@ -1,71 +1,116 @@
 <template>
-<div
-	ref="rootEl"
-	class="_section"
-	@dragover.prevent.stop="onDragover"
-	@drop.prevent.stop="onDrop"
->
-	<div class="_content mk-messaging-room">
-		<MkSpacer :content-max="800">
-			<div class="body">
-				<MkPagination v-if="pagination" ref="pagingComponent" :key="userAcct || groupId" :pagination="pagination">
-					<template #empty>
-						<div class="_fullinfo">
-							<img src="/static-assets/badges/info.png" class="_ghost" alt="Info"/>
-							<div>{{ i18n.ts.noMessagesYet }}</div>
-						</div>
-					</template>
-					<template #default="{ items: messages, fetching: pFetching }">
-						<XList
-							v-if="messages.length > 0"
-							v-slot="{ item: message }"
-							:class="{ messages: true, 'deny-move-transition': pFetching }"
-							:items="messages"
-							direction="up"
-							reversed
-						>
-							<XMessage :key="message.id" :message="message" :is-group="group != null"/>
-						</XList>
-					</template>
-				</MkPagination>
-			</div>
-			<footer>
-				<div v-if="typers.length > 0" class="typers">
-					<I18n :src="i18n.ts.typingUsers" text-tag="span" class="users">
-						<template #users>
-							<b v-for="typer in typers" :key="typer.id" class="user">{{ typer.username }}</b>
+	<div
+		ref="rootEl"
+		class="_section"
+		@dragover.prevent.stop="onDragover"
+		@drop.prevent.stop="onDrop"
+	>
+		<div class="_content mk-messaging-room">
+			<MkSpacer :content-max="800">
+				<div class="body">
+					<MkPagination
+						v-if="pagination"
+						ref="pagingComponent"
+						:key="userAcct || groupId"
+						:pagination="pagination"
+					>
+						<template #empty>
+							<div class="_fullinfo">
+								<img
+									src="/static-assets/badges/info.png"
+									class="_ghost"
+									alt="Info"
+								/>
+								<div>{{ i18n.ts.noMessagesYet }}</div>
+							</div>
 						</template>
-					</I18n>
-					<MkEllipsis/>
+						<template
+							#default="{ items: messages, fetching: pFetching }"
+						>
+							<XList
+								v-if="messages.length > 0"
+								v-slot="{ item: message }"
+								:class="{
+									messages: true,
+									'deny-move-transition': pFetching,
+								}"
+								:items="messages"
+								direction="up"
+								reversed
+							>
+								<XMessage
+									:key="message.id"
+									:message="message"
+									:is-group="group != null"
+								/>
+							</XList>
+						</template>
+					</MkPagination>
 				</div>
-				<transition :name="animation ? 'fade' : ''">
-					<div v-show="showIndicator" class="new-message">
-						<button class="_buttonPrimary" @click="onIndicatorClick"><i class="fas ph-fw ph-lg ph-arrow-circle-down ph-bold ph-lg"></i>{{ i18n.ts.newMessageExists }}</button>
+				<footer>
+					<div v-if="typers.length > 0" class="typers">
+						<I18n
+							:src="i18n.ts.typingUsers"
+							text-tag="span"
+							class="users"
+						>
+							<template #users>
+								<b
+									v-for="typer in typers"
+									:key="typer.id"
+									class="user"
+									>{{ typer.username }}</b
+								>
+							</template>
+						</I18n>
+						<MkEllipsis />
 					</div>
-				</transition>
-				<XForm v-if="!fetching" ref="formEl" :user="user" :group="group" class="form"/>
-			</footer>
-		</MkSpacer>
+					<transition :name="animation ? 'fade' : ''">
+						<div v-show="showIndicator" class="new-message">
+							<button
+								class="_buttonPrimary"
+								@click="onIndicatorClick"
+							>
+								<i
+									class="fas ph-fw ph-lg ph-arrow-circle-down ph-bold ph-lg"
+								></i
+								>{{ i18n.ts.newMessageExists }}
+							</button>
+						</div>
+					</transition>
+					<XForm
+						v-if="!fetching"
+						ref="formEl"
+						:user="user"
+						:group="group"
+						class="form"
+					/>
+				</footer>
+			</MkSpacer>
+		</div>
 	</div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { computed, watch, onMounted, nextTick, onBeforeUnmount } from 'vue';
-import * as Misskey from 'calckey-js';
-import * as Acct from 'calckey-js/built/acct';
-import XMessage from './messaging-room.message.vue';
-import XForm from './messaging-room.form.vue';
-import XList from '@/components/MkDateSeparatedList.vue';
-import MkPagination, { Paging } from '@/components/MkPagination.vue';
-import { isBottomVisible, onScrollBottom, scrollToBottom } from '@/scripts/scroll';
-import * as os from '@/os';
-import { stream } from '@/stream';
-import * as sound from '@/scripts/sound';
-import { i18n } from '@/i18n';
-import { $i } from '@/account';
-import { defaultStore } from '@/store';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import { computed, watch, onMounted, nextTick, onBeforeUnmount } from "vue";
+import * as Misskey from "calckey-js";
+import * as Acct from "calckey-js/built/acct";
+import XMessage from "./messaging-room.message.vue";
+import XForm from "./messaging-room.form.vue";
+import XList from "@/components/MkDateSeparatedList.vue";
+import MkPagination, { Paging } from "@/components/MkPagination.vue";
+import {
+	isBottomVisible,
+	onScrollBottom,
+	scrollToBottom,
+} from "@/scripts/scroll";
+import * as os from "@/os";
+import { stream } from "@/stream";
+import * as sound from "@/scripts/sound";
+import { i18n } from "@/i18n";
+import { $i } from "@/account";
+import { defaultStore } from "@/store";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
 const props = defineProps<{
 	userAcct?: string;
@@ -80,11 +125,11 @@ let fetching = $ref(true);
 let user: Misskey.entities.UserDetailed | null = $ref(null);
 let group: Misskey.entities.UserGroup | null = $ref(null);
 let typers: Misskey.entities.User[] = $ref([]);
-let connection: Misskey.ChannelConnection<Misskey.Channels['messaging']> | null = $ref(null);
+let connection: Misskey.ChannelConnection<
+	Misskey.Channels["messaging"]
+> | null = $ref(null);
 let showIndicator = $ref(false);
-const {
-	animation,
-} = defaultStore.reactiveState;
+const { animation } = defaultStore.reactiveState;
 
 let pagination: Paging | null = $ref(null);
 
@@ -98,11 +143,14 @@ async function fetch() {
 
 	if (props.userAcct) {
 		const acct = Acct.parse(props.userAcct);
-		user = await os.api('users/show', { username: acct.username, host: acct.host || undefined });
+		user = await os.api("users/show", {
+			username: acct.username,
+			host: acct.host || undefined,
+		});
 		group = null;
 
 		pagination = {
-			endpoint: 'messaging/messages',
+			endpoint: "messaging/messages",
 			limit: 20,
 			params: {
 				userId: user.id,
@@ -110,15 +158,15 @@ async function fetch() {
 			reversed: true,
 			pageEl: $$(rootEl).value,
 		};
-		connection = stream.useChannel('messaging', {
+		connection = stream.useChannel("messaging", {
 			otherparty: user.id,
 		});
 	} else {
 		user = null;
-		group = await os.api('users/groups/show', { groupId: props.groupId });
+		group = await os.api("users/groups/show", { groupId: props.groupId });
 
 		pagination = {
-			endpoint: 'messaging/messages',
+			endpoint: "messaging/messages",
 			limit: 20,
 			params: {
 				groupId: group?.id,
@@ -126,19 +174,19 @@ async function fetch() {
 			reversed: true,
 			pageEl: $$(rootEl).value,
 		};
-		connection = stream.useChannel('messaging', {
+		connection = stream.useChannel("messaging", {
 			group: group?.id,
 		});
 	}
 
-	connection.on('message', onMessage);
-	connection.on('read', onRead);
-	connection.on('deleted', onDeleted);
-	connection.on('typers', _typers => {
-		typers = _typers.filter(u => u.id !== $i?.id);
+	connection.on("message", onMessage);
+	connection.on("read", onRead);
+	connection.on("deleted", onDeleted);
+	connection.on("typers", (_typers) => {
+		typers = _typers.filter((u) => u.id !== $i?.id);
 	});
 
-	document.addEventListener('visibilitychange', onVisibilitychange);
+	document.addEventListener("visibilitychange", onVisibilitychange);
 
 	nextTick(() => {
 		// thisScrollToBottom();
@@ -151,13 +199,14 @@ async function fetch() {
 function onDragover(ev: DragEvent) {
 	if (!ev.dataTransfer) return;
 
-	const isFile = ev.dataTransfer.items[0].kind === 'file';
+	const isFile = ev.dataTransfer.items[0].kind === "file";
 	const isDriveFile = ev.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FILE_;
 
 	if (isFile || isDriveFile) {
-		ev.dataTransfer.dropEffect = ev.dataTransfer.effectAllowed === 'all' ? 'copy' : 'move';
+		ev.dataTransfer.dropEffect =
+			ev.dataTransfer.effectAllowed === "all" ? "copy" : "move";
 	} else {
-		ev.dataTransfer.dropEffect = 'none';
+		ev.dataTransfer.dropEffect = "none";
 	}
 }
 
@@ -170,7 +219,7 @@ function onDrop(ev: DragEvent): void {
 		return;
 	} else if (ev.dataTransfer.files.length > 1) {
 		os.alert({
-			type: 'error',
+			type: "error",
 			text: i18n.ts.onlyOneFileCanBeAttached,
 		});
 		return;
@@ -178,7 +227,7 @@ function onDrop(ev: DragEvent): void {
 
 	//#region ドライブのファイル
 	const driveFile = ev.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FILE_);
-	if (driveFile != null && driveFile !== '') {
+	if (driveFile != null && driveFile !== "") {
 		const file = JSON.parse(driveFile);
 		formEl.file = file;
 	}
@@ -186,13 +235,13 @@ function onDrop(ev: DragEvent): void {
 }
 
 function onMessage(message) {
-	sound.play('chat');
+	sound.play("chat");
 
 	const _isBottom = isBottomVisible(rootEl, 64);
 
 	pagingComponent.prepend(message);
 	if (message.userId !== $i?.id && !document.hidden) {
-		connection?.send('read', {
+		connection?.send("read", {
 			id: message.id,
 		});
 	}
@@ -212,8 +261,10 @@ function onRead(x) {
 	if (user) {
 		if (!Array.isArray(x)) x = [x];
 		for (const id of x) {
-			if (pagingComponent.items.some(y => y.id === id)) {
-				const exist = pagingComponent.items.map(y => y.id).indexOf(id);
+			if (pagingComponent.items.some((y) => y.id === id)) {
+				const exist = pagingComponent.items
+					.map((y) => y.id)
+					.indexOf(id);
 				pagingComponent.items[exist] = {
 					...pagingComponent.items[exist],
 					isRead: true,
@@ -222,8 +273,10 @@ function onRead(x) {
 		}
 	} else if (group) {
 		for (const id of x.ids) {
-			if (pagingComponent.items.some(y => y.id === id)) {
-				const exist = pagingComponent.items.map(y => y.id).indexOf(id);
+			if (pagingComponent.items.some((y) => y.id === id)) {
+				const exist = pagingComponent.items
+					.map((y) => y.id)
+					.indexOf(id);
 				pagingComponent.items[exist] = {
 					...pagingComponent.items[exist],
 					reads: [...pagingComponent.items[exist].reads, x.userId],
@@ -234,15 +287,17 @@ function onRead(x) {
 }
 
 function onDeleted(id) {
-	const msg = pagingComponent.items.find(m => m.id === id);
+	const msg = pagingComponent.items.find((m) => m.id === id);
 	if (msg) {
-		pagingComponent.items = pagingComponent.items.filter(m => m.id !== msg.id);
+		pagingComponent.items = pagingComponent.items.filter(
+			(m) => m.id !== msg.id
+		);
 	}
 }
 
 function thisScrollToBottom() {
-	if (window.location.href.includes('my/messaging/')) {
-		scrollToBottom($$(rootEl).value, { behavior: 'smooth' });
+	if (window.location.href.includes("my/messaging/")) {
+		scrollToBottom($$(rootEl).value, { behavior: "smooth" });
 	}
 }
 
@@ -266,7 +321,7 @@ function onVisibilitychange() {
 	if (document.hidden) return;
 	for (const message of pagingComponent.items) {
 		if (message.userId !== $i?.id && !message.isRead) {
-			connection?.send('read', {
+			connection?.send("read", {
 				id: message.id,
 			});
 		}
@@ -275,21 +330,22 @@ function onVisibilitychange() {
 
 onMounted(() => {
 	fetch();
-	definePageMetadata(computed(() => ({
-		title: group != null ? group.name : user?.name,
-		icon: 'ph-chats-teardrop ph-bold ph-lg',
-	})));
+	definePageMetadata(
+		computed(() => ({
+			title: group != null ? group.name : user?.name,
+			icon: "ph-chats-teardrop ph-bold ph-lg",
+		}))
+	);
 });
 
 onBeforeUnmount(() => {
 	connection?.dispose();
-	document.removeEventListener('visibilitychange', onVisibilitychange);
+	document.removeEventListener("visibilitychange", onVisibilitychange);
 	if (scrollRemove) scrollRemove();
 });
 </script>
 
 <style lang="scss" scoped>
-
 XMessage:last-of-type {
 	margin-bottom: 4rem;
 }
@@ -389,11 +445,13 @@ XMessage:last-of-type {
 	}
 }
 
-.fade-enter-active, .fade-leave-active {
+.fade-enter-active,
+.fade-leave-active {
 	transition: opacity 0.1s;
 }
 
-.fade-enter-from, .fade-leave-to {
+.fade-enter-from,
+.fade-leave-to {
 	transition: opacity 0.5s;
 	opacity: 0;
 }
diff --git a/packages/client/src/pages/mfm-cheat-sheet.vue b/packages/client/src/pages/mfm-cheat-sheet.vue
index 061bf9b2fe..1f3f0bea27 100644
--- a/packages/client/src/pages/mfm-cheat-sheet.vue
+++ b/packages/client/src/pages/mfm-cheat-sheet.vue
@@ -1,121 +1,143 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader/></template>
-	<MkSpacer :content-max="800">
-		<div class="mwysmxbg">
-			<div>{{ i18n.ts._mfm.intro }}</div>
-			<br/>
-			<div class="section _block">
-				<div class="title">{{ i18n.ts._mfm.mention }}</div>
-				<div class="content">
-					<p>{{ i18n.ts._mfm.mentionDescription }}</p>
-					<div class="preview">
-						<Mfm :text="preview_mention"/>
-						<MkTextarea v-model="preview_mention"><template #label>MFM</template></MkTextarea>
+	<MkStickyContainer>
+		<template #header><MkPageHeader /></template>
+		<MkSpacer :content-max="800">
+			<div class="mwysmxbg">
+				<div>{{ i18n.ts._mfm.intro }}</div>
+				<br />
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._mfm.mention }}</div>
+					<div class="content">
+						<p>{{ i18n.ts._mfm.mentionDescription }}</p>
+						<div class="preview">
+							<Mfm :text="preview_mention" />
+							<MkTextarea v-model="preview_mention"
+								><template #label>MFM</template></MkTextarea
+							>
+						</div>
 					</div>
 				</div>
-			</div>
-			<div class="section _block">
-				<div class="title">{{ i18n.ts._mfm.hashtag }}</div>
-				<div class="content">
-					<p>{{ i18n.ts._mfm.hashtagDescription }}</p>
-					<div class="preview">
-						<Mfm :text="preview_hashtag"/>
-						<MkTextarea v-model="preview_hashtag"><template #label>MFM</template></MkTextarea>
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._mfm.hashtag }}</div>
+					<div class="content">
+						<p>{{ i18n.ts._mfm.hashtagDescription }}</p>
+						<div class="preview">
+							<Mfm :text="preview_hashtag" />
+							<MkTextarea v-model="preview_hashtag"
+								><template #label>MFM</template></MkTextarea
+							>
+						</div>
 					</div>
 				</div>
-			</div>
-			<div class="section _block">
-				<div class="title">{{ i18n.ts._mfm.link }}</div>
-				<div class="content">
-					<p>{{ i18n.ts._mfm.linkDescription }}</p>
-					<div class="preview">
-						<Mfm :text="preview_link"/>
-						<MkTextarea v-model="preview_link"><template #label>MFM</template></MkTextarea>
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._mfm.link }}</div>
+					<div class="content">
+						<p>{{ i18n.ts._mfm.linkDescription }}</p>
+						<div class="preview">
+							<Mfm :text="preview_link" />
+							<MkTextarea v-model="preview_link"
+								><template #label>MFM</template></MkTextarea
+							>
+						</div>
 					</div>
 				</div>
-			</div>
-			<div class="section _block">
-				<div class="title">{{ i18n.ts._mfm.emoji }}</div>
-				<div class="content">
-					<p>{{ i18n.ts._mfm.emojiDescription }}</p>
-					<div class="preview">
-						<Mfm :text="preview_emoji"/>
-						<MkTextarea v-model="preview_emoji"><template #label>MFM</template></MkTextarea>
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._mfm.emoji }}</div>
+					<div class="content">
+						<p>{{ i18n.ts._mfm.emojiDescription }}</p>
+						<div class="preview">
+							<Mfm :text="preview_emoji" />
+							<MkTextarea v-model="preview_emoji"
+								><template #label>MFM</template></MkTextarea
+							>
+						</div>
 					</div>
 				</div>
-			</div>
-			<div class="section _block">
-				<div class="title">{{ i18n.ts._mfm.bold }}</div>
-				<div class="content">
-					<p>{{ i18n.ts._mfm.boldDescription }}</p>
-					<div class="preview">
-						<Mfm :text="preview_bold"/>
-						<MkTextarea v-model="preview_bold"><template #label>MFM</template></MkTextarea>
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._mfm.bold }}</div>
+					<div class="content">
+						<p>{{ i18n.ts._mfm.boldDescription }}</p>
+						<div class="preview">
+							<Mfm :text="preview_bold" />
+							<MkTextarea v-model="preview_bold"
+								><template #label>MFM</template></MkTextarea
+							>
+						</div>
 					</div>
 				</div>
-			</div>
-			<div class="section _block">
-				<div class="title">{{ i18n.ts._mfm.small }}</div>
-				<div class="content">
-					<p>{{ i18n.ts._mfm.smallDescription }}</p>
-					<div class="preview">
-						<Mfm :text="preview_small"/>
-						<MkTextarea v-model="preview_small"><template #label>MFM</template></MkTextarea>
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._mfm.small }}</div>
+					<div class="content">
+						<p>{{ i18n.ts._mfm.smallDescription }}</p>
+						<div class="preview">
+							<Mfm :text="preview_small" />
+							<MkTextarea v-model="preview_small"
+								><template #label>MFM</template></MkTextarea
+							>
+						</div>
 					</div>
 				</div>
-			</div>
-			<div class="section _block">
-				<div class="title">{{ i18n.ts._mfm.quote }}</div>
-				<div class="content">
-					<p>{{ i18n.ts._mfm.quoteDescription }}</p>
-					<div class="preview">
-						<Mfm :text="preview_quote"/>
-						<MkTextarea v-model="preview_quote"><template #label>MFM</template></MkTextarea>
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._mfm.quote }}</div>
+					<div class="content">
+						<p>{{ i18n.ts._mfm.quoteDescription }}</p>
+						<div class="preview">
+							<Mfm :text="preview_quote" />
+							<MkTextarea v-model="preview_quote"
+								><template #label>MFM</template></MkTextarea
+							>
+						</div>
 					</div>
 				</div>
-			</div>
-			<div class="section _block">
-				<div class="title">{{ i18n.ts._mfm.center }}</div>
-				<div class="content">
-					<p>{{ i18n.ts._mfm.centerDescription }}</p>
-					<div class="preview">
-						<Mfm :text="preview_center"/>
-						<MkTextarea v-model="preview_center"><template #label>MFM</template></MkTextarea>
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._mfm.center }}</div>
+					<div class="content">
+						<p>{{ i18n.ts._mfm.centerDescription }}</p>
+						<div class="preview">
+							<Mfm :text="preview_center" />
+							<MkTextarea v-model="preview_center"
+								><template #label>MFM</template></MkTextarea
+							>
+						</div>
 					</div>
 				</div>
-			</div>
-			<div class="section _block">
-				<div class="title">{{ i18n.ts._mfm.inlineCode }}</div>
-				<div class="content">
-					<p>{{ i18n.ts._mfm.inlineCodeDescription }}</p>
-					<div class="preview">
-						<Mfm :text="preview_inlineCode"/>
-						<MkTextarea v-model="preview_inlineCode"><template #label>MFM</template></MkTextarea>
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._mfm.inlineCode }}</div>
+					<div class="content">
+						<p>{{ i18n.ts._mfm.inlineCodeDescription }}</p>
+						<div class="preview">
+							<Mfm :text="preview_inlineCode" />
+							<MkTextarea v-model="preview_inlineCode"
+								><template #label>MFM</template></MkTextarea
+							>
+						</div>
 					</div>
 				</div>
-			</div>
-			<div class="section _block">
-				<div class="title">{{ i18n.ts._mfm.blockCode }}</div>
-				<div class="content">
-					<p>{{ i18n.ts._mfm.blockCodeDescription }}</p>
-					<div class="preview">
-						<Mfm :text="preview_blockCode"/>
-						<MkTextarea v-model="preview_blockCode"><template #label>MFM</template></MkTextarea>
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._mfm.blockCode }}</div>
+					<div class="content">
+						<p>{{ i18n.ts._mfm.blockCodeDescription }}</p>
+						<div class="preview">
+							<Mfm :text="preview_blockCode" />
+							<MkTextarea v-model="preview_blockCode"
+								><template #label>MFM</template></MkTextarea
+							>
+						</div>
 					</div>
 				</div>
-			</div>
-			<div class="section _block">
-				<div class="title">{{ i18n.ts._mfm.inlineMath }}</div>
-				<div class="content">
-					<p>{{ i18n.ts._mfm.inlineMathDescription }}</p>
-					<div class="preview">
-						<Mfm :text="preview_inlineMath"/>
-						<MkTextarea v-model="preview_inlineMath"><template #label>MFM</template></MkTextarea>
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._mfm.inlineMath }}</div>
+					<div class="content">
+						<p>{{ i18n.ts._mfm.inlineMathDescription }}</p>
+						<div class="preview">
+							<Mfm :text="preview_inlineMath" />
+							<MkTextarea v-model="preview_inlineMath"
+								><template #label>MFM</template></MkTextarea
+							>
+						</div>
 					</div>
 				</div>
-			</div>
-			<!-- deprecated
+				<!-- deprecated
 		<div class="section _block">
 			<div class="title">{{ i18n.ts._mfm.search }}</div>
 			<div class="content">
@@ -127,221 +149,267 @@
 			</div>
 		</div>
 		-->
-			<div class="section _block">
-				<div class="title">{{ i18n.ts._mfm.flip }}</div>
-				<div class="content">
-					<p>{{ i18n.ts._mfm.flipDescription }}</p>
-					<div class="preview">
-						<Mfm :text="preview_flip"/>
-						<MkTextarea v-model="preview_flip"><template #label>MFM</template></MkTextarea>
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._mfm.flip }}</div>
+					<div class="content">
+						<p>{{ i18n.ts._mfm.flipDescription }}</p>
+						<div class="preview">
+							<Mfm :text="preview_flip" />
+							<MkTextarea v-model="preview_flip"
+								><template #label>MFM</template></MkTextarea
+							>
+						</div>
+					</div>
+				</div>
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._mfm.font }}</div>
+					<div class="content">
+						<p>{{ i18n.ts._mfm.fontDescription }}</p>
+						<div class="preview">
+							<Mfm :text="preview_font" />
+							<MkTextarea v-model="preview_font"
+								><template #label>MFM</template></MkTextarea
+							>
+						</div>
+					</div>
+				</div>
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._mfm.x2 }}</div>
+					<div class="content">
+						<p>{{ i18n.ts._mfm.x2Description }}</p>
+						<div class="preview">
+							<Mfm :text="preview_x2" />
+							<MkTextarea v-model="preview_x2"
+								><template #label>MFM</template></MkTextarea
+							>
+						</div>
+					</div>
+				</div>
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._mfm.x3 }}</div>
+					<div class="content">
+						<p>{{ i18n.ts._mfm.x3Description }}</p>
+						<div class="preview">
+							<Mfm :text="preview_x3" />
+							<MkTextarea v-model="preview_x3"
+								><template #label>MFM</template></MkTextarea
+							>
+						</div>
+					</div>
+				</div>
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._mfm.x4 }}</div>
+					<div class="content">
+						<p>{{ i18n.ts._mfm.x4Description }}</p>
+						<div class="preview">
+							<Mfm :text="preview_x4" />
+							<MkTextarea v-model="preview_x4"
+								><template #label>MFM</template></MkTextarea
+							>
+						</div>
+					</div>
+				</div>
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._mfm.blur }}</div>
+					<div class="content">
+						<p>{{ i18n.ts._mfm.blurDescription }}</p>
+						<div class="preview">
+							<Mfm :text="preview_blur" />
+							<MkTextarea v-model="preview_blur"
+								><template #label>MFM</template></MkTextarea
+							>
+						</div>
+					</div>
+				</div>
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._mfm.jelly }}</div>
+					<div class="content">
+						<p>{{ i18n.ts._mfm.jellyDescription }}</p>
+						<div class="preview">
+							<Mfm :text="preview_jelly" />
+							<MkTextarea v-model="preview_jelly"
+								><template #label>MFM</template></MkTextarea
+							>
+						</div>
+					</div>
+				</div>
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._mfm.tada }}</div>
+					<div class="content">
+						<p>{{ i18n.ts._mfm.tadaDescription }}</p>
+						<div class="preview">
+							<Mfm :text="preview_tada" />
+							<MkTextarea v-model="preview_tada"
+								><template #label>MFM</template></MkTextarea
+							>
+						</div>
+					</div>
+				</div>
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._mfm.jump }}</div>
+					<div class="content">
+						<p>{{ i18n.ts._mfm.jumpDescription }}</p>
+						<div class="preview">
+							<Mfm :text="preview_jump" />
+							<MkTextarea v-model="preview_jump"
+								><template #label>MFM</template></MkTextarea
+							>
+						</div>
+					</div>
+				</div>
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._mfm.bounce }}</div>
+					<div class="content">
+						<p>{{ i18n.ts._mfm.bounceDescription }}</p>
+						<div class="preview">
+							<Mfm :text="preview_bounce" />
+							<MkTextarea v-model="preview_bounce"
+								><template #label>MFM</template></MkTextarea
+							>
+						</div>
+					</div>
+				</div>
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._mfm.spin }}</div>
+					<div class="content">
+						<p>{{ i18n.ts._mfm.spinDescription }}</p>
+						<div class="preview">
+							<Mfm :text="preview_spin" />
+							<MkTextarea v-model="preview_spin"
+								><template #label>MFM</template></MkTextarea
+							>
+						</div>
+					</div>
+				</div>
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._mfm.shake }}</div>
+					<div class="content">
+						<p>{{ i18n.ts._mfm.shakeDescription }}</p>
+						<div class="preview">
+							<Mfm :text="preview_shake" />
+							<MkTextarea v-model="preview_shake"
+								><template #label>MFM</template></MkTextarea
+							>
+						</div>
+					</div>
+				</div>
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._mfm.twitch }}</div>
+					<div class="content">
+						<p>{{ i18n.ts._mfm.twitchDescription }}</p>
+						<div class="preview">
+							<Mfm :text="preview_twitch" />
+							<MkTextarea v-model="preview_twitch"
+								><template #label>MFM</template></MkTextarea
+							>
+						</div>
+					</div>
+				</div>
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._mfm.rainbow }}</div>
+					<div class="content">
+						<p>{{ i18n.ts._mfm.rainbowDescription }}</p>
+						<div class="preview">
+							<Mfm :text="preview_rainbow" />
+							<MkTextarea v-model="preview_rainbow"
+								><template #label>MFM</template></MkTextarea
+							>
+						</div>
+					</div>
+				</div>
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._mfm.sparkle }}</div>
+					<div class="content">
+						<p>{{ i18n.ts._mfm.sparkleDescription }}</p>
+						<div class="preview">
+							<Mfm :text="preview_sparkle" />
+							<MkTextarea v-model="preview_sparkle"
+								><span>MFM</span></MkTextarea
+							>
+						</div>
+					</div>
+				</div>
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._mfm.rotate }}</div>
+					<div class="content">
+						<p>{{ i18n.ts._mfm.rotateDescription }}</p>
+						<div class="preview">
+							<Mfm :text="preview_rotate" />
+							<MkTextarea v-model="preview_rotate"
+								><span>MFM</span></MkTextarea
+							>
+						</div>
+					</div>
+				</div>
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._mfm.plain }}</div>
+					<div class="content">
+						<p>{{ i18n.ts._mfm.plainDescription }}</p>
+						<div class="preview">
+							<Mfm :text="preview_plain" />
+							<MkTextarea v-model="preview_plain"
+								><span>MFM</span></MkTextarea
+							>
+						</div>
 					</div>
 				</div>
 			</div>
-			<div class="section _block">
-				<div class="title">{{ i18n.ts._mfm.font }}</div>
-				<div class="content">
-					<p>{{ i18n.ts._mfm.fontDescription }}</p>
-					<div class="preview">
-						<Mfm :text="preview_font"/>
-						<MkTextarea v-model="preview_font"><template #label>MFM</template></MkTextarea>
-					</div>
-				</div>
-			</div>
-			<div class="section _block">
-				<div class="title">{{ i18n.ts._mfm.x2 }}</div>
-				<div class="content">
-					<p>{{ i18n.ts._mfm.x2Description }}</p>
-					<div class="preview">
-						<Mfm :text="preview_x2"/>
-						<MkTextarea v-model="preview_x2"><template #label>MFM</template></MkTextarea>
-					</div>
-				</div>
-			</div>
-			<div class="section _block">
-				<div class="title">{{ i18n.ts._mfm.x3 }}</div>
-				<div class="content">
-					<p>{{ i18n.ts._mfm.x3Description }}</p>
-					<div class="preview">
-						<Mfm :text="preview_x3"/>
-						<MkTextarea v-model="preview_x3"><template #label>MFM</template></MkTextarea>
-					</div>
-				</div>
-			</div>
-			<div class="section _block">
-				<div class="title">{{ i18n.ts._mfm.x4 }}</div>
-				<div class="content">
-					<p>{{ i18n.ts._mfm.x4Description }}</p>
-					<div class="preview">
-						<Mfm :text="preview_x4"/>
-						<MkTextarea v-model="preview_x4"><template #label>MFM</template></MkTextarea>
-					</div>
-				</div>
-			</div>
-			<div class="section _block">
-				<div class="title">{{ i18n.ts._mfm.blur }}</div>
-				<div class="content">
-					<p>{{ i18n.ts._mfm.blurDescription }}</p>
-					<div class="preview">
-						<Mfm :text="preview_blur"/>
-						<MkTextarea v-model="preview_blur"><template #label>MFM</template></MkTextarea>
-					</div>
-				</div>
-			</div>
-			<div class="section _block">
-				<div class="title">{{ i18n.ts._mfm.jelly }}</div>
-				<div class="content">
-					<p>{{ i18n.ts._mfm.jellyDescription }}</p>
-					<div class="preview">
-						<Mfm :text="preview_jelly"/>
-						<MkTextarea v-model="preview_jelly"><template #label>MFM</template></MkTextarea>
-					</div>
-				</div>
-			</div>
-			<div class="section _block">
-				<div class="title">{{ i18n.ts._mfm.tada }}</div>
-				<div class="content">
-					<p>{{ i18n.ts._mfm.tadaDescription }}</p>
-					<div class="preview">
-						<Mfm :text="preview_tada"/>
-						<MkTextarea v-model="preview_tada"><template #label>MFM</template></MkTextarea>
-					</div>
-				</div>
-			</div>
-			<div class="section _block">
-				<div class="title">{{ i18n.ts._mfm.jump }}</div>
-				<div class="content">
-					<p>{{ i18n.ts._mfm.jumpDescription }}</p>
-					<div class="preview">
-						<Mfm :text="preview_jump"/>
-						<MkTextarea v-model="preview_jump"><template #label>MFM</template></MkTextarea>
-					</div>
-				</div>
-			</div>
-			<div class="section _block">
-				<div class="title">{{ i18n.ts._mfm.bounce }}</div>
-				<div class="content">
-					<p>{{ i18n.ts._mfm.bounceDescription }}</p>
-					<div class="preview">
-						<Mfm :text="preview_bounce"/>
-						<MkTextarea v-model="preview_bounce"><template #label>MFM</template></MkTextarea>
-					</div>
-				</div>
-			</div>
-			<div class="section _block">
-				<div class="title">{{ i18n.ts._mfm.spin }}</div>
-				<div class="content">
-					<p>{{ i18n.ts._mfm.spinDescription }}</p>
-					<div class="preview">
-						<Mfm :text="preview_spin"/>
-						<MkTextarea v-model="preview_spin"><template #label>MFM</template></MkTextarea>
-					</div>
-				</div>
-			</div>
-			<div class="section _block">
-				<div class="title">{{ i18n.ts._mfm.shake }}</div>
-				<div class="content">
-					<p>{{ i18n.ts._mfm.shakeDescription }}</p>
-					<div class="preview">
-						<Mfm :text="preview_shake"/>
-						<MkTextarea v-model="preview_shake"><template #label>MFM</template></MkTextarea>
-					</div>
-				</div>
-			</div>
-			<div class="section _block">
-				<div class="title">{{ i18n.ts._mfm.twitch }}</div>
-				<div class="content">
-					<p>{{ i18n.ts._mfm.twitchDescription }}</p>
-					<div class="preview">
-						<Mfm :text="preview_twitch"/>
-						<MkTextarea v-model="preview_twitch"><template #label>MFM</template></MkTextarea>
-					</div>
-				</div>
-			</div>
-			<div class="section _block">
-				<div class="title">{{ i18n.ts._mfm.rainbow }}</div>
-				<div class="content">
-					<p>{{ i18n.ts._mfm.rainbowDescription }}</p>
-					<div class="preview">
-						<Mfm :text="preview_rainbow"/>
-						<MkTextarea v-model="preview_rainbow"><template #label>MFM</template></MkTextarea>
-					</div>
-				</div>
-			</div>
-			<div class="section _block">
-				<div class="title">{{ i18n.ts._mfm.sparkle }}</div>
-				<div class="content">
-					<p>{{ i18n.ts._mfm.sparkleDescription }}</p>
-					<div class="preview">
-						<Mfm :text="preview_sparkle"/>
-						<MkTextarea v-model="preview_sparkle"><span>MFM</span></MkTextarea>
-					</div>
-				</div>
-			</div>
-			<div class="section _block">
-				<div class="title">{{ i18n.ts._mfm.rotate }}</div>
-				<div class="content">
-					<p>{{ i18n.ts._mfm.rotateDescription }}</p>
-					<div class="preview">
-						<Mfm :text="preview_rotate"/>
-						<MkTextarea v-model="preview_rotate"><span>MFM</span></MkTextarea>
-					</div>
-				</div>
-			</div>
-			<div class="section _block">
-				<div class="title">{{ i18n.ts._mfm.plain }}</div>
-				<div class="content">
-					<p>{{ i18n.ts._mfm.plainDescription }}</p>
-					<div class="preview">
-						<Mfm :text="preview_plain"/>
-						<MkTextarea v-model="preview_plain"><span>MFM</span></MkTextarea>
-					</div>
-				</div>
-			</div>
-		</div>
-	</MkSpacer>
-</MkStickyContainer>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { defineComponent } from 'vue';
-import MkTextarea from '@/components/form/textarea.vue';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import { i18n } from '@/i18n';
-import { instance } from '@/instance';
+import { defineComponent } from "vue";
+import MkTextarea from "@/components/form/textarea.vue";
+import { definePageMetadata } from "@/scripts/page-metadata";
+import { i18n } from "@/i18n";
+import { instance } from "@/instance";
 
-let preview_mention = $ref('@example');
-let preview_hashtag = $ref('#test');
+let preview_mention = $ref("@example");
+let preview_hashtag = $ref("#test");
 let preview_link = $ref(`[${i18n.ts._mfm.dummy}](https://example.com)`);
-let preview_emoji = $ref(instance.emojis.length ? `:${instance.emojis[0].name}:` : ':emojiname:');
+let preview_emoji = $ref(
+	instance.emojis.length ? `:${instance.emojis[0].name}:` : ":emojiname:"
+);
 let preview_bold = $ref(`**${i18n.ts._mfm.dummy}**`);
 let preview_small = $ref(`<small>${i18n.ts._mfm.dummy}</small>`);
 let preview_center = $ref(`<center>${i18n.ts._mfm.dummy}</center>`);
 let preview_inlineCode = $ref('`<: "Hello, world!"`');
-let preview_blockCode = $ref('```\n~ (#i, 100) {\n\t<: ? ((i % 15) = 0) "FizzBuzz"\n\t\t.? ((i % 3) = 0) "Fizz"\n\t\t.? ((i % 5) = 0) "Buzz"\n\t\t. i\n}\n```');
-let preview_inlineMath = $ref('\\(x= \\frac{-b\' \\pm \\sqrt{(b\')^2-ac}}{a}\\)');
+let preview_blockCode = $ref(
+	'```\n~ (#i, 100) {\n\t<: ? ((i % 15) = 0) "FizzBuzz"\n\t\t.? ((i % 3) = 0) "Fizz"\n\t\t.? ((i % 5) = 0) "Buzz"\n\t\t. i\n}\n```'
+);
+let preview_inlineMath = $ref("\\(x= \\frac{-b' \\pm \\sqrt{(b')^2-ac}}{a}\\)");
 let preview_quote = $ref(`> ${i18n.ts._mfm.dummy}`);
 let preview_search = $ref(`${i18n.ts._mfm.dummy} 検索`);
-let preview_jelly = $ref('$[jelly 🍮] $[jelly.speed=5s 🍮]');
-let preview_tada = $ref('$[tada 🍮] $[tada.speed=5s 🍮]');
-let preview_jump = $ref('$[jump 🍮] $[jump.speed=5s 🍮]');
-let preview_bounce = $ref('$[bounce 🍮] $[bounce.speed=5s 🍮]');
-let preview_shake = $ref('$[shake 🍮] $[shake.speed=5s 🍮]');
-let preview_twitch = $ref('$[twitch 🍮] $[twitch.speed=5s 🍮]');
-let preview_spin = $ref('$[spin 🍮] $[spin.left 🍮] $[spin.alternate 🍮]\n$[spin.x 🍮] $[spin.x,left 🍮] $[spin.x,alternate 🍮]\n$[spin.y 🍮] $[spin.y,left 🍮] $[spin.y,alternate 🍮]\n\n$[spin.speed=5s 🍮]');
-let preview_flip = $ref(`$[flip ${i18n.ts._mfm.dummy}]\n$[flip.v ${i18n.ts._mfm.dummy}]\n$[flip.h,v ${i18n.ts._mfm.dummy}]`);
-let preview_font = $ref(`$[font.serif ${i18n.ts._mfm.dummy}]\n$[font.monospace ${i18n.ts._mfm.dummy}]\n$[font.cursive ${i18n.ts._mfm.dummy}]\n$[font.fantasy ${i18n.ts._mfm.dummy}]`);
-let preview_x2 = $ref('$[x2 🍮]');
-let preview_x3 = $ref('$[x3 🍮]');
-let preview_x4 = $ref('$[x4 🍮]');
+let preview_jelly = $ref("$[jelly 🍮] $[jelly.speed=5s 🍮]");
+let preview_tada = $ref("$[tada 🍮] $[tada.speed=5s 🍮]");
+let preview_jump = $ref("$[jump 🍮] $[jump.speed=5s 🍮]");
+let preview_bounce = $ref("$[bounce 🍮] $[bounce.speed=5s 🍮]");
+let preview_shake = $ref("$[shake 🍮] $[shake.speed=5s 🍮]");
+let preview_twitch = $ref("$[twitch 🍮] $[twitch.speed=5s 🍮]");
+let preview_spin = $ref(
+	"$[spin 🍮] $[spin.left 🍮] $[spin.alternate 🍮]\n$[spin.x 🍮] $[spin.x,left 🍮] $[spin.x,alternate 🍮]\n$[spin.y 🍮] $[spin.y,left 🍮] $[spin.y,alternate 🍮]\n\n$[spin.speed=5s 🍮]"
+);
+let preview_flip = $ref(
+	`$[flip ${i18n.ts._mfm.dummy}]\n$[flip.v ${i18n.ts._mfm.dummy}]\n$[flip.h,v ${i18n.ts._mfm.dummy}]`
+);
+let preview_font = $ref(
+	`$[font.serif ${i18n.ts._mfm.dummy}]\n$[font.monospace ${i18n.ts._mfm.dummy}]\n$[font.cursive ${i18n.ts._mfm.dummy}]\n$[font.fantasy ${i18n.ts._mfm.dummy}]`
+);
+let preview_x2 = $ref("$[x2 🍮]");
+let preview_x3 = $ref("$[x3 🍮]");
+let preview_x4 = $ref("$[x4 🍮]");
 let preview_blur = $ref(`$[blur ${i18n.ts._mfm.dummy}]`);
-let preview_rainbow = $ref('$[rainbow 🍮] $[rainbow.speed=5s 🍮]');
-let preview_sparkle = $ref('$[sparkle 🍮]');
-let preview_rotate = $ref('$[rotate 🍮]');
-let preview_plain = $ref('<plain>**bold** @mention #hashtag `code` $[x2 🍮]</plain>');
+let preview_rainbow = $ref("$[rainbow 🍮] $[rainbow.speed=5s 🍮]");
+let preview_sparkle = $ref("$[sparkle 🍮]");
+let preview_rotate = $ref("$[rotate 🍮]");
+let preview_plain = $ref(
+	"<plain>**bold** @mention #hashtag `code` $[x2 🍮]</plain>"
+);
 
 definePageMetadata({
 	title: i18n.ts._mfm.cheatSheet,
-	icon: 'ph-question ph-bold ph-lg',
+	icon: "ph-question ph-bold ph-lg",
 });
 </script>
 
diff --git a/packages/client/src/pages/miauth.vue b/packages/client/src/pages/miauth.vue
index a71c7b9a57..bf4c2542fb 100644
--- a/packages/client/src/pages/miauth.vue
+++ b/packages/client/src/pages/miauth.vue
@@ -1,51 +1,63 @@
 <template>
-<MkSpacer :content-max="800">
-	<div v-if="$i">
-		<div v-if="state == 'waiting'" class="waiting _section">
-			<div class="_content">
-				<MkLoading/>
+	<MkSpacer :content-max="800">
+		<div v-if="$i">
+			<div v-if="state == 'waiting'" class="waiting _section">
+				<div class="_content">
+					<MkLoading />
+				</div>
+			</div>
+			<div v-if="state == 'denied'" class="denied _section">
+				<div class="_content">
+					<p>{{ i18n.ts._auth.denied }}</p>
+				</div>
+			</div>
+			<div v-else-if="state == 'accepted'" class="accepted _section">
+				<div class="_content">
+					<p v-if="callback">
+						{{ i18n.ts._auth.callback }}<MkEllipsis />
+					</p>
+					<p v-else>{{ i18n.ts._auth.pleaseGoBack }}</p>
+				</div>
+			</div>
+			<div v-else class="_section">
+				<div v-if="name" class="_title">
+					{{ i18n.t("_auth.shareAccess", { name: name }) }}
+				</div>
+				<div v-else class="_title">
+					{{ i18n.ts._auth.shareAccessAsk }}
+				</div>
+				<div class="_content">
+					<p>{{ i18n.ts._auth.permissionAsk }}</p>
+					<ul>
+						<li v-for="p in _permissions" :key="p">
+							{{ i18n.t(`_permissions.${p}`) }}
+						</li>
+					</ul>
+				</div>
+				<div class="_footer">
+					<MkButton inline @click="deny">{{
+						i18n.ts.cancel
+					}}</MkButton>
+					<MkButton inline primary @click="accept">{{
+						i18n.ts.accept
+					}}</MkButton>
+				</div>
 			</div>
 		</div>
-		<div v-if="state == 'denied'" class="denied _section">
-			<div class="_content">
-				<p>{{ i18n.ts._auth.denied }}</p>
-			</div>
+		<div v-else class="signin">
+			<MkSignin @login="onLogin" />
 		</div>
-		<div v-else-if="state == 'accepted'" class="accepted _section">
-			<div class="_content">
-				<p v-if="callback">{{ i18n.ts._auth.callback }}<MkEllipsis/></p>
-				<p v-else>{{ i18n.ts._auth.pleaseGoBack }}</p>
-			</div>
-		</div>
-		<div v-else class="_section">
-			<div v-if="name" class="_title">{{ i18n.t('_auth.shareAccess', { name: name }) }}</div>
-			<div v-else class="_title">{{ i18n.ts._auth.shareAccessAsk }}</div>
-			<div class="_content">
-				<p>{{ i18n.ts._auth.permissionAsk }}</p>
-				<ul>
-					<li v-for="p in _permissions" :key="p">{{ i18n.t(`_permissions.${p}`) }}</li>
-				</ul>
-			</div>
-			<div class="_footer">
-				<MkButton inline @click="deny">{{ i18n.ts.cancel }}</MkButton>
-				<MkButton inline primary @click="accept">{{ i18n.ts.accept }}</MkButton>
-			</div>
-		</div>
-	</div>
-	<div v-else class="signin">
-		<MkSignin @login="onLogin"/>
-	</div>
-</MkSpacer>
+	</MkSpacer>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import MkSignin from '@/components/MkSignin.vue';
-import MkButton from '@/components/MkButton.vue';
-import * as os from '@/os';
-import { $i, login } from '@/account';
-import { appendQuery, query } from '@/scripts/url';
-import { i18n } from '@/i18n';
+import {} from "vue";
+import MkSignin from "@/components/MkSignin.vue";
+import MkButton from "@/components/MkButton.vue";
+import * as os from "@/os";
+import { $i, login } from "@/account";
+import { appendQuery, query } from "@/scripts/url";
+import { i18n } from "@/i18n";
 
 const props = defineProps<{
 	session: string;
@@ -55,31 +67,39 @@ const props = defineProps<{
 	permission: string; // コンマ区切り
 }>();
 
-const _permissions = props.permission.split(',');
+const _permissions = props.permission.split(",");
 
 let state = $ref<string | null>(null);
 
 async function accept(): Promise<void> {
-	state = 'waiting';
-	await os.api('miauth/gen-token', {
+	state = "waiting";
+	await os.api("miauth/gen-token", {
 		session: props.session,
 		name: props.name,
 		iconUrl: props.icon,
 		permission: _permissions,
 	});
 
-	state = 'accepted';
+	state = "accepted";
 	if (props.callback) {
 		const cbUrl = new URL(props.callback);
-		if (['javascript:', 'file:', 'data:', 'mailto:', 'tel:'].includes(cbUrl.protocol)) throw new Error('invalid url');
-		location.href = appendQuery(props.callback, query({
-			session: props.session,
-		}));
+		if (
+			["javascript:", "file:", "data:", "mailto:", "tel:"].includes(
+				cbUrl.protocol
+			)
+		)
+			throw new Error("invalid url");
+		location.href = appendQuery(
+			props.callback,
+			query({
+				session: props.session,
+			})
+		);
 	}
 }
 
 function deny(): void {
-	state = 'denied';
+	state = "denied";
 }
 
 function onLogin(res): void {
@@ -87,6 +107,4 @@ function onLogin(res): void {
 }
 </script>
 
-<style lang="scss" scoped>
-
-</style>
+<style lang="scss" scoped></style>
diff --git a/packages/client/src/pages/my-antennas/create.vue b/packages/client/src/pages/my-antennas/create.vue
index 121c91300d..c0d838629e 100644
--- a/packages/client/src/pages/my-antennas/create.vue
+++ b/packages/client/src/pages/my-antennas/create.vue
@@ -1,20 +1,20 @@
 <template>
-<div class="geegznzt">
-	<XAntenna :antenna="draft" @created="onAntennaCreated"/>
-</div>
+	<div class="geegznzt">
+		<XAntenna :antenna="draft" @created="onAntennaCreated" />
+	</div>
 </template>
 
 <script lang="ts" setup>
-import XAntenna from './editor.vue';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import { useRouter } from '@/router';
+import XAntenna from "./editor.vue";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
+import { useRouter } from "@/router";
 
 const router = useRouter();
 
 let draft = $ref({
-	name: '',
-	src: 'all',
+	name: "",
+	src: "all",
 	userListId: null,
 	userGroupId: null,
 	users: [],
@@ -28,15 +28,13 @@ let draft = $ref({
 });
 
 function onAntennaCreated() {
-	router.push('/my/antennas');
+	router.push("/my/antennas");
 }
 
 definePageMetadata({
 	title: i18n.ts.manageAntennas,
-	icon: 'ph-flying-saucer ph-bold ph-lg',
+	icon: "ph-flying-saucer ph-bold ph-lg",
 });
 </script>
 
-<style lang="scss" scoped>
-
-</style>
+<style lang="scss" scoped></style>
diff --git a/packages/client/src/pages/my-antennas/edit.vue b/packages/client/src/pages/my-antennas/edit.vue
index 7ba6c97762..97c433f905 100644
--- a/packages/client/src/pages/my-antennas/edit.vue
+++ b/packages/client/src/pages/my-antennas/edit.vue
@@ -1,32 +1,38 @@
 <template>
-<div class="">
-	<XAntenna v-if="antenna" :antenna="antenna" @updated="onAntennaUpdated"/>
-</div>
+	<div class="">
+		<XAntenna
+			v-if="antenna"
+			:antenna="antenna"
+			@updated="onAntennaUpdated"
+		/>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { inject, watch } from 'vue';
-import XAntenna from './editor.vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { useRouter } from '@/router';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import { inject, watch } from "vue";
+import XAntenna from "./editor.vue";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
+import { useRouter } from "@/router";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
 const router = useRouter();
 
 let antenna: any = $ref(null);
 
 const props = defineProps<{
-	antennaId: string
+	antennaId: string;
 }>();
 
 function onAntennaUpdated() {
-	router.push('/my/antennas');
+	router.push("/my/antennas");
 }
 
-os.api('antennas/show', { antennaId: props.antennaId }).then((antennaResponse) => {
-	antenna = antennaResponse;
-});
+os.api("antennas/show", { antennaId: props.antennaId }).then(
+	(antennaResponse) => {
+		antenna = antennaResponse;
+	}
+);
 
 const headerActions = $computed(() => []);
 
@@ -34,10 +40,8 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.manageAntennas,
-	icon: 'ph-flying-saucer ph-bold ph-lg',
+	icon: "ph-flying-saucer ph-bold ph-lg",
 });
 </script>
 
-<style lang="scss" scoped>
-
-</style>
+<style lang="scss" scoped></style>
diff --git a/packages/client/src/pages/my-antennas/editor.vue b/packages/client/src/pages/my-antennas/editor.vue
index 55249f8798..27889b4d95 100644
--- a/packages/client/src/pages/my-antennas/editor.vue
+++ b/packages/client/src/pages/my-antennas/editor.vue
@@ -1,83 +1,151 @@
 <template>
-<div class="shaynizk">
-	<div class="form">
-		<MkInput v-model="name" class="_formBlock">
-			<template #label>{{ i18n.ts.name }}</template>
-		</MkInput>
-		<MkSelect v-model="src" class="_formBlock">
-			<template #label>{{ i18n.ts.antennaSource }}</template>
-			<option value="all">{{ i18n.ts._antennaSources.all }}</option>
-			<!--<option value="home">{{ i18n.ts._antennaSources.homeTimeline }}</option>-->
-			<option value="users">{{ i18n.ts._antennaSources.users }}</option>
-			<!--<option value="list">{{ i18n.ts._antennaSources.userList }}</option>-->
-			<!--<option value="group">{{ i18n.ts._antennaSources.userGroup }}</option>-->
-			<option value="instances">{{ i18n.ts._antennaSources.instances }}</option>
-		</MkSelect>
-		<MkSelect v-if="src === 'list'" v-model="userListId" class="_formBlock">
-			<template #label>{{ i18n.ts.userList }}</template>
-			<option v-for="list in userLists" :key="list.id" :value="list.id">{{ list.name }}</option>
-		</MkSelect>
-		<MkSelect v-else-if="src === 'group'" v-model="userGroupId" class="_formBlock">
-			<template #label>{{ i18n.ts.userGroup }}</template>
-			<option v-for="group in userGroups" :key="group.id" :value="group.id">{{ group.name }}</option>
-		</MkSelect>
-		<MkTextarea v-else-if="src === 'users'" v-model="users" class="_formBlock">
-			<template #label>{{ i18n.ts.users }}</template>
-			<template #caption>{{ i18n.ts.antennaUsersDescription }} <button class="_textButton" @click="addUser">{{ i18n.ts.addUser }}</button></template>
-		</MkTextarea>
-		<MkTextarea v-else-if="src === 'instances'" v-model="instances" class="_formBlock">
-			<template #label>{{ i18n.ts.instances }}</template>
-			<template #caption>{{ i18n.ts.antennaInstancesDescription }} <button class="_textButton" @click="addInstance">{{ i18n.ts.addInstance }}</button></template>
-		</MkTextarea>
-		<MkSwitch v-model="withReplies" class="_formBlock">{{ i18n.ts.withReplies }}</MkSwitch>
-		<MkTextarea v-model="keywords" class="_formBlock">
-			<template #label>{{ i18n.ts.antennaKeywords }}</template>
-			<template #caption>{{ i18n.ts.antennaKeywordsDescription }}</template>
-		</MkTextarea>
-		<MkTextarea v-model="excludeKeywords" class="_formBlock">
-			<template #label>{{ i18n.ts.antennaExcludeKeywords }}</template>
-			<template #caption>{{ i18n.ts.antennaKeywordsDescription }}</template>
-		</MkTextarea>
-		<MkSwitch v-model="caseSensitive" class="_formBlock">{{ i18n.ts.caseSensitive }}</MkSwitch>
-		<MkSwitch v-model="withFile" class="_formBlock">{{ i18n.ts.withFileAntenna }}</MkSwitch>
-		<MkSwitch v-model="notify" class="_formBlock">{{ i18n.ts.notifyAntenna }}</MkSwitch>
+	<div class="shaynizk">
+		<div class="form">
+			<MkInput v-model="name" class="_formBlock">
+				<template #label>{{ i18n.ts.name }}</template>
+			</MkInput>
+			<MkSelect v-model="src" class="_formBlock">
+				<template #label>{{ i18n.ts.antennaSource }}</template>
+				<option value="all">{{ i18n.ts._antennaSources.all }}</option>
+				<!--<option value="home">{{ i18n.ts._antennaSources.homeTimeline }}</option>-->
+				<option value="users">
+					{{ i18n.ts._antennaSources.users }}
+				</option>
+				<!--<option value="list">{{ i18n.ts._antennaSources.userList }}</option>-->
+				<!--<option value="group">{{ i18n.ts._antennaSources.userGroup }}</option>-->
+				<option value="instances">
+					{{ i18n.ts._antennaSources.instances }}
+				</option>
+			</MkSelect>
+			<MkSelect
+				v-if="src === 'list'"
+				v-model="userListId"
+				class="_formBlock"
+			>
+				<template #label>{{ i18n.ts.userList }}</template>
+				<option
+					v-for="list in userLists"
+					:key="list.id"
+					:value="list.id"
+				>
+					{{ list.name }}
+				</option>
+			</MkSelect>
+			<MkSelect
+				v-else-if="src === 'group'"
+				v-model="userGroupId"
+				class="_formBlock"
+			>
+				<template #label>{{ i18n.ts.userGroup }}</template>
+				<option
+					v-for="group in userGroups"
+					:key="group.id"
+					:value="group.id"
+				>
+					{{ group.name }}
+				</option>
+			</MkSelect>
+			<MkTextarea
+				v-else-if="src === 'users'"
+				v-model="users"
+				class="_formBlock"
+			>
+				<template #label>{{ i18n.ts.users }}</template>
+				<template #caption
+					>{{ i18n.ts.antennaUsersDescription }}
+					<button class="_textButton" @click="addUser">
+						{{ i18n.ts.addUser }}
+					</button></template
+				>
+			</MkTextarea>
+			<MkTextarea
+				v-else-if="src === 'instances'"
+				v-model="instances"
+				class="_formBlock"
+			>
+				<template #label>{{ i18n.ts.instances }}</template>
+				<template #caption
+					>{{ i18n.ts.antennaInstancesDescription }}
+					<button class="_textButton" @click="addInstance">
+						{{ i18n.ts.addInstance }}
+					</button></template
+				>
+			</MkTextarea>
+			<MkSwitch v-model="withReplies" class="_formBlock">{{
+				i18n.ts.withReplies
+			}}</MkSwitch>
+			<MkTextarea v-model="keywords" class="_formBlock">
+				<template #label>{{ i18n.ts.antennaKeywords }}</template>
+				<template #caption>{{
+					i18n.ts.antennaKeywordsDescription
+				}}</template>
+			</MkTextarea>
+			<MkTextarea v-model="excludeKeywords" class="_formBlock">
+				<template #label>{{ i18n.ts.antennaExcludeKeywords }}</template>
+				<template #caption>{{
+					i18n.ts.antennaKeywordsDescription
+				}}</template>
+			</MkTextarea>
+			<MkSwitch v-model="caseSensitive" class="_formBlock">{{
+				i18n.ts.caseSensitive
+			}}</MkSwitch>
+			<MkSwitch v-model="withFile" class="_formBlock">{{
+				i18n.ts.withFileAntenna
+			}}</MkSwitch>
+			<MkSwitch v-model="notify" class="_formBlock">{{
+				i18n.ts.notifyAntenna
+			}}</MkSwitch>
+		</div>
+		<div class="actions">
+			<MkButton inline primary @click="saveAntenna()"
+				><i class="ph-floppy-disk-back ph-bold ph-lg"></i>
+				{{ i18n.ts.save }}</MkButton
+			>
+			<MkButton
+				v-if="antenna.id != null"
+				inline
+				danger
+				@click="deleteAntenna()"
+				><i class="ph-trash ph-bold ph-lg"></i>
+				{{ i18n.ts.delete }}</MkButton
+			>
+		</div>
 	</div>
-	<div class="actions">
-		<MkButton inline primary @click="saveAntenna()"><i class="ph-floppy-disk-back ph-bold ph-lg"></i> {{ i18n.ts.save }}</MkButton>
-		<MkButton v-if="antenna.id != null" inline danger @click="deleteAntenna()"><i class="ph-trash ph-bold ph-lg"></i> {{ i18n.ts.delete }}</MkButton>
-	</div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { watch } from 'vue';
-import * as Acct from 'calckey-js/built/acct';
-import MkButton from '@/components/MkButton.vue';
-import MkInput from '@/components/form/input.vue';
-import MkTextarea from '@/components/form/textarea.vue';
-import MkSelect from '@/components/form/select.vue';
-import MkSwitch from '@/components/form/switch.vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
+import { watch } from "vue";
+import * as Acct from "calckey-js/built/acct";
+import MkButton from "@/components/MkButton.vue";
+import MkInput from "@/components/form/input.vue";
+import MkTextarea from "@/components/form/textarea.vue";
+import MkSelect from "@/components/form/select.vue";
+import MkSwitch from "@/components/form/switch.vue";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
 
 const props = defineProps<{
-	antenna: any
+	antenna: any;
 }>();
 
 const emit = defineEmits<{
-	(ev: 'created'): void,
-	(ev: 'updated'): void,
-	(ev: 'deleted'): void,
+	(ev: "created"): void;
+	(ev: "updated"): void;
+	(ev: "deleted"): void;
 }>();
 
 let name: string = $ref(props.antenna.name);
 let src: string = $ref(props.antenna.src);
 let userListId: any = $ref(props.antenna.userListId);
 let userGroupId: any = $ref(props.antenna.userGroupId);
-let users: string = $ref(props.antenna.users.join('\n'));
-let instances: string = $ref(props.antenna.instances.join('\n'));
-let keywords: string = $ref(props.antenna.keywords.map(x => x.join(' ')).join('\n'));
-let excludeKeywords: string = $ref(props.antenna.excludeKeywords.map(x => x.join(' ')).join('\n'));
+let users: string = $ref(props.antenna.users.join("\n"));
+let instances: string = $ref(props.antenna.instances.join("\n"));
+let keywords: string = $ref(
+	props.antenna.keywords.map((x) => x.join(" ")).join("\n")
+);
+let excludeKeywords: string = $ref(
+	props.antenna.excludeKeywords.map((x) => x.join(" ")).join("\n")
+);
 let caseSensitive: boolean = $ref(props.antenna.caseSensitive);
 let withReplies: boolean = $ref(props.antenna.withReplies);
 let withFile: boolean = $ref(props.antenna.withFile);
@@ -85,18 +153,21 @@ let notify: boolean = $ref(props.antenna.notify);
 let userLists: any = $ref(null);
 let userGroups: any = $ref(null);
 
-watch(() => src, async () => {
-	if (src === 'list' && userLists === null) {
-		userLists = await os.api('users/lists/list');
-	}
+watch(
+	() => src,
+	async () => {
+		if (src === "list" && userLists === null) {
+			userLists = await os.api("users/lists/list");
+		}
 
-	if (src === 'group' && userGroups === null) {
-		const groups1 = await os.api('users/groups/owned');
-		const groups2 = await os.api('users/groups/joined');
+		if (src === "group" && userGroups === null) {
+			const groups1 = await os.api("users/groups/owned");
+			const groups2 = await os.api("users/groups/joined");
 
-		userGroups = [...groups1, ...groups2];
+			userGroups = [...groups1, ...groups2];
+		}
 	}
-});
+);
 
 async function saveAntenna() {
 	const antennaData = {
@@ -108,39 +179,51 @@ async function saveAntenna() {
 		withFile,
 		notify,
 		caseSensitive,
-		users: users.trim().split('\n').map(x => x.trim()),
-		instances: instances.trim().split('\n').map(x => x.trim()),
-		keywords: keywords.trim().split('\n').map(x => x.trim().split(' ')),
-		excludeKeywords: excludeKeywords.trim().split('\n').map(x => x.trim().split(' ')),
+		users: users
+			.trim()
+			.split("\n")
+			.map((x) => x.trim()),
+		instances: instances
+			.trim()
+			.split("\n")
+			.map((x) => x.trim()),
+		keywords: keywords
+			.trim()
+			.split("\n")
+			.map((x) => x.trim().split(" ")),
+		excludeKeywords: excludeKeywords
+			.trim()
+			.split("\n")
+			.map((x) => x.trim().split(" ")),
 	};
 
 	if (props.antenna.id == null) {
-		await os.apiWithDialog('antennas/create', antennaData);
-		emit('created');
+		await os.apiWithDialog("antennas/create", antennaData);
+		emit("created");
 	} else {
-		antennaData['antennaId'] = props.antenna.id;
-		await os.apiWithDialog('antennas/update', antennaData);
-		emit('updated');
+		antennaData["antennaId"] = props.antenna.id;
+		await os.apiWithDialog("antennas/update", antennaData);
+		emit("updated");
 	}
 }
 
 async function deleteAntenna() {
 	const { canceled } = await os.confirm({
-		type: 'warning',
-		text: i18n.t('removeAreYouSure', { x: props.antenna.name }),
+		type: "warning",
+		text: i18n.t("removeAreYouSure", { x: props.antenna.name }),
 	});
 	if (canceled) return;
 
-	await os.api('antennas/delete', {
+	await os.api("antennas/delete", {
 		antennaId: props.antenna.id,
 	});
 
 	os.success();
-	emit('deleted');
+	emit("deleted");
 }
 
 function addUser() {
-	os.selectUser().then(user => {
+	os.selectUser().then((user) => {
 		users = users.trim();
 		users += `\n@${Acct.toString(user as any)}`;
 		users = users.trim();
@@ -148,9 +231,9 @@ function addUser() {
 }
 
 function addInstance() {
-	os.selectInstance().then(instance => {
+	os.selectInstance().then((instance) => {
 		instances = instances.trim();
-		instances += '\n' + instance.host;
+		instances += "\n" + instance.host;
 		instances = instances.trim();
 	});
 }
diff --git a/packages/client/src/pages/my-antennas/index.vue b/packages/client/src/pages/my-antennas/index.vue
index 8339f2bcc6..cc3262a797 100644
--- a/packages/client/src/pages/my-antennas/index.vue
+++ b/packages/client/src/pages/my-antennas/index.vue
@@ -1,36 +1,66 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs" :display-back-button="true"/></template>
-	<MkSpacer :content-max="700">
-		<div class="ieepwinx">
-			<MkButton :link="true" to="/my/antennas/create" primary class="add"><i class="ph-plus ph-bold ph-lg"></i> {{ i18n.ts.add }}</MkButton>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader
+				:actions="headerActions"
+				:tabs="headerTabs"
+				:display-back-button="true"
+		/></template>
+		<MkSpacer :content-max="700">
+			<div class="ieepwinx">
+				<MkButton
+					:link="true"
+					to="/my/antennas/create"
+					primary
+					class="add"
+					><i class="ph-plus ph-bold ph-lg"></i>
+					{{ i18n.ts.add }}</MkButton
+				>
 
-			<div class="">
-				<MkPagination v-slot="{items}" ref="list" :pagination="pagination">
-					<div v-for="antenna in items" :key="antenna.id">
-						<MkA class="uopelskx" :link="true" :to="`/timeline/antenna/${antenna.id}`">
-							<i class="ph-flying-saucer ph-bold ph-lg"></i><i :class="`${antenna.hasUnreadNote ? 'ph-circle ph-fill' : 'ph-check'} ph-xs notify-icon`"></i>
-						</MkA>
-						<MkA class="ljoevbzj" :to="`/my/antennas/${antenna.id}`">
-							<div class="name">{{ antenna.name }}</div>
-						</MkA>
-					</div>
-				</MkPagination>
+				<div class="">
+					<MkPagination
+						v-slot="{ items }"
+						ref="list"
+						:pagination="pagination"
+					>
+						<div v-for="antenna in items" :key="antenna.id">
+							<MkA
+								class="uopelskx"
+								:link="true"
+								:to="`/timeline/antenna/${antenna.id}`"
+							>
+								<i class="ph-flying-saucer ph-bold ph-lg"></i
+								><i
+									:class="`${
+										antenna.hasUnreadNote
+											? 'ph-circle ph-fill'
+											: 'ph-check'
+									} ph-xs notify-icon`"
+								></i>
+							</MkA>
+							<MkA
+								class="ljoevbzj"
+								:to="`/my/antennas/${antenna.id}`"
+							>
+								<div class="name">{{ antenna.name }}</div>
+							</MkA>
+						</div>
+					</MkPagination>
+				</div>
 			</div>
-		</div>
-	</MkSpacer>
-</MkStickyContainer>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { onActivated, onDeactivated, ref } 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 { onActivated, onDeactivated, ref } from "vue";
+import MkPagination from "@/components/MkPagination.vue";
+import MkButton from "@/components/MkButton.vue";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
 const pagination = {
-	endpoint: 'antennas/list' as const,
+	endpoint: "antennas/list" as const,
 	limit: 250,
 };
 
@@ -38,7 +68,7 @@ const headerActions = $computed(() => []);
 
 const headerTabs = $computed(() => []);
 
-const list = ref<typeof MkPagination|null>(null);
+const list = ref<typeof MkPagination | null>(null);
 
 let isCached: boolean = false;
 let refreshTimer: number | null = null;
@@ -49,7 +79,7 @@ const refresh = () => {
 	}
 
 	isCached = true;
-	refreshTimer = setTimeout(refresh, 15000)
+	refreshTimer = setTimeout(refresh, 15000);
 };
 
 onActivated(() => {
@@ -65,13 +95,12 @@ onDeactivated(() => {
 
 definePageMetadata({
 	title: i18n.ts.manageAntennas,
-	icon: 'ph-flying-saucer ph-bold ph-lg',
+	icon: "ph-flying-saucer ph-bold ph-lg",
 });
 </script>
 
 <style lang="scss" scoped>
 .ieepwinx {
-
 	> .add {
 		margin: 0 auto 16px auto;
 	}
@@ -108,9 +137,9 @@ definePageMetadata({
 	}
 
 	.notify-icon {
-    position: relative;
-    top: -1em;
-    left: -0.5em;
+		position: relative;
+		top: -1em;
+		left: -0.5em;
 
 		&.ph-circle ph-fill {
 			color: var(--indicator);
diff --git a/packages/client/src/pages/my-clips/index.vue b/packages/client/src/pages/my-clips/index.vue
index 4fa6d6bdc5..1c950a3f11 100644
--- a/packages/client/src/pages/my-clips/index.vue
+++ b/packages/client/src/pages/my-clips/index.vue
@@ -1,31 +1,51 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs" :display-back-button="true"/></template>
-	<MkSpacer :content-max="700">
-		<div class="qtcaoidl">
-			<MkButton primary class="add" @click="create"><i class="ph-plus ph-bold ph-lg"></i> {{ i18n.ts.add }}</MkButton>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader
+				:actions="headerActions"
+				:tabs="headerTabs"
+				:display-back-button="true"
+		/></template>
+		<MkSpacer :content-max="700">
+			<div class="qtcaoidl">
+				<MkButton primary class="add" @click="create"
+					><i class="ph-plus ph-bold ph-lg"></i>
+					{{ i18n.ts.add }}</MkButton
+				>
 
-			<MkPagination v-slot="{items}" ref="pagingComponent" :pagination="pagination" class="list">
-				<MkA v-for="item in items" :key="item.id" :to="`/clips/${item.id}`" class="item _panel _gap">
-					<b>{{ item.name }}</b>
-					<div v-if="item.description" class="description">{{ item.description }}</div>
-				</MkA>
-			</MkPagination>
-		</div>
-	</MkSpacer>
-</MkStickyContainer>
+				<MkPagination
+					v-slot="{ items }"
+					ref="pagingComponent"
+					:pagination="pagination"
+					class="list"
+				>
+					<MkA
+						v-for="item in items"
+						:key="item.id"
+						:to="`/clips/${item.id}`"
+						class="item _panel _gap"
+					>
+						<b>{{ item.name }}</b>
+						<div v-if="item.description" class="description">
+							{{ item.description }}
+						</div>
+					</MkA>
+				</MkPagination>
+			</div>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import MkPagination from '@/components/MkPagination.vue';
-import MkButton from '@/components/MkButton.vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import {} from "vue";
+import MkPagination from "@/components/MkPagination.vue";
+import MkButton from "@/components/MkButton.vue";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
 const pagination = {
-	endpoint: 'clips/list' as const,
+	endpoint: "clips/list" as const,
 	limit: 10,
 };
 
@@ -34,24 +54,24 @@ const pagingComponent = $ref<InstanceType<typeof MkPagination>>();
 async function create() {
 	const { canceled, result } = await os.form(i18n.ts.createNewClip, {
 		name: {
-			type: 'string',
+			type: "string",
 			label: i18n.ts.name,
 		},
 		description: {
-			type: 'string',
+			type: "string",
 			required: false,
 			multiline: true,
 			label: i18n.ts.description,
 		},
 		isPublic: {
-			type: 'boolean',
+			type: "boolean",
 			label: i18n.ts.public,
 			default: false,
 		},
 	});
 	if (canceled) return;
 
-	os.apiWithDialog('clips/create', result);
+	os.apiWithDialog("clips/create", result);
 
 	pagingComponent.reload();
 }
@@ -70,9 +90,9 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.clip,
-	icon: 'ph-paperclip ph-bold ph-lg',
+	icon: "ph-paperclip ph-bold ph-lg",
 	action: {
-		icon: 'ph-plus ph-bold ph-lg',
+		icon: "ph-plus ph-bold ph-lg",
 		handler: create,
 	},
 });
diff --git a/packages/client/src/pages/my-groups/group.vue b/packages/client/src/pages/my-groups/group.vue
index 1ea23847db..192572db1e 100644
--- a/packages/client/src/pages/my-groups/group.vue
+++ b/packages/client/src/pages/my-groups/group.vue
@@ -1,27 +1,38 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions"/></template>
-	<div class="mk-group-page">
-		<div class="_section members _gap">
-			<div class="_content">
-				<div class="users">
-					<div v-for="user in users" :key="user.id" class="user _panel">
-						<MkAvatar :user="user" class="avatar" :show-indicator="true" />
-						<div class="body">
-							<MkUserName :user="user" class="name" />
-							<MkAcct :user="user" class="acct" />
-						</div>
-						<div class="action">
-							<button class="_button" @click="removeUser(user)">
-								<i class="ph-x ph-bold ph-lg"></i>
-							</button>
+	<MkStickyContainer>
+		<template #header><MkPageHeader :actions="headerActions" /></template>
+		<div class="mk-group-page">
+			<div class="_section members _gap">
+				<div class="_content">
+					<div class="users">
+						<div
+							v-for="user in users"
+							:key="user.id"
+							class="user _panel"
+						>
+							<MkAvatar
+								:user="user"
+								class="avatar"
+								:show-indicator="true"
+							/>
+							<div class="body">
+								<MkUserName :user="user" class="name" />
+								<MkAcct :user="user" class="acct" />
+							</div>
+							<div class="action">
+								<button
+									class="_button"
+									@click="removeUser(user)"
+								>
+									<i class="ph-x ph-bold ph-lg"></i>
+								</button>
+							</div>
 						</div>
 					</div>
 				</div>
 			</div>
 		</div>
-	</div>
-</MkStickyContainer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
@@ -124,29 +135,31 @@ definePageMetadata(
 	computed(() => ({
 		title: i18n.ts.members,
 		icon: "ph-users-three ph-bold ph-lg",
-	})),
+	}))
 );
 
 const headerActions = $computed(() => [
 	{
-		icon: 'ph-plus ph-bold ph-lg',
+		icon: "ph-plus ph-bold ph-lg",
 		text: i18n.ts.invite,
 		handler: invite,
-	}, {
-		icon: 'ph-cursor-text ph-bold ph-lg',
+	},
+	{
+		icon: "ph-cursor-text ph-bold ph-lg",
 		text: i18n.ts.rename,
 		handler: renameGroup,
-	}, {
-		icon: 'ph-arrows-left-right ph-bold ph-lg',
+	},
+	{
+		icon: "ph-arrows-left-right ph-bold ph-lg",
 		text: i18n.ts.transfer,
 		handler: transfer,
-	}, {
-		icon: 'ph-trash ph-bold ph-lg',
+	},
+	{
+		icon: "ph-trash ph-bold ph-lg",
 		text: i18n.ts.delete,
 		handler: deleteGroup,
 	},
 ]);
-
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/pages/my-groups/index.vue b/packages/client/src/pages/my-groups/index.vue
index 6ecb70bb66..4c411e71a5 100644
--- a/packages/client/src/pages/my-groups/index.vue
+++ b/packages/client/src/pages/my-groups/index.vue
@@ -1,57 +1,79 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :display-back-button="true"/></template>
-	<MkSpacer :content-max="800" :margin-min="20">
-		<MkButton primary style="margin: 0 auto var(--margin) auto;" @click="create"><i class="ph-plus ph-bold ph-lg"></i> {{ i18n.ts.createGroup }}</MkButton>
-		<MkPagination v-slot="{items}" ref="owned" :pagination="ownedPagination">
-			<div v-for="group in items" :key="group.id" class="_card">
-				<div class="_title"><MkA :to="`/my/groups/${ group.id }`" class="_link">{{ group.name }}</MkA></div>
-				<div class="_content">
-					<MkAvatars :user-ids="group.userIds"/>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader :actions="headerActions" :display-back-button="true"
+		/></template>
+		<MkSpacer :content-max="800" :margin-min="20">
+			<MkButton
+				primary
+				style="margin: 0 auto var(--margin) auto"
+				@click="create"
+				><i class="ph-plus ph-bold ph-lg"></i>
+				{{ i18n.ts.createGroup }}</MkButton
+			>
+			<MkPagination
+				v-slot="{ items }"
+				ref="owned"
+				:pagination="ownedPagination"
+			>
+				<div v-for="group in items" :key="group.id" class="_card">
+					<div class="_title">
+						<MkA :to="`/my/groups/${group.id}`" class="_link">{{
+							group.name
+						}}</MkA>
+					</div>
+					<div class="_content">
+						<MkAvatars :user-ids="group.userIds" />
+					</div>
 				</div>
-			</div>
-		</MkPagination>
-		<MkPagination v-slot="{items}" ref="joined" :pagination="joinedPagination">
-			<div v-for="group in items" :key="group.id" class="_card">
-				<div class="_title">{{ group.name }}</div>
-				<div class="_content">
-					<MkAvatars :user-ids="group.userIds"/>
+			</MkPagination>
+			<MkPagination
+				v-slot="{ items }"
+				ref="joined"
+				:pagination="joinedPagination"
+			>
+				<div v-for="group in items" :key="group.id" class="_card">
+					<div class="_title">{{ group.name }}</div>
+					<div class="_content">
+						<MkAvatars :user-ids="group.userIds" />
+					</div>
+					<div class="_footer">
+						<MkButton danger @click="leave(group)">{{
+							i18n.ts.leaveGroup
+						}}</MkButton>
+					</div>
 				</div>
-				<div class="_footer">
-					<MkButton danger @click="leave(group)">{{ i18n.ts.leaveGroup }}</MkButton>
-				</div>
-			</div>
-		</MkPagination>
-	</MkSpacer>
-</MkStickyContainer>
+			</MkPagination>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { computed, ref } from 'vue';
-import MkPagination from '@/components/MkPagination.vue';
-import MkButton from '@/components/MkButton.vue';
-import MkAvatars from '@/components/MkAvatars.vue';
-import * as os from '@/os';
+import { computed, ref } from "vue";
+import MkPagination from "@/components/MkPagination.vue";
+import MkButton from "@/components/MkButton.vue";
+import MkAvatars from "@/components/MkAvatars.vue";
+import * as os from "@/os";
 import { definePageMetadata } from "@/scripts/page-metadata";
-import { i18n } from '@/i18n';
-import MkStickyContainer from '@/components/global/MkStickyContainer.vue';
+import { i18n } from "@/i18n";
+import MkStickyContainer from "@/components/global/MkStickyContainer.vue";
 
-const owned = ref('owned');
-const joined = ref('joined');
+const owned = ref("owned");
+const joined = ref("joined");
 
 const ownedPagination = {
-	endpoint: 'users/groups/owned' as const,
+	endpoint: "users/groups/owned" as const,
 	limit: 10,
 };
 
 const joinedPagination = {
-	endpoint: 'users/groups/joined' as const,
+	endpoint: "users/groups/joined" as const,
 	limit: 10,
 };
 
 const headerActions = $computed(() => [
 	{
-		icon: 'ph-plus ph-bold ph-lg',
+		icon: "ph-plus ph-bold ph-lg",
 		text: i18n.ts.createGroup,
 		handler: create,
 	},
@@ -61,7 +83,7 @@ definePageMetadata(
 	computed(() => ({
 		title: i18n.ts.groups,
 		icon: "ph-users-three ph-bold ph-lg",
-	})),
+	}))
 );
 
 async function create() {
@@ -69,18 +91,18 @@ async function create() {
 		title: i18n.ts.groupName,
 	});
 	if (canceled) return;
-	await os.api('users/groups/create', { name: name });
+	await os.api("users/groups/create", { name: name });
 	owned.value.reload();
 	os.success();
 }
 
 async function leave(group) {
 	const { canceled } = await os.confirm({
-		type: 'warning',
-		text: i18n.t('leaveGroupConfirm', { name: group.name }),
+		type: "warning",
+		text: i18n.t("leaveGroupConfirm", { name: group.name }),
 	});
 	if (canceled) return;
-	os.apiWithDialog('users/groups/leave', {
+	os.apiWithDialog("users/groups/leave", {
 		groupId: group.id,
 	}).then(() => {
 		joined.value.reload();
@@ -98,7 +120,7 @@ async function leave(group) {
 	._content {
 		padding: 20px;
 
-		>.defgtij {
+		> .defgtij {
 			padding: 0;
 		}
 	}
diff --git a/packages/client/src/pages/my-lists/index.vue b/packages/client/src/pages/my-lists/index.vue
index 9956820199..6ecfd12f46 100644
--- a/packages/client/src/pages/my-lists/index.vue
+++ b/packages/client/src/pages/my-lists/index.vue
@@ -1,37 +1,58 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs" :display-back-button="true"/></template>
-	<MkSpacer :content-max="700">
-		<div class="qkcjvfiv">
-			<div class="buttonWrapper">
-				<MkButton primary class="add" @click="create"><i class="ph-plus ph-bold ph-lg"></i> {{ i18n.ts.createList }}</MkButton>
-				<MkButton @click="deleteAll"><i class="ph-trash ph-bold ph-lg"></i> {{ i18n.ts.deleteAll }}</MkButton>
-			</div>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader
+				:actions="headerActions"
+				:tabs="headerTabs"
+				:display-back-button="true"
+		/></template>
+		<MkSpacer :content-max="700">
+			<div class="qkcjvfiv">
+				<div class="buttonWrapper">
+					<MkButton primary class="add" @click="create"
+						><i class="ph-plus ph-bold ph-lg"></i>
+						{{ i18n.ts.createList }}</MkButton
+					>
+					<MkButton @click="deleteAll"
+						><i class="ph-trash ph-bold ph-lg"></i>
+						{{ i18n.ts.deleteAll }}</MkButton
+					>
+				</div>
 
-			<MkPagination v-slot="{items}" ref="pagingComponent" :pagination="pagination" class="lists _content">
-				<MkA v-for="list in items" :key="list.id" class="list _panel" :to="`/my/lists/${ list.id }`">
-					<div class="name">{{ list.name }}</div>
-					<MkAvatars :user-ids="list.userIds"/>
-				</MkA>
-			</MkPagination>
-		</div>
-	</MkSpacer>
-</MkStickyContainer>
+				<MkPagination
+					v-slot="{ items }"
+					ref="pagingComponent"
+					:pagination="pagination"
+					class="lists _content"
+				>
+					<MkA
+						v-for="list in items"
+						:key="list.id"
+						class="list _panel"
+						:to="`/my/lists/${list.id}`"
+					>
+						<div class="name">{{ list.name }}</div>
+						<MkAvatars :user-ids="list.userIds" />
+					</MkA>
+				</MkPagination>
+			</div>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import MkPagination from '@/components/MkPagination.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 {} from "vue";
+import MkPagination from "@/components/MkPagination.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";
 
 const pagingComponent = $ref<InstanceType<typeof MkPagination>>();
 
 const pagination = {
-	endpoint: 'users/lists/list' as const,
+	endpoint: "users/lists/list" as const,
 	limit: 10,
 };
 
@@ -40,18 +61,18 @@ async function create() {
 		title: i18n.ts.enterListName,
 	});
 	if (canceled) return;
-	await os.apiWithDialog('users/lists/create', { name: name });
+	await os.apiWithDialog("users/lists/create", { name: name });
 	pagingComponent.reload();
 }
 
 async function deleteAll() {
 	const { canceled } = await os.confirm({
-		type: 'warning',
-		text: i18n.t('removeAreYouSure', { x: 'all lists' }),
+		type: "warning",
+		text: i18n.t("removeAreYouSure", { x: "all lists" }),
 	});
 	if (canceled) return;
 
-	await os.api('users/lists/delete-all');
+	await os.api("users/lists/delete-all");
 	os.success();
 }
 
@@ -61,9 +82,9 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.manageLists,
-	icon: 'ph-list-bullets ph-bold ph-lg',
+	icon: "ph-list-bullets ph-bold ph-lg",
 	action: {
-		icon: 'ph-plus ph-bold ph-lg',
+		icon: "ph-plus ph-bold ph-lg",
 		handler: create,
 	},
 });
diff --git a/packages/client/src/pages/my-lists/list.vue b/packages/client/src/pages/my-lists/list.vue
index e3c211fc26..e90776dcbe 100644
--- a/packages/client/src/pages/my-lists/list.vue
+++ b/packages/client/src/pages/my-lists/list.vue
@@ -1,49 +1,76 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
-	<MkSpacer :content-max="700">
-		<div class="mk-list-page">
-			<transition :name="$store.state.animation ? 'zoom' : ''" mode="out-in">
-				<div v-if="list" class="_section">
-					<div class="_content">
-						<MkButton inline @click="addUser()">{{ i18n.ts.addUser }}</MkButton>
-						<MkButton inline @click="renameList()">{{ i18n.ts.rename }}</MkButton>
-						<MkButton inline @click="deleteList()">{{ i18n.ts.delete }}</MkButton>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader :actions="headerActions" :tabs="headerTabs"
+		/></template>
+		<MkSpacer :content-max="700">
+			<div class="mk-list-page">
+				<transition
+					:name="$store.state.animation ? 'zoom' : ''"
+					mode="out-in"
+				>
+					<div v-if="list" class="_section">
+						<div class="_content">
+							<MkButton inline @click="addUser()">{{
+								i18n.ts.addUser
+							}}</MkButton>
+							<MkButton inline @click="renameList()">{{
+								i18n.ts.rename
+							}}</MkButton>
+							<MkButton inline @click="deleteList()">{{
+								i18n.ts.delete
+							}}</MkButton>
+						</div>
 					</div>
-				</div>
-			</transition>
+				</transition>
 
-			<transition :name="$store.state.animation ? 'zoom' : ''" mode="out-in">
-				<div v-if="list" class="_section members _gap">
-					<div class="_title">{{ i18n.ts.members }}</div>
-					<div class="_content">
-						<div class="users">
-							<div v-for="user in users" :key="user.id" class="user _panel">
-								<MkAvatar :user="user" class="avatar" :show-indicator="true"/>
-								<div class="body">
-									<MkUserName :user="user" class="name"/>
-									<MkAcct :user="user" class="acct"/>
-								</div>
-								<div class="action">
-									<button class="_button" @click="removeUser(user)"><i class="ph-x ph-bold ph-lg"></i></button>
+				<transition
+					:name="$store.state.animation ? 'zoom' : ''"
+					mode="out-in"
+				>
+					<div v-if="list" class="_section members _gap">
+						<div class="_title">{{ i18n.ts.members }}</div>
+						<div class="_content">
+							<div class="users">
+								<div
+									v-for="user in users"
+									:key="user.id"
+									class="user _panel"
+								>
+									<MkAvatar
+										:user="user"
+										class="avatar"
+										:show-indicator="true"
+									/>
+									<div class="body">
+										<MkUserName :user="user" class="name" />
+										<MkAcct :user="user" class="acct" />
+									</div>
+									<div class="action">
+										<button
+											class="_button"
+											@click="removeUser(user)"
+										>
+											<i class="ph-x ph-bold ph-lg"></i>
+										</button>
+									</div>
 								</div>
 							</div>
 						</div>
 					</div>
-				</div>
-			</transition>
-		</div>
-	</MkSpacer>
-</MkStickyContainer>
+				</transition>
+			</div>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { computed, watch } from 'vue';
-import MkButton from '@/components/MkButton.vue';
-import * as os from '@/os';
-import { mainRouter } from '@/router';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import { i18n } from '@/i18n';
+import { computed, watch } from "vue";
+import MkButton from "@/components/MkButton.vue";
+import * as os from "@/os";
+import { mainRouter } from "@/router";
+import { definePageMetadata } from "@/scripts/page-metadata";
+import { i18n } from "@/i18n";
 
 const props = defineProps<{
 	listId: string;
@@ -53,21 +80,21 @@ let list = $ref(null);
 let users = $ref([]);
 
 function fetchList() {
-	os.api('users/lists/show', {
+	os.api("users/lists/show", {
 		listId: props.listId,
-	}).then(_list => {
+	}).then((_list) => {
 		list = _list;
-		os.api('users/show', {
+		os.api("users/show", {
 			userIds: list.userIds,
-		}).then(_users => {
+		}).then((_users) => {
 			users = _users;
 		});
 	});
 }
 
 function addUser() {
-	os.selectUser().then(user => {
-		os.apiWithDialog('users/lists/push', {
+	os.selectUser().then((user) => {
+		os.apiWithDialog("users/lists/push", {
 			listId: list.id,
 			userId: user.id,
 		}).then(() => {
@@ -77,11 +104,11 @@ function addUser() {
 }
 
 function removeUser(user) {
-	os.api('users/lists/pull', {
+	os.api("users/lists/pull", {
 		listId: list.id,
 		userId: user.id,
 	}).then(() => {
-		users = users.filter(x => x.id !== user.id);
+		users = users.filter((x) => x.id !== user.id);
 	});
 }
 
@@ -92,7 +119,7 @@ async function renameList() {
 	});
 	if (canceled) return;
 
-	await os.api('users/lists/update', {
+	await os.api("users/lists/update", {
 		listId: list.id,
 		name: name,
 	});
@@ -102,16 +129,16 @@ async function renameList() {
 
 async function deleteList() {
 	const { canceled } = await os.confirm({
-		type: 'warning',
-		text: i18n.t('removeAreYouSure', { x: list.name }),
+		type: "warning",
+		text: i18n.t("removeAreYouSure", { x: list.name }),
 	});
 	if (canceled) return;
 
-	await os.api('users/lists/delete', {
+	await os.api("users/lists/delete", {
 		listId: list.id,
 	});
 	os.success();
-	mainRouter.push('/my/lists');
+	mainRouter.push("/my/lists");
 }
 
 watch(() => props.listId, fetchList, { immediate: true });
@@ -120,10 +147,16 @@ const headerActions = $computed(() => []);
 
 const headerTabs = $computed(() => []);
 
-definePageMetadata(computed(() => list ? {
-	title: list.name,
-	icon: 'ph-list-bullets ph-bold ph-lg',
-} : null));
+definePageMetadata(
+	computed(() =>
+		list
+			? {
+					title: list.name,
+					icon: "ph-list-bullets ph-bold ph-lg",
+			  }
+			: null
+	)
+);
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/pages/not-found.vue b/packages/client/src/pages/not-found.vue
index d6f701b568..d4ec84cff8 100644
--- a/packages/client/src/pages/not-found.vue
+++ b/packages/client/src/pages/not-found.vue
@@ -1,15 +1,19 @@
 <template>
-<div class="ipledcug">
-	<div class="_fullinfo">
-		<img src="/static-assets/badges/not-found.png" class="_ghost" alt="Not found"/>
-		<div>{{ i18n.ts.notFoundDescription }}</div>
+	<div class="ipledcug">
+		<div class="_fullinfo">
+			<img
+				src="/static-assets/badges/not-found.png"
+				class="_ghost"
+				alt="Not found"
+			/>
+			<div>{{ i18n.ts.notFoundDescription }}</div>
+		</div>
 	</div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
 const headerActions = $computed(() => []);
 
@@ -17,6 +21,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.notFound,
-	icon: 'ph-warning ph-bold ph-lg',
+	icon: "ph-warning ph-bold ph-lg",
 });
 </script>
diff --git a/packages/client/src/pages/note.vue b/packages/client/src/pages/note.vue
index cff6b252b5..29c18c12ea 100644
--- a/packages/client/src/pages/note.vue
+++ b/packages/client/src/pages/note.vue
@@ -1,56 +1,110 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs" :display-back-button="true"/></template>
-	<MkSpacer :content-max="800" :marginMin="6">
-		<div class="fcuexfpr">
-			<transition :name="$store.state.animation ? 'fade' : ''" mode="out-in">
-				<div v-if="note" class="note">
-					<div v-if="showNext" class="_gap">
-						<XNotes class="_content" :pagination="nextPagination" :no-gap="true"/>
-					</div>
-
-					<div class="main _gap">
-						<MkButton v-if="!showNext && hasNext" class="load next" @click="showNext = true"><i class="ph-caret-up ph-bold ph-lg"></i></MkButton>
-						<div class="note _gap">
-							<MkRemoteCaution v-if="note.user.host != null" :href="note.url ?? note.uri"/>
-							<XNoteDetailed :key="note.id" v-model:note="note" class="note"/>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader
+				:actions="headerActions"
+				:tabs="headerTabs"
+				:display-back-button="true"
+		/></template>
+		<MkSpacer :content-max="800" :marginMin="6">
+			<div class="fcuexfpr">
+				<transition
+					:name="$store.state.animation ? 'fade' : ''"
+					mode="out-in"
+				>
+					<div v-if="note" class="note">
+						<div v-if="showNext" class="_gap">
+							<XNotes
+								class="_content"
+								:pagination="nextPagination"
+								:no-gap="true"
+							/>
 						</div>
-						<div v-if="clips && clips.length > 0" class="_content clips _gap">
-							<div class="title">{{ i18n.ts.clip }}</div>
-							<MkA v-for="item in clips" :key="item.id" :to="`/clips/${item.id}`" class="item _panel _gap">
-								<b>{{ item.name }}</b>
-								<div v-if="item.description" class="description">{{ item.description }}</div>
-								<div class="user">
-									<MkAvatar :user="item.user" class="avatar" :show-indicator="true"/> <MkUserName :user="item.user" :nowrap="false"/>
-								</div>
-							</MkA>
-						</div>
-						<MkButton v-if="!showPrev && hasPrev" class="load prev" @click="showPrev = true"><i class="ph-caret-down ph-bold ph-lg"></i></MkButton>
-					</div>
 
-					<div v-if="showPrev" class="_gap">
-						<XNotes class="_content" :pagination="prevPagination" :no-gap="true"/>
+						<div class="main _gap">
+							<MkButton
+								v-if="!showNext && hasNext"
+								class="load next"
+								@click="showNext = true"
+								><i class="ph-caret-up ph-bold ph-lg"></i
+							></MkButton>
+							<div class="note _gap">
+								<MkRemoteCaution
+									v-if="note.user.host != null"
+									:href="note.url ?? note.uri"
+								/>
+								<XNoteDetailed
+									:key="note.id"
+									v-model:note="note"
+									class="note"
+								/>
+							</div>
+							<div
+								v-if="clips && clips.length > 0"
+								class="_content clips _gap"
+							>
+								<div class="title">{{ i18n.ts.clip }}</div>
+								<MkA
+									v-for="item in clips"
+									:key="item.id"
+									:to="`/clips/${item.id}`"
+									class="item _panel _gap"
+								>
+									<b>{{ item.name }}</b>
+									<div
+										v-if="item.description"
+										class="description"
+									>
+										{{ item.description }}
+									</div>
+									<div class="user">
+										<MkAvatar
+											:user="item.user"
+											class="avatar"
+											:show-indicator="true"
+										/>
+										<MkUserName
+											:user="item.user"
+											:nowrap="false"
+										/>
+									</div>
+								</MkA>
+							</div>
+							<MkButton
+								v-if="!showPrev && hasPrev"
+								class="load prev"
+								@click="showPrev = true"
+								><i class="ph-caret-down ph-bold ph-lg"></i
+							></MkButton>
+						</div>
+
+						<div v-if="showPrev" class="_gap">
+							<XNotes
+								class="_content"
+								:pagination="prevPagination"
+								:no-gap="true"
+							/>
+						</div>
 					</div>
-				</div>
-				<MkError v-else-if="error" @retry="fetch()"/>
-				<MkLoading v-else/>
-			</transition>
-		</div>
-	</MkSpacer>
-</MkStickyContainer>
+					<MkError v-else-if="error" @retry="fetch()" />
+					<MkLoading v-else />
+				</transition>
+			</div>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { computed, defineComponent, watch } from 'vue';
-import * as misskey from 'calckey-js';
-import XNote from '@/components/MkNote.vue';
-import XNoteDetailed from '@/components/MkNoteDetailed.vue';
-import XNotes from '@/components/MkNotes.vue';
-import MkRemoteCaution from '@/components/MkRemoteCaution.vue';
-import MkButton from '@/components/MkButton.vue';
-import * as os from '@/os';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import { i18n } from '@/i18n';
+import { computed, defineComponent, watch } from "vue";
+import * as misskey from "calckey-js";
+import XNote from "@/components/MkNote.vue";
+import XNoteDetailed from "@/components/MkNoteDetailed.vue";
+import XNotes from "@/components/MkNotes.vue";
+import MkRemoteCaution from "@/components/MkRemoteCaution.vue";
+import MkButton from "@/components/MkButton.vue";
+import * as os from "@/os";
+import { definePageMetadata } from "@/scripts/page-metadata";
+import { i18n } from "@/i18n";
 
 const props = defineProps<{
 	noteId: string;
@@ -65,22 +119,30 @@ let showNext = $ref(false);
 let error = $ref();
 
 const prevPagination = {
-	endpoint: 'users/notes' as const,
+	endpoint: "users/notes" as const,
 	limit: 10,
-	params: computed(() => note ? ({
-		userId: note.userId,
-		untilId: note.id,
-	}) : null),
+	params: computed(() =>
+		note
+			? {
+					userId: note.userId,
+					untilId: note.id,
+			  }
+			: null
+	),
 };
 
 const nextPagination = {
 	reversed: true,
-	endpoint: 'users/notes' as const,
+	endpoint: "users/notes" as const,
 	limit: 10,
-	params: computed(() => note ? ({
-		userId: note.userId,
-		sinceId: note.id,
-	}) : null),
+	params: computed(() =>
+		note
+			? {
+					userId: note.userId,
+					sinceId: note.id,
+			  }
+			: null
+	),
 };
 
 function fetchNote() {
@@ -89,32 +151,34 @@ function fetchNote() {
 	showPrev = false;
 	showNext = false;
 	note = null;
-	os.api('notes/show', {
+	os.api("notes/show", {
 		noteId: props.noteId,
-	}).then(res => {
-		note = res;
-		Promise.all([
-			os.api('notes/clips', {
-				noteId: note.id,
-			}),
-			os.api('users/notes', {
-				userId: note.userId,
-				untilId: note.id,
-				limit: 1,
-			}),
-			os.api('users/notes', {
-				userId: note.userId,
-				sinceId: note.id,
-				limit: 1,
-			}),
-		]).then(([_clips, prev, next]) => {
-			clips = _clips;
-			hasPrev = prev.length !== 0;
-			hasNext = next.length !== 0;
+	})
+		.then((res) => {
+			note = res;
+			Promise.all([
+				os.api("notes/clips", {
+					noteId: note.id,
+				}),
+				os.api("users/notes", {
+					userId: note.userId,
+					untilId: note.id,
+					limit: 1,
+				}),
+				os.api("users/notes", {
+					userId: note.userId,
+					sinceId: note.id,
+					limit: 1,
+				}),
+			]).then(([_clips, prev, next]) => {
+				clips = _clips;
+				hasPrev = prev.length !== 0;
+				hasNext = next.length !== 0;
+			});
+		})
+		.catch((err) => {
+			error = err;
 		});
-	}).catch(err => {
-		error = err;
-	});
 }
 
 watch(() => props.noteId, fetchNote, {
@@ -125,16 +189,22 @@ const headerActions = $computed(() => []);
 
 const headerTabs = $computed(() => []);
 
-definePageMetadata(computed(() => note ? {
-	title: i18n.ts.note,
-	subtitle: new Date(note.createdAt).toLocaleString(),
-	avatar: note.user,
-	path: `/notes/${note.id}`,
-	share: {
-		title: i18n.t('noteOf', { user: note.user.name }),
-		text: note.text,
-	},
-} : null));
+definePageMetadata(
+	computed(() =>
+		note
+			? {
+					title: i18n.ts.note,
+					subtitle: new Date(note.createdAt).toLocaleString(),
+					avatar: note.user,
+					path: `/notes/${note.id}`,
+					share: {
+						title: i18n.t("noteOf", { user: note.user.name }),
+						text: note.text,
+					},
+			  }
+			: null
+	)
+);
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/pages/notifications.vue b/packages/client/src/pages/notifications.vue
index e587a1f781..7a61df0ba6 100644
--- a/packages/client/src/pages/notifications.vue
+++ b/packages/client/src/pages/notifications.vue
@@ -1,137 +1,173 @@
 <template>
-<MkStickyContainer>
-	<template #header>
-		<MkPageHeader
-			v-model:tab="tab"
-			:actions="headerActions"
-			:tabs="headerTabs"
-			:display-my-avatar="true"
-		/>
-	</template>
-	<MkSpacer :content-max="800">
-		<swiper
-			:modules="[Virtual]"
-			:space-between="20"
-			:virtual="true"
-			:allow-touch-move="!(deviceKind === 'desktop' && !defaultStore.state.swipeOnDesktop)"
-			@swiper="setSwiperRef"
-			@slide-change="onSlideChange"
-		>
-			<swiper-slide>
-				<XNotifications class="notifications" :include-types="includeTypes" :unread-only="false"/>
-			</swiper-slide>
-			<swiper-slide>
-				<XNotifications class="notifications" :include-types="includeTypes" :unread-only="true"/>
-			</swiper-slide>
-			<swiper-slide>
-				<XNotes :pagination="mentionsPagination"/>
-			</swiper-slide>
-			<swiper-slide>
-				<XNotes :pagination="directNotesPagination"/>
-			</swiper-slide>
-		</swiper>
-	</MkSpacer>
-</MkStickyContainer>
+	<MkStickyContainer>
+		<template #header>
+			<MkPageHeader
+				v-model:tab="tab"
+				:actions="headerActions"
+				:tabs="headerTabs"
+				:display-my-avatar="true"
+			/>
+		</template>
+		<MkSpacer :content-max="800">
+			<swiper
+				:modules="[Virtual]"
+				:space-between="20"
+				:virtual="true"
+				:allow-touch-move="
+					!(
+						deviceKind === 'desktop' &&
+						!defaultStore.state.swipeOnDesktop
+					)
+				"
+				@swiper="setSwiperRef"
+				@slide-change="onSlideChange"
+			>
+				<swiper-slide>
+					<XNotifications
+						class="notifications"
+						:include-types="includeTypes"
+						:unread-only="false"
+					/>
+				</swiper-slide>
+				<swiper-slide>
+					<XNotifications
+						class="notifications"
+						:include-types="includeTypes"
+						:unread-only="true"
+					/>
+				</swiper-slide>
+				<swiper-slide>
+					<XNotes :pagination="mentionsPagination" />
+				</swiper-slide>
+				<swiper-slide>
+					<XNotes :pagination="directNotesPagination" />
+				</swiper-slide>
+			</swiper>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { computed, ref, watch } from 'vue';
-import { Virtual } from 'swiper';
-import { Swiper, SwiperSlide } from 'swiper/vue';
-import { notificationTypes } from 'calckey-js';
-import XNotifications from '@/components/MkNotifications.vue';
-import XNotes from '@/components/MkNotes.vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import { deviceKind } from '@/scripts/device-kind';
-import { defaultStore } from '@/store';
-import 'swiper/scss';
-import 'swiper/scss/virtual';
+import { computed, ref, watch } from "vue";
+import { Virtual } from "swiper";
+import { Swiper, SwiperSlide } from "swiper/vue";
+import { notificationTypes } from "calckey-js";
+import XNotifications from "@/components/MkNotifications.vue";
+import XNotes from "@/components/MkNotes.vue";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
+import { deviceKind } from "@/scripts/device-kind";
+import { defaultStore } from "@/store";
+import "swiper/scss";
+import "swiper/scss/virtual";
 
-const tabs = ['all', 'unread', 'mentions', 'directNotes'];
+const tabs = ["all", "unread", "mentions", "directNotes"];
 let tab = $ref(tabs[0]);
-watch($$(tab), () => (syncSlide(tabs.indexOf(tab))));
+watch($$(tab), () => syncSlide(tabs.indexOf(tab)));
 
 let includeTypes = $ref<string[] | null>(null);
-let unreadOnly = $computed(() => tab === 'unread');
-os.api('notifications/mark-all-as-read');
+let unreadOnly = $computed(() => tab === "unread");
+os.api("notifications/mark-all-as-read");
 
 const MOBILE_THRESHOLD = 500;
 const isMobile = ref(
-	deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD
+	deviceKind === "smartphone" || window.innerWidth <= MOBILE_THRESHOLD
 );
-window.addEventListener('resize', () => {
+window.addEventListener("resize", () => {
 	isMobile.value =
-		deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD;
+		deviceKind === "smartphone" || window.innerWidth <= MOBILE_THRESHOLD;
 });
 
 const mentionsPagination = {
-	endpoint: 'notes/mentions' as const,
+	endpoint: "notes/mentions" as const,
 	limit: 10,
 };
 
 const directNotesPagination = {
-	endpoint: 'notes/mentions' as const,
+	endpoint: "notes/mentions" as const,
 	limit: 10,
 	params: {
-		visibility: 'specified',
+		visibility: "specified",
 	},
 };
 
 function setFilter(ev) {
-	const typeItems = notificationTypes.map(t => ({
+	const typeItems = notificationTypes.map((t) => ({
 		text: i18n.t(`_notification._types.${t}`),
 		active: includeTypes && includeTypes.includes(t),
 		action: () => {
 			includeTypes = [t];
 		},
 	}));
-	const items = includeTypes != null ? [{
-		icon: 'ph-x ph-bold ph-lg',
-		text: i18n.ts.clear,
-		action: () => {
-			includeTypes = null;
-		},
-	}, null, ...typeItems] : typeItems;
+	const items =
+		includeTypes != null
+			? [
+					{
+						icon: "ph-x ph-bold ph-lg",
+						text: i18n.ts.clear,
+						action: () => {
+							includeTypes = null;
+						},
+					},
+					null,
+					...typeItems,
+			  ]
+			: typeItems;
 	os.popupMenu(items, ev.currentTarget ?? ev.target);
 }
 
-const headerActions = $computed(() => [tab === 'all' ? {
-	text: i18n.ts.filter,
-	icon: 'ph-funnel ph-bold ph-lg',
-	highlighted: includeTypes != null,
-	handler: setFilter,
-} : undefined, tab === 'all' ? {
-	text: i18n.ts.markAllAsRead,
-	icon: 'ph-check ph-bold ph-lg',
-	handler: () => {
-		os.apiWithDialog('notifications/mark-all-as-read');
+const headerActions = $computed(() =>
+	[
+		tab === "all"
+			? {
+					text: i18n.ts.filter,
+					icon: "ph-funnel ph-bold ph-lg",
+					highlighted: includeTypes != null,
+					handler: setFilter,
+			  }
+			: undefined,
+		tab === "all"
+			? {
+					text: i18n.ts.markAllAsRead,
+					icon: "ph-check ph-bold ph-lg",
+					handler: () => {
+						os.apiWithDialog("notifications/mark-all-as-read");
+					},
+			  }
+			: undefined,
+	].filter((x) => x !== undefined)
+);
+
+const headerTabs = $computed(() => [
+	{
+		key: "all",
+		title: i18n.ts.all,
+		icon: "ph-bell ph-bold ph-lg",
 	},
-} : undefined].filter(x => x !== undefined));
+	{
+		key: "unread",
+		title: i18n.ts.unread,
+		icon: "ph-circle-wavy-warning ph-bold ph-lg",
+	},
+	{
+		key: "mentions",
+		title: i18n.ts.mentions,
+		icon: "ph-at ph-bold ph-lg",
+	},
+	{
+		key: "directNotes",
+		title: i18n.ts.directNotes,
+		icon: "ph-envelope-simple-open ph-bold ph-lg",
+	},
+]);
 
-const headerTabs = $computed(() => [{
-	key: 'all',
-	title: i18n.ts.all,
-	icon: 'ph-bell ph-bold ph-lg',
-}, {
-	key: 'unread',
-	title: i18n.ts.unread,
-	icon: 'ph-circle-wavy-warning ph-bold ph-lg',
-}, {
-	key: 'mentions',
-	title: i18n.ts.mentions,
-	icon: 'ph-at ph-bold ph-lg',
-}, {
-	key: 'directNotes',
-	title: i18n.ts.directNotes,
-	icon: 'ph-envelope-simple-open ph-bold ph-lg',
-}]);
-
-definePageMetadata(computed(() => ({
-	title: i18n.ts.notifications,
-	icon: 'ph-bell ph-bold ph-lg',
-})));
+definePageMetadata(
+	computed(() => ({
+		title: i18n.ts.notifications,
+		icon: "ph-bell ph-bold ph-lg",
+	}))
+);
 
 let swiperRef = null;
 
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.button.vue b/packages/client/src/pages/page-editor/els/page-editor.el.button.vue
index 1d25e5493d..bd3c0e6381 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.button.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.button.vue
@@ -1,67 +1,126 @@
 <template>
+	<XContainer :draggable="true" @remove="() => $emit('remove')">
+		<template #header
+			><i class="ph-lightning ph-bold ph-lg"></i>
+			{{ i18n.ts._pages.blocks.button }}</template
+		>
 
-<XContainer :draggable="true" @remove="() => $emit('remove')">
-	<template #header><i class="ph-lightning ph-bold ph-lg"></i> {{ i18n.ts._pages.blocks.button }}</template>
-
-	<section class="xfhsjczc">
-		<MkInput v-model="value.text"><template #label>{{ i18n.ts._pages.blocks._button.text }}</template></MkInput>
-		<MkSwitch v-model="value.primary"><span>{{ i18n.ts._pages.blocks._button.colored }}</span></MkSwitch>
-		<MkSelect v-model="value.action">
-			<template #label>{{ i18n.ts._pages.blocks._button.action }}</template>
-			<option value="dialog">{{ i18n.ts._pages.blocks._button._action.dialog }}</option>
-			<option value="resetRandom">{{ i18n.ts._pages.blocks._button._action.resetRandom }}</option>
-			<option value="pushEvent">{{ i18n.ts._pages.blocks._button._action.pushEvent }}</option>
-			<option value="callAiScript">{{ i18n.ts._pages.blocks._button._action.callAiScript }}</option>
-		</MkSelect>
-		<template v-if="value.action === 'dialog'">
-			<MkInput v-model="value.content"><template #label>{{ i18n.ts._pages.blocks._button._action._dialog.content }}</template></MkInput>
-		</template>
-		<template v-else-if="value.action === 'pushEvent'">
-			<MkInput v-model="value.event"><template #label>{{ i18n.ts._pages.blocks._button._action._pushEvent.event }}</template></MkInput>
-			<MkInput v-model="value.message"><template #label>{{ i18n.ts._pages.blocks._button._action._pushEvent.message }}</template></MkInput>
-			<MkSelect v-model="value.var">
-				<template #label>{{ i18n.ts._pages.blocks._button._action._pushEvent.variable }}</template>
-				<option :value="null">{{ i18n.t('_pages.blocks._button._action._pushEvent.no-variable') }}</option>
-				<option v-for="v in hpml.getVarsByType()" :value="v.name">{{ v.name }}</option>
-				<optgroup :label="i18n.ts._pages.script.pageVariables">
-					<option v-for="v in hpml.getPageVarsByType()" :value="v">{{ v }}</option>
-				</optgroup>
-				<optgroup :label="i18n.ts._pages.script.enviromentVariables">
-					<option v-for="v in hpml.getEnvVarsByType()" :value="v">{{ v }}</option>
-				</optgroup>
+		<section class="xfhsjczc">
+			<MkInput v-model="value.text"
+				><template #label>{{
+					i18n.ts._pages.blocks._button.text
+				}}</template></MkInput
+			>
+			<MkSwitch v-model="value.primary"
+				><span>{{
+					i18n.ts._pages.blocks._button.colored
+				}}</span></MkSwitch
+			>
+			<MkSelect v-model="value.action">
+				<template #label>{{
+					i18n.ts._pages.blocks._button.action
+				}}</template>
+				<option value="dialog">
+					{{ i18n.ts._pages.blocks._button._action.dialog }}
+				</option>
+				<option value="resetRandom">
+					{{ i18n.ts._pages.blocks._button._action.resetRandom }}
+				</option>
+				<option value="pushEvent">
+					{{ i18n.ts._pages.blocks._button._action.pushEvent }}
+				</option>
+				<option value="callAiScript">
+					{{ i18n.ts._pages.blocks._button._action.callAiScript }}
+				</option>
 			</MkSelect>
-		</template>
-		<template v-else-if="value.action === 'callAiScript'">
-			<MkInput v-model="value.fn"><template #label>{{ i18n.ts._pages.blocks._button._action._callAiScript.functionName }}</template></MkInput>
-		</template>
-	</section>
-</XContainer>
+			<template v-if="value.action === 'dialog'">
+				<MkInput v-model="value.content"
+					><template #label>{{
+						i18n.ts._pages.blocks._button._action._dialog.content
+					}}</template></MkInput
+				>
+			</template>
+			<template v-else-if="value.action === 'pushEvent'">
+				<MkInput v-model="value.event"
+					><template #label>{{
+						i18n.ts._pages.blocks._button._action._pushEvent.event
+					}}</template></MkInput
+				>
+				<MkInput v-model="value.message"
+					><template #label>{{
+						i18n.ts._pages.blocks._button._action._pushEvent.message
+					}}</template></MkInput
+				>
+				<MkSelect v-model="value.var">
+					<template #label>{{
+						i18n.ts._pages.blocks._button._action._pushEvent
+							.variable
+					}}</template>
+					<option :value="null">
+						{{
+							i18n.t(
+								"_pages.blocks._button._action._pushEvent.no-variable"
+							)
+						}}
+					</option>
+					<option v-for="v in hpml.getVarsByType()" :value="v.name">
+						{{ v.name }}
+					</option>
+					<optgroup :label="i18n.ts._pages.script.pageVariables">
+						<option
+							v-for="v in hpml.getPageVarsByType()"
+							:value="v"
+						>
+							{{ v }}
+						</option>
+					</optgroup>
+					<optgroup
+						:label="i18n.ts._pages.script.enviromentVariables"
+					>
+						<option v-for="v in hpml.getEnvVarsByType()" :value="v">
+							{{ v }}
+						</option>
+					</optgroup>
+				</MkSelect>
+			</template>
+			<template v-else-if="value.action === 'callAiScript'">
+				<MkInput v-model="value.fn"
+					><template #label>{{
+						i18n.ts._pages.blocks._button._action._callAiScript
+							.functionName
+					}}</template></MkInput
+				>
+			</template>
+		</section>
+	</XContainer>
 </template>
 
 <script lang="ts" setup>
+import {} from "vue";
+import XContainer from "../page-editor.container.vue";
+import MkSelect from "@/components/form/select.vue";
+import MkInput from "@/components/form/input.vue";
+import MkSwitch from "@/components/form/switch.vue";
+import { i18n } from "@/i18n";
 
-import { } from 'vue';
-import XContainer from '../page-editor.container.vue';
-import MkSelect from '@/components/form/select.vue';
-import MkInput from '@/components/form/input.vue';
-import MkSwitch from '@/components/form/switch.vue';
-import { i18n } from '@/i18n';
-
-withDefaults(defineProps<{
-	value: any,
-	hpml: any
-}>(), {
-	value: {
-		text: '',
-		action: 'dialog',
-		content: null,
-		event: null,
-		message: null,
-		primary: false,
-		var: null,
-		fn: null
+withDefaults(
+	defineProps<{
+		value: any;
+		hpml: any;
+	}>(),
+	{
+		value: {
+			text: "",
+			action: "dialog",
+			content: null,
+			event: null,
+			message: null,
+			primary: false,
+			var: null,
+			fn: null,
+		},
 	}
-});
+);
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.canvas.vue b/packages/client/src/pages/page-editor/els/page-editor.el.canvas.vue
index c928357899..3909044381 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.canvas.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.canvas.vue
@@ -1,39 +1,51 @@
 <template>
+	<XContainer :draggable="true" @remove="() => $emit('remove')">
+		<template #header
+			><i class="ph-paint-brush-household ph-bold ph-lg"></i>
+			{{ i18n.ts._pages.blocks.canvas }}</template
+		>
 
-<XContainer :draggable="true" @remove="() => $emit('remove')">
-	<template #header><i class="ph-paint-brush-household ph-bold ph-lg"></i> {{ i18n.ts._pages.blocks.canvas }}</template>
-
-	<section style="padding: 0 16px 0 16px;">
-		<MkInput v-model="value.name">
-			<template #prefix><i class="ph-magic-wand ph-bold ph-lg"></i></template>
-			<template #label>{{ i18n.ts._pages.blocks._canvas.id }}</template>
-		</MkInput>
-		<MkInput v-model="value.width" type="number">
-			<template #label>{{ i18n.ts._pages.blocks._canvas.width }}</template>
-			<template #suffix>px</template>
-		</MkInput>
-		<MkInput v-model="value.height" type="number">
-			<template #label>{{ i18n.ts._pages.blocks._canvas.height }}</template>
-			<template #suffix>px</template>
-		</MkInput>
-	</section>
-</XContainer>
+		<section style="padding: 0 16px 0 16px">
+			<MkInput v-model="value.name">
+				<template #prefix
+					><i class="ph-magic-wand ph-bold ph-lg"></i
+				></template>
+				<template #label>{{
+					i18n.ts._pages.blocks._canvas.id
+				}}</template>
+			</MkInput>
+			<MkInput v-model="value.width" type="number">
+				<template #label>{{
+					i18n.ts._pages.blocks._canvas.width
+				}}</template>
+				<template #suffix>px</template>
+			</MkInput>
+			<MkInput v-model="value.height" type="number">
+				<template #label>{{
+					i18n.ts._pages.blocks._canvas.height
+				}}</template>
+				<template #suffix>px</template>
+			</MkInput>
+		</section>
+	</XContainer>
 </template>
 
 <script lang="ts" setup>
+import {} from "vue";
+import XContainer from "../page-editor.container.vue";
+import MkInput from "@/components/form/input.vue";
+import { i18n } from "@/i18n";
 
-import { } from 'vue';
-import XContainer from '../page-editor.container.vue';
-import MkInput from '@/components/form/input.vue';
-import { i18n } from '@/i18n';
-
-withDefaults(defineProps<{
-	value: any
-}>(), {
-	value: {
-		name: '',
-		width: 300,
-		height: 200
+withDefaults(
+	defineProps<{
+		value: any;
+	}>(),
+	{
+		value: {
+			name: "",
+			width: 300,
+			height: 200,
+		},
 	}
-});
+);
 </script>
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.counter.vue b/packages/client/src/pages/page-editor/els/page-editor.el.counter.vue
index 5b0c2a266f..8a387a1817 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.counter.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.counter.vue
@@ -1,35 +1,47 @@
 <template>
+	<XContainer :draggable="true" @remove="() => $emit('remove')">
+		<template #header
+			><i class="ph-lightning ph-bold ph-lg"></i>
+			{{ i18n.ts._pages.blocks.counter }}</template
+		>
 
-<XContainer :draggable="true" @remove="() => $emit('remove')">
-	<template #header><i class="ph-lightning ph-bold ph-lg"></i> {{ i18n.ts._pages.blocks.counter }}</template>
-
-	<section style="padding: 0 16px 0 16px;">
-		<MkInput v-model="value.name">
-			<template #prefix><i class="ph-magic-wand ph-bold ph-lg"></i></template>
-			<template #label>{{ i18n.ts._pages.blocks._counter.name }}</template>
-		</MkInput>
-		<MkInput v-model="value.text">
-			<template #label>{{ i18n.ts._pages.blocks._counter.text }}</template>
-		</MkInput>
-		<MkInput v-model="value.inc" type="number">
-			<template #label>{{ i18n.ts._pages.blocks._counter.inc }}</template>
-		</MkInput>
-	</section>
-</XContainer>
+		<section style="padding: 0 16px 0 16px">
+			<MkInput v-model="value.name">
+				<template #prefix
+					><i class="ph-magic-wand ph-bold ph-lg"></i
+				></template>
+				<template #label>{{
+					i18n.ts._pages.blocks._counter.name
+				}}</template>
+			</MkInput>
+			<MkInput v-model="value.text">
+				<template #label>{{
+					i18n.ts._pages.blocks._counter.text
+				}}</template>
+			</MkInput>
+			<MkInput v-model="value.inc" type="number">
+				<template #label>{{
+					i18n.ts._pages.blocks._counter.inc
+				}}</template>
+			</MkInput>
+		</section>
+	</XContainer>
 </template>
 
 <script lang="ts" setup>
+import {} from "vue";
+import XContainer from "../page-editor.container.vue";
+import MkInput from "@/components/form/input.vue";
+import { i18n } from "@/i18n";
 
-import { } from 'vue';
-import XContainer from '../page-editor.container.vue';
-import MkInput from '@/components/form/input.vue';
-import { i18n } from '@/i18n';
-
-withDefaults(defineProps<{
-	value: any
-}>(), {
-	value: {
-		name: ''
+withDefaults(
+	defineProps<{
+		value: any;
+	}>(),
+	{
+		value: {
+			name: "",
+		},
 	}
-});
+);
 </script>
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.if.vue b/packages/client/src/pages/page-editor/els/page-editor.el.if.vue
index 6e4525e4b9..b4a262f9e9 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.if.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.if.vue
@@ -1,57 +1,78 @@
 <template>
+	<XContainer :draggable="true" @remove="() => $emit('remove')">
+		<template #header
+			><i class="ph-question ph-bold ph-lg"></i>
+			{{ i18n.ts._pages.blocks.if }}</template
+		>
+		<template #func>
+			<button class="_button" @click="add()">
+				<i class="ph-plus ph-bold ph-lg"></i>
+			</button>
+		</template>
 
-<XContainer :draggable="true" @remove="() => $emit('remove')">
-	<template #header><i class="ph-question ph-bold ph-lg"></i> {{ i18n.ts._pages.blocks.if }}</template>
-	<template #func>
-		<button class="_button" @click="add()">
-			<i class="ph-plus ph-bold ph-lg"></i>
-		</button>
-	</template>
+		<section class="romcojzs">
+			<MkSelect v-model="value.var">
+				<template #label>{{
+					i18n.ts._pages.blocks._if.variable
+				}}</template>
+				<option
+					v-for="v in hpml.getVarsByType('boolean')"
+					:value="v.name"
+				>
+					{{ v.name }}
+				</option>
+				<optgroup :label="i18n.ts._pages.script.pageVariables">
+					<option
+						v-for="v in hpml.getPageVarsByType('boolean')"
+						:value="v"
+					>
+						{{ v }}
+					</option>
+				</optgroup>
+				<optgroup :label="i18n.ts._pages.script.enviromentVariables">
+					<option
+						v-for="v in hpml.getEnvVarsByType('boolean')"
+						:value="v"
+					>
+						{{ v }}
+					</option>
+				</optgroup>
+			</MkSelect>
 
-	<section class="romcojzs">
-		<MkSelect v-model="value.var">
-			<template #label>{{ i18n.ts._pages.blocks._if.variable }}</template>
-			<option v-for="v in hpml.getVarsByType('boolean')" :value="v.name">{{ v.name }}</option>
-			<optgroup :label="i18n.ts._pages.script.pageVariables">
-				<option v-for="v in hpml.getPageVarsByType('boolean')" :value="v">{{ v }}</option>
-			</optgroup>
-			<optgroup :label="i18n.ts._pages.script.enviromentVariables">
-				<option v-for="v in hpml.getEnvVarsByType('boolean')" :value="v">{{ v }}</option>
-			</optgroup>
-		</MkSelect>
-
-		<XBlocks v-model="value.children" class="children" :hpml="hpml"/>
-	</section>
-</XContainer>
+			<XBlocks v-model="value.children" class="children" :hpml="hpml" />
+		</section>
+	</XContainer>
 </template>
 
 <script lang="ts" setup>
+import { defineAsyncComponent, inject } from "vue";
+import { v4 as uuid } from "uuid";
+import XContainer from "../page-editor.container.vue";
+import MkSelect from "@/components/form/select.vue";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
 
-import { defineAsyncComponent, inject } from 'vue';
-import { v4 as uuid } from 'uuid';
-import XContainer from '../page-editor.container.vue';
-import MkSelect from '@/components/form/select.vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
+const XBlocks = defineAsyncComponent(() => import("../page-editor.blocks.vue"));
 
-const XBlocks = defineAsyncComponent(() => import('../page-editor.blocks.vue'));
-
-const props = withDefaults(defineProps<{
-	value: any,
-	hpml: any
-}>(), {
-	value: {
-		children: [],
-		var: null
+const props = withDefaults(
+	defineProps<{
+		value: any;
+		hpml: any;
+	}>(),
+	{
+		value: {
+			children: [],
+			var: null,
+		},
 	}
-});
+);
 
-const getPageBlockList = inject<(any) => any>('getPageBlockList');
+const getPageBlockList = inject<(any) => any>("getPageBlockList");
 
 async function add() {
 	const { canceled, result: type } = await os.select({
 		title: i18n.ts._pages.chooseBlock,
-		groupedItems: getPageBlockList()
+		groupedItems: getPageBlockList(),
 	});
 	if (canceled) return;
 
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.image.vue b/packages/client/src/pages/page-editor/els/page-editor.el.image.vue
index 81d4a10bf3..023df8048c 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.image.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.image.vue
@@ -1,34 +1,44 @@
 <template>
+	<XContainer :draggable="true" @remove="() => $emit('remove')">
+		<template #header
+			><i class="ph-image ph-bold ph-lg"></i>
+			{{ i18n.ts._pages.blocks.image }}</template
+		>
+		<template #func>
+			<button @click="choose()">
+				<i class="ph-folder-notch-open ph-bold ph-lg"></i>
+			</button>
+		</template>
 
-<XContainer :draggable="true" @remove="() => $emit('remove')">
-	<template #header><i class="ph-image ph-bold ph-lg"></i> {{ i18n.ts._pages.blocks.image }}</template>
-	<template #func>
-		<button @click="choose()">
-			<i class="ph-folder-notch-open ph-bold ph-lg"></i>
-		</button>
-	</template>
-
-	<section class="oyyftmcf">
-		<MkDriveFileThumbnail v-if="file" class="preview" :file="file" fit="contain" @click="choose()"/>
-	</section>
-</XContainer>
+		<section class="oyyftmcf">
+			<MkDriveFileThumbnail
+				v-if="file"
+				class="preview"
+				:file="file"
+				fit="contain"
+				@click="choose()"
+			/>
+		</section>
+	</XContainer>
 </template>
 
 <script lang="ts" setup>
+import { onMounted } from "vue";
+import XContainer from "../page-editor.container.vue";
+import MkDriveFileThumbnail from "@/components/MkDriveFileThumbnail.vue";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
 
-import { onMounted } from 'vue';
-import XContainer from '../page-editor.container.vue';
-import MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-
-const props = withDefaults(defineProps<{
-	value: any
-}>(), {
-	value: {
-		fileId: null
+const props = withDefaults(
+	defineProps<{
+		value: any;
+	}>(),
+	{
+		value: {
+			fileId: null,
+		},
 	}
-});
+);
 
 let file: any = $ref(null);
 
@@ -43,9 +53,9 @@ onMounted(async () => {
 	if (props.value.fileId == null) {
 		await choose();
 	} else {
-		os.api('drive/files/show', {
-			fileId: props.value.fileId
-		}).then(fileResponse => {
+		os.api("drive/files/show", {
+			fileId: props.value.fileId,
+		}).then((fileResponse) => {
 			file = fileResponse;
 		});
 	}
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.note.vue b/packages/client/src/pages/page-editor/els/page-editor.el.note.vue
index 323ac93a86..b9618501b9 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.note.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.note.vue
@@ -1,53 +1,79 @@
 <template>
+	<XContainer :draggable="true" @remove="() => $emit('remove')">
+		<template #header
+			><i class="ph-sticker ph-bold ph-lg"></i>
+			{{ i18n.ts._pages.blocks.note }}</template
+		>
 
-<XContainer :draggable="true" @remove="() => $emit('remove')">
-	<template #header><i class="ph-sticker ph-bold ph-lg"></i> {{ i18n.ts._pages.blocks.note }}</template>
+		<section style="padding: 0 16px 0 16px">
+			<MkInput v-model="id">
+				<template #label>{{ i18n.ts._pages.blocks._note.id }}</template>
+				<template #caption>{{
+					i18n.ts._pages.blocks._note.idDescription
+				}}</template>
+			</MkInput>
+			<MkSwitch v-model="value.detailed"
+				><span>{{
+					i18n.ts._pages.blocks._note.detailed
+				}}</span></MkSwitch
+			>
 
-	<section style="padding: 0 16px 0 16px;">
-		<MkInput v-model="id">
-			<template #label>{{ i18n.ts._pages.blocks._note.id }}</template>
-			<template #caption>{{ i18n.ts._pages.blocks._note.idDescription }}</template>
-		</MkInput>
-		<MkSwitch v-model="value.detailed"><span>{{ i18n.ts._pages.blocks._note.detailed }}</span></MkSwitch>
-
-		<XNote v-if="note && !value.detailed" :key="note.id + ':normal'" v-model:note="note" style="margin-bottom: 16px;"/>
-		<XNoteDetailed v-if="note && value.detailed" :key="note.id + ':detail'" v-model:note="note" style="margin-bottom: 16px;"/>
-	</section>
-</XContainer>
+			<XNote
+				v-if="note && !value.detailed"
+				:key="note.id + ':normal'"
+				v-model:note="note"
+				style="margin-bottom: 16px"
+			/>
+			<XNoteDetailed
+				v-if="note && value.detailed"
+				:key="note.id + ':detail'"
+				v-model:note="note"
+				style="margin-bottom: 16px"
+			/>
+		</section>
+	</XContainer>
 </template>
 
 <script lang="ts" setup>
+import { watch } from "vue";
+import XContainer from "../page-editor.container.vue";
+import MkInput from "@/components/form/input.vue";
+import MkSwitch from "@/components/form/switch.vue";
+import XNote from "@/components/MkNote.vue";
+import XNoteDetailed from "@/components/MkNoteDetailed.vue";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
 
-import { watch } from 'vue';
-import XContainer from '../page-editor.container.vue';
-import MkInput from '@/components/form/input.vue';
-import MkSwitch from '@/components/form/switch.vue';
-import XNote from '@/components/MkNote.vue';
-import XNoteDetailed from '@/components/MkNoteDetailed.vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-
-const props = withDefaults(defineProps<{
-	value: any
-}>(), {
-	value: {
-		note: null,
-		detailed: false
+const props = withDefaults(
+	defineProps<{
+		value: any;
+	}>(),
+	{
+		value: {
+			note: null,
+			detailed: false,
+		},
 	}
-});
+);
 
 let id: any = $ref(props.value.note);
 let note: any = $ref(null);
 
-watch(id, async () => {
-	if (id && (id.startsWith('http://') || id.startsWith('https://'))) {
-		props.value.note = (id.endsWith('/') ? id.slice(0, -1) : id).split('/').pop();
-	} else {
-		props.value.note = id;
-	}
+watch(
+	id,
+	async () => {
+		if (id && (id.startsWith("http://") || id.startsWith("https://"))) {
+			props.value.note = (id.endsWith("/") ? id.slice(0, -1) : id)
+				.split("/")
+				.pop();
+		} else {
+			props.value.note = id;
+		}
 
-	note = await os.api('notes/show', { noteId: props.value.note });
-}, {
-	immediate: true
-});
+		note = await os.api("notes/show", { noteId: props.value.note });
+	},
+	{
+		immediate: true,
+	}
+);
 </script>
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.number-input.vue b/packages/client/src/pages/page-editor/els/page-editor.el.number-input.vue
index 98d23cb453..aab3ba55f2 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.number-input.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.number-input.vue
@@ -1,35 +1,47 @@
 <template>
+	<XContainer :draggable="true" @remove="() => $emit('remove')">
+		<template #header
+			><i class="ph-lightning ph-bold ph-lg"></i>
+			{{ i18n.ts._pages.blocks.numberInput }}</template
+		>
 
-<XContainer :draggable="true" @remove="() => $emit('remove')">
-	<template #header><i class="ph-lightning ph-bold ph-lg"></i> {{ i18n.ts._pages.blocks.numberInput }}</template>
-
-	<section style="padding: 0 16px 0 16px;">
-		<MkInput v-model="value.name">
-			<template #prefix><i class="ph-magic-wand ph-bold ph-lg"></i></template>
-			<template #label>{{ i18n.ts._pages.blocks._numberInput.name }}</template>
-		</MkInput>
-		<MkInput v-model="value.text">
-			<template #label>{{ i18n.ts._pages.blocks._numberInput.text }}</template>
-		</MkInput>
-		<MkInput v-model="value.default" type="number">
-			<template #label>{{ i18n.ts._pages.blocks._numberInput.default }}</template>
-		</MkInput>
-	</section>
-</XContainer>
+		<section style="padding: 0 16px 0 16px">
+			<MkInput v-model="value.name">
+				<template #prefix
+					><i class="ph-magic-wand ph-bold ph-lg"></i
+				></template>
+				<template #label>{{
+					i18n.ts._pages.blocks._numberInput.name
+				}}</template>
+			</MkInput>
+			<MkInput v-model="value.text">
+				<template #label>{{
+					i18n.ts._pages.blocks._numberInput.text
+				}}</template>
+			</MkInput>
+			<MkInput v-model="value.default" type="number">
+				<template #label>{{
+					i18n.ts._pages.blocks._numberInput.default
+				}}</template>
+			</MkInput>
+		</section>
+	</XContainer>
 </template>
 
 <script lang="ts" setup>
+import {} from "vue";
+import XContainer from "../page-editor.container.vue";
+import MkInput from "@/components/form/input.vue";
+import { i18n } from "@/i18n";
 
-import { } from 'vue';
-import XContainer from '../page-editor.container.vue';
-import MkInput from '@/components/form/input.vue';
-import { i18n } from '@/i18n';
-
-withDefaults(defineProps<{
-	value: any
-}>(), {
-	value: {
-		name: ''
+withDefaults(
+	defineProps<{
+		value: any;
+	}>(),
+	{
+		value: {
+			name: "",
+		},
 	}
-});
+);
 </script>
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.post.vue b/packages/client/src/pages/page-editor/els/page-editor.el.post.vue
index 9828c99d1a..27129d65cf 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.post.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.post.vue
@@ -1,32 +1,48 @@
 <template>
+	<XContainer :draggable="true" @remove="() => $emit('remove')">
+		<template #header
+			><i class="ph-paper-plane-tilt ph-bold ph-lg"></i>
+			{{ i18n.ts._pages.blocks.post }}</template
+		>
 
-<XContainer :draggable="true" @remove="() => $emit('remove')">
-	<template #header><i class="ph-paper-plane-tilt ph-bold ph-lg"></i> {{ i18n.ts._pages.blocks.post }}</template>
-
-	<section style="padding: 16px;">
-		<MkTextarea v-model="value.text"><template #label>{{ i18n.ts._pages.blocks._post.text }}</template></MkTextarea>
-		<MkSwitch v-model="value.attachCanvasImage"><span>{{ i18n.ts._pages.blocks._post.attachCanvasImage }}</span></MkSwitch>
-		<MkInput v-if="value.attachCanvasImage" v-model="value.canvasId"><template #label>{{ i18n.ts._pages.blocks._post.canvasId }}</template></MkInput>
-	</section>
-</XContainer>
+		<section style="padding: 16px">
+			<MkTextarea v-model="value.text"
+				><template #label>{{
+					i18n.ts._pages.blocks._post.text
+				}}</template></MkTextarea
+			>
+			<MkSwitch v-model="value.attachCanvasImage"
+				><span>{{
+					i18n.ts._pages.blocks._post.attachCanvasImage
+				}}</span></MkSwitch
+			>
+			<MkInput v-if="value.attachCanvasImage" v-model="value.canvasId"
+				><template #label>{{
+					i18n.ts._pages.blocks._post.canvasId
+				}}</template></MkInput
+			>
+		</section>
+	</XContainer>
 </template>
 
 <script lang="ts" setup>
+import {} from "vue";
+import XContainer from "../page-editor.container.vue";
+import MkTextarea from "@/components/form/textarea.vue";
+import MkInput from "@/components/form/input.vue";
+import MkSwitch from "@/components/form/switch.vue";
+import { i18n } from "@/i18n";
 
-import { } from 'vue';
-import XContainer from '../page-editor.container.vue';
-import MkTextarea from '@/components/form/textarea.vue';
-import MkInput from '@/components/form/input.vue';
-import MkSwitch from '@/components/form/switch.vue';
-import { i18n } from '@/i18n';
-
-withDefaults(defineProps<{
-	value: any
-}>(), {
-	value: {
-		text: '',
-		attachCanvasImage: false,
-		canvasId: ''
+withDefaults(
+	defineProps<{
+		value: any;
+	}>(),
+	{
+		value: {
+			text: "",
+			attachCanvasImage: false,
+			canvasId: "",
+		},
 	}
-});
+);
 </script>
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.radio-button.vue b/packages/client/src/pages/page-editor/els/page-editor.el.radio-button.vue
index 852c3d60c3..62254b7d95 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.radio-button.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.radio-button.vue
@@ -1,40 +1,66 @@
 <template>
+	<XContainer :draggable="true" @remove="() => $emit('remove')">
+		<template #header
+			><i class="ph-lightning ph-bold ph-lg"></i>
+			{{ i18n.ts._pages.blocks.radioButton }}</template
+		>
 
-<XContainer :draggable="true" @remove="() => $emit('remove')">
-	<template #header><i class="ph-lightning ph-bold ph-lg"></i> {{ i18n.ts._pages.blocks.radioButton }}</template>
-
-	<section style="padding: 0 16px 16px 16px;">
-		<MkInput v-model="value.name"><template #prefix><i class="ph-magic-wand ph-bold ph-lg"></i></template><template #label>{{ i18n.ts._pages.blocks._radioButton.name }}</template></MkInput>
-		<MkInput v-model="value.title"><template #label>{{ i18n.ts._pages.blocks._radioButton.title }}</template></MkInput>
-		<MkTextarea v-model="values"><template #label>{{ i18n.ts._pages.blocks._radioButton.values }}</template></MkTextarea>
-		<MkInput v-model="value.default"><template #label>{{ i18n.ts._pages.blocks._radioButton.default }}</template></MkInput>
-	</section>
-</XContainer>
+		<section style="padding: 0 16px 16px 16px">
+			<MkInput v-model="value.name"
+				><template #prefix
+					><i class="ph-magic-wand ph-bold ph-lg"></i></template
+				><template #label>{{
+					i18n.ts._pages.blocks._radioButton.name
+				}}</template></MkInput
+			>
+			<MkInput v-model="value.title"
+				><template #label>{{
+					i18n.ts._pages.blocks._radioButton.title
+				}}</template></MkInput
+			>
+			<MkTextarea v-model="values"
+				><template #label>{{
+					i18n.ts._pages.blocks._radioButton.values
+				}}</template></MkTextarea
+			>
+			<MkInput v-model="value.default"
+				><template #label>{{
+					i18n.ts._pages.blocks._radioButton.default
+				}}</template></MkInput
+			>
+		</section>
+	</XContainer>
 </template>
 
 <script lang="ts" setup>
+import { watch } from "vue";
+import XContainer from "../page-editor.container.vue";
+import MkTextarea from "@/components/form/textarea.vue";
+import MkInput from "@/components/form/input.vue";
+import { i18n } from "@/i18n";
 
-import { watch } from 'vue';
-import XContainer from '../page-editor.container.vue';
-import MkTextarea from '@/components/form/textarea.vue';
-import MkInput from '@/components/form/input.vue';
-import { i18n } from '@/i18n';
-
-const props = withDefaults(defineProps<{
-	value: any
-}>(), {
-	value: {
-		name: '',
-		title: '',
-		values: []
+const props = withDefaults(
+	defineProps<{
+		value: any;
+	}>(),
+	{
+		value: {
+			name: "",
+			title: "",
+			values: [],
+		},
 	}
-});
+);
 
-let values: string = $ref(props.value.values.join('\n'));
+let values: string = $ref(props.value.values.join("\n"));
 
-watch(values, () => {
-	props.value.values = values.split('\n');
-}, {
-	deep: true
-});
+watch(
+	values,
+	() => {
+		props.value.values = values.split("\n");
+	},
+	{
+		deep: true,
+	}
+);
 </script>
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.section.vue b/packages/client/src/pages/page-editor/els/page-editor.el.section.vue
index ee88d8a052..3db5a7d0f3 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.section.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.section.vue
@@ -1,48 +1,52 @@
 <template>
+	<XContainer :draggable="true" @remove="() => $emit('remove')">
+		<template #header
+			><i class="ph-sticker ph-bold ph-lg"></i>
+			{{ value.title }}</template
+		>
+		<template #func>
+			<button class="_button" @click="rename()">
+				<i class="ph-pencil ph-bold ph-lg"></i>
+			</button>
+			<button class="_button" @click="add()">
+				<i class="ph-plus ph-bold ph-lg"></i>
+			</button>
+		</template>
 
-<XContainer :draggable="true" @remove="() => $emit('remove')">
-	<template #header><i class="ph-sticker ph-bold ph-lg"></i> {{ value.title }}</template>
-	<template #func>
-		<button class="_button" @click="rename()">
-			<i class="ph-pencil ph-bold ph-lg"></i>
-		</button>
-		<button class="_button" @click="add()">
-			<i class="ph-plus ph-bold ph-lg"></i>
-		</button>
-	</template>
-
-	<section class="ilrvjyvi">
-		<XBlocks v-model="value.children" class="children" :hpml="hpml"/>
-	</section>
-</XContainer>
+		<section class="ilrvjyvi">
+			<XBlocks v-model="value.children" class="children" :hpml="hpml" />
+		</section>
+	</XContainer>
 </template>
 
 <script lang="ts" setup>
+import { defineAsyncComponent, inject, onMounted } from "vue";
+import { v4 as uuid } from "uuid";
+import XContainer from "../page-editor.container.vue";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
 
-import { defineAsyncComponent, inject, onMounted } from 'vue';
-import { v4 as uuid } from 'uuid';
-import XContainer from '../page-editor.container.vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
+const XBlocks = defineAsyncComponent(() => import("../page-editor.blocks.vue"));
 
-const XBlocks = defineAsyncComponent(() => import('../page-editor.blocks.vue'));
-
-const props = withDefaults(defineProps<{
-	value: any,
-	hpml: any
-}>(), {
-	value: {
-		title: null,
-		children: []
+const props = withDefaults(
+	defineProps<{
+		value: any;
+		hpml: any;
+	}>(),
+	{
+		value: {
+			title: null,
+			children: [],
+		},
 	}
-});
+);
 
-const getPageBlockList = inject<(any) => any>('getPageBlockList');
+const getPageBlockList = inject<(any) => any>("getPageBlockList");
 
 async function rename() {
 	const { canceled, result: title } = await os.inputText({
-		title: 'Enter title',
-		default: props.value.title
+		title: "Enter title",
+		default: props.value.title,
 	});
 	if (canceled) return;
 	props.value.title = title;
@@ -51,7 +55,7 @@ async function rename() {
 async function add() {
 	const { canceled, result: type } = await os.select({
 		title: i18n.ts._pages.chooseBlock,
-		groupedItems: getPageBlockList()
+		groupedItems: getPageBlockList(),
 	});
 	if (canceled) return;
 
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.switch.vue b/packages/client/src/pages/page-editor/els/page-editor.el.switch.vue
index cc7aabbfe1..78302e9b9d 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.switch.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.switch.vue
@@ -1,31 +1,49 @@
 <template>
+	<XContainer :draggable="true" @remove="() => $emit('remove')">
+		<template #header
+			><i class="ph-lightning ph-bold ph-lg"></i>
+			{{ i18n.ts._pages.blocks.switch }}</template
+		>
 
-<XContainer :draggable="true" @remove="() => $emit('remove')">
-	<template #header><i class="ph-lightning ph-bold ph-lg"></i> {{ i18n.ts._pages.blocks.switch }}</template>
-
-	<section class="kjuadyyj">
-		<MkInput v-model="value.name"><template #prefix><i class="ph-magic-wand ph-bold ph-lg"></i></template><template #label>{{ i18n.ts._pages.blocks._switch.name }}</template></MkInput>
-		<MkInput v-model="value.text"><template #label>{{ i18n.ts._pages.blocks._switch.text }}</template></MkInput>
-		<MkSwitch v-model="value.default"><span>{{ i18n.ts._pages.blocks._switch.default }}</span></MkSwitch>
-	</section>
-</XContainer>
+		<section class="kjuadyyj">
+			<MkInput v-model="value.name"
+				><template #prefix
+					><i class="ph-magic-wand ph-bold ph-lg"></i></template
+				><template #label>{{
+					i18n.ts._pages.blocks._switch.name
+				}}</template></MkInput
+			>
+			<MkInput v-model="value.text"
+				><template #label>{{
+					i18n.ts._pages.blocks._switch.text
+				}}</template></MkInput
+			>
+			<MkSwitch v-model="value.default"
+				><span>{{
+					i18n.ts._pages.blocks._switch.default
+				}}</span></MkSwitch
+			>
+		</section>
+	</XContainer>
 </template>
 
 <script lang="ts" setup>
+import {} from "vue";
+import XContainer from "../page-editor.container.vue";
+import MkSwitch from "@/components/form/switch.vue";
+import MkInput from "@/components/form/input.vue";
+import { i18n } from "@/i18n";
 
-import { } from 'vue';
-import XContainer from '../page-editor.container.vue';
-import MkSwitch from '@/components/form/switch.vue';
-import MkInput from '@/components/form/input.vue';
-import { i18n } from '@/i18n';
-
-withDefaults(defineProps<{
-	value: any
-}>(), {
-	value: {
-		name: ''
+withDefaults(
+	defineProps<{
+		value: any;
+	}>(),
+	{
+		value: {
+			name: "",
+		},
 	}
-});
+);
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.text-input.vue b/packages/client/src/pages/page-editor/els/page-editor.el.text-input.vue
index f1a6fbd8d9..e2b14b8fbc 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.text-input.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.text-input.vue
@@ -1,28 +1,46 @@
 <template>
+	<XContainer :draggable="true" @remove="() => $emit('remove')">
+		<template #header
+			><i class="ph-lightning ph-bold ph-lg"></i>
+			{{ i18n.ts._pages.blocks.textInput }}</template
+		>
 
-<XContainer :draggable="true" @remove="() => $emit('remove')">
-	<template #header><i class="ph-lightning ph-bold ph-lg"></i> {{ i18n.ts._pages.blocks.textInput }}</template>
-
-	<section style="padding: 0 16px 0 16px;">
-		<MkInput v-model="value.name"><template #prefix><i class="ph-magic-wand ph-bold ph-lg"></i></template><template #label>{{ i18n.ts._pages.blocks._textInput.name }}</template></MkInput>
-		<MkInput v-model="value.text"><template #label>{{ i18n.ts._pages.blocks._textInput.text }}</template></MkInput>
-		<MkInput v-model="value.default" type="text"><template #label>{{ i18n.ts._pages.blocks._textInput.default }}</template></MkInput>
-	</section>
-</XContainer>
+		<section style="padding: 0 16px 0 16px">
+			<MkInput v-model="value.name"
+				><template #prefix
+					><i class="ph-magic-wand ph-bold ph-lg"></i></template
+				><template #label>{{
+					i18n.ts._pages.blocks._textInput.name
+				}}</template></MkInput
+			>
+			<MkInput v-model="value.text"
+				><template #label>{{
+					i18n.ts._pages.blocks._textInput.text
+				}}</template></MkInput
+			>
+			<MkInput v-model="value.default" type="text"
+				><template #label>{{
+					i18n.ts._pages.blocks._textInput.default
+				}}</template></MkInput
+			>
+		</section>
+	</XContainer>
 </template>
 
 <script lang="ts" setup>
+import {} from "vue";
+import XContainer from "../page-editor.container.vue";
+import MkInput from "@/components/form/input.vue";
+import { i18n } from "@/i18n";
 
-import { } from 'vue';
-import XContainer from '../page-editor.container.vue';
-import MkInput from '@/components/form/input.vue';
-import { i18n } from '@/i18n';
-
-withDefaults(defineProps<{
-	value: any
-}>(), {
-	value: {
-		name: ''
+withDefaults(
+	defineProps<{
+		value: any;
+	}>(),
+	{
+		value: {
+			name: "",
+		},
 	}
-});
+);
 </script>
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.text.vue b/packages/client/src/pages/page-editor/els/page-editor.el.text.vue
index bbe01c9ed8..08572b3eea 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.text.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.text.vue
@@ -1,27 +1,31 @@
 <template>
+	<XContainer :draggable="true" @remove="() => $emit('remove')">
+		<template #header
+			><i class="ph-align-left ph-bold ph-lg"></i>
+			{{ i18n.ts._pages.blocks.text }}</template
+		>
 
-<XContainer :draggable="true" @remove="() => $emit('remove')">
-	<template #header><i class="ph-align-left ph-bold ph-lg"></i> {{ i18n.ts._pages.blocks.text }}</template>
-
-	<section class="vckmsadr">
-		<textarea v-model="value.text"></textarea>
-	</section>
-</XContainer>
+		<section class="vckmsadr">
+			<textarea v-model="value.text"></textarea>
+		</section>
+	</XContainer>
 </template>
 
 <script lang="ts" setup>
+import {} from "vue";
+import XContainer from "../page-editor.container.vue";
+import { i18n } from "@/i18n";
 
-import { } from 'vue';
-import XContainer from '../page-editor.container.vue';
-import { i18n } from '@/i18n';
-
-withDefaults(defineProps<{
-	value: any
-}>(), {
-	value: {
-		text: ''
+withDefaults(
+	defineProps<{
+		value: any;
+	}>(),
+	{
+		value: {
+			text: "",
+		},
 	}
-});
+);
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.textarea-input.vue b/packages/client/src/pages/page-editor/els/page-editor.el.textarea-input.vue
index e48512815e..5f020f7137 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.textarea-input.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.textarea-input.vue
@@ -1,29 +1,47 @@
 <template>
+	<XContainer :draggable="true" @remove="() => $emit('remove')">
+		<template #header
+			><i class="ph-lightning ph-bold ph-lg"></i>
+			{{ i18n.ts._pages.blocks.textareaInput }}</template
+		>
 
-<XContainer :draggable="true" @remove="() => $emit('remove')">
-	<template #header><i class="ph-lightning ph-bold ph-lg"></i> {{ i18n.ts._pages.blocks.textareaInput }}</template>
-
-	<section style="padding: 0 16px 16px 16px;">
-		<MkInput v-model="value.name"><template #prefix><i class="ph-magic-wand ph-bold ph-lg"></i></template><template #label>{{ i18n.ts._pages.blocks._textareaInput.name }}</template></MkInput>
-		<MkInput v-model="value.text"><template #label>{{ i18n.ts._pages.blocks._textareaInput.text }}</template></MkInput>
-		<MkTextarea v-model="value.default"><template #label>{{ i18n.ts._pages.blocks._textareaInput.default }}</template></MkTextarea>
-	</section>
-</XContainer>
+		<section style="padding: 0 16px 16px 16px">
+			<MkInput v-model="value.name"
+				><template #prefix
+					><i class="ph-magic-wand ph-bold ph-lg"></i></template
+				><template #label>{{
+					i18n.ts._pages.blocks._textareaInput.name
+				}}</template></MkInput
+			>
+			<MkInput v-model="value.text"
+				><template #label>{{
+					i18n.ts._pages.blocks._textareaInput.text
+				}}</template></MkInput
+			>
+			<MkTextarea v-model="value.default"
+				><template #label>{{
+					i18n.ts._pages.blocks._textareaInput.default
+				}}</template></MkTextarea
+			>
+		</section>
+	</XContainer>
 </template>
 
 <script lang="ts" setup>
+import {} from "vue";
+import XContainer from "../page-editor.container.vue";
+import MkTextarea from "@/components/form/textarea.vue";
+import MkInput from "@/components/form/input.vue";
+import { i18n } from "@/i18n";
 
-import { } from 'vue';
-import XContainer from '../page-editor.container.vue';
-import MkTextarea from '@/components/form/textarea.vue';
-import MkInput from '@/components/form/input.vue';
-import { i18n } from '@/i18n';
-
-withDefaults(defineProps<{
-	value: any
-}>(), {
-	value: {
-		name: ''
+withDefaults(
+	defineProps<{
+		value: any;
+	}>(),
+	{
+		value: {
+			name: "",
+		},
 	}
-});
+);
 </script>
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.textarea.vue b/packages/client/src/pages/page-editor/els/page-editor.el.textarea.vue
index cdae20a2e2..3c956f0912 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.textarea.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.textarea.vue
@@ -1,27 +1,31 @@
 <template>
+	<XContainer :draggable="true" @remove="() => $emit('remove')">
+		<template #header
+			><i class="ph-align-left ph-bold ph-lg"></i>
+			{{ i18n.ts._pages.blocks.textarea }}</template
+		>
 
-<XContainer :draggable="true" @remove="() => $emit('remove')">
-	<template #header><i class="ph-align-left ph-bold ph-lg"></i> {{ i18n.ts._pages.blocks.textarea }}</template>
-
-	<section class="ihymsbbe">
-		<textarea v-model="value.text"></textarea>
-	</section>
-</XContainer>
+		<section class="ihymsbbe">
+			<textarea v-model="value.text"></textarea>
+		</section>
+	</XContainer>
 </template>
 
 <script lang="ts" setup>
+import {} from "vue";
+import XContainer from "../page-editor.container.vue";
+import { i18n } from "@/i18n";
 
-import { } from 'vue';
-import XContainer from '../page-editor.container.vue';
-import { i18n } from '@/i18n';
-
-withDefaults(defineProps<{
-	value: any
-}>(), {
-	value: {
-		text: ''
+withDefaults(
+	defineProps<{
+		value: any;
+	}>(),
+	{
+		value: {
+			text: "",
+		},
 	}
-});
+);
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/pages/page-editor/page-editor.blocks.vue b/packages/client/src/pages/page-editor/page-editor.blocks.vue
index dc363fe251..2200b4a37f 100644
--- a/packages/client/src/pages/page-editor/page-editor.blocks.vue
+++ b/packages/client/src/pages/page-editor/page-editor.blocks.vue
@@ -1,47 +1,77 @@
 <template>
-<XDraggable v-model="blocks" tag="div" item-key="id" handle=".drag-handle" :group="{ name: 'blocks' }" animation="150" swap-threshold="0.5">
-	<template #item="{element}">
-		<component :is="'x-' + element.type" :value="element" :hpml="hpml" @update:value="updateItem" @remove="() => removeItem(element)"/>
-	</template>
-</XDraggable>
+	<XDraggable
+		v-model="blocks"
+		tag="div"
+		item-key="id"
+		handle=".drag-handle"
+		:group="{ name: 'blocks' }"
+		animation="150"
+		swap-threshold="0.5"
+	>
+		<template #item="{ element }">
+			<component
+				:is="'x-' + element.type"
+				:value="element"
+				:hpml="hpml"
+				@update:value="updateItem"
+				@remove="() => removeItem(element)"
+			/>
+		</template>
+	</XDraggable>
 </template>
 
 <script lang="ts">
-import { defineComponent, defineAsyncComponent } from 'vue';
-import XSection from './els/page-editor.el.section.vue';
-import XText from './els/page-editor.el.text.vue';
-import XTextarea from './els/page-editor.el.textarea.vue';
-import XImage from './els/page-editor.el.image.vue';
-import XButton from './els/page-editor.el.button.vue';
-import XTextInput from './els/page-editor.el.text-input.vue';
-import XTextareaInput from './els/page-editor.el.textarea-input.vue';
-import XNumberInput from './els/page-editor.el.number-input.vue';
-import XSwitch from './els/page-editor.el.switch.vue';
-import XIf from './els/page-editor.el.if.vue';
-import XPost from './els/page-editor.el.post.vue';
-import XCounter from './els/page-editor.el.counter.vue';
-import XRadioButton from './els/page-editor.el.radio-button.vue';
-import XCanvas from './els/page-editor.el.canvas.vue';
-import XNote from './els/page-editor.el.note.vue';
-import * as os from '@/os';
+import { defineComponent, defineAsyncComponent } from "vue";
+import XSection from "./els/page-editor.el.section.vue";
+import XText from "./els/page-editor.el.text.vue";
+import XTextarea from "./els/page-editor.el.textarea.vue";
+import XImage from "./els/page-editor.el.image.vue";
+import XButton from "./els/page-editor.el.button.vue";
+import XTextInput from "./els/page-editor.el.text-input.vue";
+import XTextareaInput from "./els/page-editor.el.textarea-input.vue";
+import XNumberInput from "./els/page-editor.el.number-input.vue";
+import XSwitch from "./els/page-editor.el.switch.vue";
+import XIf from "./els/page-editor.el.if.vue";
+import XPost from "./els/page-editor.el.post.vue";
+import XCounter from "./els/page-editor.el.counter.vue";
+import XRadioButton from "./els/page-editor.el.radio-button.vue";
+import XCanvas from "./els/page-editor.el.canvas.vue";
+import XNote from "./els/page-editor.el.note.vue";
+import * as os from "@/os";
 
 export default defineComponent({
 	components: {
-		XDraggable: defineAsyncComponent(() => import('vuedraggable').then(x => x.default)),
-		XSection, XText, XImage, XButton, XTextarea, XTextInput, XTextareaInput, XNumberInput, XSwitch, XIf, XPost, XCounter, XRadioButton, XCanvas, XNote
+		XDraggable: defineAsyncComponent(() =>
+			import("vuedraggable").then((x) => x.default)
+		),
+		XSection,
+		XText,
+		XImage,
+		XButton,
+		XTextarea,
+		XTextInput,
+		XTextareaInput,
+		XNumberInput,
+		XSwitch,
+		XIf,
+		XPost,
+		XCounter,
+		XRadioButton,
+		XCanvas,
+		XNote,
 	},
 
 	props: {
 		modelValue: {
 			type: Array,
-			required: true
+			required: true,
 		},
 		hpml: {
 			required: true,
 		},
 	},
 
-	emits: ['update:modelValue'],
+	emits: ["update:modelValue"],
 
 	computed: {
 		blocks: {
@@ -49,30 +79,30 @@ export default defineComponent({
 				return this.modelValue;
 			},
 			set(value) {
-				this.$emit('update:modelValue', value);
-			}
-		}
+				this.$emit("update:modelValue", value);
+			},
+		},
 	},
 
 	methods: {
 		updateItem(v) {
-			const i = this.blocks.findIndex(x => x.id === v.id);
+			const i = this.blocks.findIndex((x) => x.id === v.id);
 			const newValue = [
 				...this.blocks.slice(0, i),
 				v,
-				...this.blocks.slice(i + 1)
+				...this.blocks.slice(i + 1),
 			];
-			this.$emit('update:modelValue', newValue);
+			this.$emit("update:modelValue", newValue);
 		},
 
 		removeItem(el) {
-			const i = this.blocks.findIndex(x => x.id === el.id);
+			const i = this.blocks.findIndex((x) => x.id === el.id);
 			const newValue = [
 				...this.blocks.slice(0, i),
-				...this.blocks.slice(i + 1)
+				...this.blocks.slice(i + 1),
 			];
-			this.$emit('update:modelValue', newValue);
+			this.$emit("update:modelValue", newValue);
 		},
-	}
+	},
 });
 </script>
diff --git a/packages/client/src/pages/page-editor/page-editor.container.vue b/packages/client/src/pages/page-editor/page-editor.container.vue
index af0c588b3f..400c705d69 100644
--- a/packages/client/src/pages/page-editor/page-editor.container.vue
+++ b/packages/client/src/pages/page-editor/page-editor.container.vue
@@ -1,32 +1,50 @@
 <template>
-<div class="cpjygsrt" :class="{ error: error != null, warn: warn != null }">
-	<header>
-		<div class="title"><slot name="header"></slot></div>
-		<div class="buttons">
-			<slot name="func"></slot>
-			<button v-if="removable" class="_button" @click="remove()">
-				<i class="ph-trash ph-bold ph-lg"></i>
-			</button>
-			<button v-if="draggable" class="drag-handle _button">
-				<i class="ph-list ph-bold ph-lg"></i>
-			</button>
-			<button class="_button" @click="toggleContent(!showBody)">
-				<template v-if="showBody"><i class="ph-caret-up ph-bold ph-lg"></i></template>
-				<template v-else><i class="ph-caret-down ph-bold ph-lg"></i></template>
-			</button>
+	<div class="cpjygsrt" :class="{ error: error != null, warn: warn != null }">
+		<header>
+			<div class="title"><slot name="header"></slot></div>
+			<div class="buttons">
+				<slot name="func"></slot>
+				<button v-if="removable" class="_button" @click="remove()">
+					<i class="ph-trash ph-bold ph-lg"></i>
+				</button>
+				<button v-if="draggable" class="drag-handle _button">
+					<i class="ph-list ph-bold ph-lg"></i>
+				</button>
+				<button class="_button" @click="toggleContent(!showBody)">
+					<template v-if="showBody"
+						><i class="ph-caret-up ph-bold ph-lg"></i
+					></template>
+					<template v-else
+						><i class="ph-caret-down ph-bold ph-lg"></i
+					></template>
+				</button>
+			</div>
+		</header>
+		<p v-show="showBody" v-if="error != null" class="error">
+			{{
+				i18n.t("_pages.script.typeError", {
+					slot: error.arg + 1,
+					expect: i18n.t(`script.types.${error.expect}`),
+					actual: i18n.t(`script.types.${error.actual}`),
+				})
+			}}
+		</p>
+		<p v-show="showBody" v-if="warn != null" class="warn">
+			{{
+				i18n.t("_pages.script.thereIsEmptySlot", {
+					slot: warn.slot + 1,
+				})
+			}}
+		</p>
+		<div v-show="showBody" class="body">
+			<slot></slot>
 		</div>
-	</header>
-	<p v-show="showBody" v-if="error != null" class="error">{{ i18n.t('_pages.script.typeError', { slot: error.arg + 1, expect: i18n.t(`script.types.${error.expect}`), actual: i18n.t(`script.types.${error.actual}`) }) }}</p>
-	<p v-show="showBody" v-if="warn != null" class="warn">{{ i18n.t('_pages.script.thereIsEmptySlot', { slot: warn.slot + 1 }) }}</p>
-	<div v-show="showBody" class="body">
-		<slot></slot>
 	</div>
-</div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
-import { i18n } from '@/i18n';
+import { defineComponent } from "vue";
+import { i18n } from "@/i18n";
 
 export default defineComponent({
 	props: {
@@ -51,7 +69,7 @@ export default defineComponent({
 			default: null,
 		},
 	},
-	emits: ['toggle', 'remove'],
+	emits: ["toggle", "remove"],
 	data() {
 		return {
 			showBody: this.expanded,
@@ -61,10 +79,10 @@ export default defineComponent({
 	methods: {
 		toggleContent(show: boolean) {
 			this.showBody = show;
-			this.$emit('toggle', show);
+			this.$emit("toggle", show);
 		},
 		remove() {
-			this.$emit('remove');
+			this.$emit("remove");
 		},
 	},
 });
@@ -147,7 +165,8 @@ export default defineComponent({
 	}
 
 	> .body {
-		::v-deep(.juejbjww), ::v-deep(.eiipwacr) {
+		::v-deep(.juejbjww),
+		::v-deep(.eiipwacr) {
 			&:not(.inline):first-child {
 				margin-top: 28px;
 			}
diff --git a/packages/client/src/pages/page-editor/page-editor.script-block.vue b/packages/client/src/pages/page-editor/page-editor.script-block.vue
index 2f437cf8b8..7d88ec7e79 100644
--- a/packages/client/src/pages/page-editor/page-editor.script-block.vue
+++ b/packages/client/src/pages/page-editor/page-editor.script-block.vue
@@ -1,95 +1,189 @@
 <template>
+	<XContainer
+		:removable="removable"
+		:error="error"
+		:warn="warn"
+		:draggable="draggable"
+		@remove="() => $emit('remove')"
+	>
+		<template #header
+			><i v-if="icon" :class="icon"></i>
+			<template v-if="title"
+				>{{ title }}
+				<span v-if="typeText" class="turmquns"
+					>({{ typeText }})</span
+				></template
+			><template v-else-if="typeText">{{ typeText }}</template></template
+		>
+		<template #func>
+			<button class="_button" @click="changeType()">
+				<i class="ph-pencil ph-bold ph-lg"></i>
+			</button>
+		</template>
 
-<XContainer :removable="removable" :error="error" :warn="warn" :draggable="draggable" @remove="() => $emit('remove')">
-	<template #header><i v-if="icon" :class="icon"></i> <template v-if="title">{{ title }} <span v-if="typeText" class="turmquns">({{ typeText }})</span></template><template v-else-if="typeText">{{ typeText }}</template></template>
-	<template #func>
-		<button class="_button" @click="changeType()">
-			<i class="ph-pencil ph-bold ph-lg"></i>
-		</button>
-	</template>
-
-	<section v-if="modelValue.type === null" class="pbglfege" @click="changeType()">
-		{{ i18n.ts._pages.script.emptySlot }}
-	</section>
-	<section v-else-if="modelValue.type === 'text'" class="tbwccoaw">
-		<input v-model="modelValue.value"/>
-	</section>
-	<section v-else-if="modelValue.type === 'multiLineText'" class="tbwccoaw">
-		<textarea v-model="modelValue.value"></textarea>
-	</section>
-	<section v-else-if="modelValue.type === 'textList'" class="tbwccoaw">
-		<textarea v-model="modelValue.value" :placeholder="i18n.ts._pages.script.blocks._textList.info"></textarea>
-	</section>
-	<section v-else-if="modelValue.type === 'number'" class="tbwccoaw">
-		<input v-model="modelValue.value" type="number"/>
-	</section>
-	<section v-else-if="modelValue.type === 'ref'" class="hpdwcrvs">
-		<select v-model="modelValue.value">
-			<option v-for="v in hpml.getVarsByType(getExpectedType ? getExpectedType() : null).filter(x => x.name !== name)" :value="v.name">{{ v.name }}</option>
-			<optgroup :label="i18n.ts._pages.script.argVariables">
-				<option v-for="v in fnSlots" :value="v.name">{{ v.name }}</option>
-			</optgroup>
-			<optgroup :label="i18n.ts._pages.script.pageVariables">
-				<option v-for="v in hpml.getPageVarsByType(getExpectedType ? getExpectedType() : null)" :value="v">{{ v }}</option>
-			</optgroup>
-			<optgroup :label="i18n.ts._pages.script.enviromentVariables">
-				<option v-for="v in hpml.getEnvVarsByType(getExpectedType ? getExpectedType() : null)" :value="v">{{ v }}</option>
-			</optgroup>
-		</select>
-	</section>
-	<section v-else-if="modelValue.type === 'aiScriptVar'" class="tbwccoaw">
-		<input v-model="modelValue.value"/>
-	</section>
-	<section v-else-if="modelValue.type === 'fn'" class="" style="padding:0 16px 16px 16px;">
-		<MkTextarea v-model="slots">
-			<template #label>{{ i18n.ts._pages.script.blocks._fn.slots }}</template>
-			<template #caption>{{ i18n.t('_pages.script.blocks._fn.slots-info') }}</template>
-		</MkTextarea>
-		<XV v-if="modelValue.value.expression" v-model="modelValue.value.expression" :title="i18n.t(`_pages.script.blocks._fn.arg1`)" :get-expected-type="() => null" :hpml="hpml" :fn-slots="modelValue.value.slots" :name="name"/>
-	</section>
-	<section v-else-if="modelValue.type.startsWith('fn:')" class="" style="padding:16px;">
-		<XV v-for="(x, i) in modelValue.args" :key="i" v-model="modelValue.args[i]" :title="hpml.getVarByName(modelValue.type.split(':')[1]).value.slots[i].name" :get-expected-type="() => null" :hpml="hpml" :name="name"/>
-	</section>
-	<section v-else class="" style="padding:16px;">
-		<XV v-for="(x, i) in modelValue.args" :key="i" v-model="modelValue.args[i]" :title="i18n.t(`_pages.script.blocks._${modelValue.type}.arg${i + 1}`)" :get-expected-type="() => _getExpectedType(i)" :hpml="hpml" :name="name" :fn-slots="fnSlots"/>
-	</section>
-</XContainer>
+		<section
+			v-if="modelValue.type === null"
+			class="pbglfege"
+			@click="changeType()"
+		>
+			{{ i18n.ts._pages.script.emptySlot }}
+		</section>
+		<section v-else-if="modelValue.type === 'text'" class="tbwccoaw">
+			<input v-model="modelValue.value" />
+		</section>
+		<section
+			v-else-if="modelValue.type === 'multiLineText'"
+			class="tbwccoaw"
+		>
+			<textarea v-model="modelValue.value"></textarea>
+		</section>
+		<section v-else-if="modelValue.type === 'textList'" class="tbwccoaw">
+			<textarea
+				v-model="modelValue.value"
+				:placeholder="i18n.ts._pages.script.blocks._textList.info"
+			></textarea>
+		</section>
+		<section v-else-if="modelValue.type === 'number'" class="tbwccoaw">
+			<input v-model="modelValue.value" type="number" />
+		</section>
+		<section v-else-if="modelValue.type === 'ref'" class="hpdwcrvs">
+			<select v-model="modelValue.value">
+				<option
+					v-for="v in hpml
+						.getVarsByType(
+							getExpectedType ? getExpectedType() : null
+						)
+						.filter((x) => x.name !== name)"
+					:value="v.name"
+				>
+					{{ v.name }}
+				</option>
+				<optgroup :label="i18n.ts._pages.script.argVariables">
+					<option v-for="v in fnSlots" :value="v.name">
+						{{ v.name }}
+					</option>
+				</optgroup>
+				<optgroup :label="i18n.ts._pages.script.pageVariables">
+					<option
+						v-for="v in hpml.getPageVarsByType(
+							getExpectedType ? getExpectedType() : null
+						)"
+						:value="v"
+					>
+						{{ v }}
+					</option>
+				</optgroup>
+				<optgroup :label="i18n.ts._pages.script.enviromentVariables">
+					<option
+						v-for="v in hpml.getEnvVarsByType(
+							getExpectedType ? getExpectedType() : null
+						)"
+						:value="v"
+					>
+						{{ v }}
+					</option>
+				</optgroup>
+			</select>
+		</section>
+		<section v-else-if="modelValue.type === 'aiScriptVar'" class="tbwccoaw">
+			<input v-model="modelValue.value" />
+		</section>
+		<section
+			v-else-if="modelValue.type === 'fn'"
+			class=""
+			style="padding: 0 16px 16px 16px"
+		>
+			<MkTextarea v-model="slots">
+				<template #label>{{
+					i18n.ts._pages.script.blocks._fn.slots
+				}}</template>
+				<template #caption>{{
+					i18n.t("_pages.script.blocks._fn.slots-info")
+				}}</template>
+			</MkTextarea>
+			<XV
+				v-if="modelValue.value.expression"
+				v-model="modelValue.value.expression"
+				:title="i18n.t(`_pages.script.blocks._fn.arg1`)"
+				:get-expected-type="() => null"
+				:hpml="hpml"
+				:fn-slots="modelValue.value.slots"
+				:name="name"
+			/>
+		</section>
+		<section
+			v-else-if="modelValue.type.startsWith('fn:')"
+			class=""
+			style="padding: 16px"
+		>
+			<XV
+				v-for="(x, i) in modelValue.args"
+				:key="i"
+				v-model="modelValue.args[i]"
+				:title="
+					hpml.getVarByName(modelValue.type.split(':')[1]).value
+						.slots[i].name
+				"
+				:get-expected-type="() => null"
+				:hpml="hpml"
+				:name="name"
+			/>
+		</section>
+		<section v-else class="" style="padding: 16px">
+			<XV
+				v-for="(x, i) in modelValue.args"
+				:key="i"
+				v-model="modelValue.args[i]"
+				:title="
+					i18n.t(
+						`_pages.script.blocks._${modelValue.type}.arg${i + 1}`
+					)
+				"
+				:get-expected-type="() => _getExpectedType(i)"
+				:hpml="hpml"
+				:name="name"
+				:fn-slots="fnSlots"
+			/>
+		</section>
+	</XContainer>
 </template>
 
 <script lang="ts">
-
-import { defineAsyncComponent, defineComponent } from 'vue';
-import { v4 as uuid } from 'uuid';
-import XContainer from './page-editor.container.vue';
-import MkTextarea from '@/components/form/textarea.vue';
-import { blockDefs } from '@/scripts/hpml/index';
-import * as os from '@/os';
-import { isLiteralValue } from '@/scripts/hpml/expr';
-import { funcDefs } from '@/scripts/hpml/lib';
-import { i18n } from '@/i18n';
+import { defineAsyncComponent, defineComponent } from "vue";
+import { v4 as uuid } from "uuid";
+import XContainer from "./page-editor.container.vue";
+import MkTextarea from "@/components/form/textarea.vue";
+import { blockDefs } from "@/scripts/hpml/index";
+import * as os from "@/os";
+import { isLiteralValue } from "@/scripts/hpml/expr";
+import { funcDefs } from "@/scripts/hpml/lib";
+import { i18n } from "@/i18n";
 
 export default defineComponent({
 	components: {
-		XContainer, MkTextarea,
-		XV: defineAsyncComponent(() => import('./page-editor.script-block.vue')),
+		XContainer,
+		MkTextarea,
+		XV: defineAsyncComponent(
+			() => import("./page-editor.script-block.vue")
+		),
 	},
 
-	inject: ['getScriptBlockList'],
+	inject: ["getScriptBlockList"],
 
 	props: {
 		getExpectedType: {
 			required: false,
-			default: null
+			default: null,
 		},
 		modelValue: {
-			required: true
+			required: true,
 		},
 		title: {
-			required: false
+			required: false,
 		},
 		removable: {
 			required: false,
-			default: false
+			default: false,
 		},
 		hpml: {
 			required: true,
@@ -102,15 +196,15 @@ export default defineComponent({
 		},
 		draggable: {
 			required: false,
-			default: false
-		}
+			default: false,
+		},
 	},
 
 	data() {
 		return {
 			error: null,
 			warn: null,
-			slots: '',
+			slots: "",
 			i18n,
 		};
 	},
@@ -118,12 +212,14 @@ export default defineComponent({
 	computed: {
 		icon(): any {
 			if (this.modelValue.type === null) return null;
-			if (this.modelValue.type.startsWith('fn:')) return 'ph-plug ph-bold ph-lg';
-			return blockDefs.find(x => x.type === this.modelValue.type).icon;
+			if (this.modelValue.type.startsWith("fn:"))
+				return "ph-plug ph-bold ph-lg";
+			return blockDefs.find((x) => x.type === this.modelValue.type).icon;
 		},
 		typeText(): any {
 			if (this.modelValue.type === null) return null;
-			if (this.modelValue.type.startsWith('fn:')) return this.modelValue.type.split(':')[1];
+			if (this.modelValue.type.startsWith("fn:"))
+				return this.modelValue.type.split(":")[1];
 			return i18n.t(`_pages.script.blocks.${this.modelValue.type}`);
 		},
 	},
@@ -131,94 +227,125 @@ export default defineComponent({
 	watch: {
 		slots: {
 			handler() {
-				this.modelValue.value.slots = this.slots.split('\n').map(x => ({
-					name: x,
-					type: null
-				}));
+				this.modelValue.value.slots = this.slots
+					.split("\n")
+					.map((x) => ({
+						name: x,
+						type: null,
+					}));
 			},
-			deep: true
-		}
+			deep: true,
+		},
 	},
 
 	created() {
 		if (this.modelValue.value == null) this.modelValue.value = null;
 
-		if (this.modelValue.value && this.modelValue.value.slots) this.slots = this.modelValue.value.slots.map(x => x.name).join('\n');
+		if (this.modelValue.value && this.modelValue.value.slots)
+			this.slots = this.modelValue.value.slots
+				.map((x) => x.name)
+				.join("\n");
 
-		this.$watch(() => this.modelValue.type, (t) => {
-			this.warn = null;
+		this.$watch(
+			() => this.modelValue.type,
+			(t) => {
+				this.warn = null;
 
-			if (this.modelValue.type === 'fn') {
-				const id = uuid();
-				this.modelValue.value = {
-					slots: [],
-					expression: { id, type: null }
-				};
-				return;
-			}
+				if (this.modelValue.type === "fn") {
+					const id = uuid();
+					this.modelValue.value = {
+						slots: [],
+						expression: { id, type: null },
+					};
+					return;
+				}
 
-			if (this.modelValue.type && this.modelValue.type.startsWith('fn:')) {
-				const fnName = this.modelValue.type.split(':')[1];
-				const fn = this.hpml.getVarByName(fnName);
+				if (
+					this.modelValue.type &&
+					this.modelValue.type.startsWith("fn:")
+				) {
+					const fnName = this.modelValue.type.split(":")[1];
+					const fn = this.hpml.getVarByName(fnName);
+
+					const empties = [];
+					for (let i = 0; i < fn.value.slots.length; i++) {
+						const id = uuid();
+						empties.push({ id, type: null });
+					}
+					this.modelValue.args = empties;
+					return;
+				}
+
+				if (isLiteralValue(this.modelValue)) return;
 
 				const empties = [];
-				for (let i = 0; i < fn.value.slots.length; i++) {
+				for (
+					let i = 0;
+					i < funcDefs[this.modelValue.type].in.length;
+					i++
+				) {
 					const id = uuid();
 					empties.push({ id, type: null });
 				}
 				this.modelValue.args = empties;
-				return;
-			}
 
-			if (isLiteralValue(this.modelValue)) return;
-
-			const empties = [];
-			for (let i = 0; i < funcDefs[this.modelValue.type].in.length; i++) {
-				const id = uuid();
-				empties.push({ id, type: null });
-			}
-			this.modelValue.args = empties;
-
-			for (let i = 0; i < funcDefs[this.modelValue.type].in.length; i++) {
-				const inType = funcDefs[this.modelValue.type].in[i];
-				if (typeof inType !== 'number') {
-					if (inType === 'number') this.modelValue.args[i].type = 'number';
-					if (inType === 'string') this.modelValue.args[i].type = 'text';
+				for (
+					let i = 0;
+					i < funcDefs[this.modelValue.type].in.length;
+					i++
+				) {
+					const inType = funcDefs[this.modelValue.type].in[i];
+					if (typeof inType !== "number") {
+						if (inType === "number")
+							this.modelValue.args[i].type = "number";
+						if (inType === "string")
+							this.modelValue.args[i].type = "text";
+					}
 				}
 			}
-		});
+		);
 
-		this.$watch(() => this.modelValue.args, (args) => {
-			if (args == null) {
-				this.warn = null;
-				return;
+		this.$watch(
+			() => this.modelValue.args,
+			(args) => {
+				if (args == null) {
+					this.warn = null;
+					return;
+				}
+				const emptySlotIndex = args.findIndex((x) => x.type === null);
+				if (emptySlotIndex !== -1 && emptySlotIndex < args.length) {
+					this.warn = {
+						slot: emptySlotIndex,
+					};
+				} else {
+					this.warn = null;
+				}
+			},
+			{
+				deep: true,
 			}
-			const emptySlotIndex = args.findIndex(x => x.type === null);
-			if (emptySlotIndex !== -1 && emptySlotIndex < args.length) {
-				this.warn = {
-					slot: emptySlotIndex
-				};
-			} else {
-				this.warn = null;
-			}
-		}, {
-			deep: true
-		});
+		);
 
-		this.$watch(() => this.hpml.variables, () => {
-			if (this.type != null && this.modelValue) {
-				this.error = this.hpml.typeCheck(this.modelValue);
+		this.$watch(
+			() => this.hpml.variables,
+			() => {
+				if (this.type != null && this.modelValue) {
+					this.error = this.hpml.typeCheck(this.modelValue);
+				}
+			},
+			{
+				deep: true,
 			}
-		}, {
-			deep: true
-		});
+		);
 	},
 
 	methods: {
 		async changeType() {
 			const { canceled, result: type } = await os.select({
 				title: i18n.ts._pages.selectType,
-				groupedItems: this.getScriptBlockList(this.getExpectedType ? this.getExpectedType() : null)
+				groupedItems: this.getScriptBlockList(
+					this.getExpectedType ? this.getExpectedType() : null
+				),
 			});
 			if (canceled) return;
 			this.modelValue.type = type;
@@ -226,8 +353,8 @@ export default defineComponent({
 
 		_getExpectedType(slot: number) {
 			return this.hpml.getExpectedType(this.modelValue, slot);
-		}
-	}
+		},
+	},
 });
 </script>
 
diff --git a/packages/client/src/pages/page-editor/page-editor.vue b/packages/client/src/pages/page-editor/page-editor.vue
index 185b4347a0..da951b7203 100644
--- a/packages/client/src/pages/page-editor/page-editor.vue
+++ b/packages/client/src/pages/page-editor/page-editor.vue
@@ -1,108 +1,189 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
-	<MkSpacer :content-max="700">
-		<div class="jqqmcavi">
-			<MkButton v-if="pageId" class="button" inline link :to="`/@${ author.username }/pages/${ currentName }`"><i class="ph-arrow-square-out ph-bold ph-lg"></i> {{ i18n.ts._pages.viewPage }}</MkButton>
-			<MkButton v-if="!readonly" inline primary class="button" @click="save"><i class="ph-floppy-disk-back ph-bold ph-lg"></i> {{ i18n.ts.save }}</MkButton>
-			<MkButton v-if="pageId" inline class="button" @click="duplicate"><i class="ph-clipboard-text ph-bold ph-lg"></i> {{ i18n.ts.duplicate }}</MkButton>
-			<MkButton v-if="pageId && !readonly" inline class="button" danger @click="del"><i class="ph-trash ph-bold ph-lg"></i> {{ i18n.ts.delete }}</MkButton>
-		</div>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader
+				v-model:tab="tab"
+				:actions="headerActions"
+				:tabs="headerTabs"
+		/></template>
+		<MkSpacer :content-max="700">
+			<div class="jqqmcavi">
+				<MkButton
+					v-if="pageId"
+					class="button"
+					inline
+					link
+					:to="`/@${author.username}/pages/${currentName}`"
+					><i class="ph-arrow-square-out ph-bold ph-lg"></i>
+					{{ i18n.ts._pages.viewPage }}</MkButton
+				>
+				<MkButton
+					v-if="!readonly"
+					inline
+					primary
+					class="button"
+					@click="save"
+					><i class="ph-floppy-disk-back ph-bold ph-lg"></i>
+					{{ i18n.ts.save }}</MkButton
+				>
+				<MkButton v-if="pageId" inline class="button" @click="duplicate"
+					><i class="ph-clipboard-text ph-bold ph-lg"></i>
+					{{ i18n.ts.duplicate }}</MkButton
+				>
+				<MkButton
+					v-if="pageId && !readonly"
+					inline
+					class="button"
+					danger
+					@click="del"
+					><i class="ph-trash ph-bold ph-lg"></i>
+					{{ i18n.ts.delete }}</MkButton
+				>
+			</div>
 
-		<div v-if="tab === 'settings'">
-			<div class="_formRoot">
-				<MkInput v-model="title" class="_formBlock">
-					<template #label>{{ i18n.ts._pages.title }}</template>
-				</MkInput>
+			<div v-if="tab === 'settings'">
+				<div class="_formRoot">
+					<MkInput v-model="title" class="_formBlock">
+						<template #label>{{ i18n.ts._pages.title }}</template>
+					</MkInput>
 
-				<MkInput v-model="summary" class="_formBlock">
-					<template #label>{{ i18n.ts._pages.summary }}</template>
-				</MkInput>
+					<MkInput v-model="summary" class="_formBlock">
+						<template #label>{{ i18n.ts._pages.summary }}</template>
+					</MkInput>
 
-				<MkInput v-model="name" class="_formBlock">
-					<template #prefix>{{ url }}/@{{ author.username }}/pages/</template>
-					<template #label>{{ i18n.ts._pages.url }}</template>
-				</MkInput>
+					<MkInput v-model="name" class="_formBlock">
+						<template #prefix
+							>{{ url }}/@{{ author.username }}/pages/</template
+						>
+						<template #label>{{ i18n.ts._pages.url }}</template>
+					</MkInput>
 
-				<MkSwitch v-model="isPublic" class="_formBlock">{{ i18n.ts.public }}</MkSwitch>
-				<MkSwitch v-model="alignCenter" class="_formBlock">{{ i18n.ts._pages.alignCenter }}</MkSwitch>
+					<MkSwitch v-model="isPublic" class="_formBlock">{{
+						i18n.ts.public
+					}}</MkSwitch>
+					<MkSwitch v-model="alignCenter" class="_formBlock">{{
+						i18n.ts._pages.alignCenter
+					}}</MkSwitch>
 
-				<MkSelect v-model="font" class="_formBlock">
-					<template #label>{{ i18n.ts._pages.font }}</template>
-					<option value="serif">{{ i18n.ts._pages.fontSerif }}</option>
-					<option value="sans-serif">{{ i18n.ts._pages.fontSansSerif }}</option>
-				</MkSelect>
+					<MkSelect v-model="font" class="_formBlock">
+						<template #label>{{ i18n.ts._pages.font }}</template>
+						<option value="serif">
+							{{ i18n.ts._pages.fontSerif }}
+						</option>
+						<option value="sans-serif">
+							{{ i18n.ts._pages.fontSansSerif }}
+						</option>
+					</MkSelect>
 
-				<MkSwitch v-model="hideTitleWhenPinned" class="_formBlock">{{ i18n.ts._pages.hideTitleWhenPinned }}</MkSwitch>
+					<MkSwitch
+						v-model="hideTitleWhenPinned"
+						class="_formBlock"
+						>{{ i18n.ts._pages.hideTitleWhenPinned }}</MkSwitch
+					>
 
-				<div class="eyeCatch">
-					<MkButton v-if="eyeCatchingImageId == null && !readonly" @click="setEyeCatchingImage"><i class="ph-plus ph-bold ph-lg"></i> {{ i18n.ts._pages.eyeCatchingImageSet }}</MkButton>
-					<div v-else-if="eyeCatchingImage">
-						<img :src="eyeCatchingImage.url" :alt="eyeCatchingImage.name" style="max-width: 100%;"/>
-						<MkButton v-if="!readonly" @click="removeEyeCatchingImage()"><i class="ph-trash ph-bold ph-lg"></i> {{ i18n.ts._pages.eyeCatchingImageRemove }}</MkButton>
+					<div class="eyeCatch">
+						<MkButton
+							v-if="eyeCatchingImageId == null && !readonly"
+							@click="setEyeCatchingImage"
+							><i class="ph-plus ph-bold ph-lg"></i>
+							{{ i18n.ts._pages.eyeCatchingImageSet }}</MkButton
+						>
+						<div v-else-if="eyeCatchingImage">
+							<img
+								:src="eyeCatchingImage.url"
+								:alt="eyeCatchingImage.name"
+								style="max-width: 100%"
+							/>
+							<MkButton
+								v-if="!readonly"
+								@click="removeEyeCatchingImage()"
+								><i class="ph-trash ph-bold ph-lg"></i>
+								{{
+									i18n.ts._pages.eyeCatchingImageRemove
+								}}</MkButton
+							>
+						</div>
 					</div>
 				</div>
 			</div>
-		</div>
 
-		<div v-else-if="tab === 'contents'">
-			<div>
-				<XBlocks v-model="content" class="content" :hpml="hpml"/>
-				<MkButton v-if="!readonly" @click="add()"><i class="ph-plus ph-bold ph-lg"></i></MkButton>
+			<div v-else-if="tab === 'contents'">
+				<div>
+					<XBlocks v-model="content" class="content" :hpml="hpml" />
+					<MkButton v-if="!readonly" @click="add()"
+						><i class="ph-plus ph-bold ph-lg"></i
+					></MkButton>
+				</div>
 			</div>
-		</div>
 
-		<div v-else-if="tab === 'variables'">
-			<div class="qmuvgica">
-				<XDraggable v-show="variables.length > 0" v-model="variables" tag="div" class="variables" item-key="name" handle=".drag-handle" :group="{ name: 'variables' }" animation="150" swap-threshold="0.5">
-					<template #item="{element}">
-						<XVariable
-							:model-value="element"
-							:removable="true"
-							:hpml="hpml"
-							:name="element.name"
-							:title="element.name"
-							:draggable="true"
-							@remove="() => removeVariable(element)"
-						/>
-					</template>
-				</XDraggable>
+			<div v-else-if="tab === 'variables'">
+				<div class="qmuvgica">
+					<XDraggable
+						v-show="variables.length > 0"
+						v-model="variables"
+						tag="div"
+						class="variables"
+						item-key="name"
+						handle=".drag-handle"
+						:group="{ name: 'variables' }"
+						animation="150"
+						swap-threshold="0.5"
+					>
+						<template #item="{ element }">
+							<XVariable
+								:model-value="element"
+								:removable="true"
+								:hpml="hpml"
+								:name="element.name"
+								:title="element.name"
+								:draggable="true"
+								@remove="() => removeVariable(element)"
+							/>
+						</template>
+					</XDraggable>
 
-				<MkButton v-if="!readonly" class="add" @click="addVariable()"><i class="ph-plus ph-bold ph-lg"></i></MkButton>
+					<MkButton
+						v-if="!readonly"
+						class="add"
+						@click="addVariable()"
+						><i class="ph-plus ph-bold ph-lg"></i
+					></MkButton>
+				</div>
 			</div>
-		</div>
 
-		<div v-else-if="tab === 'script'">
-			<div>
-				<MkTextarea v-model="script" class="_code"/>
+			<div v-else-if="tab === 'script'">
+				<div>
+					<MkTextarea v-model="script" class="_code" />
+				</div>
 			</div>
-		</div>
-	</MkSpacer>
-</MkStickyContainer>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent, computed, provide, watch } from 'vue';
-import { v4 as uuid } from 'uuid';
-import XVariable from './page-editor.script-block.vue';
-import XBlocks from './page-editor.blocks.vue';
-import MkTextarea from '@/components/form/textarea.vue';
-import MkButton from '@/components/MkButton.vue';
-import MkSelect from '@/components/form/select.vue';
-import MkSwitch from '@/components/form/switch.vue';
-import MkInput from '@/components/form/input.vue';
-import { blockDefs } from '@/scripts/hpml/index';
-import { HpmlTypeChecker } from '@/scripts/hpml/type-checker';
-import { url } from '@/config';
-import { collectPageVars } from '@/scripts/collect-page-vars';
-import * as os from '@/os';
-import { selectFile } from '@/scripts/select-file';
-import { mainRouter } from '@/router';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import { $i } from '@/account';
+import { defineAsyncComponent, computed, provide, watch } from "vue";
+import { v4 as uuid } from "uuid";
+import XVariable from "./page-editor.script-block.vue";
+import XBlocks from "./page-editor.blocks.vue";
+import MkTextarea from "@/components/form/textarea.vue";
+import MkButton from "@/components/MkButton.vue";
+import MkSelect from "@/components/form/select.vue";
+import MkSwitch from "@/components/form/switch.vue";
+import MkInput from "@/components/form/input.vue";
+import { blockDefs } from "@/scripts/hpml/index";
+import { HpmlTypeChecker } from "@/scripts/hpml/type-checker";
+import { url } from "@/config";
+import { collectPageVars } from "@/scripts/collect-page-vars";
+import * as os from "@/os";
+import { selectFile } from "@/scripts/select-file";
+import { mainRouter } from "@/router";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
+import { $i } from "@/account";
 
-const XDraggable = defineAsyncComponent(() => import('vuedraggable').then(x => x.default));
+const XDraggable = defineAsyncComponent(() =>
+	import("vuedraggable").then((x) => x.default)
+);
 
 const props = defineProps<{
 	initPageId?: string;
@@ -110,35 +191,35 @@ const props = defineProps<{
 	initUser?: string;
 }>();
 
-let tab = $ref('settings');
+let tab = $ref("settings");
 let author = $ref($i);
 let readonly = $ref(false);
 let page = $ref(null);
 let pageId = $ref(null);
 let currentName = $ref(null);
-let title = $ref('');
+let title = $ref("");
 let summary = $ref(null);
 let name = $ref(Date.now().toString());
 let eyeCatchingImage = $ref(null);
 let eyeCatchingImageId = $ref(null);
-let font = $ref('sans-serif');
+let font = $ref("sans-serif");
 let content = $ref([]);
 let alignCenter = $ref(false);
 let isPublic = $ref(true);
 let hideTitleWhenPinned = $ref(false);
 let variables = $ref([]);
 let hpml = $ref(null);
-let script = $ref('');
+let script = $ref("");
 
-provide('readonly', readonly);
-provide('getScriptBlockList', getScriptBlockList);
-provide('getPageBlockList', getPageBlockList);
+provide("readonly", readonly);
+provide("getScriptBlockList", getScriptBlockList);
+provide("getPageBlockList", getPageBlockList);
 
 watch($$(eyeCatchingImageId), async () => {
 	if (eyeCatchingImageId == null) {
 		eyeCatchingImage = null;
 	} else {
-		eyeCatchingImage = await os.api('drive/files/show', {
+		eyeCatchingImage = await os.api("drive/files/show", {
 			fileId: eyeCatchingImageId,
 		});
 	}
@@ -163,18 +244,18 @@ function getSaveOptions() {
 function save() {
 	const options = getSaveOptions();
 
-	const onError = err => {
-		if (err.id === '3d81ceae-475f-4600-b2a8-2bc116157532') {
-			if (err.info.param === 'name') {
+	const onError = (err) => {
+		if (err.id === "3d81ceae-475f-4600-b2a8-2bc116157532") {
+			if (err.info.param === "name") {
 				os.alert({
-					type: 'error',
+					type: "error",
 					title: i18n.ts._pages.invalidNameTitle,
 					text: i18n.ts._pages.invalidNameText,
 				});
 			}
-		} else if (err.code === 'NAME_ALREADY_EXISTS') {
+		} else if (err.code === "NAME_ALREADY_EXISTS") {
 			os.alert({
-				type: 'error',
+				type: "error",
 				text: i18n.ts._pages.nameAlreadyExists,
 			});
 		}
@@ -182,54 +263,56 @@ function save() {
 
 	if (pageId) {
 		options.pageId = pageId;
-		os.api('pages/update', options)
-		.then(page => {
-			currentName = name.trim();
-			os.alert({
-				type: 'success',
-				text: i18n.ts._pages.updated,
-			});
-		}).catch(onError);
+		os.api("pages/update", options)
+			.then((page) => {
+				currentName = name.trim();
+				os.alert({
+					type: "success",
+					text: i18n.ts._pages.updated,
+				});
+			})
+			.catch(onError);
 	} else {
-		os.api('pages/create', options)
-		.then(created => {
-			pageId = created.id;
-			currentName = name.trim();
-			os.alert({
-				type: 'success',
-				text: i18n.ts._pages.created,
-			});
-			mainRouter.push(`/pages/edit/${pageId}`);
-		}).catch(onError);
+		os.api("pages/create", options)
+			.then((created) => {
+				pageId = created.id;
+				currentName = name.trim();
+				os.alert({
+					type: "success",
+					text: i18n.ts._pages.created,
+				});
+				mainRouter.push(`/pages/edit/${pageId}`);
+			})
+			.catch(onError);
 	}
 }
 
 function del() {
 	os.confirm({
-		type: 'warning',
-		text: i18n.t('removeAreYouSure', { x: title.trim() }),
+		type: "warning",
+		text: i18n.t("removeAreYouSure", { x: title.trim() }),
 	}).then(({ canceled }) => {
 		if (canceled) return;
-		os.api('pages/delete', {
+		os.api("pages/delete", {
 			pageId: pageId,
 		}).then(() => {
 			os.alert({
-				type: 'success',
+				type: "success",
 				text: i18n.ts._pages.deleted,
 			});
-			mainRouter.push('/pages');
+			mainRouter.push("/pages");
 		});
 	});
 }
 
 function duplicate() {
-	title = title + ' - copy';
-	name = name + '-copy';
-	os.api('pages/create', getSaveOptions()).then(created => {
+	title = title + " - copy";
+	name = name + "-copy";
+	os.api("pages/create", getSaveOptions()).then((created) => {
 		pageId = created.id;
 		currentName = name.trim();
 		os.alert({
-			type: 'success',
+			type: "success",
 			text: i18n.ts._pages.created,
 		});
 		mainRouter.push(`/pages/edit/${pageId}`);
@@ -258,7 +341,7 @@ async function addVariable() {
 
 	if (hpml.isUsedName(name)) {
 		os.alert({
-			type: 'error',
+			type: "error",
 			text: i18n.ts._pages.variableNameIsAlreadyUsed,
 		});
 		return;
@@ -269,47 +352,66 @@ async function addVariable() {
 }
 
 function removeVariable(v) {
-	variables = variables.filter(x => x.name !== v.name);
+	variables = variables.filter((x) => x.name !== v.name);
 }
 
 function getPageBlockList() {
-	return [{
-		label: i18n.ts._pages.contentBlocks,
-		items: [
-			{ value: 'section', text: i18n.ts._pages.blocks.section },
-			{ value: 'text', text: i18n.ts._pages.blocks.text },
-			{ value: 'image', text: i18n.ts._pages.blocks.image },
-			{ value: 'textarea', text: i18n.ts._pages.blocks.textarea },
-			{ value: 'note', text: i18n.ts._pages.blocks.note },
-			{ value: 'canvas', text: i18n.ts._pages.blocks.canvas },
-		],
-	}, {
-		label: i18n.ts._pages.inputBlocks,
-		items: [
-			{ value: 'button', text: i18n.ts._pages.blocks.button },
-			{ value: 'radioButton', text: i18n.ts._pages.blocks.radioButton },
-			{ value: 'textInput', text: i18n.ts._pages.blocks.textInput },
-			{ value: 'textareaInput', text: i18n.ts._pages.blocks.textareaInput },
-			{ value: 'numberInput', text: i18n.ts._pages.blocks.numberInput },
-			{ value: 'switch', text: i18n.ts._pages.blocks.switch },
-			{ value: 'counter', text: i18n.ts._pages.blocks.counter },
-		],
-	}, {
-		label: i18n.ts._pages.specialBlocks,
-		items: [
-			{ value: 'if', text: i18n.ts._pages.blocks.if },
-			{ value: 'post', text: i18n.ts._pages.blocks.post },
-		],
-	}];
+	return [
+		{
+			label: i18n.ts._pages.contentBlocks,
+			items: [
+				{ value: "section", text: i18n.ts._pages.blocks.section },
+				{ value: "text", text: i18n.ts._pages.blocks.text },
+				{ value: "image", text: i18n.ts._pages.blocks.image },
+				{ value: "textarea", text: i18n.ts._pages.blocks.textarea },
+				{ value: "note", text: i18n.ts._pages.blocks.note },
+				{ value: "canvas", text: i18n.ts._pages.blocks.canvas },
+			],
+		},
+		{
+			label: i18n.ts._pages.inputBlocks,
+			items: [
+				{ value: "button", text: i18n.ts._pages.blocks.button },
+				{
+					value: "radioButton",
+					text: i18n.ts._pages.blocks.radioButton,
+				},
+				{ value: "textInput", text: i18n.ts._pages.blocks.textInput },
+				{
+					value: "textareaInput",
+					text: i18n.ts._pages.blocks.textareaInput,
+				},
+				{
+					value: "numberInput",
+					text: i18n.ts._pages.blocks.numberInput,
+				},
+				{ value: "switch", text: i18n.ts._pages.blocks.switch },
+				{ value: "counter", text: i18n.ts._pages.blocks.counter },
+			],
+		},
+		{
+			label: i18n.ts._pages.specialBlocks,
+			items: [
+				{ value: "if", text: i18n.ts._pages.blocks.if },
+				{ value: "post", text: i18n.ts._pages.blocks.post },
+			],
+		},
+	];
 }
 
 function getScriptBlockList(type: string = null) {
 	const list = [];
 
-	const blocks = blockDefs.filter(block => type == null || block.out == null || block.out === type || typeof block.out === 'number');
+	const blocks = blockDefs.filter(
+		(block) =>
+			type == null ||
+			block.out == null ||
+			block.out === type ||
+			typeof block.out === "number"
+	);
 
 	for (const block of blocks) {
-		const category = list.find(x => x.category === block.category);
+		const category = list.find((x) => x.category === block.category);
 		if (category) {
 			category.items.push({
 				value: block.type,
@@ -319,20 +421,22 @@ function getScriptBlockList(type: string = null) {
 			list.push({
 				category: block.category,
 				label: i18n.t(`_pages.script.categories.${block.category}`),
-				items: [{
-					value: block.type,
-					text: i18n.t(`_pages.script.blocks.${block.type}`),
-				}],
+				items: [
+					{
+						value: block.type,
+						text: i18n.t(`_pages.script.blocks.${block.type}`),
+					},
+				],
 			});
 		}
 	}
 
-	const userFns = variables.filter(x => x.type === 'fn');
+	const userFns = variables.filter((x) => x.type === "fn");
 	if (userFns.length > 0) {
 		list.unshift({
-			label: i18n.t('_pages.script.categories.fn'),
-			items: userFns.map(v => ({
-				value: 'fn:' + v.name,
+			label: i18n.t("_pages.script.categories.fn"),
+			items: userFns.map((v) => ({
+				value: "fn:" + v.name,
 				text: v.name,
 			})),
 		});
@@ -342,7 +446,7 @@ function getScriptBlockList(type: string = null) {
 }
 
 function setEyeCatchingImage(img) {
-	selectFile(img.currentTarget ?? img.target, null).then(file => {
+	selectFile(img.currentTarget ?? img.target, null).then((file) => {
 		eyeCatchingImageId = file.id;
 	});
 }
@@ -354,20 +458,28 @@ function removeEyeCatchingImage() {
 async function init() {
 	hpml = new HpmlTypeChecker();
 
-	watch($$(variables), () => {
-		hpml.variables = variables;
-	}, { deep: true });
+	watch(
+		$$(variables),
+		() => {
+			hpml.variables = variables;
+		},
+		{ deep: true }
+	);
 
-	watch($$(content), () => {
-		hpml.pageVars = collectPageVars(content);
-	}, { deep: true });
+	watch(
+		$$(content),
+		() => {
+			hpml.pageVars = collectPageVars(content);
+		},
+		{ deep: true }
+	);
 
 	if (props.initPageId) {
-		page = await os.api('pages/show', {
+		page = await os.api("pages/show", {
 			pageId: props.initPageId,
 		});
 	} else if (props.initPageName && props.initUser) {
-		page = await os.api('pages/show', {
+		page = await os.api("pages/show", {
 			name: props.initPageName,
 			username: props.initUser,
 		});
@@ -391,11 +503,13 @@ async function init() {
 		eyeCatchingImageId = page.eyeCatchingImageId;
 	} else {
 		const id = uuid();
-		content = [{
-			id,
-			type: 'text',
-			text: '',
-		}];
+		content = [
+			{
+				id,
+				type: "text",
+				text: "",
+			},
+		];
 	}
 }
 
@@ -403,37 +517,43 @@ init();
 
 const headerActions = $computed(() => []);
 
-const headerTabs = $computed(() => [{
-	key: 'settings',
-	title: i18n.ts._pages.pageSetting,
-	icon: 'ph-gear-six ph-bold ph-lg',
-}, {
-	key: 'contents',
-	title: i18n.ts._pages.contents,
-	icon: 'ph-sticker ph-bold ph-lg',
-}, {
-	key: 'variables',
-	title: i18n.ts._pages.variables,
-	icon: 'ph-magic-wand ph-bold ph-lg',
-}, {
-	key: 'script',
-	title: i18n.ts.script,
-	icon: 'ph-code ph-bold ph-lg',
-}]);
+const headerTabs = $computed(() => [
+	{
+		key: "settings",
+		title: i18n.ts._pages.pageSetting,
+		icon: "ph-gear-six ph-bold ph-lg",
+	},
+	{
+		key: "contents",
+		title: i18n.ts._pages.contents,
+		icon: "ph-sticker ph-bold ph-lg",
+	},
+	{
+		key: "variables",
+		title: i18n.ts._pages.variables,
+		icon: "ph-magic-wand ph-bold ph-lg",
+	},
+	{
+		key: "script",
+		title: i18n.ts.script,
+		icon: "ph-code ph-bold ph-lg",
+	},
+]);
 
-definePageMetadata(computed(() => {
-	let title = i18n.ts._pages.newPage;
-	if (props.initPageId) {
-		title = i18n.ts._pages.editPage;
-	}
-	else if (props.initPageName && props.initUser) {
-		title = i18n.ts._pages.readPage;
-	}
-	return {
-		title: title,
-		icon: 'ph-pencil ph-bold ph-lg',
-	};
-}));
+definePageMetadata(
+	computed(() => {
+		let title = i18n.ts._pages.newPage;
+		if (props.initPageId) {
+			title = i18n.ts._pages.editPage;
+		} else if (props.initPageName && props.initUser) {
+			title = i18n.ts._pages.readPage;
+		}
+		return {
+			title: title,
+			icon: "ph-pencil ph-bold ph-lg",
+		};
+	})
+);
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/pages/page.vue b/packages/client/src/pages/page.vue
index 1c5c7f1f78..d5d7d5bf82 100644
--- a/packages/client/src/pages/page.vue
+++ b/packages/client/src/pages/page.vue
@@ -1,52 +1,165 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs" :display-back-button="true"/></template>
-	<MkSpacer :content-max="800">
-		<transition :name="$store.state.animation ? 'fade' : ''" mode="out-in">
-			<div v-if="page" :key="page.id" v-size="{ max: [450] }" class="xcukqgmh">
-				<div class="footer">
-					<div><i class="ph-alarm ph-bold"/> {{ i18n.ts.createdAt }}: <MkTime :time="page.createdAt" mode="detail"/></div>
-					<div v-if="page.createdAt != page.updatedAt"><i class="ph-alarm ph-bold"></i> {{ i18n.ts.updatedAt }}: <MkTime :time="page.updatedAt" mode="detail"/></div>
-				</div>
-				<div class="_block main">
-					<div class="banner">
-						<div class="banner-image">
-							<div class="header">
-								<h1>{{ page.title }}</h1>
-							</div>
-							<div class="menu-actions">
-								<button v-tooltip="i18n.ts.copyUrl" @click="copyUrl" class="menu _button"><i class="ph-link-simple ph-bold ph-lg"/></button>
-								<MkA v-tooltip="i18n.ts._pages.viewSource" :to="`/@${username}/pages/${pageName}/view-source`" class="menu _button" style="transform: translateY(2px);"><i class="ph-code ph-bold ph-lg"/></MkA>
-								<template v-if="$i && $i.id === page.userId">
-									<MkA v-tooltip="i18n.ts._pages.editPage" class="menu _button" :to="`/pages/edit/${page.id}`" style="transform: translateY(2px);"><i class="ph-pencil ph-bold ph-lg"/></MkA>
-									<button v-if="$i.pinnedPageId === page.id" v-tooltip="i18n.ts.unpin" class="menu _button" @click="pin(false)"><i class="ph-push-pin-slash ph-bold ph-lg"/></button>
-									<button v-else v-tooltip="i18n.ts.pin" class="menu _button" @click="pin(true)"><i class="ph-push-pin ph-bold ph-lg"/></button>
-								</template>
-							</div>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader
+				:actions="headerActions"
+				:tabs="headerTabs"
+				:display-back-button="true"
+		/></template>
+		<MkSpacer :content-max="800">
+			<transition
+				:name="$store.state.animation ? 'fade' : ''"
+				mode="out-in"
+			>
+				<div
+					v-if="page"
+					:key="page.id"
+					v-size="{ max: [450] }"
+					class="xcukqgmh"
+				>
+					<div class="footer">
+						<div>
+							<i class="ph-alarm ph-bold" />
+							{{ i18n.ts.createdAt }}:
+							<MkTime :time="page.createdAt" mode="detail" />
+						</div>
+						<div v-if="page.createdAt != page.updatedAt">
+							<i class="ph-alarm ph-bold"></i>
+							{{ i18n.ts.updatedAt }}:
+							<MkTime :time="page.updatedAt" mode="detail" />
 						</div>
 					</div>
-					<div class="content">
-						<XPage :page="page"/>
-					</div>
-					<div class="actions">
-						<div class="like">
-							<MkButton v-if="page.isLiked" v-tooltip="i18n.ts._pages.unlike" class="button" primary @click="unlike()"><i class="ph-heart ph-fill ph-lg"></i><span v-if="page.likedCount > 0" class="count">{{ page.likedCount }}</span></MkButton>
-							<MkButton v-else v-tooltip="i18n.ts._pages.like" class="button" @click="like()"><i class="ph-heart ph-bold"></i><span v-if="page.likedCount > 0" class="count">{{ page.likedCount }}</span></MkButton>
-						</div>
-						<div class="other">
-							<button v-tooltip="i18n.ts.shareWithNote" v-click-anime class="_button" @click="shareWithNote"><i class="ph-repeat ph-bold ph-lg ph-fw ph-lg"></i></button>
-							<button v-if="shareAvailable()" v-tooltip="i18n.ts.share" v-click-anime class="_button" @click="share"><i class="ph-share-network ph-bold ph-lg ph-fw ph-lg"></i></button>
-						</div>
-						<div class="user">
-							<MkAvatar :user="page.user" class="avatar"/>
-							<div class="name">
-								<MkUserName :user="page.user" style="display: block;"/>
-								<MkAcct :user="page.user"/>
+					<div class="_block main">
+						<div class="banner">
+							<div class="banner-image">
+								<div class="header">
+									<h1>{{ page.title }}</h1>
+								</div>
+								<div class="menu-actions">
+									<button
+										v-tooltip="i18n.ts.copyUrl"
+										@click="copyUrl"
+										class="menu _button"
+									>
+										<i
+											class="ph-link-simple ph-bold ph-lg"
+										/>
+									</button>
+									<MkA
+										v-tooltip="i18n.ts._pages.viewSource"
+										:to="`/@${username}/pages/${pageName}/view-source`"
+										class="menu _button"
+										style="transform: translateY(2px)"
+										><i class="ph-code ph-bold ph-lg"
+									/></MkA>
+									<template
+										v-if="$i && $i.id === page.userId"
+									>
+										<MkA
+											v-tooltip="i18n.ts._pages.editPage"
+											class="menu _button"
+											:to="`/pages/edit/${page.id}`"
+											style="transform: translateY(2px)"
+											><i class="ph-pencil ph-bold ph-lg"
+										/></MkA>
+										<button
+											v-if="$i.pinnedPageId === page.id"
+											v-tooltip="i18n.ts.unpin"
+											class="menu _button"
+											@click="pin(false)"
+										>
+											<i
+												class="ph-push-pin-slash ph-bold ph-lg"
+											/>
+										</button>
+										<button
+											v-else
+											v-tooltip="i18n.ts.pin"
+											class="menu _button"
+											@click="pin(true)"
+										>
+											<i
+												class="ph-push-pin ph-bold ph-lg"
+											/>
+										</button>
+									</template>
+								</div>
 							</div>
-							<MkFollowButton v-if="!$i || $i.id != page.user.id" :user="page.user" :inline="true" :transparent="false" :full="true" class="koudoku"/>
 						</div>
-					</div>
-					<!-- <div class="links">
+						<div class="content">
+							<XPage :page="page" />
+						</div>
+						<div class="actions">
+							<div class="like">
+								<MkButton
+									v-if="page.isLiked"
+									v-tooltip="i18n.ts._pages.unlike"
+									class="button"
+									primary
+									@click="unlike()"
+									><i class="ph-heart ph-fill ph-lg"></i
+									><span
+										v-if="page.likedCount > 0"
+										class="count"
+										>{{ page.likedCount }}</span
+									></MkButton
+								>
+								<MkButton
+									v-else
+									v-tooltip="i18n.ts._pages.like"
+									class="button"
+									@click="like()"
+									><i class="ph-heart ph-bold"></i
+									><span
+										v-if="page.likedCount > 0"
+										class="count"
+										>{{ page.likedCount }}</span
+									></MkButton
+								>
+							</div>
+							<div class="other">
+								<button
+									v-tooltip="i18n.ts.shareWithNote"
+									v-click-anime
+									class="_button"
+									@click="shareWithNote"
+								>
+									<i
+										class="ph-repeat ph-bold ph-lg ph-fw ph-lg"
+									></i>
+								</button>
+								<button
+									v-if="shareAvailable()"
+									v-tooltip="i18n.ts.share"
+									v-click-anime
+									class="_button"
+									@click="share"
+								>
+									<i
+										class="ph-share-network ph-bold ph-lg ph-fw ph-lg"
+									></i>
+								</button>
+							</div>
+							<div class="user">
+								<MkAvatar :user="page.user" class="avatar" />
+								<div class="name">
+									<MkUserName
+										:user="page.user"
+										style="display: block"
+									/>
+									<MkAcct :user="page.user" />
+								</div>
+								<MkFollowButton
+									v-if="!$i || $i.id != page.user.id"
+									:user="page.user"
+									:inline="true"
+									:transparent="false"
+									:full="true"
+									class="koudoku"
+								/>
+							</div>
+						</div>
+						<!-- <div class="links">
 						<MkA :to="`/@${username}/pages/${pageName}/view-source`" class="link">{{ i18n.ts._pages.viewSource }}</MkA>
 						<template v-if="$i && $i.id === page.userId">
 							<MkA :to="`/pages/edit/${page.id}`" class="link">{{ i18n.ts._pages.editThisPage }}</MkA>
@@ -54,36 +167,52 @@
 							<button v-else class="link _textButton" @click="pin(true)">{{ i18n.ts.pin }}</button>
 						</template>
 					</div> -->
+					</div>
+					<MkAd :prefer="['horizontal', 'horizontal-big']" />
+					<MkContainer
+						:max-height="300"
+						:foldable="true"
+						:expanded="false"
+						class="other"
+					>
+						<template #header
+							><i class="ph-clock ph-bold ph-lg"></i>
+							{{ i18n.ts.recentPosts }}</template
+						>
+						<MkPagination
+							v-slot="{ items }"
+							:pagination="otherPostsPagination"
+						>
+							<MkPagePreview
+								v-for="page in items"
+								:key="page.id"
+								:page="page"
+								class="_gap"
+							/>
+						</MkPagination>
+					</MkContainer>
 				</div>
-				<MkAd :prefer="['horizontal', 'horizontal-big']"/>
-				<MkContainer :max-height="300" :foldable="true" :expanded="false" class="other">
-					<template #header><i class="ph-clock ph-bold ph-lg"></i> {{ i18n.ts.recentPosts }}</template>
-					<MkPagination v-slot="{items}" :pagination="otherPostsPagination">
-						<MkPagePreview v-for="page in items" :key="page.id" :page="page" class="_gap"/>
-					</MkPagination>
-				</MkContainer>
-			</div>
-			<MkError v-else-if="error" @retry="fetchPage()"/>
-			<MkLoading v-else/>
-		</transition>
-	</MkSpacer>
-</MkStickyContainer>
+				<MkError v-else-if="error" @retry="fetchPage()" />
+				<MkLoading v-else />
+			</transition>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { computed, watch } from 'vue';
-import XPage from '@/components/page/page.vue';
-import MkButton from '@/components/MkButton.vue';
-import * as os from '@/os';
-import { url } from '@/config';
-import MkFollowButton from '@/components/MkFollowButton.vue';
-import MkContainer from '@/components/MkContainer.vue';
-import MkPagination from '@/components/MkPagination.vue';
-import MkPagePreview from '@/components/MkPagePreview.vue';
-import { i18n } from '@/i18n';
-import copyToClipboard from '@/scripts/copy-to-clipboard';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import { shareAvailable } from '@/scripts/share-available';
+import { computed, watch } from "vue";
+import XPage from "@/components/page/page.vue";
+import MkButton from "@/components/MkButton.vue";
+import * as os from "@/os";
+import { url } from "@/config";
+import MkFollowButton from "@/components/MkFollowButton.vue";
+import MkContainer from "@/components/MkContainer.vue";
+import MkPagination from "@/components/MkPagination.vue";
+import MkPagePreview from "@/components/MkPagePreview.vue";
+import { i18n } from "@/i18n";
+import copyToClipboard from "@/scripts/copy-to-clipboard";
+import { definePageMetadata } from "@/scripts/page-metadata";
+import { shareAvailable } from "@/scripts/share-available";
 
 const props = defineProps<{
 	pageName: string;
@@ -94,25 +223,27 @@ let page = $ref(null);
 let bgImg = $ref(null);
 let error = $ref(null);
 const otherPostsPagination = {
-	endpoint: 'users/pages' as const,
+	endpoint: "users/pages" as const,
 	limit: 6,
 	params: computed(() => ({
 		userId: page.user.id,
 	})),
 };
-const path = $computed(() => props.username + '/' + props.pageName);
+const path = $computed(() => props.username + "/" + props.pageName);
 
 function fetchPage() {
 	page = null;
-	os.api('pages/show', {
+	os.api("pages/show", {
 		name: props.pageName,
 		username: props.username,
-	}).then(_page => {
-		page = _page;
-		bgImg = getBgImg();
-	}).catch(err => {
-		error = err;
-	});
+	})
+		.then((_page) => {
+			page = _page;
+			bgImg = getBgImg();
+		})
+		.catch((err) => {
+			error = err;
+		});
 }
 
 function copyUrl() {
@@ -123,9 +254,8 @@ function copyUrl() {
 function getBgImg(): string {
 	if (page.eyeCatchingImage != null) {
 		return `url(${page.eyeCatchingImage.url})`;
-	}
-	else {
-		return 'linear-gradient(to bottom right, #31748f, #9ccfd8)'
+	} else {
+		return "linear-gradient(to bottom right, #31748f, #9ccfd8)";
 	}
 }
 
@@ -139,12 +269,14 @@ function share() {
 
 function shareWithNote() {
 	os.post({
-		initialText: `${page.title || page.name} ${url}/@${page.user.username}/pages/${page.name}`,
+		initialText: `${page.title || page.name} ${url}/@${
+			page.user.username
+		}/pages/${page.name}`,
 	});
 }
 
 function like() {
-	os.api('pages/like', {
+	os.api("pages/like", {
 		pageId: page.id,
 	}).then(() => {
 		page.isLiked = true;
@@ -153,7 +285,7 @@ function like() {
 }
 
 async function unlike() {
-	os.api('pages/unlike', {
+	os.api("pages/unlike", {
 		pageId: page.id,
 	}).then(() => {
 		page.isLiked = false;
@@ -162,7 +294,7 @@ async function unlike() {
 }
 
 function pin(pin) {
-	os.apiWithDialog('i/update', {
+	os.apiWithDialog("i/update", {
 		pinnedPageId: pin ? page.id : null,
 	});
 }
@@ -173,15 +305,21 @@ const headerActions = $computed(() => []);
 
 const headerTabs = $computed(() => []);
 
-definePageMetadata(computed(() => page ? {
-	title: computed(() => page.title || page.name),
-	avatar: page.user,
-	path: `/@${page.user.username}/pages/${page.name}`,
-	share: {
-		title: page.title || page.name,
-		text: page.summary,
-	},
-} : null));
+definePageMetadata(
+	computed(() =>
+		page
+			? {
+					title: computed(() => page.title || page.name),
+					avatar: page.user,
+					path: `/@${page.user.username}/pages/${page.name}`,
+					share: {
+						title: page.title || page.name,
+						text: page.summary,
+					},
+			  }
+			: null
+	)
+);
 </script>
 
 <style lang="scss" scoped>
@@ -196,7 +334,6 @@ definePageMetadata(computed(() => page ? {
 
 .xcukqgmh {
 	> .main {
-
 		> * {
 			margin: 1rem;
 		}
@@ -211,7 +348,7 @@ definePageMetadata(computed(() => page ? {
 				height: 150px;
 				background-position: center;
 				background-size: cover;
-				background-image: v-bind('bgImg');
+				background-image: v-bind("bgImg");
 
 				> .header {
 					padding: 16px;
diff --git a/packages/client/src/pages/pages.vue b/packages/client/src/pages/pages.vue
index 5aaf76834e..938c8d2295 100644
--- a/packages/client/src/pages/pages.vue
+++ b/packages/client/src/pages/pages.vue
@@ -1,106 +1,151 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
-	<MkSpacer :content-max="700">
-		<swiper
-			:modules="[Virtual]"
-			:space-between="20"
-			:virtual="true"
-			:allow-touch-move="!(deviceKind === 'desktop' && !defaultStore.state.swipeOnDesktop)"
-			@swiper="setSwiperRef"
-			@slide-change="onSlideChange"
-		>
-			<swiper-slide>
-				<div class="rknalgpo">
-					<MkPagination v-slot="{items}" :pagination="featuredPagesPagination">
-						<MkPagePreview v-for="page in items" :key="page.id" class="ckltabjg" :page="page"/>
-					</MkPagination>
-				</div>
-			</swiper-slide>
-			<swiper-slide>
-				<div class="rknalgpo liked">
-					<MkPagination v-slot="{items}" :pagination="likedPagesPagination">
-						<MkPagePreview v-for="like in items" :key="like.page.id" class="ckltabjg" :page="like.page"/>
-					</MkPagination>
-				</div>
-			</swiper-slide>
-			<swiper-slide>
-				<div class="rknalgpo my">
-					<div class="buttoncontainer">
-						<MkButton class="new primary" @click="create()"><i class="ph-plus ph-bold ph-lg"></i> {{ i18n.ts._pages.newPage }}</MkButton>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader
+				v-model:tab="tab"
+				:actions="headerActions"
+				:tabs="headerTabs"
+		/></template>
+		<MkSpacer :content-max="700">
+			<swiper
+				:modules="[Virtual]"
+				:space-between="20"
+				:virtual="true"
+				:allow-touch-move="
+					!(
+						deviceKind === 'desktop' &&
+						!defaultStore.state.swipeOnDesktop
+					)
+				"
+				@swiper="setSwiperRef"
+				@slide-change="onSlideChange"
+			>
+				<swiper-slide>
+					<div class="rknalgpo">
+						<MkPagination
+							v-slot="{ items }"
+							:pagination="featuredPagesPagination"
+						>
+							<MkPagePreview
+								v-for="page in items"
+								:key="page.id"
+								class="ckltabjg"
+								:page="page"
+							/>
+						</MkPagination>
 					</div>
-					<MkPagination v-slot="{items}" :pagination="myPagesPagination">
-						<MkPagePreview v-for="page in items" :key="page.id" class="ckltabjg" :page="page"/>
-					</MkPagination>
-				</div>
-			</swiper-slide>
-		</swiper>
-	</MkSpacer>
-</MkStickyContainer>
+				</swiper-slide>
+				<swiper-slide>
+					<div class="rknalgpo liked">
+						<MkPagination
+							v-slot="{ items }"
+							:pagination="likedPagesPagination"
+						>
+							<MkPagePreview
+								v-for="like in items"
+								:key="like.page.id"
+								class="ckltabjg"
+								:page="like.page"
+							/>
+						</MkPagination>
+					</div>
+				</swiper-slide>
+				<swiper-slide>
+					<div class="rknalgpo my">
+						<div class="buttoncontainer">
+							<MkButton class="new primary" @click="create()"
+								><i class="ph-plus ph-bold ph-lg"></i>
+								{{ i18n.ts._pages.newPage }}</MkButton
+							>
+						</div>
+						<MkPagination
+							v-slot="{ items }"
+							:pagination="myPagesPagination"
+						>
+							<MkPagePreview
+								v-for="page in items"
+								:key="page.id"
+								class="ckltabjg"
+								:page="page"
+							/>
+						</MkPagination>
+					</div>
+				</swiper-slide>
+			</swiper>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { computed, watch, onMounted } from 'vue';
-import { Virtual } from 'swiper';
-import { Swiper, SwiperSlide } from 'swiper/vue';
-import MkPagePreview from '@/components/MkPagePreview.vue';
-import MkPagination from '@/components/MkPagination.vue';
-import MkButton from '@/components/MkButton.vue';
-import { useRouter } from '@/router';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import { deviceKind } from '@/scripts/device-kind';
-import { defaultStore } from '@/store';
-import 'swiper/scss';
-import 'swiper/scss/virtual';
+import { computed, watch, onMounted } from "vue";
+import { Virtual } from "swiper";
+import { Swiper, SwiperSlide } from "swiper/vue";
+import MkPagePreview from "@/components/MkPagePreview.vue";
+import MkPagination from "@/components/MkPagination.vue";
+import MkButton from "@/components/MkButton.vue";
+import { useRouter } from "@/router";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
+import { deviceKind } from "@/scripts/device-kind";
+import { defaultStore } from "@/store";
+import "swiper/scss";
+import "swiper/scss/virtual";
 
 const router = useRouter();
 
-let tab = $ref('featured');
-const tabs = ['featured', 'liked', 'my'];
-watch($$(tab), () => (syncSlide(tabs.indexOf(tab))));
+let tab = $ref("featured");
+const tabs = ["featured", "liked", "my"];
+watch($$(tab), () => syncSlide(tabs.indexOf(tab)));
 
 const featuredPagesPagination = {
-	endpoint: 'pages/featured' as const,
+	endpoint: "pages/featured" as const,
 	limit: 10,
 };
 const likedPagesPagination = {
-	endpoint: 'i/page-likes' as const,
+	endpoint: "i/page-likes" as const,
 	limit: 10,
 };
 const myPagesPagination = {
-	endpoint: 'i/pages' as const,
+	endpoint: "i/pages" as const,
 	limit: 10,
 };
 
 function create() {
-	router.push('/pages/new');
+	router.push("/pages/new");
 }
 
-const headerActions = $computed(() => [{
-	icon: 'ph-plus ph-bold ph-lg',
-	text: i18n.ts.create,
-	handler: create,
-}]);
+const headerActions = $computed(() => [
+	{
+		icon: "ph-plus ph-bold ph-lg",
+		text: i18n.ts.create,
+		handler: create,
+	},
+]);
 
-const headerTabs = $computed(() => [{
-	key: 'featured',
-	title: i18n.ts._pages.featured,
-	icon: 'ph-fire-simple ph-bold ph-lg',
-}, {
-	key: 'liked',
-	title: i18n.ts._pages.liked,
-	icon: 'ph-heart ph-bold ph-lg',
-}, {
-	key: 'my',
-	title: i18n.ts._pages.my,
-	icon: 'ph-crown-simple ph-bold ph-lg',
-}]);
+const headerTabs = $computed(() => [
+	{
+		key: "featured",
+		title: i18n.ts._pages.featured,
+		icon: "ph-fire-simple ph-bold ph-lg",
+	},
+	{
+		key: "liked",
+		title: i18n.ts._pages.liked,
+		icon: "ph-heart ph-bold ph-lg",
+	},
+	{
+		key: "my",
+		title: i18n.ts._pages.my,
+		icon: "ph-crown-simple ph-bold ph-lg",
+	},
+]);
 
-definePageMetadata(computed(() => ({
-	title: i18n.ts.pages,
-	icon: 'ph-file-text ph-bold ph-lg',
-})));
+definePageMetadata(
+	computed(() => ({
+		title: i18n.ts.pages,
+		icon: "ph-file-text ph-bold ph-lg",
+	}))
+);
 
 let swiperRef = null;
 
@@ -124,7 +169,6 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .rknalgpo {
-
 	> .buttoncontainer {
 		display: grid;
 		justify-content: center;
diff --git a/packages/client/src/pages/preview.vue b/packages/client/src/pages/preview.vue
index 4fda74806d..41e662ff8e 100644
--- a/packages/client/src/pages/preview.vue
+++ b/packages/client/src/pages/preview.vue
@@ -1,23 +1,25 @@
 <template>
-<div class="graojtoi">
-	<MkSample/>
-</div>
+	<div class="graojtoi">
+		<MkSample />
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
-import MkSample from '@/components/MkSample.vue';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import { computed } from "vue";
+import MkSample from "@/components/MkSample.vue";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
 const headerActions = $computed(() => []);
 
 const headerTabs = $computed(() => []);
 
-definePageMetadata(computed(() => ({
-	title: i18n.ts.preview,
-	icon: 'ph-eye ph-bold ph-lg',
-})));
+definePageMetadata(
+	computed(() => ({
+		title: i18n.ts.preview,
+		icon: "ph-eye ph-bold ph-lg",
+	}))
+);
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/pages/registry.keys.vue b/packages/client/src/pages/registry.keys.vue
index 4217e40792..bdc258489d 100644
--- a/packages/client/src/pages/registry.keys.vue
+++ b/packages/client/src/pages/registry.keys.vue
@@ -1,54 +1,68 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
-	<MkSpacer :content-max="600" :margin-min="16">
-		<FormSplit>
-			<MkKeyValue class="_formBlock">
-				<template #key>{{ i18n.ts._registry.domain }}</template>
-				<template #value>{{ i18n.ts.system }}</template>
-			</MkKeyValue>
-			<MkKeyValue class="_formBlock">
-				<template #key>{{ i18n.ts._registry.scope }}</template>
-				<template #value>{{ scope.join('/') }}</template>
-			</MkKeyValue>
-		</FormSplit>
-		
-		<MkButton primary @click="createKey">{{ i18n.ts._registry.createKey }}</MkButton>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader :actions="headerActions" :tabs="headerTabs"
+		/></template>
+		<MkSpacer :content-max="600" :margin-min="16">
+			<FormSplit>
+				<MkKeyValue class="_formBlock">
+					<template #key>{{ i18n.ts._registry.domain }}</template>
+					<template #value>{{ i18n.ts.system }}</template>
+				</MkKeyValue>
+				<MkKeyValue class="_formBlock">
+					<template #key>{{ i18n.ts._registry.scope }}</template>
+					<template #value>{{ scope.join("/") }}</template>
+				</MkKeyValue>
+			</FormSplit>
 
-		<FormSection v-if="keys">
-			<template #label>{{ i18n.ts.keys }}</template>
-			<div class="_formLinks">
-				<FormLink v-for="key in keys" :to="`/registry/value/system/${scope.join('/')}/${key[0]}`" class="_monospace">{{ key[0] }}<template #suffix>{{ key[1].toUpperCase() }}</template></FormLink>
-			</div>
-		</FormSection>
-	</MkSpacer>
-</MkStickyContainer>
+			<MkButton primary @click="createKey">{{
+				i18n.ts._registry.createKey
+			}}</MkButton>
+
+			<FormSection v-if="keys">
+				<template #label>{{ i18n.ts.keys }}</template>
+				<div class="_formLinks">
+					<FormLink
+						v-for="key in keys"
+						:to="`/registry/value/system/${scope.join('/')}/${
+							key[0]
+						}`"
+						class="_monospace"
+						>{{ key[0]
+						}}<template #suffix>{{
+							key[1].toUpperCase()
+						}}</template></FormLink
+					>
+				</div>
+			</FormSection>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { ref, watch } from 'vue';
-import JSON5 from 'json5';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import FormLink from '@/components/form/link.vue';
-import FormSection from '@/components/form/section.vue';
-import MkButton from '@/components/MkButton.vue';
-import MkKeyValue from '@/components/MkKeyValue.vue';
-import FormSplit from '@/components/form/split.vue';
+import { ref, watch } from "vue";
+import JSON5 from "json5";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
+import FormLink from "@/components/form/link.vue";
+import FormSection from "@/components/form/section.vue";
+import MkButton from "@/components/MkButton.vue";
+import MkKeyValue from "@/components/MkKeyValue.vue";
+import FormSplit from "@/components/form/split.vue";
 
 const props = defineProps<{
 	path: string;
 }>();
 
-const scope = $computed(() => props.path.split('/'));
+const scope = $computed(() => props.path.split("/"));
 
 let keys = $ref(null);
 
 function fetchKeys() {
-	os.api('i/registry/keys-with-type', {
+	os.api("i/registry/keys-with-type", {
 		scope: scope,
-	}).then(res => {
+	}).then((res) => {
 		keys = Object.entries(res).sort((a, b) => a[0].localeCompare(b[0]));
 	});
 }
@@ -56,23 +70,23 @@ function fetchKeys() {
 async function createKey() {
 	const { canceled, result } = await os.form(i18n.ts._registry.createKey, {
 		key: {
-			type: 'string',
+			type: "string",
 			label: i18n.ts._registry.key,
 		},
 		value: {
-			type: 'string',
+			type: "string",
 			multiline: true,
 			label: i18n.ts.value,
 		},
 		scope: {
-			type: 'string',
+			type: "string",
 			label: i18n.ts._registry.scope,
-			default: scope.join('/'),
+			default: scope.join("/"),
 		},
 	});
 	if (canceled) return;
-	os.apiWithDialog('i/registry/set', {
-		scope: result.scope.split('/'),
+	os.apiWithDialog("i/registry/set", {
+		scope: result.scope.split("/"),
 		key: result.key,
 		value: JSON5.parse(result.value),
 	}).then(() => {
@@ -88,9 +102,8 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.registry,
-	icon: 'ph-gear-six ph-bold ph-lg',
+	icon: "ph-gear-six ph-bold ph-lg",
 });
 </script>
 
-<style lang="scss" scoped>
-</style>
+<style lang="scss" scoped></style>
diff --git a/packages/client/src/pages/registry.value.vue b/packages/client/src/pages/registry.value.vue
index 2057dee29a..b95061c7e5 100644
--- a/packages/client/src/pages/registry.value.vue
+++ b/packages/client/src/pages/registry.value.vue
@@ -1,73 +1,89 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
-	<MkSpacer :content-max="600" :margin-min="16">
-		<FormInfo warn>{{ i18n.ts.editTheseSettingsMayBreakAccount }}</FormInfo>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader :actions="headerActions" :tabs="headerTabs"
+		/></template>
+		<MkSpacer :content-max="600" :margin-min="16">
+			<FormInfo warn>{{
+				i18n.ts.editTheseSettingsMayBreakAccount
+			}}</FormInfo>
+
+			<template v-if="value">
+				<FormSplit>
+					<MkKeyValue class="_formBlock">
+						<template #key>{{ i18n.ts._registry.domain }}</template>
+						<template #value>{{ i18n.ts.system }}</template>
+					</MkKeyValue>
+					<MkKeyValue class="_formBlock">
+						<template #key>{{ i18n.ts._registry.scope }}</template>
+						<template #value>{{ scope.join("/") }}</template>
+					</MkKeyValue>
+					<MkKeyValue class="_formBlock">
+						<template #key>{{ i18n.ts._registry.key }}</template>
+						<template #value>{{ key }}</template>
+					</MkKeyValue>
+				</FormSplit>
+
+				<FormTextarea
+					v-model="valueForEditor"
+					tall
+					class="_formBlock _monospace"
+				>
+					<template #label>{{ i18n.ts.value }} (JSON)</template>
+				</FormTextarea>
+
+				<MkButton class="_formBlock" primary @click="save"
+					><i class="ph-floppy-disk-back ph-bold ph-lg"></i>
+					{{ i18n.ts.save }}</MkButton
+				>
 
-		<template v-if="value">
-			<FormSplit>
 				<MkKeyValue class="_formBlock">
-					<template #key>{{ i18n.ts._registry.domain }}</template>
-					<template #value>{{ i18n.ts.system }}</template>
+					<template #key>{{ i18n.ts.updatedAt }}</template>
+					<template #value
+						><MkTime :time="value.updatedAt" mode="detail"
+					/></template>
 				</MkKeyValue>
-				<MkKeyValue class="_formBlock">
-					<template #key>{{ i18n.ts._registry.scope }}</template>
-					<template #value>{{ scope.join('/') }}</template>
-				</MkKeyValue>
-				<MkKeyValue class="_formBlock">
-					<template #key>{{ i18n.ts._registry.key }}</template>
-					<template #value>{{ key }}</template>
-				</MkKeyValue>
-			</FormSplit>
-			
-			<FormTextarea v-model="valueForEditor" tall class="_formBlock _monospace">
-				<template #label>{{ i18n.ts.value }} (JSON)</template>
-			</FormTextarea>
 
-			<MkButton class="_formBlock" primary @click="save"><i class="ph-floppy-disk-back ph-bold ph-lg"></i> {{ i18n.ts.save }}</MkButton>
-
-			<MkKeyValue class="_formBlock">
-				<template #key>{{ i18n.ts.updatedAt }}</template>
-				<template #value><MkTime :time="value.updatedAt" mode="detail"/></template>
-			</MkKeyValue>
-
-			<MkButton danger @click="del"><i class="ph-trash ph-bold ph-lg"></i> {{ i18n.ts.delete }}</MkButton>
-		</template>
-	</MkSpacer>
-</MkStickyContainer>
+				<MkButton danger @click="del"
+					><i class="ph-trash ph-bold ph-lg"></i>
+					{{ i18n.ts.delete }}</MkButton
+				>
+			</template>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { ref, watch } from 'vue';
-import JSON5 from 'json5';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import FormLink from '@/components/form/link.vue';
-import FormSection from '@/components/form/section.vue';
-import MkButton from '@/components/MkButton.vue';
-import MkKeyValue from '@/components/MkKeyValue.vue';
-import FormTextarea from '@/components/form/textarea.vue';
-import FormSplit from '@/components/form/split.vue';
-import FormInfo from '@/components/MkInfo.vue';
+import { ref, watch } from "vue";
+import JSON5 from "json5";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
+import FormLink from "@/components/form/link.vue";
+import FormSection from "@/components/form/section.vue";
+import MkButton from "@/components/MkButton.vue";
+import MkKeyValue from "@/components/MkKeyValue.vue";
+import FormTextarea from "@/components/form/textarea.vue";
+import FormSplit from "@/components/form/split.vue";
+import FormInfo from "@/components/MkInfo.vue";
 
 const props = defineProps<{
 	path: string;
 }>();
 
-const scope = $computed(() => props.path.split('/').slice(0, -1));
-const key = $computed(() => props.path.split('/').at(-1));
+const scope = $computed(() => props.path.split("/").slice(0, -1));
+const key = $computed(() => props.path.split("/").at(-1));
 
 let value = $ref(null);
 let valueForEditor = $ref(null);
 
 function fetchValue() {
-	os.api('i/registry/get-detail', {
+	os.api("i/registry/get-detail", {
 		scope,
 		key,
-	}).then(res => {
+	}).then((res) => {
 		value = res;
-		valueForEditor = JSON5.stringify(res.value, null, '\t');
+		valueForEditor = JSON5.stringify(res.value, null, "\t");
 	});
 }
 
@@ -76,17 +92,17 @@ async function save() {
 		JSON5.parse(valueForEditor);
 	} catch (err) {
 		os.alert({
-			type: 'error',
+			type: "error",
 			text: i18n.ts.invalidValue,
 		});
 		return;
 	}
 	os.confirm({
-		type: 'warning',
+		type: "warning",
 		text: i18n.ts.saveConfirm,
 	}).then(({ canceled }) => {
 		if (canceled) return;
-		os.apiWithDialog('i/registry/set', {
+		os.apiWithDialog("i/registry/set", {
 			scope,
 			key,
 			value: JSON5.parse(valueForEditor),
@@ -96,11 +112,11 @@ async function save() {
 
 function del() {
 	os.confirm({
-		type: 'warning',
+		type: "warning",
 		text: i18n.ts.deleteConfirm,
 	}).then(({ canceled }) => {
 		if (canceled) return;
-		os.apiWithDialog('i/registry/remove', {
+		os.apiWithDialog("i/registry/remove", {
 			scope,
 			key,
 		});
@@ -115,9 +131,8 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.registry,
-	icon: 'ph-gear-six ph-bold ph-lg',
+	icon: "ph-gear-six ph-bold ph-lg",
 });
 </script>
 
-<style lang="scss" scoped>
-</style>
+<style lang="scss" scoped></style>
diff --git a/packages/client/src/pages/registry.vue b/packages/client/src/pages/registry.vue
index dc286d5cfe..7bb300c99d 100644
--- a/packages/client/src/pages/registry.vue
+++ b/packages/client/src/pages/registry.vue
@@ -1,56 +1,67 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
-	<MkSpacer :content-max="600" :margin-min="16">
-		<MkButton primary @click="createKey">{{ i18n.ts._registry.createKey }}</MkButton>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader :actions="headerActions" :tabs="headerTabs"
+		/></template>
+		<MkSpacer :content-max="600" :margin-min="16">
+			<MkButton primary @click="createKey">{{
+				i18n.ts._registry.createKey
+			}}</MkButton>
 
-		<FormSection v-if="scopes">
-			<template #label>{{ i18n.ts.system }}</template>
-			<div class="_formLinks">
-				<FormLink v-for="scope in scopes" :to="`/registry/keys/system/${scope.join('/')}`" class="_monospace">{{ scope.join('/') }}</FormLink>
-			</div>
-		</FormSection>
-	</MkSpacer>
-</MkStickyContainer>
+			<FormSection v-if="scopes">
+				<template #label>{{ i18n.ts.system }}</template>
+				<div class="_formLinks">
+					<FormLink
+						v-for="scope in scopes"
+						:to="`/registry/keys/system/${scope.join('/')}`"
+						class="_monospace"
+						>{{ scope.join("/") }}</FormLink
+					>
+				</div>
+			</FormSection>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { ref, watch } from 'vue';
-import JSON5 from 'json5';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import FormLink from '@/components/form/link.vue';
-import FormSection from '@/components/form/section.vue';
-import MkButton from '@/components/MkButton.vue';
+import { ref, watch } from "vue";
+import JSON5 from "json5";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
+import FormLink from "@/components/form/link.vue";
+import FormSection from "@/components/form/section.vue";
+import MkButton from "@/components/MkButton.vue";
 
 let scopes = $ref(null);
 
 function fetchScopes() {
-	os.api('i/registry/scopes').then(res => {
-		scopes = res.slice().sort((a, b) => a.join('/').localeCompare(b.join('/')));
+	os.api("i/registry/scopes").then((res) => {
+		scopes = res
+			.slice()
+			.sort((a, b) => a.join("/").localeCompare(b.join("/")));
 	});
 }
 
 async function createKey() {
 	const { canceled, result } = await os.form(i18n.ts._registry.createKey, {
 		key: {
-			type: 'string',
+			type: "string",
 			label: i18n.ts._registry.key,
 		},
 		value: {
-			type: 'string',
+			type: "string",
 			multiline: true,
 			label: i18n.ts.value,
 		},
 		scope: {
-			type: 'string',
+			type: "string",
 			label: i18n.ts._registry.scope,
 		},
 	});
 	if (canceled) return;
-	os.apiWithDialog('i/registry/set', {
-		scope: result.scope.split('/'),
+	os.apiWithDialog("i/registry/set", {
+		scope: result.scope.split("/"),
 		key: result.key,
 		value: JSON5.parse(result.value),
 	}).then(() => {
@@ -66,9 +77,8 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.registry,
-	icon: 'ph-gear-six ph-bold ph-lg',
+	icon: "ph-gear-six ph-bold ph-lg",
 });
 </script>
 
-<style lang="scss" scoped>
-</style>
+<style lang="scss" scoped></style>
diff --git a/packages/client/src/pages/reset-password.vue b/packages/client/src/pages/reset-password.vue
index 6726671bb9..3f57e89023 100644
--- a/packages/client/src/pages/reset-password.vue
+++ b/packages/client/src/pages/reset-password.vue
@@ -1,46 +1,68 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
-	<MkSpacer v-if="token" :content-max="700" :margin-min="16" :margin-max="32">
-		<div class="_formRoot">
-			<FormInput v-model="password" type="password" class="_formBlock">
-				<template #prefix><i class="ph-lock ph-bold ph-lg"></i></template>
-				<template #label>{{ i18n.ts.newPassword }}</template>
-			</FormInput>
-		
-			<FormButton primary class="_formBlock" @click="save">{{ i18n.ts.save }}</FormButton>
-		</div>
-	</MkSpacer>
-</MkStickyContainer>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader :actions="headerActions" :tabs="headerTabs"
+		/></template>
+		<MkSpacer
+			v-if="token"
+			:content-max="700"
+			:margin-min="16"
+			:margin-max="32"
+		>
+			<div class="_formRoot">
+				<FormInput
+					v-model="password"
+					type="password"
+					class="_formBlock"
+				>
+					<template #prefix
+						><i class="ph-lock ph-bold ph-lg"></i
+					></template>
+					<template #label>{{ i18n.ts.newPassword }}</template>
+				</FormInput>
+
+				<FormButton primary class="_formBlock" @click="save">{{
+					i18n.ts.save
+				}}</FormButton>
+			</div>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent, onMounted } from 'vue';
-import FormInput from '@/components/form/input.vue';
-import FormButton from '@/components/MkButton.vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { mainRouter } from '@/router';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import { defineAsyncComponent, onMounted } from "vue";
+import FormInput from "@/components/form/input.vue";
+import FormButton from "@/components/MkButton.vue";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
+import { mainRouter } from "@/router";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
 const props = defineProps<{
 	token?: string;
 }>();
 
-let password = $ref('');
+let password = $ref("");
 
 async function save() {
-	await os.apiWithDialog('reset-password', {
+	await os.apiWithDialog("reset-password", {
 		token: props.token,
 		password: password,
 	});
-	mainRouter.push('/');
+	mainRouter.push("/");
 }
 
 onMounted(() => {
 	if (props.token == null) {
-		os.popup(defineAsyncComponent(() => import('@/components/MkForgotPassword.vue')), {}, {}, 'closed');
-		mainRouter.push('/');
+		os.popup(
+			defineAsyncComponent(
+				() => import("@/components/MkForgotPassword.vue")
+			),
+			{},
+			{},
+			"closed"
+		);
+		mainRouter.push("/");
 	}
 });
 
@@ -50,10 +72,8 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.resetPassword,
-	icon: 'ph-lock ph-bold ph-lg',
+	icon: "ph-lock ph-bold ph-lg",
 });
 </script>
 
-<style lang="scss" scoped>
-
-</style>
+<style lang="scss" scoped></style>
diff --git a/packages/client/src/pages/scratchpad.vue b/packages/client/src/pages/scratchpad.vue
index 7d423e7dde..06c6a8c27f 100644
--- a/packages/client/src/pages/scratchpad.vue
+++ b/packages/client/src/pages/scratchpad.vue
@@ -1,94 +1,121 @@
 <template>
-<div class="iltifgqe">
-	<div class="editor _panel _gap">
-		<PrismEditor v-model="code" class="_code code" style="height: 30vh" :highlight="highlighter" :line-numbers="false"/>
-		<MkButton style="position: absolute; top: 8px; right: 8px;" primary @click="run()"><i class="ph-play ph-bold ph-lg"></i></MkButton>
-	</div>
-
-	<MkContainer :foldable="true" class="_gap">
-		<template #header>{{ i18n.ts.output }}</template>
-		<div class="bepmlvbi">
-			<div v-for="log in logs" :key="log.id" class="log" :class="{ print: log.print }">{{ log.text }}</div>
+	<div class="iltifgqe">
+		<div class="editor _panel _gap">
+			<PrismEditor
+				v-model="code"
+				class="_code code"
+				style="height: 30vh"
+				:highlight="highlighter"
+				:line-numbers="false"
+			/>
+			<MkButton
+				style="position: absolute; top: 8px; right: 8px"
+				primary
+				@click="run()"
+				><i class="ph-play ph-bold ph-lg"></i
+			></MkButton>
 		</div>
-	</MkContainer>
 
-	<div class="_gap">
-		{{ i18n.ts.scratchpadDescription }}
+		<MkContainer :foldable="true" class="_gap">
+			<template #header>{{ i18n.ts.output }}</template>
+			<div class="bepmlvbi">
+				<div
+					v-for="log in logs"
+					:key="log.id"
+					class="log"
+					:class="{ print: log.print }"
+				>
+					{{ log.text }}
+				</div>
+			</div>
+		</MkContainer>
+
+		<div class="_gap">
+			{{ i18n.ts.scratchpadDescription }}
+		</div>
 	</div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { ref, watch } from 'vue';
-import 'prismjs';
-import { highlight, languages } from 'prismjs/components/prism-core';
-import 'prismjs/components/prism-clike';
-import 'prismjs/components/prism-javascript';
-import 'prismjs/themes/prism-okaidia.css';
-import { PrismEditor } from 'vue-prism-editor';
-import 'vue-prism-editor/dist/prismeditor.min.css';
-import { AiScript, parse, utils } from '@syuilo/aiscript';
-import MkContainer from '@/components/MkContainer.vue';
-import MkButton from '@/components/MkButton.vue';
-import { createAiScriptEnv } from '@/scripts/aiscript/api';
-import * as os from '@/os';
-import { $i } from '@/account';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import { ref, watch } from "vue";
+import "prismjs";
+import { highlight, languages } from "prismjs/components/prism-core";
+import "prismjs/components/prism-clike";
+import "prismjs/components/prism-javascript";
+import "prismjs/themes/prism-okaidia.css";
+import { PrismEditor } from "vue-prism-editor";
+import "vue-prism-editor/dist/prismeditor.min.css";
+import { AiScript, parse, utils } from "@syuilo/aiscript";
+import MkContainer from "@/components/MkContainer.vue";
+import MkButton from "@/components/MkButton.vue";
+import { createAiScriptEnv } from "@/scripts/aiscript/api";
+import * as os from "@/os";
+import { $i } from "@/account";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
-const code = ref('');
+const code = ref("");
 const logs = ref<any[]>([]);
 
-const saved = localStorage.getItem('scratchpad');
+const saved = localStorage.getItem("scratchpad");
 if (saved) {
 	code.value = saved;
 }
 
 watch(code, () => {
-	localStorage.setItem('scratchpad', code.value);
+	localStorage.setItem("scratchpad", code.value);
 });
 
 async function run() {
 	logs.value = [];
-	const aiscript = new AiScript(createAiScriptEnv({
-		storageKey: 'scratchpad',
-		token: $i?.token,
-	}), {
-		in: (q) => {
-			return new Promise(ok => {
-				os.inputText({
-					title: q,
-				}).then(({ canceled, result: a }) => {
-					ok(a);
+	const aiscript = new AiScript(
+		createAiScriptEnv({
+			storageKey: "scratchpad",
+			token: $i?.token,
+		}),
+		{
+			in: (q) => {
+				return new Promise((ok) => {
+					os.inputText({
+						title: q,
+					}).then(({ canceled, result: a }) => {
+						ok(a);
+					});
 				});
-			});
-		},
-		out: (value) => {
-			logs.value.push({
-				id: Math.random(),
-				text: value.type === 'str' ? value.value : utils.valToString(value),
-				print: true,
-			});
-		},
-		log: (type, params) => {
-			switch (type) {
-				case 'end': logs.value.push({
+			},
+			out: (value) => {
+				logs.value.push({
 					id: Math.random(),
-					text: utils.valToString(params.val, true),
-					print: false,
-				}); break;
-				default: break;
-			}
-		},
-	});
+					text:
+						value.type === "str"
+							? value.value
+							: utils.valToString(value),
+					print: true,
+				});
+			},
+			log: (type, params) => {
+				switch (type) {
+					case "end":
+						logs.value.push({
+							id: Math.random(),
+							text: utils.valToString(params.val, true),
+							print: false,
+						});
+						break;
+					default:
+						break;
+				}
+			},
+		}
+	);
 
 	let ast;
 	try {
 		ast = parse(code.value);
 	} catch (error) {
 		os.alert({
-			type: 'error',
-			text: 'Syntax error :(',
+			type: "error",
+			text: "Syntax error :(",
 		});
 		return;
 	}
@@ -96,14 +123,14 @@ async function run() {
 		await aiscript.exec(ast);
 	} catch (error: any) {
 		os.alert({
-			type: 'error',
+			type: "error",
 			text: error.message,
 		});
 	}
 }
 
 function highlighter(code) {
-	return highlight(code, languages.js, 'javascript');
+	return highlight(code, languages.js, "javascript");
 }
 
 const headerActions = $computed(() => []);
@@ -112,7 +139,7 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.scratchpad,
-	icon: 'ph-terminal-window ph-bold ph-lg',
+	icon: "ph-terminal-window ph-bold ph-lg",
 });
 </script>
 
diff --git a/packages/client/src/pages/search.vue b/packages/client/src/pages/search.vue
index 6213d0d78a..f900caad41 100644
--- a/packages/client/src/pages/search.vue
+++ b/packages/client/src/pages/search.vue
@@ -1,37 +1,52 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs" :display-back-button="true"/></template>
-	<MkSpacer :content-max="800">
-		<swiper
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader
+				v-model:tab="tab"
+				:actions="headerActions"
+				:tabs="headerTabs"
+				:display-back-button="true"
+		/></template>
+		<MkSpacer :content-max="800">
+			<swiper
 				:modules="[Virtual]"
 				:space-between="20"
 				:virtual="true"
-				:allow-touch-move="!(deviceKind === 'desktop' && !defaultStore.state.swipeOnDesktop)"
+				:allow-touch-move="
+					!(
+						deviceKind === 'desktop' &&
+						!defaultStore.state.swipeOnDesktop
+					)
+				"
 				@swiper="setSwiperRef"
 				@slide-change="onSlideChange"
 			>
 				<swiper-slide>
-					<XNotes ref="notes" :pagination="notesPagination"/>
+					<XNotes ref="notes" :pagination="notesPagination" />
 				</swiper-slide>
 				<swiper-slide>
-					<XUserList ref="users" class="_gap" :pagination="usersPagination"/>
+					<XUserList
+						ref="users"
+						class="_gap"
+						:pagination="usersPagination"
+					/>
 				</swiper-slide>
 			</swiper>
-	</MkSpacer>
-</MkStickyContainer>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { computed, watch, onMounted } from 'vue';
-import { Virtual } from 'swiper';
-import { Swiper, SwiperSlide } from 'swiper/vue';
-import XNotes from '@/components/MkNotes.vue';
-import XUserList from '@/components/MkUserList.vue';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import { defaultStore } from '@/store';
-import 'swiper/scss';
-import 'swiper/scss/virtual';
+import { computed, watch, onMounted } from "vue";
+import { Virtual } from "swiper";
+import { Swiper, SwiperSlide } from "swiper/vue";
+import XNotes from "@/components/MkNotes.vue";
+import XUserList from "@/components/MkUserList.vue";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
+import { defaultStore } from "@/store";
+import "swiper/scss";
+import "swiper/scss/virtual";
 
 const props = defineProps<{
 	query: string;
@@ -39,7 +54,7 @@ const props = defineProps<{
 }>();
 
 const notesPagination = {
-	endpoint: 'notes/search' as const,
+	endpoint: "notes/search" as const,
 	limit: 10,
 	params: computed(() => ({
 		query: props.query,
@@ -48,29 +63,32 @@ const notesPagination = {
 };
 
 const usersPagination = {
-	endpoint: 'users/search' as const,
+	endpoint: "users/search" as const,
 	limit: 10,
 	params: computed(() => ({
 		query: props.query,
-		origin: 'combined',
+		origin: "combined",
 	})),
 };
 
-const tabs = ['notes', 'users'];
+const tabs = ["notes", "users"];
 let tab = $ref(tabs[0]);
-watch($$(tab), () => (syncSlide(tabs.indexOf(tab))));
+watch($$(tab), () => syncSlide(tabs.indexOf(tab)));
 
 const headerActions = $computed(() => []);
 
-const headerTabs = $computed(() => [ {
-	key: 'notes',
-	icon: 'ph-magnifying-glass ph-bold ph-lg',
-	title: i18n.ts.notes,
-}, {
-	key: 'users',
-	icon: 'ph-users ph-bold ph-lg',
-	title: i18n.ts.users,
-}]);
+const headerTabs = $computed(() => [
+	{
+		key: "notes",
+		icon: "ph-magnifying-glass ph-bold ph-lg",
+		title: i18n.ts.notes,
+	},
+	{
+		key: "users",
+		icon: "ph-users ph-bold ph-lg",
+		title: i18n.ts.users,
+	},
+]);
 
 let swiperRef = null;
 
@@ -91,8 +109,10 @@ onMounted(() => {
 	syncSlide(tabs.indexOf(swiperRef.activeIndex));
 });
 
-definePageMetadata(computed(() => ({
-	title: i18n.t('searchWith', { q: props.query }),
-	icon: 'ph-magnifying-glass ph-bold ph-lg',
-})));
+definePageMetadata(
+	computed(() => ({
+		title: i18n.t("searchWith", { q: props.query }),
+		icon: "ph-magnifying-glass ph-bold ph-lg",
+	}))
+);
 </script>
diff --git a/packages/client/src/pages/settings/2fa.vue b/packages/client/src/pages/settings/2fa.vue
index acbd174807..4d856c86ca 100644
--- a/packages/client/src/pages/settings/2fa.vue
+++ b/packages/client/src/pages/settings/2fa.vue
@@ -1,97 +1,167 @@
 <template>
-<div>
-	<MkButton v-if="!twoFactorData && !$i.twoFactorEnabled" @click="register">{{ i18n.ts._2fa.registerDevice }}</MkButton>
-	<template v-if="$i.twoFactorEnabled">
-		<p>{{ i18n.ts._2fa.alreadyRegistered }}</p>
-		<MkButton @click="unregister">{{ i18n.ts.unregister }}</MkButton>
-	</template>
+	<div>
+		<MkButton
+			v-if="!twoFactorData && !$i.twoFactorEnabled"
+			@click="register"
+			>{{ i18n.ts._2fa.registerDevice }}</MkButton
+		>
+		<template v-if="$i.twoFactorEnabled">
+			<p>{{ i18n.ts._2fa.alreadyRegistered }}</p>
+			<MkButton @click="unregister">{{ i18n.ts.unregister }}</MkButton>
+		</template>
 
-	<template v-if="supportsCredentials">
-		<hr class="totp-method-sep">
+		<template v-if="supportsCredentials">
+			<hr class="totp-method-sep" />
 
-		<h2 class="heading">{{ i18n.ts.securityKey }}</h2>
-		<p>{{ i18n.ts._2fa.securityKeyInfo }}</p>
-		<div class="key-list">
-			<div v-for="key in $i.securityKeysList" class="key">
-				<h3>{{ key.name }}</h3>
-				<div class="last-used">{{ i18n.ts.lastUsed }}<MkTime :time="key.lastUsed"/></div>
-				<MkButton @click="unregisterKey(key)">{{ i18n.ts.unregister }}</MkButton>
+			<h2 class="heading">{{ i18n.ts.securityKey }}</h2>
+			<p>{{ i18n.ts._2fa.securityKeyInfo }}</p>
+			<div class="key-list">
+				<div v-for="key in $i.securityKeysList" class="key">
+					<h3>{{ key.name }}</h3>
+					<div class="last-used">
+						{{ i18n.ts.lastUsed }}<MkTime :time="key.lastUsed" />
+					</div>
+					<MkButton @click="unregisterKey(key)">{{
+						i18n.ts.unregister
+					}}</MkButton>
+				</div>
 			</div>
+
+			<MkSwitch
+				v-if="$i.securityKeysList.length > 0"
+				v-model="usePasswordLessLogin"
+				@update:modelValue="updatePasswordLessLogin"
+				>{{ i18n.ts.passwordLessLogin }}</MkSwitch
+			>
+
+			<MkInfo
+				v-if="registration && registration.error"
+				style="margin-bottom: 1rem"
+				warn
+				>{{ i18n.ts.error }}: {{ registration.error }}</MkInfo
+			>
+			<MkButton
+				v-if="!registration || registration.error"
+				@click="addSecurityKey"
+				>{{ i18n.ts._2fa.registerKey }}</MkButton
+			>
+
+			<ol v-if="registration && !registration.error">
+				<li v-if="registration.stage >= 0">
+					{{ i18n.ts.tapSecurityKey }}
+					<i
+						v-if="registration.saving && registration.stage == 0"
+						class="ph-circle-notch ph-bold ph-lg fa-pulse ph-fw ph-lg"
+					></i>
+				</li>
+				<li v-if="registration.stage >= 1">
+					<MkForm
+						:disabled="
+							registration.stage != 1 || registration.saving
+						"
+					>
+						<MkInput v-model="keyName" :max="30">
+							<template #label>{{
+								i18n.ts.securityKeyName
+							}}</template>
+						</MkInput>
+						<MkButton
+							:disabled="keyName.length == 0"
+							@click="registerKey"
+							>{{ i18n.ts.registerSecurityKey }}</MkButton
+						>
+						<i
+							v-if="
+								registration.saving && registration.stage == 1
+							"
+							class="ph-circle-notch ph-bold ph-lg fa-pulse ph-fw ph-lg"
+						></i>
+					</MkForm>
+				</li>
+			</ol>
+		</template>
+		<div v-if="twoFactorData && !$i.twoFactorEnabled">
+			<ol style="margin: 0; padding: 0 0 0 1em">
+				<li>
+					<I18n :src="i18n.ts._2fa.step1" tag="span">
+						<template #a>
+							<a
+								href="https://authpass.app/"
+								rel="noopener"
+								target="_blank"
+								class="_link"
+								>AuthPass</a
+							>
+						</template>
+						<template #b>
+							<a
+								href="https://support.google.com/accounts/answer/1066447"
+								rel="noopener"
+								target="_blank"
+								class="_link"
+								>Google Authenticator</a
+							>
+						</template>
+					</I18n>
+				</li>
+				<li>
+					{{ i18n.ts._2fa.step2 }}<br /><img
+						:src="twoFactorData.qr"
+					/>
+					<p>
+						{{ i18n.ts._2fa.step2Url }}<br />{{ twoFactorData.url }}
+					</p>
+				</li>
+				<li>
+					{{ i18n.ts._2fa.step3 }}<br />
+					<MkInput
+						v-model="token"
+						type="text"
+						pattern="^[0-9]{6}$"
+						autocomplete="off"
+						:spellcheck="false"
+						><template #label>{{
+							i18n.ts.token
+						}}</template></MkInput
+					>
+					<MkButton primary @click="submit">{{
+						i18n.ts.done
+					}}</MkButton>
+				</li>
+			</ol>
+			<MkInfo>{{ i18n.ts._2fa.step4 }}</MkInfo>
 		</div>
-
-		<MkSwitch v-if="$i.securityKeysList.length > 0" v-model="usePasswordLessLogin" @update:modelValue="updatePasswordLessLogin">{{ i18n.ts.passwordLessLogin }}</MkSwitch>
-
-		<MkInfo v-if="registration && registration.error" style="margin-bottom: 1rem;" warn>{{ i18n.ts.error }}: {{ registration.error }}</MkInfo>
-		<MkButton v-if="!registration || registration.error" @click="addSecurityKey">{{ i18n.ts._2fa.registerKey }}</MkButton>
-
-		<ol v-if="registration && !registration.error">
-			<li v-if="registration.stage >= 0">
-				{{ i18n.ts.tapSecurityKey }}
-				<i v-if="registration.saving && registration.stage == 0" class="ph-circle-notch ph-bold ph-lg fa-pulse ph-fw ph-lg"></i>
-			</li>
-			<li v-if="registration.stage >= 1">
-				<MkForm :disabled="registration.stage != 1 || registration.saving">
-					<MkInput v-model="keyName" :max="30">
-						<template #label>{{ i18n.ts.securityKeyName }}</template>
-					</MkInput>
-					<MkButton :disabled="keyName.length == 0" @click="registerKey">{{ i18n.ts.registerSecurityKey }}</MkButton>
-					<i v-if="registration.saving && registration.stage == 1" class="ph-circle-notch ph-bold ph-lg fa-pulse ph-fw ph-lg"></i>
-				</MkForm>
-			</li>
-		</ol>
-	</template>
-	<div v-if="twoFactorData && !$i.twoFactorEnabled">
-		<ol style="margin: 0; padding: 0 0 0 1em;">
-			<li>
-				<I18n :src="i18n.ts._2fa.step1" tag="span">
-					<template #a>
-						<a href="https://authpass.app/" rel="noopener" target="_blank" class="_link">AuthPass</a>
-					</template>
-					<template #b>
-						<a href="https://support.google.com/accounts/answer/1066447" rel="noopener" target="_blank" class="_link">Google Authenticator</a>
-					</template>
-				</I18n>
-			</li>
-			<li>{{ i18n.ts._2fa.step2 }}<br><img :src="twoFactorData.qr"><p>{{ i18n.ts._2fa.step2Url }}<br>{{ twoFactorData.url }}</p></li>
-			<li>
-				{{ i18n.ts._2fa.step3 }}<br>
-				<MkInput v-model="token" type="text" pattern="^[0-9]{6}$" autocomplete="off" :spellcheck="false"><template #label>{{ i18n.ts.token }}</template></MkInput>
-				<MkButton primary @click="submit">{{ i18n.ts.done }}</MkButton>
-			</li>
-		</ol>
-		<MkInfo>{{ i18n.ts._2fa.step4 }}</MkInfo>
 	</div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
-import { hostname } from '@/config';
-import { byteify, hexify, stringify } from '@/scripts/2fa';
-import MkButton from '@/components/MkButton.vue';
-import MkInfo from '@/components/MkInfo.vue';
-import MkInput from '@/components/form/input.vue';
-import MkSwitch from '@/components/form/switch.vue';
-import * as os from '@/os';
-import { $i } from '@/account';
-import { i18n } from '@/i18n';
+import { ref } from "vue";
+import { hostname } from "@/config";
+import { byteify, hexify, stringify } from "@/scripts/2fa";
+import MkButton from "@/components/MkButton.vue";
+import MkInfo from "@/components/MkInfo.vue";
+import MkInput from "@/components/form/input.vue";
+import MkSwitch from "@/components/form/switch.vue";
+import * as os from "@/os";
+import { $i } from "@/account";
+import { i18n } from "@/i18n";
 
 const twoFactorData = ref<any>(null);
 const supportsCredentials = ref(!!navigator.credentials);
 const usePasswordLessLogin = ref($i!.usePasswordLessLogin);
 const registration = ref<any>(null);
-const keyName = ref('');
+const keyName = ref("");
 const token = ref(null);
 
 function register() {
 	os.inputText({
 		title: i18n.ts.password,
-		type: 'password'
+		type: "password",
 	}).then(({ canceled, result: password }) => {
 		if (canceled) return;
-		os.api('i/2fa/register', {
-			password: password
-		}).then(data => {
+		os.api("i/2fa/register", {
+			password: password,
+		}).then((data) => {
 			twoFactorData.value = data;
 		});
 	});
@@ -100,45 +170,53 @@ function register() {
 function unregister() {
 	os.inputText({
 		title: i18n.ts.password,
-		type: 'password'
+		type: "password",
 	}).then(({ canceled, result: password }) => {
 		if (canceled) return;
-		os.api('i/2fa/unregister', {
-			password: password
-		}).then(() => {
-			usePasswordLessLogin.value = false;
-			updatePasswordLessLogin();
-		}).then(() => {
-			os.success();
-			$i!.twoFactorEnabled = false;
-		});
+		os.api("i/2fa/unregister", {
+			password: password,
+		})
+			.then(() => {
+				usePasswordLessLogin.value = false;
+				updatePasswordLessLogin();
+			})
+			.then(() => {
+				os.success();
+				$i!.twoFactorEnabled = false;
+			});
 	});
 }
 
 function submit() {
-	os.api('i/2fa/done', {
-		token: token.value
-	}).then(() => {
-		os.success();
-		$i!.twoFactorEnabled = true;
-	}).catch(err => {
-		os.alert({
-			type: 'error',
-			text: err,
+	os.api("i/2fa/done", {
+		token: token.value,
+	})
+		.then(() => {
+			os.success();
+			$i!.twoFactorEnabled = true;
+		})
+		.catch((err) => {
+			os.alert({
+				type: "error",
+				text: err,
+			});
 		});
-	});
 }
 
 function registerKey() {
 	registration.value.saving = true;
-	os.api('i/2fa/key-done', {
+	os.api("i/2fa/key-done", {
 		password: registration.value.password,
 		name: keyName.value,
 		challengeId: registration.value.challengeId,
 		// we convert each 16 bits to a string to serialise
-		clientDataJSON: stringify(registration.value.credential.response.clientDataJSON),
-		attestationObject: hexify(registration.value.credential.response.attestationObject)
-	}).then(key => {
+		clientDataJSON: stringify(
+			registration.value.credential.response.clientDataJSON
+		),
+		attestationObject: hexify(
+			registration.value.credential.response.attestationObject
+		),
+	}).then((key) => {
 		registration.value = null;
 		key!.lastUsed = new Date();
 		os.success();
@@ -148,69 +226,75 @@ function registerKey() {
 function unregisterKey(key) {
 	os.inputText({
 		title: i18n.ts.password,
-		type: 'password'
+		type: "password",
 	}).then(({ canceled, result: password }) => {
 		if (canceled) return;
-		return os.api('i/2fa/remove-key', {
-			password,
-			credentialId: key.id
-		}).then(() => {
-			usePasswordLessLogin.value = false;
-			updatePasswordLessLogin();
-		}).then(() => {
-			os.success();
-		});
+		return os
+			.api("i/2fa/remove-key", {
+				password,
+				credentialId: key.id,
+			})
+			.then(() => {
+				usePasswordLessLogin.value = false;
+				updatePasswordLessLogin();
+			})
+			.then(() => {
+				os.success();
+			});
 	});
 }
 
 function addSecurityKey() {
 	os.inputText({
 		title: i18n.ts.password,
-		type: 'password'
+		type: "password",
 	}).then(({ canceled, result: password }) => {
 		if (canceled) return;
-		os.api('i/2fa/register-key', {
-			password
-		}).then(reg => {
-			registration.value = {
-				password,
-				challengeId: reg!.challengeId,
-				stage: 0,
-				publicKeyOptions: {
-					challenge: byteify(reg!.challenge, 'base64'),
-					rp: {
-						id: hostname,
-						name: 'Calckey'
+		os.api("i/2fa/register-key", {
+			password,
+		})
+			.then((reg) => {
+				registration.value = {
+					password,
+					challengeId: reg!.challengeId,
+					stage: 0,
+					publicKeyOptions: {
+						challenge: byteify(reg!.challenge, "base64"),
+						rp: {
+							id: hostname,
+							name: "Calckey",
+						},
+						user: {
+							id: byteify($i!.id, "ascii"),
+							name: $i!.username,
+							displayName: $i!.name,
+						},
+						pubKeyCredParams: [{ alg: -7, type: "public-key" }],
+						timeout: 60000,
+						attestation: "direct",
 					},
-					user: {
-						id: byteify($i!.id, 'ascii'),
-						name: $i!.username,
-						displayName: $i!.name,
-					},
-					pubKeyCredParams: [{ alg: -7, type: 'public-key' }],
-					timeout: 60000,
-					attestation: 'direct'
-				},
-				saving: true
-			};
-			return navigator.credentials.create({
-				publicKey: registration.value.publicKeyOptions
+					saving: true,
+				};
+				return navigator.credentials.create({
+					publicKey: registration.value.publicKeyOptions,
+				});
+			})
+			.then((credential) => {
+				registration.value.credential = credential;
+				registration.value.saving = false;
+				registration.value.stage = 1;
+			})
+			.catch((err) => {
+				console.warn("Error while registering?", err);
+				registration.value.error = err.message;
+				registration.value.stage = -1;
 			});
-		}).then(credential => {
-			registration.value.credential = credential;
-			registration.value.saving = false;
-			registration.value.stage = 1;
-		}).catch(err => {
-			console.warn('Error while registering?', err);
-			registration.value.error = err.message;
-			registration.value.stage = -1;
-		});
 	});
 }
 
 async function updatePasswordLessLogin() {
-	await os.api('i/2fa/password-less', {
-		value: !!usePasswordLessLogin.value
+	await os.api("i/2fa/password-less", {
+		value: !!usePasswordLessLogin.value,
 	});
 }
 </script>
diff --git a/packages/client/src/pages/settings/account-info.vue b/packages/client/src/pages/settings/account-info.vue
index 0f8ae6725d..faaee07db0 100644
--- a/packages/client/src/pages/settings/account-info.vue
+++ b/packages/client/src/pages/settings/account-info.vue
@@ -1,148 +1,194 @@
 <template>
-<div class="_formRoot">
-	<MkKeyValue>
-		<template #key>ID</template>
-		<template #value><span class="_monospace">{{ $i.id }}</span></template>
-	</MkKeyValue>
-
-	<FormSection>
+	<div class="_formRoot">
 		<MkKeyValue>
-			<template #key>{{ i18n.ts.registeredDate }}</template>
-			<template #value><MkTime :time="$i.createdAt" mode="detail"/></template>
+			<template #key>ID</template>
+			<template #value
+				><span class="_monospace">{{ $i.id }}</span></template
+			>
 		</MkKeyValue>
-	</FormSection>
 
-	<FormSection v-if="stats">
-		<template #label>{{ i18n.ts.statistics }}</template>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>{{ i18n.ts.notesCount }}</template>
-			<template #value>{{ number(stats.notesCount) }}</template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>{{ i18n.ts.repliesCount }}</template>
-			<template #value>{{ number(stats.repliesCount) }}</template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>{{ i18n.ts.renotesCount }}</template>
-			<template #value>{{ number(stats.renotesCount) }}</template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>{{ i18n.ts.repliedCount }}</template>
-			<template #value>{{ number(stats.repliedCount) }}</template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>{{ i18n.ts.renotedCount }}</template>
-			<template #value>{{ number(stats.renotedCount) }}</template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>{{ i18n.ts.pollVotesCount }}</template>
-			<template #value>{{ number(stats.pollVotesCount) }}</template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>{{ i18n.ts.pollVotedCount }}</template>
-			<template #value>{{ number(stats.pollVotedCount) }}</template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>{{ i18n.ts.sentReactionsCount }}</template>
-			<template #value>{{ number(stats.sentReactionsCount) }}</template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>{{ i18n.ts.receivedReactionsCount }}</template>
-			<template #value>{{ number(stats.receivedReactionsCount) }}</template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>{{ i18n.ts.noteFavoritesCount }}</template>
-			<template #value>{{ number(stats.noteFavoritesCount) }}</template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>{{ i18n.ts.followingCount }}</template>
-			<template #value>{{ number(stats.followingCount) }}</template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>{{ i18n.ts.followingCount }} ({{ i18n.ts.local }})</template>
-			<template #value>{{ number(stats.localFollowingCount) }}</template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>{{ i18n.ts.followingCount }} ({{ i18n.ts.remote }})</template>
-			<template #value>{{ number(stats.remoteFollowingCount) }}</template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>{{ i18n.ts.followersCount }}</template>
-			<template #value>{{ number(stats.followersCount) }}</template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>{{ i18n.ts.followersCount }} ({{ i18n.ts.local }})</template>
-			<template #value>{{ number(stats.localFollowersCount) }}</template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>{{ i18n.ts.followersCount }} ({{ i18n.ts.remote }})</template>
-			<template #value>{{ number(stats.remoteFollowersCount) }}</template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>{{ i18n.ts.pageLikesCount }}</template>
-			<template #value>{{ number(stats.pageLikesCount) }}</template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>{{ i18n.ts.pageLikedCount }}</template>
-			<template #value>{{ number(stats.pageLikedCount) }}</template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>{{ i18n.ts.driveFilesCount }}</template>
-			<template #value>{{ number(stats.driveFilesCount) }}</template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>{{ i18n.ts.driveUsage }}</template>
-			<template #value>{{ bytes(stats.driveUsage) }}</template>
-		</MkKeyValue>
-	</FormSection>
+		<FormSection>
+			<MkKeyValue>
+				<template #key>{{ i18n.ts.registeredDate }}</template>
+				<template #value
+					><MkTime :time="$i.createdAt" mode="detail"
+				/></template>
+			</MkKeyValue>
+		</FormSection>
 
-	<FormSection>
-		<template #label>{{ i18n.ts.other }}</template>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>emailVerified</template>
-			<template #value>{{ $i.emailVerified ? i18n.ts.yes : i18n.ts.no }}</template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>twoFactorEnabled</template>
-			<template #value>{{ $i.twoFactorEnabled ? i18n.ts.yes : i18n.ts.no }}</template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>securityKeys</template>
-			<template #value>{{ $i.securityKeys ? i18n.ts.yes : i18n.ts.no }}</template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>usePasswordLessLogin</template>
-			<template #value>{{ $i.usePasswordLessLogin ? i18n.ts.yes : i18n.ts.no }}</template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>isModerator</template>
-			<template #value>{{ $i.isModerator ? i18n.ts.yes : i18n.ts.no }}</template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>isAdmin</template>
-			<template #value>{{ $i.isAdmin ? i18n.ts.yes : i18n.ts.no }}</template>
-		</MkKeyValue>
-	</FormSection>
-</div>
+		<FormSection v-if="stats">
+			<template #label>{{ i18n.ts.statistics }}</template>
+			<MkKeyValue oneline style="margin: 1em 0">
+				<template #key>{{ i18n.ts.notesCount }}</template>
+				<template #value>{{ number(stats.notesCount) }}</template>
+			</MkKeyValue>
+			<MkKeyValue oneline style="margin: 1em 0">
+				<template #key>{{ i18n.ts.repliesCount }}</template>
+				<template #value>{{ number(stats.repliesCount) }}</template>
+			</MkKeyValue>
+			<MkKeyValue oneline style="margin: 1em 0">
+				<template #key>{{ i18n.ts.renotesCount }}</template>
+				<template #value>{{ number(stats.renotesCount) }}</template>
+			</MkKeyValue>
+			<MkKeyValue oneline style="margin: 1em 0">
+				<template #key>{{ i18n.ts.repliedCount }}</template>
+				<template #value>{{ number(stats.repliedCount) }}</template>
+			</MkKeyValue>
+			<MkKeyValue oneline style="margin: 1em 0">
+				<template #key>{{ i18n.ts.renotedCount }}</template>
+				<template #value>{{ number(stats.renotedCount) }}</template>
+			</MkKeyValue>
+			<MkKeyValue oneline style="margin: 1em 0">
+				<template #key>{{ i18n.ts.pollVotesCount }}</template>
+				<template #value>{{ number(stats.pollVotesCount) }}</template>
+			</MkKeyValue>
+			<MkKeyValue oneline style="margin: 1em 0">
+				<template #key>{{ i18n.ts.pollVotedCount }}</template>
+				<template #value>{{ number(stats.pollVotedCount) }}</template>
+			</MkKeyValue>
+			<MkKeyValue oneline style="margin: 1em 0">
+				<template #key>{{ i18n.ts.sentReactionsCount }}</template>
+				<template #value>{{
+					number(stats.sentReactionsCount)
+				}}</template>
+			</MkKeyValue>
+			<MkKeyValue oneline style="margin: 1em 0">
+				<template #key>{{ i18n.ts.receivedReactionsCount }}</template>
+				<template #value>{{
+					number(stats.receivedReactionsCount)
+				}}</template>
+			</MkKeyValue>
+			<MkKeyValue oneline style="margin: 1em 0">
+				<template #key>{{ i18n.ts.noteFavoritesCount }}</template>
+				<template #value>{{
+					number(stats.noteFavoritesCount)
+				}}</template>
+			</MkKeyValue>
+			<MkKeyValue oneline style="margin: 1em 0">
+				<template #key>{{ i18n.ts.followingCount }}</template>
+				<template #value>{{ number(stats.followingCount) }}</template>
+			</MkKeyValue>
+			<MkKeyValue oneline style="margin: 1em 0">
+				<template #key
+					>{{ i18n.ts.followingCount }} ({{
+						i18n.ts.local
+					}})</template
+				>
+				<template #value>{{
+					number(stats.localFollowingCount)
+				}}</template>
+			</MkKeyValue>
+			<MkKeyValue oneline style="margin: 1em 0">
+				<template #key
+					>{{ i18n.ts.followingCount }} ({{
+						i18n.ts.remote
+					}})</template
+				>
+				<template #value>{{
+					number(stats.remoteFollowingCount)
+				}}</template>
+			</MkKeyValue>
+			<MkKeyValue oneline style="margin: 1em 0">
+				<template #key>{{ i18n.ts.followersCount }}</template>
+				<template #value>{{ number(stats.followersCount) }}</template>
+			</MkKeyValue>
+			<MkKeyValue oneline style="margin: 1em 0">
+				<template #key
+					>{{ i18n.ts.followersCount }} ({{
+						i18n.ts.local
+					}})</template
+				>
+				<template #value>{{
+					number(stats.localFollowersCount)
+				}}</template>
+			</MkKeyValue>
+			<MkKeyValue oneline style="margin: 1em 0">
+				<template #key
+					>{{ i18n.ts.followersCount }} ({{
+						i18n.ts.remote
+					}})</template
+				>
+				<template #value>{{
+					number(stats.remoteFollowersCount)
+				}}</template>
+			</MkKeyValue>
+			<MkKeyValue oneline style="margin: 1em 0">
+				<template #key>{{ i18n.ts.pageLikesCount }}</template>
+				<template #value>{{ number(stats.pageLikesCount) }}</template>
+			</MkKeyValue>
+			<MkKeyValue oneline style="margin: 1em 0">
+				<template #key>{{ i18n.ts.pageLikedCount }}</template>
+				<template #value>{{ number(stats.pageLikedCount) }}</template>
+			</MkKeyValue>
+			<MkKeyValue oneline style="margin: 1em 0">
+				<template #key>{{ i18n.ts.driveFilesCount }}</template>
+				<template #value>{{ number(stats.driveFilesCount) }}</template>
+			</MkKeyValue>
+			<MkKeyValue oneline style="margin: 1em 0">
+				<template #key>{{ i18n.ts.driveUsage }}</template>
+				<template #value>{{ bytes(stats.driveUsage) }}</template>
+			</MkKeyValue>
+		</FormSection>
+
+		<FormSection>
+			<template #label>{{ i18n.ts.other }}</template>
+			<MkKeyValue oneline style="margin: 1em 0">
+				<template #key>emailVerified</template>
+				<template #value>{{
+					$i.emailVerified ? i18n.ts.yes : i18n.ts.no
+				}}</template>
+			</MkKeyValue>
+			<MkKeyValue oneline style="margin: 1em 0">
+				<template #key>twoFactorEnabled</template>
+				<template #value>{{
+					$i.twoFactorEnabled ? i18n.ts.yes : i18n.ts.no
+				}}</template>
+			</MkKeyValue>
+			<MkKeyValue oneline style="margin: 1em 0">
+				<template #key>securityKeys</template>
+				<template #value>{{
+					$i.securityKeys ? i18n.ts.yes : i18n.ts.no
+				}}</template>
+			</MkKeyValue>
+			<MkKeyValue oneline style="margin: 1em 0">
+				<template #key>usePasswordLessLogin</template>
+				<template #value>{{
+					$i.usePasswordLessLogin ? i18n.ts.yes : i18n.ts.no
+				}}</template>
+			</MkKeyValue>
+			<MkKeyValue oneline style="margin: 1em 0">
+				<template #key>isModerator</template>
+				<template #value>{{
+					$i.isModerator ? i18n.ts.yes : i18n.ts.no
+				}}</template>
+			</MkKeyValue>
+			<MkKeyValue oneline style="margin: 1em 0">
+				<template #key>isAdmin</template>
+				<template #value>{{
+					$i.isAdmin ? i18n.ts.yes : i18n.ts.no
+				}}</template>
+			</MkKeyValue>
+		</FormSection>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, ref } from 'vue';
-import FormSection from '@/components/form/section.vue';
-import MkKeyValue from '@/components/MkKeyValue.vue';
-import * as os from '@/os';
-import number from '@/filters/number';
-import bytes from '@/filters/bytes';
-import { $i } from '@/account';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import { onMounted, ref } from "vue";
+import FormSection from "@/components/form/section.vue";
+import MkKeyValue from "@/components/MkKeyValue.vue";
+import * as os from "@/os";
+import number from "@/filters/number";
+import bytes from "@/filters/bytes";
+import { $i } from "@/account";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
 const stats = ref<any>({});
 
 onMounted(() => {
-	os.api('users/stats', {
+	os.api("users/stats", {
 		userId: $i!.id,
-	}).then(response => {
+	}).then((response) => {
 		stats.value = response;
 	});
 });
@@ -153,6 +199,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.accountInfo,
-	icon: 'ph-info ph-bold ph-lg',
+	icon: "ph-info ph-bold ph-lg",
 });
 </script>
diff --git a/packages/client/src/pages/settings/accounts.vue b/packages/client/src/pages/settings/accounts.vue
index 3f90c4b33e..ec2cd2477c 100644
--- a/packages/client/src/pages/settings/accounts.vue
+++ b/packages/client/src/pages/settings/accounts.vue
@@ -1,73 +1,105 @@
 <template>
-<div class="_formRoot">
-	<FormSuspense :p="init">
-		<FormButton primary @click="addAccount"><i class="ph-plus ph-bold ph-lg"></i> {{ i18n.ts.addAccount }}</FormButton>
+	<div class="_formRoot">
+		<FormSuspense :p="init">
+			<FormButton primary @click="addAccount"
+				><i class="ph-plus ph-bold ph-lg"></i>
+				{{ i18n.ts.addAccount }}</FormButton
+			>
 
-		<div v-for="account in accounts" :key="account.id" class="_panel _button lcjjdxlm" @click="menu(account, $event)">
-			<div class="avatar">
-				<MkAvatar :user="account" class="avatar"/>
-			</div>
-			<div class="body">
-				<div class="name">
-					<MkUserName :user="account"/>
+			<div
+				v-for="account in accounts"
+				:key="account.id"
+				class="_panel _button lcjjdxlm"
+				@click="menu(account, $event)"
+			>
+				<div class="avatar">
+					<MkAvatar :user="account" class="avatar" />
 				</div>
-				<div class="acct">
-					<MkAcct :user="account"/>
+				<div class="body">
+					<div class="name">
+						<MkUserName :user="account" />
+					</div>
+					<div class="acct">
+						<MkAcct :user="account" />
+					</div>
 				</div>
 			</div>
-		</div>
-	</FormSuspense>
-</div>
+		</FormSuspense>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent, ref } from 'vue';
-import FormSuspense from '@/components/form/suspense.vue';
-import FormButton from '@/components/MkButton.vue';
-import * as os from '@/os';
-import { getAccounts, addAccount as addAccounts, removeAccount as _removeAccount, login, $i } from '@/account';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import { defineAsyncComponent, ref } from "vue";
+import FormSuspense from "@/components/form/suspense.vue";
+import FormButton from "@/components/MkButton.vue";
+import * as os from "@/os";
+import {
+	getAccounts,
+	addAccount as addAccounts,
+	removeAccount as _removeAccount,
+	login,
+	$i,
+} from "@/account";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
 const storedAccounts = ref<any>(null);
 const accounts = ref<any>(null);
 
 const init = async () => {
-	getAccounts().then(accounts => {
-		storedAccounts.value = accounts.filter(x => x.id !== $i!.id);
+	getAccounts()
+		.then((accounts) => {
+			storedAccounts.value = accounts.filter((x) => x.id !== $i!.id);
 
-		console.log(storedAccounts.value);
+			console.log(storedAccounts.value);
 
-		return os.api('users/show', {
-			userIds: storedAccounts.value.map(x => x.id),
+			return os.api("users/show", {
+				userIds: storedAccounts.value.map((x) => x.id),
+			});
+		})
+		.then((response) => {
+			accounts.value = response;
+			console.log(accounts.value);
 		});
-	}).then(response => {
-		accounts.value = response;
-		console.log(accounts.value);
-	});
 };
 
 function menu(account, ev) {
-	os.popupMenu([{
-		text: i18n.ts.switch,
-		icon: 'ph-swap ph-bold ph-lg',
-		action: () => switchAccount(account),
-	}, {
-		text: i18n.ts.remove,
-		icon: 'ph-trash ph-bold ph-lg',
-		danger: true,
-		action: () => removeAccount(account),
-	}], ev.currentTarget ?? ev.target);
+	os.popupMenu(
+		[
+			{
+				text: i18n.ts.switch,
+				icon: "ph-swap ph-bold ph-lg",
+				action: () => switchAccount(account),
+			},
+			{
+				text: i18n.ts.remove,
+				icon: "ph-trash ph-bold ph-lg",
+				danger: true,
+				action: () => removeAccount(account),
+			},
+		],
+		ev.currentTarget ?? ev.target
+	);
 }
 
 function addAccount(ev) {
-	os.popupMenu([{
-		text: i18n.ts.existingAccount,
-		action: () => { addExistingAccount(); },
-	}, {
-		text: i18n.ts.createAccount,
-		action: () => { createAccount(); },
-	}], ev.currentTarget ?? ev.target);
+	os.popupMenu(
+		[
+			{
+				text: i18n.ts.existingAccount,
+				action: () => {
+					addExistingAccount();
+				},
+			},
+			{
+				text: i18n.ts.createAccount,
+				action: () => {
+					createAccount();
+				},
+			},
+		],
+		ev.currentTarget ?? ev.target
+	);
 }
 
 function removeAccount(account) {
@@ -75,26 +107,36 @@ function removeAccount(account) {
 }
 
 function addExistingAccount() {
-	os.popup(defineAsyncComponent(() => import('@/components/MkSigninDialog.vue')), {}, {
-		done: res => {
-			addAccounts(res.id, res.i);
-			os.success();
+	os.popup(
+		defineAsyncComponent(() => import("@/components/MkSigninDialog.vue")),
+		{},
+		{
+			done: (res) => {
+				addAccounts(res.id, res.i);
+				os.success();
+			},
 		},
-	}, 'closed');
+		"closed"
+	);
 }
 
 function createAccount() {
-	os.popup(defineAsyncComponent(() => import('@/components/MkSignupDialog.vue')), {}, {
-		done: res => {
-			addAccounts(res.id, res.i);
-			switchAccountWithToken(res.i);
+	os.popup(
+		defineAsyncComponent(() => import("@/components/MkSignupDialog.vue")),
+		{},
+		{
+			done: (res) => {
+				addAccounts(res.id, res.i);
+				switchAccountWithToken(res.i);
+			},
 		},
-	}, 'closed');
+		"closed"
+	);
 }
 
 async function switchAccount(account: any) {
 	const fetchedAccounts: any[] = await getAccounts();
-	const token = fetchedAccounts.find(x => x.id === account.id).token;
+	const token = fetchedAccounts.find((x) => x.id === account.id).token;
 	switchAccountWithToken(token);
 }
 
@@ -108,7 +150,7 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.accounts,
-	icon: 'ph-users ph-bold ph-lg',
+	icon: "ph-users ph-bold ph-lg",
 });
 </script>
 
diff --git a/packages/client/src/pages/settings/api.vue b/packages/client/src/pages/settings/api.vue
index 0c3cd38f5f..a694c456ff 100644
--- a/packages/client/src/pages/settings/api.vue
+++ b/packages/client/src/pages/settings/api.vue
@@ -1,38 +1,54 @@
 <template>
-<div class="_formRoot">
-	<FormButton primary class="_formBlock" @click="generateToken">{{ i18n.ts.generateAccessToken }}</FormButton>
-	<FormLink to="/settings/apps" class="_formBlock">{{ i18n.ts.manageAccessTokens }}</FormLink>
-	<FormLink to="/api-console" :behavior="isDesktop ? 'window' : null" class="_formBlock">API console</FormLink>
-</div>
+	<div class="_formRoot">
+		<FormButton primary class="_formBlock" @click="generateToken">{{
+			i18n.ts.generateAccessToken
+		}}</FormButton>
+		<FormLink to="/settings/apps" class="_formBlock">{{
+			i18n.ts.manageAccessTokens
+		}}</FormLink>
+		<FormLink
+			to="/api-console"
+			:behavior="isDesktop ? 'window' : null"
+			class="_formBlock"
+			>API console</FormLink
+		>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent, ref } from 'vue';
-import FormLink from '@/components/form/link.vue';
-import FormButton from '@/components/MkButton.vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import { defineAsyncComponent, ref } from "vue";
+import FormLink from "@/components/form/link.vue";
+import FormButton from "@/components/MkButton.vue";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
 const isDesktop = ref(window.innerWidth >= 1100);
 
 function generateToken() {
-	os.popup(defineAsyncComponent(() => import('@/components/MkTokenGenerateWindow.vue')), {}, {
-		done: async result => {
-			const { name, permissions } = result;
-			const { token } = await os.api('miauth/gen-token', {
-				session: null,
-				name: name,
-				permission: permissions,
-			});
+	os.popup(
+		defineAsyncComponent(
+			() => import("@/components/MkTokenGenerateWindow.vue")
+		),
+		{},
+		{
+			done: async (result) => {
+				const { name, permissions } = result;
+				const { token } = await os.api("miauth/gen-token", {
+					session: null,
+					name: name,
+					permission: permissions,
+				});
 
-			os.alert({
-				type: 'success',
-				title: i18n.ts.token,
-				text: token,
-			});
+				os.alert({
+					type: "success",
+					title: i18n.ts.token,
+					text: token,
+				});
+			},
 		},
-	}, 'closed');
+		"closed"
+	);
 }
 
 const headerActions = $computed(() => []);
@@ -40,7 +56,7 @@ const headerActions = $computed(() => []);
 const headerTabs = $computed(() => []);
 
 definePageMetadata({
-	title: 'API',
-	icon: 'ph-key ph-bold ph-lg',
+	title: "API",
+	icon: "ph-key ph-bold ph-lg",
 });
 </script>
diff --git a/packages/client/src/pages/settings/apps.vue b/packages/client/src/pages/settings/apps.vue
index 608200c823..f42bb77baa 100644
--- a/packages/client/src/pages/settings/apps.vue
+++ b/packages/client/src/pages/settings/apps.vue
@@ -1,61 +1,78 @@
 <template>
-<div class="_formRoot">
-	<FormPagination ref="list" :pagination="pagination">
-		<template #empty>
-			<div class="_fullinfo">
-				<img src="/static-assets/badges/info.png" class="_ghost" alt="Info"/>
-				<div>{{ i18n.ts.nothing }}</div>
-			</div>
-		</template>
-		<template #default="{items}">
-			<div v-for="token in items" :key="token.id" class="_panel bfomjevm">
-				<img v-if="token.iconUrl" class="icon" :src="token.iconUrl" alt=""/>
-				<div class="body">
-					<div class="name">{{ token.name }}</div>
-					<div class="description">{{ token.description }}</div>
-					<div class="_keyValue">
-						<div>{{ i18n.ts.installedDate }}:</div>
-						<div><MkTime :time="token.createdAt"/></div>
-					</div>
-					<div class="_keyValue">
-						<div>{{ i18n.ts.lastUsedDate }}:</div>
-						<div><MkTime :time="token.lastUsedAt"/></div>
-					</div>
-					<div class="actions">
-						<button class="_button" @click="revoke(token)"><i class="ph-trash ph-bold ph-lg"></i></button>
-					</div>
-					<details>
-						<summary>{{ i18n.ts.details }}</summary>
-						<ul>
-							<li v-for="p in token.permission" :key="p">{{ i18n.t(`_permissions.${p}`) }}</li>
-						</ul>
-					</details>
+	<div class="_formRoot">
+		<FormPagination ref="list" :pagination="pagination">
+			<template #empty>
+				<div class="_fullinfo">
+					<img
+						src="/static-assets/badges/info.png"
+						class="_ghost"
+						alt="Info"
+					/>
+					<div>{{ i18n.ts.nothing }}</div>
 				</div>
-			</div>
-		</template>
-	</FormPagination>
-</div>
+			</template>
+			<template #default="{ items }">
+				<div
+					v-for="token in items"
+					:key="token.id"
+					class="_panel bfomjevm"
+				>
+					<img
+						v-if="token.iconUrl"
+						class="icon"
+						:src="token.iconUrl"
+						alt=""
+					/>
+					<div class="body">
+						<div class="name">{{ token.name }}</div>
+						<div class="description">{{ token.description }}</div>
+						<div class="_keyValue">
+							<div>{{ i18n.ts.installedDate }}:</div>
+							<div><MkTime :time="token.createdAt" /></div>
+						</div>
+						<div class="_keyValue">
+							<div>{{ i18n.ts.lastUsedDate }}:</div>
+							<div><MkTime :time="token.lastUsedAt" /></div>
+						</div>
+						<div class="actions">
+							<button class="_button" @click="revoke(token)">
+								<i class="ph-trash ph-bold ph-lg"></i>
+							</button>
+						</div>
+						<details>
+							<summary>{{ i18n.ts.details }}</summary>
+							<ul>
+								<li v-for="p in token.permission" :key="p">
+									{{ i18n.t(`_permissions.${p}`) }}
+								</li>
+							</ul>
+						</details>
+					</div>
+				</div>
+			</template>
+		</FormPagination>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
-import FormPagination from '@/components/MkPagination.vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import { ref } from "vue";
+import FormPagination from "@/components/MkPagination.vue";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
 const list = ref<any>(null);
 
 const pagination = {
-	endpoint: 'i/apps' as const,
+	endpoint: "i/apps" as const,
 	limit: 100,
 	params: {
-		sort: '+lastUsedAt',
+		sort: "+lastUsedAt",
 	},
 };
 
 function revoke(token) {
-	os.api('i/revoke-token', { tokenId: token.id }).then(() => {
+	os.api("i/revoke-token", { tokenId: token.id }).then(() => {
 		list.value.reload();
 	});
 }
@@ -66,7 +83,7 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.installedApps,
-	icon: 'ph-plug ph-bold ph-lg',
+	icon: "ph-plug ph-bold ph-lg",
 });
 </script>
 
diff --git a/packages/client/src/pages/settings/custom-css.vue b/packages/client/src/pages/settings/custom-css.vue
index fe24de2373..e24ff33a9f 100644
--- a/packages/client/src/pages/settings/custom-css.vue
+++ b/packages/client/src/pages/settings/custom-css.vue
@@ -1,29 +1,35 @@
 <template>
-<div class="_formRoot">
-	<FormInfo warn class="_formBlock">{{ i18n.ts.customCssWarn }}</FormInfo>
+	<div class="_formRoot">
+		<FormInfo warn class="_formBlock">{{ i18n.ts.customCssWarn }}</FormInfo>
 
-	<FormTextarea v-model="localCustomCss" manual-save tall class="_monospace _formBlock" style="tab-size: 2;">
-		<template #label>CSS</template>
-	</FormTextarea>
-</div>
+		<FormTextarea
+			v-model="localCustomCss"
+			manual-save
+			tall
+			class="_monospace _formBlock"
+			style="tab-size: 2"
+		>
+			<template #label>CSS</template>
+		</FormTextarea>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { ref, watch } from 'vue';
-import FormTextarea from '@/components/form/textarea.vue';
-import FormInfo from '@/components/MkInfo.vue';
-import * as os from '@/os';
-import { unisonReload } from '@/scripts/unison-reload';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import { ref, watch } from "vue";
+import FormTextarea from "@/components/form/textarea.vue";
+import FormInfo from "@/components/MkInfo.vue";
+import * as os from "@/os";
+import { unisonReload } from "@/scripts/unison-reload";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
-const localCustomCss = ref(localStorage.getItem('customCss') ?? '');
+const localCustomCss = ref(localStorage.getItem("customCss") ?? "");
 
 async function apply() {
-	localStorage.setItem('customCss', localCustomCss.value);
+	localStorage.setItem("customCss", localCustomCss.value);
 
 	const { canceled } = await os.confirm({
-		type: 'info',
+		type: "info",
 		text: i18n.ts.reloadToApplySetting,
 	});
 	if (canceled) return;
@@ -41,6 +47,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.customCss,
-	icon: 'ph-code ph-bold ph-lg',
+	icon: "ph-code ph-bold ph-lg",
 });
 </script>
diff --git a/packages/client/src/pages/settings/custom-katex-macro.vue b/packages/client/src/pages/settings/custom-katex-macro.vue
index e572ab6a7d..88a8e2cae0 100644
--- a/packages/client/src/pages/settings/custom-katex-macro.vue
+++ b/packages/client/src/pages/settings/custom-katex-macro.vue
@@ -1,36 +1,53 @@
 <template>
-<div class="_formRoot">
-	<FormInfo class="_formBlock">{{ i18n.ts.customKaTeXMacroDescription }}</FormInfo>
+	<div class="_formRoot">
+		<FormInfo class="_formBlock">{{
+			i18n.ts.customKaTeXMacroDescription
+		}}</FormInfo>
 
-	<FormTextarea v-model="localCustomKaTeXMacro" manual-save tall class="_monospace _formBlock" style="tab-size: 2;">
-		<template #label>{{ i18n.ts.customKaTeXMacro }}</template>
-	</FormTextarea>
+		<FormTextarea
+			v-model="localCustomKaTeXMacro"
+			manual-save
+			tall
+			class="_monospace _formBlock"
+			style="tab-size: 2"
+		>
+			<template #label>{{ i18n.ts.customKaTeXMacro }}</template>
+		</FormTextarea>
 
-	<FormSwitch v-model="enableCustomKaTeXMacro" class="_formBlock">{{ i18n.ts.enableCustomKaTeXMacro }}</FormSwitch>
-</div>
+		<FormSwitch v-model="enableCustomKaTeXMacro" class="_formBlock">{{
+			i18n.ts.enableCustomKaTeXMacro
+		}}</FormSwitch>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { ref, watch, computed } from 'vue';
-import FormTextarea from '@/components/form/textarea.vue';
-import FormInfo from '@/components/MkInfo.vue';
-import FormSwitch from '@/components/form/switch.vue';
-import * as os from '@/os';
-import { unisonReload } from '@/scripts/unison-reload';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import { parseKaTeXMacros } from '@/scripts/katex-macro';
-import { defaultStore } from '@/store';
+import { ref, watch, computed } from "vue";
+import FormTextarea from "@/components/form/textarea.vue";
+import FormInfo from "@/components/MkInfo.vue";
+import FormSwitch from "@/components/form/switch.vue";
+import * as os from "@/os";
+import { unisonReload } from "@/scripts/unison-reload";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
+import { parseKaTeXMacros } from "@/scripts/katex-macro";
+import { defaultStore } from "@/store";
 
-const localCustomKaTeXMacro = ref(localStorage.getItem('customKaTeXMacro') ?? '');
-const enableCustomKaTeXMacro = computed(defaultStore.makeGetterSetter('enableCustomKaTeXMacro'));
+const localCustomKaTeXMacro = ref(
+	localStorage.getItem("customKaTeXMacro") ?? ""
+);
+const enableCustomKaTeXMacro = computed(
+	defaultStore.makeGetterSetter("enableCustomKaTeXMacro")
+);
 
 async function apply() {
-	localStorage.setItem('customKaTeXMacro', localCustomKaTeXMacro.value);
-	localStorage.setItem('customKaTeXMacroParsed', parseKaTeXMacros(localCustomKaTeXMacro.value));
+	localStorage.setItem("customKaTeXMacro", localCustomKaTeXMacro.value);
+	localStorage.setItem(
+		"customKaTeXMacroParsed",
+		parseKaTeXMacros(localCustomKaTeXMacro.value)
+	);
 
 	const { canceled } = await os.confirm({
-		type: 'info',
+		type: "info",
 		text: i18n.ts.reloadToApplySetting,
 	});
 	if (canceled) return;
@@ -48,6 +65,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.customKaTeXMacro,
-	icon: 'ph-radical ph-bold ph-lg',
+	icon: "ph-radical ph-bold ph-lg",
 });
 </script>
diff --git a/packages/client/src/pages/settings/deck.vue b/packages/client/src/pages/settings/deck.vue
index aa44985dd2..821c5ed077 100644
--- a/packages/client/src/pages/settings/deck.vue
+++ b/packages/client/src/pages/settings/deck.vue
@@ -1,32 +1,39 @@
 <template>
-<div class="_formRoot">
-	<FormSwitch v-model="navWindow">{{ i18n.ts.defaultNavigationBehaviour }}: {{ i18n.ts.openInWindow }}</FormSwitch>
+	<div class="_formRoot">
+		<FormSwitch v-model="navWindow"
+			>{{ i18n.ts.defaultNavigationBehaviour }}:
+			{{ i18n.ts.openInWindow }}</FormSwitch
+		>
 
-	<FormSwitch v-model="alwaysShowMainColumn" class="_formBlock">{{ i18n.ts._deck.alwaysShowMainColumn }}</FormSwitch>
+		<FormSwitch v-model="alwaysShowMainColumn" class="_formBlock">{{
+			i18n.ts._deck.alwaysShowMainColumn
+		}}</FormSwitch>
 
-	<FormRadios v-model="columnAlign" class="_formBlock">
-		<template #label>{{ i18n.ts._deck.columnAlign }}</template>
-		<option value="left">{{ i18n.ts.left }}</option>
-		<option value="center">{{ i18n.ts.center }}</option>
-	</FormRadios>
-</div>
+		<FormRadios v-model="columnAlign" class="_formBlock">
+			<template #label>{{ i18n.ts._deck.columnAlign }}</template>
+			<option value="left">{{ i18n.ts.left }}</option>
+			<option value="center">{{ i18n.ts.center }}</option>
+		</FormRadios>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { computed, watch } from 'vue';
-import FormSwitch from '@/components/form/switch.vue';
-import FormLink from '@/components/form/link.vue';
-import FormRadios from '@/components/form/radios.vue';
-import FormInput from '@/components/form/input.vue';
-import { deckStore } from '@/ui/deck/deck-store';
-import * as os from '@/os';
-import { unisonReload } from '@/scripts/unison-reload';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import { computed, watch } from "vue";
+import FormSwitch from "@/components/form/switch.vue";
+import FormLink from "@/components/form/link.vue";
+import FormRadios from "@/components/form/radios.vue";
+import FormInput from "@/components/form/input.vue";
+import { deckStore } from "@/ui/deck/deck-store";
+import * as os from "@/os";
+import { unisonReload } from "@/scripts/unison-reload";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
-const navWindow = computed(deckStore.makeGetterSetter('navWindow'));
-const alwaysShowMainColumn = computed(deckStore.makeGetterSetter('alwaysShowMainColumn'));
-const columnAlign = computed(deckStore.makeGetterSetter('columnAlign'));
+const navWindow = computed(deckStore.makeGetterSetter("navWindow"));
+const alwaysShowMainColumn = computed(
+	deckStore.makeGetterSetter("alwaysShowMainColumn")
+);
+const columnAlign = computed(deckStore.makeGetterSetter("columnAlign"));
 
 const headerActions = $computed(() => []);
 
@@ -34,6 +41,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.deck,
-	icon: 'ph-layout ph-bold ph-lg',
+	icon: "ph-layout ph-bold ph-lg",
 });
 </script>
diff --git a/packages/client/src/pages/settings/delete-account.vue b/packages/client/src/pages/settings/delete-account.vue
index 044219f438..574806c08f 100644
--- a/packages/client/src/pages/settings/delete-account.vue
+++ b/packages/client/src/pages/settings/delete-account.vue
@@ -1,24 +1,36 @@
 <template>
-<div class="_formRoot">
-	<FormInfo warn class="_formBlock">{{ i18n.ts._accountDelete.mayTakeTime }}</FormInfo>
-	<FormInfo class="_formBlock">{{ i18n.ts._accountDelete.sendEmail }}</FormInfo>
-	<FormButton v-if="!$i.isDeleted" danger class="_formBlock" @click="deleteAccount">{{ i18n.ts._accountDelete.requestAccountDelete }}</FormButton>
-	<FormButton v-else disabled>{{ i18n.ts._accountDelete.inProgress }}</FormButton>
-</div>
+	<div class="_formRoot">
+		<FormInfo warn class="_formBlock">{{
+			i18n.ts._accountDelete.mayTakeTime
+		}}</FormInfo>
+		<FormInfo class="_formBlock">{{
+			i18n.ts._accountDelete.sendEmail
+		}}</FormInfo>
+		<FormButton
+			v-if="!$i.isDeleted"
+			danger
+			class="_formBlock"
+			@click="deleteAccount"
+			>{{ i18n.ts._accountDelete.requestAccountDelete }}</FormButton
+		>
+		<FormButton v-else disabled>{{
+			i18n.ts._accountDelete.inProgress
+		}}</FormButton>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import FormInfo from '@/components/MkInfo.vue';
-import FormButton from '@/components/MkButton.vue';
-import * as os from '@/os';
-import { signout } from '@/account';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import FormInfo from "@/components/MkInfo.vue";
+import FormButton from "@/components/MkButton.vue";
+import * as os from "@/os";
+import { signout } from "@/account";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
 async function deleteAccount() {
 	{
 		const { canceled } = await os.confirm({
-			type: 'warning',
+			type: "warning",
 			text: i18n.ts.deleteAccountConfirm,
 		});
 		if (canceled) return;
@@ -26,11 +38,11 @@ async function deleteAccount() {
 
 	const { canceled, result: password } = await os.inputText({
 		title: i18n.ts.password,
-		type: 'password',
+		type: "password",
 	});
 	if (canceled) return;
 
-	await os.apiWithDialog('i/delete-account', {
+	await os.apiWithDialog("i/delete-account", {
 		password: password,
 	});
 
@@ -47,6 +59,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts._accountDelete.accountDelete,
-	icon: 'ph-warning ph-bold ph-lg',
+	icon: "ph-warning ph-bold ph-lg",
 });
 </script>
diff --git a/packages/client/src/pages/settings/drive.vue b/packages/client/src/pages/settings/drive.vue
index a0c944dccb..42961fdbed 100644
--- a/packages/client/src/pages/settings/drive.vue
+++ b/packages/client/src/pages/settings/drive.vue
@@ -1,64 +1,92 @@
 <template>
-<div class="_formRoot">
-	<FormSection v-if="!fetching">
-		<template #label>{{ i18n.ts.usageAmount }}</template>
-		<div class="_formBlock uawsfosz">
-			<div class="meter"><div :style="meterStyle"></div></div>
-		</div>
-		<FormSplit>
-			<MkKeyValue class="_formBlock">
-				<template #key>{{ i18n.ts.capacity }}</template>
-				<template #value>{{ bytes(capacity, 1) }}</template>
-			</MkKeyValue>
-			<MkKeyValue class="_formBlock">
-				<template #key>{{ i18n.ts.inUse }}</template>
-				<template #value>{{ bytes(usage, 1) }}</template>
-			</MkKeyValue>
-		</FormSplit>
-	</FormSection>
+	<div class="_formRoot">
+		<FormSection v-if="!fetching">
+			<template #label>{{ i18n.ts.usageAmount }}</template>
+			<div class="_formBlock uawsfosz">
+				<div class="meter"><div :style="meterStyle"></div></div>
+			</div>
+			<FormSplit>
+				<MkKeyValue class="_formBlock">
+					<template #key>{{ i18n.ts.capacity }}</template>
+					<template #value>{{ bytes(capacity, 1) }}</template>
+				</MkKeyValue>
+				<MkKeyValue class="_formBlock">
+					<template #key>{{ i18n.ts.inUse }}</template>
+					<template #value>{{ bytes(usage, 1) }}</template>
+				</MkKeyValue>
+			</FormSplit>
+		</FormSection>
 
-	<FormSection>
-		<template #label>{{ i18n.ts.statistics }}</template>
-		<MkChart src="per-user-drive" :args="{ user: $i }" span="day" :limit="7 * 5" :bar="true" :stacked="true" :detailed="false" :aspect-ratio="6"/>
-	</FormSection>
+		<FormSection>
+			<template #label>{{ i18n.ts.statistics }}</template>
+			<MkChart
+				src="per-user-drive"
+				:args="{ user: $i }"
+				span="day"
+				:limit="7 * 5"
+				:bar="true"
+				:stacked="true"
+				:detailed="false"
+				:aspect-ratio="6"
+			/>
+		</FormSection>
 
-	<FormSection>
-		<FormButton @click="chooseUploadFolder()">
-			{{ i18n.ts.uploadFolder }}
-			<template #suffix>{{ uploadFolder ? uploadFolder.name : '-' }}</template>
-			<template #suffixIcon><i class="ph-folder-notch-open ph-bold ph-lg"></i></template>
-		</FormButton>
-		<FormSwitch v-model="keepOriginalUploading" class="_formBlock">
-			<template #label>{{ i18n.ts.keepOriginalUploading }}</template>
-			<template #caption>{{ i18n.ts.keepOriginalUploadingDescription }}</template>
-		</FormSwitch>
-		<FormSwitch v-model="alwaysMarkNsfw" class="_formBlock" @update:modelValue="saveProfile()">
-			<template #label>{{ i18n.ts.alwaysMarkSensitive }}</template>
-		</FormSwitch>
-		<FormSwitch v-model="autoSensitive" class="_formBlock" @update:modelValue="saveProfile()">
-			<template #label>{{ i18n.ts.enableAutoSensitive }}<span class="_beta">{{ i18n.ts.beta }}</span></template>
-			<template #caption>{{ i18n.ts.enableAutoSensitiveDescription }}</template>
-		</FormSwitch>
-	</FormSection>
-</div>
+		<FormSection>
+			<FormButton @click="chooseUploadFolder()">
+				{{ i18n.ts.uploadFolder }}
+				<template #suffix>{{
+					uploadFolder ? uploadFolder.name : "-"
+				}}</template>
+				<template #suffixIcon
+					><i class="ph-folder-notch-open ph-bold ph-lg"></i
+				></template>
+			</FormButton>
+			<FormSwitch v-model="keepOriginalUploading" class="_formBlock">
+				<template #label>{{ i18n.ts.keepOriginalUploading }}</template>
+				<template #caption>{{
+					i18n.ts.keepOriginalUploadingDescription
+				}}</template>
+			</FormSwitch>
+			<FormSwitch
+				v-model="alwaysMarkNsfw"
+				class="_formBlock"
+				@update:modelValue="saveProfile()"
+			>
+				<template #label>{{ i18n.ts.alwaysMarkSensitive }}</template>
+			</FormSwitch>
+			<FormSwitch
+				v-model="autoSensitive"
+				class="_formBlock"
+				@update:modelValue="saveProfile()"
+			>
+				<template #label
+					>{{ i18n.ts.enableAutoSensitive
+					}}<span class="_beta">{{ i18n.ts.beta }}</span></template
+				>
+				<template #caption>{{
+					i18n.ts.enableAutoSensitiveDescription
+				}}</template>
+			</FormSwitch>
+		</FormSection>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { computed, ref } from 'vue';
-import tinycolor from 'tinycolor2';
-import FormLink from '@/components/form/link.vue';
-import FormButton from '@/components/MkButton.vue';
-import FormSwitch from '@/components/form/switch.vue';
-import FormSection from '@/components/form/section.vue';
-import MkKeyValue from '@/components/MkKeyValue.vue';
-import FormSplit from '@/components/form/split.vue';
-import * as os from '@/os';
-import bytes from '@/filters/bytes';
-import { defaultStore } from '@/store';
-import MkChart from '@/components/MkChart.vue';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import { $i } from '@/account';
+import { computed, ref } from "vue";
+import tinycolor from "tinycolor2";
+import FormLink from "@/components/form/link.vue";
+import FormButton from "@/components/MkButton.vue";
+import FormSwitch from "@/components/form/switch.vue";
+import FormSection from "@/components/form/section.vue";
+import MkKeyValue from "@/components/MkKeyValue.vue";
+import FormSplit from "@/components/form/split.vue";
+import * as os from "@/os";
+import bytes from "@/filters/bytes";
+import { defaultStore } from "@/store";
+import MkChart from "@/components/MkChart.vue";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
+import { $i } from "@/account";
 
 const fetching = ref(true);
 const usage = ref<any>(null);
@@ -69,37 +97,39 @@ let autoSensitive = $ref($i.autoSensitive);
 
 const meterStyle = computed(() => {
 	return {
-		width: `${usage.value / capacity.value * 100}%`,
+		width: `${(usage.value / capacity.value) * 100}%`,
 		background: tinycolor({
-			h: 180 - (usage.value / capacity.value * 180),
+			h: 180 - (usage.value / capacity.value) * 180,
 			s: 0.7,
 			l: 0.5,
 		}),
 	};
 });
 
-const keepOriginalUploading = computed(defaultStore.makeGetterSetter('keepOriginalUploading'));
+const keepOriginalUploading = computed(
+	defaultStore.makeGetterSetter("keepOriginalUploading")
+);
 
-os.api('drive').then(info => {
+os.api("drive").then((info) => {
 	capacity.value = info.capacity;
 	usage.value = info.usage;
 	fetching.value = false;
 });
 
 if (defaultStore.state.uploadFolder) {
-	os.api('drive/folders/show', {
+	os.api("drive/folders/show", {
 		folderId: defaultStore.state.uploadFolder,
-	}).then(response => {
+	}).then((response) => {
 		uploadFolder.value = response;
 	});
 }
 
 function chooseUploadFolder() {
-	os.selectDriveFolder(false).then(async folder => {
-		defaultStore.set('uploadFolder', folder ? folder.id : null);
+	os.selectDriveFolder(false).then(async (folder) => {
+		defaultStore.set("uploadFolder", folder ? folder.id : null);
 		os.success();
 		if (defaultStore.state.uploadFolder) {
-			uploadFolder.value = await os.api('drive/folders/show', {
+			uploadFolder.value = await os.api("drive/folders/show", {
 				folderId: defaultStore.state.uploadFolder,
 			});
 		} else {
@@ -109,7 +139,7 @@ function chooseUploadFolder() {
 }
 
 function saveProfile() {
-	os.api('i/update', {
+	os.api("i/update", {
 		alwaysMarkNsfw: !!alwaysMarkNsfw,
 		autoSensitive: !!autoSensitive,
 	});
@@ -121,16 +151,14 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.drive,
-	icon: 'ph-cloud ph-bold ph-lg',
+	icon: "ph-cloud ph-bold ph-lg",
 });
 </script>
 
 <style lang="scss" scoped>
-
 @use "sass:math";
 
 .uawsfosz {
-
 	> .meter {
 		$size: 12px;
 		background: rgba(0, 0, 0, 0.1);
diff --git a/packages/client/src/pages/settings/email.vue b/packages/client/src/pages/settings/email.vue
index bd8b76e6d2..fef21c1f50 100644
--- a/packages/client/src/pages/settings/email.vue
+++ b/packages/client/src/pages/settings/email.vue
@@ -1,58 +1,79 @@
 <template>
-<div class="_formRoot">
-	<FormSection>
-		<template #label>{{ i18n.ts.emailAddress }}</template>
-		<FormInput v-model="emailAddress" type="email" manual-save>
-			<template #prefix><i class="ph-envelope-simple-open ph-bold ph-lg"></i></template>
-			<template v-if="$i.email && !$i.emailVerified" #caption>{{ i18n.ts.verificationEmailSent }}</template>
-			<template v-else-if="emailAddress === $i.email && $i.emailVerified" #caption><i class="ph-check ph-bold ph-lg" style="color: var(--success);"></i> {{ i18n.ts.emailVerified }}</template>
-		</FormInput>
-	</FormSection>
+	<div class="_formRoot">
+		<FormSection>
+			<template #label>{{ i18n.ts.emailAddress }}</template>
+			<FormInput v-model="emailAddress" type="email" manual-save>
+				<template #prefix
+					><i class="ph-envelope-simple-open ph-bold ph-lg"></i
+				></template>
+				<template v-if="$i.email && !$i.emailVerified" #caption>{{
+					i18n.ts.verificationEmailSent
+				}}</template>
+				<template
+					v-else-if="emailAddress === $i.email && $i.emailVerified"
+					#caption
+					><i
+						class="ph-check ph-bold ph-lg"
+						style="color: var(--success)"
+					></i>
+					{{ i18n.ts.emailVerified }}</template
+				>
+			</FormInput>
+		</FormSection>
 
-	<FormSection>
-		<FormSwitch :model-value="$i.receiveAnnouncementEmail" @update:modelValue="onChangeReceiveAnnouncementEmail">
-			{{ i18n.ts.receiveAnnouncementFromInstance }}
-		</FormSwitch>
-	</FormSection>
+		<FormSection>
+			<FormSwitch
+				:model-value="$i.receiveAnnouncementEmail"
+				@update:modelValue="onChangeReceiveAnnouncementEmail"
+			>
+				{{ i18n.ts.receiveAnnouncementFromInstance }}
+			</FormSwitch>
+		</FormSection>
 
-	<FormSection>
-		<template #label>{{ i18n.ts.emailNotification }}</template>
-		<FormSwitch v-model="emailNotification_mention" class="_formBlock">
-			{{ i18n.ts._notification._types.mention }}
-		</FormSwitch>
-		<FormSwitch v-model="emailNotification_reply" class="_formBlock">
-			{{ i18n.ts._notification._types.reply }}
-		</FormSwitch>
-		<FormSwitch v-model="emailNotification_quote" class="_formBlock">
-			{{ i18n.ts._notification._types.quote }}
-		</FormSwitch>
-		<FormSwitch v-model="emailNotification_follow" class="_formBlock">
-			{{ i18n.ts._notification._types.follow }}
-		</FormSwitch>
-		<FormSwitch v-model="emailNotification_receiveFollowRequest" class="_formBlock">
-			{{ i18n.ts._notification._types.receiveFollowRequest }}
-		</FormSwitch>
-		<FormSwitch v-model="emailNotification_groupInvited" class="_formBlock">
-			{{ i18n.ts._notification._types.groupInvited }}
-		</FormSwitch>
-	</FormSection>
-</div>
+		<FormSection>
+			<template #label>{{ i18n.ts.emailNotification }}</template>
+			<FormSwitch v-model="emailNotification_mention" class="_formBlock">
+				{{ i18n.ts._notification._types.mention }}
+			</FormSwitch>
+			<FormSwitch v-model="emailNotification_reply" class="_formBlock">
+				{{ i18n.ts._notification._types.reply }}
+			</FormSwitch>
+			<FormSwitch v-model="emailNotification_quote" class="_formBlock">
+				{{ i18n.ts._notification._types.quote }}
+			</FormSwitch>
+			<FormSwitch v-model="emailNotification_follow" class="_formBlock">
+				{{ i18n.ts._notification._types.follow }}
+			</FormSwitch>
+			<FormSwitch
+				v-model="emailNotification_receiveFollowRequest"
+				class="_formBlock"
+			>
+				{{ i18n.ts._notification._types.receiveFollowRequest }}
+			</FormSwitch>
+			<FormSwitch
+				v-model="emailNotification_groupInvited"
+				class="_formBlock"
+			>
+				{{ i18n.ts._notification._types.groupInvited }}
+			</FormSwitch>
+		</FormSection>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, ref, watch } from 'vue';
-import FormSection from '@/components/form/section.vue';
-import FormInput from '@/components/form/input.vue';
-import FormSwitch from '@/components/form/switch.vue';
-import * as os from '@/os';
-import { $i } from '@/account';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import { onMounted, ref, watch } from "vue";
+import FormSection from "@/components/form/section.vue";
+import FormInput from "@/components/form/input.vue";
+import FormSwitch from "@/components/form/switch.vue";
+import * as os from "@/os";
+import { $i } from "@/account";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
 const emailAddress = ref($i!.email);
 
 const onChangeReceiveAnnouncementEmail = (v) => {
-	os.api('i/update', {
+	os.api("i/update", {
 		receiveAnnouncementEmail: v,
 	});
 };
@@ -60,39 +81,65 @@ const onChangeReceiveAnnouncementEmail = (v) => {
 const saveEmailAddress = () => {
 	os.inputText({
 		title: i18n.ts.password,
-		type: 'password',
+		type: "password",
 	}).then(({ canceled, result: password }) => {
 		if (canceled) return;
-		os.apiWithDialog('i/update-email', {
+		os.apiWithDialog("i/update-email", {
 			password: password,
 			email: emailAddress.value,
 		});
 	});
 };
 
-const emailNotification_mention = ref($i!.emailNotificationTypes.includes('mention'));
-const emailNotification_reply = ref($i!.emailNotificationTypes.includes('reply'));
-const emailNotification_quote = ref($i!.emailNotificationTypes.includes('quote'));
-const emailNotification_follow = ref($i!.emailNotificationTypes.includes('follow'));
-const emailNotification_receiveFollowRequest = ref($i!.emailNotificationTypes.includes('receiveFollowRequest'));
-const emailNotification_groupInvited = ref($i!.emailNotificationTypes.includes('groupInvited'));
+const emailNotification_mention = ref(
+	$i!.emailNotificationTypes.includes("mention")
+);
+const emailNotification_reply = ref(
+	$i!.emailNotificationTypes.includes("reply")
+);
+const emailNotification_quote = ref(
+	$i!.emailNotificationTypes.includes("quote")
+);
+const emailNotification_follow = ref(
+	$i!.emailNotificationTypes.includes("follow")
+);
+const emailNotification_receiveFollowRequest = ref(
+	$i!.emailNotificationTypes.includes("receiveFollowRequest")
+);
+const emailNotification_groupInvited = ref(
+	$i!.emailNotificationTypes.includes("groupInvited")
+);
 
 const saveNotificationSettings = () => {
-	os.api('i/update', {
+	os.api("i/update", {
 		emailNotificationTypes: [
-			...[emailNotification_mention.value ? 'mention' : null],
-			...[emailNotification_reply.value ? 'reply' : null],
-			...[emailNotification_quote.value ? 'quote' : null],
-			...[emailNotification_follow.value ? 'follow' : null],
-			...[emailNotification_receiveFollowRequest.value ? 'receiveFollowRequest' : null],
-			...[emailNotification_groupInvited.value ? 'groupInvited' : null],
-		].filter(x => x != null),
+			...[emailNotification_mention.value ? "mention" : null],
+			...[emailNotification_reply.value ? "reply" : null],
+			...[emailNotification_quote.value ? "quote" : null],
+			...[emailNotification_follow.value ? "follow" : null],
+			...[
+				emailNotification_receiveFollowRequest.value
+					? "receiveFollowRequest"
+					: null,
+			],
+			...[emailNotification_groupInvited.value ? "groupInvited" : null],
+		].filter((x) => x != null),
 	});
 };
 
-watch([emailNotification_mention, emailNotification_reply, emailNotification_quote, emailNotification_follow, emailNotification_receiveFollowRequest, emailNotification_groupInvited], () => {
-	saveNotificationSettings();
-});
+watch(
+	[
+		emailNotification_mention,
+		emailNotification_reply,
+		emailNotification_quote,
+		emailNotification_follow,
+		emailNotification_receiveFollowRequest,
+		emailNotification_groupInvited,
+	],
+	() => {
+		saveNotificationSettings();
+	}
+);
 
 onMounted(() => {
 	watch(emailAddress, () => {
@@ -106,6 +153,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.email,
-	icon: 'ph-envelope-simple-open ph-bold ph-lg',
+	icon: "ph-envelope-simple-open ph-bold ph-lg",
 });
 </script>
diff --git a/packages/client/src/pages/settings/general.vue b/packages/client/src/pages/settings/general.vue
index bef23a15e9..b8cdb3fd9c 100644
--- a/packages/client/src/pages/settings/general.vue
+++ b/packages/client/src/pages/settings/general.vue
@@ -1,132 +1,235 @@
 <template>
-<div class="_formRoot">
-	<FormSelect v-model="lang" class="_formBlock">
-		<template #label>{{ i18n.ts.uiLanguage }}</template>
-		<option v-for="x in langs" :key="x[0]" :value="x[0]">{{ x[1] }}</option>
-		<template #caption>
-			<I18n :src="i18n.ts.i18nInfo" tag="span">
-				<template #link>
-					<MkLink url="https://hosted.weblate.org/engage/calckey/">Weblate</MkLink>
-				</template>
-			</I18n>
-		</template>
-	</FormSelect>
-
-	<FormRadios v-model="overridedDeviceKind" class="_formBlock">
-		<template #label>{{ i18n.ts.overridedDeviceKind }}</template>
-		<option :value="null">{{ i18n.ts.auto }}</option>
-		<option value="smartphone"><i class="ph-device-mobile ph-bold ph-lg"/> {{ i18n.ts.smartphone }}</option>
-		<option value="tablet"><i class="ph-device-tablet ph-bold ph-lg"/> {{ i18n.ts.tablet }}</option>
-		<option value="desktop"><i class="ph-desktop ph-bold ph-lg"/> {{ i18n.ts.desktop }}</option>
-	</FormRadios>
-
-	<FormRadios v-model="showLocalPostsInTimeline" class="_formBlock">
-		<template #label>{{ i18n.ts.showLocalPosts }}</template>
-		<option value="home"><i class="ph-house ph-bold ph-lg"/> {{ i18n.ts.homeTimeline }}</option>
-		<option value="social"><i class="ph-handshake ph-bold ph-lg"/> {{ i18n.ts.socialTimeline }}</option>
-	</FormRadios>
-
-	<FormSwitch v-model="showFixedPostForm" class="_formBlock">{{ i18n.ts.showFixedPostForm }}</FormSwitch>
-
-	<FormSection>
-		<template #label>{{ i18n.ts.behavior }}</template>
-		<FormSwitch v-model="imageNewTab" class="_formBlock">{{ i18n.ts.openImageInNewTab }}</FormSwitch>
-		<FormSwitch v-model="enableInfiniteScroll" class="_formBlock">{{ i18n.ts.enableInfiniteScroll }}</FormSwitch>
-		<FormSwitch v-model="useReactionPickerForContextMenu" class="_formBlock">{{ i18n.ts.useReactionPickerForContextMenu }}</FormSwitch>
-		<FormSwitch v-model="swipeOnDesktop" class="_formBlock">{{ i18n.ts.swipeOnDesktop }}</FormSwitch>
-		<FormSwitch v-model="enterSendsMessage" class="_formBlock">{{ i18n.ts.enterSendsMessage }}</FormSwitch>
-		<FormSwitch v-model="disablePagesScript" class="_formBlock">{{ i18n.ts.disablePagesScript }}</FormSwitch>
-
-		<FormSelect v-model="serverDisconnectedBehavior" class="_formBlock">
-			<template #label>{{ i18n.ts.whenServerDisconnected }}</template>
-			<option value="reload">{{ i18n.ts._serverDisconnectedBehavior.reload }}</option>
-			<option value="dialog">{{ i18n.ts._serverDisconnectedBehavior.dialog }}</option>
-			<option value="quiet">{{ i18n.ts._serverDisconnectedBehavior.quiet }}</option>
-			<option value="nothing">{{ i18n.ts._serverDisconnectedBehavior.nothing }}</option>
+	<div class="_formRoot">
+		<FormSelect v-model="lang" class="_formBlock">
+			<template #label>{{ i18n.ts.uiLanguage }}</template>
+			<option v-for="x in langs" :key="x[0]" :value="x[0]">
+				{{ x[1] }}
+			</option>
+			<template #caption>
+				<I18n :src="i18n.ts.i18nInfo" tag="span">
+					<template #link>
+						<MkLink url="https://hosted.weblate.org/engage/calckey/"
+							>Weblate</MkLink
+						>
+					</template>
+				</I18n>
+			</template>
 		</FormSelect>
-	</FormSection>
 
-	<FormSection>
-		<template #label>{{ i18n.ts.appearance }}</template>
-		<FormSwitch v-model="showAds" class="_formBlock">{{ i18n.ts.showAds }}</FormSwitch>
-		<FormSwitch v-model="disableAnimatedMfm" class="_formBlock">{{ i18n.ts.disableAnimatedMfm }}</FormSwitch>
-		<FormSwitch v-model="reduceAnimation" class="_formBlock">{{ i18n.ts.reduceUiAnimation }}</FormSwitch>
-		<FormSwitch v-model="useBlurEffect" class="_formBlock">{{ i18n.ts.useBlurEffect }}</FormSwitch>
-		<FormSwitch v-model="useBlurEffectForModal" class="_formBlock">{{ i18n.ts.useBlurEffectForModal }}</FormSwitch>
-		<FormSwitch v-model="showGapBetweenNotesInTimeline" class="_formBlock">{{ i18n.ts.showGapBetweenNotesInTimeline }}</FormSwitch>
-		<FormSwitch v-model="loadRawImages" class="_formBlock">{{ i18n.ts.loadRawImages }}</FormSwitch>
-		<FormSwitch v-model="disableShowingAnimatedImages" class="_formBlock">{{ i18n.ts.disableShowingAnimatedImages }}</FormSwitch>
-		<FormSwitch v-model="squareAvatars" class="_formBlock">{{ i18n.ts.squareAvatars }}</FormSwitch>
-		<FormSwitch v-model="seperateRenoteQuote" class="_formBlock">{{ i18n.ts.seperateRenoteQuote }}</FormSwitch>
-		<FormSwitch v-model="useSystemFont" class="_formBlock">{{ i18n.ts.useSystemFont }}</FormSwitch>
-		<FormSwitch v-model="useOsNativeEmojis" class="_formBlock">
-			{{ i18n.ts.useOsNativeEmojis }}
-			<div><Mfm :key="useOsNativeEmojis" text="🍮🍦🍭🍩🍰🍫🍬🥞🍪"/></div>
-		</FormSwitch>
-		<FormSwitch v-model="disableDrawer" class="_formBlock">{{ i18n.ts.disableDrawer }}</FormSwitch>
-		<FormSwitch v-model="showUpdates" class="_formBlock">{{ i18n.ts.showUpdates }}</FormSwitch>
-		<FormSwitch v-if="$i?.isAdmin" v-model="showAdminUpdates" class="_formBlock">{{ i18n.ts.showAdminUpdates }}</FormSwitch>
-
-		<FormRadios v-model="fontSize" class="_formBlock">
-			<template #label>{{ i18n.ts.fontSize }}</template>
-			<option :value="null"><span style="font-size: 14px;">Aa</span></option>
-			<option value="1"><span style="font-size: 15px;">Aa</span></option>
-			<option value="2"><span style="font-size: 16px;">Aa</span></option>
-			<option value="3"><span style="font-size: 17px;">Aa</span></option>
+		<FormRadios v-model="overridedDeviceKind" class="_formBlock">
+			<template #label>{{ i18n.ts.overridedDeviceKind }}</template>
+			<option :value="null">{{ i18n.ts.auto }}</option>
+			<option value="smartphone">
+				<i class="ph-device-mobile ph-bold ph-lg" />
+				{{ i18n.ts.smartphone }}
+			</option>
+			<option value="tablet">
+				<i class="ph-device-tablet ph-bold ph-lg" />
+				{{ i18n.ts.tablet }}
+			</option>
+			<option value="desktop">
+				<i class="ph-desktop ph-bold ph-lg" /> {{ i18n.ts.desktop }}
+			</option>
 		</FormRadios>
-	</FormSection>
 
-	<FormSelect v-model="instanceTicker" class="_formBlock">
-		<template #label>{{ i18n.ts.instanceTicker }}</template>
-		<option value="none">{{ i18n.ts._instanceTicker.none }}</option>
-		<option value="remote">{{ i18n.ts._instanceTicker.remote }}</option>
-		<option value="always">{{ i18n.ts._instanceTicker.always }}</option>
-	</FormSelect>
+		<FormRadios v-model="showLocalPostsInTimeline" class="_formBlock">
+			<template #label>{{ i18n.ts.showLocalPosts }}</template>
+			<option value="home">
+				<i class="ph-house ph-bold ph-lg" /> {{ i18n.ts.homeTimeline }}
+			</option>
+			<option value="social">
+				<i class="ph-handshake ph-bold ph-lg" />
+				{{ i18n.ts.socialTimeline }}
+			</option>
+		</FormRadios>
 
-	<FormSelect v-model="nsfw" class="_formBlock">
-		<template #label>{{ i18n.ts.nsfw }}</template>
-		<option value="respect">{{ i18n.ts._nsfw.respect }}</option>
-		<option value="ignore">{{ i18n.ts._nsfw.ignore }}</option>
-		<option value="force">{{ i18n.ts._nsfw.force }}</option>
-	</FormSelect>
+		<FormSwitch v-model="showFixedPostForm" class="_formBlock">{{
+			i18n.ts.showFixedPostForm
+		}}</FormSwitch>
 
-	<FormRange v-model="numberOfPageCache" :min="1" :max="10" :step="1" easing class="_formBlock">
-		<template #label>{{ i18n.ts.numberOfPageCache }}</template>
-		<template #caption>{{ i18n.ts.numberOfPageCacheDescription }}</template>
-	</FormRange>
+		<FormSection>
+			<template #label>{{ i18n.ts.behavior }}</template>
+			<FormSwitch v-model="imageNewTab" class="_formBlock">{{
+				i18n.ts.openImageInNewTab
+			}}</FormSwitch>
+			<FormSwitch v-model="enableInfiniteScroll" class="_formBlock">{{
+				i18n.ts.enableInfiniteScroll
+			}}</FormSwitch>
+			<FormSwitch
+				v-model="useReactionPickerForContextMenu"
+				class="_formBlock"
+				>{{ i18n.ts.useReactionPickerForContextMenu }}</FormSwitch
+			>
+			<FormSwitch v-model="swipeOnDesktop" class="_formBlock">{{
+				i18n.ts.swipeOnDesktop
+			}}</FormSwitch>
+			<FormSwitch v-model="enterSendsMessage" class="_formBlock">{{
+				i18n.ts.enterSendsMessage
+			}}</FormSwitch>
+			<FormSwitch v-model="disablePagesScript" class="_formBlock">{{
+				i18n.ts.disablePagesScript
+			}}</FormSwitch>
 
-	<FormLink to="/settings/deck" class="_formBlock">{{ i18n.ts.deck }}</FormLink>
+			<FormSelect v-model="serverDisconnectedBehavior" class="_formBlock">
+				<template #label>{{ i18n.ts.whenServerDisconnected }}</template>
+				<option value="reload">
+					{{ i18n.ts._serverDisconnectedBehavior.reload }}
+				</option>
+				<option value="dialog">
+					{{ i18n.ts._serverDisconnectedBehavior.dialog }}
+				</option>
+				<option value="quiet">
+					{{ i18n.ts._serverDisconnectedBehavior.quiet }}
+				</option>
+				<option value="nothing">
+					{{ i18n.ts._serverDisconnectedBehavior.nothing }}
+				</option>
+			</FormSelect>
+		</FormSection>
 
-	<FormLink to="/settings/custom-css" class="_formBlock"><template #icon><i class="ph-code ph-bold ph-lg"></i></template>{{ i18n.ts.customCss }}</FormLink>
+		<FormSection>
+			<template #label>{{ i18n.ts.appearance }}</template>
+			<FormSwitch v-model="showAds" class="_formBlock">{{
+				i18n.ts.showAds
+			}}</FormSwitch>
+			<FormSwitch v-model="disableAnimatedMfm" class="_formBlock">{{
+				i18n.ts.disableAnimatedMfm
+			}}</FormSwitch>
+			<FormSwitch v-model="reduceAnimation" class="_formBlock">{{
+				i18n.ts.reduceUiAnimation
+			}}</FormSwitch>
+			<FormSwitch v-model="useBlurEffect" class="_formBlock">{{
+				i18n.ts.useBlurEffect
+			}}</FormSwitch>
+			<FormSwitch v-model="useBlurEffectForModal" class="_formBlock">{{
+				i18n.ts.useBlurEffectForModal
+			}}</FormSwitch>
+			<FormSwitch
+				v-model="showGapBetweenNotesInTimeline"
+				class="_formBlock"
+				>{{ i18n.ts.showGapBetweenNotesInTimeline }}</FormSwitch
+			>
+			<FormSwitch v-model="loadRawImages" class="_formBlock">{{
+				i18n.ts.loadRawImages
+			}}</FormSwitch>
+			<FormSwitch
+				v-model="disableShowingAnimatedImages"
+				class="_formBlock"
+				>{{ i18n.ts.disableShowingAnimatedImages }}</FormSwitch
+			>
+			<FormSwitch v-model="squareAvatars" class="_formBlock">{{
+				i18n.ts.squareAvatars
+			}}</FormSwitch>
+			<FormSwitch v-model="seperateRenoteQuote" class="_formBlock">{{
+				i18n.ts.seperateRenoteQuote
+			}}</FormSwitch>
+			<FormSwitch v-model="useSystemFont" class="_formBlock">{{
+				i18n.ts.useSystemFont
+			}}</FormSwitch>
+			<FormSwitch v-model="useOsNativeEmojis" class="_formBlock">
+				{{ i18n.ts.useOsNativeEmojis }}
+				<div>
+					<Mfm :key="useOsNativeEmojis" text="🍮🍦🍭🍩🍰🍫🍬🥞🍪" />
+				</div>
+			</FormSwitch>
+			<FormSwitch v-model="disableDrawer" class="_formBlock">{{
+				i18n.ts.disableDrawer
+			}}</FormSwitch>
+			<FormSwitch v-model="showUpdates" class="_formBlock">{{
+				i18n.ts.showUpdates
+			}}</FormSwitch>
+			<FormSwitch
+				v-if="$i?.isAdmin"
+				v-model="showAdminUpdates"
+				class="_formBlock"
+				>{{ i18n.ts.showAdminUpdates }}</FormSwitch
+			>
 
-	<FormLink to="/settings/custom-katex-macro" class="_formBlock"><template #icon><i class="ph-radical ph-bold ph-lg"></i></template>{{ i18n.ts.customKaTeXMacro }}</FormLink>
-</div>
+			<FormRadios v-model="fontSize" class="_formBlock">
+				<template #label>{{ i18n.ts.fontSize }}</template>
+				<option :value="null">
+					<span style="font-size: 14px">Aa</span>
+				</option>
+				<option value="1">
+					<span style="font-size: 15px">Aa</span>
+				</option>
+				<option value="2">
+					<span style="font-size: 16px">Aa</span>
+				</option>
+				<option value="3">
+					<span style="font-size: 17px">Aa</span>
+				</option>
+			</FormRadios>
+		</FormSection>
+
+		<FormSelect v-model="instanceTicker" class="_formBlock">
+			<template #label>{{ i18n.ts.instanceTicker }}</template>
+			<option value="none">{{ i18n.ts._instanceTicker.none }}</option>
+			<option value="remote">{{ i18n.ts._instanceTicker.remote }}</option>
+			<option value="always">{{ i18n.ts._instanceTicker.always }}</option>
+		</FormSelect>
+
+		<FormSelect v-model="nsfw" class="_formBlock">
+			<template #label>{{ i18n.ts.nsfw }}</template>
+			<option value="respect">{{ i18n.ts._nsfw.respect }}</option>
+			<option value="ignore">{{ i18n.ts._nsfw.ignore }}</option>
+			<option value="force">{{ i18n.ts._nsfw.force }}</option>
+		</FormSelect>
+
+		<FormRange
+			v-model="numberOfPageCache"
+			:min="1"
+			:max="10"
+			:step="1"
+			easing
+			class="_formBlock"
+		>
+			<template #label>{{ i18n.ts.numberOfPageCache }}</template>
+			<template #caption>{{
+				i18n.ts.numberOfPageCacheDescription
+			}}</template>
+		</FormRange>
+
+		<FormLink to="/settings/deck" class="_formBlock">{{
+			i18n.ts.deck
+		}}</FormLink>
+
+		<FormLink to="/settings/custom-css" class="_formBlock"
+			><template #icon><i class="ph-code ph-bold ph-lg"></i></template
+			>{{ i18n.ts.customCss }}</FormLink
+		>
+
+		<FormLink to="/settings/custom-katex-macro" class="_formBlock"
+			><template #icon><i class="ph-radical ph-bold ph-lg"></i></template
+			>{{ i18n.ts.customKaTeXMacro }}</FormLink
+		>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { computed, ref, watch } from 'vue';
-import { $i } from '@/account';
-import FormSwitch from '@/components/form/switch.vue';
-import FormSelect from '@/components/form/select.vue';
-import FormRadios from '@/components/form/radios.vue';
-import FormRange from '@/components/form/range.vue';
-import FormSection from '@/components/form/section.vue';
-import FormLink from '@/components/form/link.vue';
-import MkLink from '@/components/MkLink.vue';
-import { langs } from '@/config';
-import { defaultStore } from '@/store';
-import * as os from '@/os';
-import { unisonReload } from '@/scripts/unison-reload';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import { computed, ref, watch } from "vue";
+import { $i } from "@/account";
+import FormSwitch from "@/components/form/switch.vue";
+import FormSelect from "@/components/form/select.vue";
+import FormRadios from "@/components/form/radios.vue";
+import FormRange from "@/components/form/range.vue";
+import FormSection from "@/components/form/section.vue";
+import FormLink from "@/components/form/link.vue";
+import MkLink from "@/components/MkLink.vue";
+import { langs } from "@/config";
+import { defaultStore } from "@/store";
+import * as os from "@/os";
+import { unisonReload } from "@/scripts/unison-reload";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
-const lang = ref(localStorage.getItem('lang'));
-const fontSize = ref(localStorage.getItem('fontSize'));
-const useSystemFont = ref(localStorage.getItem('useSystemFont') != null);
+const lang = ref(localStorage.getItem("lang"));
+const fontSize = ref(localStorage.getItem("fontSize"));
+const useSystemFont = ref(localStorage.getItem("useSystemFont") != null);
 
 async function reloadAsk() {
 	const { canceled } = await os.confirm({
-		type: 'info',
+		type: "info",
 		text: i18n.ts.reloadToApplySetting,
 	});
 	if (canceled) return;
@@ -134,73 +237,122 @@ async function reloadAsk() {
 	unisonReload();
 }
 
-const overridedDeviceKind = computed(defaultStore.makeGetterSetter('overridedDeviceKind'));
-const showLocalPostsInTimeline = computed(defaultStore.makeGetterSetter('showLocalPostsInTimeline'));
-const serverDisconnectedBehavior = computed(defaultStore.makeGetterSetter('serverDisconnectedBehavior'));
-const reduceAnimation = computed(defaultStore.makeGetterSetter('animation', v => !v, v => !v));
-const useBlurEffectForModal = computed(defaultStore.makeGetterSetter('useBlurEffectForModal'));
-const useBlurEffect = computed(defaultStore.makeGetterSetter('useBlurEffect'));
-const showGapBetweenNotesInTimeline = computed(defaultStore.makeGetterSetter('showGapBetweenNotesInTimeline'));
-const showAds = computed(defaultStore.makeGetterSetter('showAds'));
-const disableAnimatedMfm = computed(defaultStore.makeGetterSetter('animatedMfm', v => !v, v => !v));
-const useOsNativeEmojis = computed(defaultStore.makeGetterSetter('useOsNativeEmojis'));
-const disableDrawer = computed(defaultStore.makeGetterSetter('disableDrawer'));
-const disableShowingAnimatedImages = computed(defaultStore.makeGetterSetter('disableShowingAnimatedImages'));
-const loadRawImages = computed(defaultStore.makeGetterSetter('loadRawImages'));
-const imageNewTab = computed(defaultStore.makeGetterSetter('imageNewTab'));
-const nsfw = computed(defaultStore.makeGetterSetter('nsfw'));
-const disablePagesScript = computed(defaultStore.makeGetterSetter('disablePagesScript'));
-const showFixedPostForm = computed(defaultStore.makeGetterSetter('showFixedPostForm'));
-const numberOfPageCache = computed(defaultStore.makeGetterSetter('numberOfPageCache'));
-const instanceTicker = computed(defaultStore.makeGetterSetter('instanceTicker'));
-const enableInfiniteScroll = computed(defaultStore.makeGetterSetter('enableInfiniteScroll'));
-const enterSendsMessage = computed(defaultStore.makeGetterSetter('enterSendsMessage'));
-const useReactionPickerForContextMenu = computed(defaultStore.makeGetterSetter('useReactionPickerForContextMenu'));
-const seperateRenoteQuote = computed(defaultStore.makeGetterSetter('seperateRenoteQuote'));
-const squareAvatars = computed(defaultStore.makeGetterSetter('squareAvatars'));
-const showUpdates = computed(defaultStore.makeGetterSetter('showUpdates'));
-const swipeOnDesktop = computed(defaultStore.makeGetterSetter('swipeOnDesktop'));
-const showAdminUpdates = computed(defaultStore.makeGetterSetter('showAdminUpdates'));
+const overridedDeviceKind = computed(
+	defaultStore.makeGetterSetter("overridedDeviceKind")
+);
+const showLocalPostsInTimeline = computed(
+	defaultStore.makeGetterSetter("showLocalPostsInTimeline")
+);
+const serverDisconnectedBehavior = computed(
+	defaultStore.makeGetterSetter("serverDisconnectedBehavior")
+);
+const reduceAnimation = computed(
+	defaultStore.makeGetterSetter(
+		"animation",
+		(v) => !v,
+		(v) => !v
+	)
+);
+const useBlurEffectForModal = computed(
+	defaultStore.makeGetterSetter("useBlurEffectForModal")
+);
+const useBlurEffect = computed(defaultStore.makeGetterSetter("useBlurEffect"));
+const showGapBetweenNotesInTimeline = computed(
+	defaultStore.makeGetterSetter("showGapBetweenNotesInTimeline")
+);
+const showAds = computed(defaultStore.makeGetterSetter("showAds"));
+const disableAnimatedMfm = computed(
+	defaultStore.makeGetterSetter(
+		"animatedMfm",
+		(v) => !v,
+		(v) => !v
+	)
+);
+const useOsNativeEmojis = computed(
+	defaultStore.makeGetterSetter("useOsNativeEmojis")
+);
+const disableDrawer = computed(defaultStore.makeGetterSetter("disableDrawer"));
+const disableShowingAnimatedImages = computed(
+	defaultStore.makeGetterSetter("disableShowingAnimatedImages")
+);
+const loadRawImages = computed(defaultStore.makeGetterSetter("loadRawImages"));
+const imageNewTab = computed(defaultStore.makeGetterSetter("imageNewTab"));
+const nsfw = computed(defaultStore.makeGetterSetter("nsfw"));
+const disablePagesScript = computed(
+	defaultStore.makeGetterSetter("disablePagesScript")
+);
+const showFixedPostForm = computed(
+	defaultStore.makeGetterSetter("showFixedPostForm")
+);
+const numberOfPageCache = computed(
+	defaultStore.makeGetterSetter("numberOfPageCache")
+);
+const instanceTicker = computed(
+	defaultStore.makeGetterSetter("instanceTicker")
+);
+const enableInfiniteScroll = computed(
+	defaultStore.makeGetterSetter("enableInfiniteScroll")
+);
+const enterSendsMessage = computed(
+	defaultStore.makeGetterSetter("enterSendsMessage")
+);
+const useReactionPickerForContextMenu = computed(
+	defaultStore.makeGetterSetter("useReactionPickerForContextMenu")
+);
+const seperateRenoteQuote = computed(
+	defaultStore.makeGetterSetter("seperateRenoteQuote")
+);
+const squareAvatars = computed(defaultStore.makeGetterSetter("squareAvatars"));
+const showUpdates = computed(defaultStore.makeGetterSetter("showUpdates"));
+const swipeOnDesktop = computed(
+	defaultStore.makeGetterSetter("swipeOnDesktop")
+);
+const showAdminUpdates = computed(
+	defaultStore.makeGetterSetter("showAdminUpdates")
+);
 
 watch(lang, () => {
-	localStorage.setItem('lang', lang.value as string);
-	localStorage.removeItem('locale');
+	localStorage.setItem("lang", lang.value as string);
+	localStorage.removeItem("locale");
 });
 
 watch(fontSize, () => {
 	if (fontSize.value == null) {
-		localStorage.removeItem('fontSize');
+		localStorage.removeItem("fontSize");
 	} else {
-		localStorage.setItem('fontSize', fontSize.value);
+		localStorage.setItem("fontSize", fontSize.value);
 	}
 });
 
 watch(useSystemFont, () => {
 	if (useSystemFont.value) {
-		localStorage.setItem('useSystemFont', 't');
+		localStorage.setItem("useSystemFont", "t");
 	} else {
-		localStorage.removeItem('useSystemFont');
+		localStorage.removeItem("useSystemFont");
 	}
 });
 
-watch([
-	lang,
-	fontSize,
-	useSystemFont,
-	enableInfiniteScroll,
-	squareAvatars,
-	showGapBetweenNotesInTimeline,
-	instanceTicker,
-	overridedDeviceKind,
-	showLocalPostsInTimeline,
-	showAds,
-	showUpdates,
-	swipeOnDesktop,
-	seperateRenoteQuote,
-	showAdminUpdates,
-], async () => {
-	await reloadAsk();
-});
+watch(
+	[
+		lang,
+		fontSize,
+		useSystemFont,
+		enableInfiniteScroll,
+		squareAvatars,
+		showGapBetweenNotesInTimeline,
+		instanceTicker,
+		overridedDeviceKind,
+		showLocalPostsInTimeline,
+		showAds,
+		showUpdates,
+		swipeOnDesktop,
+		seperateRenoteQuote,
+		showAdminUpdates,
+	],
+	async () => {
+		await reloadAsk();
+	}
+);
 
 const headerActions = $computed(() => []);
 
@@ -208,6 +360,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.general,
-	icon: 'ph-gear-six ph-bold ph-lg',
+	icon: "ph-gear-six ph-bold ph-lg",
 });
 </script>
diff --git a/packages/client/src/pages/settings/import-export.vue b/packages/client/src/pages/settings/import-export.vue
index 93acb131ab..18fcc0400f 100644
--- a/packages/client/src/pages/settings/import-export.vue
+++ b/packages/client/src/pages/settings/import-export.vue
@@ -1,92 +1,186 @@
 <template>
-<div class="_formRoot">
-	<FormSection>
-		<template #label>{{ i18n.ts._exportOrImport.allNotes }}</template>
-		<FormFolder>
-			<template #label>{{ i18n.ts.export }}</template>
-			<template #icon><i class="ph-download-simple ph-bold ph-lg"></i></template>
-			<MkButton primary :class="$style.button" inline @click="exportNotes()"><i class="ph-download-simple ph-bold ph-lg"></i> {{ i18n.ts.export }}</MkButton>
-		</FormFolder>
-		<FormFolder class="_formBlock">
-			<template #label>{{ i18n.ts.import }}</template>
-			<template #icon><i class="ph-upload-simple ph-bold ph-lg"></i></template>
-			<FormSwitch v-model="signatureCheck" class="_formBlock">
-				Mastodon import? (not Akkoma!)
-			</FormSwitch>
-			<MkButton primary :class="$style.button" inline @click="importPosts($event)"><i class="ph-upload-simple ph-bold ph-lg"></i> {{ i18n.ts.import }}</MkButton>
-		</FormFolder>
-	</FormSection>
-	<FormSection>
-		<template #label>{{ i18n.ts._exportOrImport.followingList }}</template>
-		<FormFolder class="_formBlock">
-			<template #label>{{ i18n.ts.export }}</template>
-			<template #icon><i class="ph-download-simple ph-bold ph-lg"></i></template>
-			<FormSwitch v-model="excludeMutingUsers" class="_formBlock">
-				{{ i18n.ts._exportOrImport.excludeMutingUsers }}
-			</FormSwitch>
-			<FormSwitch v-model="excludeInactiveUsers" class="_formBlock">
-				{{ i18n.ts._exportOrImport.excludeInactiveUsers }}
-			</FormSwitch>
-			<MkButton primary :class="$style.button" inline @click="exportFollowing()"><i class="ph-download-simple ph-bold ph-lg"></i> {{ i18n.ts.export }}</MkButton>
-		</FormFolder>
-		<FormFolder class="_formBlock">
-			<template #label>{{ i18n.ts.import }}</template>
-			<template #icon><i class="ph-upload-simple ph-bold ph-lg"></i></template>
-			<MkButton primary :class="$style.button" inline @click="importFollowing($event)"><i class="ph-upload-simple ph-bold ph-lg"></i> {{ i18n.ts.import }}</MkButton>
-		</FormFolder>
-	</FormSection>
-	<FormSection>
-		<template #label>{{ i18n.ts._exportOrImport.userLists }}</template>
-		<FormFolder class="_formBlock">
-			<template #label>{{ i18n.ts.export }}</template>
-			<template #icon><i class="ph-download-simple ph-bold ph-lg"></i></template>
-			<MkButton primary :class="$style.button" inline @click="exportUserLists()"><i class="ph-download-simple ph-bold ph-lg"></i> {{ i18n.ts.export }}</MkButton>
-		</FormFolder>
-		<FormFolder class="_formBlock">
-			<template #label>{{ i18n.ts.import }}</template>
-			<template #icon><i class="ph-upload-simple ph-bold ph-lg"></i></template>
-			<MkButton primary :class="$style.button" inline @click="importUserLists($event)"><i class="ph-upload-simple ph-bold ph-lg"></i> {{ i18n.ts.import }}</MkButton>
-		</FormFolder>
-	</FormSection>
-	<FormSection>
-		<template #label>{{ i18n.ts._exportOrImport.muteList }}</template>
-		<FormFolder class="_formBlock">
-			<template #label>{{ i18n.ts.export }}</template>
-			<template #icon><i class="ph-download-simple ph-bold ph-lg"></i></template>
-			<MkButton primary :class="$style.button" inline @click="exportMuting()"><i class="ph-download-simple ph-bold ph-lg"></i> {{ i18n.ts.export }}</MkButton>
-		</FormFolder>
-		<FormFolder class="_formBlock">
-			<template #label>{{ i18n.ts.import }}</template>
-			<template #icon><i class="ph-upload-simple ph-bold ph-lg"></i></template>
-			<MkButton primary :class="$style.button" inline @click="importMuting($event)"><i class="ph-upload-simple ph-bold ph-lg"></i> {{ i18n.ts.import }}</MkButton>
-		</FormFolder>
-	</FormSection>
-	<FormSection>
-		<template #label>{{ i18n.ts._exportOrImport.blockingList }}</template>
-		<FormFolder class="_formBlock">
-			<template #label>{{ i18n.ts.export }}</template>
-			<template #icon><i class="ph-download-simple ph-bold ph-lg"></i></template>
-			<MkButton primary :class="$style.button" inline @click="exportBlocking()"><i class="ph-download-simple ph-bold ph-lg"></i> {{ i18n.ts.export }}</MkButton>
-		</FormFolder>
-		<FormFolder class="_formBlock">
-			<template #label>{{ i18n.ts.import }}</template>
-			<template #icon><i class="ph-upload-simple ph-bold ph-lg"></i></template>
-			<MkButton primary :class="$style.button" inline @click="importBlocking($event)"><i class="ph-upload-simple ph-bold ph-lg"></i> {{ i18n.ts.import }}</MkButton>
-		</FormFolder>
-	</FormSection>
-</div>
+	<div class="_formRoot">
+		<FormSection>
+			<template #label>{{ i18n.ts._exportOrImport.allNotes }}</template>
+			<FormFolder>
+				<template #label>{{ i18n.ts.export }}</template>
+				<template #icon
+					><i class="ph-download-simple ph-bold ph-lg"></i
+				></template>
+				<MkButton
+					primary
+					:class="$style.button"
+					inline
+					@click="exportNotes()"
+					><i class="ph-download-simple ph-bold ph-lg"></i>
+					{{ i18n.ts.export }}</MkButton
+				>
+			</FormFolder>
+			<FormFolder class="_formBlock">
+				<template #label>{{ i18n.ts.import }}</template>
+				<template #icon
+					><i class="ph-upload-simple ph-bold ph-lg"></i
+				></template>
+				<FormSwitch v-model="signatureCheck" class="_formBlock">
+					Mastodon import? (not Akkoma!)
+				</FormSwitch>
+				<MkButton
+					primary
+					:class="$style.button"
+					inline
+					@click="importPosts($event)"
+					><i class="ph-upload-simple ph-bold ph-lg"></i>
+					{{ i18n.ts.import }}</MkButton
+				>
+			</FormFolder>
+		</FormSection>
+		<FormSection>
+			<template #label>{{
+				i18n.ts._exportOrImport.followingList
+			}}</template>
+			<FormFolder class="_formBlock">
+				<template #label>{{ i18n.ts.export }}</template>
+				<template #icon
+					><i class="ph-download-simple ph-bold ph-lg"></i
+				></template>
+				<FormSwitch v-model="excludeMutingUsers" class="_formBlock">
+					{{ i18n.ts._exportOrImport.excludeMutingUsers }}
+				</FormSwitch>
+				<FormSwitch v-model="excludeInactiveUsers" class="_formBlock">
+					{{ i18n.ts._exportOrImport.excludeInactiveUsers }}
+				</FormSwitch>
+				<MkButton
+					primary
+					:class="$style.button"
+					inline
+					@click="exportFollowing()"
+					><i class="ph-download-simple ph-bold ph-lg"></i>
+					{{ i18n.ts.export }}</MkButton
+				>
+			</FormFolder>
+			<FormFolder class="_formBlock">
+				<template #label>{{ i18n.ts.import }}</template>
+				<template #icon
+					><i class="ph-upload-simple ph-bold ph-lg"></i
+				></template>
+				<MkButton
+					primary
+					:class="$style.button"
+					inline
+					@click="importFollowing($event)"
+					><i class="ph-upload-simple ph-bold ph-lg"></i>
+					{{ i18n.ts.import }}</MkButton
+				>
+			</FormFolder>
+		</FormSection>
+		<FormSection>
+			<template #label>{{ i18n.ts._exportOrImport.userLists }}</template>
+			<FormFolder class="_formBlock">
+				<template #label>{{ i18n.ts.export }}</template>
+				<template #icon
+					><i class="ph-download-simple ph-bold ph-lg"></i
+				></template>
+				<MkButton
+					primary
+					:class="$style.button"
+					inline
+					@click="exportUserLists()"
+					><i class="ph-download-simple ph-bold ph-lg"></i>
+					{{ i18n.ts.export }}</MkButton
+				>
+			</FormFolder>
+			<FormFolder class="_formBlock">
+				<template #label>{{ i18n.ts.import }}</template>
+				<template #icon
+					><i class="ph-upload-simple ph-bold ph-lg"></i
+				></template>
+				<MkButton
+					primary
+					:class="$style.button"
+					inline
+					@click="importUserLists($event)"
+					><i class="ph-upload-simple ph-bold ph-lg"></i>
+					{{ i18n.ts.import }}</MkButton
+				>
+			</FormFolder>
+		</FormSection>
+		<FormSection>
+			<template #label>{{ i18n.ts._exportOrImport.muteList }}</template>
+			<FormFolder class="_formBlock">
+				<template #label>{{ i18n.ts.export }}</template>
+				<template #icon
+					><i class="ph-download-simple ph-bold ph-lg"></i
+				></template>
+				<MkButton
+					primary
+					:class="$style.button"
+					inline
+					@click="exportMuting()"
+					><i class="ph-download-simple ph-bold ph-lg"></i>
+					{{ i18n.ts.export }}</MkButton
+				>
+			</FormFolder>
+			<FormFolder class="_formBlock">
+				<template #label>{{ i18n.ts.import }}</template>
+				<template #icon
+					><i class="ph-upload-simple ph-bold ph-lg"></i
+				></template>
+				<MkButton
+					primary
+					:class="$style.button"
+					inline
+					@click="importMuting($event)"
+					><i class="ph-upload-simple ph-bold ph-lg"></i>
+					{{ i18n.ts.import }}</MkButton
+				>
+			</FormFolder>
+		</FormSection>
+		<FormSection>
+			<template #label>{{
+				i18n.ts._exportOrImport.blockingList
+			}}</template>
+			<FormFolder class="_formBlock">
+				<template #label>{{ i18n.ts.export }}</template>
+				<template #icon
+					><i class="ph-download-simple ph-bold ph-lg"></i
+				></template>
+				<MkButton
+					primary
+					:class="$style.button"
+					inline
+					@click="exportBlocking()"
+					><i class="ph-download-simple ph-bold ph-lg"></i>
+					{{ i18n.ts.export }}</MkButton
+				>
+			</FormFolder>
+			<FormFolder class="_formBlock">
+				<template #label>{{ i18n.ts.import }}</template>
+				<template #icon
+					><i class="ph-upload-simple ph-bold ph-lg"></i
+				></template>
+				<MkButton
+					primary
+					:class="$style.button"
+					inline
+					@click="importBlocking($event)"
+					><i class="ph-upload-simple ph-bold ph-lg"></i>
+					{{ i18n.ts.import }}</MkButton
+				>
+			</FormFolder>
+		</FormSection>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
-import MkButton from '@/components/MkButton.vue';
-import FormSection from '@/components/form/section.vue';
-import FormFolder from '@/components/form/folder.vue';
-import FormSwitch from '@/components/form/switch.vue';
-import * as os from '@/os';
-import { selectFile } from '@/scripts/select-file';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import { ref } from "vue";
+import MkButton from "@/components/MkButton.vue";
+import FormSection from "@/components/form/section.vue";
+import FormFolder from "@/components/form/folder.vue";
+import FormSwitch from "@/components/form/switch.vue";
+import * as os from "@/os";
+import { selectFile } from "@/scripts/select-file";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
 const excludeMutingUsers = ref(false);
 const signatureCheck = ref(false);
@@ -94,72 +188,86 @@ const excludeInactiveUsers = ref(false);
 
 const onExportSuccess = () => {
 	os.alert({
-		type: 'info',
+		type: "info",
 		text: i18n.ts.exportRequested,
 	});
 };
 
 const onImportSuccess = () => {
 	os.alert({
-		type: 'info',
+		type: "info",
 		text: i18n.ts.importRequested,
 	});
 };
 
 const onError = (ev) => {
 	os.alert({
-		type: 'error',
+		type: "error",
 		text: ev.message,
 	});
 };
 
 const exportNotes = () => {
-	os.api('i/export-notes', {}).then(onExportSuccess).catch(onError);
+	os.api("i/export-notes", {}).then(onExportSuccess).catch(onError);
 };
 
 const importPosts = async (ev) => {
 	const file = await selectFile(ev.currentTarget ?? ev.target);
-	os.api('i/import-posts', { fileId: file.id, signatureCheck: signatureCheck.value }).then(onImportSuccess).catch(onError);
+	os.api("i/import-posts", {
+		fileId: file.id,
+		signatureCheck: signatureCheck.value,
+	})
+		.then(onImportSuccess)
+		.catch(onError);
 };
 
 const exportFollowing = () => {
-	os.api('i/export-following', {
+	os.api("i/export-following", {
 		excludeMuting: excludeMutingUsers.value,
 		excludeInactive: excludeInactiveUsers.value,
 	})
-	.then(onExportSuccess).catch(onError);
+		.then(onExportSuccess)
+		.catch(onError);
 };
 
 const exportBlocking = () => {
-	os.api('i/export-blocking', {}).then(onExportSuccess).catch(onError);
+	os.api("i/export-blocking", {}).then(onExportSuccess).catch(onError);
 };
 
 const exportUserLists = () => {
-	os.api('i/export-user-lists', {}).then(onExportSuccess).catch(onError);
+	os.api("i/export-user-lists", {}).then(onExportSuccess).catch(onError);
 };
 
 const exportMuting = () => {
-	os.api('i/export-mute', {}).then(onExportSuccess).catch(onError);
+	os.api("i/export-mute", {}).then(onExportSuccess).catch(onError);
 };
 
 const importFollowing = async (ev) => {
 	const file = await selectFile(ev.currentTarget ?? ev.target);
-	os.api('i/import-following', { fileId: file.id }).then(onImportSuccess).catch(onError);
+	os.api("i/import-following", { fileId: file.id })
+		.then(onImportSuccess)
+		.catch(onError);
 };
 
 const importUserLists = async (ev) => {
 	const file = await selectFile(ev.currentTarget ?? ev.target);
-	os.api('i/import-user-lists', { fileId: file.id }).then(onImportSuccess).catch(onError);
+	os.api("i/import-user-lists", { fileId: file.id })
+		.then(onImportSuccess)
+		.catch(onError);
 };
 
 const importMuting = async (ev) => {
 	const file = await selectFile(ev.currentTarget ?? ev.target);
-	os.api('i/import-muting', { fileId: file.id }).then(onImportSuccess).catch(onError);
+	os.api("i/import-muting", { fileId: file.id })
+		.then(onImportSuccess)
+		.catch(onError);
 };
 
 const importBlocking = async (ev) => {
 	const file = await selectFile(ev.currentTarget ?? ev.target);
-	os.api('i/import-blocking', { fileId: file.id }).then(onImportSuccess).catch(onError);
+	os.api("i/import-blocking", { fileId: file.id })
+		.then(onImportSuccess)
+		.catch(onError);
 };
 
 const headerActions = $computed(() => []);
@@ -168,7 +276,7 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.importAndExport,
-	icon: 'ph-package ph-bold ph-lg',
+	icon: "ph-package ph-bold ph-lg",
 });
 </script>
 
diff --git a/packages/client/src/pages/settings/index.vue b/packages/client/src/pages/settings/index.vue
index b672b7011b..a3c7482719 100644
--- a/packages/client/src/pages/settings/index.vue
+++ b/packages/client/src/pages/settings/index.vue
@@ -1,42 +1,76 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs" :display-back-button="true"/></template>
-	<MkSpacer :content-max="900" :margin-min="20" :margin-max="32">
-		<div ref="el" class="vvcocwet" :class="{ wide: !narrow }">
-			<div class="body">
-				<div v-if="!narrow || currentPage?.route.name == null" class="nav">
-					<div class="baaadecd">
-						<MkInfo v-if="emailNotConfigured" warn class="info">{{ i18n.ts.emailNotConfiguredWarning }} <MkA to="/settings/email" class="_link">{{ i18n.ts.configure }}</MkA></MkInfo>
-						<MkSuperMenu :def="menuDef" :grid="narrow"></MkSuperMenu>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader
+				:actions="headerActions"
+				:tabs="headerTabs"
+				:display-back-button="true"
+		/></template>
+		<MkSpacer :content-max="900" :margin-min="20" :margin-max="32">
+			<div ref="el" class="vvcocwet" :class="{ wide: !narrow }">
+				<div class="body">
+					<div
+						v-if="!narrow || currentPage?.route.name == null"
+						class="nav"
+					>
+						<div class="baaadecd">
+							<MkInfo v-if="emailNotConfigured" warn class="info"
+								>{{ i18n.ts.emailNotConfiguredWarning }}
+								<MkA to="/settings/email" class="_link">{{
+									i18n.ts.configure
+								}}</MkA></MkInfo
+							>
+							<MkSuperMenu
+								:def="menuDef"
+								:grid="narrow"
+							></MkSuperMenu>
+						</div>
 					</div>
-				</div>
-				<div v-if="!(narrow && currentPage?.route.name == null)" class="main">
-					<div class="bkzroven">
-						<RouterView/>
+					<div
+						v-if="!(narrow && currentPage?.route.name == null)"
+						class="main"
+					>
+						<div class="bkzroven">
+							<RouterView />
+						</div>
 					</div>
 				</div>
 			</div>
-		</div>
-	</MkSpacer>
-</mkstickycontainer>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script setup lang="ts">
-import { computed, defineAsyncComponent, inject, nextTick, onActivated, onMounted, onUnmounted, provide, ref, watch } from 'vue';
-import { i18n } from '@/i18n';
-import MkInfo from '@/components/MkInfo.vue';
-import MkSuperMenu from '@/components/MkSuperMenu.vue';
-import { scroll } from '@/scripts/scroll';
-import { signout , $i } from '@/account';
-import { unisonReload } from '@/scripts/unison-reload';
-import { instance } from '@/instance';
-import { useRouter } from '@/router';
-import { definePageMetadata, provideMetadataReceiver, setPageMetadata } from '@/scripts/page-metadata';
-import * as os from '@/os';
+import {
+	computed,
+	defineAsyncComponent,
+	inject,
+	nextTick,
+	onActivated,
+	onMounted,
+	onUnmounted,
+	provide,
+	ref,
+	watch,
+} from "vue";
+import { i18n } from "@/i18n";
+import MkInfo from "@/components/MkInfo.vue";
+import MkSuperMenu from "@/components/MkSuperMenu.vue";
+import { scroll } from "@/scripts/scroll";
+import { signout, $i } from "@/account";
+import { unisonReload } from "@/scripts/unison-reload";
+import { instance } from "@/instance";
+import { useRouter } from "@/router";
+import {
+	definePageMetadata,
+	provideMetadataReceiver,
+	setPageMetadata,
+} from "@/scripts/page-metadata";
+import * as os from "@/os";
 
 const indexInfo = {
 	title: i18n.ts.settings,
-	icon: 'ph-gear-six ph-bold ph-lg',
+	icon: "ph-gear-six ph-bold ph-lg",
 	hideHeader: true,
 };
 const INFO = ref(indexInfo);
@@ -55,158 +89,191 @@ const ro = new ResizeObserver((entries, observer) => {
 	narrow = entries[0].borderBoxSize[0].inlineSize < NARROW_THRESHOLD;
 });
 
-const menuDef = computed(() => [{
-	title: i18n.ts.basicSettings,
-	items: [{
-		icon: 'ph-user ph-bold ph-lg',
-		text: i18n.ts.profile,
-		to: '/settings/profile',
-		active: currentPage?.route.name === 'profile',
-	}, {
-		icon: 'ph-lock-open ph-bold ph-lg',
-		text: i18n.ts.privacy,
-		to: '/settings/privacy',
-		active: currentPage?.route.name === 'privacy',
-	}, {
-		icon: 'ph-smiley ph-bold ph-lg',
-		text: i18n.ts.reaction,
-		to: '/settings/reaction',
-		active: currentPage?.route.name === 'reaction',
-	}, {
-		icon: 'ph-cloud ph-bold ph-lg',
-		text: i18n.ts.drive,
-		to: '/settings/drive',
-		active: currentPage?.route.name === 'drive',
-	}, {
-		icon: 'ph-bell ph-bold ph-lg',
-		text: i18n.ts.notifications,
-		to: '/settings/notifications',
-		active: currentPage?.route.name === 'notifications',
-	}, {
-		icon: 'ph-envelope-simple-open ph-bold ph-lg',
-		text: i18n.ts.email,
-		to: '/settings/email',
-		active: currentPage?.route.name === 'email',
-	}, {
-		icon: 'ph-share-network ph-bold ph-lg',
-		text: i18n.ts.integration,
-		to: '/settings/integration',
-		active: currentPage?.route.name === 'integration',
-	}, {
-		icon: 'ph-lock ph-bold ph-lg',
-		text: i18n.ts.security,
-		to: '/settings/security',
-		active: currentPage?.route.name === 'security',
-	}],
-}, {
-	title: i18n.ts.clientSettings,
-	items: [{
-		icon: 'ph-gear-six ph-bold ph-lg',
-		text: i18n.ts.general,
-		to: '/settings/general',
-		active: currentPage?.route.name === 'general',
-	}, {
-		icon: 'ph-palette ph-bold ph-lg',
-		text: i18n.ts.theme,
-		to: '/settings/theme',
-		active: currentPage?.route.name === 'theme',
-	}, {
-		icon: 'ph-list ph-bold ph-lg',
-		text: i18n.ts.navbar,
-		to: '/settings/navbar',
-		active: currentPage?.route.name === 'navbar',
-	}, {
-		icon: 'ph-traffic-signal ph-bold ph-lg',
-		text: i18n.ts.statusbar,
-		to: '/settings/statusbar',
-		active: currentPage?.route.name === 'statusbar',
-	}, {
-		icon: 'ph-speaker-high ph-bold ph-lg',
-		text: i18n.ts.sounds,
-		to: '/settings/sounds',
-		active: currentPage?.route.name === 'sounds',
-	}, {
-		icon: 'ph-plug ph-bold ph-lg',
-		text: i18n.ts.plugins,
-		to: '/settings/plugin',
-		active: currentPage?.route.name === 'plugin',
-	}],
-}, {
-	title: i18n.ts.otherSettings,
-	items: [{
-		icon: 'ph-airplane-takeoff ph-bold ph-lg',
-		text: i18n.ts.migration,
-		to: '/settings/migration',
-		active: currentPage?.route.name === 'migration',
-	}, {
-		icon: 'ph-package ph-bold ph-lg',
-		text: i18n.ts.importAndExport,
-		to: '/settings/import-export',
-		active: currentPage?.route.name === 'import-export',
-	}, {
-		icon: 'ph-speaker-none ph-bold ph-lg',
-		text: i18n.ts.instanceMute,
-		to: '/settings/instance-mute',
-		active: currentPage?.route.name === 'instance-mute',
-	}, {
-		icon: 'ph-prohibit ph-bold ph-lg',
-		text: i18n.ts.muteAndBlock,
-		to: '/settings/mute-block',
-		active: currentPage?.route.name === 'mute-block',
-	}, {
-		icon: 'ph-speaker-x ph-bold ph-lg',
-		text: i18n.ts.wordMute,
-		to: '/settings/word-mute',
-		active: currentPage?.route.name === 'word-mute',
-	}, {
-		icon: 'ph-key ph-bold ph-lg',
-		text: 'API',
-		to: '/settings/api',
-		active: currentPage?.route.name === 'api',
-	}, {
-		icon: 'ph-lightning ph-bold ph-lg',
-		text: 'Webhook',
-		to: '/settings/webhook',
-		active: currentPage?.route.name === 'webhook',
-	}, {
-		icon: 'ph-dots-three-outline ph-bold ph-lg',
-		text: i18n.ts.other,
-		to: '/settings/other',
-		active: currentPage?.route.name === 'other',
-	}],
-}, {
-	items: [{
-		icon: 'ph-floppy-disk ph-bold ph-lg',
-		text: i18n.ts.preferencesBackups,
-		to: '/settings/preferences-backups',
-		active: currentPage?.route.name === 'preferences-backups',
-	}, {
-		type: 'button',
-		icon: 'ph-trash ph-bold ph-lg',
-		text: i18n.ts.clearCache,
-		action: () => {
-			localStorage.removeItem('locale');
-			localStorage.removeItem('theme');
-			unisonReload();
-		},
-	}, {
-		type: 'button',
-		icon: 'ph-sign-in ph-bold ph-lg fa-flip-horizontal',
-		text: i18n.ts.logout,
-		action: async () => {
-			const { canceled } = await os.confirm({
-				type: 'warning',
-				text: i18n.ts.logoutConfirm,
-			});
-			if (canceled) return;
-			signout();
-		},
-		danger: true,
-	}],
-}]);
+const menuDef = computed(() => [
+	{
+		title: i18n.ts.basicSettings,
+		items: [
+			{
+				icon: "ph-user ph-bold ph-lg",
+				text: i18n.ts.profile,
+				to: "/settings/profile",
+				active: currentPage?.route.name === "profile",
+			},
+			{
+				icon: "ph-lock-open ph-bold ph-lg",
+				text: i18n.ts.privacy,
+				to: "/settings/privacy",
+				active: currentPage?.route.name === "privacy",
+			},
+			{
+				icon: "ph-smiley ph-bold ph-lg",
+				text: i18n.ts.reaction,
+				to: "/settings/reaction",
+				active: currentPage?.route.name === "reaction",
+			},
+			{
+				icon: "ph-cloud ph-bold ph-lg",
+				text: i18n.ts.drive,
+				to: "/settings/drive",
+				active: currentPage?.route.name === "drive",
+			},
+			{
+				icon: "ph-bell ph-bold ph-lg",
+				text: i18n.ts.notifications,
+				to: "/settings/notifications",
+				active: currentPage?.route.name === "notifications",
+			},
+			{
+				icon: "ph-envelope-simple-open ph-bold ph-lg",
+				text: i18n.ts.email,
+				to: "/settings/email",
+				active: currentPage?.route.name === "email",
+			},
+			{
+				icon: "ph-share-network ph-bold ph-lg",
+				text: i18n.ts.integration,
+				to: "/settings/integration",
+				active: currentPage?.route.name === "integration",
+			},
+			{
+				icon: "ph-lock ph-bold ph-lg",
+				text: i18n.ts.security,
+				to: "/settings/security",
+				active: currentPage?.route.name === "security",
+			},
+		],
+	},
+	{
+		title: i18n.ts.clientSettings,
+		items: [
+			{
+				icon: "ph-gear-six ph-bold ph-lg",
+				text: i18n.ts.general,
+				to: "/settings/general",
+				active: currentPage?.route.name === "general",
+			},
+			{
+				icon: "ph-palette ph-bold ph-lg",
+				text: i18n.ts.theme,
+				to: "/settings/theme",
+				active: currentPage?.route.name === "theme",
+			},
+			{
+				icon: "ph-list ph-bold ph-lg",
+				text: i18n.ts.navbar,
+				to: "/settings/navbar",
+				active: currentPage?.route.name === "navbar",
+			},
+			{
+				icon: "ph-traffic-signal ph-bold ph-lg",
+				text: i18n.ts.statusbar,
+				to: "/settings/statusbar",
+				active: currentPage?.route.name === "statusbar",
+			},
+			{
+				icon: "ph-speaker-high ph-bold ph-lg",
+				text: i18n.ts.sounds,
+				to: "/settings/sounds",
+				active: currentPage?.route.name === "sounds",
+			},
+			{
+				icon: "ph-plug ph-bold ph-lg",
+				text: i18n.ts.plugins,
+				to: "/settings/plugin",
+				active: currentPage?.route.name === "plugin",
+			},
+		],
+	},
+	{
+		title: i18n.ts.otherSettings,
+		items: [
+			{
+				icon: "ph-airplane-takeoff ph-bold ph-lg",
+				text: i18n.ts.migration,
+				to: "/settings/migration",
+				active: currentPage?.route.name === "migration",
+			},
+			{
+				icon: "ph-package ph-bold ph-lg",
+				text: i18n.ts.importAndExport,
+				to: "/settings/import-export",
+				active: currentPage?.route.name === "import-export",
+			},
+			{
+				icon: "ph-speaker-none ph-bold ph-lg",
+				text: i18n.ts.instanceMute,
+				to: "/settings/instance-mute",
+				active: currentPage?.route.name === "instance-mute",
+			},
+			{
+				icon: "ph-prohibit ph-bold ph-lg",
+				text: i18n.ts.muteAndBlock,
+				to: "/settings/mute-block",
+				active: currentPage?.route.name === "mute-block",
+			},
+			{
+				icon: "ph-speaker-x ph-bold ph-lg",
+				text: i18n.ts.wordMute,
+				to: "/settings/word-mute",
+				active: currentPage?.route.name === "word-mute",
+			},
+			{
+				icon: "ph-key ph-bold ph-lg",
+				text: "API",
+				to: "/settings/api",
+				active: currentPage?.route.name === "api",
+			},
+			{
+				icon: "ph-lightning ph-bold ph-lg",
+				text: "Webhook",
+				to: "/settings/webhook",
+				active: currentPage?.route.name === "webhook",
+			},
+			{
+				icon: "ph-dots-three-outline ph-bold ph-lg",
+				text: i18n.ts.other,
+				to: "/settings/other",
+				active: currentPage?.route.name === "other",
+			},
+		],
+	},
+	{
+		items: [
+			{
+				icon: "ph-floppy-disk ph-bold ph-lg",
+				text: i18n.ts.preferencesBackups,
+				to: "/settings/preferences-backups",
+				active: currentPage?.route.name === "preferences-backups",
+			},
+			{
+				type: "button",
+				icon: "ph-trash ph-bold ph-lg",
+				text: i18n.ts.clearCache,
+				action: () => {
+					localStorage.removeItem("locale");
+					localStorage.removeItem("theme");
+					unisonReload();
+				},
+			},
+			{
+				type: "button",
+				icon: "ph-sign-in ph-bold ph-lg fa-flip-horizontal",
+				text: i18n.ts.logout,
+				action: async () => {
+					const { canceled } = await os.confirm({
+						type: "warning",
+						text: i18n.ts.logoutConfirm,
+					});
+					if (canceled) return;
+					signout();
+				},
+				danger: true,
+			},
+		],
+	},
+]);
 
-watch($$(narrow), () => {
-});
+watch($$(narrow), () => {});
 
 onMounted(() => {
 	ro.observe(el.value);
@@ -214,7 +281,7 @@ onMounted(() => {
 	narrow = el.value.offsetWidth < NARROW_THRESHOLD;
 
 	if (!narrow && currentPage?.route.name == null) {
-		router.replace('/settings/profile');
+		router.replace("/settings/profile");
 	}
 });
 
@@ -222,7 +289,7 @@ onActivated(() => {
 	narrow = el.value.offsetWidth < NARROW_THRESHOLD;
 
 	if (!narrow && currentPage?.route.name == null) {
-		router.replace('/settings/profile');
+		router.replace("/settings/profile");
 	}
 });
 
@@ -231,12 +298,18 @@ onUnmounted(() => {
 });
 
 watch(router.currentRef, (to) => {
-	if (to.route.name === "settings" && to.child?.route.name == null && !narrow) {
-		router.replace('/settings/profile');
+	if (
+		to.route.name === "settings" &&
+		to.child?.route.name == null &&
+		!narrow
+	) {
+		router.replace("/settings/profile");
 	}
 });
 
-const emailNotConfigured = computed(() => instance.enableEmail && ($i.email == null || !$i.emailVerified));
+const emailNotConfigured = computed(
+	() => instance.enableEmail && ($i.email == null || !$i.emailVerified)
+);
 
 provideMetadataReceiver((info) => {
 	if (info == null) {
diff --git a/packages/client/src/pages/settings/instance-mute.vue b/packages/client/src/pages/settings/instance-mute.vue
index c4ce06d6e2..4c8ce7a3d3 100644
--- a/packages/client/src/pages/settings/instance-mute.vue
+++ b/packages/client/src/pages/settings/instance-mute.vue
@@ -1,41 +1,53 @@
 <template>
-<div class="_formRoot">
-	<MkInfo>{{ i18n.ts._instanceMute.title }}</MkInfo>
-	<FormTextarea v-model="instanceMutes" class="_formBlock">
-		<template #label>{{ i18n.ts._instanceMute.heading }}</template>
-		<template #caption>{{ i18n.ts._instanceMute.instanceMuteDescription }}<br>{{ i18n.ts._instanceMute.instanceMuteDescription2 }}</template>
-	</FormTextarea>
-	<MkButton primary :disabled="!changed" class="_formBlock" @click="save()"><i class="ph-floppy-disk-back ph-bold ph-lg"></i> {{ i18n.ts.save }}</MkButton>
-</div>
+	<div class="_formRoot">
+		<MkInfo>{{ i18n.ts._instanceMute.title }}</MkInfo>
+		<FormTextarea v-model="instanceMutes" class="_formBlock">
+			<template #label>{{ i18n.ts._instanceMute.heading }}</template>
+			<template #caption
+				>{{ i18n.ts._instanceMute.instanceMuteDescription }}<br />{{
+					i18n.ts._instanceMute.instanceMuteDescription2
+				}}</template
+			>
+		</FormTextarea>
+		<MkButton
+			primary
+			:disabled="!changed"
+			class="_formBlock"
+			@click="save()"
+			><i class="ph-floppy-disk-back ph-bold ph-lg"></i>
+			{{ i18n.ts.save }}</MkButton
+		>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { ref, watch } from 'vue';
-import FormTextarea from '@/components/form/textarea.vue';
-import MkInfo from '@/components/MkInfo.vue';
-import MkButton from '@/components/MkButton.vue';
-import * as os from '@/os';
-import { $i } from '@/account';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import { ref, watch } from "vue";
+import FormTextarea from "@/components/form/textarea.vue";
+import MkInfo from "@/components/MkInfo.vue";
+import MkButton from "@/components/MkButton.vue";
+import * as os from "@/os";
+import { $i } from "@/account";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
-const instanceMutes = ref($i!.mutedInstances.join('\n'));
+const instanceMutes = ref($i!.mutedInstances.join("\n"));
 const changed = ref(false);
 
 async function save() {
 	let mutes = instanceMutes.value
-		.trim().split('\n')
-		.map(el => el.trim())
-		.filter(el => el);
+		.trim()
+		.split("\n")
+		.map((el) => el.trim())
+		.filter((el) => el);
 
-	await os.api('i/update', {
+	await os.api("i/update", {
 		mutedInstances: mutes,
 	});
 
 	changed.value = false;
 
 	// Refresh filtered list to signal to the user how they've been saved
-	instanceMutes.value = mutes.join('\n');
+	instanceMutes.value = mutes.join("\n");
 }
 
 watch(instanceMutes, () => {
@@ -48,6 +60,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.instanceMute,
-	icon: 'ph-speaker-none ph-bold ph-lg',
+	icon: "ph-speaker-none ph-bold ph-lg",
 });
 </script>
diff --git a/packages/client/src/pages/settings/integration.vue b/packages/client/src/pages/settings/integration.vue
index e851373905..4a413e378b 100644
--- a/packages/client/src/pages/settings/integration.vue
+++ b/packages/client/src/pages/settings/integration.vue
@@ -1,30 +1,66 @@
 <template>
-<div class="_formRoot">
-	<FormSection v-if="instance.enableDiscordIntegration">
-		<template #label><i class="ph-discord-logo ph-bold ph-lg"></i> Discord</template>
-		<p v-if="integrations.discord">{{ i18n.ts.connectedTo }}: <a :href="`https://discord.com/users/${integrations.discord.id}`" rel="nofollow noopener" target="_blank">@{{ integrations.discord.username }}#{{ integrations.discord.discriminator }}</a></p>
-		<MkButton v-if="integrations.discord" danger @click="disconnectDiscord">{{ i18n.ts.disconnectService }}</MkButton>
-		<MkButton v-else primary @click="connectDiscord">{{ i18n.ts.connectService }}</MkButton>
-	</FormSection>
+	<div class="_formRoot">
+		<FormSection v-if="instance.enableDiscordIntegration">
+			<template #label
+				><i class="ph-discord-logo ph-bold ph-lg"></i> Discord</template
+			>
+			<p v-if="integrations.discord">
+				{{ i18n.ts.connectedTo }}:
+				<a
+					:href="`https://discord.com/users/${integrations.discord.id}`"
+					rel="nofollow noopener"
+					target="_blank"
+					>@{{ integrations.discord.username }}#{{
+						integrations.discord.discriminator
+					}}</a
+				>
+			</p>
+			<MkButton
+				v-if="integrations.discord"
+				danger
+				@click="disconnectDiscord"
+				>{{ i18n.ts.disconnectService }}</MkButton
+			>
+			<MkButton v-else primary @click="connectDiscord">{{
+				i18n.ts.connectService
+			}}</MkButton>
+		</FormSection>
 
-	<FormSection v-if="instance.enableGithubIntegration">
-		<template #label><i class="ph-github-logo ph-bold ph-lg"></i> GitHub</template>
-		<p v-if="integrations.github">{{ i18n.ts.connectedTo }}: <a :href="`https://github.com/${integrations.github.login}`" rel="nofollow noopener" target="_blank">@{{ integrations.github.login }}</a></p>
-		<MkButton v-if="integrations.github" danger @click="disconnectGithub">{{ i18n.ts.disconnectService }}</MkButton>
-		<MkButton v-else primary @click="connectGithub">{{ i18n.ts.connectService }}</MkButton>
-	</FormSection>
-</div>
+		<FormSection v-if="instance.enableGithubIntegration">
+			<template #label
+				><i class="ph-github-logo ph-bold ph-lg"></i> GitHub</template
+			>
+			<p v-if="integrations.github">
+				{{ i18n.ts.connectedTo }}:
+				<a
+					:href="`https://github.com/${integrations.github.login}`"
+					rel="nofollow noopener"
+					target="_blank"
+					>@{{ integrations.github.login }}</a
+				>
+			</p>
+			<MkButton
+				v-if="integrations.github"
+				danger
+				@click="disconnectGithub"
+				>{{ i18n.ts.disconnectService }}</MkButton
+			>
+			<MkButton v-else primary @click="connectGithub">{{
+				i18n.ts.connectService
+			}}</MkButton>
+		</FormSection>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted, ref, watch } from 'vue';
-import { apiUrl } from '@/config';
-import FormSection from '@/components/form/section.vue';
-import MkButton from '@/components/MkButton.vue';
-import { $i } from '@/account';
-import { instance } from '@/instance';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import { computed, onMounted, ref, watch } from "vue";
+import { apiUrl } from "@/config";
+import FormSection from "@/components/form/section.vue";
+import MkButton from "@/components/MkButton.vue";
+import { $i } from "@/account";
+import { instance } from "@/instance";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
 const twitterForm = ref<Window | null>(null);
 const discordForm = ref<Window | null>(null);
@@ -33,40 +69,42 @@ const githubForm = ref<Window | null>(null);
 const integrations = computed(() => $i!.integrations);
 
 function openWindow(service: string, type: string) {
-	return window.open(`${apiUrl}/${type}/${service}`,
+	return window.open(
+		`${apiUrl}/${type}/${service}`,
 		`${service}_${type}_window`,
-		'height=570, width=520',
+		"height=570, width=520"
 	);
 }
 
 function connectTwitter() {
-	twitterForm.value = openWindow('twitter', 'connect');
+	twitterForm.value = openWindow("twitter", "connect");
 }
 
 function disconnectTwitter() {
-	openWindow('twitter', 'disconnect');
+	openWindow("twitter", "disconnect");
 }
 
 function connectDiscord() {
-	discordForm.value = openWindow('discord', 'connect');
+	discordForm.value = openWindow("discord", "connect");
 }
 
 function disconnectDiscord() {
-	openWindow('discord', 'disconnect');
+	openWindow("discord", "disconnect");
 }
 
 function connectGithub() {
-	githubForm.value = openWindow('github', 'connect');
+	githubForm.value = openWindow("github", "connect");
 }
 
 function disconnectGithub() {
-	openWindow('github', 'disconnect');
+	openWindow("github", "disconnect");
 }
 
 onMounted(() => {
-	document.cookie = `igi=${$i!.token}; path=/;` +
-		' max-age=31536000;' +
-		(document.location.protocol.startsWith('https') ? ' secure' : '');
+	document.cookie =
+		`igi=${$i!.token}; path=/;` +
+		" max-age=31536000;" +
+		(document.location.protocol.startsWith("https") ? " secure" : "");
 
 	watch(integrations, () => {
 		if (integrations.value.twitter) {
@@ -87,6 +125,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.integration,
-	icon: 'ph-share-network ph-bold ph-lg',
+	icon: "ph-share-network ph-bold ph-lg",
 });
 </script>
diff --git a/packages/client/src/pages/settings/migration.vue b/packages/client/src/pages/settings/migration.vue
index 49d244091c..1dcc44f91b 100644
--- a/packages/client/src/pages/settings/migration.vue
+++ b/packages/client/src/pages/settings/migration.vue
@@ -1,68 +1,78 @@
 <template>
-<div class="_formRoot">
-	<FormSection>
-		<template #label>{{ i18n.ts.moveTo }}</template>
-		<FormInput v-model="moveToAccount" class="_formBlock">
-			<template #prefix><i class="ph-airplane-takeoff ph-bold ph-lg"></i></template>
-			<template #label>{{ i18n.ts.moveToLabel }}</template>
-		</FormInput>
-		<FormButton primary danger @click="move(moveToAccount)">
-			{{ i18n.ts.moveAccount }}
-		</FormButton>
-		<div class="description">{{ i18n.ts.moveAccountDescription }}</div>
-	</FormSection>
+	<div class="_formRoot">
+		<FormSection>
+			<template #label>{{ i18n.ts.moveTo }}</template>
+			<FormInput v-model="moveToAccount" class="_formBlock">
+				<template #prefix
+					><i class="ph-airplane-takeoff ph-bold ph-lg"></i
+				></template>
+				<template #label>{{ i18n.ts.moveToLabel }}</template>
+			</FormInput>
+			<FormButton primary danger @click="move(moveToAccount)">
+				{{ i18n.ts.moveAccount }}
+			</FormButton>
+			<div class="description">{{ i18n.ts.moveAccountDescription }}</div>
+		</FormSection>
 
-	<FormSection>
-		<template #label>{{ i18n.ts.moveFrom }}</template>
-		<FormInput v-model="accountAlias" class="_formBlock">
-			<template #prefix><i class="ph-airplane-landing ph-bold ph-lg"></i></template>
-			<template #label>{{ i18n.ts.moveFromLabel }}</template>
-		</FormInput>
-		<FormButton class="button" inline primary @click="save(accountAlias.toString())">
-			<i class="ph-floppy-disk-back ph-bold ph-lg"></i> {{ i18n.ts.save }}
-		</FormButton>
-		<div class="description">{{ i18n.ts.moveFromDescription }}</div>
-	</FormSection>
-</div>
+		<FormSection>
+			<template #label>{{ i18n.ts.moveFrom }}</template>
+			<FormInput v-model="accountAlias" class="_formBlock">
+				<template #prefix
+					><i class="ph-airplane-landing ph-bold ph-lg"></i
+				></template>
+				<template #label>{{ i18n.ts.moveFromLabel }}</template>
+			</FormInput>
+			<FormButton
+				class="button"
+				inline
+				primary
+				@click="save(accountAlias.toString())"
+			>
+				<i class="ph-floppy-disk-back ph-bold ph-lg"></i>
+				{{ i18n.ts.save }}
+			</FormButton>
+			<div class="description">{{ i18n.ts.moveFromDescription }}</div>
+		</FormSection>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import FormSection from '@/components/form/section.vue';
-import FormInput from '@/components/form/input.vue';
-import FormButton from '@/components/MkButton.vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import FormSection from "@/components/form/section.vue";
+import FormInput from "@/components/form/input.vue";
+import FormButton from "@/components/MkButton.vue";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
-let moveToAccount = $ref('');
-let accountAlias = $ref('');
+let moveToAccount = $ref("");
+let accountAlias = $ref("");
 
 async function save(account): Promise<void> {
-	os.apiWithDialog('i/known-as', {
+	os.apiWithDialog("i/known-as", {
 		alsoKnownAs: account,
 	});
 }
 
 async function move(account): Promise<void> {
 	const confirm = await os.confirm({
-		type: 'warning',
-		text: i18n.t('migrationConfirm', { account: account.toString() }),
+		type: "warning",
+		text: i18n.t("migrationConfirm", { account: account.toString() }),
 	});
 	if (confirm.canceled) return;
-	os.apiWithDialog('i/move', {
+	os.apiWithDialog("i/move", {
 		moveToAccount: account,
 	});
 }
 
 definePageMetadata({
 	title: i18n.ts.security,
-	icon: 'ph-lock ph-bold ph-lg',
+	icon: "ph-lock ph-bold ph-lg",
 });
 </script>
 
 <style lang="scss">
 .description {
-	font-size: .85em;
+	font-size: 0.85em;
 	padding: 1rem;
 }
 </style>
diff --git a/packages/client/src/pages/settings/mute-block.vue b/packages/client/src/pages/settings/mute-block.vue
index c081e6bc24..81e9ec8752 100644
--- a/packages/client/src/pages/settings/mute-block.vue
+++ b/packages/client/src/pages/settings/mute-block.vue
@@ -1,52 +1,64 @@
 <template>
-<div class="_formRoot">
-	<MkTab v-model="tab" style="margin-bottom: var(--margin);">
-		<option value="mute">{{ i18n.ts.mutedUsers }}</option>
-		<option value="block">{{ i18n.ts.blockedUsers }}</option>
-	</MkTab>
-	<div v-if="tab === 'mute'">
-		<MkPagination :pagination="mutingPagination" class="muting">
-			<template #empty><FormInfo>{{ i18n.ts.noUsers }}</FormInfo></template>
-			<template #default="{items}">
-				<FormLink v-for="mute in items" :key="mute.id" :to="userPage(mute.mutee)">
-					<MkAcct :user="mute.mutee"/>
-				</FormLink>
-			</template>
-		</MkPagination>
+	<div class="_formRoot">
+		<MkTab v-model="tab" style="margin-bottom: var(--margin)">
+			<option value="mute">{{ i18n.ts.mutedUsers }}</option>
+			<option value="block">{{ i18n.ts.blockedUsers }}</option>
+		</MkTab>
+		<div v-if="tab === 'mute'">
+			<MkPagination :pagination="mutingPagination" class="muting">
+				<template #empty
+					><FormInfo>{{ i18n.ts.noUsers }}</FormInfo></template
+				>
+				<template #default="{ items }">
+					<FormLink
+						v-for="mute in items"
+						:key="mute.id"
+						:to="userPage(mute.mutee)"
+					>
+						<MkAcct :user="mute.mutee" />
+					</FormLink>
+				</template>
+			</MkPagination>
+		</div>
+		<div v-if="tab === 'block'">
+			<MkPagination :pagination="blockingPagination" class="blocking">
+				<template #empty
+					><FormInfo>{{ i18n.ts.noUsers }}</FormInfo></template
+				>
+				<template #default="{ items }">
+					<FormLink
+						v-for="block in items"
+						:key="block.id"
+						:to="userPage(block.blockee)"
+					>
+						<MkAcct :user="block.blockee" />
+					</FormLink>
+				</template>
+			</MkPagination>
+		</div>
 	</div>
-	<div v-if="tab === 'block'">
-		<MkPagination :pagination="blockingPagination" class="blocking">
-			<template #empty><FormInfo>{{ i18n.ts.noUsers }}</FormInfo></template>
-			<template #default="{items}">
-				<FormLink v-for="block in items" :key="block.id" :to="userPage(block.blockee)">
-					<MkAcct :user="block.blockee"/>
-				</FormLink>
-			</template>
-		</MkPagination>
-	</div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import MkPagination from '@/components/MkPagination.vue';
-import MkTab from '@/components/MkTab.vue';
-import FormInfo from '@/components/MkInfo.vue';
-import FormLink from '@/components/form/link.vue';
-import { userPage } from '@/filters/user';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import {} from "vue";
+import MkPagination from "@/components/MkPagination.vue";
+import MkTab from "@/components/MkTab.vue";
+import FormInfo from "@/components/MkInfo.vue";
+import FormLink from "@/components/form/link.vue";
+import { userPage } from "@/filters/user";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
-let tab = $ref('mute');
+let tab = $ref("mute");
 
 const mutingPagination = {
-	endpoint: 'mute/list' as const,
+	endpoint: "mute/list" as const,
 	limit: 10,
 };
 
 const blockingPagination = {
-	endpoint: 'blocking/list' as const,
+	endpoint: "blocking/list" as const,
 	limit: 10,
 };
 
@@ -56,6 +68,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.muteAndBlock,
-	icon: 'ph-prohibit ph-bold ph-lg',
+	icon: "ph-prohibit ph-bold ph-lg",
 });
 </script>
diff --git a/packages/client/src/pages/settings/navbar.vue b/packages/client/src/pages/settings/navbar.vue
index bea7609ac7..10aeb97329 100644
--- a/packages/client/src/pages/settings/navbar.vue
+++ b/packages/client/src/pages/settings/navbar.vue
@@ -1,42 +1,59 @@
 <template>
-<div class="_formRoot">
-	<FormTextarea v-model="items" tall manual-save class="_formBlock">
-		<template #label>{{ i18n.ts.navbar }}</template>
-		<template #caption><button class="_textButton" @click="addItem">{{ i18n.ts.addItem }}</button></template>
-	</FormTextarea>
+	<div class="_formRoot">
+		<FormTextarea v-model="items" tall manual-save class="_formBlock">
+			<template #label>{{ i18n.ts.navbar }}</template>
+			<template #caption
+				><button class="_textButton" @click="addItem">
+					{{ i18n.ts.addItem }}
+				</button></template
+			>
+		</FormTextarea>
 
-	<FormRadios v-model="menuDisplay" class="_formBlock">
-		<template #label>{{ i18n.ts.display }}</template>
-		<option value="sideFull">{{ i18n.ts._menuDisplay.sideFull }}</option>
-		<option value="sideIcon">{{ i18n.ts._menuDisplay.sideIcon }}</option>
-		<!-- <option value="top">{{ i18n.ts._menuDisplay.top }}</option> -->
-		<!-- <MkRadio v-model="menuDisplay" value="hide" disabled>{{ i18n.ts._menuDisplay.hide }}</MkRadio>--> <!-- TODO: サイドバーを完全に隠せるようにすると、別途ハンバーガーボタンのようなものをUIに表示する必要があり面倒 -->
-	</FormRadios>
+		<FormRadios v-model="menuDisplay" class="_formBlock">
+			<template #label>{{ i18n.ts.display }}</template>
+			<option value="sideFull">
+				{{ i18n.ts._menuDisplay.sideFull }}
+			</option>
+			<option value="sideIcon">
+				{{ i18n.ts._menuDisplay.sideIcon }}
+			</option>
+			<!-- <option value="top">{{ i18n.ts._menuDisplay.top }}</option> -->
+			<!-- <MkRadio v-model="menuDisplay" value="hide" disabled>{{ i18n.ts._menuDisplay.hide }}</MkRadio>-->
+			<!-- TODO: サイドバーを完全に隠せるようにすると、別途ハンバーガーボタンのようなものをUIに表示する必要があり面倒 -->
+		</FormRadios>
 
-	<FormButton danger class="_formBlock" @click="reset()"><i class="ph-arrow-clockwise ph-bold ph-lg"></i> {{ i18n.ts.default }}</FormButton>
-</div>
+		<FormButton danger class="_formBlock" @click="reset()"
+			><i class="ph-arrow-clockwise ph-bold ph-lg"></i>
+			{{ i18n.ts.default }}</FormButton
+		>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { computed, ref, watch } from 'vue';
-import FormTextarea from '@/components/form/textarea.vue';
-import FormRadios from '@/components/form/radios.vue';
-import FormButton from '@/components/MkButton.vue';
-import * as os from '@/os';
-import { navbarItemDef } from '@/navbar';
-import { defaultStore } from '@/store';
-import { unisonReload } from '@/scripts/unison-reload';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import { computed, ref, watch } from "vue";
+import FormTextarea from "@/components/form/textarea.vue";
+import FormRadios from "@/components/form/radios.vue";
+import FormButton from "@/components/MkButton.vue";
+import * as os from "@/os";
+import { navbarItemDef } from "@/navbar";
+import { defaultStore } from "@/store";
+import { unisonReload } from "@/scripts/unison-reload";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
-const items = ref(defaultStore.state.menu.join('\n'));
+const items = ref(defaultStore.state.menu.join("\n"));
 
-const split = computed(() => items.value.trim().split('\n').filter(x => x.trim() !== ''));
-const menuDisplay = computed(defaultStore.makeGetterSetter('menuDisplay'));
+const split = computed(() =>
+	items.value
+		.trim()
+		.split("\n")
+		.filter((x) => x.trim() !== "")
+);
+const menuDisplay = computed(defaultStore.makeGetterSetter("menuDisplay"));
 
 async function reloadAsk() {
 	const { canceled } = await os.confirm({
-		type: 'info',
+		type: "info",
 		text: i18n.ts.reloadToApplySetting,
 	});
 	if (canceled) return;
@@ -45,27 +62,34 @@ async function reloadAsk() {
 }
 
 async function addItem() {
-	const menu = Object.keys(navbarItemDef).filter(k => !defaultStore.state.menu.includes(k));
+	const menu = Object.keys(navbarItemDef).filter(
+		(k) => !defaultStore.state.menu.includes(k)
+	);
 	const { canceled, result: item } = await os.select({
 		title: i18n.ts.addItem,
-		items: [...menu.map(k => ({
-			value: k, text: i18n.ts[navbarItemDef[k].title],
-		})), {
-			value: '-', text: i18n.ts.divider,
-		}],
+		items: [
+			...menu.map((k) => ({
+				value: k,
+				text: i18n.ts[navbarItemDef[k].title],
+			})),
+			{
+				value: "-",
+				text: i18n.ts.divider,
+			},
+		],
 	});
 	if (canceled) return;
-	items.value = [...split.value, item].join('\n');
+	items.value = [...split.value, item].join("\n");
 }
 
 async function save() {
-	defaultStore.set('menu', split.value);
+	defaultStore.set("menu", split.value);
 	await reloadAsk();
 }
 
 function reset() {
-	defaultStore.reset('menu');
-	items.value = defaultStore.state.menu.join('\n');
+	defaultStore.reset("menu");
+	items.value = defaultStore.state.menu.join("\n");
 }
 
 watch(items, async () => {
@@ -82,6 +106,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.navbar,
-	icon: 'ph-list-bullets ph-bold ph-lg',
+	icon: "ph-list-bullets ph-bold ph-lg",
 });
 </script>
diff --git a/packages/client/src/pages/settings/notifications.vue b/packages/client/src/pages/settings/notifications.vue
index 586da9e154..57a054d4a9 100644
--- a/packages/client/src/pages/settings/notifications.vue
+++ b/packages/client/src/pages/settings/notifications.vue
@@ -1,82 +1,124 @@
 <template>
-<div class="_formRoot">
-	<FormButton class="_formBlock" @click="configure"><template #icon><i class="ph-gear-six ph-bold ph-lg"></i></template>{{ i18n.ts.notificationSetting }}</FormButton>
-	<FormSection>
-		<ForFormButtonmLink class="_formBlock" @click="readAllNotifications">{{ i18n.ts.markAsReadAllNotifications }}</ForFormButtonmLink>
-		<FormButton class="_formBlock" @click="readAllUnreadNotes">{{ i18n.ts.markAsReadAllUnreadNotes }}</FormButton>
-		<FormButton class="_formBlock" @click="readAllMessagingMessages">{{ i18n.ts.markAsReadAllTalkMessages }}</FormButton>
-	</FormSection>
-	<FormSection>
-		<template #label>{{ i18n.ts.pushNotification }}</template>
+	<div class="_formRoot">
+		<FormButton class="_formBlock" @click="configure"
+			><template #icon><i class="ph-gear-six ph-bold ph-lg"></i></template
+			>{{ i18n.ts.notificationSetting }}</FormButton
+		>
+		<FormSection>
+			<ForFormButtonmLink
+				class="_formBlock"
+				@click="readAllNotifications"
+				>{{ i18n.ts.markAsReadAllNotifications }}</ForFormButtonmLink
+			>
+			<FormButton class="_formBlock" @click="readAllUnreadNotes">{{
+				i18n.ts.markAsReadAllUnreadNotes
+			}}</FormButton>
+			<FormButton class="_formBlock" @click="readAllMessagingMessages">{{
+				i18n.ts.markAsReadAllTalkMessages
+			}}</FormButton>
+		</FormSection>
+		<FormSection>
+			<template #label>{{ i18n.ts.pushNotification }}</template>
 
-		<div class="_gaps_m">
-			<MkPushNotificationAllowButton ref="allowButton"/>
-			<MkSwitch :disabled="!pushRegistrationInServer" :model-value="sendReadMessage" @update:model-value="onChangeSendReadMessage">
-				<template #label>{{ i18n.ts.sendPushNotificationReadMessage }}</template>
-				<template #caption>
-					<I18n :src="i18n.ts.sendPushNotificationReadMessageCaption">
-						<template #emptyPushNotificationMessage>{{ i18n.ts._notification.emptyPushNotificationMessage }}</template>
-					</I18n>
-				</template>
-			</MkSwitch>
-		</div>
-	</FormSection>
-</div>
+			<div class="_gaps_m">
+				<MkPushNotificationAllowButton ref="allowButton" />
+				<MkSwitch
+					:disabled="!pushRegistrationInServer"
+					:model-value="sendReadMessage"
+					@update:model-value="onChangeSendReadMessage"
+				>
+					<template #label>{{
+						i18n.ts.sendPushNotificationReadMessage
+					}}</template>
+					<template #caption>
+						<I18n
+							:src="
+								i18n.ts.sendPushNotificationReadMessageCaption
+							"
+						>
+							<template #emptyPushNotificationMessage>{{
+								i18n.ts._notification
+									.emptyPushNotificationMessage
+							}}</template>
+						</I18n>
+					</template>
+				</MkSwitch>
+			</div>
+		</FormSection>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent } from 'vue';
-import { notificationTypes } from 'calckey-js';
-import FormButton from '@/components/MkButton.vue';
-import FormLink from '@/components/form/link.vue';
-import FormSection from '@/components/form/section.vue';
-import * as os from '@/os';
-import { $i } from '@/account';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import MkPushNotificationAllowButton from '@/components/MkPushNotificationAllowButton.vue';
+import { defineAsyncComponent } from "vue";
+import { notificationTypes } from "calckey-js";
+import FormButton from "@/components/MkButton.vue";
+import FormLink from "@/components/form/link.vue";
+import FormSection from "@/components/form/section.vue";
+import * as os from "@/os";
+import { $i } from "@/account";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
+import MkPushNotificationAllowButton from "@/components/MkPushNotificationAllowButton.vue";
 
-let allowButton = $shallowRef<InstanceType<typeof MkPushNotificationAllowButton>>();
-let pushRegistrationInServer = $computed(() => allowButton?.pushRegistrationInServer);
-let sendReadMessage = $computed(() => pushRegistrationInServer?.sendReadMessage || false);
+let allowButton =
+	$shallowRef<InstanceType<typeof MkPushNotificationAllowButton>>();
+let pushRegistrationInServer = $computed(
+	() => allowButton?.pushRegistrationInServer
+);
+let sendReadMessage = $computed(
+	() => pushRegistrationInServer?.sendReadMessage || false
+);
 
 async function readAllUnreadNotes() {
-	await os.api('i/read-all-unread-notes');
+	await os.api("i/read-all-unread-notes");
 }
 
 async function readAllMessagingMessages() {
-	await os.api('i/read-all-messaging-messages');
+	await os.api("i/read-all-messaging-messages");
 }
 
 async function readAllNotifications() {
-	await os.api('notifications/mark-all-as-read');
+	await os.api("notifications/mark-all-as-read");
 }
 
 function configure() {
-	const includingTypes = notificationTypes.filter(x => !$i!.mutingNotificationTypes.includes(x));
-	os.popup(defineAsyncComponent(() => import('@/components/MkNotificationSettingWindow.vue')), {
-		includingTypes,
-		showGlobalToggle: false,
-	}, {
-		done: async (res) => {
-			const { includingTypes: value } = res;
-			await os.apiWithDialog('i/update', {
-				mutingNotificationTypes: notificationTypes.filter(x => !value.includes(x)),
-			}).then(i => {
-				$i!.mutingNotificationTypes = i.mutingNotificationTypes;
-			});
+	const includingTypes = notificationTypes.filter(
+		(x) => !$i!.mutingNotificationTypes.includes(x)
+	);
+	os.popup(
+		defineAsyncComponent(
+			() => import("@/components/MkNotificationSettingWindow.vue")
+		),
+		{
+			includingTypes,
+			showGlobalToggle: false,
 		},
-	}, 'closed');
+		{
+			done: async (res) => {
+				const { includingTypes: value } = res;
+				await os
+					.apiWithDialog("i/update", {
+						mutingNotificationTypes: notificationTypes.filter(
+							(x) => !value.includes(x)
+						),
+					})
+					.then((i) => {
+						$i!.mutingNotificationTypes = i.mutingNotificationTypes;
+					});
+			},
+		},
+		"closed"
+	);
 }
 
 function onChangeSendReadMessage(v: boolean) {
 	if (!pushRegistrationInServer) return;
 
-	os.apiWithDialog('sw/update-registration', {
+	os.apiWithDialog("sw/update-registration", {
 		endpoint: pushRegistrationInServer.endpoint,
 		sendReadMessage: v,
-	}).then(res => {
-		if (!allowButton)	return;
+	}).then((res) => {
+		if (!allowButton) return;
 		allowButton.pushRegistrationInServer = res;
 	});
 }
@@ -87,6 +129,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.notifications,
-	icon: 'ph-bell ph-bold ph-lg',
+	icon: "ph-bell ph-bold ph-lg",
 });
 </script>
diff --git a/packages/client/src/pages/settings/other.vue b/packages/client/src/pages/settings/other.vue
index 1782024f80..6a069493f5 100644
--- a/packages/client/src/pages/settings/other.vue
+++ b/packages/client/src/pages/settings/other.vue
@@ -1,37 +1,49 @@
 <template>
-<div class="_formRoot">
-	<FormSwitch v-model="$i.injectFeaturedNote" class="_formBlock" @update:modelValue="onChangeInjectFeaturedNote">
-		{{ i18n.ts.showFeaturedNotesInTimeline }}
-	</FormSwitch>
+	<div class="_formRoot">
+		<FormSwitch
+			v-model="$i.injectFeaturedNote"
+			class="_formBlock"
+			@update:modelValue="onChangeInjectFeaturedNote"
+		>
+			{{ i18n.ts.showFeaturedNotesInTimeline }}
+		</FormSwitch>
 
-	<!--
+		<!--
 	<FormSwitch v-model="reportError" class="_formBlock">{{ i18n.ts.sendErrorReports }}<template #caption>{{ i18n.ts.sendErrorReportsDescription }}</template></FormSwitch>
 	-->
 
-	<FormLink to="/settings/account-info" class="_formBlock">{{ i18n.ts.accountInfo }}</FormLink>
+		<FormLink to="/settings/account-info" class="_formBlock">{{
+			i18n.ts.accountInfo
+		}}</FormLink>
 
-	<FormLink to="/registry" class="_formBlock"><template #icon><i class="ph-gear-six ph-bold ph-lg"></i></template>{{ i18n.ts.registry }}</FormLink>
+		<FormLink to="/registry" class="_formBlock"
+			><template #icon><i class="ph-gear-six ph-bold ph-lg"></i></template
+			>{{ i18n.ts.registry }}</FormLink
+		>
 
-	<FormLink to="/settings/delete-account" class="_formBlock"><template #icon><i class="ph-warning ph-bold ph-lg"></i></template>{{ i18n.ts.closeAccount }}</FormLink>
-</div>
+		<FormLink to="/settings/delete-account" class="_formBlock"
+			><template #icon><i class="ph-warning ph-bold ph-lg"></i></template
+			>{{ i18n.ts.closeAccount }}</FormLink
+		>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { computed, defineAsyncComponent } from 'vue';
-import FormSwitch from '@/components/form/switch.vue';
-import FormLink from '@/components/form/link.vue';
-import MkButton from '@/components/MkButton.vue';
-import * as os from '@/os';
-import { popup } from '@/os';
-import { defaultStore } from '@/store';
-import { $i } from '@/account';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import { computed, defineAsyncComponent } from "vue";
+import FormSwitch from "@/components/form/switch.vue";
+import FormLink from "@/components/form/link.vue";
+import MkButton from "@/components/MkButton.vue";
+import * as os from "@/os";
+import { popup } from "@/os";
+import { defaultStore } from "@/store";
+import { $i } from "@/account";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
-const reportError = computed(defaultStore.makeGetterSetter('reportError'));
+const reportError = computed(defaultStore.makeGetterSetter("reportError"));
 
 function onChangeInjectFeaturedNote(v) {
-	os.api('i/update', {
+	os.api("i/update", {
 		injectFeaturedNote: v,
 	}).then((i) => {
 		$i!.injectFeaturedNote = i.injectFeaturedNote;
@@ -44,6 +56,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.other,
-	icon: 'ph-dots-three-outline ph-bold ph-lg',
+	icon: "ph-dots-three-outline ph-bold ph-lg",
 });
 </script>
diff --git a/packages/client/src/pages/settings/plugin.install.vue b/packages/client/src/pages/settings/plugin.install.vue
index 25895c93fe..ab678cf990 100644
--- a/packages/client/src/pages/settings/plugin.install.vue
+++ b/packages/client/src/pages/settings/plugin.install.vue
@@ -1,42 +1,50 @@
 <template>
-<div class="_formRoot">
-	<FormInfo warn class="_formBlock">{{ i18n.ts._plugin.installWarn }}</FormInfo>
+	<div class="_formRoot">
+		<FormInfo warn class="_formBlock">{{
+			i18n.ts._plugin.installWarn
+		}}</FormInfo>
 
-	<FormTextarea v-model="code" tall class="_formBlock">
-		<template #label>{{ i18n.ts.code }}</template>
-	</FormTextarea>
+		<FormTextarea v-model="code" tall class="_formBlock">
+			<template #label>{{ i18n.ts.code }}</template>
+		</FormTextarea>
 
-	<div class="_formBlock">
-		<FormButton :disabled="code == null" primary inline @click="install"><i class="ph-check ph-bold ph-lg"></i> {{ i18n.ts.install }}</FormButton>
+		<div class="_formBlock">
+			<FormButton :disabled="code == null" primary inline @click="install"
+				><i class="ph-check ph-bold ph-lg"></i>
+				{{ i18n.ts.install }}</FormButton
+			>
+		</div>
 	</div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent, nextTick, ref } from 'vue';
-import { AiScript, parse } from '@syuilo/aiscript';
-import { serialize } from '@syuilo/aiscript/built/serializer';
-import { v4 as uuid } from 'uuid';
-import FormTextarea from '@/components/form/textarea.vue';
-import FormButton from '@/components/MkButton.vue';
-import FormInfo from '@/components/MkInfo.vue';
-import * as os from '@/os';
-import { ColdDeviceStorage } from '@/store';
-import { unisonReload } from '@/scripts/unison-reload';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import { defineAsyncComponent, nextTick, ref } from "vue";
+import { AiScript, parse } from "@syuilo/aiscript";
+import { serialize } from "@syuilo/aiscript/built/serializer";
+import { v4 as uuid } from "uuid";
+import FormTextarea from "@/components/form/textarea.vue";
+import FormButton from "@/components/MkButton.vue";
+import FormInfo from "@/components/MkInfo.vue";
+import * as os from "@/os";
+import { ColdDeviceStorage } from "@/store";
+import { unisonReload } from "@/scripts/unison-reload";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
 const code = ref(null);
 
 function installPlugin({ id, meta, ast, token }) {
-	ColdDeviceStorage.set('plugins', ColdDeviceStorage.get('plugins').concat({
-		...meta,
-		id,
-		active: true,
-		configData: {},
-		token: token,
-		ast: ast,
-	}));
+	ColdDeviceStorage.set(
+		"plugins",
+		ColdDeviceStorage.get("plugins").concat({
+			...meta,
+			id,
+			active: true,
+			configData: {},
+			token: token,
+			ast: ast,
+		})
+	);
 }
 
 async function install() {
@@ -45,8 +53,8 @@ async function install() {
 		ast = parse(code.value);
 	} catch (err) {
 		os.alert({
-			type: 'error',
-			text: 'Syntax error :(',
+			type: "error",
+			text: "Syntax error :(",
 		});
 		return;
 	}
@@ -54,8 +62,8 @@ async function install() {
 	const meta = AiScript.collectMetadata(ast);
 	if (meta == null) {
 		os.alert({
-			type: 'error',
-			text: 'No metadata found :(',
+			type: "error",
+			text: "No metadata found :(",
 		});
 		return;
 	}
@@ -63,44 +71,65 @@ async function install() {
 	const metadata = meta.get(null);
 	if (metadata == null) {
 		os.alert({
-			type: 'error',
-			text: 'No metadata found :(',
+			type: "error",
+			text: "No metadata found :(",
 		});
 		return;
 	}
 
-	const { name, version, author, description, permissions, config } = metadata;
+	const { name, version, author, description, permissions, config } =
+		metadata;
 	if (name == null || version == null || author == null) {
 		os.alert({
-			type: 'error',
-			text: 'Required property not found :(',
+			type: "error",
+			text: "Required property not found :(",
 		});
 		return;
 	}
 
-	const token = permissions == null || permissions.length === 0 ? null : await new Promise((res, rej) => {
-		os.popup(defineAsyncComponent(() => import('@/components/MkTokenGenerateWindow.vue')), {
-			title: i18n.ts.tokenRequested,
-			information: i18n.ts.pluginTokenRequestedDescription,
-			initialName: name,
-			initialPermissions: permissions,
-		}, {
-			done: async result => {
-				const { name, permissions } = result;
-				const { token } = await os.api('miauth/gen-token', {
-					session: null,
-					name: name,
-					permission: permissions,
-				});
-				res(token);
-			},
-		}, 'closed');
-	});
+	const token =
+		permissions == null || permissions.length === 0
+			? null
+			: await new Promise((res, rej) => {
+					os.popup(
+						defineAsyncComponent(
+							() =>
+								import("@/components/MkTokenGenerateWindow.vue")
+						),
+						{
+							title: i18n.ts.tokenRequested,
+							information:
+								i18n.ts.pluginTokenRequestedDescription,
+							initialName: name,
+							initialPermissions: permissions,
+						},
+						{
+							done: async (result) => {
+								const { name, permissions } = result;
+								const { token } = await os.api(
+									"miauth/gen-token",
+									{
+										session: null,
+										name: name,
+										permission: permissions,
+									}
+								);
+								res(token);
+							},
+						},
+						"closed"
+					);
+			  });
 
 	installPlugin({
 		id: uuid(),
 		meta: {
-			name, version, author, description, permissions, config,
+			name,
+			version,
+			author,
+			description,
+			permissions,
+			config,
 		},
 		token,
 		ast: serialize(ast),
@@ -119,6 +148,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts._plugin.install,
-	icon: 'ph-download-simple ph-bold ph-lg',
+	icon: "ph-download-simple ph-bold ph-lg",
 });
 </script>
diff --git a/packages/client/src/pages/settings/plugin.vue b/packages/client/src/pages/settings/plugin.vue
index 7949bff03b..6120c483e9 100644
--- a/packages/client/src/pages/settings/plugin.vue
+++ b/packages/client/src/pages/settings/plugin.vue
@@ -1,53 +1,84 @@
 <template>
-<div class="_formRoot">
-	<FormLink to="/settings/plugin/install"><template #icon><i class="ph-download-simple ph-bold ph-lg"></i></template>{{ i18n.ts._plugin.install }}</FormLink>
+	<div class="_formRoot">
+		<FormLink to="/settings/plugin/install"
+			><template #icon
+				><i class="ph-download-simple ph-bold ph-lg"></i></template
+			>{{ i18n.ts._plugin.install }}</FormLink
+		>
 
-	<FormSection>
-		<template #label>{{ i18n.ts.manage }}</template>
-		<div v-for="plugin in plugins" :key="plugin.id" class="_formBlock _panel" style="padding: 20px;">
-			<span style="display: flex;"><b>{{ plugin.name }}</b><span style="margin-left: auto;">v{{ plugin.version }}</span></span>
+		<FormSection>
+			<template #label>{{ i18n.ts.manage }}</template>
+			<div
+				v-for="plugin in plugins"
+				:key="plugin.id"
+				class="_formBlock _panel"
+				style="padding: 20px"
+			>
+				<span style="display: flex"
+					><b>{{ plugin.name }}</b
+					><span style="margin-left: auto"
+						>v{{ plugin.version }}</span
+					></span
+				>
 
-			<FormSwitch class="_formBlock" :model-value="plugin.active" @update:modelValue="changeActive(plugin, $event)">{{ i18n.ts.makeActive }}</FormSwitch>
+				<FormSwitch
+					class="_formBlock"
+					:model-value="plugin.active"
+					@update:modelValue="changeActive(plugin, $event)"
+					>{{ i18n.ts.makeActive }}</FormSwitch
+				>
 
-			<MkKeyValue class="_formBlock">
-				<template #key>{{ i18n.ts.author }}</template>
-				<template #value>{{ plugin.author }}</template>
-			</MkKeyValue>
-			<MkKeyValue class="_formBlock">
-				<template #key>{{ i18n.ts.description }}</template>
-				<template #value>{{ plugin.description }}</template>
-			</MkKeyValue>
-			<MkKeyValue class="_formBlock">
-				<template #key>{{ i18n.ts.permission }}</template>
-				<template #value>{{ plugin.permission }}</template>
-			</MkKeyValue>
+				<MkKeyValue class="_formBlock">
+					<template #key>{{ i18n.ts.author }}</template>
+					<template #value>{{ plugin.author }}</template>
+				</MkKeyValue>
+				<MkKeyValue class="_formBlock">
+					<template #key>{{ i18n.ts.description }}</template>
+					<template #value>{{ plugin.description }}</template>
+				</MkKeyValue>
+				<MkKeyValue class="_formBlock">
+					<template #key>{{ i18n.ts.permission }}</template>
+					<template #value>{{ plugin.permission }}</template>
+				</MkKeyValue>
 
-			<div style="display: flex; gap: var(--margin); flex-wrap: wrap;">
-				<MkButton v-if="plugin.config" inline @click="config(plugin)"><i class="ph-gear-six ph-bold ph-lg"></i> {{ i18n.ts.settings }}</MkButton>
-				<MkButton inline danger @click="uninstall(plugin)"><i class="ph-trash ph-bold ph-lg"></i> {{ i18n.ts.uninstall }}</MkButton>
+				<div style="display: flex; gap: var(--margin); flex-wrap: wrap">
+					<MkButton
+						v-if="plugin.config"
+						inline
+						@click="config(plugin)"
+						><i class="ph-gear-six ph-bold ph-lg"></i>
+						{{ i18n.ts.settings }}</MkButton
+					>
+					<MkButton inline danger @click="uninstall(plugin)"
+						><i class="ph-trash ph-bold ph-lg"></i>
+						{{ i18n.ts.uninstall }}</MkButton
+					>
+				</div>
 			</div>
-		</div>
-	</FormSection>
-</div>
+		</FormSection>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { nextTick, ref } from 'vue';
-import FormLink from '@/components/form/link.vue';
-import FormSwitch from '@/components/form/switch.vue';
-import FormSection from '@/components/form/section.vue';
-import MkButton from '@/components/MkButton.vue';
-import MkKeyValue from '@/components/MkKeyValue.vue';
-import * as os from '@/os';
-import { ColdDeviceStorage } from '@/store';
-import { unisonReload } from '@/scripts/unison-reload';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import { nextTick, ref } from "vue";
+import FormLink from "@/components/form/link.vue";
+import FormSwitch from "@/components/form/switch.vue";
+import FormSection from "@/components/form/section.vue";
+import MkButton from "@/components/MkButton.vue";
+import MkKeyValue from "@/components/MkKeyValue.vue";
+import * as os from "@/os";
+import { ColdDeviceStorage } from "@/store";
+import { unisonReload } from "@/scripts/unison-reload";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
-const plugins = ref(ColdDeviceStorage.get('plugins'));
+const plugins = ref(ColdDeviceStorage.get("plugins"));
 
 function uninstall(plugin) {
-	ColdDeviceStorage.set('plugins', plugins.value.filter(x => x.id !== plugin.id));
+	ColdDeviceStorage.set(
+		"plugins",
+		plugins.value.filter((x) => x.id !== plugin.id)
+	);
 	os.success();
 	nextTick(() => {
 		unisonReload();
@@ -64,9 +95,9 @@ async function config(plugin) {
 	const { canceled, result } = await os.form(plugin.name, config);
 	if (canceled) return;
 
-	const coldPlugins = ColdDeviceStorage.get('plugins');
-	coldPlugins.find(p => p.id === plugin.id)!.configData = result;
-	ColdDeviceStorage.set('plugins', coldPlugins);
+	const coldPlugins = ColdDeviceStorage.get("plugins");
+	coldPlugins.find((p) => p.id === plugin.id)!.configData = result;
+	ColdDeviceStorage.set("plugins", coldPlugins);
 
 	nextTick(() => {
 		location.reload();
@@ -74,9 +105,9 @@ async function config(plugin) {
 }
 
 function changeActive(plugin, active) {
-	const coldPlugins = ColdDeviceStorage.get('plugins');
-	coldPlugins.find(p => p.id === plugin.id)!.active = active;
-	ColdDeviceStorage.set('plugins', coldPlugins);
+	const coldPlugins = ColdDeviceStorage.get("plugins");
+	coldPlugins.find((p) => p.id === plugin.id)!.active = active;
+	ColdDeviceStorage.set("plugins", coldPlugins);
 
 	nextTick(() => {
 		location.reload();
@@ -89,10 +120,8 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.plugins,
-	icon: 'ph-plug ph-bold ph-lg',
+	icon: "ph-plug ph-bold ph-lg",
 });
 </script>
 
-<style lang="scss" scoped>
-
-</style>
+<style lang="scss" scoped></style>
diff --git a/packages/client/src/pages/settings/preferences-backups.vue b/packages/client/src/pages/settings/preferences-backups.vue
index b9bc979f73..b58a425973 100644
--- a/packages/client/src/pages/settings/preferences-backups.vue
+++ b/packages/client/src/pages/settings/preferences-backups.vue
@@ -1,113 +1,145 @@
 <template>
-<div class="_formRoot">
-	<div :class="$style.buttons">
-		<MkButton inline primary @click="saveNew">{{ ts._preferencesBackups.saveNew }}</MkButton>
-		<MkButton inline @click="loadFile">{{ ts._preferencesBackups.loadFile }}</MkButton>
-	</div>
-
-	<FormSection>
-		<template #label>{{ ts._preferencesBackups.list }}</template>
-		<template v-if="profiles && Object.keys(profiles).length > 0">
-			<div
-				v-for="(profile, id) in profiles"
-				:key="id"
-				class="_formBlock _panel"
-				:class="$style.profile"
-				@click="$event => menu($event, id)"
-				@contextmenu.prevent.stop="$event => menu($event, id)"
-			>
-				<div :class="$style.profileName">{{ profile.name }}</div>
-				<div :class="$style.profileTime">{{ t('_preferencesBackups.createdAt', { date: (new Date(profile.createdAt)).toLocaleDateString(), time: (new Date(profile.createdAt)).toLocaleTimeString() }) }}</div>
-				<div v-if="profile.updatedAt" :class="$style.profileTime">{{ t('_preferencesBackups.updatedAt', { date: (new Date(profile.updatedAt)).toLocaleDateString(), time: (new Date(profile.updatedAt)).toLocaleTimeString() }) }}</div>
-			</div>
-		</template>
-		<div v-else-if="profiles">
-			<MkInfo>{{ ts._preferencesBackups.noBackups }}</MkInfo>
+	<div class="_formRoot">
+		<div :class="$style.buttons">
+			<MkButton inline primary @click="saveNew">{{
+				ts._preferencesBackups.saveNew
+			}}</MkButton>
+			<MkButton inline @click="loadFile">{{
+				ts._preferencesBackups.loadFile
+			}}</MkButton>
 		</div>
-		<MkLoading v-else/>
-	</FormSection>
-</div>
+
+		<FormSection>
+			<template #label>{{ ts._preferencesBackups.list }}</template>
+			<template v-if="profiles && Object.keys(profiles).length > 0">
+				<div
+					v-for="(profile, id) in profiles"
+					:key="id"
+					class="_formBlock _panel"
+					:class="$style.profile"
+					@click="($event) => menu($event, id)"
+					@contextmenu.prevent.stop="($event) => menu($event, id)"
+				>
+					<div :class="$style.profileName">{{ profile.name }}</div>
+					<div :class="$style.profileTime">
+						{{
+							t("_preferencesBackups.createdAt", {
+								date: new Date(
+									profile.createdAt
+								).toLocaleDateString(),
+								time: new Date(
+									profile.createdAt
+								).toLocaleTimeString(),
+							})
+						}}
+					</div>
+					<div v-if="profile.updatedAt" :class="$style.profileTime">
+						{{
+							t("_preferencesBackups.updatedAt", {
+								date: new Date(
+									profile.updatedAt
+								).toLocaleDateString(),
+								time: new Date(
+									profile.updatedAt
+								).toLocaleTimeString(),
+							})
+						}}
+					</div>
+				</div>
+			</template>
+			<div v-else-if="profiles">
+				<MkInfo>{{ ts._preferencesBackups.noBackups }}</MkInfo>
+			</div>
+			<MkLoading v-else />
+		</FormSection>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted, onUnmounted, useCssModule } from 'vue';
-import { v4 as uuid } from 'uuid';
-import FormSection from '@/components/form/section.vue';
-import MkButton from '@/components/MkButton.vue';
-import MkInfo from '@/components/MkInfo.vue';
-import * as os from '@/os';
-import { ColdDeviceStorage, defaultStore } from '@/store';
-import { unisonReload } from '@/scripts/unison-reload';
-import { stream } from '@/stream';
-import { $i } from '@/account';
-import { i18n } from '@/i18n';
-import { version, host } from '@/config';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import { computed, onMounted, onUnmounted, useCssModule } from "vue";
+import { v4 as uuid } from "uuid";
+import FormSection from "@/components/form/section.vue";
+import MkButton from "@/components/MkButton.vue";
+import MkInfo from "@/components/MkInfo.vue";
+import * as os from "@/os";
+import { ColdDeviceStorage, defaultStore } from "@/store";
+import { unisonReload } from "@/scripts/unison-reload";
+import { stream } from "@/stream";
+import { $i } from "@/account";
+import { i18n } from "@/i18n";
+import { version, host } from "@/config";
+import { definePageMetadata } from "@/scripts/page-metadata";
 const { t, ts } = i18n;
 
 useCssModule();
 
-const defaultStoreSaveKeys: (keyof typeof defaultStore['state'])[] = [
-	'menu',
-	'visibility',
-	'localOnly',
-	'statusbars',
-	'widgets',
-	'tl',
-	'overridedDeviceKind',
-	'showLocalPostsInTimeline',
-	'serverDisconnectedBehavior',
-	'nsfw',
-	'showAds',
-	'animation',
-	'animatedMfm',
-	'loadRawImages',
-	'imageNewTab',
-	'disableShowingAnimatedImages',
-	'disablePagesScript',
-	'enterSendsMessage',
-	'useOsNativeEmojis',
-	'disableDrawer',
-	'useBlurEffectForModal',
-	'useBlurEffect',
-	'showFixedPostForm',
-	'enableInfiniteScroll',
-	'useReactionPickerForContextMenu',
-	'showGapBetweenNotesInTimeline',
-	'instanceTicker',
-	'reactionPickerSize',
-	'reactionPickerWidth',
-	'reactionPickerHeight',
-	'reactionPickerUseDrawerForMobile',
-	'defaultSideView',
-	'menuDisplay',
-	'reportError',
-	'squareAvatars',
-	'numberOfPageCache',
-	'showUpdates',
-	'swipeOnDesktop',
-	'showAdminUpdates',
-	'enableCustomKaTeXMacro',
+const defaultStoreSaveKeys: (keyof (typeof defaultStore)["state"])[] = [
+	"menu",
+	"visibility",
+	"localOnly",
+	"statusbars",
+	"widgets",
+	"tl",
+	"overridedDeviceKind",
+	"showLocalPostsInTimeline",
+	"serverDisconnectedBehavior",
+	"nsfw",
+	"showAds",
+	"animation",
+	"animatedMfm",
+	"loadRawImages",
+	"imageNewTab",
+	"disableShowingAnimatedImages",
+	"disablePagesScript",
+	"enterSendsMessage",
+	"useOsNativeEmojis",
+	"disableDrawer",
+	"useBlurEffectForModal",
+	"useBlurEffect",
+	"showFixedPostForm",
+	"enableInfiniteScroll",
+	"useReactionPickerForContextMenu",
+	"showGapBetweenNotesInTimeline",
+	"instanceTicker",
+	"reactionPickerSize",
+	"reactionPickerWidth",
+	"reactionPickerHeight",
+	"reactionPickerUseDrawerForMobile",
+	"defaultSideView",
+	"menuDisplay",
+	"reportError",
+	"squareAvatars",
+	"numberOfPageCache",
+	"showUpdates",
+	"swipeOnDesktop",
+	"showAdminUpdates",
+	"enableCustomKaTeXMacro",
 ];
 const coldDeviceStorageSaveKeys: (keyof typeof ColdDeviceStorage.default)[] = [
-	'lightTheme',
-	'darkTheme',
-	'syncDeviceDarkMode',
-	'plugins',
-	'mediaVolume',
-	'sound_masterVolume',
-	'sound_note',
-	'sound_noteMy',
-	'sound_notification',
-	'sound_chat',
-	'sound_chatBg',
-	'sound_antenna',
-	'sound_channel',
+	"lightTheme",
+	"darkTheme",
+	"syncDeviceDarkMode",
+	"plugins",
+	"mediaVolume",
+	"sound_masterVolume",
+	"sound_note",
+	"sound_noteMy",
+	"sound_notification",
+	"sound_chat",
+	"sound_chatBg",
+	"sound_antenna",
+	"sound_channel",
 ];
 
-const scope = ['clientPreferencesProfiles'];
+const scope = ["clientPreferencesProfiles"];
 
-const profileProps = ['name', 'createdAt', 'updatedAt', 'misskeyVersion', 'settings'];
+const profileProps = [
+	"name",
+	"createdAt",
+	"updatedAt",
+	"misskeyVersion",
+	"settings",
+];
 
 type Profile = {
 	name: string;
@@ -119,49 +151,54 @@ type Profile = {
 		hot: Record<keyof typeof defaultStoreSaveKeys, unknown>;
 		cold: Record<keyof typeof coldDeviceStorageSaveKeys, unknown>;
 		fontSize: string | null;
-		useSystemFont: 't' | null;
+		useSystemFont: "t" | null;
 		wallpaper: string | null;
 	};
 };
 
-const connection = $i && stream.useChannel('main');
+const connection = $i && stream.useChannel("main");
 
 let profiles = $ref<Record<string, Profile> | null>(null);
 
-os.api('i/registry/get-all', { scope })
-	.then(res => {
-		profiles = res || {};
-	});
+os.api("i/registry/get-all", { scope }).then((res) => {
+	profiles = res || {};
+});
 
 function isObject(value: unknown): value is Record<string, unknown> {
-	return value != null && typeof value === 'object' && !Array.isArray(value);
+	return value != null && typeof value === "object" && !Array.isArray(value);
 }
 
 function validate(profile: unknown): void {
-	if (!isObject(profile)) throw new Error('not an object');
+	if (!isObject(profile)) throw new Error("not an object");
 
 	// Check if unnecessary properties exist
-	if (Object.keys(profile).some(key => !profileProps.includes(key))) throw new Error('Unnecessary properties exist');
+	if (Object.keys(profile).some((key) => !profileProps.includes(key)))
+		throw new Error("Unnecessary properties exist");
+
+	if (!profile.name) throw new Error("Missing required prop: name");
+	if (!profile.misskeyVersion)
+		throw new Error("Missing required prop: misskeyVersion");
 
-	if (!profile.name) throw new Error('Missing required prop: name');
-	if (!profile.misskeyVersion) throw new Error('Missing required prop: misskeyVersion');
-	
 	// Check if createdAt and updatedAt is Date
 	// https://zenn.dev/lollipop_onl/articles/eoz-judge-js-invalid-date
-	if (!profile.createdAt || Number.isNaN(new Date(profile.createdAt).getTime())) throw new Error('createdAt is falsy or not Date');
+	if (
+		!profile.createdAt ||
+		Number.isNaN(new Date(profile.createdAt).getTime())
+	)
+		throw new Error("createdAt is falsy or not Date");
 	if (profile.updatedAt) {
 		if (Number.isNaN(new Date(profile.updatedAt).getTime())) {
-			throw new Error('updatedAt is not Date');
+			throw new Error("updatedAt is not Date");
 		}
 	} else if (profile.updatedAt !== null) {
-		throw new Error('updatedAt is not null');
+		throw new Error("updatedAt is not null");
 	}
 
-	if (!profile.settings) throw new Error('Missing required prop: settings');
-	if (!isObject(profile.settings)) throw new Error('Invalid prop: settings');
+	if (!profile.settings) throw new Error("Missing required prop: settings");
+	if (!isObject(profile.settings)) throw new Error("Invalid prop: settings");
 }
 
-function getSettings(): Profile['settings'] {
+function getSettings(): Profile["settings"] {
 	const hot = {} as Record<keyof typeof defaultStoreSaveKeys, unknown>;
 	for (const key of defaultStoreSaveKeys) {
 		hot[key] = defaultStore.state[key];
@@ -175,9 +212,9 @@ function getSettings(): Profile['settings'] {
 	return {
 		hot,
 		cold,
-		fontSize: localStorage.getItem('fontSize'),
-		useSystemFont: localStorage.getItem('useSystemFont') as 't' | null,
-		wallpaper: localStorage.getItem('wallpaper'),
+		fontSize: localStorage.getItem("fontSize"),
+		useSystemFont: localStorage.getItem("useSystemFont") as "t" | null,
+		wallpaper: localStorage.getItem("wallpaper"),
 	};
 }
 
@@ -189,28 +226,32 @@ async function saveNew(): Promise<void> {
 	});
 	if (canceled) return;
 
-	if (Object.values(profiles).some(x => x.name === name)) {
+	if (Object.values(profiles).some((x) => x.name === name)) {
 		return os.alert({
 			title: ts._preferencesBackups.cannotSave,
-			text: t('_preferencesBackups.nameAlreadyExists', { name }),
+			text: t("_preferencesBackups.nameAlreadyExists", { name }),
 		});
 	}
 
 	const id = uuid();
 	const profile: Profile = {
 		name,
-		createdAt: (new Date()).toISOString(),
+		createdAt: new Date().toISOString(),
 		updatedAt: null,
 		misskeyVersion: version,
 		host,
 		settings: getSettings(),
 	};
-	await os.apiWithDialog('i/registry/set', { scope, key: id, value: profile });
+	await os.apiWithDialog("i/registry/set", {
+		scope,
+		key: id,
+		value: profile,
+	});
 }
 
 function loadFile(): void {
-	const input = document.createElement('input');
-	input.type = 'file';
+	const input = document.createElement("input");
+	input.type = "file";
 	input.multiple = false;
 	input.onchange = async () => {
 		if (!profiles) return;
@@ -218,9 +259,9 @@ function loadFile(): void {
 
 		const file = input.files[0];
 
-		if (file.type !== 'application/json') {
+		if (file.type !== "application/json") {
 			return os.alert({
-				type: 'error',
+				type: "error",
 				title: ts._preferencesBackups.cannotLoad,
 				text: ts._preferencesBackups.invalidFile,
 			});
@@ -232,14 +273,18 @@ function loadFile(): void {
 			validate(profile);
 		} catch (err) {
 			return os.alert({
-				type: 'error',
+				type: "error",
 				title: ts._preferencesBackups.cannotLoad,
 				text: err?.message,
 			});
 		}
 
 		const id = uuid();
-		await os.apiWithDialog('i/registry/set', { scope, key: id, value: profile });
+		await os.apiWithDialog("i/registry/set", {
+			scope,
+			key: id,
+			value: profile,
+		});
 
 		// 一応廃棄
 		(window as any).__misskey_input_ref__ = null;
@@ -258,9 +303,9 @@ async function applyProfile(id: string): Promise<void> {
 	const profile = profiles[id];
 
 	const { canceled: cancel1 } = await os.confirm({
-		type: 'warning',
+		type: "warning",
 		title: ts._preferencesBackups.apply,
-		text: t('_preferencesBackups.applyConfirm', { name: profile.name }),
+		text: t("_preferencesBackups.applyConfirm", { name: profile.name }),
 	});
 	if (cancel1) return;
 
@@ -274,7 +319,7 @@ async function applyProfile(id: string): Promise<void> {
 			defaultStore.set(key, settings.hot[key]);
 		}
 	}
-	
+
 	// coldDeviceStorage
 	for (const key of coldDeviceStorageSaveKeys) {
 		if (settings.cold[key] !== undefined) {
@@ -284,27 +329,27 @@ async function applyProfile(id: string): Promise<void> {
 
 	// fontSize
 	if (settings.fontSize) {
-		localStorage.setItem('fontSize', settings.fontSize);
+		localStorage.setItem("fontSize", settings.fontSize);
 	} else {
-		localStorage.removeItem('fontSize');
+		localStorage.removeItem("fontSize");
 	}
 
 	// useSystemFont
 	if (settings.useSystemFont) {
-		localStorage.setItem('useSystemFont', settings.useSystemFont);
+		localStorage.setItem("useSystemFont", settings.useSystemFont);
 	} else {
-		localStorage.removeItem('useSystemFont');
+		localStorage.removeItem("useSystemFont");
 	}
 
 	// wallpaper
 	if (settings.wallpaper != null) {
-		localStorage.setItem('wallpaper', settings.wallpaper);
+		localStorage.setItem("wallpaper", settings.wallpaper);
 	} else {
-		localStorage.removeItem('wallpaper');
+		localStorage.removeItem("wallpaper");
 	}
 
 	const { canceled: cancel2 } = await os.confirm({
-		type: 'info',
+		type: "info",
 		text: ts.reloadToApplySetting,
 	});
 	if (cancel2) return;
@@ -316,13 +361,13 @@ async function deleteProfile(id: string): Promise<void> {
 	if (!profiles) return;
 
 	const { canceled } = await os.confirm({
-		type: 'info',
+		type: "info",
 		title: ts.delete,
-		text: t('deleteAreYouSure', { x: profiles[id].name }),
+		text: t("deleteAreYouSure", { x: profiles[id].name }),
 	});
 	if (canceled) return;
 
-	await os.apiWithDialog('i/registry/remove', { scope, key: id });
+	await os.apiWithDialog("i/registry/remove", { scope, key: id });
 	delete profiles[id];
 }
 
@@ -332,21 +377,25 @@ async function save(id: string): Promise<void> {
 	const { name, createdAt } = profiles[id];
 
 	const { canceled } = await os.confirm({
-		type: 'info',
+		type: "info",
 		title: ts._preferencesBackups.save,
-		text: t('_preferencesBackups.saveConfirm', { name }),
+		text: t("_preferencesBackups.saveConfirm", { name }),
 	});
 	if (canceled) return;
 
 	const profile: Profile = {
 		name,
 		createdAt,
-		updatedAt: (new Date()).toISOString(),
+		updatedAt: new Date().toISOString(),
 		misskeyVersion: version,
 		host,
 		settings: getSettings(),
 	};
-	await os.apiWithDialog('i/registry/set', { scope, key: id, value: profile });
+	await os.apiWithDialog("i/registry/set", {
+		scope,
+		key: id,
+		value: profile,
+	});
 }
 
 async function rename(id: string): Promise<void> {
@@ -357,74 +406,106 @@ async function rename(id: string): Promise<void> {
 	});
 	if (cancel1 || profiles[id].name === name) return;
 
-	if (Object.values(profiles).some(x => x.name === name)) {
+	if (Object.values(profiles).some((x) => x.name === name)) {
 		return os.alert({
 			title: ts._preferencesBackups.cannotSave,
-			text: t('_preferencesBackups.nameAlreadyExists', { name }),
+			text: t("_preferencesBackups.nameAlreadyExists", { name }),
 		});
 	}
 
 	const registry = Object.assign({}, { ...profiles[id] });
 
 	const { canceled: cancel2 } = await os.confirm({
-		type: 'info',
+		type: "info",
 		title: ts._preferencesBackups.rename,
-		text: t('_preferencesBackups.renameConfirm', { old: registry.name, new: name }),
+		text: t("_preferencesBackups.renameConfirm", {
+			old: registry.name,
+			new: name,
+		}),
 	});
 	if (cancel2) return;
 
 	registry.name = name;
-	await os.apiWithDialog('i/registry/set', { scope, key: id, value: registry });
+	await os.apiWithDialog("i/registry/set", {
+		scope,
+		key: id,
+		value: registry,
+	});
 }
 
 function menu(ev: MouseEvent, profileId: string) {
 	if (!profiles) return;
 
-	return os.popupMenu([{
-		text: ts._preferencesBackups.apply,
-		icon: 'ph-caret-circle-down ph-bold ph-lg',
-		action: () => applyProfile(profileId),
-	}, {
-		type: 'a',
-		text: ts.download,
-		icon: 'ph-download-simple ph-bold ph-lg',
-		href: URL.createObjectURL(new Blob([JSON.stringify(profiles[profileId], null, 2)], { type: 'application/json' })),
-		download: `${profiles[profileId].name}.json`,
-	}, null, {
-		text: ts.rename,
-		icon: 'ph-cursor-text ph-bold ph-lg',
-		action: () => rename(profileId),
-	}, {
-		text: ts._preferencesBackups.save,
-		icon: 'ph-floppy-disk ph-bold ph-lg',
-		action: () => save(profileId),
-	}, null, {
-		text: ts._preferencesBackups.delete,
-		icon: 'ph-trash ph-bold ph-lg',
-		action: () => deleteProfile(profileId),
-		danger: true,
-	}], ev.currentTarget ?? ev.target);
+	return os.popupMenu(
+		[
+			{
+				text: ts._preferencesBackups.apply,
+				icon: "ph-caret-circle-down ph-bold ph-lg",
+				action: () => applyProfile(profileId),
+			},
+			{
+				type: "a",
+				text: ts.download,
+				icon: "ph-download-simple ph-bold ph-lg",
+				href: URL.createObjectURL(
+					new Blob([JSON.stringify(profiles[profileId], null, 2)], {
+						type: "application/json",
+					})
+				),
+				download: `${profiles[profileId].name}.json`,
+			},
+			null,
+			{
+				text: ts.rename,
+				icon: "ph-cursor-text ph-bold ph-lg",
+				action: () => rename(profileId),
+			},
+			{
+				text: ts._preferencesBackups.save,
+				icon: "ph-floppy-disk ph-bold ph-lg",
+				action: () => save(profileId),
+			},
+			null,
+			{
+				text: ts._preferencesBackups.delete,
+				icon: "ph-trash ph-bold ph-lg",
+				action: () => deleteProfile(profileId),
+				danger: true,
+			},
+		],
+		ev.currentTarget ?? ev.target
+	);
 }
 
 onMounted(() => {
 	// streamingのuser storage updateイベントを監視して更新
-	connection?.on('registryUpdated', ({ scope: recievedScope, key, value }) => {
-		if (!recievedScope || recievedScope.length !== scope.length || recievedScope[0] !== scope[0]) return;
-		if (!profiles) return;
+	connection?.on(
+		"registryUpdated",
+		({ scope: recievedScope, key, value }) => {
+			if (
+				!recievedScope ||
+				recievedScope.length !== scope.length ||
+				recievedScope[0] !== scope[0]
+			)
+				return;
+			if (!profiles) return;
 
-		profiles[key] = value;
-	});
+			profiles[key] = value;
+		}
+	);
 });
 
 onUnmounted(() => {
-	connection?.off('registryUpdated');
+	connection?.off("registryUpdated");
 });
 
-definePageMetadata(computed(() => ({
-	title: ts.preferencesBackups,
-	icon: 'ph-floppy-disk ph-bold ph-lg',
-	bg: 'var(--bg)',
-})));
+definePageMetadata(
+	computed(() => ({
+		title: ts.preferencesBackups,
+		icon: "ph-floppy-disk ph-bold ph-lg",
+		bg: "var(--bg)",
+	}))
+);
 </script>
 
 <style lang="scss" module>
@@ -443,8 +524,8 @@ definePageMetadata(computed(() => ({
 	}
 
 	&Time {
-		font-size: .85em;
-		opacity: .7;
+		font-size: 0.85em;
+		opacity: 0.7;
 	}
 }
 </style>
diff --git a/packages/client/src/pages/settings/privacy.vue b/packages/client/src/pages/settings/privacy.vue
index 0a8de0b380..c3ab41a646 100644
--- a/packages/client/src/pages/settings/privacy.vue
+++ b/packages/client/src/pages/settings/privacy.vue
@@ -1,68 +1,142 @@
 <template>
-<div class="_formRoot">
-	<FormSwitch v-model="isLocked" class="_formBlock" @update:modelValue="save()">{{ i18n.ts.makeFollowManuallyApprove }}<template #caption>{{ i18n.ts.lockedAccountInfo }}</template></FormSwitch>
-	<FormSwitch v-if="isLocked" v-model="autoAcceptFollowed" class="_formBlock" @update:modelValue="save()">{{ i18n.ts.autoAcceptFollowed }}</FormSwitch>
+	<div class="_formRoot">
+		<FormSwitch
+			v-model="isLocked"
+			class="_formBlock"
+			@update:modelValue="save()"
+			>{{ i18n.ts.makeFollowManuallyApprove
+			}}<template #caption>{{
+				i18n.ts.lockedAccountInfo
+			}}</template></FormSwitch
+		>
+		<FormSwitch
+			v-if="isLocked"
+			v-model="autoAcceptFollowed"
+			class="_formBlock"
+			@update:modelValue="save()"
+			>{{ i18n.ts.autoAcceptFollowed }}</FormSwitch
+		>
 
-	<FormSwitch v-model="publicReactions" class="_formBlock" @update:modelValue="save()">
-		{{ i18n.ts.makeReactionsPublic }}
-		<template #caption>{{ i18n.ts.makeReactionsPublicDescription }}</template>
-	</FormSwitch>
+		<FormSwitch
+			v-model="publicReactions"
+			class="_formBlock"
+			@update:modelValue="save()"
+		>
+			{{ i18n.ts.makeReactionsPublic }}
+			<template #caption>{{
+				i18n.ts.makeReactionsPublicDescription
+			}}</template>
+		</FormSwitch>
 
-	<FormSelect v-model="ffVisibility" class="_formBlock" @update:modelValue="save()">
-		<template #label>{{ i18n.ts.ffVisibility }}</template>
-		<option value="public">{{ i18n.ts._ffVisibility.public }}</option>
-		<option value="followers">{{ i18n.ts._ffVisibility.followers }}</option>
-		<option value="private">{{ i18n.ts._ffVisibility.private }}</option>
-		<template #caption>{{ i18n.ts.ffVisibilityDescription }}</template>
-	</FormSelect>
+		<FormSelect
+			v-model="ffVisibility"
+			class="_formBlock"
+			@update:modelValue="save()"
+		>
+			<template #label>{{ i18n.ts.ffVisibility }}</template>
+			<option value="public">{{ i18n.ts._ffVisibility.public }}</option>
+			<option value="followers">
+				{{ i18n.ts._ffVisibility.followers }}
+			</option>
+			<option value="private">{{ i18n.ts._ffVisibility.private }}</option>
+			<template #caption>{{ i18n.ts.ffVisibilityDescription }}</template>
+		</FormSelect>
 
-	<FormSwitch v-model="hideOnlineStatus" class="_formBlock" @update:modelValue="save()">
-		{{ i18n.ts.hideOnlineStatus }}
-		<template #caption>{{ i18n.ts.hideOnlineStatusDescription }}</template>
-	</FormSwitch>
-	<FormSwitch v-model="noCrawle" class="_formBlock" @update:modelValue="save()">
-		{{ i18n.ts.noCrawle }}
-		<template #caption>{{ i18n.ts.noCrawleDescription }}</template>
-	</FormSwitch>
-	<FormSwitch v-model="isExplorable" class="_formBlock" @update:modelValue="save()">
-		{{ i18n.ts.makeExplorable }}
-		<template #caption>{{ i18n.ts.makeExplorableDescription }}</template>
-	</FormSwitch>
+		<FormSwitch
+			v-model="hideOnlineStatus"
+			class="_formBlock"
+			@update:modelValue="save()"
+		>
+			{{ i18n.ts.hideOnlineStatus }}
+			<template #caption>{{
+				i18n.ts.hideOnlineStatusDescription
+			}}</template>
+		</FormSwitch>
+		<FormSwitch
+			v-model="noCrawle"
+			class="_formBlock"
+			@update:modelValue="save()"
+		>
+			{{ i18n.ts.noCrawle }}
+			<template #caption>{{ i18n.ts.noCrawleDescription }}</template>
+		</FormSwitch>
+		<FormSwitch
+			v-model="isExplorable"
+			class="_formBlock"
+			@update:modelValue="save()"
+		>
+			{{ i18n.ts.makeExplorable }}
+			<template #caption>{{
+				i18n.ts.makeExplorableDescription
+			}}</template>
+		</FormSwitch>
 
-	<FormSection>
-		<FormSwitch v-model="rememberNoteVisibility" class="_formBlock" @update:modelValue="save()">{{ i18n.ts.rememberNoteVisibility }}</FormSwitch>
-		<FormFolder v-if="!rememberNoteVisibility" class="_formBlock">
-			<template #label>{{ i18n.ts.defaultNoteVisibility }}</template>
-			<template v-if="defaultNoteVisibility === 'public'" #suffix>{{ i18n.ts._visibility.public }}</template>
-			<template v-else-if="defaultNoteVisibility === 'home'" #suffix>{{ i18n.ts._visibility.home }}</template>
-			<template v-else-if="defaultNoteVisibility === 'followers'" #suffix>{{ i18n.ts._visibility.followers }}</template>
-			<template v-else-if="defaultNoteVisibility === 'specified'" #suffix>{{ i18n.ts._visibility.specified }}</template>
+		<FormSection>
+			<FormSwitch
+				v-model="rememberNoteVisibility"
+				class="_formBlock"
+				@update:modelValue="save()"
+				>{{ i18n.ts.rememberNoteVisibility }}</FormSwitch
+			>
+			<FormFolder v-if="!rememberNoteVisibility" class="_formBlock">
+				<template #label>{{ i18n.ts.defaultNoteVisibility }}</template>
+				<template v-if="defaultNoteVisibility === 'public'" #suffix>{{
+					i18n.ts._visibility.public
+				}}</template>
+				<template
+					v-else-if="defaultNoteVisibility === 'home'"
+					#suffix
+					>{{ i18n.ts._visibility.home }}</template
+				>
+				<template
+					v-else-if="defaultNoteVisibility === 'followers'"
+					#suffix
+					>{{ i18n.ts._visibility.followers }}</template
+				>
+				<template
+					v-else-if="defaultNoteVisibility === 'specified'"
+					#suffix
+					>{{ i18n.ts._visibility.specified }}</template
+				>
 
-			<FormSelect v-model="defaultNoteVisibility" class="_formBlock">
-				<option value="public">{{ i18n.ts._visibility.public }}</option>
-				<option value="home">{{ i18n.ts._visibility.home }}</option>
-				<option value="followers">{{ i18n.ts._visibility.followers }}</option>
-				<option value="specified">{{ i18n.ts._visibility.specified }}</option>
-			</FormSelect>
-			<FormSwitch v-model="defaultNoteLocalOnly" class="_formBlock">{{ i18n.ts._visibility.localOnly }}</FormSwitch>
-		</FormFolder>
-	</FormSection>
+				<FormSelect v-model="defaultNoteVisibility" class="_formBlock">
+					<option value="public">
+						{{ i18n.ts._visibility.public }}
+					</option>
+					<option value="home">{{ i18n.ts._visibility.home }}</option>
+					<option value="followers">
+						{{ i18n.ts._visibility.followers }}
+					</option>
+					<option value="specified">
+						{{ i18n.ts._visibility.specified }}
+					</option>
+				</FormSelect>
+				<FormSwitch v-model="defaultNoteLocalOnly" class="_formBlock">{{
+					i18n.ts._visibility.localOnly
+				}}</FormSwitch>
+			</FormFolder>
+		</FormSection>
 
-	<FormSwitch v-model="keepCw" class="_formBlock" @update:modelValue="save()">{{ i18n.ts.keepCw }}</FormSwitch>
-</div>
+		<FormSwitch
+			v-model="keepCw"
+			class="_formBlock"
+			@update:modelValue="save()"
+			>{{ i18n.ts.keepCw }}</FormSwitch
+		>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import FormSwitch from '@/components/form/switch.vue';
-import FormSelect from '@/components/form/select.vue';
-import FormSection from '@/components/form/section.vue';
-import FormFolder from '@/components/form/folder.vue';
-import * as os from '@/os';
-import { defaultStore } from '@/store';
-import { i18n } from '@/i18n';
-import { $i } from '@/account';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import {} from "vue";
+import FormSwitch from "@/components/form/switch.vue";
+import FormSelect from "@/components/form/select.vue";
+import FormSection from "@/components/form/section.vue";
+import FormFolder from "@/components/form/folder.vue";
+import * as os from "@/os";
+import { defaultStore } from "@/store";
+import { i18n } from "@/i18n";
+import { $i } from "@/account";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
 let isLocked = $ref($i.isLocked);
 let autoAcceptFollowed = $ref($i.autoAcceptFollowed);
@@ -72,13 +146,19 @@ let hideOnlineStatus = $ref($i.hideOnlineStatus);
 let publicReactions = $ref($i.publicReactions);
 let ffVisibility = $ref($i.ffVisibility);
 
-let defaultNoteVisibility = $computed(defaultStore.makeGetterSetter('defaultNoteVisibility'));
-let defaultNoteLocalOnly = $computed(defaultStore.makeGetterSetter('defaultNoteLocalOnly'));
-let rememberNoteVisibility = $computed(defaultStore.makeGetterSetter('rememberNoteVisibility'));
-let keepCw = $computed(defaultStore.makeGetterSetter('keepCw'));
+let defaultNoteVisibility = $computed(
+	defaultStore.makeGetterSetter("defaultNoteVisibility")
+);
+let defaultNoteLocalOnly = $computed(
+	defaultStore.makeGetterSetter("defaultNoteLocalOnly")
+);
+let rememberNoteVisibility = $computed(
+	defaultStore.makeGetterSetter("rememberNoteVisibility")
+);
+let keepCw = $computed(defaultStore.makeGetterSetter("keepCw"));
 
 function save() {
-	os.api('i/update', {
+	os.api("i/update", {
 		isLocked: !!isLocked,
 		autoAcceptFollowed: !!autoAcceptFollowed,
 		noCrawle: !!noCrawle,
@@ -95,6 +175,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.privacy,
-	icon: 'ph-lock-open ph-bold ph-lg',
+	icon: "ph-lock-open ph-bold ph-lg",
 });
 </script>
diff --git a/packages/client/src/pages/settings/profile.vue b/packages/client/src/pages/settings/profile.vue
index 4e51a339b7..83062144c0 100644
--- a/packages/client/src/pages/settings/profile.vue
+++ b/packages/client/src/pages/settings/profile.vue
@@ -1,89 +1,185 @@
 <template>
-<div class="_formRoot">
-	<div v-if="saveButton == true">
-		<MkButton primary @click="save">{{ i18n.ts.save }}</MkButton>
-	</div>
-	<br/>
-	<div class="llvierxe" :style="{ backgroundImage: $i.bannerUrl ? `url(${ $i.bannerUrl })` : null }">
-		<div class="avatar">
-			<MkAvatar class="avatar" :user="$i" :disable-link="true" @click="changeAvatar"/>
-			<MkButton primary rounded class="avatarEdit" @click="changeAvatar">{{ i18n.ts._profile.changeAvatar }}</MkButton>
+	<div class="_formRoot">
+		<div v-if="saveButton == true">
+			<MkButton primary @click="save">{{ i18n.ts.save }}</MkButton>
 		</div>
-		<MkButton primary rounded class="bannerEdit" @click="changeBanner">{{ i18n.ts._profile.changeBanner }}</MkButton>
-	</div>
-
-	<FormInput v-model="profile.name" :max="30" manual-save class="_formBlock">
-		<template #label>{{ i18n.ts._profile.name }}</template>
-	</FormInput>
-
-	<FormTextarea v-model="profile.description" :max="500" tall manual-save class="_formBlock">
-		<template #label>{{ i18n.ts._profile.description }}</template>
-		<template #caption>{{ i18n.ts._profile.youCanIncludeHashtags }}</template>
-	</FormTextarea>
-
-	<FormInput v-model="profile.location" manual-save class="_formBlock">
-		<template #label>{{ i18n.ts.location }}</template>
-		<template #prefix><i class="ph-map-pin ph-bold ph-lg"></i></template>
-		<template #caption>{{ i18n.ts._profile.locationDescription }}</template>
-	</FormInput>
-
-	<FormInput v-model="profile.birthday" type="date" manual-save class="_formBlock">
-		<template #label>{{ i18n.ts.birthday }}</template>
-		<template #prefix><i class="ph-cake ph-bold ph-lg"></i></template>
-	</FormInput>
-
-	<FormSelect v-model="profile.lang" class="_formBlock">
-		<template #label>{{ i18n.ts.language }}</template>
-		<option v-for="x in Object.keys(langmap)" :key="x" :value="x">{{ langmap[x].nativeName }}</option>
-	</FormSelect>
-
-	<FormSlot class="_formBlock">
-		<FormFolder>
-			<template #icon><i class="ph-table ph-bold ph-lg"></i></template>
-			<template #label>{{ i18n.ts._profile.metadataEdit }}</template>
-
-			<div class="_formRoot">
-				<FormSplit v-for="(record, i) in fields" :min-width="250" class="_formBlock">
-					<FormInput v-model="record.name" small>
-						<template #label>{{ i18n.ts._profile.metadataLabel }} #{{ i + 1 }}</template>
-					</FormInput>
-					<FormInput v-model="record.value" small>
-						<template #label>{{ i18n.ts._profile.metadataContent }} #{{ i + 1 }}</template>
-					</FormInput>
-				</FormSplit>
-				<MkButton :disabled="fields.length >= 16" inline style="margin-right: 8px;" @click="addField"><i class="ph-plus ph-bold ph-lg"></i> {{ i18n.ts.add }}</MkButton>
-				<MkButton inline primary @click="saveFields"><i class="ph-check ph-bold ph-lg"></i> {{ i18n.ts.save }}</MkButton>
+		<br />
+		<div
+			class="llvierxe"
+			:style="{
+				backgroundImage: $i.bannerUrl ? `url(${$i.bannerUrl})` : null,
+			}"
+		>
+			<div class="avatar">
+				<MkAvatar
+					class="avatar"
+					:user="$i"
+					:disable-link="true"
+					@click="changeAvatar"
+				/>
+				<MkButton
+					primary
+					rounded
+					class="avatarEdit"
+					@click="changeAvatar"
+					>{{ i18n.ts._profile.changeAvatar }}</MkButton
+				>
 			</div>
-		</FormFolder>
-		<template #caption>{{ i18n.ts._profile.metadataDescription }}</template>
-	</FormSlot>
+			<MkButton
+				primary
+				rounded
+				class="bannerEdit"
+				@click="changeBanner"
+				>{{ i18n.ts._profile.changeBanner }}</MkButton
+			>
+		</div>
 
-	<FormSwitch v-model="profile.isCat" class="_formBlock">{{ i18n.ts.flagAsCat }}<template #caption>{{ i18n.ts.flagAsCatDescription }}</template></FormSwitch>
-	<FormSwitch v-if="profile.isCat" v-model="profile.speakAsCat" class="_formBlock">{{ i18n.ts.flagSpeakAsCat }}<template #caption>{{ i18n.ts.flagSpeakAsCatDescription }}</template></FormSwitch>
-	<FormSwitch v-model="profile.showTimelineReplies" class="_formBlock">{{ i18n.ts.flagShowTimelineReplies }}<template #caption>{{ i18n.ts.flagShowTimelineRepliesDescription }} {{ i18n.ts.reflectMayTakeTime }}</template></FormSwitch>
-	<FormSwitch v-model="profile.isBot" class="_formBlock">{{ i18n.ts.flagAsBot }}<template #caption>{{ i18n.ts.flagAsBotDescription }}</template></FormSwitch>
-	<div v-if="saveButton == true">
-		<MkButton primary @click="save">{{ i18n.ts.save }}</MkButton>
+		<FormInput
+			v-model="profile.name"
+			:max="30"
+			manual-save
+			class="_formBlock"
+		>
+			<template #label>{{ i18n.ts._profile.name }}</template>
+		</FormInput>
+
+		<FormTextarea
+			v-model="profile.description"
+			:max="500"
+			tall
+			manual-save
+			class="_formBlock"
+		>
+			<template #label>{{ i18n.ts._profile.description }}</template>
+			<template #caption>{{
+				i18n.ts._profile.youCanIncludeHashtags
+			}}</template>
+		</FormTextarea>
+
+		<FormInput v-model="profile.location" manual-save class="_formBlock">
+			<template #label>{{ i18n.ts.location }}</template>
+			<template #prefix
+				><i class="ph-map-pin ph-bold ph-lg"></i
+			></template>
+			<template #caption>{{
+				i18n.ts._profile.locationDescription
+			}}</template>
+		</FormInput>
+
+		<FormInput
+			v-model="profile.birthday"
+			type="date"
+			manual-save
+			class="_formBlock"
+		>
+			<template #label>{{ i18n.ts.birthday }}</template>
+			<template #prefix><i class="ph-cake ph-bold ph-lg"></i></template>
+		</FormInput>
+
+		<FormSelect v-model="profile.lang" class="_formBlock">
+			<template #label>{{ i18n.ts.language }}</template>
+			<option v-for="x in Object.keys(langmap)" :key="x" :value="x">
+				{{ langmap[x].nativeName }}
+			</option>
+		</FormSelect>
+
+		<FormSlot class="_formBlock">
+			<FormFolder>
+				<template #icon
+					><i class="ph-table ph-bold ph-lg"></i
+				></template>
+				<template #label>{{ i18n.ts._profile.metadataEdit }}</template>
+
+				<div class="_formRoot">
+					<FormSplit
+						v-for="(record, i) in fields"
+						:min-width="250"
+						class="_formBlock"
+					>
+						<FormInput v-model="record.name" small>
+							<template #label
+								>{{ i18n.ts._profile.metadataLabel }} #{{
+									i + 1
+								}}</template
+							>
+						</FormInput>
+						<FormInput v-model="record.value" small>
+							<template #label
+								>{{ i18n.ts._profile.metadataContent }} #{{
+									i + 1
+								}}</template
+							>
+						</FormInput>
+					</FormSplit>
+					<MkButton
+						:disabled="fields.length >= 16"
+						inline
+						style="margin-right: 8px"
+						@click="addField"
+						><i class="ph-plus ph-bold ph-lg"></i>
+						{{ i18n.ts.add }}</MkButton
+					>
+					<MkButton inline primary @click="saveFields"
+						><i class="ph-check ph-bold ph-lg"></i>
+						{{ i18n.ts.save }}</MkButton
+					>
+				</div>
+			</FormFolder>
+			<template #caption>{{
+				i18n.ts._profile.metadataDescription
+			}}</template>
+		</FormSlot>
+
+		<FormSwitch v-model="profile.isCat" class="_formBlock"
+			>{{ i18n.ts.flagAsCat
+			}}<template #caption>{{
+				i18n.ts.flagAsCatDescription
+			}}</template></FormSwitch
+		>
+		<FormSwitch
+			v-if="profile.isCat"
+			v-model="profile.speakAsCat"
+			class="_formBlock"
+			>{{ i18n.ts.flagSpeakAsCat
+			}}<template #caption>{{
+				i18n.ts.flagSpeakAsCatDescription
+			}}</template></FormSwitch
+		>
+		<FormSwitch v-model="profile.showTimelineReplies" class="_formBlock"
+			>{{ i18n.ts.flagShowTimelineReplies
+			}}<template #caption
+				>{{ i18n.ts.flagShowTimelineRepliesDescription }}
+				{{ i18n.ts.reflectMayTakeTime }}</template
+			></FormSwitch
+		>
+		<FormSwitch v-model="profile.isBot" class="_formBlock"
+			>{{ i18n.ts.flagAsBot
+			}}<template #caption>{{
+				i18n.ts.flagAsBotDescription
+			}}</template></FormSwitch
+		>
+		<div v-if="saveButton == true">
+			<MkButton primary @click="save">{{ i18n.ts.save }}</MkButton>
+		</div>
 	</div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { reactive, watch } from 'vue';
-import MkButton from '@/components/MkButton.vue';
-import FormInput from '@/components/form/input.vue';
-import FormTextarea from '@/components/form/textarea.vue';
-import FormSwitch from '@/components/form/switch.vue';
-import FormSelect from '@/components/form/select.vue';
-import FormSplit from '@/components/form/split.vue';
-import FormFolder from '@/components/form/folder.vue';
-import FormSlot from '@/components/form/slot.vue';
-import { selectFile } from '@/scripts/select-file';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { $i } from '@/account';
-import { langmap } from '@/scripts/langmap';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import { reactive, watch } from "vue";
+import MkButton from "@/components/MkButton.vue";
+import FormInput from "@/components/form/input.vue";
+import FormTextarea from "@/components/form/textarea.vue";
+import FormSwitch from "@/components/form/switch.vue";
+import FormSelect from "@/components/form/select.vue";
+import FormSplit from "@/components/form/split.vue";
+import FormFolder from "@/components/form/folder.vue";
+import FormSlot from "@/components/form/slot.vue";
+import { selectFile } from "@/scripts/select-file";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
+import { $i } from "@/account";
+import { langmap } from "@/scripts/langmap";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
 const profile = reactive({
 	name: $i?.name,
@@ -97,24 +193,33 @@ const profile = reactive({
 	showTimelineReplies: $i?.showTimelineReplies,
 });
 
-const props = withDefaults(defineProps<{
-	saveButton?: boolean,
-}>(), {});
+const props = withDefaults(
+	defineProps<{
+		saveButton?: boolean;
+	}>(),
+	{}
+);
 
 let saveButton = $ref(props.saveButton ?? false);
 
-watch(() => profile, () => {
-	save();
-}, {
-	deep: true,
-});
+watch(
+	() => profile,
+	() => {
+		save();
+	},
+	{
+		deep: true,
+	}
+);
 
-const fields = reactive($i.fields.map(field => ({ name: field.name, value: field.value })));
+const fields = reactive(
+	$i.fields.map((field) => ({ name: field.name, value: field.value }))
+);
 
 function addField() {
 	fields.push({
-		name: '',
-		value: '',
+		name: "",
+		value: "",
 	});
 }
 
@@ -123,13 +228,15 @@ while (fields.length < 4) {
 }
 
 function saveFields() {
-	os.apiWithDialog('i/update', {
-		fields: fields.filter(field => field.name !== '' && field.value !== ''),
+	os.apiWithDialog("i/update", {
+		fields: fields.filter(
+			(field) => field.name !== "" && field.value !== ""
+		),
 	});
 }
 
 function save() {
-	os.apiWithDialog('i/update', {
+	os.apiWithDialog("i/update", {
 		name: profile.name || null,
 		description: profile.description || null,
 		location: profile.location || null,
@@ -143,49 +250,53 @@ function save() {
 }
 
 function changeAvatar(ev) {
-	selectFile(ev.currentTarget ?? ev.target, i18n.ts.avatar).then(async (file) => {
-		let originalOrCropped = file;
+	selectFile(ev.currentTarget ?? ev.target, i18n.ts.avatar).then(
+		async (file) => {
+			let originalOrCropped = file;
 
-		const { canceled } = await os.yesno({
-			type: 'question',
-			text: i18n.t('cropImageAsk'),
-		});
-
-		if (!canceled) {
-			originalOrCropped = await os.cropImage(file, {
-				aspectRatio: 1,
+			const { canceled } = await os.yesno({
+				type: "question",
+				text: i18n.t("cropImageAsk"),
 			});
-		}
 
-		const i = await os.apiWithDialog('i/update', {
-			avatarId: originalOrCropped.id,
-		});
-		$i.avatarId = i.avatarId;
-		$i.avatarUrl = i.avatarUrl;
-	});
+			if (!canceled) {
+				originalOrCropped = await os.cropImage(file, {
+					aspectRatio: 1,
+				});
+			}
+
+			const i = await os.apiWithDialog("i/update", {
+				avatarId: originalOrCropped.id,
+			});
+			$i.avatarId = i.avatarId;
+			$i.avatarUrl = i.avatarUrl;
+		}
+	);
 }
 
 function changeBanner(ev) {
-	selectFile(ev.currentTarget ?? ev.target, i18n.ts.banner).then(async (file) => {
-		let originalOrCropped = file;
+	selectFile(ev.currentTarget ?? ev.target, i18n.ts.banner).then(
+		async (file) => {
+			let originalOrCropped = file;
 
-		const { canceled } = await os.yesno({
-			type: 'question',
-			text: i18n.t('cropImageAsk'),
-		});
-
-		if (!canceled) {
-			originalOrCropped = await os.cropImage(file, {
-				aspectRatio: 2,
+			const { canceled } = await os.yesno({
+				type: "question",
+				text: i18n.t("cropImageAsk"),
 			});
-		}
 
-		const i = await os.apiWithDialog('i/update', {
-			bannerId: originalOrCropped.id,
-		});
-		$i.bannerId = i.bannerId;
-		$i.bannerUrl = i.bannerUrl;
-	});
+			if (!canceled) {
+				originalOrCropped = await os.cropImage(file, {
+					aspectRatio: 2,
+				});
+			}
+
+			const i = await os.apiWithDialog("i/update", {
+				bannerId: originalOrCropped.id,
+			});
+			$i.bannerId = i.bannerId;
+			$i.bannerUrl = i.bannerUrl;
+		}
+	);
 }
 
 const headerActions = $computed(() => []);
@@ -194,7 +305,7 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.profile,
-	icon: 'ph-user ph-bold ph-lg',
+	icon: "ph-user ph-bold ph-lg",
 });
 </script>
 
diff --git a/packages/client/src/pages/settings/reaction.vue b/packages/client/src/pages/settings/reaction.vue
index ace283fc4c..22c6f289b4 100644
--- a/packages/client/src/pages/settings/reaction.vue
+++ b/packages/client/src/pages/settings/reaction.vue
@@ -1,103 +1,149 @@
 <template>
-<div class="_formRoot">
-	<FromSlot class="_formBlock">
-		<template #label>{{ i18n.ts.reactionSettingDescription }}</template>
-		<div v-panel style="border-radius: 6px;">
-			<XDraggable v-model="reactions" class="zoaiodol" :item-key="item => item" animation="150" delay="100" delay-on-touch-only="true">
-				<template #item="{element}">
-					<button class="_button item" @click="remove(element, $event)">
-						<MkEmoji :emoji="element" :normal="true"/>
-					</button>
-				</template>
-				<template #footer>
-					<button class="_button add" @click="chooseEmoji"><i class="ph-plus ph-bold ph-lg"></i></button>
-				</template>
-			</XDraggable>
-		</div>
-		<template #caption>{{ i18n.ts.reactionSettingDescription2 }} <button class="_textButton" @click="preview">{{ i18n.ts.preview }}</button></template>
-	</FromSlot>
+	<div class="_formRoot">
+		<FromSlot class="_formBlock">
+			<template #label>{{ i18n.ts.reactionSettingDescription }}</template>
+			<div v-panel style="border-radius: 6px">
+				<XDraggable
+					v-model="reactions"
+					class="zoaiodol"
+					:item-key="(item) => item"
+					animation="150"
+					delay="100"
+					delay-on-touch-only="true"
+				>
+					<template #item="{ element }">
+						<button
+							class="_button item"
+							@click="remove(element, $event)"
+						>
+							<MkEmoji :emoji="element" :normal="true" />
+						</button>
+					</template>
+					<template #footer>
+						<button class="_button add" @click="chooseEmoji">
+							<i class="ph-plus ph-bold ph-lg"></i>
+						</button>
+					</template>
+				</XDraggable>
+			</div>
+			<template #caption
+				>{{ i18n.ts.reactionSettingDescription2 }}
+				<button class="_textButton" @click="preview">
+					{{ i18n.ts.preview }}
+				</button></template
+			>
+		</FromSlot>
 
-	<FormRadios v-model="reactionPickerSize" class="_formBlock">
-		<template #label>{{ i18n.ts.size }}</template>
-		<option :value="1">{{ i18n.ts.small }}</option>
-		<option :value="2">{{ i18n.ts.medium }}</option>
-		<option :value="3">{{ i18n.ts.large }}</option>
-	</FormRadios>
-	<FormRadios v-model="reactionPickerWidth" class="_formBlock">
-		<template #label>{{ i18n.ts.numberOfColumn }}</template>
-		<option :value="1">5</option>
-		<option :value="2">6</option>
-		<option :value="3">7</option>
-		<option :value="4">8</option>
-		<option :value="5">9</option>
-	</FormRadios>
-	<FormRadios v-model="reactionPickerHeight" class="_formBlock">
-		<template #label>{{ i18n.ts.height }}</template>
-		<option :value="1">{{ i18n.ts.small }}</option>
-		<option :value="2">{{ i18n.ts.medium }}</option>
-		<option :value="3">{{ i18n.ts.large }}</option>
-		<option :value="4">{{ i18n.ts.large }}+</option>
-	</FormRadios>
+		<FormRadios v-model="reactionPickerSize" class="_formBlock">
+			<template #label>{{ i18n.ts.size }}</template>
+			<option :value="1">{{ i18n.ts.small }}</option>
+			<option :value="2">{{ i18n.ts.medium }}</option>
+			<option :value="3">{{ i18n.ts.large }}</option>
+		</FormRadios>
+		<FormRadios v-model="reactionPickerWidth" class="_formBlock">
+			<template #label>{{ i18n.ts.numberOfColumn }}</template>
+			<option :value="1">5</option>
+			<option :value="2">6</option>
+			<option :value="3">7</option>
+			<option :value="4">8</option>
+			<option :value="5">9</option>
+		</FormRadios>
+		<FormRadios v-model="reactionPickerHeight" class="_formBlock">
+			<template #label>{{ i18n.ts.height }}</template>
+			<option :value="1">{{ i18n.ts.small }}</option>
+			<option :value="2">{{ i18n.ts.medium }}</option>
+			<option :value="3">{{ i18n.ts.large }}</option>
+			<option :value="4">{{ i18n.ts.large }}+</option>
+		</FormRadios>
 
-	<FormSwitch v-model="reactionPickerUseDrawerForMobile" class="_formBlock">
-		{{ i18n.ts.useDrawerReactionPickerForMobile }}
-		<template #caption>{{ i18n.ts.needReloadToApply }}</template>
-	</FormSwitch>
+		<FormSwitch
+			v-model="reactionPickerUseDrawerForMobile"
+			class="_formBlock"
+		>
+			{{ i18n.ts.useDrawerReactionPickerForMobile }}
+			<template #caption>{{ i18n.ts.needReloadToApply }}</template>
+		</FormSwitch>
 
-	<FormSection>
-		<div style="display: flex; gap: var(--margin); flex-wrap: wrap;">
-			<FormButton inline @click="preview"><i class="ph-eye ph-bold ph-lg"></i> {{ i18n.ts.preview }}</FormButton>
-			<FormButton inline danger @click="setDefault"><i class="ph-arrow-counter-clockwise ph-bold ph-lg"></i> {{ i18n.ts.default }}</FormButton>
-		</div>
-	</FormSection>
-</div>
+		<FormSection>
+			<div style="display: flex; gap: var(--margin); flex-wrap: wrap">
+				<FormButton inline @click="preview"
+					><i class="ph-eye ph-bold ph-lg"></i>
+					{{ i18n.ts.preview }}</FormButton
+				>
+				<FormButton inline danger @click="setDefault"
+					><i class="ph-arrow-counter-clockwise ph-bold ph-lg"></i>
+					{{ i18n.ts.default }}</FormButton
+				>
+			</div>
+		</FormSection>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent, watch } from 'vue';
-import XDraggable from 'vuedraggable';
-import FormInput from '@/components/form/input.vue';
-import FormRadios from '@/components/form/radios.vue';
-import FromSlot from '@/components/form/slot.vue';
-import FormButton from '@/components/MkButton.vue';
-import FormSection from '@/components/form/section.vue';
-import FormSwitch from '@/components/form/switch.vue';
-import * as os from '@/os';
-import { defaultStore } from '@/store';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import { deepClone } from '@/scripts/clone';
+import { defineAsyncComponent, watch } from "vue";
+import XDraggable from "vuedraggable";
+import FormInput from "@/components/form/input.vue";
+import FormRadios from "@/components/form/radios.vue";
+import FromSlot from "@/components/form/slot.vue";
+import FormButton from "@/components/MkButton.vue";
+import FormSection from "@/components/form/section.vue";
+import FormSwitch from "@/components/form/switch.vue";
+import * as os from "@/os";
+import { defaultStore } from "@/store";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
+import { deepClone } from "@/scripts/clone";
 
 let reactions = $ref(deepClone(defaultStore.state.reactions));
 
-const reactionPickerSize = $computed(defaultStore.makeGetterSetter('reactionPickerSize'));
-const reactionPickerWidth = $computed(defaultStore.makeGetterSetter('reactionPickerWidth'));
-const reactionPickerHeight = $computed(defaultStore.makeGetterSetter('reactionPickerHeight'));
-const reactionPickerUseDrawerForMobile = $computed(defaultStore.makeGetterSetter('reactionPickerUseDrawerForMobile'));
+const reactionPickerSize = $computed(
+	defaultStore.makeGetterSetter("reactionPickerSize")
+);
+const reactionPickerWidth = $computed(
+	defaultStore.makeGetterSetter("reactionPickerWidth")
+);
+const reactionPickerHeight = $computed(
+	defaultStore.makeGetterSetter("reactionPickerHeight")
+);
+const reactionPickerUseDrawerForMobile = $computed(
+	defaultStore.makeGetterSetter("reactionPickerUseDrawerForMobile")
+);
 
 function save() {
-	defaultStore.set('reactions', reactions);
+	defaultStore.set("reactions", reactions);
 }
 
 function remove(reaction, ev: MouseEvent) {
-	os.popupMenu([{
-		text: i18n.ts.remove,
-		action: () => {
-			reactions = reactions.filter(x => x !== reaction);
-		},
-	}], ev.currentTarget ?? ev.target);
+	os.popupMenu(
+		[
+			{
+				text: i18n.ts.remove,
+				action: () => {
+					reactions = reactions.filter((x) => x !== reaction);
+				},
+			},
+		],
+		ev.currentTarget ?? ev.target
+	);
 }
 
 function preview(ev: MouseEvent) {
-	os.popup(defineAsyncComponent(() => import('@/components/MkEmojiPickerDialog.vue')), {
-		asReactionPicker: true,
-		src: ev.currentTarget ?? ev.target,
-	}, {}, 'closed');
+	os.popup(
+		defineAsyncComponent(
+			() => import("@/components/MkEmojiPickerDialog.vue")
+		),
+		{
+			asReactionPicker: true,
+			src: ev.currentTarget ?? ev.target,
+		},
+		{},
+		"closed"
+	);
 }
 
 async function setDefault() {
 	const { canceled } = await os.confirm({
-		type: 'warning',
+		type: "warning",
 		text: i18n.ts.resetAreYouSure,
 	});
 	if (canceled) return;
@@ -108,18 +154,22 @@ async function setDefault() {
 function chooseEmoji(ev: MouseEvent) {
 	os.pickEmoji(ev.currentTarget ?? ev.target, {
 		showPinned: false,
-	}).then(emoji => {
+	}).then((emoji) => {
 		if (!reactions.includes(emoji)) {
 			reactions.push(emoji);
 		}
 	});
 }
 
-watch($$(reactions), () => {
-	save();
-}, {
-	deep: true,
-});
+watch(
+	$$(reactions),
+	() => {
+		save();
+	},
+	{
+		deep: true,
+	}
+);
 
 const headerActions = $computed(() => []);
 
@@ -127,9 +177,9 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.reaction,
-	icon: 'ph-smiley ph-bold ph-lg',
+	icon: "ph-smiley ph-bold ph-lg",
 	action: {
-		icon: 'ph-eye ph-bold ph-lg',
+		icon: "ph-eye ph-bold ph-lg",
 		handler: preview,
 	},
 });
diff --git a/packages/client/src/pages/settings/security.vue b/packages/client/src/pages/settings/security.vue
index 86632234fb..be4f275f16 100644
--- a/packages/client/src/pages/settings/security.vue
+++ b/packages/client/src/pages/settings/security.vue
@@ -1,85 +1,105 @@
 <template>
-<div class="_formRoot">
-	<FormSection>
-		<template #label>{{ i18n.ts.password }}</template>
-		<FormButton primary @click="change()">{{ i18n.ts.changePassword }}</FormButton>
-	</FormSection>
+	<div class="_formRoot">
+		<FormSection>
+			<template #label>{{ i18n.ts.password }}</template>
+			<FormButton primary @click="change()">{{
+				i18n.ts.changePassword
+			}}</FormButton>
+		</FormSection>
 
-	<FormSection>
-		<template #label>{{ i18n.ts.twoStepAuthentication }}</template>
-		<X2fa/>
-	</FormSection>
+		<FormSection>
+			<template #label>{{ i18n.ts.twoStepAuthentication }}</template>
+			<X2fa />
+		</FormSection>
 
-	<FormSection>
-		<template #label>{{ i18n.ts.signinHistory }}</template>
-		<MkPagination :pagination="pagination" disable-auto-load>
-			<template #default="{items}">
-				<div>
-					<div v-for="item in items" :key="item.id" v-panel class="timnmucd">
-						<header>
-							<i v-if="item.success" class="ph-check ph-bold ph-lg icon succ"></i>
-							<i v-else class="ph-circle-wavy-warning ph-bold ph-lg icon fail"></i>
-							<code class="ip _monospace">{{ item.ip }}</code>
-							<MkTime :time="item.createdAt" class="time"/>
-						</header>
+		<FormSection>
+			<template #label>{{ i18n.ts.signinHistory }}</template>
+			<MkPagination :pagination="pagination" disable-auto-load>
+				<template #default="{ items }">
+					<div>
+						<div
+							v-for="item in items"
+							:key="item.id"
+							v-panel
+							class="timnmucd"
+						>
+							<header>
+								<i
+									v-if="item.success"
+									class="ph-check ph-bold ph-lg icon succ"
+								></i>
+								<i
+									v-else
+									class="ph-circle-wavy-warning ph-bold ph-lg icon fail"
+								></i>
+								<code class="ip _monospace">{{ item.ip }}</code>
+								<MkTime :time="item.createdAt" class="time" />
+							</header>
+						</div>
 					</div>
-				</div>
-			</template>
-		</MkPagination>
-	</FormSection>
+				</template>
+			</MkPagination>
+		</FormSection>
 
-	<FormSection>
-		<FormSlot>
-			<FormButton danger @click="regenerateToken"><i class="ph-arrows-clockwise ph-bold ph-lg"></i> {{ i18n.ts.regenerateLoginToken }}</FormButton>
-			<template #caption>{{ i18n.ts.regenerateLoginTokenDescription }}</template>
-		</FormSlot>
-	</FormSection>
-</div>
+		<FormSection>
+			<FormSlot>
+				<FormButton danger @click="regenerateToken"
+					><i class="ph-arrows-clockwise ph-bold ph-lg"></i>
+					{{ i18n.ts.regenerateLoginToken }}</FormButton
+				>
+				<template #caption>{{
+					i18n.ts.regenerateLoginTokenDescription
+				}}</template>
+			</FormSlot>
+		</FormSection>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import X2fa from './2fa.vue';
-import FormSection from '@/components/form/section.vue';
-import FormSlot from '@/components/form/slot.vue';
-import FormButton from '@/components/MkButton.vue';
-import MkPagination from '@/components/MkPagination.vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import X2fa from "./2fa.vue";
+import FormSection from "@/components/form/section.vue";
+import FormSlot from "@/components/form/slot.vue";
+import FormButton from "@/components/MkButton.vue";
+import MkPagination from "@/components/MkPagination.vue";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
 const pagination = {
-	endpoint: 'i/signin-history' as const,
+	endpoint: "i/signin-history" as const,
 	limit: 5,
 };
 
 async function change(): Promise<void> {
-	const { canceled: canceled1, result: currentPassword } = await os.inputText({
-		title: i18n.ts.currentPassword,
-		type: 'password',
-	});
+	const { canceled: canceled1, result: currentPassword } = await os.inputText(
+		{
+			title: i18n.ts.currentPassword,
+			type: "password",
+		}
+	);
 	if (canceled1) return;
 
 	const { canceled: canceled2, result: newPassword } = await os.inputText({
 		title: i18n.ts.newPassword,
-		type: 'password',
+		type: "password",
 	});
 	if (canceled2) return;
 
 	const { canceled: canceled3, result: newPassword2 } = await os.inputText({
 		title: i18n.ts.newPasswordRetype,
-		type: 'password',
+		type: "password",
 	});
 	if (canceled3) return;
 
 	if (newPassword !== newPassword2) {
 		os.alert({
-			type: 'error',
+			type: "error",
 			text: i18n.ts.retypedNotMatch,
 		});
 		return;
 	}
 
-	os.apiWithDialog('i/change-password', {
+	os.apiWithDialog("i/change-password", {
 		currentPassword,
 		newPassword,
 	});
@@ -88,10 +108,10 @@ async function change(): Promise<void> {
 function regenerateToken(): void {
 	os.inputText({
 		title: i18n.ts.password,
-		type: 'password',
+		type: "password",
 	}).then(({ canceled, result: password }) => {
 		if (canceled) return;
-		os.api('i/regenerate_token', {
+		os.api("i/regenerate_token", {
 			password: password,
 		});
 	});
@@ -103,7 +123,7 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.security,
-	icon: 'ph-lock ph-bold ph-lg',
+	icon: "ph-lock ph-bold ph-lg",
 });
 </script>
 
diff --git a/packages/client/src/pages/settings/sounds.vue b/packages/client/src/pages/settings/sounds.vue
index afacf770b7..81596a40ba 100644
--- a/packages/client/src/pages/settings/sounds.vue
+++ b/packages/client/src/pages/settings/sounds.vue
@@ -1,62 +1,84 @@
 <template>
-<div class="_formRoot">
-	<FormRange v-model="masterVolume" :min="0" :max="1" :step="0.05" :text-converter="(v) => `${Math.floor(v * 100)}%`" class="_formBlock">
-		<template #label>{{ i18n.ts.masterVolume }}</template>
-	</FormRange>
+	<div class="_formRoot">
+		<FormRange
+			v-model="masterVolume"
+			:min="0"
+			:max="1"
+			:step="0.05"
+			:text-converter="(v) => `${Math.floor(v * 100)}%`"
+			class="_formBlock"
+		>
+			<template #label>{{ i18n.ts.masterVolume }}</template>
+		</FormRange>
 
-	<FormSection>
-		<template #label>{{ i18n.ts.sounds }}</template>
-		<FormButton v-for="type in Object.keys(sounds)" :key="type" style="margin-bottom: 8px;" @click="edit(type)">
-			{{ i18n.t('_sfx.' + type) }}
-			<template #suffix>{{ sounds[type].type || i18n.ts.none }}</template>
-			<template #suffixIcon><i class="ph-caret-down ph-bold ph-lg"></i></template>
-		</FormButton>
-	</FormSection>
+		<FormSection>
+			<template #label>{{ i18n.ts.sounds }}</template>
+			<FormButton
+				v-for="type in Object.keys(sounds)"
+				:key="type"
+				style="margin-bottom: 8px"
+				@click="edit(type)"
+			>
+				{{ i18n.t("_sfx." + type) }}
+				<template #suffix>{{
+					sounds[type].type || i18n.ts.none
+				}}</template>
+				<template #suffixIcon
+					><i class="ph-caret-down ph-bold ph-lg"></i
+				></template>
+			</FormButton>
+		</FormSection>
 
-	<FormButton danger class="_formBlock" @click="reset()"><i class="ph-arrow-clockwise ph-bold ph-lg"></i> {{ i18n.ts.default }}</FormButton>
-</div>
+		<FormButton danger class="_formBlock" @click="reset()"
+			><i class="ph-arrow-clockwise ph-bold ph-lg"></i>
+			{{ i18n.ts.default }}</FormButton
+		>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { computed, ref } from 'vue';
-import FormRange from '@/components/form/range.vue';
-import FormButton from '@/components/MkButton.vue';
-import FormSection from '@/components/form/section.vue';
-import * as os from '@/os';
-import { ColdDeviceStorage } from '@/store';
-import { playFile } from '@/scripts/sound';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import { computed, ref } from "vue";
+import FormRange from "@/components/form/range.vue";
+import FormButton from "@/components/MkButton.vue";
+import FormSection from "@/components/form/section.vue";
+import * as os from "@/os";
+import { ColdDeviceStorage } from "@/store";
+import { playFile } from "@/scripts/sound";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
 const masterVolume = computed({
 	get: () => {
-		return ColdDeviceStorage.get('sound_masterVolume');
+		return ColdDeviceStorage.get("sound_masterVolume");
 	},
 	set: (value) => {
-		ColdDeviceStorage.set('sound_masterVolume', value);
+		ColdDeviceStorage.set("sound_masterVolume", value);
 	},
 });
 
-const volumeIcon = computed(() => masterVolume.value === 0 ? 'ph-speaker-none ph-bold ph-lg' : 'ph-speaker-high ph-bold ph-lg');
+const volumeIcon = computed(() =>
+	masterVolume.value === 0
+		? "ph-speaker-none ph-bold ph-lg"
+		: "ph-speaker-high ph-bold ph-lg"
+);
 
 const sounds = ref({
-	note: ColdDeviceStorage.get('sound_note'),
-	noteMy: ColdDeviceStorage.get('sound_noteMy'),
-	notification: ColdDeviceStorage.get('sound_notification'),
-	chat: ColdDeviceStorage.get('sound_chat'),
-	chatBg: ColdDeviceStorage.get('sound_chatBg'),
-	antenna: ColdDeviceStorage.get('sound_antenna'),
-	channel: ColdDeviceStorage.get('sound_channel'),
+	note: ColdDeviceStorage.get("sound_note"),
+	noteMy: ColdDeviceStorage.get("sound_noteMy"),
+	notification: ColdDeviceStorage.get("sound_notification"),
+	chat: ColdDeviceStorage.get("sound_chat"),
+	chatBg: ColdDeviceStorage.get("sound_chatBg"),
+	antenna: ColdDeviceStorage.get("sound_antenna"),
+	channel: ColdDeviceStorage.get("sound_channel"),
 });
 
-const soundsTypes = await os.api('get-sounds')
-
+const soundsTypes = await os.api("get-sounds");
 
 async function edit(type) {
-	const { canceled, result } = await os.form(i18n.t('_sfx.' + type), {
+	const { canceled, result } = await os.form(i18n.t("_sfx." + type), {
 		type: {
-			type: 'enum',
-			enum: soundsTypes.map(x => ({
+			type: "enum",
+			enum: soundsTypes.map((x) => ({
 				value: x,
 				label: x == null ? i18n.ts.none : x,
 			})),
@@ -64,7 +86,7 @@ async function edit(type) {
 			default: sounds.value[type].type,
 		},
 		volume: {
-			type: 'range',
+			type: "range",
 			min: 0,
 			max: 1,
 			step: 0.05,
@@ -73,7 +95,7 @@ async function edit(type) {
 			default: sounds.value[type].volume,
 		},
 		listen: {
-			type: 'button',
+			type: "button",
 			content: i18n.ts.listen,
 			action: (_, values) => {
 				playFile(values.type, values.volume);
@@ -87,14 +109,14 @@ async function edit(type) {
 		volume: result.volume,
 	};
 
-	ColdDeviceStorage.set('sound_' + type, v);
+	ColdDeviceStorage.set("sound_" + type, v);
 	sounds.value[type] = v;
 }
 
 function reset() {
 	for (const sound of Object.keys(sounds.value)) {
-		const v = ColdDeviceStorage.default['sound_' + sound];
-		ColdDeviceStorage.set('sound_' + sound, v);
+		const v = ColdDeviceStorage.default["sound_" + sound];
+		ColdDeviceStorage.set("sound_" + sound, v);
 		sounds.value[sound] = v;
 	}
 }
@@ -105,6 +127,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.sounds,
-	icon: 'ph-speaker-high ph-bold ph-lg',
+	icon: "ph-speaker-high ph-bold ph-lg",
 });
 </script>
diff --git a/packages/client/src/pages/settings/statusbar.statusbar.vue b/packages/client/src/pages/settings/statusbar.statusbar.vue
index 608222386e..b64f167171 100644
--- a/packages/client/src/pages/settings/statusbar.statusbar.vue
+++ b/packages/client/src/pages/settings/statusbar.statusbar.vue
@@ -1,140 +1,211 @@
 <template>
-<div class="_formRoot">
-	<FormSelect v-model="statusbar.type" placeholder="Please select" class="_formBlock">
-		<template #label>{{ i18n.ts.type }}</template>
-		<option value="rss">RSS</option>
-		<option value="federation">Federation</option>
-		<option value="userList">User list timeline</option>
-	</FormSelect>
-
-	<MkInput v-model="statusbar.name" manual-save class="_formBlock">
-		<template #label>{{ i18n.ts.label }}</template>
-	</MkInput>
-
-	<MkSwitch v-model="statusbar.black" class="_formBlock">
-		<template #label>Black</template>
-	</MkSwitch>
-
-	<FormRadios v-model="statusbar.size" class="_formBlock">
-		<template #label>{{ i18n.ts.size }}</template>
-		<option value="verySmall">{{ i18n.ts.small }}+</option>
-		<option value="small">{{ i18n.ts.small }}</option>
-		<option value="medium">{{ i18n.ts.medium }}</option>
-		<option value="large">{{ i18n.ts.large }}</option>
-		<option value="veryLarge">{{ i18n.ts.large }}+</option>
-	</FormRadios>
-
-	<template v-if="statusbar.type === 'rss'">
-		<MkInput v-model="statusbar.props.url" manual-save class="_formBlock" type="url">
-			<template #label>URL</template>
-		</MkInput>
-		<MkSwitch v-model="statusbar.props.shuffle" class="_formBlock">
-			<template #label>{{ i18n.ts.shuffle }}</template>
-		</MkSwitch>
-		<MkInput v-model="statusbar.props.refreshIntervalSec" manual-save class="_formBlock" type="number">
-			<template #label>{{ i18n.ts.refreshInterval }}</template>
-		</MkInput>
-		<FormRange v-model="statusbar.props.marqueeDuration" :min="5" :max="150" :step="1" class="_formBlock">
-			<template #label>{{ i18n.ts.speed }}</template>
-			<template #caption>{{ i18n.ts.fast }} &lt;-&gt; {{ i18n.ts.slow }}</template>
-		</FormRange>
-		<MkSwitch v-model="statusbar.props.marqueeReverse" class="_formBlock">
-			<template #label>{{ i18n.ts.reverse }}</template>
-		</MkSwitch>
-	</template>
-	<template v-else-if="statusbar.type === 'federation'">
-		<MkInput v-model="statusbar.props.refreshIntervalSec" manual-save class="_formBlock" type="number">
-			<template #label>{{ i18n.ts.refreshInterval }}</template>
-		</MkInput>
-		<FormRange v-model="statusbar.props.marqueeDuration" :min="5" :max="150" :step="1" class="_formBlock">
-			<template #label>{{ i18n.ts.speed }}</template>
-			<template #caption>{{ i18n.ts.fast }} &lt;-&gt; {{ i18n.ts.slow }}</template>
-		</FormRange>
-		<MkSwitch v-model="statusbar.props.marqueeReverse" class="_formBlock">
-			<template #label>{{ i18n.ts.reverse }}</template>
-		</MkSwitch>
-		<MkSwitch v-model="statusbar.props.colored" class="_formBlock">
-			<template #label>{{ i18n.ts.colored }}</template>
-		</MkSwitch>
-	</template>
-	<template v-else-if="statusbar.type === 'userList' && userLists != null">
-		<FormSelect v-model="statusbar.props.userListId" class="_formBlock">
-			<template #label>{{ i18n.ts.userList }}</template>
-			<option v-for="list in userLists" :value="list.id">{{ list.name }}</option>
+	<div class="_formRoot">
+		<FormSelect
+			v-model="statusbar.type"
+			placeholder="Please select"
+			class="_formBlock"
+		>
+			<template #label>{{ i18n.ts.type }}</template>
+			<option value="rss">RSS</option>
+			<option value="federation">Federation</option>
+			<option value="userList">User list timeline</option>
 		</FormSelect>
-		<MkInput v-model="statusbar.props.refreshIntervalSec" manual-save class="_formBlock" type="number">
-			<template #label>{{ i18n.ts.refreshInterval }}</template>
-		</MkInput>
-		<FormRange v-model="statusbar.props.marqueeDuration" :min="5" :max="150" :step="1" class="_formBlock">
-			<template #label>{{ i18n.ts.speed }}</template>
-			<template #caption>{{ i18n.ts.fast }} &lt;-&gt; {{ i18n.ts.slow }}</template>
-		</FormRange>
-		<MkSwitch v-model="statusbar.props.marqueeReverse" class="_formBlock">
-			<template #label>{{ i18n.ts.reverse }}</template>
-		</MkSwitch>
-	</template>
 
-	<div style="display: flex; gap: var(--margin); flex-wrap: wrap;">
-		<FormButton danger @click="del">{{ i18n.ts.remove }}</FormButton>
+		<MkInput v-model="statusbar.name" manual-save class="_formBlock">
+			<template #label>{{ i18n.ts.label }}</template>
+		</MkInput>
+
+		<MkSwitch v-model="statusbar.black" class="_formBlock">
+			<template #label>Black</template>
+		</MkSwitch>
+
+		<FormRadios v-model="statusbar.size" class="_formBlock">
+			<template #label>{{ i18n.ts.size }}</template>
+			<option value="verySmall">{{ i18n.ts.small }}+</option>
+			<option value="small">{{ i18n.ts.small }}</option>
+			<option value="medium">{{ i18n.ts.medium }}</option>
+			<option value="large">{{ i18n.ts.large }}</option>
+			<option value="veryLarge">{{ i18n.ts.large }}+</option>
+		</FormRadios>
+
+		<template v-if="statusbar.type === 'rss'">
+			<MkInput
+				v-model="statusbar.props.url"
+				manual-save
+				class="_formBlock"
+				type="url"
+			>
+				<template #label>URL</template>
+			</MkInput>
+			<MkSwitch v-model="statusbar.props.shuffle" class="_formBlock">
+				<template #label>{{ i18n.ts.shuffle }}</template>
+			</MkSwitch>
+			<MkInput
+				v-model="statusbar.props.refreshIntervalSec"
+				manual-save
+				class="_formBlock"
+				type="number"
+			>
+				<template #label>{{ i18n.ts.refreshInterval }}</template>
+			</MkInput>
+			<FormRange
+				v-model="statusbar.props.marqueeDuration"
+				:min="5"
+				:max="150"
+				:step="1"
+				class="_formBlock"
+			>
+				<template #label>{{ i18n.ts.speed }}</template>
+				<template #caption
+					>{{ i18n.ts.fast }} &lt;-&gt; {{ i18n.ts.slow }}</template
+				>
+			</FormRange>
+			<MkSwitch
+				v-model="statusbar.props.marqueeReverse"
+				class="_formBlock"
+			>
+				<template #label>{{ i18n.ts.reverse }}</template>
+			</MkSwitch>
+		</template>
+		<template v-else-if="statusbar.type === 'federation'">
+			<MkInput
+				v-model="statusbar.props.refreshIntervalSec"
+				manual-save
+				class="_formBlock"
+				type="number"
+			>
+				<template #label>{{ i18n.ts.refreshInterval }}</template>
+			</MkInput>
+			<FormRange
+				v-model="statusbar.props.marqueeDuration"
+				:min="5"
+				:max="150"
+				:step="1"
+				class="_formBlock"
+			>
+				<template #label>{{ i18n.ts.speed }}</template>
+				<template #caption
+					>{{ i18n.ts.fast }} &lt;-&gt; {{ i18n.ts.slow }}</template
+				>
+			</FormRange>
+			<MkSwitch
+				v-model="statusbar.props.marqueeReverse"
+				class="_formBlock"
+			>
+				<template #label>{{ i18n.ts.reverse }}</template>
+			</MkSwitch>
+			<MkSwitch v-model="statusbar.props.colored" class="_formBlock">
+				<template #label>{{ i18n.ts.colored }}</template>
+			</MkSwitch>
+		</template>
+		<template
+			v-else-if="statusbar.type === 'userList' && userLists != null"
+		>
+			<FormSelect v-model="statusbar.props.userListId" class="_formBlock">
+				<template #label>{{ i18n.ts.userList }}</template>
+				<option v-for="list in userLists" :value="list.id">
+					{{ list.name }}
+				</option>
+			</FormSelect>
+			<MkInput
+				v-model="statusbar.props.refreshIntervalSec"
+				manual-save
+				class="_formBlock"
+				type="number"
+			>
+				<template #label>{{ i18n.ts.refreshInterval }}</template>
+			</MkInput>
+			<FormRange
+				v-model="statusbar.props.marqueeDuration"
+				:min="5"
+				:max="150"
+				:step="1"
+				class="_formBlock"
+			>
+				<template #label>{{ i18n.ts.speed }}</template>
+				<template #caption
+					>{{ i18n.ts.fast }} &lt;-&gt; {{ i18n.ts.slow }}</template
+				>
+			</FormRange>
+			<MkSwitch
+				v-model="statusbar.props.marqueeReverse"
+				class="_formBlock"
+			>
+				<template #label>{{ i18n.ts.reverse }}</template>
+			</MkSwitch>
+		</template>
+
+		<div style="display: flex; gap: var(--margin); flex-wrap: wrap">
+			<FormButton danger @click="del">{{ i18n.ts.remove }}</FormButton>
+		</div>
 	</div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { computed, reactive, ref, watch } from 'vue';
-import FormSelect from '@/components/form/select.vue';
-import MkInput from '@/components/form/input.vue';
-import MkSwitch from '@/components/form/switch.vue';
-import FormRadios from '@/components/form/radios.vue';
-import FormButton from '@/components/MkButton.vue';
-import FormRange from '@/components/form/range.vue';
-import * as os from '@/os';
-import { defaultStore } from '@/store';
-import { i18n } from '@/i18n';
-import { deepClone } from '@/scripts/clone';
+import { computed, reactive, ref, watch } from "vue";
+import FormSelect from "@/components/form/select.vue";
+import MkInput from "@/components/form/input.vue";
+import MkSwitch from "@/components/form/switch.vue";
+import FormRadios from "@/components/form/radios.vue";
+import FormButton from "@/components/MkButton.vue";
+import FormRange from "@/components/form/range.vue";
+import * as os from "@/os";
+import { defaultStore } from "@/store";
+import { i18n } from "@/i18n";
+import { deepClone } from "@/scripts/clone";
 
 const props = defineProps<{
 	_id: string;
 	userLists: any[] | null;
 }>();
 
-const statusbar = reactive(deepClone(defaultStore.state.statusbars.find(x => x.id === props._id)));
+const statusbar = reactive(
+	deepClone(defaultStore.state.statusbars.find((x) => x.id === props._id))
+);
 
-watch(() => statusbar.type, () => {
-	if (statusbar.type === 'rss') {
-		statusbar.name = 'NEWS';
-		statusbar.props.url = 'http://feeds.afpbb.com/rss/afpbb/afpbbnews';
-		statusbar.props.shuffle = true;
-		statusbar.props.refreshIntervalSec = 120;
-		statusbar.props.display = 'marquee';
-		statusbar.props.marqueeDuration = 100;
-		statusbar.props.marqueeReverse = false;
-	} else if (statusbar.type === 'federation') {
-		statusbar.name = 'FEDERATION';
-		statusbar.props.refreshIntervalSec = 120;
-		statusbar.props.display = 'marquee';
-		statusbar.props.marqueeDuration = 100;
-		statusbar.props.marqueeReverse = false;
-		statusbar.props.colored = false;
-	} else if (statusbar.type === 'userList') {
-		statusbar.name = 'LIST TL';
-		statusbar.props.refreshIntervalSec = 120;
-		statusbar.props.display = 'marquee';
-		statusbar.props.marqueeDuration = 100;
-		statusbar.props.marqueeReverse = false;
+watch(
+	() => statusbar.type,
+	() => {
+		if (statusbar.type === "rss") {
+			statusbar.name = "NEWS";
+			statusbar.props.url = "http://feeds.afpbb.com/rss/afpbb/afpbbnews";
+			statusbar.props.shuffle = true;
+			statusbar.props.refreshIntervalSec = 120;
+			statusbar.props.display = "marquee";
+			statusbar.props.marqueeDuration = 100;
+			statusbar.props.marqueeReverse = false;
+		} else if (statusbar.type === "federation") {
+			statusbar.name = "FEDERATION";
+			statusbar.props.refreshIntervalSec = 120;
+			statusbar.props.display = "marquee";
+			statusbar.props.marqueeDuration = 100;
+			statusbar.props.marqueeReverse = false;
+			statusbar.props.colored = false;
+		} else if (statusbar.type === "userList") {
+			statusbar.name = "LIST TL";
+			statusbar.props.refreshIntervalSec = 120;
+			statusbar.props.display = "marquee";
+			statusbar.props.marqueeDuration = 100;
+			statusbar.props.marqueeReverse = false;
+		}
 	}
-});
+);
 
 watch(statusbar, save);
 
 async function save() {
-	const i = defaultStore.state.statusbars.findIndex(x => x.id === props._id);
+	const i = defaultStore.state.statusbars.findIndex(
+		(x) => x.id === props._id
+	);
 	const statusbars = deepClone(defaultStore.state.statusbars);
 	statusbars[i] = deepClone(statusbar);
-	defaultStore.set('statusbars', statusbars);
+	defaultStore.set("statusbars", statusbars);
 }
 
 function del() {
-	defaultStore.set('statusbars', defaultStore.state.statusbars.filter(x => x.id !== props._id));
+	defaultStore.set(
+		"statusbars",
+		defaultStore.state.statusbars.filter((x) => x.id !== props._id)
+	);
 }
 </script>
diff --git a/packages/client/src/pages/settings/statusbar.vue b/packages/client/src/pages/settings/statusbar.vue
index dd12576ac0..96a80e8c63 100644
--- a/packages/client/src/pages/settings/statusbar.vue
+++ b/packages/client/src/pages/settings/statusbar.vue
@@ -1,43 +1,43 @@
 <template>
-<div class="_formRoot">
-	<FormFolder v-for="x in statusbars" :key="x.id" class="_formBlock">
-		<template #label>{{ x.type ?? i18n.ts.notSet }}</template>
-		<template #suffix>{{ x.name }}</template>
-		<XStatusbar :_id="x.id" :user-lists="userLists"/>
-	</FormFolder>
-	<FormButton primary @click="add">{{ i18n.ts.add }}</FormButton>
-</div>
+	<div class="_formRoot">
+		<FormFolder v-for="x in statusbars" :key="x.id" class="_formBlock">
+			<template #label>{{ x.type ?? i18n.ts.notSet }}</template>
+			<template #suffix>{{ x.name }}</template>
+			<XStatusbar :_id="x.id" :user-lists="userLists" />
+		</FormFolder>
+		<FormButton primary @click="add">{{ i18n.ts.add }}</FormButton>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted, ref, watch } from 'vue';
-import { v4 as uuid } from 'uuid';
-import XStatusbar from './statusbar.statusbar.vue';
-import FormRadios from '@/components/form/radios.vue';
-import FormFolder from '@/components/form/folder.vue';
-import FormButton from '@/components/MkButton.vue';
-import * as os from '@/os';
-import { defaultStore } from '@/store';
-import { unisonReload } from '@/scripts/unison-reload';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import { computed, onMounted, ref, watch } from "vue";
+import { v4 as uuid } from "uuid";
+import XStatusbar from "./statusbar.statusbar.vue";
+import FormRadios from "@/components/form/radios.vue";
+import FormFolder from "@/components/form/folder.vue";
+import FormButton from "@/components/MkButton.vue";
+import * as os from "@/os";
+import { defaultStore } from "@/store";
+import { unisonReload } from "@/scripts/unison-reload";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
 const statusbars = defaultStore.reactiveState.statusbars;
 
 let userLists = $ref();
 
 onMounted(() => {
-	os.api('users/lists/list').then(res => {
+	os.api("users/lists/list").then((res) => {
 		userLists = res;
 	});
 });
 
 async function add() {
-	defaultStore.push('statusbars', {
+	defaultStore.push("statusbars", {
 		id: uuid(),
 		type: null,
 		black: false,
-		size: 'medium',
+		size: "medium",
 		props: {},
 	});
 }
@@ -48,7 +48,7 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.statusbar,
-	icon: 'ph-list-bullets ph-bold ph-lg',
-	bg: 'var(--bg)',
+	icon: "ph-list-bullets ph-bold ph-lg",
+	bg: "var(--bg)",
 });
 </script>
diff --git a/packages/client/src/pages/settings/theme.install.vue b/packages/client/src/pages/settings/theme.install.vue
index 03dcd24c10..0428de0f72 100644
--- a/packages/client/src/pages/settings/theme.install.vue
+++ b/packages/client/src/pages/settings/theme.install.vue
@@ -1,26 +1,42 @@
 <template>
-<div class="_formRoot">
-	<FormTextarea v-model="installThemeCode" class="_formBlock">
-		<template #label>{{ i18n.ts._theme.code }}</template>
-	</FormTextarea>
+	<div class="_formRoot">
+		<FormTextarea v-model="installThemeCode" class="_formBlock">
+			<template #label>{{ i18n.ts._theme.code }}</template>
+		</FormTextarea>
 
-	<div class="_formBlock" style="display: flex; gap: var(--margin); flex-wrap: wrap;">
-		<FormButton :disabled="installThemeCode == null" inline @click="() => preview(installThemeCode)"><i class="ph-eye ph-bold ph-lg"></i> {{ i18n.ts.preview }}</FormButton>
-		<FormButton :disabled="installThemeCode == null" primary inline @click="() => install(installThemeCode)"><i class="ph-check ph-bold ph-lg"></i> {{ i18n.ts.install }}</FormButton>
+		<div
+			class="_formBlock"
+			style="display: flex; gap: var(--margin); flex-wrap: wrap"
+		>
+			<FormButton
+				:disabled="installThemeCode == null"
+				inline
+				@click="() => preview(installThemeCode)"
+				><i class="ph-eye ph-bold ph-lg"></i>
+				{{ i18n.ts.preview }}</FormButton
+			>
+			<FormButton
+				:disabled="installThemeCode == null"
+				primary
+				inline
+				@click="() => install(installThemeCode)"
+				><i class="ph-check ph-bold ph-lg"></i>
+				{{ i18n.ts.install }}</FormButton
+			>
+		</div>
 	</div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import JSON5 from 'json5';
-import FormTextarea from '@/components/form/textarea.vue';
-import FormButton from '@/components/MkButton.vue';
-import { applyTheme, validateTheme } from '@/scripts/theme';
-import * as os from '@/os';
-import { addTheme, getThemes } from '@/theme-store';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import {} from "vue";
+import JSON5 from "json5";
+import FormTextarea from "@/components/form/textarea.vue";
+import FormButton from "@/components/MkButton.vue";
+import { applyTheme, validateTheme } from "@/scripts/theme";
+import * as os from "@/os";
+import { addTheme, getThemes } from "@/theme-store";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
 let installThemeCode = $ref(null);
 
@@ -31,21 +47,21 @@ function parseThemeCode(code: string) {
 		theme = JSON5.parse(code);
 	} catch (err) {
 		os.alert({
-			type: 'error',
+			type: "error",
 			text: i18n.ts._theme.invalid,
 		});
 		return false;
 	}
 	if (!validateTheme(theme)) {
 		os.alert({
-			type: 'error',
+			type: "error",
 			text: i18n.ts._theme.invalid,
 		});
 		return false;
 	}
-	if (getThemes().some(t => t.id === theme.id)) {
+	if (getThemes().some((t) => t.id === theme.id)) {
 		os.alert({
-			type: 'info',
+			type: "info",
 			text: i18n.ts._theme.alreadyInstalled,
 		});
 		return false;
@@ -64,8 +80,8 @@ async function install(code: string): Promise<void> {
 	if (!theme) return;
 	await addTheme(theme);
 	os.alert({
-		type: 'success',
-		text: i18n.t('_theme.installed', { name: theme.name }),
+		type: "success",
+		text: i18n.t("_theme.installed", { name: theme.name }),
 	});
 }
 
@@ -75,6 +91,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts._theme.install,
-	icon: 'ph-download-simple ph-bold ph-lg',
+	icon: "ph-download-simple ph-bold ph-lg",
 });
 </script>
diff --git a/packages/client/src/pages/settings/theme.manage.vue b/packages/client/src/pages/settings/theme.manage.vue
index b0742b279e..a1b675ea5c 100644
--- a/packages/client/src/pages/settings/theme.manage.vue
+++ b/packages/client/src/pages/settings/theme.manage.vue
@@ -1,58 +1,90 @@
 <template>
-<div class="_formRoot">
-	<FormSelect v-model="selectedThemeId" class="_formBlock">
-		<template #label>{{ i18n.ts.theme }}</template>
-		<optgroup :label="i18n.ts._theme.installedThemes">
-			<option v-for="x in installedThemes" :key="x.id" :value="x.id">{{ x.name }}</option>
-		</optgroup>
-		<optgroup :label="i18n.ts._theme.builtinThemes">
-			<option v-for="x in builtinThemes" :key="x.id" :value="x.id">{{ x.name }}</option>
-		</optgroup>
-	</FormSelect>
-	<template v-if="selectedTheme">
-		<FormInput readonly :model-value="selectedTheme.author" class="_formBlock">
-			<template #label>{{ i18n.ts.author }}</template>
-		</FormInput>
-		<FormTextarea v-if="selectedTheme.desc" readonly :model-value="selectedTheme.desc" class="_formBlock">
-			<template #label>{{ i18n.ts._theme.description }}</template>
-		</FormTextarea>
-		<FormTextarea readonly tall :model-value="selectedThemeCode" class="_formBlock">
-			<template #label>{{ i18n.ts._theme.code }}</template>
-			<template #caption><button class="_textButton" @click="copyThemeCode()">{{ i18n.ts.copy }}</button></template>
-		</FormTextarea>
-		<FormButton v-if="!builtinThemes.some(t => t.id == selectedTheme.id)" class="_formBlock" danger @click="uninstall()"><i class="ph-trash ph-bold ph-lg"></i> {{ i18n.ts.uninstall }}</FormButton>
-	</template>
-</div>
+	<div class="_formRoot">
+		<FormSelect v-model="selectedThemeId" class="_formBlock">
+			<template #label>{{ i18n.ts.theme }}</template>
+			<optgroup :label="i18n.ts._theme.installedThemes">
+				<option v-for="x in installedThemes" :key="x.id" :value="x.id">
+					{{ x.name }}
+				</option>
+			</optgroup>
+			<optgroup :label="i18n.ts._theme.builtinThemes">
+				<option v-for="x in builtinThemes" :key="x.id" :value="x.id">
+					{{ x.name }}
+				</option>
+			</optgroup>
+		</FormSelect>
+		<template v-if="selectedTheme">
+			<FormInput
+				readonly
+				:model-value="selectedTheme.author"
+				class="_formBlock"
+			>
+				<template #label>{{ i18n.ts.author }}</template>
+			</FormInput>
+			<FormTextarea
+				v-if="selectedTheme.desc"
+				readonly
+				:model-value="selectedTheme.desc"
+				class="_formBlock"
+			>
+				<template #label>{{ i18n.ts._theme.description }}</template>
+			</FormTextarea>
+			<FormTextarea
+				readonly
+				tall
+				:model-value="selectedThemeCode"
+				class="_formBlock"
+			>
+				<template #label>{{ i18n.ts._theme.code }}</template>
+				<template #caption
+					><button class="_textButton" @click="copyThemeCode()">
+						{{ i18n.ts.copy }}
+					</button></template
+				>
+			</FormTextarea>
+			<FormButton
+				v-if="!builtinThemes.some((t) => t.id == selectedTheme.id)"
+				class="_formBlock"
+				danger
+				@click="uninstall()"
+				><i class="ph-trash ph-bold ph-lg"></i>
+				{{ i18n.ts.uninstall }}</FormButton
+			>
+		</template>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { computed, ref } from 'vue';
-import JSON5 from 'json5';
-import FormTextarea from '@/components/form/textarea.vue';
-import FormSelect from '@/components/form/select.vue';
-import FormInput from '@/components/form/input.vue';
-import FormButton from '@/components/MkButton.vue';
-import { Theme, getBuiltinThemesRef } from '@/scripts/theme';
-import copyToClipboard from '@/scripts/copy-to-clipboard';
-import * as os from '@/os';
-import { getThemes, removeTheme } from '@/theme-store';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import { computed, ref } from "vue";
+import JSON5 from "json5";
+import FormTextarea from "@/components/form/textarea.vue";
+import FormSelect from "@/components/form/select.vue";
+import FormInput from "@/components/form/input.vue";
+import FormButton from "@/components/MkButton.vue";
+import { Theme, getBuiltinThemesRef } from "@/scripts/theme";
+import copyToClipboard from "@/scripts/copy-to-clipboard";
+import * as os from "@/os";
+import { getThemes, removeTheme } from "@/theme-store";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
 const installedThemes = ref(getThemes());
 const builtinThemes = getBuiltinThemesRef();
 const selectedThemeId = ref(null);
 
-const themes = computed(() => [ ...installedThemes.value, ...builtinThemes.value ]);
+const themes = computed(() => [
+	...installedThemes.value,
+	...builtinThemes.value,
+]);
 
 const selectedTheme = computed(() => {
 	if (selectedThemeId.value == null) return null;
-	return themes.value.find(x => x.id === selectedThemeId.value);
+	return themes.value.find((x) => x.id === selectedThemeId.value);
 });
 
 const selectedThemeCode = computed(() => {
 	if (selectedTheme.value == null) return null;
-	return JSON5.stringify(selectedTheme.value, null, '\t');
+	return JSON5.stringify(selectedTheme.value, null, "\t");
 });
 
 function copyThemeCode() {
@@ -62,7 +94,9 @@ function copyThemeCode() {
 
 function uninstall() {
 	removeTheme(selectedTheme.value as Theme);
-	installedThemes.value = installedThemes.value.filter(t => t.id !== selectedThemeId.value);
+	installedThemes.value = installedThemes.value.filter(
+		(t) => t.id !== selectedThemeId.value
+	);
 	selectedThemeId.value = null;
 	os.success();
 }
@@ -73,6 +107,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts._theme.manage,
-	icon: 'ph-folder-notch-open ph-bold ph-lg',
+	icon: "ph-folder-notch-open ph-bold ph-lg",
 });
 </script>
diff --git a/packages/client/src/pages/settings/theme.vue b/packages/client/src/pages/settings/theme.vue
index 15c65bd105..67e940fa1a 100644
--- a/packages/client/src/pages/settings/theme.vue
+++ b/packages/client/src/pages/settings/theme.vue
@@ -1,139 +1,250 @@
 <template>
-<div class="_formRoot rsljpzjq">
-	<div v-adaptive-border class="rfqxtzch _panel _formBlock">
-		<div class="toggle">
-			<div class="toggleWrapper">
-				<input id="dn" v-model="darkMode" type="checkbox" class="dn"/>
-				<label for="dn" class="toggle">
-					<span class="before">{{ i18n.ts.light }}</span>
-					<span class="after">{{ i18n.ts.dark }}</span>
-					<span class="toggle__handler">
-						<span class="crater crater--1"></span>
-						<span class="crater crater--2"></span>
-						<span class="crater crater--3"></span>
-					</span>
-					<span class="star star--1"></span>
-					<span class="star star--2"></span>
-					<span class="star star--3"></span>
-					<span class="star star--4"></span>
-					<span class="star star--5"></span>
-					<span class="star star--6"></span>
-				</label>
+	<div class="_formRoot rsljpzjq">
+		<div v-adaptive-border class="rfqxtzch _panel _formBlock">
+			<div class="toggle">
+				<div class="toggleWrapper">
+					<input
+						id="dn"
+						v-model="darkMode"
+						type="checkbox"
+						class="dn"
+					/>
+					<label for="dn" class="toggle">
+						<span class="before">{{ i18n.ts.light }}</span>
+						<span class="after">{{ i18n.ts.dark }}</span>
+						<span class="toggle__handler">
+							<span class="crater crater--1"></span>
+							<span class="crater crater--2"></span>
+							<span class="crater crater--3"></span>
+						</span>
+						<span class="star star--1"></span>
+						<span class="star star--2"></span>
+						<span class="star star--3"></span>
+						<span class="star star--4"></span>
+						<span class="star star--5"></span>
+						<span class="star star--6"></span>
+					</label>
+				</div>
+			</div>
+			<div class="sync">
+				<FormSwitch v-model="syncDeviceDarkMode">{{
+					i18n.ts.syncDeviceDarkMode
+				}}</FormSwitch>
 			</div>
 		</div>
-		<div class="sync">
-			<FormSwitch v-model="syncDeviceDarkMode">{{ i18n.ts.syncDeviceDarkMode }}</FormSwitch>
+
+		<div class="selects _formBlock">
+			<FormSelect v-model="lightThemeId" large class="select">
+				<template #label>{{ i18n.ts.themeForLightMode }}</template>
+				<template #prefix
+					><i class="ph-sun ph-bold ph-lg"></i
+				></template>
+				<option
+					v-if="instanceLightTheme"
+					:key="'instance:' + instanceLightTheme.id"
+					:value="instanceLightTheme.id"
+				>
+					{{ instanceLightTheme.name }}
+				</option>
+				<optgroup
+					v-if="installedLightThemes.length > 0"
+					:label="i18n.ts._theme.installedThemes"
+				>
+					<option
+						v-for="x in installedLightThemes"
+						:key="'installed:' + x.id"
+						:value="x.id"
+					>
+						{{ x.name }}
+					</option>
+				</optgroup>
+				<optgroup :label="i18n.ts._theme.builtinThemes">
+					<option
+						v-for="x in builtinLightThemes"
+						:key="'builtin:' + x.id"
+						:value="x.id"
+					>
+						{{ x.name }}
+					</option>
+				</optgroup>
+			</FormSelect>
+			<FormSelect v-model="darkThemeId" large class="select">
+				<template #label>{{ i18n.ts.themeForDarkMode }}</template>
+				<template #prefix
+					><i class="ph-moon ph-bold ph-lg"></i
+				></template>
+				<option
+					v-if="instanceDarkTheme"
+					:key="'instance:' + instanceDarkTheme.id"
+					:value="instanceDarkTheme.id"
+				>
+					{{ instanceDarkTheme.name }}
+				</option>
+				<optgroup
+					v-if="installedDarkThemes.length > 0"
+					:label="i18n.ts._theme.installedThemes"
+				>
+					<option
+						v-for="x in installedDarkThemes"
+						:key="'installed:' + x.id"
+						:value="x.id"
+					>
+						{{ x.name }}
+					</option>
+				</optgroup>
+				<optgroup :label="i18n.ts._theme.builtinThemes">
+					<option
+						v-for="x in builtinDarkThemes"
+						:key="'builtin:' + x.id"
+						:value="x.id"
+					>
+						{{ x.name }}
+					</option>
+				</optgroup>
+			</FormSelect>
 		</div>
+
+		<FormSection>
+			<div class="_formLinksGrid">
+				<FormLink to="/settings/theme/manage"
+					><template #icon
+						><i
+							class="ph-folder-notch-open ph-bold ph-lg"
+						></i></template
+					>{{ i18n.ts._theme.manage
+					}}<template #suffix>{{ themesCount }}</template></FormLink
+				>
+				<FormLink to="https://assets.misskey.io/theme/list" external
+					><template #icon
+						><i class="ph-planet ph-bold ph-lg"></i></template
+					>{{ i18n.ts._theme.explore }}</FormLink
+				>
+				<FormLink to="/settings/theme/install"
+					><template #icon
+						><i
+							class="ph-download-simple ph-bold ph-lg"
+						></i></template
+					>{{ i18n.ts._theme.install }}</FormLink
+				>
+				<FormLink to="/theme-editor"
+					><template #icon
+						><i
+							class="ph-paint-brush-broad ph-bold ph-lg"
+						></i></template
+					>{{ i18n.ts._theme.make }}</FormLink
+				>
+			</div>
+		</FormSection>
+
+		<FormButton
+			v-if="wallpaper == null"
+			class="_formBlock"
+			@click="setWallpaper"
+			>{{ i18n.ts.setWallpaper }}</FormButton
+		>
+		<FormButton v-else class="_formBlock" @click="wallpaper = null">{{
+			i18n.ts.removeWallpaper
+		}}</FormButton>
 	</div>
-
-	<div class="selects _formBlock">
-		<FormSelect v-model="lightThemeId" large class="select">
-			<template #label>{{ i18n.ts.themeForLightMode }}</template>
-			<template #prefix><i class="ph-sun ph-bold ph-lg"></i></template>
-			<option v-if="instanceLightTheme" :key="'instance:' + instanceLightTheme.id" :value="instanceLightTheme.id">{{ instanceLightTheme.name }}</option>
-			<optgroup v-if="installedLightThemes.length > 0" :label="i18n.ts._theme.installedThemes">
-				<option v-for="x in installedLightThemes" :key="'installed:' + x.id" :value="x.id">{{ x.name }}</option>
-			</optgroup>
-			<optgroup :label="i18n.ts._theme.builtinThemes">
-				<option v-for="x in builtinLightThemes" :key="'builtin:' + x.id" :value="x.id">{{ x.name }}</option>
-			</optgroup>
-		</FormSelect>
-		<FormSelect v-model="darkThemeId" large class="select">
-			<template #label>{{ i18n.ts.themeForDarkMode }}</template>
-			<template #prefix><i class="ph-moon ph-bold ph-lg"></i></template>
-			<option v-if="instanceDarkTheme" :key="'instance:' + instanceDarkTheme.id" :value="instanceDarkTheme.id">{{ instanceDarkTheme.name }}</option>
-			<optgroup v-if="installedDarkThemes.length > 0" :label="i18n.ts._theme.installedThemes">
-				<option v-for="x in installedDarkThemes" :key="'installed:' + x.id" :value="x.id">{{ x.name }}</option>
-			</optgroup>
-			<optgroup :label="i18n.ts._theme.builtinThemes">
-				<option v-for="x in builtinDarkThemes" :key="'builtin:' + x.id" :value="x.id">{{ x.name }}</option>
-			</optgroup>
-		</FormSelect>
-	</div>
-
-	<FormSection>
-		<div class="_formLinksGrid">
-			<FormLink to="/settings/theme/manage"><template #icon><i class="ph-folder-notch-open ph-bold ph-lg"></i></template>{{ i18n.ts._theme.manage }}<template #suffix>{{ themesCount }}</template></FormLink>
-			<FormLink to="https://assets.misskey.io/theme/list" external><template #icon><i class="ph-planet ph-bold ph-lg"></i></template>{{ i18n.ts._theme.explore }}</FormLink>
-			<FormLink to="/settings/theme/install"><template #icon><i class="ph-download-simple ph-bold ph-lg"></i></template>{{ i18n.ts._theme.install }}</FormLink>
-			<FormLink to="/theme-editor"><template #icon><i class="ph-paint-brush-broad ph-bold ph-lg"></i></template>{{ i18n.ts._theme.make }}</FormLink>
-		</div>
-	</FormSection>
-
-	<FormButton v-if="wallpaper == null" class="_formBlock" @click="setWallpaper">{{ i18n.ts.setWallpaper }}</FormButton>
-	<FormButton v-else class="_formBlock" @click="wallpaper = null">{{ i18n.ts.removeWallpaper }}</FormButton>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { computed, onActivated, ref, watch } from 'vue';
-import JSON5 from 'json5';
-import FormSwitch from '@/components/form/switch.vue';
-import FormSelect from '@/components/form/select.vue';
-import FormSection from '@/components/form/section.vue';
-import FormLink from '@/components/form/link.vue';
-import FormButton from '@/components/MkButton.vue';
-import { getBuiltinThemesRef } from '@/scripts/theme';
-import { selectFile } from '@/scripts/select-file';
-import { isDeviceDarkmode } from '@/scripts/is-device-darkmode';
-import { ColdDeviceStorage , defaultStore } from '@/store';
-import { i18n } from '@/i18n';
-import { instance } from '@/instance';
-import { uniqueBy } from '@/scripts/array';
-import { fetchThemes, getThemes } from '@/theme-store';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import { computed, onActivated, ref, watch } from "vue";
+import JSON5 from "json5";
+import FormSwitch from "@/components/form/switch.vue";
+import FormSelect from "@/components/form/select.vue";
+import FormSection from "@/components/form/section.vue";
+import FormLink from "@/components/form/link.vue";
+import FormButton from "@/components/MkButton.vue";
+import { getBuiltinThemesRef } from "@/scripts/theme";
+import { selectFile } from "@/scripts/select-file";
+import { isDeviceDarkmode } from "@/scripts/is-device-darkmode";
+import { ColdDeviceStorage, defaultStore } from "@/store";
+import { i18n } from "@/i18n";
+import { instance } from "@/instance";
+import { uniqueBy } from "@/scripts/array";
+import { fetchThemes, getThemes } from "@/theme-store";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
 const installedThemes = ref(getThemes());
 const builtinThemes = getBuiltinThemesRef();
 
-const instanceDarkTheme = computed(() => instance.defaultDarkTheme ? JSON5.parse(instance.defaultDarkTheme) : null);
-const installedDarkThemes = computed(() => installedThemes.value.filter(t => t.base === 'dark' || t.kind === 'dark'));
-const builtinDarkThemes = computed(() => builtinThemes.value.filter(t => t.base === 'dark' || t.kind === 'dark'));
-const instanceLightTheme = computed(() => instance.defaultLightTheme ? JSON5.parse(instance.defaultLightTheme) : null);
-const installedLightThemes = computed(() => installedThemes.value.filter(t => t.base === 'light' || t.kind === 'light'));
-const builtinLightThemes = computed(() => builtinThemes.value.filter(t => t.base === 'light' || t.kind === 'light'));
-const themes = computed(() => uniqueBy([ instanceDarkTheme.value, instanceLightTheme.value, ...builtinThemes.value, ...installedThemes.value ].filter(x => x != null), theme => theme.id));
+const instanceDarkTheme = computed(() =>
+	instance.defaultDarkTheme ? JSON5.parse(instance.defaultDarkTheme) : null
+);
+const installedDarkThemes = computed(() =>
+	installedThemes.value.filter((t) => t.base === "dark" || t.kind === "dark")
+);
+const builtinDarkThemes = computed(() =>
+	builtinThemes.value.filter((t) => t.base === "dark" || t.kind === "dark")
+);
+const instanceLightTheme = computed(() =>
+	instance.defaultLightTheme ? JSON5.parse(instance.defaultLightTheme) : null
+);
+const installedLightThemes = computed(() =>
+	installedThemes.value.filter(
+		(t) => t.base === "light" || t.kind === "light"
+	)
+);
+const builtinLightThemes = computed(() =>
+	builtinThemes.value.filter((t) => t.base === "light" || t.kind === "light")
+);
+const themes = computed(() =>
+	uniqueBy(
+		[
+			instanceDarkTheme.value,
+			instanceLightTheme.value,
+			...builtinThemes.value,
+			...installedThemes.value,
+		].filter((x) => x != null),
+		(theme) => theme.id
+	)
+);
 
-const darkTheme = ColdDeviceStorage.ref('darkTheme');
+const darkTheme = ColdDeviceStorage.ref("darkTheme");
 const darkThemeId = computed({
 	get() {
 		return darkTheme.value.id;
 	},
 	set(id) {
-		const t = themes.value.find(x => x.id === id);
-		if (t) { // テーマエディタでテーマを作成したときなどは、themesに反映されないため undefined になる
-			ColdDeviceStorage.set('darkTheme', t);
+		const t = themes.value.find((x) => x.id === id);
+		if (t) {
+			// テーマエディタでテーマを作成したときなどは、themesに反映されないため undefined になる
+			ColdDeviceStorage.set("darkTheme", t);
 		}
 	},
 });
-const lightTheme = ColdDeviceStorage.ref('lightTheme');
+const lightTheme = ColdDeviceStorage.ref("lightTheme");
 const lightThemeId = computed({
 	get() {
 		return lightTheme.value.id;
 	},
 	set(id) {
-		const t = themes.value.find(x => x.id === id);
-		if (t) { // テーマエディタでテーマを作成したときなどは、themesに反映されないため undefined になる
-			ColdDeviceStorage.set('lightTheme', t);
+		const t = themes.value.find((x) => x.id === id);
+		if (t) {
+			// テーマエディタでテーマを作成したときなどは、themesに反映されないため undefined になる
+			ColdDeviceStorage.set("lightTheme", t);
 		}
 	},
 });
-const darkMode = computed(defaultStore.makeGetterSetter('darkMode'));
-const syncDeviceDarkMode = computed(ColdDeviceStorage.makeGetterSetter('syncDeviceDarkMode'));
-const wallpaper = ref(localStorage.getItem('wallpaper'));
+const darkMode = computed(defaultStore.makeGetterSetter("darkMode"));
+const syncDeviceDarkMode = computed(
+	ColdDeviceStorage.makeGetterSetter("syncDeviceDarkMode")
+);
+const wallpaper = ref(localStorage.getItem("wallpaper"));
 const themesCount = installedThemes.value.length;
 
 watch(syncDeviceDarkMode, () => {
 	if (syncDeviceDarkMode.value) {
-		defaultStore.set('darkMode', isDeviceDarkmode());
+		defaultStore.set("darkMode", isDeviceDarkmode());
 	}
 });
 
 watch(wallpaper, () => {
 	if (wallpaper.value == null) {
-		localStorage.removeItem('wallpaper');
+		localStorage.removeItem("wallpaper");
 	} else {
-		localStorage.setItem('wallpaper', wallpaper.value);
+		localStorage.setItem("wallpaper", wallpaper.value);
 	}
 	location.reload();
 });
@@ -149,7 +260,7 @@ fetchThemes().then(() => {
 });
 
 function setWallpaper(event) {
-	selectFile(event.currentTarget ?? event.target, null).then(file => {
+	selectFile(event.currentTarget ?? event.target, null).then((file) => {
 		wallpaper.value = file.url;
 	});
 }
@@ -160,7 +271,7 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.theme,
-	icon: 'ph-palette ph-bold ph-lg',
+	icon: "ph-palette ph-bold ph-lg",
 });
 </script>
 
@@ -176,7 +287,8 @@ definePageMetadata({
 		&.disabled {
 			opacity: 0.7;
 
-			&, * {
+			&,
+			* {
 				cursor: not-allowed !important;
 			}
 		}
@@ -200,11 +312,13 @@ definePageMetadata({
 			position: relative;
 			width: 90px;
 			height: 50px;
-			background-color: #83D8FF;
+			background-color: #83d8ff;
 			border-radius: 90px - 6;
-			transition: background-color 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95) !important;
+			transition: background-color 200ms
+				cubic-bezier(0.445, 0.05, 0.55, 0.95) !important;
 
-			> .before, > .after {
+			> .before,
+			> .after {
 				position: absolute;
 				top: 15px;
 				transition: color 1s ease;
@@ -229,15 +343,15 @@ definePageMetadata({
 			left: 3px;
 			width: 50px - 6;
 			height: 50px - 6;
-			background-color: #FFCF96;
+			background-color: #ffcf96;
 			border-radius: 50px;
-			box-shadow: 0 2px 6px rgba(0,0,0,.3);
+			box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
 			transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
-			transform:  rotate(-45deg);
+			transform: rotate(-45deg);
 
 			.crater {
 				position: absolute;
-				background-color: #E8CDA5;
+				background-color: #e8cda5;
 				opacity: 0;
 				transition: opacity 200ms ease-in-out !important;
 				border-radius: 100%;
@@ -309,7 +423,7 @@ definePageMetadata({
 			z-index: 0;
 			width: 2px;
 			height: 2px;
-			transform: translate3d(3px,0,0);
+			transform: translate3d(3px, 0, 0);
 		}
 
 		.star--5 {
@@ -318,7 +432,7 @@ definePageMetadata({
 			z-index: 0;
 			width: 3px;
 			height: 3px;
-			transform: translate3d(3px,0,0);
+			transform: translate3d(3px, 0, 0);
 		}
 
 		.star--6 {
@@ -327,12 +441,12 @@ definePageMetadata({
 			z-index: 0;
 			width: 2px;
 			height: 2px;
-			transform: translate3d(3px,0,0);
+			transform: translate3d(3px, 0, 0);
 		}
 
 		input:checked {
 			+ .toggle {
-				background-color: #749DD6;
+				background-color: #749dd6;
 
 				> .before {
 					color: var(--fg);
@@ -343,10 +457,12 @@ definePageMetadata({
 				}
 
 				.toggle__handler {
-					background-color: #FFE5B5;
+					background-color: #ffe5b5;
 					transform: translate3d(40px, 0, 0) rotate(0);
 
-					.crater { opacity: 1; }
+					.crater {
+						opacity: 1;
+					}
 				}
 
 				.star--1 {
@@ -370,19 +486,22 @@ definePageMetadata({
 				.star--5,
 				.star--6 {
 					opacity: 1;
-					transform: translate3d(0,0,0);
+					transform: translate3d(0, 0, 0);
 				}
 
 				.star--4 {
-					transition: all 300ms 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95) !important;
+					transition: all 300ms 200ms
+						cubic-bezier(0.445, 0.05, 0.55, 0.95) !important;
 				}
 
 				.star--5 {
-					transition: all 300ms 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95) !important;
+					transition: all 300ms 300ms
+						cubic-bezier(0.445, 0.05, 0.55, 0.95) !important;
 				}
 
 				.star--6 {
-					transition: all 300ms 400ms cubic-bezier(0.445, 0.05, 0.55, 0.95) !important;
+					transition: all 300ms 400ms
+						cubic-bezier(0.445, 0.05, 0.55, 0.95) !important;
 				}
 			}
 		}
diff --git a/packages/client/src/pages/settings/webhook.edit.vue b/packages/client/src/pages/settings/webhook.edit.vue
index 7c4cc3460d..7d7a2759c5 100644
--- a/packages/client/src/pages/settings/webhook.edit.vue
+++ b/packages/client/src/pages/settings/webhook.edit.vue
@@ -1,53 +1,73 @@
 <template>
-<div class="_formRoot">
-	<FormInput v-model="name" class="_formBlock">
-		<template #label>Name</template>
-	</FormInput>
+	<div class="_formRoot">
+		<FormInput v-model="name" class="_formBlock">
+			<template #label>Name</template>
+		</FormInput>
 
-	<FormInput v-model="url" type="url" class="_formBlock">
-		<template #label>URL</template>
-	</FormInput>
+		<FormInput v-model="url" type="url" class="_formBlock">
+			<template #label>URL</template>
+		</FormInput>
 
-	<FormInput v-model="secret" class="_formBlock">
-		<template #prefix><i class="ph-lock ph-bold ph-lg"></i></template>
-		<template #label>Secret</template>
-	</FormInput>
+		<FormInput v-model="secret" class="_formBlock">
+			<template #prefix><i class="ph-lock ph-bold ph-lg"></i></template>
+			<template #label>Secret</template>
+		</FormInput>
 
-	<FormSection>
-		<template #label>Events</template>
+		<FormSection>
+			<template #label>Events</template>
 
-		<FormSwitch v-model="event_follow" class="_formBlock">Follow</FormSwitch>
-		<FormSwitch v-model="event_followed" class="_formBlock">Followed</FormSwitch>
-		<FormSwitch v-model="event_note" class="_formBlock">Note</FormSwitch>
-		<FormSwitch v-model="event_reply" class="_formBlock">Reply</FormSwitch>
-		<FormSwitch v-model="event_renote" class="_formBlock">Renote</FormSwitch>
-		<FormSwitch v-model="event_reaction" class="_formBlock">Reaction</FormSwitch>
-		<FormSwitch v-model="event_mention" class="_formBlock">Mention</FormSwitch>
-	</FormSection>
+			<FormSwitch v-model="event_follow" class="_formBlock"
+				>Follow</FormSwitch
+			>
+			<FormSwitch v-model="event_followed" class="_formBlock"
+				>Followed</FormSwitch
+			>
+			<FormSwitch v-model="event_note" class="_formBlock"
+				>Note</FormSwitch
+			>
+			<FormSwitch v-model="event_reply" class="_formBlock"
+				>Reply</FormSwitch
+			>
+			<FormSwitch v-model="event_renote" class="_formBlock"
+				>Renote</FormSwitch
+			>
+			<FormSwitch v-model="event_reaction" class="_formBlock"
+				>Reaction</FormSwitch
+			>
+			<FormSwitch v-model="event_mention" class="_formBlock"
+				>Mention</FormSwitch
+			>
+		</FormSection>
 
-	<FormSwitch v-model="active" class="_formBlock">Active</FormSwitch>
+		<FormSwitch v-model="active" class="_formBlock">Active</FormSwitch>
 
-	<div class="_formBlock" style="display: flex; gap: var(--margin); flex-wrap: wrap;">
-		<FormButton primary inline @click="save"><i class="ph-check ph-bold ph-lg"></i> {{ i18n.ts.save }}</FormButton>
+		<div
+			class="_formBlock"
+			style="display: flex; gap: var(--margin); flex-wrap: wrap"
+		>
+			<FormButton primary inline @click="save"
+				><i class="ph-check ph-bold ph-lg"></i>
+				{{ i18n.ts.save }}</FormButton
+			>
+		</div>
 	</div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import FormInput from '@/components/form/input.vue';
-import FormSection from '@/components/form/section.vue';
-import FormSwitch from '@/components/form/switch.vue';
-import FormButton from '@/components/MkButton.vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import {} from "vue";
+import FormInput from "@/components/form/input.vue";
+import FormSection from "@/components/form/section.vue";
+import FormSwitch from "@/components/form/switch.vue";
+import FormButton from "@/components/MkButton.vue";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
 const props = defineProps<{
 	webhookId: string;
 }>();
 
-const webhook = await os.api('i/webhooks/show', {
+const webhook = await os.api("i/webhooks/show", {
 	webhookId: props.webhookId,
 });
 
@@ -56,25 +76,25 @@ let url = $ref(webhook.url);
 let secret = $ref(webhook.secret);
 let active = $ref(webhook.active);
 
-let event_follow = $ref(webhook.on.includes('follow'));
-let event_followed = $ref(webhook.on.includes('followed'));
-let event_note = $ref(webhook.on.includes('note'));
-let event_reply = $ref(webhook.on.includes('reply'));
-let event_renote = $ref(webhook.on.includes('renote'));
-let event_reaction = $ref(webhook.on.includes('reaction'));
-let event_mention = $ref(webhook.on.includes('mention'));
+let event_follow = $ref(webhook.on.includes("follow"));
+let event_followed = $ref(webhook.on.includes("followed"));
+let event_note = $ref(webhook.on.includes("note"));
+let event_reply = $ref(webhook.on.includes("reply"));
+let event_renote = $ref(webhook.on.includes("renote"));
+let event_reaction = $ref(webhook.on.includes("reaction"));
+let event_mention = $ref(webhook.on.includes("mention"));
 
 async function save(): Promise<void> {
 	const events = [];
-	if (event_follow) events.push('follow');
-	if (event_followed) events.push('followed');
-	if (event_note) events.push('note');
-	if (event_reply) events.push('reply');
-	if (event_renote) events.push('renote');
-	if (event_reaction) events.push('reaction');
-	if (event_mention) events.push('mention');
+	if (event_follow) events.push("follow");
+	if (event_followed) events.push("followed");
+	if (event_note) events.push("note");
+	if (event_reply) events.push("reply");
+	if (event_renote) events.push("renote");
+	if (event_reaction) events.push("reaction");
+	if (event_mention) events.push("mention");
 
-	os.apiWithDialog('i/webhooks/update', {
+	os.apiWithDialog("i/webhooks/update", {
 		name,
 		url,
 		secret,
@@ -88,7 +108,7 @@ const headerActions = $computed(() => []);
 const headerTabs = $computed(() => []);
 
 definePageMetadata({
-	title: 'Edit webhook',
-	icon: 'ph-lightning ph-bold ph-lg',
+	title: "Edit webhook",
+	icon: "ph-lightning ph-bold ph-lg",
 });
 </script>
diff --git a/packages/client/src/pages/settings/webhook.new.vue b/packages/client/src/pages/settings/webhook.new.vue
index ab16ccecd4..ea45312d5e 100644
--- a/packages/client/src/pages/settings/webhook.new.vue
+++ b/packages/client/src/pages/settings/webhook.new.vue
@@ -1,49 +1,69 @@
 <template>
-<div class="_formRoot">
-	<FormInput v-model="name" class="_formBlock">
-		<template #label>Name</template>
-	</FormInput>
+	<div class="_formRoot">
+		<FormInput v-model="name" class="_formBlock">
+			<template #label>Name</template>
+		</FormInput>
 
-	<FormInput v-model="url" type="url" class="_formBlock">
-		<template #label>URL</template>
-	</FormInput>
+		<FormInput v-model="url" type="url" class="_formBlock">
+			<template #label>URL</template>
+		</FormInput>
 
-	<FormInput v-model="secret" class="_formBlock">
-		<template #prefix><i class="ph-lock ph-bold ph-lg"></i></template>
-		<template #label>Secret</template>
-	</FormInput>
+		<FormInput v-model="secret" class="_formBlock">
+			<template #prefix><i class="ph-lock ph-bold ph-lg"></i></template>
+			<template #label>Secret</template>
+		</FormInput>
 
-	<FormSection>
-		<template #label>Events</template>
+		<FormSection>
+			<template #label>Events</template>
 
-		<FormSwitch v-model="event_follow" class="_formBlock">Follow</FormSwitch>
-		<FormSwitch v-model="event_followed" class="_formBlock">Followed</FormSwitch>
-		<FormSwitch v-model="event_note" class="_formBlock">Note</FormSwitch>
-		<FormSwitch v-model="event_reply" class="_formBlock">Reply</FormSwitch>
-		<FormSwitch v-model="event_renote" class="_formBlock">Renote</FormSwitch>
-		<FormSwitch v-model="event_reaction" class="_formBlock">Reaction</FormSwitch>
-		<FormSwitch v-model="event_mention" class="_formBlock">Mention</FormSwitch>
-	</FormSection>
+			<FormSwitch v-model="event_follow" class="_formBlock"
+				>Follow</FormSwitch
+			>
+			<FormSwitch v-model="event_followed" class="_formBlock"
+				>Followed</FormSwitch
+			>
+			<FormSwitch v-model="event_note" class="_formBlock"
+				>Note</FormSwitch
+			>
+			<FormSwitch v-model="event_reply" class="_formBlock"
+				>Reply</FormSwitch
+			>
+			<FormSwitch v-model="event_renote" class="_formBlock"
+				>Renote</FormSwitch
+			>
+			<FormSwitch v-model="event_reaction" class="_formBlock"
+				>Reaction</FormSwitch
+			>
+			<FormSwitch v-model="event_mention" class="_formBlock"
+				>Mention</FormSwitch
+			>
+		</FormSection>
 
-	<div class="_formBlock" style="display: flex; gap: var(--margin); flex-wrap: wrap;">
-		<FormButton primary inline @click="create"><i class="ph-check ph-bold ph-lg"></i> {{ i18n.ts.create }}</FormButton>
+		<div
+			class="_formBlock"
+			style="display: flex; gap: var(--margin); flex-wrap: wrap"
+		>
+			<FormButton primary inline @click="create"
+				><i class="ph-check ph-bold ph-lg"></i>
+				{{ i18n.ts.create }}</FormButton
+			>
+		</div>
 	</div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import FormInput from '@/components/form/input.vue';
-import FormSection from '@/components/form/section.vue';
-import FormSwitch from '@/components/form/switch.vue';
-import FormButton from '@/components/MkButton.vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import {} from "vue";
+import FormInput from "@/components/form/input.vue";
+import FormSection from "@/components/form/section.vue";
+import FormSwitch from "@/components/form/switch.vue";
+import FormButton from "@/components/MkButton.vue";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
-let name = $ref('');
-let url = $ref('');
-let secret = $ref('');
+let name = $ref("");
+let url = $ref("");
+let secret = $ref("");
 
 let event_follow = $ref(true);
 let event_followed = $ref(true);
@@ -55,15 +75,15 @@ let event_mention = $ref(true);
 
 async function create(): Promise<void> {
 	const events = [];
-	if (event_follow) events.push('follow');
-	if (event_followed) events.push('followed');
-	if (event_note) events.push('note');
-	if (event_reply) events.push('reply');
-	if (event_renote) events.push('renote');
-	if (event_reaction) events.push('reaction');
-	if (event_mention) events.push('mention');
+	if (event_follow) events.push("follow");
+	if (event_followed) events.push("followed");
+	if (event_note) events.push("note");
+	if (event_reply) events.push("reply");
+	if (event_renote) events.push("renote");
+	if (event_reaction) events.push("reaction");
+	if (event_mention) events.push("mention");
 
-	os.apiWithDialog('i/webhooks/create', {
+	os.apiWithDialog("i/webhooks/create", {
 		name,
 		url,
 		secret,
@@ -76,7 +96,7 @@ const headerActions = $computed(() => []);
 const headerTabs = $computed(() => []);
 
 definePageMetadata({
-	title: 'Create new webhook',
-	icon: 'ph-lightning ph-bold ph-lg',
+	title: "Create new webhook",
+	icon: "ph-lightning ph-bold ph-lg",
 });
 </script>
diff --git a/packages/client/src/pages/settings/webhook.vue b/packages/client/src/pages/settings/webhook.vue
index bf5f8ca4a9..14309a1201 100644
--- a/packages/client/src/pages/settings/webhook.vue
+++ b/packages/client/src/pages/settings/webhook.vue
@@ -1,44 +1,68 @@
 <template>
-<div class="_formRoot">
-	<FormSection>
-		<FormLink :to="`/settings/webhook/new`">
-			Create webhook
-		</FormLink>
-	</FormSection>
+	<div class="_formRoot">
+		<FormSection>
+			<FormLink :to="`/settings/webhook/new`"> Create webhook </FormLink>
+		</FormSection>
 
-	<FormSection>
-		<MkPagination :pagination="pagination">
-			<template #default="{items}">
-				<FormLink v-for="webhook in items" :key="webhook.id" :to="`/settings/webhook/edit/${webhook.id}`" class="_formBlock">
-					<template #icon>
-						<i v-if="webhook.active === false" class="ph-pause-circle ph-bold ph-lg"></i>
-						<i v-else-if="webhook.latestStatus === null" class="ph-circle ph-fill"></i>
-						<i v-else-if="[200, 201, 204].includes(webhook.latestStatus)" class="ph-check ph-bold ph-lg" :style="{ color: 'var(--success)' }"></i>
-						<i v-else class="ph-warning ph-bold ph-lg" :style="{ color: 'var(--error)' }"></i>
-					</template>
-					{{ webhook.name || webhook.url }}
-					<template #suffix>
-						<MkTime v-if="webhook.latestSentAt" :time="webhook.latestSentAt"></MkTime>
-					</template>
-				</FormLink>
-			</template>
-		</MkPagination>
-	</FormSection>
-</div>
+		<FormSection>
+			<MkPagination :pagination="pagination">
+				<template #default="{ items }">
+					<FormLink
+						v-for="webhook in items"
+						:key="webhook.id"
+						:to="`/settings/webhook/edit/${webhook.id}`"
+						class="_formBlock"
+					>
+						<template #icon>
+							<i
+								v-if="webhook.active === false"
+								class="ph-pause-circle ph-bold ph-lg"
+							></i>
+							<i
+								v-else-if="webhook.latestStatus === null"
+								class="ph-circle ph-fill"
+							></i>
+							<i
+								v-else-if="
+									[200, 201, 204].includes(
+										webhook.latestStatus
+									)
+								"
+								class="ph-check ph-bold ph-lg"
+								:style="{ color: 'var(--success)' }"
+							></i>
+							<i
+								v-else
+								class="ph-warning ph-bold ph-lg"
+								:style="{ color: 'var(--error)' }"
+							></i>
+						</template>
+						{{ webhook.name || webhook.url }}
+						<template #suffix>
+							<MkTime
+								v-if="webhook.latestSentAt"
+								:time="webhook.latestSentAt"
+							></MkTime>
+						</template>
+					</FormLink>
+				</template>
+			</MkPagination>
+		</FormSection>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import MkPagination from '@/components/MkPagination.vue';
-import FormSection from '@/components/form/section.vue';
-import FormLink from '@/components/form/link.vue';
-import { userPage } from '@/filters/user';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import {} from "vue";
+import MkPagination from "@/components/MkPagination.vue";
+import FormSection from "@/components/form/section.vue";
+import FormLink from "@/components/form/link.vue";
+import { userPage } from "@/filters/user";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
 const pagination = {
-	endpoint: 'i/webhooks/list' as const,
+	endpoint: "i/webhooks/list" as const,
 	limit: 10,
 };
 
@@ -47,7 +71,7 @@ const headerActions = $computed(() => []);
 const headerTabs = $computed(() => []);
 
 definePageMetadata({
-	title: 'Webhook',
-	icon: 'ph-lightning ph-bold ph-lg',
+	title: "Webhook",
+	icon: "ph-lightning ph-bold ph-lg",
 });
 </script>
diff --git a/packages/client/src/pages/settings/word-mute.vue b/packages/client/src/pages/settings/word-mute.vue
index 744ab0395a..9c69358bf9 100644
--- a/packages/client/src/pages/settings/word-mute.vue
+++ b/packages/client/src/pages/settings/word-mute.vue
@@ -1,62 +1,86 @@
 <template>
-<div class="_formRoot">
-	<MkTab v-model="tab" class="_formBlock">
-		<option value="soft">{{ i18n.ts._wordMute.soft }}</option>
-		<option value="hard">{{ i18n.ts._wordMute.hard }}</option>
-	</MkTab>
-	<div class="_formBlock">
-		<div v-show="tab === 'soft'">
-			<MkInfo class="_formBlock">{{ i18n.ts._wordMute.softDescription }}</MkInfo>
-			<FormTextarea v-model="softMutedWords" class="_formBlock">
-				<span>{{ i18n.ts._wordMute.muteWords }}</span>
-				<template #caption>{{ i18n.ts._wordMute.muteWordsDescription }}<br>{{ i18n.ts._wordMute.muteWordsDescription2 }}</template>
-			</FormTextarea>
-		</div>
-		<div v-show="tab === 'hard'">
-			<MkInfo class="_formBlock">{{ i18n.ts._wordMute.hardDescription }} {{ i18n.ts.reflectMayTakeTime }}</MkInfo>
-			<FormTextarea v-model="hardMutedWords" class="_formBlock">
-				<span>{{ i18n.ts._wordMute.muteWords }}</span>
-				<template #caption>{{ i18n.ts._wordMute.muteWordsDescription }}<br>{{ i18n.ts._wordMute.muteWordsDescription2 }}</template>
-			</FormTextarea>
-			<MkKeyValue v-if="hardWordMutedNotesCount != null" class="_formBlock">
-				<template #key>{{ i18n.ts._wordMute.mutedNotes }}</template>
-				<template #value>{{ number(hardWordMutedNotesCount) }}</template>
-			</MkKeyValue>
+	<div class="_formRoot">
+		<MkTab v-model="tab" class="_formBlock">
+			<option value="soft">{{ i18n.ts._wordMute.soft }}</option>
+			<option value="hard">{{ i18n.ts._wordMute.hard }}</option>
+		</MkTab>
+		<div class="_formBlock">
+			<div v-show="tab === 'soft'">
+				<MkInfo class="_formBlock">{{
+					i18n.ts._wordMute.softDescription
+				}}</MkInfo>
+				<FormTextarea v-model="softMutedWords" class="_formBlock">
+					<span>{{ i18n.ts._wordMute.muteWords }}</span>
+					<template #caption
+						>{{ i18n.ts._wordMute.muteWordsDescription }}<br />{{
+							i18n.ts._wordMute.muteWordsDescription2
+						}}</template
+					>
+				</FormTextarea>
+			</div>
+			<div v-show="tab === 'hard'">
+				<MkInfo class="_formBlock"
+					>{{ i18n.ts._wordMute.hardDescription }}
+					{{ i18n.ts.reflectMayTakeTime }}</MkInfo
+				>
+				<FormTextarea v-model="hardMutedWords" class="_formBlock">
+					<span>{{ i18n.ts._wordMute.muteWords }}</span>
+					<template #caption
+						>{{ i18n.ts._wordMute.muteWordsDescription }}<br />{{
+							i18n.ts._wordMute.muteWordsDescription2
+						}}</template
+					>
+				</FormTextarea>
+				<MkKeyValue
+					v-if="hardWordMutedNotesCount != null"
+					class="_formBlock"
+				>
+					<template #key>{{ i18n.ts._wordMute.mutedNotes }}</template>
+					<template #value>{{
+						number(hardWordMutedNotesCount)
+					}}</template>
+				</MkKeyValue>
+			</div>
 		</div>
+		<MkButton primary inline :disabled="!changed" @click="save()"
+			><i class="ph-floppy-disk-back ph-bold ph-lg"></i>
+			{{ i18n.ts.save }}</MkButton
+		>
 	</div>
-	<MkButton primary inline :disabled="!changed" @click="save()"><i class="ph-floppy-disk-back ph-bold ph-lg"></i> {{ i18n.ts.save }}</MkButton>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { ref, watch } from 'vue';
-import FormTextarea from '@/components/form/textarea.vue';
-import MkKeyValue from '@/components/MkKeyValue.vue';
-import MkButton from '@/components/MkButton.vue';
-import MkInfo from '@/components/MkInfo.vue';
-import MkTab from '@/components/MkTab.vue';
-import * as os from '@/os';
-import number from '@/filters/number';
-import { defaultStore } from '@/store';
-import { $i } from '@/account';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import { ref, watch } from "vue";
+import FormTextarea from "@/components/form/textarea.vue";
+import MkKeyValue from "@/components/MkKeyValue.vue";
+import MkButton from "@/components/MkButton.vue";
+import MkInfo from "@/components/MkInfo.vue";
+import MkTab from "@/components/MkTab.vue";
+import * as os from "@/os";
+import number from "@/filters/number";
+import { defaultStore } from "@/store";
+import { $i } from "@/account";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
-const render = (mutedWords) => mutedWords.map(x => {
-	if (Array.isArray(x)) {
-		return x.join(' ');
-	} else {
-		return x;
-	}
-}).join('\n');
+const render = (mutedWords) =>
+	mutedWords
+		.map((x) => {
+			if (Array.isArray(x)) {
+				return x.join(" ");
+			} else {
+				return x;
+			}
+		})
+		.join("\n");
 
-const tab = ref('soft');
+const tab = ref("soft");
 const softMutedWords = ref(render(defaultStore.state.mutedWords));
 const hardMutedWords = ref(render($i!.mutedWords));
 const hardWordMutedNotesCount = ref(null);
 const changed = ref(false);
 
-os.api('i/get-word-muted-notes-count', {}).then(response => {
+os.api("i/get-word-muted-notes-count", {}).then((response) => {
 	hardWordMutedNotesCount.value = response?.count;
 });
 
@@ -71,7 +95,11 @@ watch(hardMutedWords, () => {
 async function save() {
 	const parseMutes = (mutes, tab) => {
 		// split into lines, remove empty lines and unnecessary whitespace
-		let lines = mutes.trim().split('\n').map(line => line.trim()).filter(line => line !== '');
+		let lines = mutes
+			.trim()
+			.split("\n")
+			.map((line) => line.trim())
+			.filter((line) => line !== "");
 
 		// check each line if it is a RegExp or not
 		for (let i = 0; i < lines.length; i++) {
@@ -85,15 +113,21 @@ async function save() {
 				} catch (err: any) {
 					// invalid syntax: do not save, do not reset changed flag
 					os.alert({
-						type: 'error',
+						type: "error",
 						title: i18n.ts.regexpError,
-						text: i18n.t('regexpErrorDescription', { tab, line: i + 1 }) + '\n' + err.toString(),
+						text:
+							i18n.t("regexpErrorDescription", {
+								tab,
+								line: i + 1,
+							}) +
+							"\n" +
+							err.toString(),
 					});
 					// re-throw error so these invalid settings are not saved
 					throw err;
 				}
 			} else {
-				lines[i] = line.split(' ');
+				lines[i] = line.split(" ");
 			}
 		}
 
@@ -109,8 +143,8 @@ async function save() {
 		return;
 	}
 
-	defaultStore.set('mutedWords', softMutes);
-	await os.api('i/update', {
+	defaultStore.set("mutedWords", softMutes);
+	await os.api("i/update", {
 		mutedWords: hardMutes,
 	});
 
@@ -123,6 +157,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.wordMute,
-	icon: 'ph-speaker-x ph-bold ph-lg',
+	icon: "ph-speaker-x ph-bold ph-lg",
 });
 </script>
diff --git a/packages/client/src/pages/share.vue b/packages/client/src/pages/share.vue
index c073c26906..5b4231ff88 100644
--- a/packages/client/src/pages/share.vue
+++ b/packages/client/src/pages/share.vue
@@ -1,144 +1,175 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
-	<MkSpacer :content-max="800">
-		<XPostForm
-			v-if="state === 'writing'"
-			fixed
-			:instant="true"
-			:initial-text="initialText"
-			:initial-visibility="visibility"
-			:initial-files="files"
-			:initial-local-only="localOnly"
-			:reply="reply"
-			:renote="renote"
-			:initial-visible-users="visibleUsers"
-			class="_panel"
-			@posted="state = 'posted'"
-		/>
-		<MkButton v-else-if="state === 'posted'" primary class="close" @click="close()">{{ i18n.ts.close }}</MkButton>
-	</MkSpacer>
-</MkStickyContainer>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader :actions="headerActions" :tabs="headerTabs"
+		/></template>
+		<MkSpacer :content-max="800">
+			<XPostForm
+				v-if="state === 'writing'"
+				fixed
+				:instant="true"
+				:initial-text="initialText"
+				:initial-visibility="visibility"
+				:initial-files="files"
+				:initial-local-only="localOnly"
+				:reply="reply"
+				:renote="renote"
+				:initial-visible-users="visibleUsers"
+				class="_panel"
+				@posted="state = 'posted'"
+			/>
+			<MkButton
+				v-else-if="state === 'posted'"
+				primary
+				class="close"
+				@click="close()"
+				>{{ i18n.ts.close }}</MkButton
+			>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
 // SPECIFICATION: https://misskey-hub.net/docs/features/share-form.html
 
-import { } from 'vue';
-import { noteVisibilities } from 'calckey-js';
-import * as Acct from 'calckey-js/built/acct';
-import * as Misskey from 'calckey-js';
-import MkButton from '@/components/MkButton.vue';
-import XPostForm from '@/components/MkPostForm.vue';
-import * as os from '@/os';
-import { mainRouter } from '@/router';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import { i18n } from '@/i18n';
+import {} from "vue";
+import { noteVisibilities } from "calckey-js";
+import * as Acct from "calckey-js/built/acct";
+import * as Misskey from "calckey-js";
+import MkButton from "@/components/MkButton.vue";
+import XPostForm from "@/components/MkPostForm.vue";
+import * as os from "@/os";
+import { mainRouter } from "@/router";
+import { definePageMetadata } from "@/scripts/page-metadata";
+import { i18n } from "@/i18n";
 
 const urlParams = new URLSearchParams(window.location.search);
-const localOnlyQuery = urlParams.get('localOnly');
-const visibilityQuery = urlParams.get('visibility');
+const localOnlyQuery = urlParams.get("localOnly");
+const visibilityQuery = urlParams.get("visibility");
 
-let state = $ref('fetching' as 'fetching' | 'writing' | 'posted');
-let title = $ref(urlParams.get('title'));
-const text = urlParams.get('text');
-const url = urlParams.get('url');
+let state = $ref("fetching" as "fetching" | "writing" | "posted");
+let title = $ref(urlParams.get("title"));
+const text = urlParams.get("text");
+const url = urlParams.get("url");
 let initialText = $ref(null as string | null);
 let reply = $ref(null as Misskey.entities.Note | null);
 let renote = $ref(null as Misskey.entities.Note | null);
-let visibility = $ref(noteVisibilities.includes(visibilityQuery) ? visibilityQuery : null);
-let localOnly = $ref(localOnlyQuery === '0' ? false : localOnlyQuery === '1' ? true : null);
+let visibility = $ref(
+	noteVisibilities.includes(visibilityQuery) ? visibilityQuery : null
+);
+let localOnly = $ref(
+	localOnlyQuery === "0" ? false : localOnlyQuery === "1" ? true : null
+);
 let files = $ref([] as Misskey.entities.DriveFile[]);
 let visibleUsers = $ref([] as Misskey.entities.User[]);
 
 async function init() {
-	let noteText = '';
+	let noteText = "";
 	if (title) noteText += `[ ${title} ]\n`;
 	// Googleニュース対策
-	if (text?.startsWith(`${title}.\n`)) noteText += text.replace(`${title}.\n`, '');
+	if (text?.startsWith(`${title}.\n`))
+		noteText += text.replace(`${title}.\n`, "");
 	else if (text && title !== text) noteText += `${text}\n`;
 	if (url) noteText += `${url}`;
 	initialText = noteText.trim();
 
-	if (visibility === 'specified') {
-		const visibleUserIds = urlParams.get('visibleUserIds');
-		const visibleAccts = urlParams.get('visibleAccts');
+	if (visibility === "specified") {
+		const visibleUserIds = urlParams.get("visibleUserIds");
+		const visibleAccts = urlParams.get("visibleAccts");
 		await Promise.all(
 			[
-				...(visibleUserIds ? visibleUserIds.split(',').map(userId => ({ userId })) : []),
-				...(visibleAccts ? visibleAccts.split(',').map(Acct.parse) : []),
+				...(visibleUserIds
+					? visibleUserIds.split(",").map((userId) => ({ userId }))
+					: []),
+				...(visibleAccts
+					? visibleAccts.split(",").map(Acct.parse)
+					: []),
 			]
-			// TypeScriptの指示通りに変換する
-			.map(q => 'username' in q ? { username: q.username, host: q.host === null ? undefined : q.host } : q)
-			.map(q => os.api('users/show', q)
-				.then(user => {
-					visibleUsers.push(user);
-				}, () => {
-					console.error(`Invalid user query: ${JSON.stringify(q)}`);
-				}),
-			),
+				// TypeScriptの指示通りに変換する
+				.map((q) =>
+					"username" in q
+						? {
+								username: q.username,
+								host: q.host === null ? undefined : q.host,
+						  }
+						: q
+				)
+				.map((q) =>
+					os.api("users/show", q).then(
+						(user) => {
+							visibleUsers.push(user);
+						},
+						() => {
+							console.error(
+								`Invalid user query: ${JSON.stringify(q)}`
+							);
+						}
+					)
+				)
 		);
 	}
 
 	try {
 		//#region Reply
-		const replyId = urlParams.get('replyId');
-		const replyUri = urlParams.get('replyUri');
+		const replyId = urlParams.get("replyId");
+		const replyUri = urlParams.get("replyUri");
 		if (replyId) {
-			reply = await os.api('notes/show', {
+			reply = await os.api("notes/show", {
 				noteId: replyId,
 			});
 		} else if (replyUri) {
-			const obj = await os.api('ap/show', {
+			const obj = await os.api("ap/show", {
 				uri: replyUri,
 			});
-			if (obj.type === 'Note') {
+			if (obj.type === "Note") {
 				reply = obj.object;
 			}
 		}
 		//#endregion
 
 		//#region Renote
-		const renoteId = urlParams.get('renoteId');
-		const renoteUri = urlParams.get('renoteUri');
+		const renoteId = urlParams.get("renoteId");
+		const renoteUri = urlParams.get("renoteUri");
 		if (renoteId) {
-			renote = await os.api('notes/show', {
+			renote = await os.api("notes/show", {
 				noteId: renoteId,
 			});
 		} else if (renoteUri) {
-			const obj = await os.api('ap/show', {
+			const obj = await os.api("ap/show", {
 				uri: renoteUri,
 			});
-			if (obj.type === 'Note') {
+			if (obj.type === "Note") {
 				renote = obj.object;
 			}
 		}
 		//#endregion
 
 		//#region Drive files
-		const fileIds = urlParams.get('fileIds');
+		const fileIds = urlParams.get("fileIds");
 		if (fileIds) {
 			await Promise.all(
-				fileIds.split(',')
-				.map(fileId => os.api('drive/files/show', { fileId })
-					.then(file => {
-						files.push(file);
-					}, () => {
-						console.error(`Failed to fetch a file ${fileId}`);
-					}),
-				),
+				fileIds.split(",").map((fileId) =>
+					os.api("drive/files/show", { fileId }).then(
+						(file) => {
+							files.push(file);
+						},
+						() => {
+							console.error(`Failed to fetch a file ${fileId}`);
+						}
+					)
+				)
 			);
 		}
 		//#endregion
 	} catch (err) {
 		os.alert({
-			type: 'error',
+			type: "error",
 			title: err.message,
 			text: err.name,
 		});
 	}
 
-	state = 'writing';
+	state = "writing";
 }
 
 init();
@@ -148,7 +179,7 @@ function close(): void {
 
 	// 閉じなければ100ms後タイムラインに
 	window.setTimeout(() => {
-		mainRouter.push('/');
+		mainRouter.push("/");
 	}, 100);
 }
 
@@ -158,7 +189,7 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.share,
-	icon: 'ph-share-network ph-bold ph-lg',
+	icon: "ph-share-network ph-bold ph-lg",
 });
 </script>
 
diff --git a/packages/client/src/pages/signup-complete.vue b/packages/client/src/pages/signup-complete.vue
index 7c11d4c818..db06799ba6 100644
--- a/packages/client/src/pages/signup-complete.vue
+++ b/packages/client/src/pages/signup-complete.vue
@@ -1,15 +1,15 @@
 <template>
-<div>
-	{{ i18n.ts.processing }}
-</div>
+	<div>
+		{{ i18n.ts.processing }}
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted } from 'vue';
-import * as os from '@/os';
-import { login } from '@/account';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import { onMounted } from "vue";
+import * as os from "@/os";
+import { login } from "@/account";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
 const props = defineProps<{
 	code: string;
@@ -17,13 +17,13 @@ const props = defineProps<{
 
 onMounted(async () => {
 	await os.alert({
-		type: 'info',
-		text: i18n.t('clickToFinishEmailVerification', { ok: i18n.ts.gotIt }),
+		type: "info",
+		text: i18n.t("clickToFinishEmailVerification", { ok: i18n.ts.gotIt }),
 	});
-	const res = await os.apiWithDialog('signup-pending', {
+	const res = await os.apiWithDialog("signup-pending", {
 		code: props.code,
 	});
-	login(res.i, '/');
+	login(res.i, "/");
 });
 
 const headerActions = $computed(() => []);
@@ -32,10 +32,8 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.signup,
-	icon: 'ph-user ph-bold ph-lg',
+	icon: "ph-user ph-bold ph-lg",
 });
 </script>
 
-<style lang="scss" scoped>
-
-</style>
+<style lang="scss" scoped></style>
diff --git a/packages/client/src/pages/tag.vue b/packages/client/src/pages/tag.vue
index 7570deb412..390b6a0baa 100644
--- a/packages/client/src/pages/tag.vue
+++ b/packages/client/src/pages/tag.vue
@@ -1,23 +1,25 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
-	<MkSpacer :content-max="800">
-		<XNotes class="_content" :pagination="pagination"/>
-	</MkSpacer>
-</MkStickyContainer>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader :actions="headerActions" :tabs="headerTabs"
+		/></template>
+		<MkSpacer :content-max="800">
+			<XNotes class="_content" :pagination="pagination" />
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
-import XNotes from '@/components/MkNotes.vue';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import { computed } from "vue";
+import XNotes from "@/components/MkNotes.vue";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
 const props = defineProps<{
 	tag: string;
 }>();
 
 const pagination = {
-	endpoint: 'notes/search-by-tag' as const,
+	endpoint: "notes/search-by-tag" as const,
 	limit: 10,
 	params: computed(() => ({
 		tag: props.tag,
@@ -28,8 +30,10 @@ const headerActions = $computed(() => []);
 
 const headerTabs = $computed(() => []);
 
-definePageMetadata(computed(() => ({
-	title: props.tag,
-	icon: 'ph-hash ph-bold ph-lg',
-})));
+definePageMetadata(
+	computed(() => ({
+		title: props.tag,
+		icon: "ph-hash ph-bold ph-lg",
+	}))
+);
 </script>
diff --git a/packages/client/src/pages/theme-editor.vue b/packages/client/src/pages/theme-editor.vue
index 7643da986c..28a50f9252 100644
--- a/packages/client/src/pages/theme-editor.vue
+++ b/packages/client/src/pages/theme-editor.vue
@@ -1,126 +1,245 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
-	<MkSpacer :content-max="800" :margin-min="16" :margin-max="32">
-		<div class="cwepdizn _formRoot">
-			<FormFolder :default-open="true" class="_formBlock">
-				<template #label>{{ i18n.ts.backgroundColor }}</template>
-				<div class="cwepdizn-colors">
-					<div class="row">
-						<button v-for="color in bgColors.filter(x => x.kind === 'light')" :key="color.color" class="color _button" :class="{ active: theme.props.bg === color.color }" @click="setBgColor(color)">
-							<div class="preview" :style="{ background: color.forPreview }"></div>
-						</button>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader :actions="headerActions" :tabs="headerTabs"
+		/></template>
+		<MkSpacer :content-max="800" :margin-min="16" :margin-max="32">
+			<div class="cwepdizn _formRoot">
+				<FormFolder :default-open="true" class="_formBlock">
+					<template #label>{{ i18n.ts.backgroundColor }}</template>
+					<div class="cwepdizn-colors">
+						<div class="row">
+							<button
+								v-for="color in bgColors.filter(
+									(x) => x.kind === 'light'
+								)"
+								:key="color.color"
+								class="color _button"
+								:class="{
+									active: theme.props.bg === color.color,
+								}"
+								@click="setBgColor(color)"
+							>
+								<div
+									class="preview"
+									:style="{ background: color.forPreview }"
+								></div>
+							</button>
+						</div>
+						<div class="row">
+							<button
+								v-for="color in bgColors.filter(
+									(x) => x.kind === 'dark'
+								)"
+								:key="color.color"
+								class="color _button"
+								:class="{
+									active: theme.props.bg === color.color,
+								}"
+								@click="setBgColor(color)"
+							>
+								<div
+									class="preview"
+									:style="{ background: color.forPreview }"
+								></div>
+							</button>
+						</div>
 					</div>
-					<div class="row">
-						<button v-for="color in bgColors.filter(x => x.kind === 'dark')" :key="color.color" class="color _button" :class="{ active: theme.props.bg === color.color }" @click="setBgColor(color)">
-							<div class="preview" :style="{ background: color.forPreview }"></div>
-						</button>
+				</FormFolder>
+
+				<FormFolder :default-open="true" class="_formBlock">
+					<template #label>{{ i18n.ts.accentColor }}</template>
+					<div class="cwepdizn-colors">
+						<div class="row">
+							<button
+								v-for="color in accentColors"
+								:key="color"
+								class="color rounded _button"
+								:class="{
+									active: theme.props.accent === color,
+								}"
+								@click="setAccentColor(color)"
+							>
+								<div
+									class="preview"
+									:style="{ background: color }"
+								></div>
+							</button>
+						</div>
 					</div>
-				</div>
-			</FormFolder>
+				</FormFolder>
 
-			<FormFolder :default-open="true" class="_formBlock">
-				<template #label>{{ i18n.ts.accentColor }}</template>
-				<div class="cwepdizn-colors">
-					<div class="row">
-						<button v-for="color in accentColors" :key="color" class="color rounded _button" :class="{ active: theme.props.accent === color }" @click="setAccentColor(color)">
-							<div class="preview" :style="{ background: color }"></div>
-						</button>
+				<FormFolder :default-open="true" class="_formBlock">
+					<template #label>{{ i18n.ts.textColor }}</template>
+					<div class="cwepdizn-colors">
+						<div class="row">
+							<button
+								v-for="color in fgColors"
+								:key="color"
+								class="color char _button"
+								:class="{
+									active:
+										theme.props.fg === color.forLight ||
+										theme.props.fg === color.forDark,
+								}"
+								@click="setFgColor(color)"
+							>
+								<div
+									class="preview"
+									:style="{
+										color: color.forPreview
+											? color.forPreview
+											: theme.base === 'light'
+											? '#5f5f5f'
+											: '#dadada',
+									}"
+								>
+									A
+								</div>
+							</button>
+						</div>
 					</div>
-				</div>
-			</FormFolder>
+				</FormFolder>
 
-			<FormFolder :default-open="true" class="_formBlock">
-				<template #label>{{ i18n.ts.textColor }}</template>
-				<div class="cwepdizn-colors">
-					<div class="row">
-						<button v-for="color in fgColors" :key="color" class="color char _button" :class="{ active: (theme.props.fg === color.forLight) || (theme.props.fg === color.forDark) }" @click="setFgColor(color)">
-							<div class="preview" :style="{ color: color.forPreview ? color.forPreview : theme.base === 'light' ? '#5f5f5f' : '#dadada' }">A</div>
-						</button>
+				<FormFolder :default-open="false" class="_formBlock">
+					<template #icon
+						><i class="ph-code ph-bold ph-lg"></i
+					></template>
+					<template #label>{{ i18n.ts.editCode }}</template>
+
+					<div class="_formRoot">
+						<FormTextarea
+							v-model="themeCode"
+							tall
+							class="_formBlock"
+						>
+							<template #label>{{
+								i18n.ts._theme.code
+							}}</template>
+						</FormTextarea>
+						<FormButton
+							primary
+							class="_formBlock"
+							@click="applyThemeCode"
+							>{{ i18n.ts.apply }}</FormButton
+						>
 					</div>
-				</div>
-			</FormFolder>
+				</FormFolder>
 
-			<FormFolder :default-open="false" class="_formBlock">
-				<template #icon><i class="ph-code ph-bold ph-lg"></i></template>
-				<template #label>{{ i18n.ts.editCode }}</template>
+				<FormFolder :default-open="false" class="_formBlock">
+					<template #label>{{ i18n.ts.addDescription }}</template>
 
-				<div class="_formRoot">
-					<FormTextarea v-model="themeCode" tall class="_formBlock">
-						<template #label>{{ i18n.ts._theme.code }}</template>
-					</FormTextarea>
-					<FormButton primary class="_formBlock" @click="applyThemeCode">{{ i18n.ts.apply }}</FormButton>
-				</div>
-			</FormFolder>
-
-			<FormFolder :default-open="false" class="_formBlock">
-				<template #label>{{ i18n.ts.addDescription }}</template>
-
-				<div class="_formRoot">
-					<FormTextarea v-model="description">
-						<template #label>{{ i18n.ts._theme.description }}</template>
-					</FormTextarea>
-				</div>
-			</FormFolder>
-		</div>
-	</MkSpacer>
-</MkStickyContainer>
+					<div class="_formRoot">
+						<FormTextarea v-model="description">
+							<template #label>{{
+								i18n.ts._theme.description
+							}}</template>
+						</FormTextarea>
+					</div>
+				</FormFolder>
+			</div>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { watch } from 'vue';
-import { toUnicode } from 'punycode/';
-import tinycolor from 'tinycolor2';
-import { v4 as uuid } from 'uuid';
-import JSON5 from 'json5';
+import { watch } from "vue";
+import { toUnicode } from "punycode/";
+import tinycolor from "tinycolor2";
+import { v4 as uuid } from "uuid";
+import JSON5 from "json5";
 
-import FormButton from '@/components/MkButton.vue';
-import FormTextarea from '@/components/form/textarea.vue';
-import FormFolder from '@/components/form/folder.vue';
+import FormButton from "@/components/MkButton.vue";
+import FormTextarea from "@/components/form/textarea.vue";
+import FormFolder from "@/components/form/folder.vue";
 
-import { $i } from '@/account';
-import { Theme, applyTheme } from '@/scripts/theme';
-import lightTheme from '@/themes/_light.json5';
-import darkTheme from '@/themes/_dark.json5';
-import { host } from '@/config';
-import * as os from '@/os';
-import { ColdDeviceStorage, defaultStore } from '@/store';
-import { addTheme } from '@/theme-store';
-import { i18n } from '@/i18n';
-import { useLeaveGuard } from '@/scripts/use-leave-guard';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import { $i } from "@/account";
+import { Theme, applyTheme } from "@/scripts/theme";
+import lightTheme from "@/themes/_light.json5";
+import darkTheme from "@/themes/_dark.json5";
+import { host } from "@/config";
+import * as os from "@/os";
+import { ColdDeviceStorage, defaultStore } from "@/store";
+import { addTheme } from "@/theme-store";
+import { i18n } from "@/i18n";
+import { useLeaveGuard } from "@/scripts/use-leave-guard";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
 const bgColors = [
-	{ color: '#f5f5f5', kind: 'light', forPreview: '#f5f5f5' },
-	{ color: '#f0eee9', kind: 'light', forPreview: '#f3e2b9' },
-	{ color: '#e9eff0', kind: 'light', forPreview: '#bfe3e8' },
-	{ color: '#f0e9ee', kind: 'light', forPreview: '#f1d1e8' },
-	{ color: '#dce2e0', kind: 'light', forPreview: '#a4dccc' },
-	{ color: '#e2e0dc', kind: 'light', forPreview: '#d8c7a5' },
-	{ color: '#d5dbe0', kind: 'light', forPreview: '#b0cae0' },
-	{ color: '#dad5d5', kind: 'light', forPreview: '#d6afaf' },
-	{ color: '#2b2b2b', kind: 'dark', forPreview: '#444444' },
-	{ color: '#362e29', kind: 'dark', forPreview: '#735c4d' },
-	{ color: '#303629', kind: 'dark', forPreview: '#506d2f' },
-	{ color: '#293436', kind: 'dark', forPreview: '#258192' },
-	{ color: '#2e2936', kind: 'dark', forPreview: '#504069' },
-	{ color: '#252722', kind: 'dark', forPreview: '#3c462f' },
-	{ color: '#212525', kind: 'dark', forPreview: '#303e3e' },
-	{ color: '#191919', kind: 'dark', forPreview: '#272727' },
+	{ color: "#f5f5f5", kind: "light", forPreview: "#f5f5f5" },
+	{ color: "#f0eee9", kind: "light", forPreview: "#f3e2b9" },
+	{ color: "#e9eff0", kind: "light", forPreview: "#bfe3e8" },
+	{ color: "#f0e9ee", kind: "light", forPreview: "#f1d1e8" },
+	{ color: "#dce2e0", kind: "light", forPreview: "#a4dccc" },
+	{ color: "#e2e0dc", kind: "light", forPreview: "#d8c7a5" },
+	{ color: "#d5dbe0", kind: "light", forPreview: "#b0cae0" },
+	{ color: "#dad5d5", kind: "light", forPreview: "#d6afaf" },
+	{ color: "#2b2b2b", kind: "dark", forPreview: "#444444" },
+	{ color: "#362e29", kind: "dark", forPreview: "#735c4d" },
+	{ color: "#303629", kind: "dark", forPreview: "#506d2f" },
+	{ color: "#293436", kind: "dark", forPreview: "#258192" },
+	{ color: "#2e2936", kind: "dark", forPreview: "#504069" },
+	{ color: "#252722", kind: "dark", forPreview: "#3c462f" },
+	{ color: "#212525", kind: "dark", forPreview: "#303e3e" },
+	{ color: "#191919", kind: "dark", forPreview: "#272727" },
 ] as const;
-const accentColors = ['#e36749', '#f29924', '#98c934', '#34c9a9', '#34a1c9', '#606df7', '#8d34c9', '#e84d83'];
+const accentColors = [
+	"#e36749",
+	"#f29924",
+	"#98c934",
+	"#34c9a9",
+	"#34a1c9",
+	"#606df7",
+	"#8d34c9",
+	"#e84d83",
+];
 const fgColors = [
-	{ color: 'none', forLight: '#5f5f5f', forDark: '#dadada', forPreview: null },
-	{ color: 'red', forLight: '#7f6666', forDark: '#e4d1d1', forPreview: '#ca4343' },
-	{ color: 'yellow', forLight: '#736955', forDark: '#e0d5c0', forPreview: '#d49923' },
-	{ color: 'green', forLight: '#586d5b', forDark: '#d1e4d4', forPreview: '#4cbd5c' },
-	{ color: 'cyan', forLight: '#5d7475', forDark: '#d1e3e4', forPreview: '#2abdc3' },
-	{ color: 'blue', forLight: '#676880', forDark: '#d1d2e4', forPreview: '#7275d8' },
-	{ color: 'pink', forLight: '#84667d', forDark: '#e4d1e0', forPreview: '#b12390' },
+	{
+		color: "none",
+		forLight: "#5f5f5f",
+		forDark: "#dadada",
+		forPreview: null,
+	},
+	{
+		color: "red",
+		forLight: "#7f6666",
+		forDark: "#e4d1d1",
+		forPreview: "#ca4343",
+	},
+	{
+		color: "yellow",
+		forLight: "#736955",
+		forDark: "#e0d5c0",
+		forPreview: "#d49923",
+	},
+	{
+		color: "green",
+		forLight: "#586d5b",
+		forDark: "#d1e4d4",
+		forPreview: "#4cbd5c",
+	},
+	{
+		color: "cyan",
+		forLight: "#5d7475",
+		forDark: "#d1e3e4",
+		forPreview: "#2abdc3",
+	},
+	{
+		color: "blue",
+		forLight: "#676880",
+		forDark: "#d1d2e4",
+		forPreview: "#7275d8",
+	},
+	{
+		color: "pink",
+		forLight: "#84667d",
+		forDark: "#e4d1e0",
+		forPreview: "#b12390",
+	},
 ];
 
 let theme = $ref<Partial<Theme>>({
-	base: 'light',
+	base: "light",
 	props: lightTheme.props,
 });
 let description = $ref<string | null>(null);
@@ -130,15 +249,15 @@ let changed = $ref(false);
 useLeaveGuard($$(changed));
 
 function showPreview() {
-	os.pageWindow('/preview');
+	os.pageWindow("/preview");
 }
 
-function setBgColor(color: typeof bgColors[number]) {
+function setBgColor(color: (typeof bgColors)[number]) {
 	if (theme.base !== color.kind) {
-		const base = color.kind === 'dark' ? darkTheme : lightTheme;
+		const base = color.kind === "dark" ? darkTheme : lightTheme;
 		for (const prop of Object.keys(base.props)) {
-			if (prop === 'accent') continue;
-			if (prop === 'fg') continue;
+			if (prop === "accent") continue;
+			if (prop === "fg") continue;
 			theme.props[prop] = base.props[prop];
 		}
 	}
@@ -146,7 +265,12 @@ function setBgColor(color: typeof bgColors[number]) {
 	theme.props.bg = color.color;
 
 	if (theme.props.fg) {
-		const matchedFgColor = fgColors.find(x => [tinycolor(x.forLight).toRgbString(), tinycolor(x.forDark).toRgbString()].includes(tinycolor(theme.props.fg).toRgbString()));
+		const matchedFgColor = fgColors.find((x) =>
+			[
+				tinycolor(x.forLight).toRgbString(),
+				tinycolor(x.forDark).toRgbString(),
+			].includes(tinycolor(theme.props.fg).toRgbString())
+		);
 		if (matchedFgColor) setFgColor(matchedFgColor);
 	}
 }
@@ -156,11 +280,11 @@ function setAccentColor(color) {
 }
 
 function setFgColor(color) {
-	theme.props.fg = theme.base === 'light' ? color.forLight : color.forDark;
+	theme.props.fg = theme.base === "light" ? color.forLight : color.forDark;
 }
 
 function apply() {
-	themeCode = JSON5.stringify(theme, null, '\t');
+	themeCode = JSON5.stringify(theme, null, "\t");
 	applyTheme(theme, false);
 	changed = true;
 }
@@ -172,7 +296,7 @@ function applyThemeCode() {
 		parsed = JSON5.parse(themeCode);
 	} catch (err) {
 		os.alert({
-			type: 'error',
+			type: "error",
 			text: i18n.ts._theme.invalid,
 		});
 		return;
@@ -195,36 +319,39 @@ async function saveAs() {
 	await addTheme(theme);
 	applyTheme(theme);
 	if (defaultStore.state.darkMode) {
-		ColdDeviceStorage.set('darkTheme', theme);
+		ColdDeviceStorage.set("darkTheme", theme);
 	} else {
-		ColdDeviceStorage.set('lightTheme', theme);
+		ColdDeviceStorage.set("lightTheme", theme);
 	}
 	changed = false;
 	os.alert({
-		type: 'success',
-		text: i18n.t('_theme.installed', { name: theme.name }),
+		type: "success",
+		text: i18n.t("_theme.installed", { name: theme.name }),
 	});
 }
 
 watch($$(theme), apply, { deep: true });
 
-const headerActions = $computed(() => [{
-	asFullButton: true,
-	icon: 'ph-eye ph-bold ph-lg',
-	text: i18n.ts.preview,
-	handler: showPreview,
-}, {
-	asFullButton: true,
-	icon: 'ph-check ph-bold ph-lg',
-	text: i18n.ts.saveAs,
-	handler: saveAs,
-}]);
+const headerActions = $computed(() => [
+	{
+		asFullButton: true,
+		icon: "ph-eye ph-bold ph-lg",
+		text: i18n.ts.preview,
+		handler: showPreview,
+	},
+	{
+		asFullButton: true,
+		icon: "ph-check ph-bold ph-lg",
+		text: i18n.ts.saveAs,
+		handler: saveAs,
+	},
+]);
 
 const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.themeEditor,
-	icon: 'ph-palette ph-bold ph-lg',
+	icon: "ph-palette ph-bold ph-lg",
 });
 </script>
 
diff --git a/packages/client/src/pages/timeline.vue b/packages/client/src/pages/timeline.vue
index 9c326ad05e..e3f8a0083a 100644
--- a/packages/client/src/pages/timeline.vue
+++ b/packages/client/src/pages/timeline.vue
@@ -1,27 +1,27 @@
 <template>
-<MkStickyContainer>
-	<template #header>
-		<MkPageHeader
-			v-model:tab="src"
-			:actions="headerActions"
-			:tabs="headerTabs"
-			:display-my-avatar="true"
-		/>
-	</template>
-	<MkSpacer :content-max="800">
-		<div ref="rootEl" v-hotkey.global="keymap" class="cmuxhskf">
-			<XPostForm
-				v-if="$store.reactiveState.showFixedPostForm.value"
-				class="post-form _block"
-				fixed
+	<MkStickyContainer>
+		<template #header>
+			<MkPageHeader
+				v-model:tab="src"
+				:actions="headerActions"
+				:tabs="headerTabs"
+				:display-my-avatar="true"
 			/>
+		</template>
+		<MkSpacer :content-max="800">
+			<div ref="rootEl" v-hotkey.global="keymap" class="cmuxhskf">
+				<XPostForm
+					v-if="$store.reactiveState.showFixedPostForm.value"
+					class="post-form _block"
+					fixed
+				/>
 
-			<div v-if="queue > 0" class="new">
-				<button class="_buttonPrimary" @click="top()">
-					{{ i18n.ts.newNoteRecived }}
-				</button>
-			</div>
-			<!-- <div v-if="!isMobile" class="tl _block">
+				<div v-if="queue > 0" class="new">
+					<button class="_buttonPrimary" @click="top()">
+						{{ i18n.ts.newNoteRecived }}
+					</button>
+				</div>
+				<!-- <div v-if="!isMobile" class="tl _block">
 				<XTimeline
 					ref="tl"
 					:key="src"
@@ -31,56 +31,61 @@
 					@queue="queueUpdated"
 				/>
 			</div> *v-else on next div* -->
-			<div class="tl _block">
-				<swiper
-					:modules="[Virtual]"
-					:space-between="20"
-					:virtual="true"
-					:allow-touch-move="!(deviceKind === 'desktop' && !defaultStore.state.swipeOnDesktop)"
-					@swiper="setSwiperRef"
-					@slide-change="onSlideChange"
-				>
-					<swiper-slide
-						v-for="index in timelines"
-						:key="index"
-						:virtual-index="index"
+				<div class="tl _block">
+					<swiper
+						:modules="[Virtual]"
+						:space-between="20"
+						:virtual="true"
+						:allow-touch-move="
+							!(
+								deviceKind === 'desktop' &&
+								!defaultStore.state.swipeOnDesktop
+							)
+						"
+						@swiper="setSwiperRef"
+						@slide-change="onSlideChange"
 					>
-						<XTimeline
-							ref="tl"
-							:key="src"
-							class="tl"
-							:src="src"
-							:sound="true"
-							@queue="queueUpdated"
-						/>
-					</swiper-slide>
-				</swiper>
+						<swiper-slide
+							v-for="index in timelines"
+							:key="index"
+							:virtual-index="index"
+						>
+							<XTimeline
+								ref="tl"
+								:key="src"
+								class="tl"
+								:src="src"
+								:sound="true"
+								@queue="queueUpdated"
+							/>
+						</swiper-slide>
+					</swiper>
+				</div>
 			</div>
-		</div>
-	</MkSpacer>
-</MkStickyContainer>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { computed, watch, ref, onMounted } from 'vue';
-import { Virtual } from 'swiper';
-import { Swiper, SwiperSlide } from 'swiper/vue';
-import XTutorial from '@/components/MkTutorialDialog.vue';
-import XTimeline from '@/components/MkTimeline.vue';
-import XPostForm from '@/components/MkPostForm.vue';
-import { scroll } from '@/scripts/scroll';
-import * as os from '@/os';
-import { defaultStore } from '@/store';
-import { i18n } from '@/i18n';
-import { instance } from '@/instance';
-import { $i } from '@/account';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import { deviceKind } from '@/scripts/device-kind';
-import 'swiper/scss';
-import 'swiper/scss/virtual';
+import { computed, watch, ref, onMounted } from "vue";
+import { Virtual } from "swiper";
+import { Swiper, SwiperSlide } from "swiper/vue";
+import XTutorial from "@/components/MkTutorialDialog.vue";
+import XTimeline from "@/components/MkTimeline.vue";
+import XPostForm from "@/components/MkPostForm.vue";
+import { scroll } from "@/scripts/scroll";
+import * as os from "@/os";
+import { defaultStore } from "@/store";
+import { i18n } from "@/i18n";
+import { instance } from "@/instance";
+import { $i } from "@/account";
+import { definePageMetadata } from "@/scripts/page-metadata";
+import { deviceKind } from "@/scripts/device-kind";
+import "swiper/scss";
+import "swiper/scss/virtual";
 
 if (defaultStore.reactiveState.tutorial.value !== -1) {
-	os.popup(XTutorial, {}, {}, 'closed');
+	os.popup(XTutorial, {}, {}, "closed");
 }
 
 const isLocalTimelineAvailable =
@@ -96,38 +101,44 @@ const keymap = {
 
 let timelines = [];
 
-if (isLocalTimelineAvailable && defaultStore.state.showLocalPostsInTimeline === 'home') {
-	timelines.push('social');
+if (
+	isLocalTimelineAvailable &&
+	defaultStore.state.showLocalPostsInTimeline === "home"
+) {
+	timelines.push("social");
 } else {
-	timelines.push('home');
+	timelines.push("home");
 }
 
 if (isLocalTimelineAvailable) {
-	timelines.push('local');
+	timelines.push("local");
 }
 
-if (isLocalTimelineAvailable && defaultStore.state.showLocalPostsInTimeline === 'home') {
-	timelines.push('home');
+if (
+	isLocalTimelineAvailable &&
+	defaultStore.state.showLocalPostsInTimeline === "home"
+) {
+	timelines.push("home");
 } else if (isLocalTimelineAvailable) {
-	timelines.push('social');
+	timelines.push("social");
 }
 
 if (isRecommendedTimelineAvailable) {
-	timelines.push('recommended');
+	timelines.push("recommended");
 }
 if (isGlobalTimelineAvailable) {
-	timelines.push('global');
+	timelines.push("global");
 }
 
 const MOBILE_THRESHOLD = 500;
 
 // デスクトップでウィンドウを狭くしたときモバイルUIが表示されて欲しいことはあるので deviceKind === 'desktop' の判定は行わない
 const isMobile = ref(
-	deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD,
+	deviceKind === "smartphone" || window.innerWidth <= MOBILE_THRESHOLD
 );
-window.addEventListener('resize', () => {
+window.addEventListener("resize", () => {
 	isMobile.value =
-		(deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD);
+		deviceKind === "smartphone" || window.innerWidth <= MOBILE_THRESHOLD;
 });
 
 const tlComponent = $ref<InstanceType<typeof XTimeline>>();
@@ -153,43 +164,51 @@ function top(): void {
 }
 
 async function chooseList(ev: MouseEvent): Promise<void> {
-	const lists = await os.api('users/lists/list');
-	const items = [{
-		type: 'link' as const,
-		text: i18n.ts.manageLists,
-		icon: 'ph-faders-horizontal ph-bold ph-lg',
-		to: '/my/lists',
-	}].concat(lists.map((list) => ({
-		type: 'link' as const,
-		text: list.name,
-		icon: '',
-		to: `/timeline/list/${list.id}`,
-	})));
+	const lists = await os.api("users/lists/list");
+	const items = [
+		{
+			type: "link" as const,
+			text: i18n.ts.manageLists,
+			icon: "ph-faders-horizontal ph-bold ph-lg",
+			to: "/my/lists",
+		},
+	].concat(
+		lists.map((list) => ({
+			type: "link" as const,
+			text: list.name,
+			icon: "",
+			to: `/timeline/list/${list.id}`,
+		}))
+	);
 	os.popupMenu(items, ev.currentTarget ?? ev.target);
 }
 
 async function chooseAntenna(ev: MouseEvent): Promise<void> {
-	const antennas = await os.api('antennas/list');
-	const items = [{
-		type: 'link' as const,
-		indicate: false,
-		text: i18n.ts.manageAntennas,
-		icon: 'ph-faders-horizontal ph-bold ph-lg',
-		to: '/my/antennas',
-	}].concat(antennas.map((antenna) => ({
-		type: 'link' as const,
-		text: antenna.name,
-		icon: '',
-		indicate: antenna.hasUnreadNote,
-		to: `/timeline/antenna/${antenna.id}`,
-	})));
+	const antennas = await os.api("antennas/list");
+	const items = [
+		{
+			type: "link" as const,
+			indicate: false,
+			text: i18n.ts.manageAntennas,
+			icon: "ph-faders-horizontal ph-bold ph-lg",
+			to: "/my/antennas",
+		},
+	].concat(
+		antennas.map((antenna) => ({
+			type: "link" as const,
+			text: antenna.name,
+			icon: "",
+			indicate: antenna.hasUnreadNote,
+			to: `/timeline/antenna/${antenna.id}`,
+		}))
+	);
 	os.popupMenu(items, ev.currentTarget ?? ev.target);
 }
 
 function saveSrc(
-	newSrc: 'home' | 'local' | 'recommended' | 'social' | 'global',
+	newSrc: "home" | "local" | "recommended" | "social" | "global"
 ): void {
-	defaultStore.set('tl', {
+	defaultStore.set("tl", {
 		...defaultStore.state.tl,
 		src: newSrc,
 	});
@@ -210,14 +229,14 @@ function focus(): void {
 
 const headerActions = $computed(() => [
 	{
-		icon: 'ph-list-bullets ph-bold ph-lg',
+		icon: "ph-list-bullets ph-bold ph-lg",
 		title: i18n.ts.lists,
 		text: i18n.ts.lists,
 		iconOnly: true,
 		handler: chooseList,
 	},
 	{
-		icon: 'ph-flying-saucer ph-bold ph-lg',
+		icon: "ph-flying-saucer ph-bold ph-lg",
 		title: i18n.ts.antennas,
 		text: i18n.ts.antennas,
 		iconOnly: true,
@@ -233,70 +252,73 @@ const headerActions = $computed(() => [
 // Swap home timeline with social's functionality
 
 const headerTabs = $computed(() => [
-	...(isLocalTimelineAvailable && defaultStore.state.showLocalPostsInTimeline === 'home'
+	...(isLocalTimelineAvailable &&
+	defaultStore.state.showLocalPostsInTimeline === "home"
 		? [
-			{
-				key: 'social',
-				title: i18n.ts._timelines.home,
-				icon: 'ph-house ph-bold ph-lg',
-				iconOnly: true,
-			},
-		]
+				{
+					key: "social",
+					title: i18n.ts._timelines.home,
+					icon: "ph-house ph-bold ph-lg",
+					iconOnly: true,
+				},
+		  ]
 		: [
-			{
-				key: 'home',
-				title: i18n.ts._timelines.home,
-				icon: 'ph-house ph-bold ph-lg',
-				iconOnly: true,
-			}
-		]),
+				{
+					key: "home",
+					title: i18n.ts._timelines.home,
+					icon: "ph-house ph-bold ph-lg",
+					iconOnly: true,
+				},
+		  ]),
 	...(isLocalTimelineAvailable
 		? [
-			{
-				key: 'local',
-				title: i18n.ts._timelines.local,
-				icon: 'ph-users ph-bold ph-lg',
-				iconOnly: true,
-			},
-		]
+				{
+					key: "local",
+					title: i18n.ts._timelines.local,
+					icon: "ph-users ph-bold ph-lg",
+					iconOnly: true,
+				},
+		  ]
 		: []),
-	...(isLocalTimelineAvailable && defaultStore.state.showLocalPostsInTimeline === 'home'
+	...(isLocalTimelineAvailable &&
+	defaultStore.state.showLocalPostsInTimeline === "home"
 		? [
-			{
-				key: 'home',
-				title: i18n.ts._timelines.social,
-				icon: 'ph-handshake ph-bold ph-lg',
-				iconOnly: true,
-			},
-		]
-		: isLocalTimelineAvailable ? [
- 			{
-				key: 'social',
-				title: i18n.ts._timelines.social,
-				icon: 'ph-handshake ph-bold ph-lg',
-				iconOnly: true,
-			},
-		]
+				{
+					key: "home",
+					title: i18n.ts._timelines.social,
+					icon: "ph-handshake ph-bold ph-lg",
+					iconOnly: true,
+				},
+		  ]
+		: isLocalTimelineAvailable
+		? [
+				{
+					key: "social",
+					title: i18n.ts._timelines.social,
+					icon: "ph-handshake ph-bold ph-lg",
+					iconOnly: true,
+				},
+		  ]
 		: []),
 	...(isRecommendedTimelineAvailable
 		? [
-			{
-				key: 'recommended',
-				title: i18n.ts._timelines.recommended,
-				icon: 'ph-thumbs-up ph-bold ph-lg',
-				iconOnly: true,
-			},
-		]
+				{
+					key: "recommended",
+					title: i18n.ts._timelines.recommended,
+					icon: "ph-thumbs-up ph-bold ph-lg",
+					iconOnly: true,
+				},
+		  ]
 		: []),
 	...(isGlobalTimelineAvailable
 		? [
-			{
-				key: 'global',
-				title: i18n.ts._timelines.global,
-				icon: 'ph-planet ph-bold ph-lg',
-				iconOnly: true,
-			},
-		]
+				{
+					key: "global",
+					title: i18n.ts._timelines.global,
+					icon: "ph-planet ph-bold ph-lg",
+					iconOnly: true,
+				},
+		  ]
 		: []),
 ]);
 
@@ -304,20 +326,22 @@ definePageMetadata(
 	computed(() => ({
 		title: i18n.ts.timeline,
 		icon:
-			src === 'local'
-				? 'ph-users ph-bold ph-lg'
-				: src === 'social' && defaultStore.state.showLocalPostsInTimeline === 'home'
-					? 'ph-house ph-bold ph-lg'
-					: src === 'social'
-						? 'ph-handshake ph-bold ph-lg'
-						: src === 'recommended'
-							? 'ph-thumbs-up ph-bold ph-lg'
-							: src === 'global'
-								? 'ph-planet ph-bold ph-lg'
-								: src === 'home' && defaultStore.state.showLocalPostsInTimeline === 'home'
-									? 'ph-handshake ph-bold ph-lg'
-									: 'ph-house ph-bold ph-lg',
-	})),
+			src === "local"
+				? "ph-users ph-bold ph-lg"
+				: src === "social" &&
+				  defaultStore.state.showLocalPostsInTimeline === "home"
+				? "ph-house ph-bold ph-lg"
+				: src === "social"
+				? "ph-handshake ph-bold ph-lg"
+				: src === "recommended"
+				? "ph-thumbs-up ph-bold ph-lg"
+				: src === "global"
+				? "ph-planet ph-bold ph-lg"
+				: src === "home" &&
+				  defaultStore.state.showLocalPostsInTimeline === "home"
+				? "ph-handshake ph-bold ph-lg"
+				: "ph-house ph-bold ph-lg",
+	}))
 );
 
 let swiperRef: any = null;
@@ -336,9 +360,10 @@ function syncSlide(index) {
 }
 
 onMounted(() => {
-	syncSlide(timelines.indexOf(defaultStore.state.tl?.src || swiperRef.activeIndex));
+	syncSlide(
+		timelines.indexOf(defaultStore.state.tl?.src || swiperRef.activeIndex)
+	);
 });
-
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/pages/user-info.vue b/packages/client/src/pages/user-info.vue
index f2fcd6665c..12321c2ba2 100644
--- a/packages/client/src/pages/user-info.vue
+++ b/packages/client/src/pages/user-info.vue
@@ -1,190 +1,369 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
-	<MkSpacer :content-max="600" :margin-min="16" :margin-max="32">
-		<FormSuspense :p="init">
-			<div v-if="tab === 'overview'" class="_formRoot">
-				<div class="_formBlock aeakzknw">
-					<MkAvatar class="avatar" :user="user" :show-indicator="true"/>
-					<div class="body">
-						<span class="name"><MkUserName class="name" :user="user"/></span>
-						<span class="sub"><span class="acct _monospace">@{{ acct(user) }}</span></span>
-						<span class="state">
-							<span v-if="suspended" class="suspended">Suspended</span>
-							<span v-if="silenced" class="silenced">Silenced</span>
-							<span v-if="moderator" class="moderator">Moderator</span>
-						</span>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader
+				v-model:tab="tab"
+				:actions="headerActions"
+				:tabs="headerTabs"
+		/></template>
+		<MkSpacer :content-max="600" :margin-min="16" :margin-max="32">
+			<FormSuspense :p="init">
+				<div v-if="tab === 'overview'" class="_formRoot">
+					<div class="_formBlock aeakzknw">
+						<MkAvatar
+							class="avatar"
+							:user="user"
+							:show-indicator="true"
+						/>
+						<div class="body">
+							<span class="name"
+								><MkUserName class="name" :user="user"
+							/></span>
+							<span class="sub"
+								><span class="acct _monospace"
+									>@{{ acct(user) }}</span
+								></span
+							>
+							<span class="state">
+								<span v-if="suspended" class="suspended"
+									>Suspended</span
+								>
+								<span v-if="silenced" class="silenced"
+									>Silenced</span
+								>
+								<span v-if="moderator" class="moderator"
+									>Moderator</span
+								>
+							</span>
+						</div>
 					</div>
-				</div>
 
-				<MkInfo v-if="user.username.includes('.')" class="_formBlock">{{ i18n.ts.isSystemAccount }}</MkInfo>
+					<MkInfo
+						v-if="user.username.includes('.')"
+						class="_formBlock"
+						>{{ i18n.ts.isSystemAccount }}</MkInfo
+					>
 
-				<div v-if="user.url" class="_formLinksGrid _formBlock">
-					<FormLink :to="userPage(user)">Profile</FormLink>
-					<FormLink :to="user.url" :external="true">Profile (remote)</FormLink>
-				</div>
-				<FormLink v-else class="_formBlock" :to="userPage(user)">Profile</FormLink>
+					<div v-if="user.url" class="_formLinksGrid _formBlock">
+						<FormLink :to="userPage(user)">Profile</FormLink>
+						<FormLink :to="user.url" :external="true"
+							>Profile (remote)</FormLink
+						>
+					</div>
+					<FormLink v-else class="_formBlock" :to="userPage(user)"
+						>Profile</FormLink
+					>
 
-				<FormLink v-if="user.host" class="_formBlock" :to="`/instance-info/${user.host}`">{{ i18n.ts.instanceInfo }}</FormLink>
+					<FormLink
+						v-if="user.host"
+						class="_formBlock"
+						:to="`/instance-info/${user.host}`"
+						>{{ i18n.ts.instanceInfo }}</FormLink
+					>
 
-				<div class="_formBlock">
-					<MkKeyValue :copy="user.id" oneline style="margin: 1em 0;">
-						<template #key>ID</template>
-						<template #value><span class="_monospace">{{ user.id }}</span></template>
-					</MkKeyValue>
-					<!-- 要る？
+					<div class="_formBlock">
+						<MkKeyValue
+							:copy="user.id"
+							oneline
+							style="margin: 1em 0"
+						>
+							<template #key>ID</template>
+							<template #value
+								><span class="_monospace">{{
+									user.id
+								}}</span></template
+							>
+						</MkKeyValue>
+						<!-- 要る？
 					<MkKeyValue v-if="ips.length > 0" :copy="user.id" oneline style="margin: 1em 0;">
 						<template #key>IP (recent)</template>
 						<template #value><span class="_monospace">{{ ips[0].ip }}</span></template>
 					</MkKeyValue>
 					-->
-					<MkKeyValue oneline style="margin: 1em 0;">
-						<template #key>{{ i18n.ts.createdAt }}</template>
-						<template #value><span class="_monospace"><MkTime :time="user.createdAt" :mode="'detail'"/></span></template>
-					</MkKeyValue>
-					<MkKeyValue v-if="info" oneline style="margin: 1em 0;">
-						<template #key>{{ i18n.ts.lastActiveDate }}</template>
-						<template #value><span class="_monospace"><MkTime :time="info.lastActiveDate" :mode="'detail'"/></span></template>
-					</MkKeyValue>
-					<MkKeyValue v-if="info" oneline style="margin: 1em 0;">
-						<template #key>{{ i18n.ts.email }}</template>
-						<template #value><span class="_monospace">{{ info.email }}</span></template>
-					</MkKeyValue>
-				</div>
-
-				<FormSection>
-					<template #label>ActivityPub</template>
-
-					<div class="_formBlock">
-						<MkKeyValue v-if="user.host" oneline style="margin: 1em 0;">
-							<template #key>{{ i18n.ts.instanceInfo }}</template>
-							<template #value><MkA :to="`/instance-info/${user.host}`" class="_link">{{ user.host }} <i class="ph-caret-right ph-bold ph-lg"></i></MkA></template>
+						<MkKeyValue oneline style="margin: 1em 0">
+							<template #key>{{ i18n.ts.createdAt }}</template>
+							<template #value
+								><span class="_monospace"
+									><MkTime
+										:time="user.createdAt"
+										:mode="'detail'" /></span
+							></template>
 						</MkKeyValue>
-						<MkKeyValue v-else oneline style="margin: 1em 0;">
-							<template #key>{{ i18n.ts.instanceInfo }}</template>
-							<template #value>(Local user)</template>
+						<MkKeyValue v-if="info" oneline style="margin: 1em 0">
+							<template #key>{{
+								i18n.ts.lastActiveDate
+							}}</template>
+							<template #value
+								><span class="_monospace"
+									><MkTime
+										:time="info.lastActiveDate"
+										:mode="'detail'" /></span
+							></template>
 						</MkKeyValue>
-						<MkKeyValue oneline style="margin: 1em 0;">
-							<template #key>{{ i18n.ts.updatedAt }}</template>
-							<template #value><MkTime v-if="user.lastFetchedAt" mode="detail" :time="user.lastFetchedAt"/><span v-else>N/A</span></template>
-						</MkKeyValue>
-						<MkKeyValue v-if="ap" oneline style="margin: 1em 0;">
-							<template #key>Type</template>
-							<template #value><span class="_monospace">{{ ap.type }}</span></template>
+						<MkKeyValue v-if="info" oneline style="margin: 1em 0">
+							<template #key>{{ i18n.ts.email }}</template>
+							<template #value
+								><span class="_monospace">{{
+									info.email
+								}}</span></template
+							>
 						</MkKeyValue>
 					</div>
 
-					<FormButton v-if="user.host != null" class="_formBlock" @click="updateRemoteUser"><i class="ph-arrows-clockwise ph-bold ph-lg"></i> {{ i18n.ts.updateRemoteUser }}</FormButton>
+					<FormSection>
+						<template #label>ActivityPub</template>
 
-					<FormFolder class="_formBlock">
-						<template #label>Raw</template>
-
-						<MkObjectView v-if="ap" tall :value="ap">
-						</MkObjectView>
-					</FormFolder>
-				</FormSection>
-			</div>
-			<div v-else-if="tab === 'moderation'" class="_formRoot">
-				<FormSwitch v-if="user.host == null && $i.isAdmin && (moderator || !user.isAdmin)" v-model="moderator" class="_formBlock" @update:modelValue="toggleModerator">{{ i18n.ts.moderator }}</FormSwitch>
-				<FormSwitch v-model="silenced" class="_formBlock" @update:modelValue="toggleSilence">{{ i18n.ts.silence }}</FormSwitch>
-				<FormSwitch v-model="suspended" class="_formBlock" @update:modelValue="toggleSuspend">{{ i18n.ts.suspend }}</FormSwitch>
-				{{ i18n.ts.reflectMayTakeTime }}
-				<div class="_formBlock">
-					<FormButton v-if="user.host == null && iAmModerator" inline style="margin-right: 8px;" @click="resetPassword"><i class="ph-key ph-bold ph-lg"></i> {{ i18n.ts.resetPassword }}</FormButton>
-					<FormButton v-if="$i.isAdmin" inline danger @click="deleteAccount">{{ i18n.ts.deleteAccount }}</FormButton>
-				</div>
-				<FormTextarea v-model="moderationNote" manual-save class="_formBlock">
-					<template #label>Moderation note</template>
-				</FormTextarea>
-				<FormFolder class="_formBlock">
-					<template #label>IP</template>
-					<MkInfo v-if="!iAmAdmin" warn>{{ i18n.ts.requireAdminForView }}</MkInfo>
-					<MkInfo v-else>The date is the IP address was first acknowledged.</MkInfo>
-					<template v-if="iAmAdmin && ips">
-						<div v-for="record in ips" :key="record.ip" class="_monospace" :class="$style.ip" style="margin: 1em 0;">
-							<span class="date">{{ record.createdAt }}</span>
-							<span class="ip">{{ record.ip }}</span>
+						<div class="_formBlock">
+							<MkKeyValue
+								v-if="user.host"
+								oneline
+								style="margin: 1em 0"
+							>
+								<template #key>{{
+									i18n.ts.instanceInfo
+								}}</template>
+								<template #value
+									><MkA
+										:to="`/instance-info/${user.host}`"
+										class="_link"
+										>{{ user.host }}
+										<i
+											class="ph-caret-right ph-bold ph-lg"
+										></i></MkA
+								></template>
+							</MkKeyValue>
+							<MkKeyValue v-else oneline style="margin: 1em 0">
+								<template #key>{{
+									i18n.ts.instanceInfo
+								}}</template>
+								<template #value>(Local user)</template>
+							</MkKeyValue>
+							<MkKeyValue oneline style="margin: 1em 0">
+								<template #key>{{
+									i18n.ts.updatedAt
+								}}</template>
+								<template #value
+									><MkTime
+										v-if="user.lastFetchedAt"
+										mode="detail"
+										:time="user.lastFetchedAt"
+									/><span v-else>N/A</span></template
+								>
+							</MkKeyValue>
+							<MkKeyValue v-if="ap" oneline style="margin: 1em 0">
+								<template #key>Type</template>
+								<template #value
+									><span class="_monospace">{{
+										ap.type
+									}}</span></template
+								>
+							</MkKeyValue>
 						</div>
-					</template>
-				</FormFolder>
-				<FormFolder class="_formBlock">
-					<template #label>{{ i18n.ts.files }}</template>
 
-					<MkFileListForAdmin :pagination="filesPagination" view-mode="grid"/>
-				</FormFolder>
-				<FormSection>
-					<template #label>Drive Capacity Override</template>
+						<FormButton
+							v-if="user.host != null"
+							class="_formBlock"
+							@click="updateRemoteUser"
+							><i class="ph-arrows-clockwise ph-bold ph-lg"></i>
+							{{ i18n.ts.updateRemoteUser }}</FormButton
+						>
 
-					<FormInput v-if="user.host == null" v-model="driveCapacityOverrideMb" inline :manual-save="true" type="number" :placeholder="i18n.t('defaultValueIs', { value: instance.driveCapacityPerLocalUserMb })" @update:model-value="applyDriveCapacityOverride">
-						<template #label>{{ i18n.ts.driveCapOverrideLabel }}</template>
-						<template #suffix>MB</template>
-						<template #caption>
-							{{ i18n.ts.driveCapOverrideCaption }}
-						</template>
-					</FormInput>
-				</FormSection>
-			</div>
-			<div v-else-if="tab === 'chart'" class="_formRoot">
-				<div class="cmhjzshm">
-					<div class="selects">
-						<MkSelect v-model="chartSrc" style="margin: 0 10px 0 0; flex: 1;">
-							<option value="per-user-notes">{{ i18n.ts.notes }}</option>
-						</MkSelect>
+						<FormFolder class="_formBlock">
+							<template #label>Raw</template>
+
+							<MkObjectView v-if="ap" tall :value="ap">
+							</MkObjectView>
+						</FormFolder>
+					</FormSection>
+				</div>
+				<div v-else-if="tab === 'moderation'" class="_formRoot">
+					<FormSwitch
+						v-if="
+							user.host == null &&
+							$i.isAdmin &&
+							(moderator || !user.isAdmin)
+						"
+						v-model="moderator"
+						class="_formBlock"
+						@update:modelValue="toggleModerator"
+						>{{ i18n.ts.moderator }}</FormSwitch
+					>
+					<FormSwitch
+						v-model="silenced"
+						class="_formBlock"
+						@update:modelValue="toggleSilence"
+						>{{ i18n.ts.silence }}</FormSwitch
+					>
+					<FormSwitch
+						v-model="suspended"
+						class="_formBlock"
+						@update:modelValue="toggleSuspend"
+						>{{ i18n.ts.suspend }}</FormSwitch
+					>
+					{{ i18n.ts.reflectMayTakeTime }}
+					<div class="_formBlock">
+						<FormButton
+							v-if="user.host == null && iAmModerator"
+							inline
+							style="margin-right: 8px"
+							@click="resetPassword"
+							><i class="ph-key ph-bold ph-lg"></i>
+							{{ i18n.ts.resetPassword }}</FormButton
+						>
+						<FormButton
+							v-if="$i.isAdmin"
+							inline
+							danger
+							@click="deleteAccount"
+							>{{ i18n.ts.deleteAccount }}</FormButton
+						>
 					</div>
-					<div class="charts">
-						<div class="label">{{ i18n.t('recentNHours', { n: 90 }) }}</div>
-						<MkChart class="chart" :src="chartSrc" span="hour" :limit="90" :args="{ user, withoutAll: true }" :detailed="true"></MkChart>
-						<div class="label">{{ i18n.t('recentNDays', { n: 90 }) }}</div>
-						<MkChart class="chart" :src="chartSrc" span="day" :limit="90" :args="{ user, withoutAll: true }" :detailed="true"></MkChart>
+					<FormTextarea
+						v-model="moderationNote"
+						manual-save
+						class="_formBlock"
+					>
+						<template #label>Moderation note</template>
+					</FormTextarea>
+					<FormFolder class="_formBlock">
+						<template #label>IP</template>
+						<MkInfo v-if="!iAmAdmin" warn>{{
+							i18n.ts.requireAdminForView
+						}}</MkInfo>
+						<MkInfo v-else
+							>The date is the IP address was first
+							acknowledged.</MkInfo
+						>
+						<template v-if="iAmAdmin && ips">
+							<div
+								v-for="record in ips"
+								:key="record.ip"
+								class="_monospace"
+								:class="$style.ip"
+								style="margin: 1em 0"
+							>
+								<span class="date">{{ record.createdAt }}</span>
+								<span class="ip">{{ record.ip }}</span>
+							</div>
+						</template>
+					</FormFolder>
+					<FormFolder class="_formBlock">
+						<template #label>{{ i18n.ts.files }}</template>
+
+						<MkFileListForAdmin
+							:pagination="filesPagination"
+							view-mode="grid"
+						/>
+					</FormFolder>
+					<FormSection>
+						<template #label>Drive Capacity Override</template>
+
+						<FormInput
+							v-if="user.host == null"
+							v-model="driveCapacityOverrideMb"
+							inline
+							:manual-save="true"
+							type="number"
+							:placeholder="
+								i18n.t('defaultValueIs', {
+									value: instance.driveCapacityPerLocalUserMb,
+								})
+							"
+							@update:model-value="applyDriveCapacityOverride"
+						>
+							<template #label>{{
+								i18n.ts.driveCapOverrideLabel
+							}}</template>
+							<template #suffix>MB</template>
+							<template #caption>
+								{{ i18n.ts.driveCapOverrideCaption }}
+							</template>
+						</FormInput>
+					</FormSection>
+				</div>
+				<div v-else-if="tab === 'chart'" class="_formRoot">
+					<div class="cmhjzshm">
+						<div class="selects">
+							<MkSelect
+								v-model="chartSrc"
+								style="margin: 0 10px 0 0; flex: 1"
+							>
+								<option value="per-user-notes">
+									{{ i18n.ts.notes }}
+								</option>
+							</MkSelect>
+						</div>
+						<div class="charts">
+							<div class="label">
+								{{ i18n.t("recentNHours", { n: 90 }) }}
+							</div>
+							<MkChart
+								class="chart"
+								:src="chartSrc"
+								span="hour"
+								:limit="90"
+								:args="{ user, withoutAll: true }"
+								:detailed="true"
+							></MkChart>
+							<div class="label">
+								{{ i18n.t("recentNDays", { n: 90 }) }}
+							</div>
+							<MkChart
+								class="chart"
+								:src="chartSrc"
+								span="day"
+								:limit="90"
+								:args="{ user, withoutAll: true }"
+								:detailed="true"
+							></MkChart>
+						</div>
 					</div>
 				</div>
-			</div>
-			<div v-else-if="tab === 'raw'" class="_formRoot">
-				<MkObjectView v-if="info && $i.isAdmin" tall :value="info">
-				</MkObjectView>
+				<div v-else-if="tab === 'raw'" class="_formRoot">
+					<MkObjectView v-if="info && $i.isAdmin" tall :value="info">
+					</MkObjectView>
 
-				<MkObjectView tall :value="user">
-				</MkObjectView>
-			</div>
-		</FormSuspense>
-	</MkSpacer>
-</MkStickyContainer>
+					<MkObjectView tall :value="user"> </MkObjectView>
+				</div>
+			</FormSuspense>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { computed, watch } from 'vue';
-import * as misskey from 'calckey-js';
-import MkChart from '@/components/MkChart.vue';
-import MkObjectView from '@/components/MkObjectView.vue';
-import FormTextarea from '@/components/form/textarea.vue';
-import FormSwitch from '@/components/form/switch.vue';
-import FormLink from '@/components/form/link.vue';
-import FormSection from '@/components/form/section.vue';
-import FormButton from '@/components/MkButton.vue';
-import FormInput from '@/components/form/input.vue';
-import FormSplit from '@/components/form/split.vue';
-import FormFolder from '@/components/form/folder.vue';
-import MkKeyValue from '@/components/MkKeyValue.vue';
-import MkSelect from '@/components/form/select.vue';
-import FormSuspense from '@/components/form/suspense.vue';
-import MkFileListForAdmin from '@/components/MkFileListForAdmin.vue';
-import MkInfo from '@/components/MkInfo.vue';
-import * as os from '@/os';
-import number from '@/filters/number';
-import bytes from '@/filters/bytes';
-import { url } from '@/config';
-import { userPage, acct } from '@/filters/user';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import { i18n } from '@/i18n';
-import { iAmAdmin, iAmModerator } from '@/account';
-import { instance } from '@/instance';
+import { computed, watch } from "vue";
+import * as misskey from "calckey-js";
+import MkChart from "@/components/MkChart.vue";
+import MkObjectView from "@/components/MkObjectView.vue";
+import FormTextarea from "@/components/form/textarea.vue";
+import FormSwitch from "@/components/form/switch.vue";
+import FormLink from "@/components/form/link.vue";
+import FormSection from "@/components/form/section.vue";
+import FormButton from "@/components/MkButton.vue";
+import FormInput from "@/components/form/input.vue";
+import FormSplit from "@/components/form/split.vue";
+import FormFolder from "@/components/form/folder.vue";
+import MkKeyValue from "@/components/MkKeyValue.vue";
+import MkSelect from "@/components/form/select.vue";
+import FormSuspense from "@/components/form/suspense.vue";
+import MkFileListForAdmin from "@/components/MkFileListForAdmin.vue";
+import MkInfo from "@/components/MkInfo.vue";
+import * as os from "@/os";
+import number from "@/filters/number";
+import bytes from "@/filters/bytes";
+import { url } from "@/config";
+import { userPage, acct } from "@/filters/user";
+import { definePageMetadata } from "@/scripts/page-metadata";
+import { i18n } from "@/i18n";
+import { iAmAdmin, iAmModerator } from "@/account";
+import { instance } from "@/instance";
 
 const props = defineProps<{
 	userId: string;
 }>();
 
-let tab = $ref('overview');
-let chartSrc = $ref('per-user-notes');
+let tab = $ref("overview");
+let chartSrc = $ref("per-user-notes");
 let user = $ref<null | misskey.entities.UserDetailed>();
 let init = $ref<ReturnType<typeof createFetcher>>();
 let info = $ref();
@@ -194,9 +373,9 @@ let moderator = $ref(false);
 let silenced = $ref(false);
 let suspended = $ref(false);
 let driveCapacityOverrideMb: number | null = $ref(0);
-let moderationNote = $ref('');
+let moderationNote = $ref("");
 const filesPagination = {
-	endpoint: 'admin/drive/files' as const,
+	endpoint: "admin/drive/files" as const,
 	limit: 10,
 	params: computed(() => ({
 		userId: props.userId,
@@ -205,33 +384,46 @@ const filesPagination = {
 
 function createFetcher() {
 	if (iAmModerator) {
-		return () => Promise.all([os.api('users/show', {
-			userId: props.userId,
-		}), os.api('admin/show-user', {
-			userId: props.userId,
-		}), iAmAdmin ? os.api('admin/get-user-ips', {
-			userId: props.userId,
-		}) : Promise.resolve(null)]).then(([_user, _info, _ips]) => {
-			user = _user;
-			info = _info;
-			ips = _ips;
-			moderator = info.isModerator;
-			silenced = info.isSilenced;
-			suspended = info.isSuspended;
-			driveCapacityOverrideMb = user.driveCapacityOverrideMb;
-			moderationNote = info.moderationNote;
+		return () =>
+			Promise.all([
+				os.api("users/show", {
+					userId: props.userId,
+				}),
+				os.api("admin/show-user", {
+					userId: props.userId,
+				}),
+				iAmAdmin
+					? os.api("admin/get-user-ips", {
+							userId: props.userId,
+					  })
+					: Promise.resolve(null),
+			]).then(([_user, _info, _ips]) => {
+				user = _user;
+				info = _info;
+				ips = _ips;
+				moderator = info.isModerator;
+				silenced = info.isSilenced;
+				suspended = info.isSuspended;
+				driveCapacityOverrideMb = user.driveCapacityOverrideMb;
+				moderationNote = info.moderationNote;
 
-			watch($$(moderationNote), async () => {
-				await os.api('admin/update-user-note', { userId: user.id, text: moderationNote });
-				await refreshUser();
+				watch($$(moderationNote), async () => {
+					await os.api("admin/update-user-note", {
+						userId: user.id,
+						text: moderationNote,
+					});
+					await refreshUser();
+				});
 			});
-		});
 	} else {
-		return () => os.api('users/show', {
-			userId: props.userId,
-		}).then((res) => {
-			user = res;
-		});
+		return () =>
+			os
+				.api("users/show", {
+					userId: props.userId,
+				})
+				.then((res) => {
+					user = res;
+				});
 	}
 }
 
@@ -240,65 +432,73 @@ function refreshUser() {
 }
 
 async function updateRemoteUser() {
-	await os.apiWithDialog('federation/update-remote-user', { userId: user.id });
+	await os.apiWithDialog("federation/update-remote-user", {
+		userId: user.id,
+	});
 	refreshUser();
 }
 
 async function resetPassword() {
-	const { password } = await os.api('admin/reset-password', {
+	const { password } = await os.api("admin/reset-password", {
 		userId: user.id,
 	});
 
 	os.alert({
-		type: 'success',
-		text: i18n.t('newPasswordIs', { password }),
+		type: "success",
+		text: i18n.t("newPasswordIs", { password }),
 	});
 }
 
 async function toggleSilence(v) {
 	const confirm = await os.confirm({
-		type: 'warning',
+		type: "warning",
 		text: v ? i18n.ts.silenceConfirm : i18n.ts.unsilenceConfirm,
 	});
 	if (confirm.canceled) {
 		silenced = !v;
 	} else {
-		await os.api(v ? 'admin/silence-user' : 'admin/unsilence-user', { userId: user.id });
+		await os.api(v ? "admin/silence-user" : "admin/unsilence-user", {
+			userId: user.id,
+		});
 		await refreshUser();
 	}
 }
 
 async function toggleSuspend(v) {
 	const confirm = await os.confirm({
-		type: 'warning',
+		type: "warning",
 		text: v ? i18n.ts.suspendConfirm : i18n.ts.unsuspendConfirm,
 	});
 	if (confirm.canceled) {
 		suspended = !v;
 	} else {
-		await os.api(v ? 'admin/suspend-user' : 'admin/unsuspend-user', { userId: user.id });
+		await os.api(v ? "admin/suspend-user" : "admin/unsuspend-user", {
+			userId: user.id,
+		});
 		await refreshUser();
 	}
 }
 
 async function toggleModerator(v) {
-	await os.api(v ? 'admin/moderators/add' : 'admin/moderators/remove', { userId: user.id });
+	await os.api(v ? "admin/moderators/add" : "admin/moderators/remove", {
+		userId: user.id,
+	});
 	await refreshUser();
 }
 
 async function deleteAllFiles() {
 	const confirm = await os.confirm({
-		type: 'warning',
+		type: "warning",
 		text: i18n.ts.deleteAllFilesConfirm,
 	});
 	if (confirm.canceled) return;
 	const process = async () => {
-		await os.api('admin/delete-all-files-of-a-user', { userId: user.id });
+		await os.api("admin/delete-all-files-of-a-user", { userId: user.id });
 		os.success();
 	};
-	await process().catch(err => {
+	await process().catch((err) => {
 		os.alert({
-			type: 'error',
+			type: "error",
 			text: err.toString(),
 		});
 	});
@@ -311,11 +511,14 @@ async function applyDriveCapacityOverride() {
 		driveCapOrMb = null;
 	}
 	try {
-		await os.apiWithDialog('admin/drive-capacity-override', { userId: user.id, overrideMb: driveCapOrMb });
+		await os.apiWithDialog("admin/drive-capacity-override", {
+			userId: user.id,
+			overrideMb: driveCapOrMb,
+		});
 		await refreshUser();
 	} catch (err) {
 		os.alert({
-			type: 'error',
+			type: "error",
 			text: err.toString(),
 		});
 	}
@@ -323,66 +526,81 @@ async function applyDriveCapacityOverride() {
 
 async function deleteAccount() {
 	const confirm = await os.confirm({
-		type: 'warning',
+		type: "warning",
 		text: i18n.ts.deleteAccountConfirm,
 	});
 	if (confirm.canceled) return;
 
 	const typed = await os.inputText({
-		text: i18n.t('typeToConfirm', { x: user?.username }),
+		text: i18n.t("typeToConfirm", { x: user?.username }),
 	});
 	if (typed.canceled) return;
 
 	if (typed.result === user?.username) {
-		await os.apiWithDialog('admin/delete-account', {
+		await os.apiWithDialog("admin/delete-account", {
 			userId: user.id,
 		});
 	} else {
 		os.alert({
-			type: 'error',
-			text: 'input not match',
+			type: "error",
+			text: "input not match",
 		});
 	}
 }
 
-watch(() => props.userId, () => {
-	init = createFetcher();
-}, {
-	immediate: true,
-});
+watch(
+	() => props.userId,
+	() => {
+		init = createFetcher();
+	},
+	{
+		immediate: true,
+	}
+);
 
 watch($$(user), () => {
-	os.api('ap/get', {
+	os.api("ap/get", {
 		uri: user.uri ?? `${url}/users/${user.id}`,
-	}).then(res => {
+	}).then((res) => {
 		ap = res;
 	});
 });
 
 const headerActions = $computed(() => []);
 
-const headerTabs = $computed(() => [{
-	key: 'overview',
-	title: i18n.ts.overview,
-	icon: 'ph-info ph-bold ph-lg',
-}, iAmModerator ? {
-	key: 'moderation',
-	title: i18n.ts.moderation,
-	icon: 'ph-shield ph-bold ph-lg',
-} : null, {
-	key: 'chart',
-	title: i18n.ts.charts,
-	icon: 'ph-chart-bar ph-bold ph-lg',
-}, {
-	key: 'raw',
-	title: 'Raw',
-	icon: 'ph-code ph-bold ph-lg',
-}].filter(x => x != null));
+const headerTabs = $computed(() =>
+	[
+		{
+			key: "overview",
+			title: i18n.ts.overview,
+			icon: "ph-info ph-bold ph-lg",
+		},
+		iAmModerator
+			? {
+					key: "moderation",
+					title: i18n.ts.moderation,
+					icon: "ph-shield ph-bold ph-lg",
+			  }
+			: null,
+		{
+			key: "chart",
+			title: i18n.ts.charts,
+			icon: "ph-chart-bar ph-bold ph-lg",
+		},
+		{
+			key: "raw",
+			title: "Raw",
+			icon: "ph-code ph-bold ph-lg",
+		},
+	].filter((x) => x != null)
+);
 
-definePageMetadata(computed(() => ({
-	title: user ? acct(user) : i18n.ts.userInfo,
-	icon: 'ph-info ph-bold ph-lg',
-})));
+definePageMetadata(
+	computed(() => ({
+		title: user ? acct(user) : i18n.ts.userInfo,
+		icon: "ph-info ph-bold ph-lg",
+	}))
+);
 </script>
 
 <style lang="scss" scoped>
@@ -429,7 +647,9 @@ definePageMetadata(computed(() => ({
 				display: none;
 			}
 
-			> .suspended, > .silenced, > .moderator {
+			> .suspended,
+			> .silenced,
+			> .moderator {
 				display: inline-block;
 				border: solid 1px;
 				border-radius: 6px;
diff --git a/packages/client/src/pages/user-list-timeline.vue b/packages/client/src/pages/user-list-timeline.vue
index 42c8960b42..2fd82500e4 100644
--- a/packages/client/src/pages/user-list-timeline.vue
+++ b/packages/client/src/pages/user-list-timeline.vue
@@ -1,30 +1,37 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
-	<div ref="rootEl" v-size="{ min: [800] }" class="eqqrhokj">
-		<div v-if="queue > 0" class="new"><button class="_buttonPrimary" @click="top()">{{ i18n.ts.newNoteRecived }}</button></div>
-		<div class="tl _block">
-			<XTimeline
-				ref="tlEl" :key="listId"
-				class="tl"
-				src="list"
-				:list="listId"
-				:sound="true"
-				@queue="queueUpdated"
-			/>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader :actions="headerActions" :tabs="headerTabs"
+		/></template>
+		<div ref="rootEl" v-size="{ min: [800] }" class="eqqrhokj">
+			<div v-if="queue > 0" class="new">
+				<button class="_buttonPrimary" @click="top()">
+					{{ i18n.ts.newNoteRecived }}
+				</button>
+			</div>
+			<div class="tl _block">
+				<XTimeline
+					ref="tlEl"
+					:key="listId"
+					class="tl"
+					src="list"
+					:list="listId"
+					:sound="true"
+					@queue="queueUpdated"
+				/>
+			</div>
 		</div>
-	</div>
-</MkStickyContainer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { computed, watch, inject } from 'vue';
-import XTimeline from '@/components/MkTimeline.vue';
-import { scroll } from '@/scripts/scroll';
-import * as os from '@/os';
-import { useRouter } from '@/router';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import { i18n } from '@/i18n';
+import { computed, watch, inject } from "vue";
+import XTimeline from "@/components/MkTimeline.vue";
+import { scroll } from "@/scripts/scroll";
+import * as os from "@/os";
+import { useRouter } from "@/router";
+import { definePageMetadata } from "@/scripts/page-metadata";
+import { i18n } from "@/i18n";
 
 const router = useRouter();
 
@@ -37,11 +44,15 @@ let queue = $ref(0);
 let tlEl = $ref<InstanceType<typeof XTimeline>>();
 let rootEl = $ref<HTMLElement>();
 
-watch(() => props.listId, async () => {
-	list = await os.api('users/lists/show', {
-		listId: props.listId,
-	});
-}, { immediate: true });
+watch(
+	() => props.listId,
+	async () => {
+		list = await os.api("users/lists/show", {
+			listId: props.listId,
+		});
+	},
+	{ immediate: true }
+);
 
 function queueUpdated(q) {
 	queue = q;
@@ -64,22 +75,35 @@ async function timetravel() {
 	tlEl.timetravel(date);
 }
 
-const headerActions = $computed(() => list ? [{
-	icon: 'ph-calendar-blank ph-bold ph-lg',
-	text: i18n.ts.jumpToSpecifiedDate,
-	handler: timetravel,
-}, {
-	icon: 'ph-gear-six ph-bold ph-lg',
-	text: i18n.ts.settings,
-	handler: settings,
-}] : []);
+const headerActions = $computed(() =>
+	list
+		? [
+				{
+					icon: "ph-calendar-blank ph-bold ph-lg",
+					text: i18n.ts.jumpToSpecifiedDate,
+					handler: timetravel,
+				},
+				{
+					icon: "ph-gear-six ph-bold ph-lg",
+					text: i18n.ts.settings,
+					handler: settings,
+				},
+		  ]
+		: []
+);
 
 const headerTabs = $computed(() => []);
 
-definePageMetadata(computed(() => list ? {
-	title: list.name,
-	icon: 'ph-list-bullets ph-bold ph-lg',
-} : null));
+definePageMetadata(
+	computed(() =>
+		list
+			? {
+					title: list.name,
+					icon: "ph-list-bullets ph-bold ph-lg",
+			  }
+			: null
+	)
+);
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/pages/user/clips.vue b/packages/client/src/pages/user/clips.vue
index 7c8925962a..5eb57484b7 100644
--- a/packages/client/src/pages/user/clips.vue
+++ b/packages/client/src/pages/user/clips.vue
@@ -1,27 +1,39 @@
 <template>
-<MkSpacer :content-max="800">
-	<div class="pages-user-clips">
-		<MkPagination v-slot="{items}" ref="list" :pagination="pagination" class="list">
-			<MkA v-for="item in items" :key="item.id" :to="`/clips/${item.id}`" class="item _panel _gap">
-				<b>{{ item.name }}</b>
-				<div v-if="item.description" class="description">{{ item.description }}</div>
-			</MkA>
-		</MkPagination>
-	</div>
-</MkSpacer>
+	<MkSpacer :content-max="800">
+		<div class="pages-user-clips">
+			<MkPagination
+				v-slot="{ items }"
+				ref="list"
+				:pagination="pagination"
+				class="list"
+			>
+				<MkA
+					v-for="item in items"
+					:key="item.id"
+					:to="`/clips/${item.id}`"
+					class="item _panel _gap"
+				>
+					<b>{{ item.name }}</b>
+					<div v-if="item.description" class="description">
+						{{ item.description }}
+					</div>
+				</MkA>
+			</MkPagination>
+		</div>
+	</MkSpacer>
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
-import * as misskey from 'calckey-js';
-import MkPagination from '@/components/MkPagination.vue';
+import { computed } from "vue";
+import * as misskey from "calckey-js";
+import MkPagination from "@/components/MkPagination.vue";
 
 const props = defineProps<{
 	user: misskey.entities.User;
 }>();
 
 const pagination = {
-	endpoint: 'users/clips' as const,
+	endpoint: "users/clips" as const,
 	limit: 20,
 	params: computed(() => ({
 		userId: props.user.id,
diff --git a/packages/client/src/pages/user/follow-list.vue b/packages/client/src/pages/user/follow-list.vue
index d543e2bb4e..b4715d8c95 100644
--- a/packages/client/src/pages/user/follow-list.vue
+++ b/packages/client/src/pages/user/follow-list.vue
@@ -1,26 +1,40 @@
 <template>
-<div>
-	<MkPagination v-slot="{items}" ref="list" :pagination="type === 'following' ? followingPagination : followersPagination" class="mk-following-or-followers">
-		<div class="users">
-			<MkUserInfo v-for="user in items.map(x => type === 'following' ? x.followee : x.follower)" :key="user.id" class="user" :user="user"/>
-		</div>
-	</MkPagination>
-</div>
+	<div>
+		<MkPagination
+			v-slot="{ items }"
+			ref="list"
+			:pagination="
+				type === 'following' ? followingPagination : followersPagination
+			"
+			class="mk-following-or-followers"
+		>
+			<div class="users">
+				<MkUserInfo
+					v-for="user in items.map((x) =>
+						type === 'following' ? x.followee : x.follower
+					)"
+					:key="user.id"
+					class="user"
+					:user="user"
+				/>
+			</div>
+		</MkPagination>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
-import * as misskey from 'calckey-js';
-import MkUserInfo from '@/components/MkUserInfo.vue';
-import MkPagination from '@/components/MkPagination.vue';
+import { computed } from "vue";
+import * as misskey from "calckey-js";
+import MkUserInfo from "@/components/MkUserInfo.vue";
+import MkPagination from "@/components/MkPagination.vue";
 
 const props = defineProps<{
 	user: misskey.entities.User;
-	type: 'following' | 'followers';
+	type: "following" | "followers";
 }>();
 
 const followingPagination = {
-	endpoint: 'users/following' as const,
+	endpoint: "users/following" as const,
 	limit: 20,
 	params: computed(() => ({
 		userId: props.user.id,
@@ -28,7 +42,7 @@ const followingPagination = {
 };
 
 const followersPagination = {
-	endpoint: 'users/followers' as const,
+	endpoint: "users/followers" as const,
 	limit: 20,
 	params: computed(() => ({
 		userId: props.user.id,
diff --git a/packages/client/src/pages/user/followers.vue b/packages/client/src/pages/user/followers.vue
index 5fbf389858..b22922719e 100644
--- a/packages/client/src/pages/user/followers.vue
+++ b/packages/client/src/pages/user/followers.vue
@@ -1,31 +1,42 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
-	<MkSpacer :content-max="1000">
-		<transition name="fade" mode="out-in">
-			<div v-if="user">
-				<XFollowList :user="user" type="followers"/>
-			</div>
-			<MkError v-else-if="error" @retry="fetchUser()"/>
-			<MkLoading v-else/>
-		</transition>
-	</MkSpacer>
-</MkStickyContainer>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader :actions="headerActions" :tabs="headerTabs"
+		/></template>
+		<MkSpacer :content-max="1000">
+			<transition name="fade" mode="out-in">
+				<div v-if="user">
+					<XFollowList :user="user" type="followers" />
+				</div>
+				<MkError v-else-if="error" @retry="fetchUser()" />
+				<MkLoading v-else />
+			</transition>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent, computed, inject, onMounted, onUnmounted, watch } from 'vue';
-import * as Acct from 'calckey-js/built/acct';
-import * as misskey from 'calckey-js';
-import XFollowList from './follow-list.vue';
-import * as os from '@/os';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import { i18n } from '@/i18n';
+import {
+	defineAsyncComponent,
+	computed,
+	inject,
+	onMounted,
+	onUnmounted,
+	watch,
+} from "vue";
+import * as Acct from "calckey-js/built/acct";
+import * as misskey from "calckey-js";
+import XFollowList from "./follow-list.vue";
+import * as os from "@/os";
+import { definePageMetadata } from "@/scripts/page-metadata";
+import { i18n } from "@/i18n";
 
-const props = withDefaults(defineProps<{
-	acct: string;
-}>(), {
-});
+const props = withDefaults(
+	defineProps<{
+		acct: string;
+	}>(),
+	{}
+);
 
 let user = $ref<null | misskey.entities.UserDetailed>(null);
 let error = $ref(null);
@@ -33,11 +44,13 @@ let error = $ref(null);
 function fetchUser(): void {
 	if (props.acct == null) return;
 	user = null;
-	os.api('users/show', Acct.parse(props.acct)).then(u => {
-		user = u;
-	}).catch(err => {
-		error = err;
-	});
+	os.api("users/show", Acct.parse(props.acct))
+		.then((u) => {
+			user = u;
+		})
+		.catch((err) => {
+			error = err;
+		});
 }
 
 watch(() => props.acct, fetchUser, {
@@ -48,14 +61,21 @@ const headerActions = $computed(() => []);
 
 const headerTabs = $computed(() => []);
 
-definePageMetadata(computed(() => user ? {
-	icon: 'ph-user ph-bold ph-lg',
-	title: user.name ? `${user.name} (@${user.username})` : `@${user.username}`,
-	subtitle: i18n.ts.followers,
-	userName: user,
-	avatar: user,
-} : null));
+definePageMetadata(
+	computed(() =>
+		user
+			? {
+					icon: "ph-user ph-bold ph-lg",
+					title: user.name
+						? `${user.name} (@${user.username})`
+						: `@${user.username}`,
+					subtitle: i18n.ts.followers,
+					userName: user,
+					avatar: user,
+			  }
+			: null
+	)
+);
 </script>
 
-<style lang="scss" scoped>
-</style>
+<style lang="scss" scoped></style>
diff --git a/packages/client/src/pages/user/following.vue b/packages/client/src/pages/user/following.vue
index c970668f40..be994f835a 100644
--- a/packages/client/src/pages/user/following.vue
+++ b/packages/client/src/pages/user/following.vue
@@ -1,31 +1,42 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
-	<MkSpacer :content-max="1000">
-		<transition name="fade" mode="out-in">
-			<div v-if="user">
-				<XFollowList :user="user" type="following"/>
-			</div>
-			<MkError v-else-if="error" @retry="fetchUser()"/>
-			<MkLoading v-else/>
-		</transition>
-	</MkSpacer>
-</MkStickyContainer>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader :actions="headerActions" :tabs="headerTabs"
+		/></template>
+		<MkSpacer :content-max="1000">
+			<transition name="fade" mode="out-in">
+				<div v-if="user">
+					<XFollowList :user="user" type="following" />
+				</div>
+				<MkError v-else-if="error" @retry="fetchUser()" />
+				<MkLoading v-else />
+			</transition>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent, computed, inject, onMounted, onUnmounted, watch } from 'vue';
-import * as Acct from 'calckey-js/built/acct';
-import * as misskey from 'calckey-js';
-import XFollowList from './follow-list.vue';
-import * as os from '@/os';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import { i18n } from '@/i18n';
+import {
+	defineAsyncComponent,
+	computed,
+	inject,
+	onMounted,
+	onUnmounted,
+	watch,
+} from "vue";
+import * as Acct from "calckey-js/built/acct";
+import * as misskey from "calckey-js";
+import XFollowList from "./follow-list.vue";
+import * as os from "@/os";
+import { definePageMetadata } from "@/scripts/page-metadata";
+import { i18n } from "@/i18n";
 
-const props = withDefaults(defineProps<{
-	acct: string;
-}>(), {
-});
+const props = withDefaults(
+	defineProps<{
+		acct: string;
+	}>(),
+	{}
+);
 
 let user = $ref<null | misskey.entities.UserDetailed>(null);
 let error = $ref(null);
@@ -33,11 +44,13 @@ let error = $ref(null);
 function fetchUser(): void {
 	if (props.acct == null) return;
 	user = null;
-	os.api('users/show', Acct.parse(props.acct)).then(u => {
-		user = u;
-	}).catch(err => {
-		error = err;
-	});
+	os.api("users/show", Acct.parse(props.acct))
+		.then((u) => {
+			user = u;
+		})
+		.catch((err) => {
+			error = err;
+		});
 }
 
 watch(() => props.acct, fetchUser, {
@@ -48,14 +61,21 @@ const headerActions = $computed(() => []);
 
 const headerTabs = $computed(() => []);
 
-definePageMetadata(computed(() => user ? {
-	icon: 'ph-user ph-bold ph-lg',
-	title: user.name ? `${user.name} (@${user.username})` : `@${user.username}`,
-	subtitle: i18n.ts.following,
-	userName: user,
-	avatar: user,
-} : null));
+definePageMetadata(
+	computed(() =>
+		user
+			? {
+					icon: "ph-user ph-bold ph-lg",
+					title: user.name
+						? `${user.name} (@${user.username})`
+						: `@${user.username}`,
+					subtitle: i18n.ts.following,
+					userName: user,
+					avatar: user,
+			  }
+			: null
+	)
+);
 </script>
 
-<style lang="scss" scoped>
-</style>
+<style lang="scss" scoped></style>
diff --git a/packages/client/src/pages/user/gallery.vue b/packages/client/src/pages/user/gallery.vue
index f8ad1340f9..47a4ab74cb 100644
--- a/packages/client/src/pages/user/gallery.vue
+++ b/packages/client/src/pages/user/gallery.vue
@@ -1,26 +1,33 @@
 <template>
-<MkSpacer :content-max="800">
-	<MkPagination v-slot="{items}" :pagination="pagination">
-		<div class="jrnovfpt">
-			<MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/>
-		</div>
-	</MkPagination>
-</MkSpacer>
+	<MkSpacer :content-max="800">
+		<MkPagination v-slot="{ items }" :pagination="pagination">
+			<div class="jrnovfpt">
+				<MkGalleryPostPreview
+					v-for="post in items"
+					:key="post.id"
+					:post="post"
+					class="post"
+				/>
+			</div>
+		</MkPagination>
+	</MkSpacer>
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
-import * as misskey from 'calckey-js';
-import MkGalleryPostPreview from '@/components/MkGalleryPostPreview.vue';
-import MkPagination from '@/components/MkPagination.vue';
+import { computed } from "vue";
+import * as misskey from "calckey-js";
+import MkGalleryPostPreview from "@/components/MkGalleryPostPreview.vue";
+import MkPagination from "@/components/MkPagination.vue";
 
-const props = withDefaults(defineProps<{
-	user: misskey.entities.User;
-}>(), {
-});
+const props = withDefaults(
+	defineProps<{
+		user: misskey.entities.User;
+	}>(),
+	{}
+);
 
 const pagination = {
-	endpoint: 'users/gallery/posts' as const,
+	endpoint: "users/gallery/posts" as const,
 	limit: 6,
 	params: computed(() => ({
 		userId: props.user.id,
diff --git a/packages/client/src/pages/user/home.vue b/packages/client/src/pages/user/home.vue
index a42bb07364..3fa01d9c06 100644
--- a/packages/client/src/pages/user/home.vue
+++ b/packages/client/src/pages/user/home.vue
@@ -1,149 +1,338 @@
 <template>
-<MkSpacer :content-max="narrow ? 800 : 1100">
-	<div ref="rootEl" v-size="{ max: [500] }" class="ftskorzw" :class="{ wide: !narrow }">
-		<div class="main">
-			<!-- TODO -->
-			<!-- <div class="punished" v-if="user.isSuspended"><i class="ph-warning ph-bold ph-lg" style="margin-right: 8px;"></i> {{ i18n.ts.userSuspended }}</div> -->
-			<!-- <div class="punished" v-if="user.isSilenced"><i class="ph-warning ph-bold ph-lg" style="margin-right: 8px;"></i> {{ i18n.ts.userSilenced }}</div> -->
+	<MkSpacer :content-max="narrow ? 800 : 1100">
+		<div
+			ref="rootEl"
+			v-size="{ max: [500] }"
+			class="ftskorzw"
+			:class="{ wide: !narrow }"
+		>
+			<div class="main">
+				<!-- TODO -->
+				<!-- <div class="punished" v-if="user.isSuspended"><i class="ph-warning ph-bold ph-lg" style="margin-right: 8px;"></i> {{ i18n.ts.userSuspended }}</div> -->
+				<!-- <div class="punished" v-if="user.isSilenced"><i class="ph-warning ph-bold ph-lg" style="margin-right: 8px;"></i> {{ i18n.ts.userSilenced }}</div> -->
 
-			<div class="profile">
-				<MkMoved v-if="user.movedToUri" :host="user.movedToUri.host" :acct="user.movedToUri.username"/>
-				<MkRemoteCaution v-if="user.host != null" :href="user.url" class="warn"/>
+				<div class="profile">
+					<MkMoved
+						v-if="user.movedToUri"
+						:host="user.movedToUri.host"
+						:acct="user.movedToUri.username"
+					/>
+					<MkRemoteCaution
+						v-if="user.host != null"
+						:href="user.url"
+						class="warn"
+					/>
 
-				<div :key="user.id" class="_block main">
-					<div class="banner-container" :style="style">
-						<div ref="bannerEl" class="banner" :style="style"></div>
-						<div class="fade"></div>
+					<div :key="user.id" class="_block main">
+						<div class="banner-container" :style="style">
+							<div
+								ref="bannerEl"
+								class="banner"
+								:style="style"
+							></div>
+							<div class="fade"></div>
+							<div class="title">
+								<div class="nameCollumn">
+									<MkUserName
+										class="name"
+										:user="user"
+										:nowrap="true"
+									/>
+									<span
+										v-if="
+											$i &&
+											$i.id != user.id &&
+											user.isFollowed
+										"
+										class="followed"
+										>{{ i18n.ts.followsYou }}</span
+									>
+								</div>
+								<div class="bottom">
+									<span class="username"
+										><MkAcct :user="user" :detail="true"
+									/></span>
+									<span
+										v-if="user.isAdmin"
+										:title="i18n.ts.isAdmin"
+										style="color: var(--badge)"
+										><i
+											class="ph-bookmark-simple ph-fill ph-lg"
+										></i
+									></span>
+									<span
+										v-if="!user.isAdmin && user.isModerator"
+										:title="i18n.ts.isModerator"
+										style="color: var(--badge)"
+										><i
+											class="ph-bookmark-simple ph-bold"
+										></i
+									></span>
+									<span
+										v-if="user.isLocked"
+										:title="i18n.ts.isLocked"
+										><i class="ph-lock ph-bold ph-lg"></i
+									></span>
+									<span
+										v-if="user.isBot"
+										:title="i18n.ts.isBot"
+										><i class="ph-robot ph-bold ph-lg"></i
+									></span>
+								</div>
+							</div>
+						</div>
+						<MkAvatar
+							class="avatar"
+							:user="user"
+							:disable-preview="true"
+							:show-indicator="true"
+						/>
 						<div class="title">
 							<div class="nameCollumn">
-								<MkUserName class="name" :user="user" :nowrap="true"/>
-								<span v-if="$i && $i.id != user.id && user.isFollowed" class="followed">{{ i18n.ts.followsYou }}</span>
+								<MkUserName
+									class="name"
+									:user="user"
+									:nowrap="true"
+								/>
+								<span
+									v-if="
+										$i &&
+										$i.id != user.id &&
+										user.isFollowed
+									"
+									class="followed"
+									>{{ i18n.ts.followsYou }}</span
+								>
 							</div>
 							<div class="bottom">
-								<span class="username"><MkAcct :user="user" :detail="true"/></span>
-								<span v-if="user.isAdmin" :title="i18n.ts.isAdmin" style="color: var(--badge);"><i class="ph-bookmark-simple ph-fill ph-lg"></i></span>
-								<span v-if="!user.isAdmin && user.isModerator" :title="i18n.ts.isModerator" style="color: var(--badge);"><i class="ph-bookmark-simple ph-bold"></i></span>
-								<span v-if="user.isLocked" :title="i18n.ts.isLocked"><i class="ph-lock ph-bold ph-lg"></i></span>
-								<span v-if="user.isBot" :title="i18n.ts.isBot"><i class="ph-robot ph-bold ph-lg"></i></span>
+								<span class="username"
+									><MkAcct :user="user" :detail="true"
+								/></span>
+								<span
+									v-if="user.isAdmin"
+									:title="i18n.ts.isAdmin"
+									style="color: var(--badge)"
+									><i
+										class="ph-bookmark-simple ph-fill ph-lg"
+									></i
+								></span>
+								<span
+									v-if="!user.isAdmin && user.isModerator"
+									:title="i18n.ts.isModerator"
+									style="color: var(--badge)"
+									><i class="ph-bookmark-simple ph-bold"></i
+								></span>
+								<span
+									v-if="user.isLocked"
+									:title="i18n.ts.isLocked"
+									><i class="ph-lock ph-bold ph-lg"></i
+								></span>
+								<span v-if="user.isBot" :title="i18n.ts.isBot"
+									><i class="ph-robot ph-bold ph-lg"></i
+								></span>
 							</div>
 						</div>
-					</div>
-					<MkAvatar class="avatar" :user="user" :disable-preview="true" :show-indicator="true"/>
-					<div class="title">
-						<div class="nameCollumn">
-							<MkUserName class="name" :user="user" :nowrap="true"/>
-							<span v-if="$i && $i.id != user.id && user.isFollowed" class="followed">{{ i18n.ts.followsYou }}</span>
+						<div class="follow-container">
+							<div class="actions">
+								<MkFollowButton
+									v-if="$i != null && $i.id != user.id"
+									:user="user"
+									@refresh="emit('refresh')"
+									:inline="true"
+									:transparent="false"
+									:full="!narrow"
+									class="koudoku"
+								/>
+								<button class="menu _button" @click="menu">
+									<i
+										class="ph-dots-three-outline ph-bold ph-lg"
+									></i>
+								</button>
+								<!-- <MkFollowButton v-else-if="$i == null" :user="user" :remote="true" :inline="true" :transparent="false" :full="true" class="koudoku"/> -->
+							</div>
 						</div>
-						<div class="bottom">
-							<span class="username"><MkAcct :user="user" :detail="true"/></span>
-							<span v-if="user.isAdmin" :title="i18n.ts.isAdmin" style="color: var(--badge);"><i class="ph-bookmark-simple ph-fill ph-lg"></i></span>
-							<span v-if="!user.isAdmin && user.isModerator" :title="i18n.ts.isModerator" style="color: var(--badge);"><i class="ph-bookmark-simple ph-bold"></i></span>
-							<span v-if="user.isLocked" :title="i18n.ts.isLocked"><i class="ph-lock ph-bold ph-lg"></i></span>
-							<span v-if="user.isBot" :title="i18n.ts.isBot"><i class="ph-robot ph-bold ph-lg"></i></span>
+						<div class="description">
+							<Mfm
+								v-if="user.description"
+								:text="user.description"
+								:is-note="false"
+								:author="user"
+								:i="$i"
+								:custom-emojis="user.emojis"
+							/>
+							<p v-else class="empty">
+								{{ i18n.ts.noAccountDescription }}
+							</p>
 						</div>
-					</div>
-					<div class="follow-container">
-						<div class="actions">
-							<MkFollowButton v-if="$i != null && $i.id != user.id" :user="user" @refresh="emit('refresh')" :inline="true" :transparent="false" :full="!narrow" class="koudoku"/>
-							<button class="menu _button" @click="menu"><i class="ph-dots-three-outline ph-bold ph-lg"></i></button>
-							<!-- <MkFollowButton v-else-if="$i == null" :user="user" :remote="true" :inline="true" :transparent="false" :full="true" class="koudoku"/> -->
+						<div class="fields system">
+							<dl v-if="user.location" class="field">
+								<dt class="name">
+									<i
+										class="ph-map-pin ph-bold ph-lg ph-fw ph-lg"
+									></i>
+									{{ i18n.ts.location }}
+								</dt>
+								<dd class="value">
+									{{ user.location }}{{ timeForThem }}
+								</dd>
+							</dl>
+							<dl v-if="user.birthday" class="field">
+								<dt class="name">
+									<i
+										class="ph-cake ph-bold ph-lg ph-fw ph-lg"
+									></i>
+									{{ i18n.ts.birthday }}
+								</dt>
+								<dd class="value">
+									{{
+										user.birthday
+											.replace("-", "/")
+											.replace("-", "/")
+									}}
+									({{ i18n.t("yearsOld", { age }) }})
+								</dd>
+							</dl>
+							<dl class="field">
+								<dt class="name">
+									<i
+										class="ph-calendar-blank ph-bold ph-lg ph-fw ph-lg"
+									></i>
+									{{ i18n.ts.registeredDate }}
+								</dt>
+								<dd class="value">
+									{{
+										new Date(
+											user.createdAt
+										).toLocaleString()
+									}}
+									(<MkTime :time="user.createdAt" />)
+								</dd>
+							</dl>
+						</div>
+						<div v-if="user.fields.length > 0" class="fields">
+							<dl
+								v-for="(field, i) in user.fields"
+								:key="i"
+								class="field"
+							>
+								<dt class="name">
+									<Mfm
+										:text="field.name"
+										:plain="true"
+										:custom-emojis="user.emojis"
+										:colored="false"
+									/>
+								</dt>
+								<dd class="value">
+									<Mfm
+										:text="field.value"
+										:author="user"
+										:i="$i"
+										:custom-emojis="user.emojis"
+										:colored="false"
+									/>
+								</dd>
+							</dl>
+						</div>
+						<div class="status">
+							<MkA
+								v-click-anime
+								:to="userPage(user)"
+								:class="{ active: page === 'index' }"
+							>
+								<b>{{ number(user.notesCount) }}</b>
+								<span>{{ i18n.ts.notes }}</span>
+							</MkA>
+							<MkA
+								v-click-anime
+								:to="userPage(user, 'following')"
+								:class="{ active: page === 'following' }"
+							>
+								<b>{{ number(user.followingCount) }}</b>
+								<span>{{ i18n.ts.following }}</span>
+							</MkA>
+							<MkA
+								v-click-anime
+								:to="userPage(user, 'followers')"
+								:class="{ active: page === 'followers' }"
+							>
+								<b>{{ number(user.followersCount) }}</b>
+								<span>{{ i18n.ts.followers }}</span>
+							</MkA>
 						</div>
-					</div>
-					<div class="description">
-						<Mfm v-if="user.description" :text="user.description" :is-note="false" :author="user" :i="$i" :custom-emojis="user.emojis"/>
-						<p v-else class="empty">{{ i18n.ts.noAccountDescription }}</p>
-					</div>
-					<div class="fields system">
-						<dl v-if="user.location" class="field">
-							<dt class="name"><i class="ph-map-pin ph-bold ph-lg ph-fw ph-lg"></i> {{ i18n.ts.location }}</dt>
-							<dd class="value">{{ user.location }}{{ timeForThem }}</dd>
-						</dl>
-						<dl v-if="user.birthday" class="field">
-							<dt class="name"><i class="ph-cake ph-bold ph-lg ph-fw ph-lg"></i> {{ i18n.ts.birthday }}</dt>
-							<dd class="value">{{ user.birthday.replace('-', '/').replace('-', '/') }} ({{ i18n.t('yearsOld', { age }) }})</dd>
-						</dl>
-						<dl class="field">
-							<dt class="name"><i class="ph-calendar-blank ph-bold ph-lg ph-fw ph-lg"></i> {{ i18n.ts.registeredDate }}</dt>
-							<dd class="value">{{ new Date(user.createdAt).toLocaleString() }} (<MkTime :time="user.createdAt"/>)</dd>
-						</dl>
-					</div>
-					<div v-if="user.fields.length > 0" class="fields">
-						<dl v-for="(field, i) in user.fields" :key="i" class="field">
-							<dt class="name">
-								<Mfm :text="field.name" :plain="true" :custom-emojis="user.emojis" :colored="false"/>
-							</dt>
-							<dd class="value">
-								<Mfm :text="field.value" :author="user" :i="$i" :custom-emojis="user.emojis" :colored="false"/>
-							</dd>
-						</dl>
-					</div>
-					<div class="status">
-						<MkA v-click-anime :to="userPage(user)" :class="{ active: page === 'index' }">
-							<b>{{ number(user.notesCount) }}</b>
-							<span>{{ i18n.ts.notes }}</span>
-						</MkA>
-						<MkA v-click-anime :to="userPage(user, 'following')" :class="{ active: page === 'following' }">
-							<b>{{ number(user.followingCount) }}</b>
-							<span>{{ i18n.ts.following }}</span>
-						</MkA>
-						<MkA v-click-anime :to="userPage(user, 'followers')" :class="{ active: page === 'followers' }">
-							<b>{{ number(user.followersCount) }}</b>
-							<span>{{ i18n.ts.followers }}</span>
-						</MkA>
 					</div>
 				</div>
-			</div>
 
-			<div class="contents">
-				<div v-if="user.pinnedNotes.length > 0" class="_gap">
-					<XNote v-for="note in user.pinnedNotes" :key="note.id" class="note _block" :note="note" :pinned="true"/>
+				<div class="contents">
+					<div v-if="user.pinnedNotes.length > 0" class="_gap">
+						<XNote
+							v-for="note in user.pinnedNotes"
+							:key="note.id"
+							class="note _block"
+							:note="note"
+							:pinned="true"
+						/>
+					</div>
+					<MkInfo
+						v-else-if="$i && $i.id === user.id"
+						style="margin: 12px 0"
+						>{{ i18n.ts.userPagePinTip }}</MkInfo
+					>
+					<template v-if="narrow">
+						<XPhotos :key="user.id" :user="user" />
+						<XActivity
+							:key="user.id"
+							:user="user"
+							style="margin-top: var(--margin)"
+						/>
+					</template>
+				</div>
+				<div>
+					<XUserTimeline :user="user" />
 				</div>
-				<MkInfo v-else-if="$i && $i.id === user.id" style="margin: 12px 0;">{{ i18n.ts.userPagePinTip }}</MkInfo>
-				<template v-if="narrow">
-					<XPhotos :key="user.id" :user="user"/>
-					<XActivity :key="user.id" :user="user" style="margin-top: var(--margin);"/>
-				</template>
 			</div>
-			<div>
-				<XUserTimeline :user="user"/>
+			<div v-if="!narrow" class="sub">
+				<XPhotos :key="user.id" :user="user" />
+				<XActivity
+					:key="user.id"
+					:user="user"
+					style="margin-top: var(--margin)"
+				/>
 			</div>
 		</div>
-		<div v-if="!narrow" class="sub">
-			<XPhotos :key="user.id" :user="user"/>
-			<XActivity :key="user.id" :user="user" style="margin-top: var(--margin);"/>
-		</div>
-	</div>
-</MkSpacer>
+	</MkSpacer>
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent, onMounted, onUnmounted } from 'vue';
-import calcAge from 's-age';
-import cityTimezones from 'city-timezones';
-import XUserTimeline from './index.timeline.vue';
-import type * as misskey from 'calckey-js';
-import XNote from '@/components/MkNote.vue';
-import MkFollowButton from '@/components/MkFollowButton.vue';
-import MkRemoteCaution from '@/components/MkRemoteCaution.vue';
-import MkInfo from '@/components/MkInfo.vue';
-import MkMoved from '@/components/MkMoved.vue';
-import { getScrollPosition } from '@/scripts/scroll';
-import { getUserMenu } from '@/scripts/get-user-menu';
-import number from '@/filters/number';
-import { userPage } from '@/filters/user';
-import * as os from '@/os';
-import { useRouter } from '@/router';
-import { i18n } from '@/i18n';
-import { $i } from '@/account';
+import { defineAsyncComponent, onMounted, onUnmounted } from "vue";
+import calcAge from "s-age";
+import cityTimezones from "city-timezones";
+import XUserTimeline from "./index.timeline.vue";
+import type * as misskey from "calckey-js";
+import XNote from "@/components/MkNote.vue";
+import MkFollowButton from "@/components/MkFollowButton.vue";
+import MkRemoteCaution from "@/components/MkRemoteCaution.vue";
+import MkInfo from "@/components/MkInfo.vue";
+import MkMoved from "@/components/MkMoved.vue";
+import { getScrollPosition } from "@/scripts/scroll";
+import { getUserMenu } from "@/scripts/get-user-menu";
+import number from "@/filters/number";
+import { userPage } from "@/filters/user";
+import * as os from "@/os";
+import { useRouter } from "@/router";
+import { i18n } from "@/i18n";
+import { $i } from "@/account";
 
-const XPhotos = defineAsyncComponent(() => import('./index.photos.vue'));
-const XActivity = defineAsyncComponent(() => import('./index.activity.vue'));
+const XPhotos = defineAsyncComponent(() => import("./index.photos.vue"));
+const XActivity = defineAsyncComponent(() => import("./index.activity.vue"));
 
-const emit = defineEmits(['refresh']);
-const props = withDefaults(defineProps<{
-	user: misskey.entities.UserDetailed;
-}>(), {
-});
+const emit = defineEmits(["refresh"]);
+const props = withDefaults(
+	defineProps<{
+		user: misskey.entities.UserDetailed;
+	}>(),
+	{}
+);
 
 const router = useRouter();
 
@@ -155,7 +344,7 @@ let bannerEl = $ref<null | HTMLElement>(null);
 const style = $computed(() => {
 	if (props.user.bannerUrl == null) return {};
 	return {
-		backgroundImage: `url(${ props.user.bannerUrl })`,
+		backgroundImage: `url(${props.user.bannerUrl})`,
 	};
 });
 
@@ -164,15 +353,25 @@ const age = $computed(() => {
 });
 
 const timeForThem = $computed(() => {
-	const tzInfo = cityTimezones.lookupViaCity(props.user.location!.replace(/\s.*/,''));
+	const tzInfo = cityTimezones.lookupViaCity(
+		props.user.location!.replace(/\s.*/, "")
+	);
 	if (tzInfo.length == 0) return "";
 	const tz = tzInfo[0].timezone;
-	const theirTime = new Date().toLocaleString("en-US", { timeZone: tz, hour12: false });
-	return ` (${theirTime.split(",")[1].trim().split(":")[0]}:${theirTime.split(" ")[1].slice(-5,-3)})`;
-})
+	const theirTime = new Date().toLocaleString("en-US", {
+		timeZone: tz,
+		hour12: false,
+	});
+	return ` (${theirTime.split(",")[1].trim().split(":")[0]}:${theirTime
+		.split(" ")[1]
+		.slice(-5, -3)})`;
+});
 
 function menu(ev) {
-	os.popupMenu(getUserMenu(props.user, router), ev.currentTarget ?? ev.target);
+	os.popupMenu(
+		getUserMenu(props.user, router),
+		ev.currentTarget ?? ev.target
+	);
 }
 
 function parallaxLoop() {
@@ -207,16 +406,13 @@ onUnmounted(() => {
 
 <style lang="scss" scoped>
 .ftskorzw {
-
 	> .main {
-
 		> .punished {
 			font-size: 0.8em;
 			padding: 16px;
 		}
 
 		> .profile {
-
 			> .main {
 				position: relative;
 				overflow: hidden;
@@ -244,7 +440,7 @@ onUnmounted(() => {
 							background-size: cover;
 							background-position: center;
 							pointer-events: none;
-							opacity: .1;
+							opacity: 0.1;
 							filter: var(--blur, blur(10px));
 						}
 					}
@@ -255,7 +451,10 @@ onUnmounted(() => {
 						left: 0;
 						width: 100%;
 						height: 78px;
-						background: linear-gradient(transparent, rgba(#000, 0.7));
+						background: linear-gradient(
+							transparent,
+							rgba(#000, 0.7)
+						);
 					}
 
 					> .followed {
@@ -304,24 +503,23 @@ onUnmounted(() => {
 						> .nameCollumn {
 							display: block;
 							> .name {
-							margin: 0;
-							line-height: 32px;
-							font-weight: bold;
-							font-size: 1.8em;
-							text-shadow: 0 0 8px var(--shadow);
-						}
-
-						> .followed {
-							position: relative;
-							top: -4px;
-							left: 4px;
-							padding: 4px 8px;
-							color: #fff;
-							background: rgba(0, 0, 0, 0.6);
-							font-size: 0.7em;
-							border-radius: 24px;
-						}
+								margin: 0;
+								line-height: 32px;
+								font-weight: bold;
+								font-size: 1.8em;
+								text-shadow: 0 0 8px var(--shadow);
+							}
 
+							> .followed {
+								position: relative;
+								top: -4px;
+								left: 4px;
+								padding: 4px 8px;
+								color: #fff;
+								background: rgba(0, 0, 0, 0.6);
+								font-size: 0.7em;
+								border-radius: 24px;
+							}
 						}
 
 						> .bottom {
@@ -353,7 +551,10 @@ onUnmounted(() => {
 						left: 0;
 						width: 100%;
 						height: 78px;
-						background: linear-gradient(transparent, rgba(#000, 0.7));
+						background: linear-gradient(
+							transparent,
+							rgba(#000, 0.7)
+						);
 					}
 
 					> .actions {
@@ -418,8 +619,8 @@ onUnmounted(() => {
 					border-bottom: solid 0.5px var(--divider);
 
 					> .nameCollumn {
-							display: block;
-							> .name {
+						display: block;
+						> .name {
 							margin: 0;
 							align-content: center;
 							line-height: 32px;
@@ -438,19 +639,18 @@ onUnmounted(() => {
 							font-size: 0.7em;
 							border-radius: 24px;
 						}
+					}
 
-						}
-
-						> .followedWindow {
-							position: relative;
-							top: -25px;
-							left: 80px;
-							padding: 4px 8px;
-							color: #fff;
-							background: rgba(0, 0, 0, 0.6);
-							font-size: 0.7em;
-							border-radius: 24px;
-						}
+					> .followedWindow {
+						position: relative;
+						top: -25px;
+						left: 80px;
+						padding: 4px 8px;
+						color: #fff;
+						background: rgba(0, 0, 0, 0.6);
+						font-size: 0.7em;
+						border-radius: 24px;
+					}
 
 					> .bottom {
 						> * {
@@ -600,7 +800,7 @@ onUnmounted(() => {
 				}
 
 				> .description {
-          top: -55px;
+					top: -55px;
 					position: relative;
 				}
 
diff --git a/packages/client/src/pages/user/index.activity.vue b/packages/client/src/pages/user/index.activity.vue
index b51ab60adb..1e57ece13e 100644
--- a/packages/client/src/pages/user/index.activity.vue
+++ b/packages/client/src/pages/user/index.activity.vue
@@ -1,43 +1,63 @@
 <template>
-<MkContainer>
-	<template #header><i class="ph-chart-bar ph-bold ph-lg" style="margin-right: 0.5em;"></i>{{ i18n.ts.activity }}</template>
-	<template #func>
-		<button class="_button" @click="showMenu">
-			<i class="ph-dots-three-outline ph-bold ph-lg"></i>
-		</button>
-	</template>
+	<MkContainer>
+		<template #header
+			><i
+				class="ph-chart-bar ph-bold ph-lg"
+				style="margin-right: 0.5em"
+			></i
+			>{{ i18n.ts.activity }}</template
+		>
+		<template #func>
+			<button class="_button" @click="showMenu">
+				<i class="ph-dots-three-outline ph-bold ph-lg"></i>
+			</button>
+		</template>
 
-	<div style="padding: 8px;">
-		<MkChart :src="chartSrc" :args="{ user, withoutAll: true }" span="day" :limit="limit" :bar="true" :stacked="true" :detailed="false" :aspect-ratio="5"/>
-	</div>
-</MkContainer>
+		<div style="padding: 8px">
+			<MkChart
+				:src="chartSrc"
+				:args="{ user, withoutAll: true }"
+				span="day"
+				:limit="limit"
+				:bar="true"
+				:stacked="true"
+				:detailed="false"
+				:aspect-ratio="5"
+			/>
+		</div>
+	</MkContainer>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import * as misskey from 'calckey-js';
-import MkContainer from '@/components/MkContainer.vue';
-import MkChart from '@/components/MkChart.vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
+import {} from "vue";
+import * as misskey from "calckey-js";
+import MkContainer from "@/components/MkContainer.vue";
+import MkChart from "@/components/MkChart.vue";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
 
-const props = withDefaults(defineProps<{
-	user: misskey.entities.User;
-	limit?: number;
-}>(), {
-	limit: 50,
-});
+const props = withDefaults(
+	defineProps<{
+		user: misskey.entities.User;
+		limit?: number;
+	}>(),
+	{
+		limit: 50,
+	}
+);
 
-let chartSrc = $ref('per-user-notes');
+let chartSrc = $ref("per-user-notes");
 
 function showMenu(ev: MouseEvent) {
-	os.popupMenu([{
-		text: i18n.ts.notes,
-		active: true,
-		action: () => {
-			chartSrc = 'per-user-notes';
-		},
-	},/*, {
+	os.popupMenu(
+		[
+			{
+				text: i18n.ts.notes,
+				active: true,
+				action: () => {
+					chartSrc = "per-user-notes";
+				},
+			} /*, {
 		text: i18n.ts.following,
 		action: () => {
 			chartSrc = 'per-user-following';
@@ -47,6 +67,9 @@ function showMenu(ev: MouseEvent) {
 		action: () => {
 			chartSrc = 'per-user-followers';
 		}
-	}*/], ev.currentTarget ?? ev.target);
+	}*/,
+		],
+		ev.currentTarget ?? ev.target
+	);
 }
 </script>
diff --git a/packages/client/src/pages/user/index.photos.vue b/packages/client/src/pages/user/index.photos.vue
index 5418d1f9d4..5b1753560a 100644
--- a/packages/client/src/pages/user/index.photos.vue
+++ b/packages/client/src/pages/user/index.photos.vue
@@ -1,43 +1,54 @@
 <template>
-<MkContainer id="photos-container" :max-height="300" :foldable="true">
-	<template #header><i class="ph-image ph-bold ph-lg" style="margin-right: 0.5em;"></i>{{ i18n.ts.images }}</template>
-	<div class="ujigsodd">
-		<MkLoading v-if="fetching"/>
-		<div v-if="!fetching && images.length > 0" class="stream">
-			<MkA
-				v-for="image in images"
-				:key="image.note.id + image.file.id"
-				class="img"
-				:to="notePage(image.note)"
-			>
-				<ImgWithBlurhash :hash="image.file.blurhash" :src="thumbnail(image.file)" :title="image.file.name"/>
-			</MkA>
+	<MkContainer id="photos-container" :max-height="300" :foldable="true">
+		<template #header
+			><i class="ph-image ph-bold ph-lg" style="margin-right: 0.5em"></i
+			>{{ i18n.ts.images }}</template
+		>
+		<div class="ujigsodd">
+			<MkLoading v-if="fetching" />
+			<div v-if="!fetching && images.length > 0" class="stream">
+				<MkA
+					v-for="image in images"
+					:key="image.note.id + image.file.id"
+					class="img"
+					:to="notePage(image.note)"
+				>
+					<ImgWithBlurhash
+						:hash="image.file.blurhash"
+						:src="thumbnail(image.file)"
+						:title="image.file.name"
+					/>
+				</MkA>
+			</div>
+			<p v-if="!fetching && images.length == 0" class="empty">
+				{{ i18n.ts.nothing }}
+			</p>
 		</div>
-		<p v-if="!fetching && images.length == 0" class="empty">{{ i18n.ts.nothing }}</p>
-	</div>
-</MkContainer>
+	</MkContainer>
 </template>
 
 <script lang="ts" setup>
-import { onMounted } from 'vue';
-import * as misskey from 'calckey-js';
-import { getStaticImageUrl } from '@/scripts/get-static-image-url';
-import { notePage } from '@/filters/note';
-import * as os from '@/os';
-import MkContainer from '@/components/MkContainer.vue';
-import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
-import { defaultStore } from '@/store';
-import { i18n } from '@/i18n';
+import { onMounted } from "vue";
+import * as misskey from "calckey-js";
+import { getStaticImageUrl } from "@/scripts/get-static-image-url";
+import { notePage } from "@/filters/note";
+import * as os from "@/os";
+import MkContainer from "@/components/MkContainer.vue";
+import ImgWithBlurhash from "@/components/MkImgWithBlurhash.vue";
+import { defaultStore } from "@/store";
+import { i18n } from "@/i18n";
 
 const props = defineProps<{
 	user: misskey.entities.UserDetailed;
 }>();
 
 let fetching = $ref(true);
-let images = $ref<{
-	note: misskey.entities.Note;
-	file: misskey.entities.DriveFile;
-}[]>([]);
+let images = $ref<
+	{
+		note: misskey.entities.Note;
+		file: misskey.entities.DriveFile;
+	}[]
+>([]);
 
 function thumbnail(image: misskey.entities.DriveFile): string {
 	return defaultStore.state.disableShowingAnimatedImages
@@ -47,19 +58,19 @@ function thumbnail(image: misskey.entities.DriveFile): string {
 
 onMounted(() => {
 	const image = [
-		'image/jpeg',
-		'image/png',
-		'image/gif',
-		'image/apng',
-		'image/vnd.mozilla.apng',
-		'image/avif',
+		"image/jpeg",
+		"image/png",
+		"image/gif",
+		"image/apng",
+		"image/vnd.mozilla.apng",
+		"image/avif",
 	];
-	os.api('users/notes', {
+	os.api("users/notes", {
 		userId: props.user.id,
 		fileType: image,
-		excludeNsfw: defaultStore.state.nsfw !== 'ignore',
+		excludeNsfw: defaultStore.state.nsfw !== "ignore",
 		limit: 10,
-	}).then(notes => {
+	}).then((notes) => {
 		for (const note of notes) {
 			for (const file of note.files) {
 				images.push({
diff --git a/packages/client/src/pages/user/index.timeline.vue b/packages/client/src/pages/user/index.timeline.vue
index 095b5cf317..1792b6357c 100644
--- a/packages/client/src/pages/user/index.timeline.vue
+++ b/packages/client/src/pages/user/index.timeline.vue
@@ -1,23 +1,23 @@
 <template>
-<MkStickyContainer>
-	<template #header>
-		<MkTab v-model="include" :class="$style.tab">
-			<option :value="null">{{ i18n.ts.notes }}</option>
-			<option value="replies">{{ i18n.ts.notesAndReplies }}</option>
-			<option value="files">{{ i18n.ts.withFiles }}</option>
-		</MkTab>
-	</template>
-	<XNotes :no-gap="true" :pagination="pagination"/>
-</MkStickyContainer>
+	<MkStickyContainer>
+		<template #header>
+			<MkTab v-model="include" :class="$style.tab">
+				<option :value="null">{{ i18n.ts.notes }}</option>
+				<option value="replies">{{ i18n.ts.notesAndReplies }}</option>
+				<option value="files">{{ i18n.ts.withFiles }}</option>
+			</MkTab>
+		</template>
+		<XNotes :no-gap="true" :pagination="pagination" />
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { ref, computed } from 'vue';
-import * as misskey from 'calckey-js';
-import XNotes from '@/components/MkNotes.vue';
-import MkTab from '@/components/MkTab.vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
+import { ref, computed } from "vue";
+import * as misskey from "calckey-js";
+import XNotes from "@/components/MkNotes.vue";
+import MkTab from "@/components/MkTab.vue";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
 
 const props = defineProps<{
 	user: misskey.entities.UserDetailed;
@@ -26,12 +26,12 @@ const props = defineProps<{
 const include = ref<string | null>(null);
 
 const pagination = {
-	endpoint: 'users/notes' as const,
+	endpoint: "users/notes" as const,
 	limit: 10,
 	params: computed(() => ({
 		userId: props.user.id,
-		includeReplies: include.value === 'replies',
-		withFiles: include.value === 'files',
+		includeReplies: include.value === "replies",
+		withFiles: include.value === "files",
 	})),
 };
 </script>
diff --git a/packages/client/src/pages/user/index.vue b/packages/client/src/pages/user/index.vue
index 32369c63d4..2452f1de46 100644
--- a/packages/client/src/pages/user/index.vue
+++ b/packages/client/src/pages/user/index.vue
@@ -1,48 +1,52 @@
 <template>
-<MkStickyContainer>
-	<template #header>
-		<MkPageHeader
-			v-model:tab="tab"
-			:actions="headerActions"
-			:tabs="headerTabs"
-			:display-back-button="true"
-		/>
-	</template>
-	<div>
-		<transition name="fade" mode="out-in">
-			<div v-if="user">
-				<XHome v-if="tab === 'home'" :user="user" @refresh="fetchUser()"/>
-				<XReactions v-else-if="tab === 'reactions'" :user="user"/>
-				<XClips v-else-if="tab === 'clips'" :user="user"/>
-				<XPages v-else-if="tab === 'pages'" :user="user"/>
-				<XGallery v-else-if="tab === 'gallery'" :user="user"/>
-			</div>
-			<MkError v-else-if="error" @retry="fetchUser()"/>
-			<MkLoading v-else/>
-		</transition>
-	</div>
-</MkStickyContainer>
+	<MkStickyContainer>
+		<template #header>
+			<MkPageHeader
+				v-model:tab="tab"
+				:actions="headerActions"
+				:tabs="headerTabs"
+				:display-back-button="true"
+			/>
+		</template>
+		<div>
+			<transition name="fade" mode="out-in">
+				<div v-if="user">
+					<XHome
+						v-if="tab === 'home'"
+						:user="user"
+						@refresh="fetchUser()"
+					/>
+					<XReactions v-else-if="tab === 'reactions'" :user="user" />
+					<XClips v-else-if="tab === 'clips'" :user="user" />
+					<XPages v-else-if="tab === 'pages'" :user="user" />
+					<XGallery v-else-if="tab === 'gallery'" :user="user" />
+				</div>
+				<MkError v-else-if="error" @retry="fetchUser()" />
+				<MkLoading v-else />
+			</transition>
+		</div>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent, computed, watch } from 'vue';
-import calcAge from 's-age';
-import * as Acct from 'calckey-js/built/acct';
-import type * as misskey from 'calckey-js';
-import { getScrollPosition } from '@/scripts/scroll';
-import number from '@/filters/number';
-import { userPage, acct as getAcct } from '@/filters/user';
-import * as os from '@/os';
-import { useRouter } from '@/router';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import { i18n } from '@/i18n';
-import { $i } from '@/account';
+import { defineAsyncComponent, computed, watch } from "vue";
+import calcAge from "s-age";
+import * as Acct from "calckey-js/built/acct";
+import type * as misskey from "calckey-js";
+import { getScrollPosition } from "@/scripts/scroll";
+import number from "@/filters/number";
+import { userPage, acct as getAcct } from "@/filters/user";
+import * as os from "@/os";
+import { useRouter } from "@/router";
+import { definePageMetadata } from "@/scripts/page-metadata";
+import { i18n } from "@/i18n";
+import { $i } from "@/account";
 
-const XHome = defineAsyncComponent(() => import('./home.vue'));
-const XReactions = defineAsyncComponent(() => import('./reactions.vue'));
-const XClips = defineAsyncComponent(() => import('./clips.vue'));
-const XPages = defineAsyncComponent(() => import('./pages.vue'));
-const XGallery = defineAsyncComponent(() => import('./gallery.vue'));
+const XHome = defineAsyncComponent(() => import("./home.vue"));
+const XReactions = defineAsyncComponent(() => import("./reactions.vue"));
+const XClips = defineAsyncComponent(() => import("./clips.vue"));
+const XPages = defineAsyncComponent(() => import("./pages.vue"));
+const XGallery = defineAsyncComponent(() => import("./gallery.vue"));
 
 const props = withDefaults(
 	defineProps<{
@@ -50,8 +54,8 @@ const props = withDefaults(
 		page?: string;
 	}>(),
 	{
-		page: 'home',
-	},
+		page: "home",
+	}
 );
 
 const router = useRouter();
@@ -63,7 +67,7 @@ let error = $ref(null);
 function fetchUser(): void {
 	if (props.acct == null) return;
 	user = null;
-	os.api('users/show', Acct.parse(props.acct))
+	os.api("users/show", Acct.parse(props.acct))
 		.then((u) => {
 			user = u;
 		})
@@ -81,52 +85,61 @@ const headerActions = $computed(() => []);
 const headerTabs = $computed(() =>
 	user
 		? [
-			{
-				key: 'home',
-				title: i18n.ts.overview,
-				icon: 'ph-user ph-bold ph-lg',
-			},
-			...(($i && $i.id === user.id) || user.publicReactions
-				? [{
-					key: 'reactions',
-					title: i18n.ts.reaction,
-					icon: 'ph-smiley ph-bold ph-lg',
-				}] : []),
-			...(user.instance == null ? [{
-				key: 'clips',
-				title: i18n.ts.clips,
-				icon: 'ph-paperclip ph-bold ph-lg',
-			}, {
-				key: 'pages',
-				title: i18n.ts.pages,
-				icon: 'ph-file-text ph-bold ph-lg',
-			}, {
-				key: 'gallery',
-				title: i18n.ts.gallery,
-				icon: 'ph-image-square ph-bold ph-lg',
-			}] : []),
-		]
-		: null,
+				{
+					key: "home",
+					title: i18n.ts.overview,
+					icon: "ph-user ph-bold ph-lg",
+				},
+				...(($i && $i.id === user.id) || user.publicReactions
+					? [
+							{
+								key: "reactions",
+								title: i18n.ts.reaction,
+								icon: "ph-smiley ph-bold ph-lg",
+							},
+					  ]
+					: []),
+				...(user.instance == null
+					? [
+							{
+								key: "clips",
+								title: i18n.ts.clips,
+								icon: "ph-paperclip ph-bold ph-lg",
+							},
+							{
+								key: "pages",
+								title: i18n.ts.pages,
+								icon: "ph-file-text ph-bold ph-lg",
+							},
+							{
+								key: "gallery",
+								title: i18n.ts.gallery,
+								icon: "ph-image-square ph-bold ph-lg",
+							},
+					  ]
+					: []),
+		  ]
+		: null
 );
 
 definePageMetadata(
 	computed(() =>
 		user
 			? {
-				icon: 'ph-user ph-bold ph-lg',
-				title: user.name
-					? `${user.name} (@${user.username})`
-					: `@${user.username}`,
-				subtitle: `@${getAcct(user)}`,
-				userName: user,
-				avatar: user,
-				path: `/@${user.username}`,
-				share: {
-					title: user.name,
-				},
-			}
-			: null,
-	),
+					icon: "ph-user ph-bold ph-lg",
+					title: user.name
+						? `${user.name} (@${user.username})`
+						: `@${user.username}`,
+					subtitle: `@${getAcct(user)}`,
+					userName: user,
+					avatar: user,
+					path: `/@${user.username}`,
+					share: {
+						title: user.name,
+					},
+			  }
+			: null
+	)
 );
 </script>
 
diff --git a/packages/client/src/pages/user/pages.vue b/packages/client/src/pages/user/pages.vue
index 89aa63f1b0..ff9777adc3 100644
--- a/packages/client/src/pages/user/pages.vue
+++ b/packages/client/src/pages/user/pages.vue
@@ -1,23 +1,28 @@
 <template>
-<MkSpacer :content-max="800">
-	<MkPagination v-slot="{items}" ref="list" :pagination="pagination">
-		<MkPagePreview v-for="page in items" :key="page.id" :page="page" class="_gap"/>
-	</MkPagination>
-</MkSpacer>
+	<MkSpacer :content-max="800">
+		<MkPagination v-slot="{ items }" ref="list" :pagination="pagination">
+			<MkPagePreview
+				v-for="page in items"
+				:key="page.id"
+				:page="page"
+				class="_gap"
+			/>
+		</MkPagination>
+	</MkSpacer>
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
-import * as misskey from 'calckey-js';
-import MkPagePreview from '@/components/MkPagePreview.vue';
-import MkPagination from '@/components/MkPagination.vue';
+import { computed } from "vue";
+import * as misskey from "calckey-js";
+import MkPagePreview from "@/components/MkPagePreview.vue";
+import MkPagination from "@/components/MkPagination.vue";
 
 const props = defineProps<{
 	user: misskey.entities.User;
 }>();
 
 const pagination = {
-	endpoint: 'users/pages' as const,
+	endpoint: "users/pages" as const,
 	limit: 20,
 	params: computed(() => ({
 		userId: props.user.id,
@@ -25,6 +30,4 @@ const pagination = {
 };
 </script>
 
-<style lang="scss" scoped>
-
-</style>
+<style lang="scss" scoped></style>
diff --git a/packages/client/src/pages/user/reactions.vue b/packages/client/src/pages/user/reactions.vue
index 1a6568a9d7..4ae1472448 100644
--- a/packages/client/src/pages/user/reactions.vue
+++ b/packages/client/src/pages/user/reactions.vue
@@ -1,31 +1,41 @@
 <template>
-<MkSpacer :content-max="800">
-	<MkPagination v-slot="{items}" ref="list" :pagination="pagination">
-		<div v-for="item in items" :key="item.id" :to="`/clips/${item.id}`" class="item _panel _gap afdcfbfb">
-			<div class="header">
-				<MkAvatar class="avatar" :user="user"/>
-				<MkReactionIcon class="reaction" :reaction="item.type" :custom-emojis="item.note.emojis" :no-style="true"/>
-				<MkTime :time="item.createdAt" class="createdAt"/>
+	<MkSpacer :content-max="800">
+		<MkPagination v-slot="{ items }" ref="list" :pagination="pagination">
+			<div
+				v-for="item in items"
+				:key="item.id"
+				:to="`/clips/${item.id}`"
+				class="item _panel _gap afdcfbfb"
+			>
+				<div class="header">
+					<MkAvatar class="avatar" :user="user" />
+					<MkReactionIcon
+						class="reaction"
+						:reaction="item.type"
+						:custom-emojis="item.note.emojis"
+						:no-style="true"
+					/>
+					<MkTime :time="item.createdAt" class="createdAt" />
+				</div>
+				<MkNote :key="item.id" :note="item.note" />
 			</div>
-			<MkNote :key="item.id" :note="item.note"/>
-		</div>
-	</MkPagination>
-</MkSpacer>
+		</MkPagination>
+	</MkSpacer>
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
-import * as misskey from 'calckey-js';
-import MkPagination from '@/components/MkPagination.vue';
-import MkNote from '@/components/MkNote.vue';
-import MkReactionIcon from '@/components/MkReactionIcon.vue';
+import { computed } from "vue";
+import * as misskey from "calckey-js";
+import MkPagination from "@/components/MkPagination.vue";
+import MkNote from "@/components/MkNote.vue";
+import MkReactionIcon from "@/components/MkReactionIcon.vue";
 
 const props = defineProps<{
 	user: misskey.entities.User;
 }>();
 
 const pagination = {
-	endpoint: 'users/reactions' as const,
+	endpoint: "users/reactions" as const,
 	limit: 20,
 	params: computed(() => ({
 		userId: props.user.id,
diff --git a/packages/client/src/pages/welcome.entrance.a.vue b/packages/client/src/pages/welcome.entrance.a.vue
index cdbdeb8fb3..f40e2a82b8 100644
--- a/packages/client/src/pages/welcome.entrance.a.vue
+++ b/packages/client/src/pages/welcome.entrance.a.vue
@@ -1,68 +1,115 @@
 <template>
-<div v-if="meta" class="rsqzvsbo">
-	<div class="top">
-		<MkFeaturedPhotos class="bg"/>
-		<XTimeline class="tl"/>
-		<div class="shape1"></div>
-		<div class="shape2"></div>
-		<img src="/client-assets/misskey.svg" class="misskey"/>
-		<div class="emojis">
-			<MkEmoji :normal="true" :no-style="true" emoji="⭐"/>
-			<MkEmoji :normal="true" :no-style="true" emoji="❤️"/>
-			<MkEmoji :normal="true" :no-style="true" emoji="😆"/>
-			<MkEmoji :normal="true" :no-style="true" emoji="🤔"/>
-			<MkEmoji :normal="true" :no-style="true" emoji="😮"/>
-			<MkEmoji :normal="true" :no-style="true" emoji="🎉"/>
-			<MkEmoji :normal="true" :no-style="true" emoji="💢"/>
-			<MkEmoji :normal="true" :no-style="true" emoji="😥"/>
-			<MkEmoji :normal="true" :no-style="true" emoji="😇"/>
-			<MkEmoji :normal="true" :no-style="true" emoji="🥴"/>
-			<MkEmoji :normal="true" :no-style="true" emoji="🍮"/>
-		</div>
-		<div class="main">
-			<img :src="$instance.iconUrl || $instance.faviconUrl || '/favicon.ico'" alt="" class="icon"/>
-			<button class="_button _acrylic menu" @click="showMenu"><i class="ph-dots-three-outline ph-bold ph-lg"></i></button>
-			<div class="fg">
-				<h1>
-					<img class="logo" v-if="meta.logoImageUrl" :src="meta.logoImageUrl">
-					<span v-else class="text">{{ instanceName }}</span>
-				</h1>
-				<div class="about">
-					<div class="desc" v-html="meta.description || i18n.ts.headlineMisskey"></div>
-				</div>
-				<div class="action">
-					<MkButton inline rounded gradate data-cy-signup style="margin-right: 12px;" @click="signup()">{{ i18n.ts.signup }}</MkButton>
-					<MkButton inline rounded data-cy-signin @click="signin()">{{ i18n.ts.login }}</MkButton>
-					<MkButton inline rounded style="margin-left: 12px; margin-top: 12px;" onclick="window.location.href='/explore'">Explore</MkButton>
+	<div v-if="meta" class="rsqzvsbo">
+		<div class="top">
+			<MkFeaturedPhotos class="bg" />
+			<XTimeline class="tl" />
+			<div class="shape1"></div>
+			<div class="shape2"></div>
+			<img src="/client-assets/misskey.svg" class="misskey" />
+			<div class="emojis">
+				<MkEmoji :normal="true" :no-style="true" emoji="⭐" />
+				<MkEmoji :normal="true" :no-style="true" emoji="❤️" />
+				<MkEmoji :normal="true" :no-style="true" emoji="😆" />
+				<MkEmoji :normal="true" :no-style="true" emoji="🤔" />
+				<MkEmoji :normal="true" :no-style="true" emoji="😮" />
+				<MkEmoji :normal="true" :no-style="true" emoji="🎉" />
+				<MkEmoji :normal="true" :no-style="true" emoji="💢" />
+				<MkEmoji :normal="true" :no-style="true" emoji="😥" />
+				<MkEmoji :normal="true" :no-style="true" emoji="😇" />
+				<MkEmoji :normal="true" :no-style="true" emoji="🥴" />
+				<MkEmoji :normal="true" :no-style="true" emoji="🍮" />
+			</div>
+			<div class="main">
+				<img
+					:src="
+						$instance.iconUrl ||
+						$instance.faviconUrl ||
+						'/favicon.ico'
+					"
+					alt=""
+					class="icon"
+				/>
+				<button class="_button _acrylic menu" @click="showMenu">
+					<i class="ph-dots-three-outline ph-bold ph-lg"></i>
+				</button>
+				<div class="fg">
+					<h1>
+						<img
+							class="logo"
+							v-if="meta.logoImageUrl"
+							:src="meta.logoImageUrl"
+						/>
+						<span v-else class="text">{{ instanceName }}</span>
+					</h1>
+					<div class="about">
+						<div
+							class="desc"
+							v-html="meta.description || i18n.ts.headlineMisskey"
+						></div>
+					</div>
+					<div class="action">
+						<MkButton
+							inline
+							rounded
+							gradate
+							data-cy-signup
+							style="margin-right: 12px"
+							@click="signup()"
+							>{{ i18n.ts.signup }}</MkButton
+						>
+						<MkButton
+							inline
+							rounded
+							data-cy-signin
+							@click="signin()"
+							>{{ i18n.ts.login }}</MkButton
+						>
+						<MkButton
+							inline
+							rounded
+							style="margin-left: 12px; margin-top: 12px"
+							onclick="window.location.href='/explore'"
+							>Explore</MkButton
+						>
+					</div>
 				</div>
 			</div>
-		</div>
-		<div v-if="instances" class="federation">
-			<MarqueeText :duration="40">
-				<MkA v-for="instance in instances" :key="instance.id" :class="$style.federationInstance" @click="signup()">
-					<img v-if="instance.iconUrl" class="icon" :src="instance.iconUrl" alt=""/>
-					<span class="name _monospace">{{ instance.host }}</span>
-				</MkA>
-			</MarqueeText>
+			<div v-if="instances" class="federation">
+				<MarqueeText :duration="40">
+					<MkA
+						v-for="instance in instances"
+						:key="instance.id"
+						:class="$style.federationInstance"
+						@click="signup()"
+					>
+						<img
+							v-if="instance.iconUrl"
+							class="icon"
+							:src="instance.iconUrl"
+							alt=""
+						/>
+						<span class="name _monospace">{{ instance.host }}</span>
+					</MkA>
+				</MarqueeText>
+			</div>
 		</div>
 	</div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import { toUnicode } from 'punycode/';
-import XTimeline from './welcome.timeline.vue';
-import MarqueeText from '@/components/MkMarquee.vue';
-import XSigninDialog from '@/components/MkSigninDialog.vue';
-import XSignupDialog from '@/components/MkSignupDialog.vue';
-import MkButton from '@/components/MkButton.vue';
-import XNote from '@/components/MkNote.vue';
-import MkFeaturedPhotos from '@/components/MkFeaturedPhotos.vue';
-import { host, instanceName } from '@/config';
-import * as os from '@/os';
-import number from '@/filters/number';
-import { i18n } from '@/i18n';
+import {} from "vue";
+import { toUnicode } from "punycode/";
+import XTimeline from "./welcome.timeline.vue";
+import MarqueeText from "@/components/MkMarquee.vue";
+import XSigninDialog from "@/components/MkSigninDialog.vue";
+import XSignupDialog from "@/components/MkSignupDialog.vue";
+import MkButton from "@/components/MkButton.vue";
+import XNote from "@/components/MkNote.vue";
+import MkFeaturedPhotos from "@/components/MkFeaturedPhotos.vue";
+import { host, instanceName } from "@/config";
+import * as os from "@/os";
+import number from "@/filters/number";
+import { i18n } from "@/i18n";
 
 let meta = $ref();
 let stats = $ref();
@@ -70,58 +117,74 @@ let tags = $ref();
 let onlineUsersCount = $ref();
 let instances = $ref();
 
-os.api('meta', { detail: true }).then(_meta => {
+os.api("meta", { detail: true }).then((_meta) => {
 	meta = _meta;
 });
 
-os.api('stats').then(_stats => {
+os.api("stats").then((_stats) => {
 	stats = _stats;
 });
 
-os.api('get-online-users-count').then(res => {
+os.api("get-online-users-count").then((res) => {
 	onlineUsersCount = res.count;
 });
 
-os.api('hashtags/list', {
-	sort: '+mentionedLocalUsers',
+os.api("hashtags/list", {
+	sort: "+mentionedLocalUsers",
 	limit: 8,
-}).then(_tags => {
+}).then((_tags) => {
 	tags = _tags;
 });
 
-os.api('federation/instances', {
-	sort: '+pubSub',
+os.api("federation/instances", {
+	sort: "+pubSub",
 	limit: 20,
-}).then(_instances => {
+}).then((_instances) => {
 	instances = _instances;
 });
 
 function signin() {
-	os.popup(XSigninDialog, {
-		autoSet: true,
-	}, {}, 'closed');
+	os.popup(
+		XSigninDialog,
+		{
+			autoSet: true,
+		},
+		{},
+		"closed"
+	);
 }
 
 function signup() {
-	os.popup(XSignupDialog, {
-		autoSet: true,
-	}, {}, 'closed');
+	os.popup(
+		XSignupDialog,
+		{
+			autoSet: true,
+		},
+		{},
+		"closed"
+	);
 }
 
 function showMenu(ev) {
-	os.popupMenu([{
-		text: i18n.ts.instanceInfo,
-		icon: 'ph-info ph-bold ph-lg',
-		action: () => {
-			os.pageWindow('/about');
-		},
-	}, {
-		text: i18n.ts.aboutMisskey,
-		icon: 'ph-info ph-bold ph-lg',
-		action: () => {
-			os.pageWindow('/about-calckey');
-		},
-	}], ev.currentTarget ?? ev.target);
+	os.popupMenu(
+		[
+			{
+				text: i18n.ts.instanceInfo,
+				icon: "ph-info ph-bold ph-lg",
+				action: () => {
+					os.pageWindow("/about");
+				},
+			},
+			{
+				text: i18n.ts.aboutMisskey,
+				icon: "ph-info ph-bold ph-lg",
+				action: () => {
+					os.pageWindow("/about-calckey");
+				},
+			},
+		],
+		ev.currentTarget ?? ev.target
+	);
 }
 </script>
 
@@ -151,8 +214,20 @@ function showMenu(ev) {
 			width: 500px;
 			height: calc(100% - 128px);
 			overflow: hidden;
-			-webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 128px, rgba(0,0,0,1) calc(100% - 128px), rgba(0,0,0,0) 100%);
-			mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 128px, rgba(0,0,0,1) calc(100% - 128px), rgba(0,0,0,0) 100%);
+			-webkit-mask-image: linear-gradient(
+				0deg,
+				rgba(0, 0, 0, 0) 0%,
+				rgba(0, 0, 0, 1) 128px,
+				rgba(0, 0, 0, 1) calc(100% - 128px),
+				rgba(0, 0, 0, 0) 100%
+			);
+			mask-image: linear-gradient(
+				0deg,
+				rgba(0, 0, 0, 0) 0%,
+				rgba(0, 0, 0, 1) 128px,
+				rgba(0, 0, 0, 1) calc(100% - 128px),
+				rgba(0, 0, 0, 0) 100%
+			);
 
 			@media (max-width: 1200px) {
 				display: none;
diff --git a/packages/client/src/pages/welcome.entrance.b.vue b/packages/client/src/pages/welcome.entrance.b.vue
index 9dc9e14fcd..82651aeda7 100644
--- a/packages/client/src/pages/welcome.entrance.b.vue
+++ b/packages/client/src/pages/welcome.entrance.b.vue
@@ -1,52 +1,85 @@
 <template>
-<div v-if="meta" class="rsqzvsbo">
-	<div class="top">
-		<MkFeaturedPhotos class="bg"/>
-		<XTimeline class="tl"/>
-		<div class="shape"></div>
-		<div class="main">
-			<h1>
-				<img v-if="meta.logoImageUrl" class="logo" :src="meta.logoImageUrl"><span v-else class="text">{{ instanceName }}</span>
-			</h1>
-			<div class="about">
-				<div class="desc" v-html="meta.description || i18n.ts.headlineMisskey"></div>
-			</div>
-			<div class="action">
-				<MkButton class="signup" inline gradate @click="signup()">{{ i18n.ts.signup }}</MkButton>
-				<MkButton class="signin" inline @click="signin()">{{ i18n.ts.login }}</MkButton>
-			</div>
-			<div v-if="onlineUsersCount && stats" class="status">
-				<div>
-					<I18n :src="i18n.ts.nUsers" text-tag="span" class="users">
-						<template #n><b>{{ number(stats.originalUsersCount) }}</b></template>
-					</I18n>
-					<I18n :src="i18n.ts.nNotes" text-tag="span" class="notes">
-						<template #n><b>{{ number(stats.originalNotesCount) }}</b></template>
+	<div v-if="meta" class="rsqzvsbo">
+		<div class="top">
+			<MkFeaturedPhotos class="bg" />
+			<XTimeline class="tl" />
+			<div class="shape"></div>
+			<div class="main">
+				<h1>
+					<img
+						v-if="meta.logoImageUrl"
+						class="logo"
+						:src="meta.logoImageUrl"
+					/><span v-else class="text">{{ instanceName }}</span>
+				</h1>
+				<div class="about">
+					<div
+						class="desc"
+						v-html="meta.description || i18n.ts.headlineMisskey"
+					></div>
+				</div>
+				<div class="action">
+					<MkButton class="signup" inline gradate @click="signup()">{{
+						i18n.ts.signup
+					}}</MkButton>
+					<MkButton class="signin" inline @click="signin()">{{
+						i18n.ts.login
+					}}</MkButton>
+				</div>
+				<div v-if="onlineUsersCount && stats" class="status">
+					<div>
+						<I18n
+							:src="i18n.ts.nUsers"
+							text-tag="span"
+							class="users"
+						>
+							<template #n
+								><b>{{
+									number(stats.originalUsersCount)
+								}}</b></template
+							>
+						</I18n>
+						<I18n
+							:src="i18n.ts.nNotes"
+							text-tag="span"
+							class="notes"
+						>
+							<template #n
+								><b>{{
+									number(stats.originalNotesCount)
+								}}</b></template
+							>
+						</I18n>
+					</div>
+					<I18n
+						:src="i18n.ts.onlineUsersCount"
+						text-tag="span"
+						class="online"
+					>
+						<template #n
+							><b>{{ onlineUsersCount }}</b></template
+						>
 					</I18n>
 				</div>
-				<I18n :src="i18n.ts.onlineUsersCount" text-tag="span" class="online">
-					<template #n><b>{{ onlineUsersCount }}</b></template>
-				</I18n>
 			</div>
+			<img src="/client-assets/misskey.svg" class="misskey" />
 		</div>
-		<img src="/client-assets/misskey.svg" class="misskey"/>
 	</div>
-</div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
-import { toUnicode } from 'punycode/';
-import XSigninDialog from '@/components/MkSigninDialog.vue';
-import XSignupDialog from '@/components/MkSignupDialog.vue';
-import MkButton from '@/components/MkButton.vue';
-import XNote from '@/components/MkNote.vue';
-import MkFeaturedPhotos from '@/components/MkFeaturedPhotos.vue';
-import XTimeline from './welcome.timeline.vue';
-import { host, instanceName } from '@/config';
-import * as os from '@/os';
-import number from '@/filters/number';
-import { i18n } from '@/i18n';
+import { defineComponent } from "vue";
+import { toUnicode } from "punycode/";
+import XSigninDialog from "@/components/MkSigninDialog.vue";
+import XSignupDialog from "@/components/MkSignupDialog.vue";
+import MkButton from "@/components/MkButton.vue";
+import XNote from "@/components/MkNote.vue";
+import MkFeaturedPhotos from "@/components/MkFeaturedPhotos.vue";
+import XTimeline from "./welcome.timeline.vue";
+import { host, instanceName } from "@/config";
+import * as os from "@/os";
+import number from "@/filters/number";
+import { i18n } from "@/i18n";
 
 export default defineComponent({
 	components: {
@@ -69,63 +102,84 @@ export default defineComponent({
 	},
 
 	created() {
-		os.api('meta', { detail: true }).then(meta => {
+		os.api("meta", { detail: true }).then((meta) => {
 			this.meta = meta;
 		});
 
-		os.api('stats').then(stats => {
+		os.api("stats").then((stats) => {
 			this.stats = stats;
 		});
 
-		os.api('get-online-users-count').then(res => {
+		os.api("get-online-users-count").then((res) => {
 			this.onlineUsersCount = res.count;
 		});
 
-		os.api('hashtags/list', {
-			sort: '+mentionedLocalUsers',
-			limit: 8
-		}).then(tags => {
+		os.api("hashtags/list", {
+			sort: "+mentionedLocalUsers",
+			limit: 8,
+		}).then((tags) => {
 			this.tags = tags;
 		});
 	},
 
 	methods: {
 		signin() {
-			os.popup(XSigninDialog, {
-				autoSet: true
-			}, {}, 'closed');
+			os.popup(
+				XSigninDialog,
+				{
+					autoSet: true,
+				},
+				{},
+				"closed"
+			);
 		},
 
 		signup() {
-			os.popup(XSignupDialog, {
-				autoSet: true
-			}, {}, 'closed');
+			os.popup(
+				XSignupDialog,
+				{
+					autoSet: true,
+				},
+				{},
+				"closed"
+			);
 		},
 
 		showMenu(ev) {
-			os.popupMenu([{
-				text: i18n.t('aboutX', { x: instanceName }),
-				icon: 'ph-info ph-bold ph-lg',
-				action: () => {
-					os.pageWindow('/about');
-				}
-			}, {
-				text: i18n.ts.aboutMisskey,
-				icon: 'ph-info ph-bold ph-lg',
-				action: () => {
-					os.pageWindow('/about-calckey');
-				}
-			}, null, {
-				text: i18n.ts.help,
-				icon: 'ph-question ph-bold ph-lg',
-				action: () => {
-					window.open(`https://misskey-hub.net/help.md`, '_blank');
-				}
-			}], ev.currentTarget ?? ev.target);
+			os.popupMenu(
+				[
+					{
+						text: i18n.t("aboutX", { x: instanceName }),
+						icon: "ph-info ph-bold ph-lg",
+						action: () => {
+							os.pageWindow("/about");
+						},
+					},
+					{
+						text: i18n.ts.aboutMisskey,
+						icon: "ph-info ph-bold ph-lg",
+						action: () => {
+							os.pageWindow("/about-calckey");
+						},
+					},
+					null,
+					{
+						text: i18n.ts.help,
+						icon: "ph-question ph-bold ph-lg",
+						action: () => {
+							window.open(
+								`https://misskey-hub.net/help.md`,
+								"_blank"
+							);
+						},
+					},
+				],
+				ev.currentTarget ?? ev.target
+			);
 		},
 
-		number
-	}
+		number,
+	},
 });
 </script>
 
@@ -152,8 +206,20 @@ export default defineComponent({
 			width: 500px;
 			height: calc(100% - 128px);
 			overflow: hidden;
-			-webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 128px, rgba(0,0,0,1) calc(100% - 128px), rgba(0,0,0,0) 100%);
-			mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 128px, rgba(0,0,0,1) calc(100% - 128px), rgba(0,0,0,0) 100%);
+			-webkit-mask-image: linear-gradient(
+				0deg,
+				rgba(0, 0, 0, 0) 0%,
+				rgba(0, 0, 0, 1) 128px,
+				rgba(0, 0, 0, 1) calc(100% - 128px),
+				rgba(0, 0, 0, 0) 100%
+			);
+			mask-image: linear-gradient(
+				0deg,
+				rgba(0, 0, 0, 0) 0%,
+				rgba(0, 0, 0, 1) 128px,
+				rgba(0, 0, 0, 1) calc(100% - 128px),
+				rgba(0, 0, 0, 0) 100%
+			);
 		}
 
 		> .shape {
diff --git a/packages/client/src/pages/welcome.entrance.c.vue b/packages/client/src/pages/welcome.entrance.c.vue
index 635bd9e558..69c1d5142c 100644
--- a/packages/client/src/pages/welcome.entrance.c.vue
+++ b/packages/client/src/pages/welcome.entrance.c.vue
@@ -1,72 +1,111 @@
 <template>
-<div v-if="meta" class="rsqzvsbo">
-	<div class="top">
-		<MkFeaturedPhotos class="bg"/>
-		<div class="fade"></div>
-		<div class="emojis">
-			<MkEmoji :normal="true" :no-style="true" emoji="👍"/>
-			<MkEmoji :normal="true" :no-style="true" emoji="❤"/>
-			<MkEmoji :normal="true" :no-style="true" emoji="😆"/>
-			<MkEmoji :normal="true" :no-style="true" emoji="🎉"/>
-			<MkEmoji :normal="true" :no-style="true" emoji="🍮"/>
-		</div>
-		<div class="main">
-			<img src="/client-assets/misskey.svg" class="misskey"/>
-			<div class="form _panel">
-				<div class="bg">
-					<div class="fade"></div>
-				</div>
-				<div class="fg">
-					<h1>
-						<img v-if="meta.logoImageUrl" class="logo" :src="meta.logoImageUrl"><span v-else class="text">{{ instanceName }}</span>
-					</h1>
-					<div class="about">
-						<div class="desc" v-html="meta.description || i18n.ts.headlineMisskey"></div>
+	<div v-if="meta" class="rsqzvsbo">
+		<div class="top">
+			<MkFeaturedPhotos class="bg" />
+			<div class="fade"></div>
+			<div class="emojis">
+				<MkEmoji :normal="true" :no-style="true" emoji="👍" />
+				<MkEmoji :normal="true" :no-style="true" emoji="❤" />
+				<MkEmoji :normal="true" :no-style="true" emoji="😆" />
+				<MkEmoji :normal="true" :no-style="true" emoji="🎉" />
+				<MkEmoji :normal="true" :no-style="true" emoji="🍮" />
+			</div>
+			<div class="main">
+				<img src="/client-assets/misskey.svg" class="misskey" />
+				<div class="form _panel">
+					<div class="bg">
+						<div class="fade"></div>
 					</div>
-					<div class="action">
-						<MkButton inline gradate @click="signup()">{{ i18n.ts.signup }}</MkButton>
-						<MkButton inline @click="signin()">{{ i18n.ts.login }}</MkButton>
-					</div>
-					<div v-if="onlineUsersCount && stats" class="status">
-						<div>
-							<I18n :src="i18n.ts.nUsers" text-tag="span" class="users">
-								<template #n><b>{{ number(stats.originalUsersCount) }}</b></template>
-							</I18n>
-							<I18n :src="i18n.ts.nNotes" text-tag="span" class="notes">
-								<template #n><b>{{ number(stats.originalNotesCount) }}</b></template>
+					<div class="fg">
+						<h1>
+							<img
+								v-if="meta.logoImageUrl"
+								class="logo"
+								:src="meta.logoImageUrl"
+							/><span v-else class="text">{{
+								instanceName
+							}}</span>
+						</h1>
+						<div class="about">
+							<div
+								class="desc"
+								v-html="
+									meta.description || i18n.ts.headlineMisskey
+								"
+							></div>
+						</div>
+						<div class="action">
+							<MkButton inline gradate @click="signup()">{{
+								i18n.ts.signup
+							}}</MkButton>
+							<MkButton inline @click="signin()">{{
+								i18n.ts.login
+							}}</MkButton>
+						</div>
+						<div v-if="onlineUsersCount && stats" class="status">
+							<div>
+								<I18n
+									:src="i18n.ts.nUsers"
+									text-tag="span"
+									class="users"
+								>
+									<template #n
+										><b>{{
+											number(stats.originalUsersCount)
+										}}</b></template
+									>
+								</I18n>
+								<I18n
+									:src="i18n.ts.nNotes"
+									text-tag="span"
+									class="notes"
+								>
+									<template #n
+										><b>{{
+											number(stats.originalNotesCount)
+										}}</b></template
+									>
+								</I18n>
+							</div>
+							<I18n
+								:src="i18n.ts.onlineUsersCount"
+								text-tag="span"
+								class="online"
+							>
+								<template #n
+									><b>{{ onlineUsersCount }}</b></template
+								>
 							</I18n>
 						</div>
-						<I18n :src="i18n.ts.onlineUsersCount" text-tag="span" class="online">
-							<template #n><b>{{ onlineUsersCount }}</b></template>
-						</I18n>
+						<button class="_button _acrylic menu" @click="showMenu">
+							<i class="ph-dots-three-outline ph-bold ph-lg"></i>
+						</button>
 					</div>
-					<button class="_button _acrylic menu" @click="showMenu"><i class="ph-dots-three-outline ph-bold ph-lg"></i></button>
 				</div>
+				<nav class="nav">
+					<MkA to="/announcements">{{ i18n.ts.announcements }}</MkA>
+					<MkA to="/explore">{{ i18n.ts.explore }}</MkA>
+					<MkA to="/channels">{{ i18n.ts.channel }}</MkA>
+					<MkA to="/featured">{{ i18n.ts.featured }}</MkA>
+				</nav>
 			</div>
-			<nav class="nav">
-				<MkA to="/announcements">{{ i18n.ts.announcements }}</MkA>
-				<MkA to="/explore">{{ i18n.ts.explore }}</MkA>
-				<MkA to="/channels">{{ i18n.ts.channel }}</MkA>
-				<MkA to="/featured">{{ i18n.ts.featured }}</MkA>
-			</nav>
 		</div>
 	</div>
-</div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
-import { toUnicode } from 'punycode/';
-import XTimeline from './welcome.timeline.vue';
-import XSigninDialog from '@/components/MkSigninDialog.vue';
-import XSignupDialog from '@/components/MkSignupDialog.vue';
-import MkButton from '@/components/MkButton.vue';
-import XNote from '@/components/MkNote.vue';
-import MkFeaturedPhotos from '@/components/MkFeaturedPhotos.vue';
-import { host, instanceName } from '@/config';
-import * as os from '@/os';
-import number from '@/filters/number';
-import { i18n } from '@/i18n';
+import { defineComponent } from "vue";
+import { toUnicode } from "punycode/";
+import XTimeline from "./welcome.timeline.vue";
+import XSigninDialog from "@/components/MkSigninDialog.vue";
+import XSignupDialog from "@/components/MkSignupDialog.vue";
+import MkButton from "@/components/MkButton.vue";
+import XNote from "@/components/MkNote.vue";
+import MkFeaturedPhotos from "@/components/MkFeaturedPhotos.vue";
+import { host, instanceName } from "@/config";
+import * as os from "@/os";
+import number from "@/filters/number";
+import { i18n } from "@/i18n";
 
 export default defineComponent({
 	components: {
@@ -89,53 +128,69 @@ export default defineComponent({
 	},
 
 	created() {
-		os.api('meta', { detail: true }).then(meta => {
+		os.api("meta", { detail: true }).then((meta) => {
 			this.meta = meta;
 		});
 
-		os.api('stats').then(stats => {
+		os.api("stats").then((stats) => {
 			this.stats = stats;
 		});
 
-		os.api('get-online-users-count').then(res => {
+		os.api("get-online-users-count").then((res) => {
 			this.onlineUsersCount = res.count;
 		});
 
-		os.api('hashtags/list', {
-			sort: '+mentionedLocalUsers',
+		os.api("hashtags/list", {
+			sort: "+mentionedLocalUsers",
 			limit: 8,
-		}).then(tags => {
+		}).then((tags) => {
 			this.tags = tags;
 		});
 	},
 
 	methods: {
 		signin() {
-			os.popup(XSigninDialog, {
-				autoSet: true,
-			}, {}, 'closed');
+			os.popup(
+				XSigninDialog,
+				{
+					autoSet: true,
+				},
+				{},
+				"closed"
+			);
 		},
 
 		signup() {
-			os.popup(XSignupDialog, {
-				autoSet: true,
-			}, {}, 'closed');
+			os.popup(
+				XSignupDialog,
+				{
+					autoSet: true,
+				},
+				{},
+				"closed"
+			);
 		},
 
 		showMenu(ev) {
-			os.popupMenu([{
-				text: i18n.t('aboutX', { x: instanceName }),
-				icon: 'ph-info ph-bold ph-lg',
-				action: () => {
-					os.pageWindow('/about');
-				},
-			}, {
-				text: i18n.ts.aboutMisskey,
-				icon: 'ph-info ph-bold ph-lg',
-				action: () => {
-					os.pageWindow('/about-calckey');
-				},
-			}], ev.currentTarget ?? ev.target);
+			os.popupMenu(
+				[
+					{
+						text: i18n.t("aboutX", { x: instanceName }),
+						icon: "ph-info ph-bold ph-lg",
+						action: () => {
+							os.pageWindow("/about");
+						},
+					},
+					{
+						text: i18n.ts.aboutMisskey,
+						icon: "ph-info ph-bold ph-lg",
+						action: () => {
+							os.pageWindow("/about-calckey");
+						},
+					},
+				],
+				ev.currentTarget ?? ev.target
+			);
 		},
 		number,
 	},
@@ -216,7 +271,11 @@ export default defineComponent({
 						left: 0;
 						width: 100%;
 						height: 128px;
-						background: linear-gradient(0deg, var(--panel), var(--X15));
+						background: linear-gradient(
+							0deg,
+							var(--panel),
+							var(--X15)
+						);
 					}
 				}
 
diff --git a/packages/client/src/pages/welcome.setup.vue b/packages/client/src/pages/welcome.setup.vue
index bc89a08604..97008e2044 100644
--- a/packages/client/src/pages/welcome.setup.vue
+++ b/packages/client/src/pages/welcome.setup.vue
@@ -1,63 +1,85 @@
 <template>
-<form class="mk-setup" @submit.prevent="submit()">
-	<h1>Welcome to Calckey!</h1>
-	<div class="_formRoot">
-		<p>{{ i18n.ts.intro }}</p>
-		<MkInput v-model="username" pattern="^[a-zA-Z0-9_]{1,20}$" :spellcheck="false" required data-cy-admin-username class="_formBlock">
-			<template #label>{{ i18n.ts.username }}</template>
-			<template #prefix>@</template>
-			<template #suffix>@{{ host }}</template>
-		</MkInput>
-		<MkInput v-model="password" type="password" data-cy-admin-password class="_formBlock">
-			<template #label>{{ i18n.ts.password }}</template>
-			<template #prefix><i class="ph-lock ph-bold ph-lg"></i></template>
-		</MkInput>
-		<div class="bottom _formBlock">
-			<MkButton gradate type="submit" :disabled="submitting" data-cy-admin-ok>
-				{{ submitting ? i18n.ts.processing : i18n.ts.done }}<MkEllipsis v-if="submitting"/>
-			</MkButton>
+	<form class="mk-setup" @submit.prevent="submit()">
+		<h1>Welcome to Calckey!</h1>
+		<div class="_formRoot">
+			<p>{{ i18n.ts.intro }}</p>
+			<MkInput
+				v-model="username"
+				pattern="^[a-zA-Z0-9_]{1,20}$"
+				:spellcheck="false"
+				required
+				data-cy-admin-username
+				class="_formBlock"
+			>
+				<template #label>{{ i18n.ts.username }}</template>
+				<template #prefix>@</template>
+				<template #suffix>@{{ host }}</template>
+			</MkInput>
+			<MkInput
+				v-model="password"
+				type="password"
+				data-cy-admin-password
+				class="_formBlock"
+			>
+				<template #label>{{ i18n.ts.password }}</template>
+				<template #prefix
+					><i class="ph-lock ph-bold ph-lg"></i
+				></template>
+			</MkInput>
+			<div class="bottom _formBlock">
+				<MkButton
+					gradate
+					type="submit"
+					:disabled="submitting"
+					data-cy-admin-ok
+				>
+					{{ submitting ? i18n.ts.processing : i18n.ts.done
+					}}<MkEllipsis v-if="submitting" />
+				</MkButton>
+			</div>
 		</div>
-	</div>
-</form>
+	</form>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import MkButton from '@/components/MkButton.vue';
-import MkInput from '@/components/form/input.vue';
-import { host } from '@/config';
-import * as os from '@/os';
-import { login } from '@/account';
-import { i18n } from '@/i18n';
+import {} from "vue";
+import MkButton from "@/components/MkButton.vue";
+import MkInput from "@/components/form/input.vue";
+import { host } from "@/config";
+import * as os from "@/os";
+import { login } from "@/account";
+import { i18n } from "@/i18n";
 
-let username = $ref('');
-let password = $ref('');
+let username = $ref("");
+let password = $ref("");
 let submitting = $ref(false);
 
 function submit() {
 	if (submitting) return;
 	submitting = true;
-	os.api('admin/accounts/create', {
+	os.api("admin/accounts/create", {
 		username: username,
 		password: password,
-	}).then(res => {
-		os.api('admin/accounts/hosted').then(res => {
-			if (res != null && res === true) {
-				os.alert({
-					type: 'success',
-					title: 'Thank you!',
-					text: 'Your hosting provider has set your settings for you. Enjoy your new instance!',
-				});
-			}
+	})
+		.then((res) => {
+			os.api("admin/accounts/hosted").then((res) => {
+				if (res != null && res === true) {
+					os.alert({
+						type: "success",
+						title: "Thank you!",
+						text: "Your hosting provider has set your settings for you. Enjoy your new instance!",
+					});
+				}
+			});
+			return login(res?.token);
+		})
+		.catch(() => {
+			submitting = false;
+			os.alert({
+				type: "error",
+				text: i18n.ts.somethingHappened,
+			});
 		});
-		return login(res?.token);
-	}).catch(() => {
-		submitting = false;
-		os.alert({
-			type: 'error',
-			text: i18n.ts.somethingHappened,
-		});
-	});
 }
 </script>
 
diff --git a/packages/client/src/pages/welcome.timeline.vue b/packages/client/src/pages/welcome.timeline.vue
index 220a8edde3..f90976bf20 100644
--- a/packages/client/src/pages/welcome.timeline.vue
+++ b/packages/client/src/pages/welcome.timeline.vue
@@ -1,38 +1,53 @@
 <template>
-<div class="civpbkhh">
-	<div ref="scroll" class="scrollbox" v-bind:class="{ scroll: isScrolling }">
-		<div v-for="note in notes" class="note">
-			<div class="content _panel">
-				<div class="body">
-					<MkA v-if="note.replyId" class="reply" :to="`/notes/${note.replyId}`"><i class="ph-arrow-bend-up-left ph-bold ph-lg"></i></MkA>
-					<Mfm v-if="note.text" :text="note.text" :author="note.user" :i="$i" :custom-emojis="note.emojis"/>
-					<!-- <MkA v-if="note.renoteId" class="rp" :to="`/notes/${note.renoteId}`">RN: ...</MkA> -->
-				</div>
-				<div v-if="note.files.length > 0" class="richcontent">
-					<XMediaList :media-list="note.files"/>
-				</div>
-				<div v-if="note.poll">
-					<XPoll :note="note" :readOnly="true"/>
+	<div class="civpbkhh">
+		<div
+			ref="scroll"
+			class="scrollbox"
+			v-bind:class="{ scroll: isScrolling }"
+		>
+			<div v-for="note in notes" class="note">
+				<div class="content _panel">
+					<div class="body">
+						<MkA
+							v-if="note.replyId"
+							class="reply"
+							:to="`/notes/${note.replyId}`"
+							><i class="ph-arrow-bend-up-left ph-bold ph-lg"></i
+						></MkA>
+						<Mfm
+							v-if="note.text"
+							:text="note.text"
+							:author="note.user"
+							:i="$i"
+							:custom-emojis="note.emojis"
+						/>
+						<!-- <MkA v-if="note.renoteId" class="rp" :to="`/notes/${note.renoteId}`">RN: ...</MkA> -->
+					</div>
+					<div v-if="note.files.length > 0" class="richcontent">
+						<XMediaList :media-list="note.files" />
+					</div>
+					<div v-if="note.poll">
+						<XPoll :note="note" :readOnly="true" />
+					</div>
 				</div>
+				<XReactionsViewer ref="reactionsViewer" :note="note" />
 			</div>
-			<XReactionsViewer ref="reactionsViewer" :note="note"/>
 		</div>
 	</div>
-</div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
-import XReactionsViewer from '@/components/MkReactionsViewer.vue';
-import XMediaList from '@/components/MkMediaList.vue';
-import XPoll from '@/components/MkPoll.vue';
-import * as os from '@/os';
+import { defineComponent } from "vue";
+import XReactionsViewer from "@/components/MkReactionsViewer.vue";
+import XMediaList from "@/components/MkMediaList.vue";
+import XPoll from "@/components/MkPoll.vue";
+import * as os from "@/os";
 
 export default defineComponent({
 	components: {
 		XReactionsViewer,
 		XMediaList,
-		XPoll
+		XPoll,
 	},
 
 	data() {
@@ -43,7 +58,7 @@ export default defineComponent({
 	},
 
 	created() {
-		os.api('notes/featured').then(notes => {
+		os.api("notes/featured").then((notes) => {
 			this.notes = notes;
 		});
 	},
@@ -52,7 +67,7 @@ export default defineComponent({
 		if (this.$refs.scroll.clientHeight > window.innerHeight) {
 			this.isScrolling = true;
 		}
-	}
+	},
 });
 </script>
 
diff --git a/packages/client/src/pages/welcome.vue b/packages/client/src/pages/welcome.vue
index a1c3fc2abb..564c6d13a9 100644
--- a/packages/client/src/pages/welcome.vue
+++ b/packages/client/src/pages/welcome.vue
@@ -1,21 +1,21 @@
 <template>
-<div v-if="meta">
-	<XSetup v-if="meta.requireSetup"/>
-	<XEntrance v-else/>
-</div>
+	<div v-if="meta">
+		<XSetup v-if="meta.requireSetup" />
+		<XEntrance v-else />
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
-import XSetup from './welcome.setup.vue';
-import XEntrance from './welcome.entrance.a.vue';
-import { instanceName } from '@/config';
-import * as os from '@/os';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import { computed } from "vue";
+import XSetup from "./welcome.setup.vue";
+import XEntrance from "./welcome.entrance.a.vue";
+import { instanceName } from "@/config";
+import * as os from "@/os";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
 let meta = $ref(null);
 
-os.api('meta', { detail: true }).then(res => {
+os.api("meta", { detail: true }).then((res) => {
 	meta = res;
 });
 
@@ -23,8 +23,10 @@ const headerActions = $computed(() => []);
 
 const headerTabs = $computed(() => []);
 
-definePageMetadata(computed(() => ({
-	title: instanceName,
-	icon: null,
-})));
+definePageMetadata(
+	computed(() => ({
+		title: instanceName,
+		icon: null,
+	}))
+);
 </script>
diff --git a/packages/client/src/ui/_common_/common.vue b/packages/client/src/ui/_common_/common.vue
index 38ad0591be..c47b0f85e4 100644
--- a/packages/client/src/ui/_common_/common.vue
+++ b/packages/client/src/ui/_common_/common.vue
@@ -1,57 +1,66 @@
 <template>
-<component
-	:is="popup.component"
-	v-for="popup in popups"
-	:key="popup.id"
-	v-bind="popup.props"
-	v-on="popup.events"
-/>
+	<component
+		:is="popup.component"
+		v-for="popup in popups"
+		:key="popup.id"
+		v-bind="popup.props"
+		v-on="popup.events"
+	/>
 
-<XUpload v-if="uploads.length > 0"/>
+	<XUpload v-if="uploads.length > 0" />
 
-<XStreamIndicator/>
+	<XStreamIndicator />
 
-<!-- <div v-if="pendingApiRequestsCount > 0" id="wait"></div> -->
+	<!-- <div v-if="pendingApiRequestsCount > 0" id="wait"></div> -->
 
-<div v-if="dev" id="devTicker"><span>DEV BUILD</span></div>
+	<div v-if="dev" id="devTicker"><span>DEV BUILD</span></div>
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent } from 'vue';
-import { swInject } from './sw-inject';
-import { popup, popups, pendingApiRequestsCount } from '@/os';
-import { uploads } from '@/scripts/upload';
-import * as sound from '@/scripts/sound';
-import { $i } from '@/account';
-import { stream } from '@/stream';
+import { defineAsyncComponent } from "vue";
+import { swInject } from "./sw-inject";
+import { popup, popups, pendingApiRequestsCount } from "@/os";
+import { uploads } from "@/scripts/upload";
+import * as sound from "@/scripts/sound";
+import { $i } from "@/account";
+import { stream } from "@/stream";
 
-const XStreamIndicator = defineAsyncComponent(() => import('./stream-indicator.vue'));
-const XUpload = defineAsyncComponent(() => import('./upload.vue'));
+const XStreamIndicator = defineAsyncComponent(
+	() => import("./stream-indicator.vue")
+);
+const XUpload = defineAsyncComponent(() => import("./upload.vue"));
 
 const dev = _DEV_;
 
-const onNotification = notification => {
+const onNotification = (notification) => {
 	if ($i.mutingNotificationTypes.includes(notification.type)) return;
 
-	if (document.visibilityState === 'visible') {
-		stream.send('readNotification', {
+	if (document.visibilityState === "visible") {
+		stream.send("readNotification", {
 			id: notification.id,
 		});
 
-		popup(defineAsyncComponent(() => import('@/components/MkNotificationToast.vue')), {
-			notification,
-		}, {}, 'closed');
+		popup(
+			defineAsyncComponent(
+				() => import("@/components/MkNotificationToast.vue")
+			),
+			{
+				notification,
+			},
+			{},
+			"closed"
+		);
 	}
 
-	sound.play('notification');
+	sound.play("notification");
 };
 
 if ($i) {
-	const connection = stream.useChannel('main', null, 'UI');
-	connection.on('notification', onNotification);
+	const connection = stream.useChannel("main", null, "UI");
+	connection.on("notification", onNotification);
 
 	//#region Listen message from SW
-	if ('serviceWorker' in navigator) {
+	if ("serviceWorker" in navigator) {
 		swInject();
 	}
 }
@@ -59,9 +68,15 @@ if ($i) {
 
 <style lang="scss">
 @keyframes dev-ticker-blink {
-	0% { opacity: 1; }
-	50% { opacity: 0; }
-	100% { opacity: 1; }
+	0% {
+		opacity: 1;
+	}
+	50% {
+		opacity: 0;
+	}
+	100% {
+		opacity: 1;
+	}
 }
 
 @keyframes progress-spinner {
diff --git a/packages/client/src/ui/_common_/navbar-for-mobile.vue b/packages/client/src/ui/_common_/navbar-for-mobile.vue
index 71bf05b668..43c91d1475 100644
--- a/packages/client/src/ui/_common_/navbar-for-mobile.vue
+++ b/packages/client/src/ui/_common_/navbar-for-mobile.vue
@@ -1,57 +1,138 @@
 <template>
-<div class="kmwsukvl">
-	<div class="body">
-		<div class="top">
-			<div class="banner" :user="$i" :style="{ backgroundImage: `url(${ $i.bannerUrl })` }"></div>
-			<button v-click-anime v-tooltip.noDelay.right="`${i18n.ts.account}: @${$i.username}`" class="item _button account" @click="openAccountMenu">
-				<MkAvatar :user="$i" class="icon"/><!-- <MkAcct class="text" :user="$i"/> -->
-			</button>
-		</div>
-		<div class="middle">
-			<MkA v-click-anime class="item index" active-class="active" to="/" exact>
-				<i class="icon ph-house ph-bold ph-lg ph-fw ph-lg"></i><span class="text">{{ i18n.ts.timeline }}</span>
-			</MkA>
-			<template v-for="item in menu">
-				<div v-if="item === '-'" class="divider"></div>
-				<component :is="navbarItemDef[item].to ? 'MkA' : 'button'" v-else-if="navbarItemDef[item] && (navbarItemDef[item].show !== false)" v-click-anime class="item _button" :class="[item, { active: navbarItemDef[item].active }]" active-class="active" :to="navbarItemDef[item].to" v-on="navbarItemDef[item].action ? { click: navbarItemDef[item].action } : {}">
-					<i class="icon ph-fw ph-lg" :class="navbarItemDef[item].icon"></i><span class="text">{{ i18n.ts[navbarItemDef[item].title] }}</span>
-					<span v-if="navbarItemDef[item].indicated" class="indicator"><i class="icon ph-circle ph-fill"></i></span>
-				</component>
-			</template>
-			<div class="divider"></div>
-			<MkA v-if="$i.isAdmin || $i.isModerator" v-click-anime class="item" active-class="active" to="/admin">
-				<i class="icon ph-door ph-bold ph-lg ph-fw ph-lg"></i><span class="text">{{ i18n.ts.controlPanel }}</span>
-			</MkA>
-			<button v-click-anime class="item _button" @click="more">
-				<i class="icon ph-dots-three-outline ph-bold ph-lg ph-fw ph-lg"></i><span class="text">{{ i18n.ts.more }}</span>
-				<span v-if="otherMenuItemIndicated" class="indicator"><i class="icon ph-circle ph-fill"></i></span>
-			</button>
-			<MkA v-click-anime class="item" active-class="active" to="/settings">
-				<i class="icon ph-gear-six ph-bold ph-lg ph-fw ph-lg"></i><span class="text">{{ i18n.ts.settings }}</span>
-			</MkA>
-		</div>
-		<div class="bottom">
-			<button class="item _button post" data-cy-open-post-form @click="os.post">
-				<i class="icon ph-pencil ph-bold ph-lg ph-fw ph-lg"></i><span class="text">{{ i18n.ts.note }}</span>
-			</button>
-			<button v-tooltip.noDelay.right="i18n.ts.help" class="item _button help" @click="openHelpMenu">
-				<i class="help icon ph-info ph-bold ph-xl ph-fw"></i>
-			</button>
+	<div class="kmwsukvl">
+		<div class="body">
+			<div class="top">
+				<div
+					class="banner"
+					:user="$i"
+					:style="{ backgroundImage: `url(${$i.bannerUrl})` }"
+				></div>
+				<button
+					v-click-anime
+					v-tooltip.noDelay.right="
+						`${i18n.ts.account}: @${$i.username}`
+					"
+					class="item _button account"
+					@click="openAccountMenu"
+				>
+					<MkAvatar
+						:user="$i"
+						class="icon"
+					/><!-- <MkAcct class="text" :user="$i"/> -->
+				</button>
+			</div>
+			<div class="middle">
+				<MkA
+					v-click-anime
+					class="item index"
+					active-class="active"
+					to="/"
+					exact
+				>
+					<i class="icon ph-house ph-bold ph-lg ph-fw ph-lg"></i
+					><span class="text">{{ i18n.ts.timeline }}</span>
+				</MkA>
+				<template v-for="item in menu">
+					<div v-if="item === '-'" class="divider"></div>
+					<component
+						:is="navbarItemDef[item].to ? 'MkA' : 'button'"
+						v-else-if="
+							navbarItemDef[item] &&
+							navbarItemDef[item].show !== false
+						"
+						v-click-anime
+						class="item _button"
+						:class="[item, { active: navbarItemDef[item].active }]"
+						active-class="active"
+						:to="navbarItemDef[item].to"
+						v-on="
+							navbarItemDef[item].action
+								? { click: navbarItemDef[item].action }
+								: {}
+						"
+					>
+						<i
+							class="icon ph-fw ph-lg"
+							:class="navbarItemDef[item].icon"
+						></i
+						><span class="text">{{
+							i18n.ts[navbarItemDef[item].title]
+						}}</span>
+						<span
+							v-if="navbarItemDef[item].indicated"
+							class="indicator"
+							><i class="icon ph-circle ph-fill"></i
+						></span>
+					</component>
+				</template>
+				<div class="divider"></div>
+				<MkA
+					v-if="$i.isAdmin || $i.isModerator"
+					v-click-anime
+					class="item"
+					active-class="active"
+					to="/admin"
+				>
+					<i class="icon ph-door ph-bold ph-lg ph-fw ph-lg"></i
+					><span class="text">{{ i18n.ts.controlPanel }}</span>
+				</MkA>
+				<button v-click-anime class="item _button" @click="more">
+					<i
+						class="icon ph-dots-three-outline ph-bold ph-lg ph-fw ph-lg"
+					></i
+					><span class="text">{{ i18n.ts.more }}</span>
+					<span v-if="otherMenuItemIndicated" class="indicator"
+						><i class="icon ph-circle ph-fill"></i
+					></span>
+				</button>
+				<MkA
+					v-click-anime
+					class="item"
+					active-class="active"
+					to="/settings"
+				>
+					<i class="icon ph-gear-six ph-bold ph-lg ph-fw ph-lg"></i
+					><span class="text">{{ i18n.ts.settings }}</span>
+				</MkA>
+			</div>
+			<div class="bottom">
+				<button
+					class="item _button post"
+					data-cy-open-post-form
+					@click="os.post"
+				>
+					<i class="icon ph-pencil ph-bold ph-lg ph-fw ph-lg"></i
+					><span class="text">{{ i18n.ts.note }}</span>
+				</button>
+				<button
+					v-tooltip.noDelay.right="i18n.ts.help"
+					class="item _button help"
+					@click="openHelpMenu"
+				>
+					<i class="help icon ph-info ph-bold ph-xl ph-fw"></i>
+				</button>
+			</div>
 		</div>
 	</div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { computed, defineAsyncComponent, defineComponent, ref, toRef, watch } from 'vue';
-import * as os from '@/os';
-import { navbarItemDef } from '@/navbar';
-import { openAccountMenu as openAccountMenu_ } from '@/account';
-import { openHelpMenu_ } from '@/scripts/helpMenu'
-import { defaultStore } from '@/store';
-import { i18n } from '@/i18n';
+import {
+	computed,
+	defineAsyncComponent,
+	defineComponent,
+	ref,
+	toRef,
+	watch,
+} from "vue";
+import * as os from "@/os";
+import { navbarItemDef } from "@/navbar";
+import { openAccountMenu as openAccountMenu_ } from "@/account";
+import { openHelpMenu_ } from "@/scripts/helpMenu";
+import { defaultStore } from "@/store";
+import { i18n } from "@/i18n";
 
-const menu = toRef(defaultStore.state, 'menu');
+const menu = toRef(defaultStore.state, "menu");
 const otherMenuItemIndicated = computed(() => {
 	for (const def in navbarItemDef) {
 		if (menu.value.includes(def)) continue;
@@ -61,9 +142,12 @@ const otherMenuItemIndicated = computed(() => {
 });
 
 function openAccountMenu(ev: MouseEvent) {
-	openAccountMenu_({
-		withExtraOperation: true,
-	}, ev);
+	openAccountMenu_(
+		{
+			withExtraOperation: true,
+		},
+		ev
+	);
 }
 
 function openHelpMenu(ev: MouseEvent) {
@@ -71,8 +155,12 @@ function openHelpMenu(ev: MouseEvent) {
 }
 
 function more() {
-	os.popup(defineAsyncComponent(() => import('@/components/MkLaunchPad.vue')), {}, {
-	}, 'closed');
+	os.popup(
+		defineAsyncComponent(() => import("@/components/MkLaunchPad.vue")),
+		{},
+		{},
+		"closed"
+	);
 }
 </script>
 
@@ -99,8 +187,16 @@ function more() {
 				height: 100%;
 				background-size: cover;
 				background-position: center center;
-				-webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,0) 15%, rgba(0,0,0,0.75) 100%);
-				mask-image: linear-gradient(0deg, rgba(0,0,0,0) 15%, rgba(0,0,0,0.75) 100%);
+				-webkit-mask-image: linear-gradient(
+					0deg,
+					rgba(0, 0, 0, 0) 15%,
+					rgba(0, 0, 0, 0.75) 100%
+				);
+				mask-image: linear-gradient(
+					0deg,
+					rgba(0, 0, 0, 0) 15%,
+					rgba(0, 0, 0, 0.75) 100%
+				);
 			}
 
 			> .account {
@@ -147,10 +243,15 @@ function more() {
 					right: 0;
 					bottom: 0;
 					border-radius: 999px;
-					background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
+					background: linear-gradient(
+						90deg,
+						var(--buttonGradateA),
+						var(--buttonGradateB)
+					);
 				}
 
-				&:hover, &.active {
+				&:hover,
+				&.active {
 					&:before {
 						background: var(--accentLighten);
 					}
@@ -169,19 +270,19 @@ function more() {
 			}
 
 			> .help {
-					position: relative;
-					display: block;
-					text-align: center;
-					width: 100%;
-					margin-top: 1rem;
-					color: var(--navFg);
+				position: relative;
+				display: block;
+				text-align: center;
+				width: 100%;
+				margin-top: 1rem;
+				color: var(--navFg);
 
-					> .icon {
-						display: inline-block;
-						width: 38px;
-						aspect-ratio: 1;
-					}
+				> .icon {
+					display: inline-block;
+					width: 38px;
+					aspect-ratio: 1;
 				}
+			}
 
 			> .instance {
 				position: relative;
@@ -256,7 +357,8 @@ function more() {
 					color: var(--navActive);
 				}
 
-				&:hover, &.active {
+				&:hover,
+				&.active {
 					&:before {
 						content: "";
 						display: block;
diff --git a/packages/client/src/ui/_common_/navbar.vue b/packages/client/src/ui/_common_/navbar.vue
index 589868699b..023b4d4933 100644
--- a/packages/client/src/ui/_common_/navbar.vue
+++ b/packages/client/src/ui/_common_/navbar.vue
@@ -1,75 +1,156 @@
 <template>
-<div class="mvcprjjd" :class="{ iconOnly }">
-	<div class="body">
-		<div class="top">
-			<div class="banner" :user="$i" :style="{ backgroundImage: `url(${ $i.bannerUrl })` }"></div>
-			<button v-click-anime v-tooltip.noDelay.right="`${i18n.ts.account}: @${$i.username}`" class="item _button account" @click="openAccountMenu">
-				<MkAvatar :user="$i" class="icon"/><!-- <MkAcct class="text" :user="$i"/> -->
-			</button>
-		</div>
-		<div class="middle">
-			<MkA v-click-anime v-tooltip.noDelay.right="i18n.ts.timeline" class="item index" active-class="active" to="/" exact>
-				<i class="icon ph-house ph-bold ph-fw ph-lg"></i><span class="text">{{ i18n.ts.timeline }}</span>
-			</MkA>
-			<template v-for="item in menu">
-				<div v-if="item === '-'" class="divider"></div>
-				<component
-					:is="navbarItemDef[item].to ? 'MkA' : 'button'"
-					v-else-if="navbarItemDef[item] && (navbarItemDef[item].show !== false)"
+	<div class="mvcprjjd" :class="{ iconOnly }">
+		<div class="body">
+			<div class="top">
+				<div
+					class="banner"
+					:user="$i"
+					:style="{ backgroundImage: `url(${$i.bannerUrl})` }"
+				></div>
+				<button
 					v-click-anime
-					v-tooltip.noDelay.right="i18n.ts[navbarItemDef[item].title]"
-					class="item _button"
-					:class="[item, { active: navbarItemDef[item].active }]"
-					active-class="active"
-					:to="navbarItemDef[item].to"
-					v-on="navbarItemDef[item].action ? { click: navbarItemDef[item].action } : {}"
+					v-tooltip.noDelay.right="
+						`${i18n.ts.account}: @${$i.username}`
+					"
+					class="item _button account"
+					@click="openAccountMenu"
 				>
-					<i class="icon ph-fw ph-lg" :class="navbarItemDef[item].icon"></i><span class="text">{{ i18n.ts[navbarItemDef[item].title] }}</span>
-					<span v-if="navbarItemDef[item].indicated" class="indicator"><i class="icon ph-circle ph-fill"></i></span>
-				</component>
-			</template>
-			<div class="divider"></div>
-			<MkA v-if="$i.isAdmin || $i.isModerator" v-click-anime v-tooltip.noDelay.right="i18n.ts.controlPanel" class="item _button" active-class="active" to="/admin">
-				<span v-if="thereIsUnresolvedAbuseReport || noMaintainerInformation || noBotProtection || noEmailServer || updateAvailable" class="indicator"></span><i class="icon ph-door ph-bold ph-fw ph-lg"></i><span class="text">{{ i18n.ts.controlPanel }}</span>
-			</MkA>
-			<button v-click-anime class="item _button" @click="more">
-				<i class="icon ph-dots-three-outline ph-bold ph-fw ph-lg"></i><span class="text">{{ i18n.ts.more }}</span>
-				<span v-if="otherMenuItemIndicated" class="indicator"><i class="icon ph-circle ph-fill"></i></span>
-			</button>
-			<MkA v-click-anime v-tooltip.noDelay.right="i18n.ts.settings" class="item _button" active-class="active" to="/settings">
-				<i class="icon ph-gear-six ph-bold ph-fw ph-lg"></i><span class="text">{{ i18n.ts.settings }}</span>
-			</MkA>
-		</div>
-		<div class="bottom">
-			<button v-tooltip.noDelay.right="i18n.ts.note" class="item _button post" data-cy-open-post-form @click="os.post">
-				<i class="icon ph-pencil ph-bold ph-fw ph-lg"></i><span class="text">{{ i18n.ts.note }}</span>
-			</button>
-			<button v-tooltip.noDelay.right="i18n.ts.help" class="item _button help" @click="openHelpMenu">
-				<i class="help icon ph-info ph-bold ph-xl ph-fw"></i>
-			</button>
-			<!-- <button v-click-anime v-tooltip.noDelay.right="$instance.name ?? i18n.ts.instance" class="item _button instance" @click="openInstanceMenu">
+					<MkAvatar
+						:user="$i"
+						class="icon"
+					/><!-- <MkAcct class="text" :user="$i"/> -->
+				</button>
+			</div>
+			<div class="middle">
+				<MkA
+					v-click-anime
+					v-tooltip.noDelay.right="i18n.ts.timeline"
+					class="item index"
+					active-class="active"
+					to="/"
+					exact
+				>
+					<i class="icon ph-house ph-bold ph-fw ph-lg"></i
+					><span class="text">{{ i18n.ts.timeline }}</span>
+				</MkA>
+				<template v-for="item in menu">
+					<div v-if="item === '-'" class="divider"></div>
+					<component
+						:is="navbarItemDef[item].to ? 'MkA' : 'button'"
+						v-else-if="
+							navbarItemDef[item] &&
+							navbarItemDef[item].show !== false
+						"
+						v-click-anime
+						v-tooltip.noDelay.right="
+							i18n.ts[navbarItemDef[item].title]
+						"
+						class="item _button"
+						:class="[item, { active: navbarItemDef[item].active }]"
+						active-class="active"
+						:to="navbarItemDef[item].to"
+						v-on="
+							navbarItemDef[item].action
+								? { click: navbarItemDef[item].action }
+								: {}
+						"
+					>
+						<i
+							class="icon ph-fw ph-lg"
+							:class="navbarItemDef[item].icon"
+						></i
+						><span class="text">{{
+							i18n.ts[navbarItemDef[item].title]
+						}}</span>
+						<span
+							v-if="navbarItemDef[item].indicated"
+							class="indicator"
+							><i class="icon ph-circle ph-fill"></i
+						></span>
+					</component>
+				</template>
+				<div class="divider"></div>
+				<MkA
+					v-if="$i.isAdmin || $i.isModerator"
+					v-click-anime
+					v-tooltip.noDelay.right="i18n.ts.controlPanel"
+					class="item _button"
+					active-class="active"
+					to="/admin"
+				>
+					<span
+						v-if="
+							thereIsUnresolvedAbuseReport ||
+							noMaintainerInformation ||
+							noBotProtection ||
+							noEmailServer ||
+							updateAvailable
+						"
+						class="indicator"
+					></span
+					><i class="icon ph-door ph-bold ph-fw ph-lg"></i
+					><span class="text">{{ i18n.ts.controlPanel }}</span>
+				</MkA>
+				<button v-click-anime class="item _button" @click="more">
+					<i
+						class="icon ph-dots-three-outline ph-bold ph-fw ph-lg"
+					></i
+					><span class="text">{{ i18n.ts.more }}</span>
+					<span v-if="otherMenuItemIndicated" class="indicator"
+						><i class="icon ph-circle ph-fill"></i
+					></span>
+				</button>
+				<MkA
+					v-click-anime
+					v-tooltip.noDelay.right="i18n.ts.settings"
+					class="item _button"
+					active-class="active"
+					to="/settings"
+				>
+					<i class="icon ph-gear-six ph-bold ph-fw ph-lg"></i
+					><span class="text">{{ i18n.ts.settings }}</span>
+				</MkA>
+			</div>
+			<div class="bottom">
+				<button
+					v-tooltip.noDelay.right="i18n.ts.note"
+					class="item _button post"
+					data-cy-open-post-form
+					@click="os.post"
+				>
+					<i class="icon ph-pencil ph-bold ph-fw ph-lg"></i
+					><span class="text">{{ i18n.ts.note }}</span>
+				</button>
+				<button
+					v-tooltip.noDelay.right="i18n.ts.help"
+					class="item _button help"
+					@click="openHelpMenu"
+				>
+					<i class="help icon ph-info ph-bold ph-xl ph-fw"></i>
+				</button>
+				<!-- <button v-click-anime v-tooltip.noDelay.right="$instance.name ?? i18n.ts.instance" class="item _button instance" @click="openInstanceMenu">
 				<img :src="$instance.iconUrl || $instance.faviconUrl || '/favicon.ico'" alt="" class="icon"/>
 			</button> -->
-			<!-- <button v-click-anime v-tooltip.noDelay.right="`${i18n.ts.account}: @${$i.username}`" class="item _button account" @click="openAccountMenu">
+				<!-- <button v-click-anime v-tooltip.noDelay.right="`${i18n.ts.account}: @${$i.username}`" class="item _button account" @click="openAccountMenu">
 				<MkAvatar :user="$i" class="account"/><MkAcct class="text" :user="$i"/>
 			</button> -->
+			</div>
 		</div>
 	</div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { computed, defineAsyncComponent, ref, watch } from 'vue';
-import * as os from '@/os';
-import { navbarItemDef } from '@/navbar';
-import { $i, openAccountMenu as openAccountMenu_ } from '@/account';
-import { openHelpMenu_ } from '@/scripts/helpMenu'
-import { defaultStore } from '@/store';
-import { i18n } from '@/i18n';
-import { instance } from '@/instance';
-import { version } from '@/config';
+import { computed, defineAsyncComponent, ref, watch } from "vue";
+import * as os from "@/os";
+import { navbarItemDef } from "@/navbar";
+import { $i, openAccountMenu as openAccountMenu_ } from "@/account";
+import { openHelpMenu_ } from "@/scripts/helpMenu";
+import { defaultStore } from "@/store";
+import { i18n } from "@/i18n";
+import { instance } from "@/instance";
+import { version } from "@/config";
 
-const isEmpty = (x: string | null) => x == null || x === '';
+const isEmpty = (x: string | null) => x == null || x === "";
 
 const iconOnly = ref(false);
 
@@ -83,36 +164,42 @@ const otherMenuItemIndicated = computed(() => {
 });
 
 const calcViewState = () => {
-	iconOnly.value = (window.innerWidth <= 1279) || (defaultStore.state.menuDisplay === 'sideIcon');
+	iconOnly.value =
+		window.innerWidth <= 1279 ||
+		defaultStore.state.menuDisplay === "sideIcon";
 };
 
 calcViewState();
 
-window.addEventListener('resize', calcViewState);
+window.addEventListener("resize", calcViewState);
 
 watch(defaultStore.reactiveState.menuDisplay, () => {
 	calcViewState();
 });
 
-let noMaintainerInformation = isEmpty(instance.maintainerName) || isEmpty(instance.maintainerEmail);
-let noBotProtection = !instance.disableRegistration && !instance.enableHcaptcha && !instance.enableRecaptcha;
+let noMaintainerInformation =
+	isEmpty(instance.maintainerName) || isEmpty(instance.maintainerEmail);
+let noBotProtection =
+	!instance.disableRegistration &&
+	!instance.enableHcaptcha &&
+	!instance.enableRecaptcha;
 let noEmailServer = !instance.enableEmail;
 let thereIsUnresolvedAbuseReport = $ref(false);
 let updateAvailable = $ref(false);
 
 if ($i?.isAdmin) {
-	os.api('admin/abuse-user-reports', {
-		state: 'unresolved',
+	os.api("admin/abuse-user-reports", {
+		state: "unresolved",
 		limit: 1,
-	}).then(reports => {
+	}).then((reports) => {
 		if (reports?.length > 0) thereIsUnresolvedAbuseReport = true;
 	});
 }
 
 if (defaultStore.state.showAdminUpdates) {
-	os.api('latest-version').then(res => {
-		const cleanRes = parseInt(res?.tag_name.replace(/[^0-9]/g, ''));
-		const cleanVersion = parseInt(version.replace(/[^0-9]/g, ''));
+	os.api("latest-version").then((res) => {
+		const cleanRes = parseInt(res?.tag_name.replace(/[^0-9]/g, ""));
+		const cleanVersion = parseInt(version.replace(/[^0-9]/g, ""));
 		if (cleanRes > cleanVersion) {
 			updateAvailable = true;
 		}
@@ -120,9 +207,12 @@ if (defaultStore.state.showAdminUpdates) {
 }
 
 function openAccountMenu(ev: MouseEvent) {
-	openAccountMenu_({
-		withExtraOperation: true,
-	}, ev);
+	openAccountMenu_(
+		{
+			withExtraOperation: true,
+		},
+		ev
+	);
 }
 
 function openHelpMenu(ev: MouseEvent) {
@@ -130,10 +220,14 @@ function openHelpMenu(ev: MouseEvent) {
 }
 
 function more(ev: MouseEvent) {
-	os.popup(defineAsyncComponent(() => import('@/components/MkLaunchPad.vue')), {
-		src: ev.currentTarget ?? ev.target,
-	}, {
-	}, 'closed');
+	os.popup(
+		defineAsyncComponent(() => import("@/components/MkLaunchPad.vue")),
+		{
+			src: ev.currentTarget ?? ev.target,
+		},
+		{},
+		"closed"
+	);
 }
 </script>
 
@@ -184,8 +278,16 @@ function more(ev: MouseEvent) {
 					height: 100%;
 					background-size: cover;
 					background-position: center center;
-					-webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,0) 15%, rgba(0,0,0,0.75) 100%);
-					mask-image: linear-gradient(0deg, rgba(0,0,0,0) 15%, rgba(0,0,0,0.75) 100%);
+					-webkit-mask-image: linear-gradient(
+						0deg,
+						rgba(0, 0, 0, 0) 15%,
+						rgba(0, 0, 0, 0.75) 100%
+					);
+					mask-image: linear-gradient(
+						0deg,
+						rgba(0, 0, 0, 0) 15%,
+						rgba(0, 0, 0, 0.75) 100%
+					);
 				}
 
 				> .account {
@@ -232,21 +334,27 @@ function more(ev: MouseEvent) {
 						right: 0;
 						bottom: 0;
 						border-radius: 999px;
-						background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
+						background: linear-gradient(
+							90deg,
+							var(--buttonGradateA),
+							var(--buttonGradateB)
+						);
 					}
 
-					&:hover, &.active {
+					&:hover,
+					&.active {
 						&:before {
 							background: var(--accentLighten);
 							transition: all 0.4s ease;
 						}
 					}
 
-					> .icon, > .text {
+					> .icon,
+					> .text {
 						position: relative;
 						left: 3rem;
 						color: var(--fgOnAccent);
-						transform: translateY(0em)
+						transform: translateY(0em);
 					}
 
 					> .text {
@@ -337,7 +445,8 @@ function more(ev: MouseEvent) {
 						color: var(--navActive);
 					}
 
-					&:hover, &.active {
+					&:hover,
+					&.active {
 						color: var(--accent);
 						transition: all 0.4s ease;
 
@@ -419,10 +528,15 @@ function more(ev: MouseEvent) {
 						width: 52px;
 						aspect-ratio: 1/1;
 						border-radius: 100%;
-						background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
+						background: linear-gradient(
+							90deg,
+							var(--buttonGradateA),
+							var(--buttonGradateB)
+						);
 					}
 
-					&:hover, &.active {
+					&:hover,
+					&.active {
 						&:before {
 							background: var(--accentLighten);
 							transition: all 0.4s ease;
@@ -432,7 +546,7 @@ function more(ev: MouseEvent) {
 					> .icon {
 						position: relative;
 						color: var(--fgOnAccent);
-						transform: translate(0.15em, 0em)
+						transform: translate(0.15em, 0em);
 					}
 
 					> .text {
@@ -506,7 +620,8 @@ function more(ev: MouseEvent) {
 						animation: blink 1s infinite;
 					}
 
-					&:hover, &.active {
+					&:hover,
+					&.active {
 						text-decoration: none;
 						color: var(--accent);
 						transition: all 0.4s ease;
@@ -526,7 +641,8 @@ function more(ev: MouseEvent) {
 							background: var(--accentedBg);
 						}
 
-						> .icon, > .text {
+						> .icon,
+						> .text {
 							opacity: 1;
 						}
 					}
diff --git a/packages/client/src/ui/_common_/statusbar-federation.vue b/packages/client/src/ui/_common_/statusbar-federation.vue
index 2896cc09c3..2bb06bc384 100644
--- a/packages/client/src/ui/_common_/statusbar-federation.vue
+++ b/packages/client/src/ui/_common_/statusbar-federation.vue
@@ -1,36 +1,55 @@
 <template>
-<span v-if="!fetching" class="nmidsaqw">
-	<template v-if="display === 'marquee'">
-		<transition name="change" mode="default">
-			<MarqueeText :key="key" :duration="marqueeDuration" :reverse="marqueeReverse">
-				<span v-for="instance in instances" :key="instance.id" class="item" :class="{ colored }" :style="{ background: colored ? instance.themeColor : null }">
-					<img class="icon" :src="getInstanceIcon(instance)" alt=""/>
-					<MkA :to="`/instance-info/${instance.host}`" class="host _monospace">
-						{{ instance.host }}
-					</MkA>
-					<span class="divider"></span>
-				</span>
-			</MarqueeText>
-		</transition>
-	</template>
-	<template v-else-if="display === 'oneByOne'">
-		<!-- TODO -->
-	</template>
-</span>
+	<span v-if="!fetching" class="nmidsaqw">
+		<template v-if="display === 'marquee'">
+			<transition name="change" mode="default">
+				<MarqueeText
+					:key="key"
+					:duration="marqueeDuration"
+					:reverse="marqueeReverse"
+				>
+					<span
+						v-for="instance in instances"
+						:key="instance.id"
+						class="item"
+						:class="{ colored }"
+						:style="{
+							background: colored ? instance.themeColor : null,
+						}"
+					>
+						<img
+							class="icon"
+							:src="getInstanceIcon(instance)"
+							alt=""
+						/>
+						<MkA
+							:to="`/instance-info/${instance.host}`"
+							class="host _monospace"
+						>
+							{{ instance.host }}
+						</MkA>
+						<span class="divider"></span>
+					</span>
+				</MarqueeText>
+			</transition>
+		</template>
+		<template v-else-if="display === 'oneByOne'">
+			<!-- TODO -->
+		</template>
+	</span>
 </template>
 
 <script lang="ts" setup>
-import { computed, defineAsyncComponent, ref, toRef, watch } from 'vue';
-import * as misskey from 'calckey-js';
-import MarqueeText from '@/components/MkMarquee.vue';
-import * as os from '@/os';
-import { useInterval } from '@/scripts/use-interval';
-import { getNoteSummary } from '@/scripts/get-note-summary';
-import { notePage } from '@/filters/note';
-import { getProxiedImageUrlNullable } from '@/scripts/media-proxy';
+import { computed, defineAsyncComponent, ref, toRef, watch } from "vue";
+import * as misskey from "calckey-js";
+import MarqueeText from "@/components/MkMarquee.vue";
+import * as os from "@/os";
+import { useInterval } from "@/scripts/use-interval";
+import { getNoteSummary } from "@/scripts/get-note-summary";
+import { notePage } from "@/filters/note";
+import { getProxiedImageUrlNullable } from "@/scripts/media-proxy";
 
 const props = defineProps<{
-	display?: 'marquee' | 'oneByOne';
+	display?: "marquee" | "oneByOne";
 	colored?: boolean;
 	marqueeDuration?: number;
 	marqueeReverse?: boolean;
@@ -43,10 +62,10 @@ const fetching = ref(true);
 let key = $ref(0);
 
 const tick = () => {
-	os.api('federation/instances', {
-		sort: '+lastCommunicatedAt',
+	os.api("federation/instances", {
+		sort: "+lastCommunicatedAt",
 		limit: 30,
-	}).then(res => {
+	}).then((res) => {
 		instances.value = res;
 		fetching.value = false;
 		key++;
@@ -59,22 +78,27 @@ useInterval(tick, Math.max(5000, props.refreshIntervalSec * 1000), {
 });
 
 function getInstanceIcon(instance): string {
-	return getProxiedImageUrlNullable(instance.iconUrl, 'preview') ?? getProxiedImageUrlNullable(instance.faviconUrl, 'preview') ?? '/client-assets/dummy.png';
+	return (
+		getProxiedImageUrlNullable(instance.iconUrl, "preview") ??
+		getProxiedImageUrlNullable(instance.faviconUrl, "preview") ??
+		"/client-assets/dummy.png"
+	);
 }
 </script>
 
 <style lang="scss" scoped>
-.change-enter-active, .change-leave-active {
+.change-enter-active,
+.change-leave-active {
 	position: absolute;
 	top: 0;
-  transition: all 1s ease;
+	transition: all 1s ease;
 }
 .change-enter-from {
-  opacity: 0;
+	opacity: 0;
 	transform: translateY(-100%);
 }
 .change-leave-to {
-  opacity: 0;
+	opacity: 0;
 	transform: translateY(100%);
 }
 
diff --git a/packages/client/src/ui/_common_/statusbar-rss.vue b/packages/client/src/ui/_common_/statusbar-rss.vue
index e75e13bb48..606f3f1bd5 100644
--- a/packages/client/src/ui/_common_/statusbar-rss.vue
+++ b/packages/client/src/ui/_common_/statusbar-rss.vue
@@ -1,31 +1,42 @@
 <template>
-<span v-if="!fetching" class="xbhtxfms">
-	<template v-if="display === 'marquee'">
-		<transition name="change" mode="default">
-			<MarqueeText :key="key" :duration="marqueeDuration" :reverse="marqueeReverse">
-				<span v-for="item in items" class="item">
-					<a class="link" :href="item.link" rel="nofollow noopener" target="_blank" :title="item.title">{{ item.title }}</a><span class="divider"></span>
-				</span>
-			</MarqueeText>
-		</transition>
-	</template>
-	<template v-else-if="display === 'oneByOne'">
-		<!-- TODO -->
-	</template>
-</span>
+	<span v-if="!fetching" class="xbhtxfms">
+		<template v-if="display === 'marquee'">
+			<transition name="change" mode="default">
+				<MarqueeText
+					:key="key"
+					:duration="marqueeDuration"
+					:reverse="marqueeReverse"
+				>
+					<span v-for="item in items" class="item">
+						<a
+							class="link"
+							:href="item.link"
+							rel="nofollow noopener"
+							target="_blank"
+							:title="item.title"
+							>{{ item.title }}</a
+						><span class="divider"></span>
+					</span>
+				</MarqueeText>
+			</transition>
+		</template>
+		<template v-else-if="display === 'oneByOne'">
+			<!-- TODO -->
+		</template>
+	</span>
 </template>
 
 <script lang="ts" setup>
-import { computed, defineAsyncComponent, ref, toRef, watch } from 'vue';
-import MarqueeText from '@/components/MkMarquee.vue';
-import * as os from '@/os';
-import { useInterval } from '@/scripts/use-interval';
-import { shuffle } from '@/scripts/shuffle';
+import { computed, defineAsyncComponent, ref, toRef, watch } from "vue";
+import MarqueeText from "@/components/MkMarquee.vue";
+import * as os from "@/os";
+import { useInterval } from "@/scripts/use-interval";
+import { shuffle } from "@/scripts/shuffle";
 
 const props = defineProps<{
 	url?: string;
 	shuffle?: boolean;
-	display?: 'marquee' | 'oneByOne';
+	display?: "marquee" | "oneByOne";
 	marqueeDuration?: number;
 	marqueeReverse?: boolean;
 	oneByOneInterval?: number;
@@ -37,8 +48,8 @@ const fetching = ref(true);
 let key = $ref(0);
 
 const tick = () => {
-	fetch(`/api/fetch-rss?url=${props.url}`, {}).then(res => {
-		res.json().then(feed => {
+	fetch(`/api/fetch-rss?url=${props.url}`, {}).then((res) => {
+		res.json().then((feed) => {
 			if (props.shuffle) {
 				shuffle(feed.items);
 			}
@@ -56,17 +67,18 @@ useInterval(tick, Math.max(5000, props.refreshIntervalSec * 1000), {
 </script>
 
 <style lang="scss" scoped>
-.change-enter-active, .change-leave-active {
+.change-enter-active,
+.change-leave-active {
 	position: absolute;
 	top: 0;
-  transition: all 1s ease;
+	transition: all 1s ease;
 }
 .change-enter-from {
-  opacity: 0;
+	opacity: 0;
 	transform: translateY(-100%);
 }
 .change-leave-to {
-  opacity: 0;
+	opacity: 0;
 	transform: translateY(100%);
 }
 
diff --git a/packages/client/src/ui/_common_/statusbar-user-list.vue b/packages/client/src/ui/_common_/statusbar-user-list.vue
index 094ab421c2..f32b7f8090 100644
--- a/packages/client/src/ui/_common_/statusbar-user-list.vue
+++ b/packages/client/src/ui/_common_/statusbar-user-list.vue
@@ -1,36 +1,50 @@
 <template>
-<span v-if="!fetching" class="osdsvwzy">
-	<template v-if="display === 'marquee'">
-		<transition name="change" mode="default">
-			<MarqueeText :key="key" :duration="marqueeDuration" :reverse="marqueeReverse">
-				<span v-for="note in notes" :key="note.id" class="item">
-					<img class="avatar" :src="note.user.avatarUrl" decoding="async"/>
-					<MkA class="text" :to="notePage(note)">
-						<Mfm class="text" :text="getNoteSummary(note)" :plain="true" :nowrap="true" :custom-emojis="note.emojis"/>
-					</MkA>
-					<span class="divider"></span>
-				</span>
-			</MarqueeText>
-		</transition>
-	</template>
-	<template v-else-if="display === 'oneByOne'">
-		<!-- TODO -->
-	</template>
-</span>
+	<span v-if="!fetching" class="osdsvwzy">
+		<template v-if="display === 'marquee'">
+			<transition name="change" mode="default">
+				<MarqueeText
+					:key="key"
+					:duration="marqueeDuration"
+					:reverse="marqueeReverse"
+				>
+					<span v-for="note in notes" :key="note.id" class="item">
+						<img
+							class="avatar"
+							:src="note.user.avatarUrl"
+							decoding="async"
+						/>
+						<MkA class="text" :to="notePage(note)">
+							<Mfm
+								class="text"
+								:text="getNoteSummary(note)"
+								:plain="true"
+								:nowrap="true"
+								:custom-emojis="note.emojis"
+							/>
+						</MkA>
+						<span class="divider"></span>
+					</span>
+				</MarqueeText>
+			</transition>
+		</template>
+		<template v-else-if="display === 'oneByOne'">
+			<!-- TODO -->
+		</template>
+	</span>
 </template>
 
 <script lang="ts" setup>
-import { computed, defineAsyncComponent, ref, toRef, watch } from 'vue';
-import * as misskey from 'calckey-js';
-import MarqueeText from '@/components/MkMarquee.vue';
-import * as os from '@/os';
-import { useInterval } from '@/scripts/use-interval';
-import { getNoteSummary } from '@/scripts/get-note-summary';
-import { notePage } from '@/filters/note';
+import { computed, defineAsyncComponent, ref, toRef, watch } from "vue";
+import * as misskey from "calckey-js";
+import MarqueeText from "@/components/MkMarquee.vue";
+import * as os from "@/os";
+import { useInterval } from "@/scripts/use-interval";
+import { getNoteSummary } from "@/scripts/get-note-summary";
+import { notePage } from "@/filters/note";
 
 const props = defineProps<{
 	userListId?: string;
-	display?: 'marquee' | 'oneByOne';
+	display?: "marquee" | "oneByOne";
 	marqueeDuration?: number;
 	marqueeReverse?: boolean;
 	oneByOneInterval?: number;
@@ -43,9 +57,9 @@ let key = $ref(0);
 
 const tick = () => {
 	if (props.userListId == null) return;
-	os.api('notes/user-list-timeline', {
+	os.api("notes/user-list-timeline", {
 		listId: props.userListId,
-	}).then(res => {
+	}).then((res) => {
 		notes.value = res;
 		fetching.value = false;
 		key++;
@@ -61,17 +75,18 @@ useInterval(tick, Math.max(5000, props.refreshIntervalSec * 1000), {
 </script>
 
 <style lang="scss" scoped>
-.change-enter-active, .change-leave-active {
+.change-enter-active,
+.change-leave-active {
 	position: absolute;
 	top: 0;
-  transition: all 1s ease;
+	transition: all 1s ease;
 }
 .change-enter-from {
-  opacity: 0;
+	opacity: 0;
 	transform: translateY(-100%);
 }
 .change-leave-to {
-  opacity: 0;
+	opacity: 0;
 	transform: translateY(100%);
 }
 
diff --git a/packages/client/src/ui/_common_/statusbars.vue b/packages/client/src/ui/_common_/statusbars.vue
index 114ca5be8c..bef61317e9 100644
--- a/packages/client/src/ui/_common_/statusbars.vue
+++ b/packages/client/src/ui/_common_/statusbars.vue
@@ -1,29 +1,64 @@
 <template>
-<div class="dlrsnxqu">
-	<div
-		v-for="x in defaultStore.reactiveState.statusbars.value" :key="x.id" class="item" :class="[{ black: x.black }, {
-			verySmall: x.size === 'verySmall',
-			small: x.size === 'small',
-			medium: x.size === 'medium',
-			large: x.size === 'large',
-			veryLarge: x.size === 'veryLarge',
-		}]"
-	>
-		<span class="name">{{ x.name }}</span>
-		<XRss v-if="x.type === 'rss'" class="body" :refresh-interval-sec="x.props.refreshIntervalSec" :marquee-duration="x.props.marqueeDuration" :marquee-reverse="x.props.marqueeReverse" :display="x.props.display" :url="x.props.url" :shuffle="x.props.shuffle"/>
-		<XFederation v-else-if="x.type === 'federation'" class="body" :refresh-interval-sec="x.props.refreshIntervalSec" :marquee-duration="x.props.marqueeDuration" :marquee-reverse="x.props.marqueeReverse" :display="x.props.display" :colored="x.props.colored"/>
-		<XUserList v-else-if="x.type === 'userList'" class="body" :refresh-interval-sec="x.props.refreshIntervalSec" :marquee-duration="x.props.marqueeDuration" :marquee-reverse="x.props.marqueeReverse" :display="x.props.display" :user-list-id="x.props.userListId"/>
+	<div class="dlrsnxqu">
+		<div
+			v-for="x in defaultStore.reactiveState.statusbars.value"
+			:key="x.id"
+			class="item"
+			:class="[
+				{ black: x.black },
+				{
+					verySmall: x.size === 'verySmall',
+					small: x.size === 'small',
+					medium: x.size === 'medium',
+					large: x.size === 'large',
+					veryLarge: x.size === 'veryLarge',
+				},
+			]"
+		>
+			<span class="name">{{ x.name }}</span>
+			<XRss
+				v-if="x.type === 'rss'"
+				class="body"
+				:refresh-interval-sec="x.props.refreshIntervalSec"
+				:marquee-duration="x.props.marqueeDuration"
+				:marquee-reverse="x.props.marqueeReverse"
+				:display="x.props.display"
+				:url="x.props.url"
+				:shuffle="x.props.shuffle"
+			/>
+			<XFederation
+				v-else-if="x.type === 'federation'"
+				class="body"
+				:refresh-interval-sec="x.props.refreshIntervalSec"
+				:marquee-duration="x.props.marqueeDuration"
+				:marquee-reverse="x.props.marqueeReverse"
+				:display="x.props.display"
+				:colored="x.props.colored"
+			/>
+			<XUserList
+				v-else-if="x.type === 'userList'"
+				class="body"
+				:refresh-interval-sec="x.props.refreshIntervalSec"
+				:marquee-duration="x.props.marqueeDuration"
+				:marquee-reverse="x.props.marqueeReverse"
+				:display="x.props.display"
+				:user-list-id="x.props.userListId"
+			/>
+		</div>
 	</div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { computed, defineAsyncComponent, ref, toRef, watch } from 'vue';
-import * as os from '@/os';
-import { defaultStore } from '@/store';
-const XRss = defineAsyncComponent(() => import('./statusbar-rss.vue'));
-const XFederation = defineAsyncComponent(() => import('./statusbar-federation.vue'));
-const XUserList = defineAsyncComponent(() => import('./statusbar-user-list.vue'));
+import { computed, defineAsyncComponent, ref, toRef, watch } from "vue";
+import * as os from "@/os";
+import { defaultStore } from "@/store";
+const XRss = defineAsyncComponent(() => import("./statusbar-rss.vue"));
+const XFederation = defineAsyncComponent(
+	() => import("./statusbar-federation.vue")
+);
+const XUserList = defineAsyncComponent(
+	() => import("./statusbar-user-list.vue")
+);
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/ui/_common_/stream-indicator.vue b/packages/client/src/ui/_common_/stream-indicator.vue
index a855de8ab9..a3d06295cf 100644
--- a/packages/client/src/ui/_common_/stream-indicator.vue
+++ b/packages/client/src/ui/_common_/stream-indicator.vue
@@ -1,17 +1,26 @@
 <template>
-<div v-if="hasDisconnected && $store.state.serverDisconnectedBehavior === 'quiet'" class="nsbbhtug" @click="resetDisconnected">
-	<div>{{ i18n.ts.disconnectedFromServer }}</div>
-	<div class="command">
-		<button class="_textButton" @click="reload">{{ i18n.ts.reload }}</button>
-		<button class="_textButton">{{ i18n.ts.doNothing }}</button>
+	<div
+		v-if="
+			hasDisconnected &&
+			$store.state.serverDisconnectedBehavior === 'quiet'
+		"
+		class="nsbbhtug"
+		@click="resetDisconnected"
+	>
+		<div>{{ i18n.ts.disconnectedFromServer }}</div>
+		<div class="command">
+			<button class="_textButton" @click="reload">
+				{{ i18n.ts.reload }}
+			</button>
+			<button class="_textButton">{{ i18n.ts.doNothing }}</button>
+		</div>
 	</div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { onUnmounted } from 'vue';
-import { stream } from '@/stream';
-import { i18n } from '@/i18n';
+import { onUnmounted } from "vue";
+import { stream } from "@/stream";
+import { i18n } from "@/i18n";
 
 let hasDisconnected = $ref(false);
 
@@ -27,10 +36,10 @@ function reload() {
 	location.reload();
 }
 
-stream.on('_disconnected_', onDisconnected);
+stream.on("_disconnected_", onDisconnected);
 
 onUnmounted(() => {
-	stream.off('_disconnected_', onDisconnected);
+	stream.off("_disconnected_", onDisconnected);
 });
 </script>
 
diff --git a/packages/client/src/ui/_common_/upload.vue b/packages/client/src/ui/_common_/upload.vue
index 6c7787f990..272b81ba18 100644
--- a/packages/client/src/ui/_common_/upload.vue
+++ b/packages/client/src/ui/_common_/upload.vue
@@ -1,29 +1,67 @@
 <template>
-<div class="mk-uploader _acrylic" :style="{ zIndex }">
-	<ol v-if="uploads.length > 0">
-		<li v-for="ctx in uploads" :key="ctx.id">
-			<div class="img" :style="{ backgroundImage: `url(${ ctx.img })` }"></div>
-			<div class="top">
-				<p class="name"><i class="ph-circle-notch ph-bold ph-lg fa-pulse"></i>{{ ctx.name }}</p>
-				<p class="status">
-					<span v-if="ctx.progressValue === undefined" class="initing">{{ i18n.ts.waiting }}<MkEllipsis/></span>
-					<span v-if="ctx.progressValue !== undefined" class="kb">{{ String(Math.floor(ctx.progressValue / 1024)).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,') }}<i>KB</i> / {{ String(Math.floor(ctx.progressMax / 1024)).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,') }}<i>KB</i></span>
-					<span v-if="ctx.progressValue !== undefined" class="percentage">{{ Math.floor((ctx.progressValue / ctx.progressMax) * 100) }}</span>
-				</p>
-			</div>
-			<progress :value="ctx.progressValue || 0" :max="ctx.progressMax || 0" :class="{ initing: ctx.progressValue === undefined, waiting: ctx.progressValue !== undefined && ctx.progressValue === ctx.progressMax }"></progress>
-		</li>
-	</ol>
-</div>
+	<div class="mk-uploader _acrylic" :style="{ zIndex }">
+		<ol v-if="uploads.length > 0">
+			<li v-for="ctx in uploads" :key="ctx.id">
+				<div
+					class="img"
+					:style="{ backgroundImage: `url(${ctx.img})` }"
+				></div>
+				<div class="top">
+					<p class="name">
+						<i class="ph-circle-notch ph-bold ph-lg fa-pulse"></i
+						>{{ ctx.name }}
+					</p>
+					<p class="status">
+						<span
+							v-if="ctx.progressValue === undefined"
+							class="initing"
+							>{{ i18n.ts.waiting }}<MkEllipsis
+						/></span>
+						<span v-if="ctx.progressValue !== undefined" class="kb"
+							>{{
+								String(
+									Math.floor(ctx.progressValue / 1024)
+								).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,")
+							}}<i>KB</i> /
+							{{
+								String(
+									Math.floor(ctx.progressMax / 1024)
+								).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,")
+							}}<i>KB</i></span
+						>
+						<span
+							v-if="ctx.progressValue !== undefined"
+							class="percentage"
+							>{{
+								Math.floor(
+									(ctx.progressValue / ctx.progressMax) * 100
+								)
+							}}</span
+						>
+					</p>
+				</div>
+				<progress
+					:value="ctx.progressValue || 0"
+					:max="ctx.progressMax || 0"
+					:class="{
+						initing: ctx.progressValue === undefined,
+						waiting:
+							ctx.progressValue !== undefined &&
+							ctx.progressValue === ctx.progressMax,
+					}"
+				></progress>
+			</li>
+		</ol>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import * as os from '@/os';
-import { uploads } from '@/scripts/upload';
-import { i18n } from '@/i18n';
+import {} from "vue";
+import * as os from "@/os";
+import { uploads } from "@/scripts/upload";
+import { i18n } from "@/i18n";
 
-const zIndex = os.claimZIndex('high');
+const zIndex = os.claimZIndex("high");
 </script>
 
 <style lang="scss" scoped>
@@ -38,92 +76,92 @@ const zIndex = os.claimZIndex('high');
 	border-radius: 8px;
 }
 .mk-uploader:empty {
-  display: none;
+	display: none;
 }
 .mk-uploader > ol {
-  display: block;
-  margin: 0;
-  padding: 0;
-  list-style: none;
+	display: block;
+	margin: 0;
+	padding: 0;
+	list-style: none;
 }
 .mk-uploader > ol > li {
-  display: grid;
-  margin: 8px 0 0 0;
-  padding: 0;
-  height: 36px;
-  width: 100%;
-  border-top: solid 8px transparent;
-  grid-template-columns: 36px calc(100% - 44px);
-  grid-template-rows: 1fr 8px;
-  column-gap: 8px;
-  box-sizing: content-box;
+	display: grid;
+	margin: 8px 0 0 0;
+	padding: 0;
+	height: 36px;
+	width: 100%;
+	border-top: solid 8px transparent;
+	grid-template-columns: 36px calc(100% - 44px);
+	grid-template-rows: 1fr 8px;
+	column-gap: 8px;
+	box-sizing: content-box;
 }
 .mk-uploader > ol > li:first-child {
-  margin: 0;
-  box-shadow: none;
-  border-top: none;
+	margin: 0;
+	box-shadow: none;
+	border-top: none;
 }
 .mk-uploader > ol > li > .img {
-  display: block;
-  background-size: cover;
-  background-position: center center;
-  grid-column: 1/2;
-  grid-row: 1/3;
+	display: block;
+	background-size: cover;
+	background-position: center center;
+	grid-column: 1/2;
+	grid-row: 1/3;
 }
 .mk-uploader > ol > li > .top {
-  display: flex;
-  grid-column: 2/3;
-  grid-row: 1/2;
+	display: flex;
+	grid-column: 2/3;
+	grid-row: 1/2;
 }
 .mk-uploader > ol > li > .top > .name {
-  display: block;
-  padding: 0 8px 0 0;
-  margin: 0;
-  font-size: 0.8em;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  flex-shrink: 1;
+	display: block;
+	padding: 0 8px 0 0;
+	margin: 0;
+	font-size: 0.8em;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	overflow: hidden;
+	flex-shrink: 1;
 }
 .mk-uploader > ol > li > .top > .name > i {
-  margin-right: 4px;
+	margin-right: 4px;
 }
 .mk-uploader > ol > li > .top > .status {
-  display: block;
-  margin: 0 0 0 auto;
-  padding: 0;
-  font-size: 0.8em;
-  flex-shrink: 0;
+	display: block;
+	margin: 0 0 0 auto;
+	padding: 0;
+	font-size: 0.8em;
+	flex-shrink: 0;
 }
 .mk-uploader > ol > li > .top > .status > .initing {
 }
 .mk-uploader > ol > li > .top > .status > .kb {
 }
 .mk-uploader > ol > li > .top > .status > .percentage {
-  display: inline-block;
-  width: 48px;
-  text-align: right;
+	display: inline-block;
+	width: 48px;
+	text-align: right;
 }
 .mk-uploader > ol > li > .top > .status > .percentage:after {
-  content: '%';
+	content: "%";
 }
 .mk-uploader > ol > li > progress {
-  display: block;
-  background: transparent;
-  border: none;
-  border-radius: 4px;
-  overflow: hidden;
-  grid-column: 2/3;
-  grid-row: 2/3;
-  z-index: 2;
+	display: block;
+	background: transparent;
+	border: none;
+	border-radius: 4px;
+	overflow: hidden;
+	grid-column: 2/3;
+	grid-row: 2/3;
+	z-index: 2;
 	width: 100%;
 	height: 8px;
 }
 .mk-uploader > ol > li > progress::-webkit-progress-value {
-  background: var(--accent);
+	background: var(--accent);
 }
 .mk-uploader > ol > li > progress::-webkit-progress-bar {
-  //background: var(--accentAlpha01);
+	//background: var(--accentAlpha01);
 	background: transparent;
 }
 </style>
diff --git a/packages/client/src/ui/classic.header.vue b/packages/client/src/ui/classic.header.vue
index 38579678de..5c3e6b7021 100644
--- a/packages/client/src/ui/classic.header.vue
+++ b/packages/client/src/ui/classic.header.vue
@@ -1,52 +1,109 @@
 <template>
-<div class="azykntjl">
-	<div class="body">
-		<div class="left">
-			<MkA v-click-anime v-tooltip="i18n.ts.timeline" class="item index" active-class="active" to="/" exact>
-				<i class="ph-house ph-bold ph-lg ph-fw ph-lg"></i>
-			</MkA>
-			<template v-for="item in menu">
-				<div v-if="item === '-'" class="divider"></div>
-				<component :is="navbarItemDef[item].to ? 'MkA' : 'button'" v-else-if="navbarItemDef[item] && (navbarItemDef[item].show !== false)" v-click-anime v-tooltip="$ts[navbarItemDef[item].title]" class="item _button" :class="item" active-class="active" :to="navbarItemDef[item].to" v-on="navbarItemDef[item].action ? { click: navbarItemDef[item].action } : {}">
-					<i class="ph-fw ph-lg" :class="navbarItemDef[item].icon"></i>
-					<span v-if="navbarItemDef[item].indicated" class="indicator"><i class="ph-circle ph-fill"></i></span>
-				</component>
-			</template>
-			<div class="divider"></div>
-			<MkA v-if="$i.isAdmin || $i.isModerator" v-click-anime v-tooltip="i18n.ts.controlPanel" class="item" active-class="active" to="/admin" :behavior="settingsWindowed ? 'modalWindow' : null">
-				<i class="ph-door ph-bold ph-lg ph-fw ph-lg"></i>
-			</MkA>
-			<button v-click-anime class="item _button" @click="more">
-				<i class="ph-dots-three-outline ph-bold ph-lg ph-fw ph-lg"></i>
-				<span v-if="otherNavItemIndicated" class="indicator"><i class="ph-circle ph-fill"></i></span>
-			</button>
-		</div>
-		<div class="right">
-			<MkA v-click-anime v-tooltip="i18n.ts.settings" class="item" active-class="active" to="/settings" :behavior="settingsWindowed ? 'modalWindow' : null">
-				<i class="ph-gear-six ph-bold ph-lg ph-fw ph-lg"></i>
-			</MkA>
-			<button v-click-anime class="item _button account" @click="openAccountMenu">
-				<MkAvatar :user="$i" class="avatar"/><MkAcct class="acct" :user="$i"/>
-			</button>
-			<div class="post" @click="post">
-				<MkButton class="button" gradate full rounded>
-					<i class="ph-pencil ph-bold ph-lg ph-fw ph-lg"></i>
-				</MkButton>
+	<div class="azykntjl">
+		<div class="body">
+			<div class="left">
+				<MkA
+					v-click-anime
+					v-tooltip="i18n.ts.timeline"
+					class="item index"
+					active-class="active"
+					to="/"
+					exact
+				>
+					<i class="ph-house ph-bold ph-lg ph-fw ph-lg"></i>
+				</MkA>
+				<template v-for="item in menu">
+					<div v-if="item === '-'" class="divider"></div>
+					<component
+						:is="navbarItemDef[item].to ? 'MkA' : 'button'"
+						v-else-if="
+							navbarItemDef[item] &&
+							navbarItemDef[item].show !== false
+						"
+						v-click-anime
+						v-tooltip="$ts[navbarItemDef[item].title]"
+						class="item _button"
+						:class="item"
+						active-class="active"
+						:to="navbarItemDef[item].to"
+						v-on="
+							navbarItemDef[item].action
+								? { click: navbarItemDef[item].action }
+								: {}
+						"
+					>
+						<i
+							class="ph-fw ph-lg"
+							:class="navbarItemDef[item].icon"
+						></i>
+						<span
+							v-if="navbarItemDef[item].indicated"
+							class="indicator"
+							><i class="ph-circle ph-fill"></i
+						></span>
+					</component>
+				</template>
+				<div class="divider"></div>
+				<MkA
+					v-if="$i.isAdmin || $i.isModerator"
+					v-click-anime
+					v-tooltip="i18n.ts.controlPanel"
+					class="item"
+					active-class="active"
+					to="/admin"
+					:behavior="settingsWindowed ? 'modalWindow' : null"
+				>
+					<i class="ph-door ph-bold ph-lg ph-fw ph-lg"></i>
+				</MkA>
+				<button v-click-anime class="item _button" @click="more">
+					<i
+						class="ph-dots-three-outline ph-bold ph-lg ph-fw ph-lg"
+					></i>
+					<span v-if="otherNavItemIndicated" class="indicator"
+						><i class="ph-circle ph-fill"></i
+					></span>
+				</button>
+			</div>
+			<div class="right">
+				<MkA
+					v-click-anime
+					v-tooltip="i18n.ts.settings"
+					class="item"
+					active-class="active"
+					to="/settings"
+					:behavior="settingsWindowed ? 'modalWindow' : null"
+				>
+					<i class="ph-gear-six ph-bold ph-lg ph-fw ph-lg"></i>
+				</MkA>
+				<button
+					v-click-anime
+					class="item _button account"
+					@click="openAccountMenu"
+				>
+					<MkAvatar :user="$i" class="avatar" /><MkAcct
+						class="acct"
+						:user="$i"
+					/>
+				</button>
+				<div class="post" @click="post">
+					<MkButton class="button" gradate full rounded>
+						<i class="ph-pencil ph-bold ph-lg ph-fw ph-lg"></i>
+					</MkButton>
+				</div>
 			</div>
 		</div>
 	</div>
-</div>
 </template>
 
 <script lang="ts">
-import { defineAsyncComponent, defineComponent } from 'vue';
-import { host } from '@/config';
-import { search } from '@/scripts/search';
-import * as os from '@/os';
-import { navbarItemDef } from '@/navbar';
-import { openAccountMenu } from '@/account';
-import MkButton from '@/components/MkButton.vue';
-import { i18n } from '@/i18n';
+import { defineAsyncComponent, defineComponent } from "vue";
+import { host } from "@/config";
+import { search } from "@/scripts/search";
+import * as os from "@/os";
+import { navbarItemDef } from "@/navbar";
+import { openAccountMenu } from "@/account";
+import MkButton from "@/components/MkButton.vue";
+import { i18n } from "@/i18n";
 
 export default defineComponent({
 	components: {
@@ -79,19 +136,19 @@ export default defineComponent({
 	},
 
 	watch: {
-		'$store.reactiveState.menuDisplay.value'() {
+		"$store.reactiveState.menuDisplay.value"() {
 			this.calcViewState();
 		},
 	},
 
 	created() {
-		window.addEventListener('resize', this.calcViewState);
+		window.addEventListener("resize", this.calcViewState);
 		this.calcViewState();
 	},
 
 	methods: {
 		calcViewState() {
-			this.settingsWindowed = (window.innerWidth > 1400);
+			this.settingsWindowed = window.innerWidth > 1400;
 		},
 
 		post() {
@@ -103,17 +160,26 @@ export default defineComponent({
 		},
 
 		more(ev) {
-			os.popup(defineAsyncComponent(() => import('@/components/MkLaunchPad.vue')), {
-				src: ev.currentTarget ?? ev.target,
-				anchor: { x: 'center', y: 'bottom' },
-			}, {
-			}, 'closed');
+			os.popup(
+				defineAsyncComponent(
+					() => import("@/components/MkLaunchPad.vue")
+				),
+				{
+					src: ev.currentTarget ?? ev.target,
+					anchor: { x: "center", y: "bottom" },
+				},
+				{},
+				"closed"
+			);
 		},
 
 		openAccountMenu: (ev) => {
-			openAccountMenu({
-				withExtraOperation: true,
-			}, ev);
+			openAccountMenu(
+				{
+					withExtraOperation: true,
+				},
+				ev
+			);
 		},
 	},
 });
@@ -139,7 +205,6 @@ export default defineComponent({
 
 		> .right,
 		> .left {
-
 			> .item {
 				position: relative;
 				font-size: 0.9em;
@@ -190,7 +255,7 @@ export default defineComponent({
 
 			> .post {
 				display: inline-block;
-			
+
 				> .button {
 					width: 40px;
 					height: 40px;
diff --git a/packages/client/src/ui/classic.sidebar.vue b/packages/client/src/ui/classic.sidebar.vue
index 62a4a4b1b4..b70a3c984b 100644
--- a/packages/client/src/ui/classic.sidebar.vue
+++ b/packages/client/src/ui/classic.sidebar.vue
@@ -1,56 +1,114 @@
 <template>
-<div class="npcljfve" :class="{ iconOnly }">
-	<button v-click-anime class="item _button account" @click="openAccountMenu">
-		<MkAvatar :user="$i" class="avatar"/><MkAcct class="text" :user="$i"/>
-	</button>
-	<div class="post" data-cy-open-post-form @click="post">
-		<MkButton class="button" gradate full rounded>
-			<i class="ph-pencil ph-bold ph-lg ph-fw ph-lg"></i><span v-if="!iconOnly" class="text">{{ i18n.ts.note }}</span>
-		</MkButton>
-	</div>
-	<div class="divider"></div>
-	<MkA v-click-anime class="item index" active-class="active" to="/" exact>
-		<i class="ph-house ph-bold ph-lg ph-fw ph-lg"></i><span class="text">{{ i18n.ts.timeline }}</span>
-	</MkA>
-	<template v-for="item in menu">
-		<div v-if="item === '-'" class="divider"></div>
-		<component :is="navbarItemDef[item].to ? 'MkA' : 'button'" v-else-if="navbarItemDef[item] && (navbarItemDef[item].show !== false)" v-click-anime class="item _button" :class="item" active-class="active" :to="navbarItemDef[item].to" v-on="navbarItemDef[item].action ? { click: navbarItemDef[item].action } : {}">
-			<i class="ph-fw ph-lg" :class="navbarItemDef[item].icon"></i><span class="text">{{ $ts[navbarItemDef[item].title] }}</span>
-			<span v-if="navbarItemDef[item].indicated" class="indicator"><i class="ph-circle ph-fill"></i></span>
-		</component>
-	</template>
-	<div class="divider"></div>
-	<MkA v-if="$i.isAdmin || $i.isModerator" v-click-anime class="item" active-class="active" to="/admin" :behavior="settingsWindowed ? 'modalWindow' : null">
-		<i class="ph-door ph-bold ph-lg ph-fw ph-lg"></i><span class="text">{{ i18n.ts.controlPanel }}</span>
-	</MkA>
-	<button v-click-anime class="item _button" @click="more">
-		<i class="ph-dots-three-outline ph-bold ph-lg ph-fw ph-lg"></i><span class="text">{{ i18n.ts.more }}</span>
-		<span v-if="otherNavItemIndicated" class="indicator"><i class="ph-circle ph-fill"></i></span>
-	</button>
-	<MkA v-click-anime class="item" active-class="active" to="/settings" :behavior="settingsWindowed ? 'modalWindow' : null">
-		<i class="ph-gear-six ph-bold ph-lg ph-fw ph-lg"></i><span class="text">{{ i18n.ts.settings }}</span>
-	</MkA>
-	<div class="divider"></div>
-	<div class="about">
-		<MkA v-click-anime class="link" @click="openInstanceMenu">
-			<img :src="$instance.iconUrl || $instance.faviconUrl || '/favicon.ico'" class="_ghost"/>
+	<div class="npcljfve" :class="{ iconOnly }">
+		<button
+			v-click-anime
+			class="item _button account"
+			@click="openAccountMenu"
+		>
+			<MkAvatar :user="$i" class="avatar" /><MkAcct
+				class="text"
+				:user="$i"
+			/>
+		</button>
+		<div class="post" data-cy-open-post-form @click="post">
+			<MkButton class="button" gradate full rounded>
+				<i class="ph-pencil ph-bold ph-lg ph-fw ph-lg"></i
+				><span v-if="!iconOnly" class="text">{{ i18n.ts.note }}</span>
+			</MkButton>
+		</div>
+		<div class="divider"></div>
+		<MkA
+			v-click-anime
+			class="item index"
+			active-class="active"
+			to="/"
+			exact
+		>
+			<i class="ph-house ph-bold ph-lg ph-fw ph-lg"></i
+			><span class="text">{{ i18n.ts.timeline }}</span>
 		</MkA>
+		<template v-for="item in menu">
+			<div v-if="item === '-'" class="divider"></div>
+			<component
+				:is="navbarItemDef[item].to ? 'MkA' : 'button'"
+				v-else-if="
+					navbarItemDef[item] && navbarItemDef[item].show !== false
+				"
+				v-click-anime
+				class="item _button"
+				:class="item"
+				active-class="active"
+				:to="navbarItemDef[item].to"
+				v-on="
+					navbarItemDef[item].action
+						? { click: navbarItemDef[item].action }
+						: {}
+				"
+			>
+				<i class="ph-fw ph-lg" :class="navbarItemDef[item].icon"></i
+				><span class="text">{{ $ts[navbarItemDef[item].title] }}</span>
+				<span v-if="navbarItemDef[item].indicated" class="indicator"
+					><i class="ph-circle ph-fill"></i
+				></span>
+			</component>
+		</template>
+		<div class="divider"></div>
+		<MkA
+			v-if="$i.isAdmin || $i.isModerator"
+			v-click-anime
+			class="item"
+			active-class="active"
+			to="/admin"
+			:behavior="settingsWindowed ? 'modalWindow' : null"
+		>
+			<i class="ph-door ph-bold ph-lg ph-fw ph-lg"></i
+			><span class="text">{{ i18n.ts.controlPanel }}</span>
+		</MkA>
+		<button v-click-anime class="item _button" @click="more">
+			<i class="ph-dots-three-outline ph-bold ph-lg ph-fw ph-lg"></i
+			><span class="text">{{ i18n.ts.more }}</span>
+			<span v-if="otherNavItemIndicated" class="indicator"
+				><i class="ph-circle ph-fill"></i
+			></span>
+		</button>
+		<MkA
+			v-click-anime
+			class="item"
+			active-class="active"
+			to="/settings"
+			:behavior="settingsWindowed ? 'modalWindow' : null"
+		>
+			<i class="ph-gear-six ph-bold ph-lg ph-fw ph-lg"></i
+			><span class="text">{{ i18n.ts.settings }}</span>
+		</MkA>
+		<div class="divider"></div>
+		<div class="about">
+			<MkA v-click-anime class="link" @click="openInstanceMenu">
+				<img
+					:src="
+						$instance.iconUrl ||
+						$instance.faviconUrl ||
+						'/favicon.ico'
+					"
+					class="_ghost"
+				/>
+			</MkA>
+		</div>
+		<!--<MisskeyLogo class="misskey"/>-->
 	</div>
-	<!--<MisskeyLogo class="misskey"/>-->
-</div>
 </template>
 
 <script lang="ts">
-import { defineAsyncComponent, defineComponent } from 'vue';
-import { host } from '@/config';
-import { search } from '@/scripts/search';
-import * as os from '@/os';
-import { navbarItemDef } from '@/navbar';
-import { openAccountMenu } from '@/account';
-import MkButton from '@/components/MkButton.vue';
-import { StickySidebar } from '@/scripts/sticky-sidebar';
+import { defineAsyncComponent, defineComponent } from "vue";
+import { host } from "@/config";
+import { search } from "@/scripts/search";
+import * as os from "@/os";
+import { navbarItemDef } from "@/navbar";
+import { openAccountMenu } from "@/account";
+import MkButton from "@/components/MkButton.vue";
+import { StickySidebar } from "@/scripts/sticky-sidebar";
 //import MisskeyLogo from '@assets/client/misskey.svg';
-import { i18n } from '@/i18n';
+import { i18n } from "@/i18n";
 
 export default defineComponent({
 	components: {
@@ -85,33 +143,39 @@ export default defineComponent({
 	},
 
 	watch: {
-		'$store.reactiveState.menuDisplay.value'() {
+		"$store.reactiveState.menuDisplay.value"() {
 			this.calcViewState();
 		},
 
 		iconOnly() {
 			this.$nextTick(() => {
-				this.$emit('change-view-mode');
+				this.$emit("change-view-mode");
 			});
 		},
 	},
 
 	created() {
-		window.addEventListener('resize', this.calcViewState);
+		window.addEventListener("resize", this.calcViewState);
 		this.calcViewState();
 	},
 
 	mounted() {
 		const sticky = new StickySidebar(this.$el.parentElement, 16);
-		window.addEventListener('scroll', () => {
-			sticky.calc(window.scrollY);
-		}, { passive: true });
+		window.addEventListener(
+			"scroll",
+			() => {
+				sticky.calc(window.scrollY);
+			},
+			{ passive: true }
+		);
 	},
 
 	methods: {
 		calcViewState() {
-			this.iconOnly = (window.innerWidth <= 1400) || (this.$store.state.menuDisplay === 'sideIcon');
-			this.settingsWindowed = (window.innerWidth > 1400);
+			this.iconOnly =
+				window.innerWidth <= 1400 ||
+				this.$store.state.menuDisplay === "sideIcon";
+			this.settingsWindowed = window.innerWidth > 1400;
 		},
 
 		post() {
@@ -123,61 +187,90 @@ export default defineComponent({
 		},
 
 		more(ev) {
-			os.popup(defineAsyncComponent(() => import('@/components/MkLaunchPad.vue')), {
-				src: ev.currentTarget ?? ev.target,
-			}, {}, 'closed');
+			os.popup(
+				defineAsyncComponent(
+					() => import("@/components/MkLaunchPad.vue")
+				),
+				{
+					src: ev.currentTarget ?? ev.target,
+				},
+				{},
+				"closed"
+			);
 		},
 
 		openAccountMenu: (ev) => {
-			openAccountMenu({
-				withExtraOperation: true,
-			}, ev);
+			openAccountMenu(
+				{
+					withExtraOperation: true,
+				},
+				ev
+			);
 		},
 	},
 });
 
 function openInstanceMenu(ev: MouseEvent) {
-	os.popupMenu([{
-		text: instance.name ?? host,
-		type: 'label',
-	}, {
-		type: 'link',
-		text: i18n.ts.instanceInfo,
-		icon: 'ph-info ph-bold ph-lg',
-		to: '/about',
-	}, null, {
-		type: 'parent',
-		text: i18n.ts.help,
-		icon: 'ph-question ph-bold ph-lg',
-		children: [{
-			type: 'link',
-			to: '/mfm-cheat-sheet',
-			text: i18n.ts._mfm.cheatSheet,
-			icon: 'ph-code ph-bold ph-lg',
-		}, {
-			type: 'link',
-			to: '/scratchpad',
-			text: i18n.ts.scratchpad,
-			icon: 'ph-terminal-window ph-bold ph-lg',
-		}, {
-			type: 'link',
-			to: '/api-console',
-			text: 'API Console',
-			icon: 'ph-terminal-window ph-bold ph-lg',
-		}, null, {
-			text: i18n.ts.document,
-			icon: 'ph-question ph-bold ph-lg',
-			action: () => {
-				window.open('https://misskey-hub.net/help.html', '_blank');
+	os.popupMenu(
+		[
+			{
+				text: instance.name ?? host,
+				type: "label",
 			},
-		}],
-	}, {
-		type: 'link',
-		text: i18n.ts.aboutMisskey,
-		to: '/about-calckey',
-	}], ev.currentTarget ?? ev.target, {
-		align: 'left',
-	});
+			{
+				type: "link",
+				text: i18n.ts.instanceInfo,
+				icon: "ph-info ph-bold ph-lg",
+				to: "/about",
+			},
+			null,
+			{
+				type: "parent",
+				text: i18n.ts.help,
+				icon: "ph-question ph-bold ph-lg",
+				children: [
+					{
+						type: "link",
+						to: "/mfm-cheat-sheet",
+						text: i18n.ts._mfm.cheatSheet,
+						icon: "ph-code ph-bold ph-lg",
+					},
+					{
+						type: "link",
+						to: "/scratchpad",
+						text: i18n.ts.scratchpad,
+						icon: "ph-terminal-window ph-bold ph-lg",
+					},
+					{
+						type: "link",
+						to: "/api-console",
+						text: "API Console",
+						icon: "ph-terminal-window ph-bold ph-lg",
+					},
+					null,
+					{
+						text: i18n.ts.document,
+						icon: "ph-question ph-bold ph-lg",
+						action: () => {
+							window.open(
+								"https://misskey-hub.net/help.html",
+								"_blank"
+							);
+						},
+					},
+				],
+			},
+			{
+				type: "link",
+				text: i18n.ts.aboutMisskey,
+				to: "/about-calckey",
+			},
+		],
+		ev.currentTarget ?? ev.target,
+		{
+			align: "left",
+		}
+	);
 }
 </script>
 
diff --git a/packages/client/src/ui/classic.vue b/packages/client/src/ui/classic.vue
index 4992ae3c41..a721ffd0bd 100644
--- a/packages/client/src/ui/classic.vue
+++ b/packages/client/src/ui/classic.vue
@@ -1,58 +1,78 @@
 <template>
-<div class="gbhvwtnk" :class="{ wallpaper }" :style="`--globalHeaderHeight:${globalHeaderHeight}px`">
-	<XHeaderMenu v-if="showMenuOnTop" v-get-size="(w, h) => globalHeaderHeight = h"/>
+	<div
+		class="gbhvwtnk"
+		:class="{ wallpaper }"
+		:style="`--globalHeaderHeight:${globalHeaderHeight}px`"
+	>
+		<XHeaderMenu
+			v-if="showMenuOnTop"
+			v-get-size="(w, h) => (globalHeaderHeight = h)"
+		/>
 
-	<div class="columns" :class="{ fullView, withGlobalHeader: showMenuOnTop }">
-		<div v-if="!showMenuOnTop" class="sidebar">
-			<XSidebar/>
-		</div>
-		<div v-else ref="widgetsLeft" class="widgets left">
-			<XWidgets :place="'left'" @mounted="attachSticky(widgetsLeft)"/>
-		</div>
-
-		<main class="main" :style="{ background: pageMetadata?.value?.bg }" @contextmenu.stop="onContextmenu">
-			<div class="content">
-				<RouterView/>
-			</div>
-		</main>
-
-		<div v-if="isDesktop" ref="widgetsRight" class="widgets right">
-			<XWidgets :place="null" @mounted="attachSticky(widgetsRight)"/>
-		</div>
-	</div>
-
-	<transition :name="$store.state.animation ? 'tray-back' : ''">
 		<div
-			v-if="widgetsShowing"
-			class="tray-back _modalBg"
-			@click="widgetsShowing = false"
-			@touchstart.passive="widgetsShowing = false"
-		></div>
-	</transition>
+			class="columns"
+			:class="{ fullView, withGlobalHeader: showMenuOnTop }"
+		>
+			<div v-if="!showMenuOnTop" class="sidebar">
+				<XSidebar />
+			</div>
+			<div v-else ref="widgetsLeft" class="widgets left">
+				<XWidgets
+					:place="'left'"
+					@mounted="attachSticky(widgetsLeft)"
+				/>
+			</div>
 
-	<transition :name="$store.state.animation ? 'tray' : ''">
-		<XWidgets v-if="widgetsShowing" class="tray"/>
-	</transition>
+			<main
+				class="main"
+				:style="{ background: pageMetadata?.value?.bg }"
+				@contextmenu.stop="onContextmenu"
+			>
+				<div class="content">
+					<RouterView />
+				</div>
+			</main>
 
-	<XCommon/>
-</div>
+			<div v-if="isDesktop" ref="widgetsRight" class="widgets right">
+				<XWidgets :place="null" @mounted="attachSticky(widgetsRight)" />
+			</div>
+		</div>
+
+		<transition :name="$store.state.animation ? 'tray-back' : ''">
+			<div
+				v-if="widgetsShowing"
+				class="tray-back _modalBg"
+				@click="widgetsShowing = false"
+				@touchstart.passive="widgetsShowing = false"
+			></div>
+		</transition>
+
+		<transition :name="$store.state.animation ? 'tray' : ''">
+			<XWidgets v-if="widgetsShowing" class="tray" />
+		</transition>
+
+		<XCommon />
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent, markRaw, ref, onMounted, provide } from 'vue';
-import XSidebar from './classic.sidebar.vue';
-import XCommon from './_common_/common.vue';
-import type { ComputedRef } from 'vue';
-import type { PageMetadata } from '@/scripts/page-metadata';
-import { instanceName } from '@/config';
-import { StickySidebar } from '@/scripts/sticky-sidebar';
-import * as os from '@/os';
-import { mainRouter } from '@/router';
-import { provideMetadataReceiver, setPageMetadata } from '@/scripts/page-metadata';
-import { defaultStore } from '@/store';
-import { i18n } from '@/i18n';
-const XHeaderMenu = defineAsyncComponent(() => import('./classic.header.vue'));
-const XWidgets = defineAsyncComponent(() => import('./classic.widgets.vue'));
+import { defineAsyncComponent, markRaw, ref, onMounted, provide } from "vue";
+import XSidebar from "./classic.sidebar.vue";
+import XCommon from "./_common_/common.vue";
+import type { ComputedRef } from "vue";
+import type { PageMetadata } from "@/scripts/page-metadata";
+import { instanceName } from "@/config";
+import { StickySidebar } from "@/scripts/sticky-sidebar";
+import * as os from "@/os";
+import { mainRouter } from "@/router";
+import {
+	provideMetadataReceiver,
+	setPageMetadata,
+} from "@/scripts/page-metadata";
+import { defaultStore } from "@/store";
+import { i18n } from "@/i18n";
+const XHeaderMenu = defineAsyncComponent(() => import("./classic.header.vue"));
+const XWidgets = defineAsyncComponent(() => import("./classic.widgets.vue"));
 
 const DESKTOP_THRESHOLD = 1100;
 
@@ -62,86 +82,123 @@ let pageMetadata = $ref<null | ComputedRef<PageMetadata>>();
 let widgetsShowing = $ref(false);
 let fullView = $ref(false);
 let globalHeaderHeight = $ref(0);
-const wallpaper = localStorage.getItem('wallpaper') != null;
-const showMenuOnTop = $computed(() => defaultStore.state.menuDisplay === 'top');
+const wallpaper = localStorage.getItem("wallpaper") != null;
+const showMenuOnTop = $computed(() => defaultStore.state.menuDisplay === "top");
 let live2d = $ref<HTMLIFrameElement>();
 let widgetsLeft = $ref();
 let widgetsRight = $ref();
 
-provide('router', mainRouter);
+provide("router", mainRouter);
 provideMetadataReceiver((info) => {
 	pageMetadata = info;
 	if (pageMetadata.value) {
 		document.title = `${pageMetadata.value.title} | ${instanceName}`;
 	}
 });
-provide('shouldHeaderThin', showMenuOnTop);
-provide('shouldSpacerMin', true);
+provide("shouldHeaderThin", showMenuOnTop);
+provide("shouldSpacerMin", true);
 
 function attachSticky(el) {
-	const sticky = new StickySidebar(el, defaultStore.state.menuDisplay === 'top' ? 0 : 16, defaultStore.state.menuDisplay === 'top' ? 60 : 0); // TODO: ヘッダーの高さを60pxと決め打ちしているのを直す
-	window.addEventListener('scroll', () => {
-		sticky.calc(window.scrollY);
-	}, { passive: true });
+	const sticky = new StickySidebar(
+		el,
+		defaultStore.state.menuDisplay === "top" ? 0 : 16,
+		defaultStore.state.menuDisplay === "top" ? 60 : 0
+	); // TODO: ヘッダーの高さを60pxと決め打ちしているのを直す
+	window.addEventListener(
+		"scroll",
+		() => {
+			sticky.calc(window.scrollY);
+		},
+		{ passive: true }
+	);
 }
 
 function top() {
-	window.scroll({ top: 0, behavior: 'smooth' });
+	window.scroll({ top: 0, behavior: "smooth" });
 }
 
 function onContextmenu(ev: MouseEvent) {
 	const isLink = (el: HTMLElement) => {
-		if (el.tagName === 'A') return true;
+		if (el.tagName === "A") return true;
 		if (el.parentElement) {
 			return isLink(el.parentElement);
 		}
 	};
 	if (isLink(ev.target)) return;
-	if (['INPUT', 'TEXTAREA', 'IMG', 'VIDEO', 'CANVAS'].includes(ev.target.tagName) || ev.target.attributes['contenteditable']) return;
-	if (window.getSelection().toString() !== '') return;
+	if (
+		["INPUT", "TEXTAREA", "IMG", "VIDEO", "CANVAS"].includes(
+			ev.target.tagName
+		) ||
+		ev.target.attributes["contenteditable"]
+	)
+		return;
+	if (window.getSelection().toString() !== "") return;
 	const path = mainRouter.getCurrentPath();
-	os.contextMenu([{
-		type: 'label',
-		text: path,
-	}, {
-		icon: fullView ? 'ph-arrows-in-simple ph-bold ph-lg' : 'ph-arrows-out-simple ph-bold ph-lg',
-		text: fullView ? i18n.ts.quitFullView : i18n.ts.fullView,
-		action: () => {
-			fullView = !fullView;
-		},
-	}, {
-		icon: 'ph-browser ph-bold ph-lg',
-		text: i18n.ts.openInWindow,
-		action: () => {
-			os.pageWindow(path);
-		},
-	}], ev);
+	os.contextMenu(
+		[
+			{
+				type: "label",
+				text: path,
+			},
+			{
+				icon: fullView
+					? "ph-arrows-in-simple ph-bold ph-lg"
+					: "ph-arrows-out-simple ph-bold ph-lg",
+				text: fullView ? i18n.ts.quitFullView : i18n.ts.fullView,
+				action: () => {
+					fullView = !fullView;
+				},
+			},
+			{
+				icon: "ph-browser ph-bold ph-lg",
+				text: i18n.ts.openInWindow,
+				action: () => {
+					os.pageWindow(path);
+				},
+			},
+		],
+		ev
+	);
 }
 
 if (window.innerWidth < 1024) {
-	localStorage.setItem('ui', 'default');
+	localStorage.setItem("ui", "default");
 	location.reload();
 }
 
-document.documentElement.style.overflowY = 'scroll';
+document.documentElement.style.overflowY = "scroll";
 
 if (defaultStore.state.widgets.length === 0) {
-	defaultStore.set('widgets', [{
-		name: 'calendar',
-		id: 'a', place: null, data: {},
-	}, {
-		name: 'notifications',
-		id: 'b', place: null, data: {},
-	}, {
-		name: 'trends',
-		id: 'c', place: null, data: {},
-	}]);
+	defaultStore.set("widgets", [
+		{
+			name: "calendar",
+			id: "a",
+			place: null,
+			data: {},
+		},
+		{
+			name: "notifications",
+			id: "b",
+			place: null,
+			data: {},
+		},
+		{
+			name: "trends",
+			id: "c",
+			place: null,
+			data: {},
+		},
+	]);
 }
 
 onMounted(() => {
-	window.addEventListener('resize', () => {
-		isDesktop = (window.innerWidth >= DESKTOP_THRESHOLD);
-	}, { passive: true });
+	window.addEventListener(
+		"resize",
+		() => {
+			isDesktop = window.innerWidth >= DESKTOP_THRESHOLD;
+		},
+		{ passive: true }
+	);
 });
 </script>
 
@@ -150,7 +207,8 @@ onMounted(() => {
 .tray-leave-active {
 	opacity: 1;
 	transform: translateX(0);
-	transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
+	transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1),
+		opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
 }
 .tray-enter-from,
 .tray-leave-active {
@@ -189,7 +247,7 @@ onMounted(() => {
 
 		&.fullView {
 			margin: 0;
-		
+
 			> .sidebar {
 				display: none;
 			}
diff --git a/packages/client/src/ui/classic.widgets.vue b/packages/client/src/ui/classic.widgets.vue
index 0f0854a056..2c7f16eceb 100644
--- a/packages/client/src/ui/classic.widgets.vue
+++ b/packages/client/src/ui/classic.widgets.vue
@@ -1,29 +1,56 @@
 <template>
 	<div class="ddiqwdnk">
-		<MkAd class="a" :prefer="['widget']"/>
-		<XWidgets class="widgets" :edit="editMode" :widgets="$store.reactiveState.widgets.value.filter(w => w.place === place)" @add-widget="addWidget" @remove-widget="removeWidget" @update-widget="updateWidget" @update-widgets="updateWidgets" @exit="editMode = false"/>
-		<button v-if="editMode" class="_textButton edit" style="font-size: 0.9em;" @click="editMode = false"><i class="ph-check ph-bold ph-lg"></i> {{ i18n.ts.editWidgetsExit }}</button>
-		<button v-else class="_textButton edit" style="font-size: 0.9em;" @click="editMode = true"><i class="ph-pencil ph-bold ph-lg"></i> {{ i18n.ts.editWidgets }}</button>
+		<MkAd class="a" :prefer="['widget']" />
+		<XWidgets
+			class="widgets"
+			:edit="editMode"
+			:widgets="
+				$store.reactiveState.widgets.value.filter(
+					(w) => w.place === place
+				)
+			"
+			@add-widget="addWidget"
+			@remove-widget="removeWidget"
+			@update-widget="updateWidget"
+			@update-widgets="updateWidgets"
+			@exit="editMode = false"
+		/>
+		<button
+			v-if="editMode"
+			class="_textButton edit"
+			style="font-size: 0.9em"
+			@click="editMode = false"
+		>
+			<i class="ph-check ph-bold ph-lg"></i> {{ i18n.ts.editWidgetsExit }}
+		</button>
+		<button
+			v-else
+			class="_textButton edit"
+			style="font-size: 0.9em"
+			@click="editMode = true"
+		>
+			<i class="ph-pencil ph-bold ph-lg"></i> {{ i18n.ts.editWidgets }}
+		</button>
 	</div>
 </template>
 
 <script lang="ts">
-import { defineComponent, defineAsyncComponent } from 'vue';
-import XWidgets from '@/components/MkWidgets.vue';
-import { i18n } from '@/i18n';
+import { defineComponent, defineAsyncComponent } from "vue";
+import XWidgets from "@/components/MkWidgets.vue";
+import { i18n } from "@/i18n";
 
 export default defineComponent({
 	components: {
-		XWidgets
+		XWidgets,
 	},
 
 	props: {
 		place: {
 			type: String,
-		}
+		},
 	},
 
-	emits: ['mounted'],
+	emits: ["mounted"],
 
 	data() {
 		return {
@@ -33,35 +60,50 @@ export default defineComponent({
 	},
 
 	mounted() {
-		this.$emit('mounted', this.$el);
+		this.$emit("mounted", this.$el);
 	},
 
 	methods: {
 		addWidget(widget) {
-			this.$store.set('widgets', [{
-				...widget,
-				place: this.place,
-			}, ...this.$store.state.widgets]);
+			this.$store.set("widgets", [
+				{
+					...widget,
+					place: this.place,
+				},
+				...this.$store.state.widgets,
+			]);
 		},
 
 		removeWidget(widget) {
-			this.$store.set('widgets', this.$store.state.widgets.filter(w => w.id !== widget.id));
+			this.$store.set(
+				"widgets",
+				this.$store.state.widgets.filter((w) => w.id !== widget.id)
+			);
 		},
 
 		updateWidget({ id, data }) {
-			this.$store.set('widgets', this.$store.state.widgets.map(w => w.id === id ? {
-				...w,
-				data,
-			} : w));
+			this.$store.set(
+				"widgets",
+				this.$store.state.widgets.map((w) =>
+					w.id === id
+						? {
+								...w,
+								data,
+						  }
+						: w
+				)
+			);
 		},
 
 		updateWidgets(widgets) {
-			this.$store.set('widgets', [
-				...this.$store.state.widgets.filter(w => w.place !== this.place),
-				...widgets
+			this.$store.set("widgets", [
+				...this.$store.state.widgets.filter(
+					(w) => w.place !== this.place
+				),
+				...widgets,
 			]);
-		}
-	}
+		},
+	},
 });
 </script>
 
diff --git a/packages/client/src/ui/deck.vue b/packages/client/src/ui/deck.vue
index 137496c8ed..debf5d0e40 100644
--- a/packages/client/src/ui/deck.vue
+++ b/packages/client/src/ui/deck.vue
@@ -1,97 +1,188 @@
 <template>
-<div
-	class="mk-deck" :class="[{ isMobile }]"
->
-	<XSidebar v-if="!isMobile"/>
+	<div class="mk-deck" :class="[{ isMobile }]">
+		<XSidebar v-if="!isMobile" />
 
-	<div class="main">
-		<XStatusBars class="statusbars"/>
-		<div ref="columnsEl" class="columns" :class="deckStore.reactiveState.columnAlign.value" @contextmenu.self.prevent="onContextmenu">
-			<template v-for="ids in layout">
-				<!-- sectionを利用しているのは、deck.vue側でcolumnに対してfirst-of-typeを効かせるため -->
-				<section
-					v-if="ids.length > 1"
-					class="folder column"
-					:style="columns.filter(c => ids.includes(c.id)).some(c => c.flexible) ? { flex: 1, minWidth: '350px' } : { width: Math.max(...columns.filter(c => ids.includes(c.id)).map(c => c.width)) + 'px' }"
-				>
-					<DeckColumnCore v-for="id in ids" :ref="id" :key="id" :column="columns.find(c => c.id === id)" :is-stacked="true" @parent-focus="moveFocus(id, $event)"/>
-				</section>
-				<DeckColumnCore
-					v-else
-					:ref="ids[0]"
-					:key="ids[0]"
-					class="column"
-					:column="columns.find(c => c.id === ids[0])"
-					:is-stacked="false"
-					:style="columns.find(c => c.id === ids[0])!.flexible ? { flex: 1, minWidth: '350px' } : { width: columns.find(c => c.id === ids[0])!.width + 'px' }"
-					@parent-focus="moveFocus(ids[0], $event)"
-				/>
-			</template>
-			<div v-if="layout.length === 0" class="intro _panel">
-				<div>{{ i18n.ts._deck.introduction }}</div>
-				<MkButton primary class="add" @click="addColumn">{{ i18n.ts._deck.addColumn }}</MkButton>
-				<div>{{ i18n.ts._deck.introduction2 }}</div>
-			</div>
-			<div class="sideMenu">
-				<div class="top">
-					<button v-tooltip.noDelay.left="`${i18n.ts._deck.profile}: ${deckStore.state.profile}`" class="_button button" @click="changeProfile"><i class="ph-caret-down ph-bold ph-lg"></i></button>
-					<button v-if="deckStore.state.profile !== 'default'" v-tooltip.noDelay.left="i18n.ts._deck.deleteProfile" class="_button button" @click="deleteProfile"><i class="ph-trash ph-bold ph-lg"></i></button>
+		<div class="main">
+			<XStatusBars class="statusbars" />
+			<div
+				ref="columnsEl"
+				class="columns"
+				:class="deckStore.reactiveState.columnAlign.value"
+				@contextmenu.self.prevent="onContextmenu"
+			>
+				<template v-for="ids in layout">
+					<!-- sectionを利用しているのは、deck.vue側でcolumnに対してfirst-of-typeを効かせるため -->
+					<section
+						v-if="ids.length > 1"
+						class="folder column"
+						:style="
+							columns
+								.filter((c) => ids.includes(c.id))
+								.some((c) => c.flexible)
+								? { flex: 1, minWidth: '350px' }
+								: {
+										width:
+											Math.max(
+												...columns
+													.filter((c) =>
+														ids.includes(c.id)
+													)
+													.map((c) => c.width)
+											) + 'px',
+								  }
+						"
+					>
+						<DeckColumnCore
+							v-for="id in ids"
+							:ref="id"
+							:key="id"
+							:column="columns.find((c) => c.id === id)"
+							:is-stacked="true"
+							@parent-focus="moveFocus(id, $event)"
+						/>
+					</section>
+					<DeckColumnCore
+						v-else
+						:ref="ids[0]"
+						:key="ids[0]"
+						class="column"
+						:column="columns.find((c) => c.id === ids[0])"
+						:is-stacked="false"
+						:style="columns.find(c => c.id === ids[0])!.flexible ? { flex: 1, minWidth: '350px' } : { width: columns.find(c => c.id === ids[0])!.width + 'px' }"
+						@parent-focus="moveFocus(ids[0], $event)"
+					/>
+				</template>
+				<div v-if="layout.length === 0" class="intro _panel">
+					<div>{{ i18n.ts._deck.introduction }}</div>
+					<MkButton primary class="add" @click="addColumn">{{
+						i18n.ts._deck.addColumn
+					}}</MkButton>
+					<div>{{ i18n.ts._deck.introduction2 }}</div>
 				</div>
-				<div class="middle">
-					<button v-tooltip.noDelay.left="i18n.ts._deck.addColumn" class="_button button new" @click="addColumn"><i class="ph-plus ph-bold ph-lg"></i></button>
-				</div>
-				<div class="bottom">
-					<button v-tooltip.noDelay.left="i18n.ts.settings" class="_button button settings" @click="showSettings"><i class="ph-gear-six ph-bold ph-lg"></i></button>
+				<div class="sideMenu">
+					<div class="top">
+						<button
+							v-tooltip.noDelay.left="
+								`${i18n.ts._deck.profile}: ${deckStore.state.profile}`
+							"
+							class="_button button"
+							@click="changeProfile"
+						>
+							<i class="ph-caret-down ph-bold ph-lg"></i>
+						</button>
+						<button
+							v-if="deckStore.state.profile !== 'default'"
+							v-tooltip.noDelay.left="i18n.ts._deck.deleteProfile"
+							class="_button button"
+							@click="deleteProfile"
+						>
+							<i class="ph-trash ph-bold ph-lg"></i>
+						</button>
+					</div>
+					<div class="middle">
+						<button
+							v-tooltip.noDelay.left="i18n.ts._deck.addColumn"
+							class="_button button new"
+							@click="addColumn"
+						>
+							<i class="ph-plus ph-bold ph-lg"></i>
+						</button>
+					</div>
+					<div class="bottom">
+						<button
+							v-tooltip.noDelay.left="i18n.ts.settings"
+							class="_button button settings"
+							@click="showSettings"
+						>
+							<i class="ph-gear-six ph-bold ph-lg"></i>
+						</button>
+					</div>
 				</div>
 			</div>
 		</div>
+
+		<div v-if="isMobile" class="buttons">
+			<button
+				class="button nav _button"
+				@click="drawerMenuShowing = true"
+			>
+				<i class="ph-list ph-bold ph-lg"></i
+				><span v-if="menuIndicated" class="indicator"
+					><i class="ph-circle ph-fill"></i
+				></span>
+			</button>
+			<button class="button home _button" @click="mainRouter.push('/')">
+				<i class="ph-house ph-bold ph-lg"></i>
+			</button>
+			<button
+				class="button notifications _button"
+				@click="mainRouter.push('/my/notifications')"
+			>
+				<i class="ph-bell ph-bold ph-lg"></i
+				><span v-if="$i?.hasUnreadNotification" class="indicator"
+					><i class="ph-circle ph-fill"></i
+				></span>
+			</button>
+			<button class="button post _button" @click="os.post()">
+				<i class="ph-pencil ph-bold ph-lg"></i>
+			</button>
+		</div>
+
+		<transition :name="$store.state.animation ? 'menu-back' : ''">
+			<div
+				v-if="drawerMenuShowing"
+				class="menu-back _modalBg"
+				@click="drawerMenuShowing = false"
+				@touchstart.passive="drawerMenuShowing = false"
+			></div>
+		</transition>
+
+		<transition :name="$store.state.animation ? 'menu' : ''">
+			<XDrawerMenu v-if="drawerMenuShowing" class="menu" />
+		</transition>
+
+		<XCommon />
 	</div>
-
-	<div v-if="isMobile" class="buttons">
-		<button class="button nav _button" @click="drawerMenuShowing = true"><i class="ph-list ph-bold ph-lg"></i><span v-if="menuIndicated" class="indicator"><i class="ph-circle ph-fill"></i></span></button>
-		<button class="button home _button" @click="mainRouter.push('/')"><i class="ph-house ph-bold ph-lg"></i></button>
-		<button class="button notifications _button" @click="mainRouter.push('/my/notifications')"><i class="ph-bell ph-bold ph-lg"></i><span v-if="$i?.hasUnreadNotification" class="indicator"><i class="ph-circle ph-fill"></i></span></button>
-		<button class="button post _button" @click="os.post()"><i class="ph-pencil ph-bold ph-lg"></i></button>
-	</div>
-
-	<transition :name="$store.state.animation ? 'menu-back' : ''">
-		<div
-			v-if="drawerMenuShowing"
-			class="menu-back _modalBg"
-			@click="drawerMenuShowing = false"
-			@touchstart.passive="drawerMenuShowing = false"
-		></div>
-	</transition>
-
-	<transition :name="$store.state.animation ? 'menu' : ''">
-		<XDrawerMenu v-if="drawerMenuShowing" class="menu"/>
-	</transition>
-
-	<XCommon/>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { computed, defineAsyncComponent, onMounted, provide, ref, watch } from 'vue';
-import { v4 as uuid } from 'uuid';
-import XCommon from './_common_/common.vue';
-import { deckStore, addColumn as addColumnToStore, loadDeck, getProfiles, deleteProfile as deleteProfile_ } from './deck/deck-store';
-import DeckColumnCore from '@/ui/deck/column-core.vue';
-import XSidebar from '@/ui/_common_/navbar.vue';
-import XDrawerMenu from '@/ui/_common_/navbar-for-mobile.vue';
-import MkButton from '@/components/MkButton.vue';
-import { getScrollContainer } from '@/scripts/scroll';
-import * as os from '@/os';
-import { navbarItemDef } from '@/navbar';
-import { $i } from '@/account';
-import { i18n } from '@/i18n';
-import { mainRouter } from '@/router';
-import { unisonReload } from '@/scripts/unison-reload';
-const XStatusBars = defineAsyncComponent(() => import('@/ui/_common_/statusbars.vue'));
+import {
+	computed,
+	defineAsyncComponent,
+	onMounted,
+	provide,
+	ref,
+	watch,
+} from "vue";
+import { v4 as uuid } from "uuid";
+import XCommon from "./_common_/common.vue";
+import {
+	deckStore,
+	addColumn as addColumnToStore,
+	loadDeck,
+	getProfiles,
+	deleteProfile as deleteProfile_,
+} from "./deck/deck-store";
+import DeckColumnCore from "@/ui/deck/column-core.vue";
+import XSidebar from "@/ui/_common_/navbar.vue";
+import XDrawerMenu from "@/ui/_common_/navbar-for-mobile.vue";
+import MkButton from "@/components/MkButton.vue";
+import { getScrollContainer } from "@/scripts/scroll";
+import * as os from "@/os";
+import { navbarItemDef } from "@/navbar";
+import { $i } from "@/account";
+import { i18n } from "@/i18n";
+import { mainRouter } from "@/router";
+import { unisonReload } from "@/scripts/unison-reload";
+const XStatusBars = defineAsyncComponent(
+	() => import("@/ui/_common_/statusbars.vue")
+);
 
 mainRouter.navHook = (path, flag): boolean => {
-	if (flag === 'forcePage') return false;
-	const noMainColumn = !deckStore.state.columns.some(x => x.type === 'main');
+	if (flag === "forcePage") return false;
+	const noMainColumn = !deckStore.state.columns.some(
+		(x) => x.type === "main"
+	);
 	if (deckStore.state.navWindow || noMainColumn) {
 		os.pageWindow(path);
 		return true;
@@ -100,13 +191,13 @@ mainRouter.navHook = (path, flag): boolean => {
 };
 
 const isMobile = ref(window.innerWidth <= 500);
-window.addEventListener('resize', () => {
+window.addEventListener("resize", () => {
 	isMobile.value = window.innerWidth <= 500;
 });
 
 const drawerMenuShowing = ref(false);
 
-const route = 'TODO';
+const route = "TODO";
 watch(route, () => {
 	drawerMenuShowing.value = false;
 });
@@ -122,27 +213,28 @@ const menuIndicated = computed(() => {
 });
 
 function showSettings() {
-	os.pageWindow('/settings/deck');
+	os.pageWindow("/settings/deck");
 }
 
 let columnsEl = $ref<HTMLElement>();
 
 const addColumn = async (ev) => {
 	const columns = [
-		'main',
-		'widgets',
-		'notifications',
-		'tl',
-		'antenna',
-		'list',
-		'mentions',
-		'direct',
+		"main",
+		"widgets",
+		"notifications",
+		"tl",
+		"antenna",
+		"list",
+		"mentions",
+		"direct",
 	];
 
 	const { canceled, result: column } = await os.select({
 		title: i18n.ts._deck.addColumn,
-		items: columns.map(column => ({
-			value: column, text: i18n.t('_deck._columns.' + column),
+		items: columns.map((column) => ({
+			value: column,
+			text: i18n.t("_deck._columns." + column),
 		})),
 	});
 	if (canceled) return;
@@ -150,75 +242,92 @@ const addColumn = async (ev) => {
 	addColumnToStore({
 		type: column,
 		id: uuid(),
-		name: i18n.t('_deck._columns.' + column),
+		name: i18n.t("_deck._columns." + column),
 		width: 330,
 	});
 };
 
 const onContextmenu = (ev) => {
-	os.contextMenu([{
-		text: i18n.ts._deck.addColumn,
-		action: addColumn,
-	}], ev);
+	os.contextMenu(
+		[
+			{
+				text: i18n.ts._deck.addColumn,
+				action: addColumn,
+			},
+		],
+		ev
+	);
 };
 
-document.documentElement.style.overflowY = 'hidden';
-document.documentElement.style.scrollBehavior = 'auto';
-window.addEventListener('wheel', (ev) => {
+document.documentElement.style.overflowY = "hidden";
+document.documentElement.style.scrollBehavior = "auto";
+window.addEventListener("wheel", (ev) => {
 	if (ev.target === columnsEl && ev.deltaX === 0) {
 		columnsEl.scrollLeft += ev.deltaY;
-	} else if (getScrollContainer(ev.target as HTMLElement) == null && ev.deltaX === 0) {
+	} else if (
+		getScrollContainer(ev.target as HTMLElement) == null &&
+		ev.deltaX === 0
+	) {
 		columnsEl.scrollLeft += ev.deltaY;
 	}
 });
 loadDeck();
 
-function moveFocus(id: string, direction: 'up' | 'down' | 'left' | 'right') {
+function moveFocus(id: string, direction: "up" | "down" | "left" | "right") {
 	// TODO??
 }
 
 function changeProfile(ev: MouseEvent) {
-	const items = ref([{
-		text: deckStore.state.profile,
-		active: true.valueOf,
-	}]);
-	getProfiles().then(profiles => {
-		items.value = [{
+	const items = ref([
+		{
 			text: deckStore.state.profile,
 			active: true.valueOf,
-		}, ...(profiles.filter(k => k !== deckStore.state.profile).map(k => ({
-			text: k,
-			action: () => {
-				deckStore.set('profile', k);
-				unisonReload();
+		},
+	]);
+	getProfiles().then((profiles) => {
+		items.value = [
+			{
+				text: deckStore.state.profile,
+				active: true.valueOf,
 			},
-		}))), null, {
-			text: i18n.ts._deck.newProfile,
-			icon: 'ph-plus ph-bold ph-lg',
-			action: async () => {
-				const { canceled, result: name } = await os.inputText({
-					title: i18n.ts._deck.profile,
-					allowEmpty: false,
-				});
-				if (canceled) return;
+			...profiles
+				.filter((k) => k !== deckStore.state.profile)
+				.map((k) => ({
+					text: k,
+					action: () => {
+						deckStore.set("profile", k);
+						unisonReload();
+					},
+				})),
+			null,
+			{
+				text: i18n.ts._deck.newProfile,
+				icon: "ph-plus ph-bold ph-lg",
+				action: async () => {
+					const { canceled, result: name } = await os.inputText({
+						title: i18n.ts._deck.profile,
+						allowEmpty: false,
+					});
+					if (canceled) return;
 
-				deckStore.set('profile', name);
-				unisonReload();
+					deckStore.set("profile", name);
+					unisonReload();
+				},
 			},
-		}];
+		];
 	});
 	os.popupMenu(items, ev.currentTarget ?? ev.target);
 }
 
 async function deleteProfile() {
 	const { canceled } = await os.confirm({
-		type: 'warning',
-		text: i18n.t('deleteAreYouSure', { x: deckStore.state.profile }),
+		type: "warning",
+		text: i18n.t("deleteAreYouSure", { x: deckStore.state.profile }),
 	});
 	if (canceled) return;
 
 	deleteProfile_(deckStore.state.profile);
-	deckStore.set('profile', 'default');
+	deckStore.set("profile", "default");
 	unisonReload();
 }
 </script>
@@ -228,7 +337,8 @@ async function deleteProfile() {
 .menu-leave-active {
 	opacity: 1;
 	transform: translateX(0);
-	transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
+	transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1),
+		opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
 }
 .menu-enter-from,
 .menu-leave-active {
@@ -299,7 +409,8 @@ async function deleteProfile() {
 					flex-direction: column;
 
 					> *:not(:last-of-type) {
-						border-bottom: solid var(--deckDividerThickness) var(--bg);
+						border-bottom: solid var(--deckDividerThickness)
+							var(--bg);
 					}
 				}
 			}
@@ -324,7 +435,9 @@ async function deleteProfile() {
 				justify-content: center;
 				width: 44px;
 
-				> .top, > .middle, > .bottom {
+				> .top,
+				> .middle,
+				> .bottom {
 					> .button {
 						display: block;
 						width: 100%;
diff --git a/packages/client/src/ui/deck/antenna-column.vue b/packages/client/src/ui/deck/antenna-column.vue
index d06b79c96f..9dba7bd485 100644
--- a/packages/client/src/ui/deck/antenna-column.vue
+++ b/packages/client/src/ui/deck/antenna-column.vue
@@ -1,20 +1,32 @@
 <template>
-<XColumn :menu="menu" :column="column" :is-stacked="isStacked" @parent-focus="$event => emit('parent-focus', $event)">
-	<template #header>
-		<i class="ph-television ph-bold ph-lg"></i><span style="margin-left: 8px;">{{ column.name }}</span>
-	</template>
+	<XColumn
+		:menu="menu"
+		:column="column"
+		:is-stacked="isStacked"
+		@parent-focus="($event) => emit('parent-focus', $event)"
+	>
+		<template #header>
+			<i class="ph-television ph-bold ph-lg"></i
+			><span style="margin-left: 8px">{{ column.name }}</span>
+		</template>
 
-	<XTimeline v-if="column.antennaId" ref="timeline" src="antenna" :antenna="column.antennaId" @after="() => emit('loaded')"/>
-</XColumn>
+		<XTimeline
+			v-if="column.antennaId"
+			ref="timeline"
+			src="antenna"
+			:antenna="column.antennaId"
+			@after="() => emit('loaded')"
+		/>
+	</XColumn>
 </template>
 
 <script lang="ts" setup>
-import { onMounted } from 'vue';
-import XColumn from './column.vue';
-import { updateColumn, Column } from './deck-store';
-import XTimeline from '@/components/MkTimeline.vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
+import { onMounted } from "vue";
+import XColumn from "./column.vue";
+import { updateColumn, Column } from "./deck-store";
+import XTimeline from "@/components/MkTimeline.vue";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
 
 const props = defineProps<{
 	column: Column;
@@ -22,8 +34,8 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-	(ev: 'loaded'): void;
-	(ev: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void;
+	(ev: "loaded"): void;
+	(ev: "parent-focus", direction: "up" | "down" | "left" | "right"): void;
 }>();
 
 let timeline = $ref<InstanceType<typeof XTimeline>>();
@@ -35,11 +47,12 @@ onMounted(() => {
 });
 
 async function setAntenna() {
-	const antennas = await os.api('antennas/list');
+	const antennas = await os.api("antennas/list");
 	const { canceled, result: antenna } = await os.select({
 		title: i18n.ts.selectAntenna,
-		items: antennas.map(x => ({
-			value: x, text: x.name,
+		items: antennas.map((x) => ({
+			value: x,
+			text: x.name,
 		})),
 		default: props.column.antennaId,
 	});
@@ -49,11 +62,13 @@ async function setAntenna() {
 	});
 }
 
-const menu = [{
-	icon: 'ph-pencil ph-bold ph-lg',
-	text: i18n.ts.selectAntenna,
-	action: setAntenna,
-}];
+const menu = [
+	{
+		icon: "ph-pencil ph-bold ph-lg",
+		text: i18n.ts.selectAntenna,
+		action: setAntenna,
+	},
+];
 
 /*
 function focus() {
@@ -66,5 +81,4 @@ defineExpose({
 */
 </script>
 
-<style lang="scss" scoped>
-</style>
+<style lang="scss" scoped></style>
diff --git a/packages/client/src/ui/deck/column-core.vue b/packages/client/src/ui/deck/column-core.vue
index 30c0dc5e1c..4a4afcb076 100644
--- a/packages/client/src/ui/deck/column-core.vue
+++ b/packages/client/src/ui/deck/column-core.vue
@@ -1,27 +1,67 @@
 <template>
-<!-- TODO: リファクタの余地がありそう -->
-<div v-if="!column">たぶん見えちゃいけないやつ</div>
-<XMainColumn v-else-if="column.type === 'main'" :column="column" :is-stacked="isStacked" @parent-focus="emit('parent-focus', $event)"/>
-<XWidgetsColumn v-else-if="column.type === 'widgets'" :column="column" :is-stacked="isStacked" @parent-focus="emit('parent-focus', $event)"/>
-<XNotificationsColumn v-else-if="column.type === 'notifications'" :column="column" :is-stacked="isStacked" @parent-focus="emit('parent-focus', $event)"/>
-<XTlColumn v-else-if="column.type === 'tl'" :column="column" :is-stacked="isStacked" @parent-focus="emit('parent-focus', $event)"/>
-<XListColumn v-else-if="column.type === 'list'" :column="column" :is-stacked="isStacked" @parent-focus="emit('parent-focus', $event)"/>
-<XAntennaColumn v-else-if="column.type === 'antenna'" :column="column" :is-stacked="isStacked" @parent-focus="emit('parent-focus', $event)"/>
-<XMentionsColumn v-else-if="column.type === 'mentions'" :column="column" :is-stacked="isStacked" @parent-focus="emit('parent-focus', $event)"/>
-<XDirectColumn v-else-if="column.type === 'direct'" :column="column" :is-stacked="isStacked" @parent-focus="emit('parent-focus', $event)"/>
+	<!-- TODO: リファクタの余地がありそう -->
+	<div v-if="!column">たぶん見えちゃいけないやつ</div>
+	<XMainColumn
+		v-else-if="column.type === 'main'"
+		:column="column"
+		:is-stacked="isStacked"
+		@parent-focus="emit('parent-focus', $event)"
+	/>
+	<XWidgetsColumn
+		v-else-if="column.type === 'widgets'"
+		:column="column"
+		:is-stacked="isStacked"
+		@parent-focus="emit('parent-focus', $event)"
+	/>
+	<XNotificationsColumn
+		v-else-if="column.type === 'notifications'"
+		:column="column"
+		:is-stacked="isStacked"
+		@parent-focus="emit('parent-focus', $event)"
+	/>
+	<XTlColumn
+		v-else-if="column.type === 'tl'"
+		:column="column"
+		:is-stacked="isStacked"
+		@parent-focus="emit('parent-focus', $event)"
+	/>
+	<XListColumn
+		v-else-if="column.type === 'list'"
+		:column="column"
+		:is-stacked="isStacked"
+		@parent-focus="emit('parent-focus', $event)"
+	/>
+	<XAntennaColumn
+		v-else-if="column.type === 'antenna'"
+		:column="column"
+		:is-stacked="isStacked"
+		@parent-focus="emit('parent-focus', $event)"
+	/>
+	<XMentionsColumn
+		v-else-if="column.type === 'mentions'"
+		:column="column"
+		:is-stacked="isStacked"
+		@parent-focus="emit('parent-focus', $event)"
+	/>
+	<XDirectColumn
+		v-else-if="column.type === 'direct'"
+		:column="column"
+		:is-stacked="isStacked"
+		@parent-focus="emit('parent-focus', $event)"
+	/>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import XMainColumn from './main-column.vue';
-import XTlColumn from './tl-column.vue';
-import XAntennaColumn from './antenna-column.vue';
-import XListColumn from './list-column.vue';
-import XNotificationsColumn from './notifications-column.vue';
-import XWidgetsColumn from './widgets-column.vue';
-import XMentionsColumn from './mentions-column.vue';
-import XDirectColumn from './direct-column.vue';
-import { Column } from './deck-store';
+import {} from "vue";
+import XMainColumn from "./main-column.vue";
+import XTlColumn from "./tl-column.vue";
+import XAntennaColumn from "./antenna-column.vue";
+import XListColumn from "./list-column.vue";
+import XNotificationsColumn from "./notifications-column.vue";
+import XWidgetsColumn from "./widgets-column.vue";
+import XMentionsColumn from "./mentions-column.vue";
+import XDirectColumn from "./direct-column.vue";
+import { Column } from "./deck-store";
 
 defineProps<{
 	column?: Column;
@@ -29,6 +69,6 @@ defineProps<{
 }>();
 
 const emit = defineEmits<{
-	(ev: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void;
+	(ev: "parent-focus", direction: "up" | "down" | "left" | "right"): void;
 }>();
 </script>
diff --git a/packages/client/src/ui/deck/column.vue b/packages/client/src/ui/deck/column.vue
index 058d475446..425f00293c 100644
--- a/packages/client/src/ui/deck/column.vue
+++ b/packages/client/src/ui/deck/column.vue
@@ -1,91 +1,131 @@
 <template>
-<!-- sectionを利用しているのは、deck.vue側でcolumnに対してfirst-of-typeを効かせるため -->
-<section
-	v-hotkey="keymap" class="dnpfarvg _narrow_"
-	:class="{ paged: isMainColumn, naked, active, isStacked, draghover, dragging, dropready }"
-	@dragover.prevent.stop="onDragover"
-	@dragleave="onDragleave"
-	@drop.prevent.stop="onDrop"
->
-	<header
-		:class="{ indicated }"
-		draggable="true"
-		@click="goTop"
-		@dragstart="onDragstart"
-		@dragend="onDragend"
-		@contextmenu.prevent.stop="onContextmenu"
+	<!-- sectionを利用しているのは、deck.vue側でcolumnに対してfirst-of-typeを効かせるため -->
+	<section
+		v-hotkey="keymap"
+		class="dnpfarvg _narrow_"
+		:class="{
+			paged: isMainColumn,
+			naked,
+			active,
+			isStacked,
+			draghover,
+			dragging,
+			dropready,
+		}"
+		@dragover.prevent.stop="onDragover"
+		@dragleave="onDragleave"
+		@drop.prevent.stop="onDrop"
 	>
-		<button v-if="isStacked && !isMainColumn" class="toggleActive _button" @click="toggleActive">
-			<template v-if="active"><i class="ph-caret-up ph-bold ph-lg"></i></template>
-			<template v-else><i class="ph-caret-down ph-bold ph-lg"></i></template>
-		</button>
-		<div class="action">
-			<slot name="action"></slot>
+		<header
+			:class="{ indicated }"
+			draggable="true"
+			@click="goTop"
+			@dragstart="onDragstart"
+			@dragend="onDragend"
+			@contextmenu.prevent.stop="onContextmenu"
+		>
+			<button
+				v-if="isStacked && !isMainColumn"
+				class="toggleActive _button"
+				@click="toggleActive"
+			>
+				<template v-if="active"
+					><i class="ph-caret-up ph-bold ph-lg"></i
+				></template>
+				<template v-else
+					><i class="ph-caret-down ph-bold ph-lg"></i
+				></template>
+			</button>
+			<div class="action">
+				<slot name="action"></slot>
+			</div>
+			<span class="header"><slot name="header"></slot></span>
+			<button
+				v-tooltip="i18n.ts.settings"
+				class="menu _button"
+				@click.stop="showSettingsMenu"
+			>
+				<i class="ph-dots-three-outline-vertical ph-bold ph-lg"></i>
+			</button>
+		</header>
+		<div v-show="active" ref="body">
+			<slot></slot>
 		</div>
-		<span class="header"><slot name="header"></slot></span>
-		<button v-tooltip="i18n.ts.settings" class="menu _button" @click.stop="showSettingsMenu"><i class="ph-dots-three-outline-vertical ph-bold ph-lg"></i></button>
-	</header>
-	<div v-show="active" ref="body">
-		<slot></slot>
-	</div>
-</section>
+	</section>
 </template>
 
 <script lang="ts" setup>
-import { onBeforeUnmount, onMounted, provide, Ref, watch } from 'vue';
-import { updateColumn, swapLeftColumn, swapRightColumn, swapUpColumn, swapDownColumn, stackLeftColumn, popRightColumn, removeColumn, swapColumn, Column , deckStore } from './deck-store';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { MenuItem } from '@/types/menu';
+import { onBeforeUnmount, onMounted, provide, Ref, watch } from "vue";
+import {
+	updateColumn,
+	swapLeftColumn,
+	swapRightColumn,
+	swapUpColumn,
+	swapDownColumn,
+	stackLeftColumn,
+	popRightColumn,
+	removeColumn,
+	swapColumn,
+	Column,
+	deckStore,
+} from "./deck-store";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
+import { MenuItem } from "@/types/menu";
 
-provide('shouldHeaderThin', true);
-provide('shouldOmitHeaderTitle', true);
-provide('shouldSpacerMin', true);
+provide("shouldHeaderThin", true);
+provide("shouldOmitHeaderTitle", true);
+provide("shouldSpacerMin", true);
 
-const props = withDefaults(defineProps<{
-	column: Column;
-	isStacked?: boolean;
-	naked?: boolean;
-	indicated?: boolean;
-	menu?: MenuItem[];
-}>(), {
-	isStacked: false,
-	naked: false,
-	indicated: false,
-});
+const props = withDefaults(
+	defineProps<{
+		column: Column;
+		isStacked?: boolean;
+		naked?: boolean;
+		indicated?: boolean;
+		menu?: MenuItem[];
+	}>(),
+	{
+		isStacked: false,
+		naked: false,
+		indicated: false,
+	}
+);
 
 const emit = defineEmits<{
-	(ev: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void;
-	(ev: 'change-active-state', v: boolean): void;
+	(ev: "parent-focus", direction: "up" | "down" | "left" | "right"): void;
+	(ev: "change-active-state", v: boolean): void;
 }>();
 
 let body = $ref<HTMLDivElement>();
 
 let dragging = $ref(false);
-watch($$(dragging), v => os.deckGlobalEvents.emit(v ? 'column.dragStart' : 'column.dragEnd'));
+watch($$(dragging), (v) =>
+	os.deckGlobalEvents.emit(v ? "column.dragStart" : "column.dragEnd")
+);
 
 let draghover = $ref(false);
 let dropready = $ref(false);
 
-const isMainColumn = $computed(() => props.column.type === 'main');
+const isMainColumn = $computed(() => props.column.type === "main");
 const active = $computed(() => props.column.active !== false);
-watch($$(active), v => emit('change-active-state', v));
+watch($$(active), (v) => emit("change-active-state", v));
 
 const keymap = $computed(() => ({
-	'shift+up': () => emit('parent-focus', 'up'),
-	'shift+down': () => emit('parent-focus', 'down'),
-	'shift+left': () => emit('parent-focus', 'left'),
-	'shift+right': () => emit('parent-focus', 'right'),
+	"shift+up": () => emit("parent-focus", "up"),
+	"shift+down": () => emit("parent-focus", "down"),
+	"shift+left": () => emit("parent-focus", "left"),
+	"shift+right": () => emit("parent-focus", "right"),
 }));
 
 onMounted(() => {
-	os.deckGlobalEvents.on('column.dragStart', onOtherDragStart);
-	os.deckGlobalEvents.on('column.dragEnd', onOtherDragEnd);
+	os.deckGlobalEvents.on("column.dragStart", onOtherDragStart);
+	os.deckGlobalEvents.on("column.dragEnd", onOtherDragEnd);
 });
 
 onBeforeUnmount(() => {
-	os.deckGlobalEvents.off('column.dragStart', onOtherDragStart);
-	os.deckGlobalEvents.off('column.dragEnd', onOtherDragEnd);
+	os.deckGlobalEvents.off("column.dragStart", onOtherDragStart);
+	os.deckGlobalEvents.off("column.dragEnd", onOtherDragEnd);
 });
 
 function onOtherDragStart() {
@@ -104,79 +144,97 @@ function toggleActive() {
 }
 
 function getMenu() {
-	let items = [{
-		icon: 'ph-gear-six ph-bold ph-lg',
-		text: i18n.ts._deck.configureColumn,
-		action: async () => {
-			const { canceled, result } = await os.form(props.column.name, {
-				name: {
-					type: 'string',
-					label: i18n.ts.name,
-					default: props.column.name,
+	let items = [
+		{
+			icon: "ph-gear-six ph-bold ph-lg",
+			text: i18n.ts._deck.configureColumn,
+			action: async () => {
+				const { canceled, result } = await os.form(props.column.name, {
+					name: {
+						type: "string",
+						label: i18n.ts.name,
+						default: props.column.name,
+					},
+					width: {
+						type: "number",
+						label: i18n.ts.width,
+						default: props.column.width,
+					},
+					flexible: {
+						type: "boolean",
+						label: i18n.ts.flexible,
+						default: props.column.flexible,
+					},
+				});
+				if (canceled) return;
+				updateColumn(props.column.id, result);
+			},
+		},
+		{
+			type: "parent",
+			text: i18n.ts.move + "...",
+			icon: "ph-arrows-out-cardinal ph-bold ph-lg",
+			children: [
+				{
+					icon: "ph-caret-left ph-bold ph-lg",
+					text: i18n.ts._deck.swapLeft,
+					action: () => {
+						swapLeftColumn(props.column.id);
+					},
 				},
-				width: {
-					type: 'number',
-					label: i18n.ts.width,
-					default: props.column.width,
+				{
+					icon: "ph-caret-right ph-bold ph-lg",
+					text: i18n.ts._deck.swapRight,
+					action: () => {
+						swapRightColumn(props.column.id);
+					},
 				},
-				flexible: {
-					type: 'boolean',
-					label: i18n.ts.flexible,
-					default: props.column.flexible,
-				},
-			});
-			if (canceled) return;
-			updateColumn(props.column.id, result);
+				props.isStacked
+					? {
+							icon: "ph-caret-up ph-bold ph-lg",
+							text: i18n.ts._deck.swapUp,
+							action: () => {
+								swapUpColumn(props.column.id);
+							},
+					  }
+					: undefined,
+				props.isStacked
+					? {
+							icon: "ph-caret-down ph-bold ph-lg",
+							text: i18n.ts._deck.swapDown,
+							action: () => {
+								swapDownColumn(props.column.id);
+							},
+					  }
+					: undefined,
+			],
 		},
-	}, {
-		type: 'parent',
-		text: i18n.ts.move + '...',
-		icon: 'ph-arrows-out-cardinal ph-bold ph-lg',
-		children: [{
-			icon: 'ph-caret-left ph-bold ph-lg',
-			text: i18n.ts._deck.swapLeft,
+		{
+			icon: "ph-copy ph-bold ph-lg",
+			text: i18n.ts._deck.stackLeft,
 			action: () => {
-				swapLeftColumn(props.column.id);
+				stackLeftColumn(props.column.id);
 			},
-		}, {
-			icon: 'ph-caret-right ph-bold ph-lg',
-			text: i18n.ts._deck.swapRight,
-			action: () => {
-				swapRightColumn(props.column.id);
-			},
-		}, props.isStacked ? {
-			icon: 'ph-caret-up ph-bold ph-lg',
-			text: i18n.ts._deck.swapUp,
-			action: () => {
-				swapUpColumn(props.column.id);
-			},
-		} : undefined, props.isStacked ? {
-			icon: 'ph-caret-down ph-bold ph-lg',
-			text: i18n.ts._deck.swapDown,
-			action: () => {
-				swapDownColumn(props.column.id);
-			},
-		} : undefined],
-	}, {
-		icon: 'ph-copy ph-bold ph-lg',
-		text: i18n.ts._deck.stackLeft,
-		action: () => {
-			stackLeftColumn(props.column.id);
 		},
-	}, props.isStacked ? {
-		icon: 'ph-browser ph-bold ph-lg',
-		text: i18n.ts._deck.popRight,
-		action: () => {
-			popRightColumn(props.column.id);
+		props.isStacked
+			? {
+					icon: "ph-browser ph-bold ph-lg",
+					text: i18n.ts._deck.popRight,
+					action: () => {
+						popRightColumn(props.column.id);
+					},
+			  }
+			: undefined,
+		null,
+		{
+			icon: "ph-trash ph-bold ph-lg",
+			text: i18n.ts.remove,
+			danger: true,
+			action: () => {
+				removeColumn(props.column.id);
+			},
 		},
-	} : undefined, null, {
-		icon: 'ph-trash ph-bold ph-lg',
-		text: i18n.ts.remove,
-		danger: true,
-		action: () => {
-			removeColumn(props.column.id);
-		},
-	}];
+	];
 
 	if (props.menu) {
 		items.unshift(null);
@@ -197,12 +255,12 @@ function onContextmenu(ev: MouseEvent) {
 function goTop() {
 	body.scrollTo({
 		top: 0,
-		behavior: 'smooth',
+		behavior: "smooth",
 	});
 }
 
 function onDragstart(ev) {
-	ev.dataTransfer.effectAllowed = 'move';
+	ev.dataTransfer.effectAllowed = "move";
 	ev.dataTransfer.setData(_DATA_TRANSFER_DECK_COLUMN_, props.column.id);
 
 	// Chromeのバグで、Dragstartハンドラ内ですぐにDOMを変更する(=リアクティブなプロパティを変更する)とDragが終了してしまう
@@ -220,11 +278,12 @@ function onDragover(ev) {
 	// 自分自身がドラッグされている場合
 	if (dragging) {
 		// 自分自身にはドロップさせない
-		ev.dataTransfer.dropEffect = 'none';
+		ev.dataTransfer.dropEffect = "none";
 	} else {
-		const isDeckColumn = ev.dataTransfer.types[0] === _DATA_TRANSFER_DECK_COLUMN_;
+		const isDeckColumn =
+			ev.dataTransfer.types[0] === _DATA_TRANSFER_DECK_COLUMN_;
 
-		ev.dataTransfer.dropEffect = isDeckColumn ? 'move' : 'none';
+		ev.dataTransfer.dropEffect = isDeckColumn ? "move" : "none";
 
 		if (isDeckColumn) draghover = true;
 	}
@@ -236,10 +295,10 @@ function onDragleave() {
 
 function onDrop(ev) {
 	draghover = false;
-	os.deckGlobalEvents.emit('column.dragEnd');
+	os.deckGlobalEvents.emit("column.dragEnd");
 
 	const id = ev.dataTransfer.getData(_DATA_TRANSFER_DECK_COLUMN_);
-	if (id != null && id !== '') {
+	if (id != null && id !== "") {
 		swapColumn(props.column.id, id);
 	}
 }
@@ -249,7 +308,7 @@ function onDrop(ev) {
 .dnpfarvg {
 	header {
 		.ph-lg {
-			vertical-align: -.24em;
+			vertical-align: -0.24em;
 		}
 	}
 }
@@ -340,7 +399,8 @@ function onDrop(ev) {
 		box-shadow: 0 1px 0 0 var(--panelHeaderDivider);
 		cursor: pointer;
 
-		&, * {
+		&,
+		* {
 			user-select: none;
 		}
 
@@ -377,7 +437,8 @@ function onDrop(ev) {
 			}
 		}
 
-		> .toggleActive, > .action {
+		> .toggleActive,
+		> .action {
 			margin-left: -16px;
 		}
 
diff --git a/packages/client/src/ui/deck/direct-column.vue b/packages/client/src/ui/deck/direct-column.vue
index cf84ad5178..67ebca16fc 100644
--- a/packages/client/src/ui/deck/direct-column.vue
+++ b/packages/client/src/ui/deck/direct-column.vue
@@ -1,16 +1,26 @@
 <template>
-<XColumn :column="column" :is-stacked="isStacked" @parent-focus="$event => emit('parent-focus', $event)">
-	<template #header><i class="ph-envelope-simple-open ph-bold ph-lg" style="margin-right: 8px;"></i>{{ column.name }}</template>
+	<XColumn
+		:column="column"
+		:is-stacked="isStacked"
+		@parent-focus="($event) => emit('parent-focus', $event)"
+	>
+		<template #header
+			><i
+				class="ph-envelope-simple-open ph-bold ph-lg"
+				style="margin-right: 8px"
+			></i
+			>{{ column.name }}</template
+		>
 
-	<XNotes :pagination="pagination"/>
-</XColumn>
+		<XNotes :pagination="pagination" />
+	</XColumn>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import XColumn from './column.vue';
-import XNotes from '@/components/MkNotes.vue';
-import { Column } from './deck-store';
+import {} from "vue";
+import XColumn from "./column.vue";
+import XNotes from "@/components/MkNotes.vue";
+import { Column } from "./deck-store";
 
 defineProps<{
 	column: Column;
@@ -18,14 +28,14 @@ defineProps<{
 }>();
 
 const emit = defineEmits<{
-	(ev: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void;
+	(ev: "parent-focus", direction: "up" | "down" | "left" | "right"): void;
 }>();
 
 const pagination = {
-	endpoint: 'notes/mentions' as const,
+	endpoint: "notes/mentions" as const,
 	limit: 10,
 	params: {
-		visibility: 'specified'
+		visibility: "specified",
 	},
 };
 </script>
diff --git a/packages/client/src/ui/deck/list-column.vue b/packages/client/src/ui/deck/list-column.vue
index 9247285fde..e4c820d6f6 100644
--- a/packages/client/src/ui/deck/list-column.vue
+++ b/packages/client/src/ui/deck/list-column.vue
@@ -1,20 +1,32 @@
 <template>
-<XColumn :menu="menu" :column="column" :is-stacked="isStacked" @parent-focus="$event => emit('parent-focus', $event)">
-	<template #header>
-		<i class="ph-list-bullets ph-bold ph-lg"></i><span style="margin-left: 8px;">{{ column.name }}</span>
-	</template>
+	<XColumn
+		:menu="menu"
+		:column="column"
+		:is-stacked="isStacked"
+		@parent-focus="($event) => emit('parent-focus', $event)"
+	>
+		<template #header>
+			<i class="ph-list-bullets ph-bold ph-lg"></i
+			><span style="margin-left: 8px">{{ column.name }}</span>
+		</template>
 
-	<XTimeline v-if="column.listId" ref="timeline" src="list" :list="column.listId" @after="() => emit('loaded')"/>
-</XColumn>
+		<XTimeline
+			v-if="column.listId"
+			ref="timeline"
+			src="list"
+			:list="column.listId"
+			@after="() => emit('loaded')"
+		/>
+	</XColumn>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import XColumn from './column.vue';
-import { updateColumn, Column } from './deck-store';
-import XTimeline from '@/components/MkTimeline.vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
+import {} from "vue";
+import XColumn from "./column.vue";
+import { updateColumn, Column } from "./deck-store";
+import XTimeline from "@/components/MkTimeline.vue";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
 
 const props = defineProps<{
 	column: Column;
@@ -22,8 +34,8 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-	(ev: 'loaded'): void;
-	(ev: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void;
+	(ev: "loaded"): void;
+	(ev: "parent-focus", direction: "up" | "down" | "left" | "right"): void;
 }>();
 
 let timeline = $ref<InstanceType<typeof XTimeline>>();
@@ -33,11 +45,12 @@ if (props.column.listId == null) {
 }
 
 async function setList() {
-	const lists = await os.api('users/lists/list');
+	const lists = await os.api("users/lists/list");
 	const { canceled, result: list } = await os.select({
 		title: i18n.ts.selectList,
-		items: lists.map(x => ({
-			value: x, text: x.name,
+		items: lists.map((x) => ({
+			value: x,
+			text: x.name,
 		})),
 		default: props.column.listId,
 	});
@@ -47,12 +60,13 @@ async function setList() {
 	});
 }
 
-const menu = [{
-	icon: 'ph-pencil ph-bold ph-lg',
-	text: i18n.ts.selectList,
-	action: setList,
-}];
+const menu = [
+	{
+		icon: "ph-pencil ph-bold ph-lg",
+		text: i18n.ts.selectList,
+		action: setList,
+	},
+];
 </script>
 
-<style lang="scss" scoped>
-</style>
+<style lang="scss" scoped></style>
diff --git a/packages/client/src/ui/deck/main-column.vue b/packages/client/src/ui/deck/main-column.vue
index 358a4a9bef..357395a4eb 100644
--- a/packages/client/src/ui/deck/main-column.vue
+++ b/packages/client/src/ui/deck/main-column.vue
@@ -1,24 +1,36 @@
 <template>
-<XColumn v-if="deckStore.state.alwaysShowMainColumn || mainRouter.currentRoute.value.name !== 'index'" :column="column" :is-stacked="isStacked" @parent-focus="$event => emit('parent-focus', $event)">
-	<template #header>
-		<template v-if="pageMetadata?.value">
-			<i :class="pageMetadata?.value.icon"></i>
-			{{ pageMetadata?.value.title }}
+	<XColumn
+		v-if="
+			deckStore.state.alwaysShowMainColumn ||
+			mainRouter.currentRoute.value.name !== 'index'
+		"
+		:column="column"
+		:is-stacked="isStacked"
+		@parent-focus="($event) => emit('parent-focus', $event)"
+	>
+		<template #header>
+			<template v-if="pageMetadata?.value">
+				<i :class="pageMetadata?.value.icon"></i>
+				{{ pageMetadata?.value.title }}
+			</template>
 		</template>
-	</template>
 
-	<RouterView @contextmenu.stop="onContextmenu"/>
-</XColumn>
+		<RouterView @contextmenu.stop="onContextmenu" />
+	</XColumn>
 </template>
 
 <script lang="ts" setup>
-import { ComputedRef, provide } from 'vue';
-import XColumn from './column.vue';
-import { deckStore, Column } from '@/ui/deck/deck-store';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { mainRouter } from '@/router';
-import { PageMetadata, provideMetadataReceiver, setPageMetadata } from '@/scripts/page-metadata';
+import { ComputedRef, provide } from "vue";
+import XColumn from "./column.vue";
+import { deckStore, Column } from "@/ui/deck/deck-store";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
+import { mainRouter } from "@/router";
+import {
+	PageMetadata,
+	provideMetadataReceiver,
+	setPageMetadata,
+} from "@/scripts/page-metadata";
 
 defineProps<{
 	column: Column;
@@ -26,12 +38,12 @@ defineProps<{
 }>();
 
 const emit = defineEmits<{
-	(ev: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void;
+	(ev: "parent-focus", direction: "up" | "down" | "left" | "right"): void;
 }>();
 
 let pageMetadata = $ref<null | ComputedRef<PageMetadata>>();
 
-provide('router', mainRouter);
+provide("router", mainRouter);
 provideMetadataReceiver((info) => {
 	pageMetadata = info;
 });
@@ -45,24 +57,36 @@ function onContextmenu(ev: MouseEvent) {
 	if (!ev.target) return;
 
 	const isLink = (el: HTMLElement) => {
-		if (el.tagName === 'A') return true;
+		if (el.tagName === "A") return true;
 		if (el.parentElement) {
 			return isLink(el.parentElement);
 		}
 	};
 	if (isLink(ev.target as HTMLElement)) return;
-	if (['INPUT', 'TEXTAREA', 'IMG', 'VIDEO', 'CANVAS'].includes((ev.target as HTMLElement).tagName) || (ev.target as HTMLElement).attributes['contenteditable']) return;
-	if (window.getSelection()?.toString() !== '') return;
+	if (
+		["INPUT", "TEXTAREA", "IMG", "VIDEO", "CANVAS"].includes(
+			(ev.target as HTMLElement).tagName
+		) ||
+		(ev.target as HTMLElement).attributes["contenteditable"]
+	)
+		return;
+	if (window.getSelection()?.toString() !== "") return;
 	const path = mainRouter.currentRoute.value.path;
-	os.contextMenu([{
-		type: 'label',
-		text: path,
-	}, {
-		icon: 'ph-browser ph-bold ph-lg',
-		text: i18n.ts.openInWindow,
-		action: () => {
-			os.pageWindow(path);
-		},
-	}], ev);
+	os.contextMenu(
+		[
+			{
+				type: "label",
+				text: path,
+			},
+			{
+				icon: "ph-browser ph-bold ph-lg",
+				text: i18n.ts.openInWindow,
+				action: () => {
+					os.pageWindow(path);
+				},
+			},
+		],
+		ev
+	);
 }
 </script>
diff --git a/packages/client/src/ui/deck/mentions-column.vue b/packages/client/src/ui/deck/mentions-column.vue
index 5510416d16..83eff7297f 100644
--- a/packages/client/src/ui/deck/mentions-column.vue
+++ b/packages/client/src/ui/deck/mentions-column.vue
@@ -1,16 +1,23 @@
 <template>
-<XColumn :column="column" :is-stacked="isStacked" @parent-focus="$event => emit('parent-focus', $event)">
-	<template #header><i class="ph-at ph-bold ph-lg" style="margin-right: 8px;"></i>{{ column.name }}</template>
+	<XColumn
+		:column="column"
+		:is-stacked="isStacked"
+		@parent-focus="($event) => emit('parent-focus', $event)"
+	>
+		<template #header
+			><i class="ph-at ph-bold ph-lg" style="margin-right: 8px"></i
+			>{{ column.name }}</template
+		>
 
-	<XNotes :pagination="pagination"/>
-</XColumn>
+		<XNotes :pagination="pagination" />
+	</XColumn>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import XColumn from './column.vue';
-import XNotes from '@/components/MkNotes.vue';
-import { Column } from './deck-store';
+import {} from "vue";
+import XColumn from "./column.vue";
+import XNotes from "@/components/MkNotes.vue";
+import { Column } from "./deck-store";
 
 defineProps<{
 	column: Column;
@@ -18,11 +25,11 @@ defineProps<{
 }>();
 
 const emit = defineEmits<{
-	(ev: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void;
+	(ev: "parent-focus", direction: "up" | "down" | "left" | "right"): void;
 }>();
 
 const pagination = {
-	endpoint: 'notes/mentions' as const,
+	endpoint: "notes/mentions" as const,
 	limit: 10,
 };
 </script>
diff --git a/packages/client/src/ui/deck/notifications-column.vue b/packages/client/src/ui/deck/notifications-column.vue
index 7e0e85a461..d003f08ef3 100644
--- a/packages/client/src/ui/deck/notifications-column.vue
+++ b/packages/client/src/ui/deck/notifications-column.vue
@@ -1,19 +1,27 @@
 <template>
-<XColumn :column="column" :is-stacked="isStacked" :menu="menu" @parent-focus="$event => emit('parent-focus', $event)">
-	<template #header><i class="ph-bell ph-bold ph-lg" style="margin-right: 8px;"></i>{{ column.name }}</template>
+	<XColumn
+		:column="column"
+		:is-stacked="isStacked"
+		:menu="menu"
+		@parent-focus="($event) => emit('parent-focus', $event)"
+	>
+		<template #header
+			><i class="ph-bell ph-bold ph-lg" style="margin-right: 8px"></i
+			>{{ column.name }}</template
+		>
 
-	<XNotifications :include-types="column.includingTypes"/>
-</XColumn>
+		<XNotifications :include-types="column.includingTypes" />
+	</XColumn>
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent } from 'vue';
-import XColumn from './column.vue';
-import { updateColumn } from './deck-store';
-import type { Column } from './deck-store';
-import XNotifications from '@/components/MkNotifications.vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
+import { defineAsyncComponent } from "vue";
+import XColumn from "./column.vue";
+import { updateColumn } from "./deck-store";
+import type { Column } from "./deck-store";
+import XNotifications from "@/components/MkNotifications.vue";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
 
 const props = defineProps<{
 	column: Column;
@@ -21,25 +29,34 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-	(ev: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void;
+	(ev: "parent-focus", direction: "up" | "down" | "left" | "right"): void;
 }>();
 
 function func(): void {
-	os.popup(defineAsyncComponent(() => import('@/components/MkNotificationSettingWindow.vue')), {
-		includingTypes: props.column.includingTypes,
-	}, {
-		done: async (res) => {
-			const { includingTypes } = res;
-			updateColumn(props.column.id, {
-				includingTypes: includingTypes,
-			});
+	os.popup(
+		defineAsyncComponent(
+			() => import("@/components/MkNotificationSettingWindow.vue")
+		),
+		{
+			includingTypes: props.column.includingTypes,
 		},
-	}, 'closed');
+		{
+			done: async (res) => {
+				const { includingTypes } = res;
+				updateColumn(props.column.id, {
+					includingTypes: includingTypes,
+				});
+			},
+		},
+		"closed"
+	);
 }
 
-const menu = [{
-	icon: 'ph-pencil ph-bold ph-lg',
-	text: i18n.ts.notificationSetting,
-	action: func,
-}];
+const menu = [
+	{
+		icon: "ph-pencil ph-bold ph-lg",
+		text: i18n.ts.notificationSetting,
+		action: func,
+	},
+];
 </script>
diff --git a/packages/client/src/ui/deck/tl-column.vue b/packages/client/src/ui/deck/tl-column.vue
index 280ab6c350..7e801dc990 100644
--- a/packages/client/src/ui/deck/tl-column.vue
+++ b/packages/client/src/ui/deck/tl-column.vue
@@ -1,33 +1,57 @@
 <template>
-<XColumn :menu="menu" :column="column" :is-stacked="isStacked" :indicated="indicated" @change-active-state="onChangeActiveState" @parent-focus="$event => emit('parent-focus', $event)">
-	<template #header>
-		<i v-if="column.tl === 'home'" class="ph-house ph-bold ph-lg"></i>
-		<i v-else-if="column.tl === 'local'" class="ph-chats-circle ph-bold ph-lg"></i>
-		<i v-else-if="column.tl === 'social'" class="ph-share-network ph-bold ph-lg"></i>
-		<i v-else-if="column.tl === 'global'" class="ph-planet ph-bold ph-lg"></i>
-		<span style="margin-left: 8px;">{{ column.name }}</span>
-	</template>
+	<XColumn
+		:menu="menu"
+		:column="column"
+		:is-stacked="isStacked"
+		:indicated="indicated"
+		@change-active-state="onChangeActiveState"
+		@parent-focus="($event) => emit('parent-focus', $event)"
+	>
+		<template #header>
+			<i v-if="column.tl === 'home'" class="ph-house ph-bold ph-lg"></i>
+			<i
+				v-else-if="column.tl === 'local'"
+				class="ph-chats-circle ph-bold ph-lg"
+			></i>
+			<i
+				v-else-if="column.tl === 'social'"
+				class="ph-share-network ph-bold ph-lg"
+			></i>
+			<i
+				v-else-if="column.tl === 'global'"
+				class="ph-planet ph-bold ph-lg"
+			></i>
+			<span style="margin-left: 8px">{{ column.name }}</span>
+		</template>
 
-	<div v-if="disabled" class="iwaalbte">
-		<p>
-			<i class="ph-minus-circle ph-bold ph-lg"></i>
-			{{ i18n.t('disabled-timeline.title') }}
-		</p>
-		<p class="desc">{{ i18n.t('disabled-timeline.description') }}</p>
-	</div>
-	<XTimeline v-else-if="column.tl" ref="timeline" :key="column.tl" :src="column.tl" @after="() => emit('loaded')" @queue="queueUpdated" @note="onNote"/>
-</XColumn>
+		<div v-if="disabled" class="iwaalbte">
+			<p>
+				<i class="ph-minus-circle ph-bold ph-lg"></i>
+				{{ i18n.t("disabled-timeline.title") }}
+			</p>
+			<p class="desc">{{ i18n.t("disabled-timeline.description") }}</p>
+		</div>
+		<XTimeline
+			v-else-if="column.tl"
+			ref="timeline"
+			:key="column.tl"
+			:src="column.tl"
+			@after="() => emit('loaded')"
+			@queue="queueUpdated"
+			@note="onNote"
+		/>
+	</XColumn>
 </template>
 
 <script lang="ts" setup>
-import { onMounted } from 'vue';
-import XColumn from './column.vue';
-import { removeColumn, updateColumn, Column } from './deck-store';
-import XTimeline from '@/components/MkTimeline.vue';
-import * as os from '@/os';
-import { $i } from '@/account';
-import { instance } from '@/instance';
-import { i18n } from '@/i18n';
+import { onMounted } from "vue";
+import XColumn from "./column.vue";
+import { removeColumn, updateColumn, Column } from "./deck-store";
+import XTimeline from "@/components/MkTimeline.vue";
+import * as os from "@/os";
+import { $i } from "@/account";
+import { instance } from "@/instance";
+import { i18n } from "@/i18n";
 
 const props = defineProps<{
 	column: Column;
@@ -35,8 +59,8 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-	(ev: 'loaded'): void;
-	(ev: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void;
+	(ev: "loaded"): void;
+	(ev: "parent-focus", direction: "up" | "down" | "left" | "right"): void;
 }>();
 
 let disabled = $ref(false);
@@ -47,27 +71,43 @@ onMounted(() => {
 	if (props.column.tl == null) {
 		setType();
 	} else if ($i) {
-		disabled = !$i.isModerator && !$i.isAdmin && (
-			instance.disableLocalTimeline && ['local', 'social'].includes(props.column.tl) ||
-			instance.disableRecommendedTimeline && ['recommended'].includes(props.column.tl) ||
-			instance.disableGlobalTimeline && ['global'].includes(props.column.tl));
+		disabled =
+			!$i.isModerator &&
+			!$i.isAdmin &&
+			((instance.disableLocalTimeline &&
+				["local", "social"].includes(props.column.tl)) ||
+				(instance.disableRecommendedTimeline &&
+					["recommended"].includes(props.column.tl)) ||
+				(instance.disableGlobalTimeline &&
+					["global"].includes(props.column.tl)));
 	}
 });
 
 async function setType() {
 	const { canceled, result: src } = await os.select({
 		title: i18n.ts.timeline,
-		items: [{
-			value: 'home' as const, text: i18n.ts._timelines.home,
-		}, {
-			value: 'local' as const, text: i18n.ts._timelines.local,
-		}, {
-			value: 'recommended' as const, text: i18n.ts._timelines.recommended,
-		}, {
-			value: 'social' as const, text: i18n.ts._timelines.social,
-		}, {
-			value: 'global' as const, text: i18n.ts._timelines.global,
-		}],
+		items: [
+			{
+				value: "home" as const,
+				text: i18n.ts._timelines.home,
+			},
+			{
+				value: "local" as const,
+				text: i18n.ts._timelines.local,
+			},
+			{
+				value: "recommended" as const,
+				text: i18n.ts._timelines.recommended,
+			},
+			{
+				value: "social" as const,
+				text: i18n.ts._timelines.social,
+			},
+			{
+				value: "global" as const,
+				text: i18n.ts._timelines.global,
+			},
+		],
 	});
 	if (canceled) {
 		if (props.column.tl == null) {
@@ -100,11 +140,13 @@ function onChangeActiveState(state) {
 	}
 }
 
-const menu = [{
-	icon: 'ph-pencil ph-bold ph-lg',
-	text: i18n.ts.timeline,
-	action: setType,
-}];
+const menu = [
+	{
+		icon: "ph-pencil ph-bold ph-lg",
+		text: i18n.ts.timeline,
+		action: setType,
+	},
+];
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/ui/deck/widgets-column.vue b/packages/client/src/ui/deck/widgets-column.vue
index 50a53ec63c..8bfd40cf49 100644
--- a/packages/client/src/ui/deck/widgets-column.vue
+++ b/packages/client/src/ui/deck/widgets-column.vue
@@ -1,20 +1,48 @@
 <template>
-	<XColumn :menu="menu" :naked="true" :column="column" :is-stacked="isStacked" @parent-focus="$event => emit('parent-focus', $event)">
-		<template #header><i class="ph-browser ph-bold ph-lg" style="margin-right: 8px;"></i>{{ column.name }}</template>
+	<XColumn
+		:menu="menu"
+		:naked="true"
+		:column="column"
+		:is-stacked="isStacked"
+		@parent-focus="($event) => emit('parent-focus', $event)"
+	>
+		<template #header
+			><i class="ph-browser ph-bold ph-lg" style="margin-right: 8px"></i
+			>{{ column.name }}</template
+		>
 		<div class="wtdtxvec">
-			<MkAd class="a" :prefer="['widget']"/>
-			<div v-if="!(column.widgets && column.widgets.length > 0) && !edit" class="intro">{{ i18n.ts._deck.widgetsIntroduction }}</div>
-			<XWidgets :edit="edit" :widgets="column.widgets" @add-widget="addWidget" @remove-widget="removeWidget" @update-widget="updateWidget" @update-widgets="updateWidgets" @exit="edit = false"/>
+			<MkAd class="a" :prefer="['widget']" />
+			<div
+				v-if="!(column.widgets && column.widgets.length > 0) && !edit"
+				class="intro"
+			>
+				{{ i18n.ts._deck.widgetsIntroduction }}
+			</div>
+			<XWidgets
+				:edit="edit"
+				:widgets="column.widgets"
+				@add-widget="addWidget"
+				@remove-widget="removeWidget"
+				@update-widget="updateWidget"
+				@update-widgets="updateWidgets"
+				@exit="edit = false"
+			/>
 		</div>
 	</XColumn>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import XColumn from './column.vue';
-import { addColumnWidget, Column, removeColumnWidget, setColumnWidgets, updateColumnWidget } from './deck-store';
-import XWidgets from '@/components/MkWidgets.vue';
-import { i18n } from '@/i18n';
+import {} from "vue";
+import XColumn from "./column.vue";
+import {
+	addColumnWidget,
+	Column,
+	removeColumnWidget,
+	setColumnWidgets,
+	updateColumnWidget,
+} from "./deck-store";
+import XWidgets from "@/components/MkWidgets.vue";
+import { i18n } from "@/i18n";
 
 const props = defineProps<{
 	column: Column;
@@ -22,7 +50,7 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-	(ev: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void;
+	(ev: "parent-focus", direction: "up" | "down" | "left" | "right"): void;
 }>();
 
 let edit = $ref(false);
@@ -47,11 +75,13 @@ function func() {
 	edit = !edit;
 }
 
-const menu = [{
-	icon: 'ph-pencil ph-bold ph-lg',
-	text: i18n.ts.editWidgets,
-	action: func,
-}];
+const menu = [
+	{
+		icon: "ph-pencil ph-bold ph-lg",
+		text: i18n.ts.editWidgets,
+		action: func,
+	},
+];
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/ui/universal.vue b/packages/client/src/ui/universal.vue
index 3912340978..2fb0adb3a7 100644
--- a/packages/client/src/ui/universal.vue
+++ b/packages/client/src/ui/universal.vue
@@ -1,114 +1,197 @@
 <template>
-<div class="dkgtipfy" :class="{ wallpaper, isMobile }">
-	<XSidebar v-if="!isMobile" class="sidebar"/>
+	<div class="dkgtipfy" :class="{ wallpaper, isMobile }">
+		<XSidebar v-if="!isMobile" class="sidebar" />
 
-	<MkStickyContainer class="contents">
-		<template #header><XStatusBars :class="$style.statusbars"/></template>
-		<main id="maincontent" style="min-width: 0;" :style="{ background: pageMetadata?.value?.bg }" @contextmenu.stop="onContextmenu">
-			<div :class="$style.content">
-				<RouterView/>
-			</div>
-			<div :class="$style.spacer"></div>
-		</main>
-	</MkStickyContainer>
+		<MkStickyContainer class="contents">
+			<template #header
+				><XStatusBars :class="$style.statusbars"
+			/></template>
+			<main
+				id="maincontent"
+				style="min-width: 0"
+				:style="{ background: pageMetadata?.value?.bg }"
+				@contextmenu.stop="onContextmenu"
+			>
+				<div :class="$style.content">
+					<RouterView />
+				</div>
+				<div :class="$style.spacer"></div>
+			</main>
+		</MkStickyContainer>
 
-	<div v-if="isDesktop" ref="widgetsEl" class="widgets">
-		<XWidgets @mounted="attachSticky"/>
+		<div v-if="isDesktop" ref="widgetsEl" class="widgets">
+			<XWidgets @mounted="attachSticky" />
+		</div>
+
+		<button
+			v-if="!isDesktop && !isMobile"
+			class="widgetButton _button"
+			@click="widgetsShowing = true"
+		>
+			<i class="ph-stack ph-bold ph-lg"></i>
+		</button>
+
+		<div v-if="isMobile" class="buttons">
+			<button
+				class="button nav _button"
+				@click="drawerMenuShowing = true"
+			>
+				<div class="button-wrapper">
+					<i class="ph-list ph-bold ph-lg"></i
+					><span v-if="menuIndicated" class="indicator"
+						><i class="ph-circle ph-fill"></i
+					></span>
+				</div>
+			</button>
+			<button
+				class="button home _button"
+				@click="
+					mainRouter.currentRoute.value.name === 'index'
+						? top()
+						: mainRouter.push('/');
+					updateButtonState();
+				"
+			>
+				<div
+					class="button-wrapper"
+					:class="buttonAnimIndex === 0 ? 'on' : ''"
+				>
+					<i class="ph-house ph-bold ph-lg"></i>
+				</div>
+			</button>
+			<button
+				class="button notifications _button"
+				@click="
+					mainRouter.push('/my/notifications');
+					updateButtonState();
+				"
+			>
+				<div
+					class="button-wrapper"
+					:class="buttonAnimIndex === 1 ? 'on' : ''"
+				>
+					<i class="ph-bell ph-bold ph-lg"></i
+					><span v-if="$i?.hasUnreadNotification" class="indicator"
+						><i class="ph-circle ph-fill"></i
+					></span>
+				</div>
+			</button>
+			<button
+				class="button messaging _button"
+				@click="
+					mainRouter.push('/my/messaging');
+					updateButtonState();
+				"
+			>
+				<div
+					class="button-wrapper"
+					:class="buttonAnimIndex === 2 ? 'on' : ''"
+				>
+					<i class="ph-chats-teardrop ph-bold ph-lg"></i
+					><span
+						v-if="$i?.hasUnreadMessagingMessage"
+						class="indicator"
+						><i class="ph-circle ph-fill"></i
+					></span>
+				</div>
+			</button>
+			<button
+				class="button widget _button"
+				@click="widgetsShowing = true"
+			>
+				<div class="button-wrapper">
+					<i class="ph-stack ph-bold ph-lg"></i>
+				</div>
+			</button>
+		</div>
+
+		<button
+			v-if="isMobile && mainRouter.currentRoute.value.name === 'index'"
+			ref="postButton"
+			class="postButton button post _button"
+			@click="os.post()"
+		>
+			<i class="ph-pencil ph-bold ph-lg"></i>
+		</button>
+		<button
+			v-if="
+				isMobile && mainRouter.currentRoute.value.name === 'messaging'
+			"
+			ref="postButton"
+			class="postButton button post _button"
+			@click="messagingStart"
+		>
+			<i class="ph-user-plus ph-bold ph-lg"></i>
+		</button>
+
+		<transition :name="$store.state.animation ? 'menuDrawer-back' : ''">
+			<div
+				v-if="drawerMenuShowing"
+				class="menuDrawer-back _modalBg"
+				@click="drawerMenuShowing = false"
+				@touchstart.passive="drawerMenuShowing = false"
+			></div>
+		</transition>
+
+		<transition :name="$store.state.animation ? 'menuDrawer' : ''">
+			<XDrawerMenu v-if="drawerMenuShowing" class="menuDrawer" />
+		</transition>
+
+		<transition :name="$store.state.animation ? 'widgetsDrawer-back' : ''">
+			<div
+				v-if="widgetsShowing"
+				class="widgetsDrawer-back _modalBg"
+				@click="widgetsShowing = false"
+				@touchstart.passive="widgetsShowing = false"
+			></div>
+		</transition>
+
+		<transition :name="$store.state.animation ? 'widgetsDrawer' : ''">
+			<XWidgets v-if="widgetsShowing" class="widgetsDrawer" />
+		</transition>
+
+		<XCommon />
 	</div>
-
-	<button v-if="!isDesktop && !isMobile" class="widgetButton _button" @click="widgetsShowing = true"><i class="ph-stack ph-bold ph-lg"></i></button>
-
-	<div v-if="isMobile" class="buttons">
-		<button class="button nav _button" @click="drawerMenuShowing = true">
-			<div class="button-wrapper">
-				<i class="ph-list ph-bold ph-lg"></i><span v-if="menuIndicated" class="indicator"><i class="ph-circle ph-fill"></i></span>
-			</div>
-		</button>
-		<button class="button home _button" @click="mainRouter.currentRoute.value.name === 'index' ? top() : mainRouter.push('/'); updateButtonState();">
-			<div class="button-wrapper" :class="buttonAnimIndex === 0 ? 'on' : ''">
-				<i class="ph-house ph-bold ph-lg"></i>
-			</div>
-		</button>
-		<button class="button notifications _button" @click="mainRouter.push('/my/notifications'); updateButtonState();">
-			<div class="button-wrapper" :class="buttonAnimIndex === 1 ? 'on' : ''">
-				<i class="ph-bell ph-bold ph-lg"></i><span v-if="$i?.hasUnreadNotification" class="indicator"><i class="ph-circle ph-fill"></i></span>
-			</div>
-		</button>
-		<button class="button messaging _button" @click="mainRouter.push('/my/messaging'); updateButtonState();">
-			<div class="button-wrapper" :class="buttonAnimIndex === 2 ? 'on' : ''">
-				<i class="ph-chats-teardrop ph-bold ph-lg"></i><span v-if="$i?.hasUnreadMessagingMessage" class="indicator"><i class="ph-circle ph-fill"></i></span>
-			</div>
-		</button>
-		<button class="button widget _button" @click="widgetsShowing = true">
-			<div class="button-wrapper">
-				<i class="ph-stack ph-bold ph-lg"></i>
-			</div>
-		</button>
-	</div>
-
-	<button v-if="isMobile && mainRouter.currentRoute.value.name === 'index'" ref="postButton" class="postButton button post _button" @click="os.post()"><i class="ph-pencil ph-bold ph-lg"></i></button>
-	<button v-if="isMobile && mainRouter.currentRoute.value.name === 'messaging'" ref="postButton" class="postButton button post _button" @click="messagingStart"><i class="ph-user-plus ph-bold ph-lg"></i></button>
-
-	<transition :name="$store.state.animation ? 'menuDrawer-back' : ''">
-		<div
-			v-if="drawerMenuShowing"
-			class="menuDrawer-back _modalBg"
-			@click="drawerMenuShowing = false"
-			@touchstart.passive="drawerMenuShowing = false"
-		></div>
-	</transition>
-
-	<transition :name="$store.state.animation ? 'menuDrawer' : ''">
-		<XDrawerMenu v-if="drawerMenuShowing" class="menuDrawer"/>
-	</transition>
-
-	<transition :name="$store.state.animation ? 'widgetsDrawer-back' : ''">
-		<div
-			v-if="widgetsShowing"
-			class="widgetsDrawer-back _modalBg"
-			@click="widgetsShowing = false"
-			@touchstart.passive="widgetsShowing = false"
-		></div>
-	</transition>
-
-	<transition :name="$store.state.animation ? 'widgetsDrawer' : ''">
-		<XWidgets v-if="widgetsShowing" class="widgetsDrawer"/>
-	</transition>
-
-	<XCommon/>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent, provide, onMounted, computed, ref } from 'vue';
-import XCommon from './_common_/common.vue';
-import * as Acct from 'calckey-js/built/acct';
-import type { ComputedRef } from 'vue';
-import type { PageMetadata } from '@/scripts/page-metadata';
-import { instanceName } from '@/config';
-import { StickySidebar } from '@/scripts/sticky-sidebar';
-import XDrawerMenu from '@/ui/_common_/navbar-for-mobile.vue';
-import * as os from '@/os';
-import { defaultStore } from '@/store';
-import { navbarItemDef } from '@/navbar';
-import { i18n } from '@/i18n';
-import { $i } from '@/account';
-import { mainRouter } from '@/router';
-import { provideMetadataReceiver, setPageMetadata } from '@/scripts/page-metadata';
-import { deviceKind } from '@/scripts/device-kind';
+import { defineAsyncComponent, provide, onMounted, computed, ref } from "vue";
+import XCommon from "./_common_/common.vue";
+import * as Acct from "calckey-js/built/acct";
+import type { ComputedRef } from "vue";
+import type { PageMetadata } from "@/scripts/page-metadata";
+import { instanceName } from "@/config";
+import { StickySidebar } from "@/scripts/sticky-sidebar";
+import XDrawerMenu from "@/ui/_common_/navbar-for-mobile.vue";
+import * as os from "@/os";
+import { defaultStore } from "@/store";
+import { navbarItemDef } from "@/navbar";
+import { i18n } from "@/i18n";
+import { $i } from "@/account";
+import { mainRouter } from "@/router";
+import {
+	provideMetadataReceiver,
+	setPageMetadata,
+} from "@/scripts/page-metadata";
+import { deviceKind } from "@/scripts/device-kind";
 
-const XWidgets = defineAsyncComponent(() => import('./universal.widgets.vue'));
-const XSidebar = defineAsyncComponent(() => import('@/ui/_common_/navbar.vue'));
-const XStatusBars = defineAsyncComponent(() => import('@/ui/_common_/statusbars.vue'));
+const XWidgets = defineAsyncComponent(() => import("./universal.widgets.vue"));
+const XSidebar = defineAsyncComponent(() => import("@/ui/_common_/navbar.vue"));
+const XStatusBars = defineAsyncComponent(
+	() => import("@/ui/_common_/statusbars.vue")
+);
 
 const DESKTOP_THRESHOLD = 1100;
 const MOBILE_THRESHOLD = 500;
 
 // デスクトップでウィンドウを狭くしたときモバイルUIが表示されて欲しいことはあるので deviceKind === 'desktop' の判定は行わない
 const isDesktop = ref(window.innerWidth >= DESKTOP_THRESHOLD);
-const isMobile = ref(deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD);
-window.addEventListener('resize', () => {
-	isMobile.value = deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD;
+const isMobile = ref(
+	deviceKind === "smartphone" || window.innerWidth <= MOBILE_THRESHOLD
+);
+window.addEventListener("resize", () => {
+	isMobile.value =
+		deviceKind === "smartphone" || window.innerWidth <= MOBILE_THRESHOLD;
 });
 
 const buttonAnimIndex = ref(0);
@@ -119,7 +202,7 @@ const widgetsEl = $ref<HTMLElement>();
 const postButton = $ref<HTMLElement>();
 const widgetsShowing = $ref(false);
 
-provide('router', mainRouter);
+provide("router", mainRouter);
 provideMetadataReceiver((info) => {
 	pageMetadata = info;
 	if (pageMetadata.value) {
@@ -129,7 +212,7 @@ provideMetadataReceiver((info) => {
 
 const menuIndicated = computed(() => {
 	for (const def in navbarItemDef) {
-		if (def === 'notifications') continue; // 通知は下にボタンとして表示されてるから
+		if (def === "notifications") continue; // 通知は下にボタンとして表示されてるから
 		if (navbarItemDef[def].indicated) return true;
 	}
 	return false;
@@ -137,15 +220,15 @@ const menuIndicated = computed(() => {
 
 function updateButtonState(): void {
 	let routerState = window.location.pathname;
-	if (routerState === '/') {
+	if (routerState === "/") {
 		buttonAnimIndex.value = 0;
 		return;
 	}
-	if (routerState.includes('/my/notifications')) {
+	if (routerState.includes("/my/notifications")) {
 		buttonAnimIndex.value = 1;
 		return;
 	}
-	if (routerState.includes('/my/messaging')) {
+	if (routerState.includes("/my/messaging")) {
 		buttonAnimIndex.value = 2;
 		return;
 	}
@@ -155,55 +238,77 @@ function updateButtonState(): void {
 
 updateButtonState();
 
-mainRouter.on('change', () => {
+mainRouter.on("change", () => {
 	drawerMenuShowing.value = false;
 	updateButtonState();
 });
 
-document.documentElement.style.overflowY = 'scroll';
+document.documentElement.style.overflowY = "scroll";
 
 if (defaultStore.state.widgets.length === 0) {
-	defaultStore.set('widgets', [{
-		name: 'calendar',
-		id: 'a', place: 'right', data: {},
-	}, {
-		name: 'notifications',
-		id: 'b', place: 'right', data: {},
-	}, {
-		name: 'trends',
-		id: 'c', place: 'right', data: {},
-	}]);
+	defaultStore.set("widgets", [
+		{
+			name: "calendar",
+			id: "a",
+			place: "right",
+			data: {},
+		},
+		{
+			name: "notifications",
+			id: "b",
+			place: "right",
+			data: {},
+		},
+		{
+			name: "trends",
+			id: "c",
+			place: "right",
+			data: {},
+		},
+	]);
 }
 
 function messagingStart(ev) {
-	os.popupMenu([{
-		text: i18n.ts.messagingWithUser,
-		icon: 'ph-user ph-bold ph-lg',
-		action: () => { startUser(); },
-	}, {
-		text: i18n.ts.messagingWithGroup,
-		icon: 'ph-users-three ph-bold ph-lg',
-		action: () => { startGroup(); },
-	}, {
-		text: i18n.ts.manageGroups,
-		icon: 'ph-user-circle-gear ph-bold ph-lg',
-		action: () => { mainRouter.push('/my/groups'); },
-	}], ev.currentTarget ?? ev.target);
+	os.popupMenu(
+		[
+			{
+				text: i18n.ts.messagingWithUser,
+				icon: "ph-user ph-bold ph-lg",
+				action: () => {
+					startUser();
+				},
+			},
+			{
+				text: i18n.ts.messagingWithGroup,
+				icon: "ph-users-three ph-bold ph-lg",
+				action: () => {
+					startGroup();
+				},
+			},
+			{
+				text: i18n.ts.manageGroups,
+				icon: "ph-user-circle-gear ph-bold ph-lg",
+				action: () => {
+					mainRouter.push("/my/groups");
+				},
+			},
+		],
+		ev.currentTarget ?? ev.target
+	);
 }
 
-
 async function startUser(): void {
-	os.selectUser().then(user => {
+	os.selectUser().then((user) => {
 		mainRouter.push(`/my/messaging/${Acct.toString(user)}`);
 	});
 }
 
 async function startGroup(): void {
-	const groups1 = await os.api('users/groups/owned');
-	const groups2 = await os.api('users/groups/joined');
+	const groups1 = await os.api("users/groups/owned");
+	const groups2 = await os.api("users/groups/joined");
 	if (groups1.length === 0 && groups2.length === 0) {
 		os.alert({
-			type: 'warning',
+			type: "warning",
 			title: i18n.ts.youHaveNoGroups,
 			text: i18n.ts.joinOrCreateGroup,
 		});
@@ -211,8 +316,9 @@ async function startGroup(): void {
 	}
 	const { canceled, result: group } = await os.select({
 		title: i18n.ts.group,
-		items: groups1.concat(groups2).map(group => ({
-			value: group, text: group.name,
+		items: groups1.concat(groups2).map((group) => ({
+			value: group,
+			text: group.name,
 		})),
 	});
 	if (canceled) return;
@@ -221,47 +327,68 @@ async function startGroup(): void {
 
 onMounted(() => {
 	if (!isDesktop.value) {
-		window.addEventListener('resize', () => {
-			if (window.innerWidth >= DESKTOP_THRESHOLD) isDesktop.value = true;
-		}, { passive: true });
+		window.addEventListener(
+			"resize",
+			() => {
+				if (window.innerWidth >= DESKTOP_THRESHOLD)
+					isDesktop.value = true;
+			},
+			{ passive: true }
+		);
 	}
 });
 
 const onContextmenu = (ev: MouseEvent) => {
 	const isLink = (el: HTMLElement) => {
-		if (el.tagName === 'A') return true;
+		if (el.tagName === "A") return true;
 		if (el.parentElement) {
 			return isLink(el.parentElement);
 		}
 	};
 	if (isLink(ev.target)) return;
-	if (['INPUT', 'TEXTAREA', 'IMG', 'VIDEO', 'CANVAS'].includes(ev.target.tagName) || ev.target.attributes['contenteditable']) return;
-	if (window.getSelection()?.toString() !== '') return;
+	if (
+		["INPUT", "TEXTAREA", "IMG", "VIDEO", "CANVAS"].includes(
+			ev.target.tagName
+		) ||
+		ev.target.attributes["contenteditable"]
+	)
+		return;
+	if (window.getSelection()?.toString() !== "") return;
 	const path = mainRouter.getCurrentPath();
-	os.contextMenu([{
-		type: 'label',
-		text: path,
-	}, {
-		icon: 'ph-browser ph-bold ph-lg',
-		text: i18n.ts.openInWindow,
-		action: () => {
-			os.pageWindow(path);
-		},
-	}], ev);
+	os.contextMenu(
+		[
+			{
+				type: "label",
+				text: path,
+			},
+			{
+				icon: "ph-browser ph-bold ph-lg",
+				text: i18n.ts.openInWindow,
+				action: () => {
+					os.pageWindow(path);
+				},
+			},
+		],
+		ev
+	);
 };
 
 const attachSticky = (el: any) => {
 	const sticky = new StickySidebar(widgetsEl);
-	window.addEventListener('scroll', () => {
-		sticky.calc(window.scrollY);
-	}, { passive: true });
+	window.addEventListener(
+		"scroll",
+		() => {
+			sticky.calc(window.scrollY);
+		},
+		{ passive: true }
+	);
 };
 
 function top() {
-	window.scroll({ top: 0, behavior: 'smooth' });
+	window.scroll({ top: 0, behavior: "smooth" });
 }
 
-const wallpaper = localStorage.getItem('wallpaper') != null;
+const wallpaper = localStorage.getItem("wallpaper") != null;
 console.log(mainRouter.currentRoute.value.name);
 </script>
 
@@ -270,7 +397,8 @@ console.log(mainRouter.currentRoute.value.name);
 .widgetsDrawer-leave-active {
 	opacity: 1;
 	transform: translateX(0);
-	transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
+	transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1),
+		opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
 }
 .widgetsDrawer-enter-from,
 .widgetsDrawer-leave-active {
@@ -292,7 +420,8 @@ console.log(mainRouter.currentRoute.value.name);
 .menuDrawer-leave-active {
 	opacity: 1;
 	transform: translateX(0);
-	transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
+	transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1),
+		opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
 }
 .menuDrawer-enter-from,
 .menuDrawer-leave-active {
@@ -366,7 +495,8 @@ console.log(mainRouter.currentRoute.value.name);
 		background: var(--bg);
 	}
 
-	> .postButton, .widgetButton {
+	> .postButton,
+	.widgetButton {
 		bottom: var(--stickyBottom);
 		right: 1.5rem;
 		height: 4rem;
diff --git a/packages/client/src/ui/universal.widgets.vue b/packages/client/src/ui/universal.widgets.vue
index 2daa6916f6..8144d3aae5 100644
--- a/packages/client/src/ui/universal.widgets.vue
+++ b/packages/client/src/ui/universal.widgets.vue
@@ -1,49 +1,84 @@
 <template>
 	<div class="efzpzdvf">
-		<MkAd class="a" :prefer="['widget']"/>
-		<XWidgets :edit="editMode" :widgets="defaultStore.reactiveState.widgets.value" @add-widget="addWidget" @remove-widget="removeWidget" @update-widget="updateWidget" @update-widgets="updateWidgets" @exit="editMode = false"/>
-		<button v-if="editMode" class="_textButton" style="font-size: 0.9em;" @click="editMode = false"><i class="ph-check ph-bold ph-lg"></i> {{ i18n.ts.editWidgetsExit }}</button>
-		<button v-else class="_textButton mk-widget-edit" style="font-size: 0.9em;" @click="editMode = true"><i class="ph-pencil ph-bold ph-lg"></i> {{ i18n.ts.editWidgets }}</button>
+		<MkAd class="a" :prefer="['widget']" />
+		<XWidgets
+			:edit="editMode"
+			:widgets="defaultStore.reactiveState.widgets.value"
+			@add-widget="addWidget"
+			@remove-widget="removeWidget"
+			@update-widget="updateWidget"
+			@update-widgets="updateWidgets"
+			@exit="editMode = false"
+		/>
+		<button
+			v-if="editMode"
+			class="_textButton"
+			style="font-size: 0.9em"
+			@click="editMode = false"
+		>
+			<i class="ph-check ph-bold ph-lg"></i> {{ i18n.ts.editWidgetsExit }}
+		</button>
+		<button
+			v-else
+			class="_textButton mk-widget-edit"
+			style="font-size: 0.9em"
+			@click="editMode = true"
+		>
+			<i class="ph-pencil ph-bold ph-lg"></i> {{ i18n.ts.editWidgets }}
+		</button>
 	</div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted } from 'vue';
-import XWidgets from '@/components/MkWidgets.vue';
-import { i18n } from '@/i18n';
-import { defaultStore } from '@/store';
+import { onMounted } from "vue";
+import XWidgets from "@/components/MkWidgets.vue";
+import { i18n } from "@/i18n";
+import { defaultStore } from "@/store";
 
 const emit = defineEmits<{
-	(ev: 'mounted', el: Element): void;
+	(ev: "mounted", el: Element): void;
 }>();
 
 let editMode = $ref(false);
 let rootEl = $ref<HTMLDivElement>();
 
 onMounted(() => {
-	emit('mounted', rootEl);
+	emit("mounted", rootEl);
 });
 
 function addWidget(widget) {
-	defaultStore.set('widgets', [{
-		...widget,
-		place: null,
-	}, ...defaultStore.state.widgets]);
+	defaultStore.set("widgets", [
+		{
+			...widget,
+			place: null,
+		},
+		...defaultStore.state.widgets,
+	]);
 }
 
 function removeWidget(widget) {
-	defaultStore.set('widgets', defaultStore.state.widgets.filter(w => w.id !== widget.id));
+	defaultStore.set(
+		"widgets",
+		defaultStore.state.widgets.filter((w) => w.id !== widget.id)
+	);
 }
 
 function updateWidget({ id, data }) {
-	defaultStore.set('widgets', defaultStore.state.widgets.map(w => w.id === id ? {
-		...w,
-		data,
-	} : w));
+	defaultStore.set(
+		"widgets",
+		defaultStore.state.widgets.map((w) =>
+			w.id === id
+				? {
+						...w,
+						data,
+				  }
+				: w
+		)
+	);
 }
 
 function updateWidgets(widgets) {
-	defaultStore.set('widgets', widgets);
+	defaultStore.set("widgets", widgets);
 }
 </script>
 
diff --git a/packages/client/src/ui/visitor.vue b/packages/client/src/ui/visitor.vue
index 767c9ddbb5..a00813415a 100644
--- a/packages/client/src/ui/visitor.vue
+++ b/packages/client/src/ui/visitor.vue
@@ -1,14 +1,14 @@
 <template>
-<DesignB/>
-<XCommon/>
+	<DesignB />
+	<XCommon />
 </template>
 
 <script lang="ts">
-import { defineComponent, defineAsyncComponent } from 'vue';
-import DesignA from './visitor/a.vue';
-import DesignB from './visitor/b.vue';
-import XCommon from './_common_/common.vue';
-import { i18n } from '@/i18n';
+import { defineComponent, defineAsyncComponent } from "vue";
+import DesignA from "./visitor/a.vue";
+import DesignB from "./visitor/b.vue";
+import XCommon from "./_common_/common.vue";
+import { i18n } from "@/i18n";
 
 export default defineComponent({
 	components: {
diff --git a/packages/client/src/ui/visitor/a.vue b/packages/client/src/ui/visitor/a.vue
index 1481b80a00..3894a991dd 100644
--- a/packages/client/src/ui/visitor/a.vue
+++ b/packages/client/src/ui/visitor/a.vue
@@ -1,51 +1,91 @@
 <template>
-<div class="mk-app">
-	<div v-if="mainRouter.currentRoute?.name === 'index'" class="banner" :style="{ backgroundImage: `url(${ $instance.bannerUrl })` }">
-		<div>
-			<h1 v-if="meta"><img v-if="meta.logoImageUrl" class="logo" :src="meta.logoImageUrl"><span v-else class="text">{{ instanceName }}</span></h1>
-			<div v-if="meta" class="about">
-				<div class="desc" v-html="meta.description || i18n.ts.introMisskey"></div>
-			</div>
-			<div class="action">
-				<button class="_button primary" @click="signup()">{{ i18n.ts.signup }}</button>
-				<button class="_button" @click="signin()">{{ i18n.ts.login }}</button>
+	<div class="mk-app">
+		<div
+			v-if="mainRouter.currentRoute?.name === 'index'"
+			class="banner"
+			:style="{ backgroundImage: `url(${$instance.bannerUrl})` }"
+		>
+			<div>
+				<h1 v-if="meta">
+					<img
+						v-if="meta.logoImageUrl"
+						class="logo"
+						:src="meta.logoImageUrl"
+					/><span v-else class="text">{{ instanceName }}</span>
+				</h1>
+				<div v-if="meta" class="about">
+					<div
+						class="desc"
+						v-html="meta.description || i18n.ts.introMisskey"
+					></div>
+				</div>
+				<div class="action">
+					<button class="_button primary" @click="signup()">
+						{{ i18n.ts.signup }}
+					</button>
+					<button class="_button" @click="signin()">
+						{{ i18n.ts.login }}
+					</button>
+				</div>
 			</div>
 		</div>
-	</div>
-	<div v-else class="banner-mini" :style="{ backgroundImage: `url(${ $instance.bannerUrl })` }">
-		<div>
-			<h1 v-if="meta"><img v-if="meta.logoImageUrl" class="logo" :src="meta.logoImageUrl"><span v-else class="text">{{ instanceName }}</span></h1>
+		<div
+			v-else
+			class="banner-mini"
+			:style="{ backgroundImage: `url(${$instance.bannerUrl})` }"
+		>
+			<div>
+				<h1 v-if="meta">
+					<img
+						v-if="meta.logoImageUrl"
+						class="logo"
+						:src="meta.logoImageUrl"
+					/><span v-else class="text">{{ instanceName }}</span>
+				</h1>
+			</div>
 		</div>
-	</div>
 
-	<div class="main">
-		<div ref="contents" class="contents" :class="{ wallpaper }">
-			<header v-show="mainRouter.currentRoute?.name !== 'index'" ref="header" class="header">
-				<XHeader :info="pageInfo"/>
-			</header>
-			<main ref="main">
-				<RouterView/>
-			</main>
-			<div class="powered-by">
-				<b><MkA to="/">{{ host }}</MkA></b>
-				<small>Powered by <a href="https://codeberg.org/calckey/calckey" target="_blank">Calckey</a></small>
+		<div class="main">
+			<div ref="contents" class="contents" :class="{ wallpaper }">
+				<header
+					v-show="mainRouter.currentRoute?.name !== 'index'"
+					ref="header"
+					class="header"
+				>
+					<XHeader :info="pageInfo" />
+				</header>
+				<main ref="main">
+					<RouterView />
+				</main>
+				<div class="powered-by">
+					<b
+						><MkA to="/">{{ host }}</MkA></b
+					>
+					<small
+						>Powered by
+						<a
+							href="https://codeberg.org/calckey/calckey"
+							target="_blank"
+							>Calckey</a
+						></small
+					>
+				</div>
 			</div>
 		</div>
 	</div>
-</div>
 </template>
 
 <script lang="ts">
-import { defineComponent, defineAsyncComponent } from 'vue';
-import XHeader from './header.vue';
-import { host, instanceName } from '@/config';
-import { search } from '@/scripts/search';
-import * as os from '@/os';
-import MkPagination from '@/components/MkPagination.vue';
-import MkButton from '@/components/MkButton.vue';
-import { ColdDeviceStorage } from '@/store';
-import { mainRouter } from '@/router';
-import { i18n } from '@/i18n';
+import { defineComponent, defineAsyncComponent } from "vue";
+import XHeader from "./header.vue";
+import { host, instanceName } from "@/config";
+import { search } from "@/scripts/search";
+import * as os from "@/os";
+import MkPagination from "@/components/MkPagination.vue";
+import MkButton from "@/components/MkButton.vue";
+import { ColdDeviceStorage } from "@/store";
+import { mainRouter } from "@/router";
+import { i18n } from "@/i18n";
 
 const DESKTOP_THRESHOLD = 1100;
 
@@ -64,7 +104,7 @@ export default defineComponent({
 			meta: null,
 			narrow: window.innerWidth < 1280,
 			announcements: {
-				endpoint: 'announcements',
+				endpoint: "announcements",
 				limit: 10,
 			},
 			mainRouter,
@@ -76,29 +116,34 @@ export default defineComponent({
 	computed: {
 		keymap(): any {
 			return {
-				'd': () => {
-					if (ColdDeviceStorage.get('syncDeviceDarkMode')) return;
-					this.$store.set('darkMode', !this.$store.state.darkMode);
+				d: () => {
+					if (ColdDeviceStorage.get("syncDeviceDarkMode")) return;
+					this.$store.set("darkMode", !this.$store.state.darkMode);
 				},
-				's': search,
-				'h|/': this.help,
+				s: search,
+				"h|/": this.help,
 			};
 		},
 	},
 
 	created() {
-		document.documentElement.style.overflowY = 'scroll';
+		document.documentElement.style.overflowY = "scroll";
 
-		os.api('meta', { detail: true }).then(meta => {
+		os.api("meta", { detail: true }).then((meta) => {
 			this.meta = meta;
 		});
 	},
 
 	mounted() {
 		if (!this.isDesktop) {
-			window.addEventListener('resize', () => {
-				if (window.innerWidth >= DESKTOP_THRESHOLD) this.isDesktop = true;
-			}, { passive: true });
+			window.addEventListener(
+				"resize",
+				() => {
+					if (window.innerWidth >= DESKTOP_THRESHOLD)
+						this.isDesktop = true;
+				},
+				{ passive: true }
+			);
 		}
 	},
 
@@ -112,21 +157,20 @@ export default defineComponent({
 
 		changePage(page) {
 			if (page == null) return;
-			
+
 			if (page[symbols.PAGE_INFO]) {
-				
 				this.pageInfo = page[symbols.PAGE_INFO];
 			}
 		},
 
 		top() {
-			window.scroll({ top: 0, behavior: 'smooth' });
+			window.scroll({ top: 0, behavior: "smooth" });
 		},
 
 		help() {
 			// TODO(thatonecalculator): popup with keybinds
 			// window.open('https://misskey-hub.net/docs/keyboard-shortcut.md', '_blank');
-			console.log('d = dark/light mode, s = search, p = post :3');
+			console.log("d = dark/light mode, s = search, p = post :3");
 		},
 	},
 });
@@ -150,7 +194,7 @@ export default defineComponent({
 			* {
 				color: #fff;
 			}
-					
+
 			> h1 {
 				margin: 0;
 				padding: 96px 32px 0 32px;
@@ -172,7 +216,7 @@ export default defineComponent({
 
 			> .action {
 				padding-bottom: 64px;
-				
+
 				> button {
 					display: inline-block;
 					padding: 10px 20px;
@@ -213,9 +257,8 @@ export default defineComponent({
 			}
 
 			> header {
-				
 			}
-					
+
 			> h1 {
 				margin: 0;
 				padding: 32px;
@@ -258,5 +301,4 @@ export default defineComponent({
 }
 </style>
 
-<style lang="scss">
-</style>
+<style lang="scss"></style>
diff --git a/packages/client/src/ui/visitor/b.vue b/packages/client/src/ui/visitor/b.vue
index 3e72584a00..ba2206a487 100644
--- a/packages/client/src/ui/visitor/b.vue
+++ b/packages/client/src/ui/visitor/b.vue
@@ -1,71 +1,103 @@
 <template>
-<div class="mk-app">
-	<div v-if="!narrow && !root" class="side">
-		<XKanban class="kanban" full/>
-	</div>
+	<div class="mk-app">
+		<div v-if="!narrow && !root" class="side">
+			<XKanban class="kanban" full />
+		</div>
 
-	<div class="main">
-		<XKanban v-if="narrow && !root" class="banner" :powered-by="root"/>
+		<div class="main">
+			<XKanban v-if="narrow && !root" class="banner" :powered-by="root" />
 
-		<div class="contents">
-			<XHeader v-if="!root" class="header" :info="pageInfo"/>
-			<main>
-				<RouterView/>
-			</main>
-			<div v-if="!root" class="powered-by">
-				<b><MkA to="/">{{ host }}</MkA></b>
-				<small>Powered by <a href="https://codeberg.org/calckey/calckey" target="_blank">Calckey</a></small>
+			<div class="contents">
+				<XHeader v-if="!root" class="header" :info="pageInfo" />
+				<main>
+					<RouterView />
+				</main>
+				<div v-if="!root" class="powered-by">
+					<b
+						><MkA to="/">{{ host }}</MkA></b
+					>
+					<small
+						>Powered by
+						<a
+							href="https://codeberg.org/calckey/calckey"
+							target="_blank"
+							>Calckey</a
+						></small
+					>
+				</div>
 			</div>
 		</div>
-	</div>
 
-	<transition :name="$store.state.animation ? 'tray-back' : ''">
-		<div
-			v-if="showMenu"
-			class="menu-back _modalBg"
-			@click="showMenu = false"
-			@touchstart.passive="showMenu = false"
-		></div>
-	</transition>
+		<transition :name="$store.state.animation ? 'tray-back' : ''">
+			<div
+				v-if="showMenu"
+				class="menu-back _modalBg"
+				@click="showMenu = false"
+				@touchstart.passive="showMenu = false"
+			></div>
+		</transition>
 
-	<transition :name="$store.state.animation ? 'tray' : ''">
-		<div v-if="showMenu" class="menu">
-			<MkA to="/" class="link" active-class="active"><i class="ph-house ph-bold ph-lg icon"></i>{{ i18n.ts.home }}</MkA>
-			<MkA to="/explore" class="link" active-class="active"><i class="ph-compass ph-bold ph-lg icon"></i>{{ i18n.ts.explore }}</MkA>
-			<MkA to="/channels" class="link" active-class="active"><i class="ph-television ph-bold ph-lg icon"></i>{{ i18n.ts.channel }}</MkA>
-			<MkA to="/pages" class="link" active-class="active"><i class="ph-file-text ph-bold ph-lg icon"></i>{{ i18n.ts.pages }}</MkA>
-			<MkA to="/gallery" class="link" active-class="active"><i class="ph-image-square ph-bold ph-lg icon"></i>{{ i18n.ts.gallery }}</MkA>
-			<div class="action">
-				<button class="_buttonPrimary" @click="signup()">{{ i18n.ts.signup }}</button>
-				<button class="_button" @click="signin()">{{ i18n.ts.login }}</button>
+		<transition :name="$store.state.animation ? 'tray' : ''">
+			<div v-if="showMenu" class="menu">
+				<MkA to="/" class="link" active-class="active"
+					><i class="ph-house ph-bold ph-lg icon"></i
+					>{{ i18n.ts.home }}</MkA
+				>
+				<MkA to="/explore" class="link" active-class="active"
+					><i class="ph-compass ph-bold ph-lg icon"></i
+					>{{ i18n.ts.explore }}</MkA
+				>
+				<MkA to="/channels" class="link" active-class="active"
+					><i class="ph-television ph-bold ph-lg icon"></i
+					>{{ i18n.ts.channel }}</MkA
+				>
+				<MkA to="/pages" class="link" active-class="active"
+					><i class="ph-file-text ph-bold ph-lg icon"></i
+					>{{ i18n.ts.pages }}</MkA
+				>
+				<MkA to="/gallery" class="link" active-class="active"
+					><i class="ph-image-square ph-bold ph-lg icon"></i
+					>{{ i18n.ts.gallery }}</MkA
+				>
+				<div class="action">
+					<button class="_buttonPrimary" @click="signup()">
+						{{ i18n.ts.signup }}
+					</button>
+					<button class="_button" @click="signin()">
+						{{ i18n.ts.login }}
+					</button>
+				</div>
 			</div>
-		</div>
-	</transition>
-</div>
+		</transition>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { ComputedRef, onMounted, provide } from 'vue';
-import XHeader from './header.vue';
-import XKanban from './kanban.vue';
-import { host, instanceName } from '@/config';
-import { search } from '@/scripts/search';
-import * as os from '@/os';
-import { instance } from '@/instance';
-import MkPagination from '@/components/MkPagination.vue';
-import XSigninDialog from '@/components/MkSigninDialog.vue';
-import XSignupDialog from '@/components/MkSignupDialog.vue';
-import MkButton from '@/components/MkButton.vue';
-import { ColdDeviceStorage, defaultStore } from '@/store';
-import { mainRouter } from '@/router';
-import { PageMetadata, provideMetadataReceiver, setPageMetadata } from '@/scripts/page-metadata';
-import { i18n } from '@/i18n';
+import { ComputedRef, onMounted, provide } from "vue";
+import XHeader from "./header.vue";
+import XKanban from "./kanban.vue";
+import { host, instanceName } from "@/config";
+import { search } from "@/scripts/search";
+import * as os from "@/os";
+import { instance } from "@/instance";
+import MkPagination from "@/components/MkPagination.vue";
+import XSigninDialog from "@/components/MkSigninDialog.vue";
+import XSignupDialog from "@/components/MkSignupDialog.vue";
+import MkButton from "@/components/MkButton.vue";
+import { ColdDeviceStorage, defaultStore } from "@/store";
+import { mainRouter } from "@/router";
+import {
+	PageMetadata,
+	provideMetadataReceiver,
+	setPageMetadata,
+} from "@/scripts/page-metadata";
+import { i18n } from "@/i18n";
 
 const DESKTOP_THRESHOLD = 1000;
 
 let pageMetadata = $ref<null | ComputedRef<PageMetadata>>();
 
-provide('router', mainRouter);
+provide("router", mainRouter);
 provideMetadataReceiver((info) => {
 	pageMetadata = info;
 	if (pageMetadata.value) {
@@ -74,10 +106,13 @@ provideMetadataReceiver((info) => {
 });
 
 const announcements = {
-	endpoint: 'announcements',
+	endpoint: "announcements",
 	limit: 10,
 };
-const isTimelineAvailable = !instance.disableLocalTimeline || !instance.disableRecommendedTimeline || !instance.disableGlobalTimeline;
+const isTimelineAvailable =
+	!instance.disableLocalTimeline ||
+	!instance.disableRecommendedTimeline ||
+	!instance.disableGlobalTimeline;
 let showMenu = $ref(false);
 let isDesktop = $ref(window.innerWidth >= DESKTOP_THRESHOLD);
 let narrow = $ref(window.innerWidth < 1280);
@@ -85,37 +120,51 @@ let meta = $ref();
 
 const keymap = $computed(() => {
 	return {
-		'd': () => {
-			if (ColdDeviceStorage.get('syncDeviceDarkMode')) return;
-			defaultStore.set('darkMode', !defaultStore.state.darkMode);
+		d: () => {
+			if (ColdDeviceStorage.get("syncDeviceDarkMode")) return;
+			defaultStore.set("darkMode", !defaultStore.state.darkMode);
 		},
-		's': search,
+		s: search,
 	};
 });
 
-const root = $computed(() => mainRouter.currentRoute.value.name === 'index');
+const root = $computed(() => mainRouter.currentRoute.value.name === "index");
 
-os.api('meta', { detail: true }).then(res => {
+os.api("meta", { detail: true }).then((res) => {
 	meta = res;
 });
 
 function signin() {
-	os.popup(XSigninDialog, {
-		autoSet: true,
-	}, {}, 'closed');
+	os.popup(
+		XSigninDialog,
+		{
+			autoSet: true,
+		},
+		{},
+		"closed"
+	);
 }
 
 function signup() {
-	os.popup(XSignupDialog, {
-		autoSet: true,
-	}, {}, 'closed');
+	os.popup(
+		XSignupDialog,
+		{
+			autoSet: true,
+		},
+		{},
+		"closed"
+	);
 }
 
 onMounted(() => {
 	if (!isDesktop) {
-		window.addEventListener('resize', () => {
-			if (window.innerWidth >= DESKTOP_THRESHOLD) isDesktop = true;
-		}, { passive: true });
+		window.addEventListener(
+			"resize",
+			() => {
+				if (window.innerWidth >= DESKTOP_THRESHOLD) isDesktop = true;
+			},
+			{ passive: true }
+		);
 	}
 });
 
@@ -129,7 +178,8 @@ defineExpose({
 .tray-leave-active {
 	opacity: 1;
 	transform: translateX(0);
-	transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
+	transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1),
+		opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
 }
 .tray-enter-from,
 .tray-leave-active {
diff --git a/packages/client/src/ui/visitor/header.vue b/packages/client/src/ui/visitor/header.vue
index 00522134ac..e79bd288ef 100644
--- a/packages/client/src/ui/visitor/header.vue
+++ b/packages/client/src/ui/visitor/header.vue
@@ -1,59 +1,122 @@
 <template>
-<div class="sqxihjet">
-	<div v-if="narrow === false" class="wide">
-		<div class="content">
-			<MkA to="/" class="link" active-class="active"><i class="ph-house ph-bold ph-lg icon"></i>{{ i18n.ts.home }}</MkA>
-			<MkA v-if="isTimelineAvailable" to="/timeline" class="link" active-class="active"><i class="ph-chats-circle ph-bold ph-lg icon"></i>{{ i18n.ts.timeline }}</MkA>
-			<MkA to="/explore" class="link" active-class="active"><i class="ph-compass ph-bold ph-lg icon"></i>{{ i18n.ts.explore }}</MkA>
-			<MkA to="/channels" class="link" active-class="active"><i class="ph-television ph-bold ph-lg icon"></i>{{ i18n.ts.channel }}</MkA>
-			<MkA to="/pages" class="link" active-class="active"><i class="ph-file-text ph-bold ph-lg icon"></i>{{ i18n.ts.pages }}</MkA>
-			<MkA to="/gallery" class="link" active-class="active"><i class="ph-image-square ph-bold ph-lg icon"></i>{{ i18n.ts.gallery }}</MkA>
-			<div v-if="info" class="page active link">
-				<div class="title">
-					<i v-if="info.icon" class="icon" :class="info.icon"></i>
-					<MkAvatar v-else-if="info.avatar" class="avatar" :user="info.avatar" :disable-preview="true" :show-indicator="true"/>
-					<span v-if="info.title" class="text">{{ info.title }}</span>
-					<MkUserName v-else-if="info.userName" :user="info.userName" :nowrap="false" class="text"/>
+	<div class="sqxihjet">
+		<div v-if="narrow === false" class="wide">
+			<div class="content">
+				<MkA to="/" class="link" active-class="active"
+					><i class="ph-house ph-bold ph-lg icon"></i
+					>{{ i18n.ts.home }}</MkA
+				>
+				<MkA
+					v-if="isTimelineAvailable"
+					to="/timeline"
+					class="link"
+					active-class="active"
+					><i class="ph-chats-circle ph-bold ph-lg icon"></i
+					>{{ i18n.ts.timeline }}</MkA
+				>
+				<MkA to="/explore" class="link" active-class="active"
+					><i class="ph-compass ph-bold ph-lg icon"></i
+					>{{ i18n.ts.explore }}</MkA
+				>
+				<MkA to="/channels" class="link" active-class="active"
+					><i class="ph-television ph-bold ph-lg icon"></i
+					>{{ i18n.ts.channel }}</MkA
+				>
+				<MkA to="/pages" class="link" active-class="active"
+					><i class="ph-file-text ph-bold ph-lg icon"></i
+					>{{ i18n.ts.pages }}</MkA
+				>
+				<MkA to="/gallery" class="link" active-class="active"
+					><i class="ph-image-square ph-bold ph-lg icon"></i
+					>{{ i18n.ts.gallery }}</MkA
+				>
+				<div v-if="info" class="page active link">
+					<div class="title">
+						<i v-if="info.icon" class="icon" :class="info.icon"></i>
+						<MkAvatar
+							v-else-if="info.avatar"
+							class="avatar"
+							:user="info.avatar"
+							:disable-preview="true"
+							:show-indicator="true"
+						/>
+						<span v-if="info.title" class="text">{{
+							info.title
+						}}</span>
+						<MkUserName
+							v-else-if="info.userName"
+							:user="info.userName"
+							:nowrap="false"
+							class="text"
+						/>
+					</div>
+					<button
+						v-if="info.action"
+						class="_button action"
+						@click.stop="info.action.handler"
+					>
+						<!-- TODO -->
+					</button>
+				</div>
+				<div class="right">
+					<button class="_button search" @click="search()">
+						<i class="ph-magnifying-glass ph-bold ph-lg icon"></i
+						><span>{{ i18n.ts.search }}</span>
+					</button>
+					<button class="_buttonPrimary signup" @click="signup()">
+						{{ i18n.ts.signup }}
+					</button>
+					<button class="_button login" @click="signin()">
+						{{ i18n.ts.login }}
+					</button>
 				</div>
-				<button v-if="info.action" class="_button action" @click.stop="info.action.handler"><!-- TODO --></button>
-			</div>
-			<div class="right">
-				<button class="_button search" @click="search()"><i class="ph-magnifying-glass ph-bold ph-lg icon"></i><span>{{ i18n.ts.search }}</span></button>
-				<button class="_buttonPrimary signup" @click="signup()">{{ i18n.ts.signup }}</button>
-				<button class="_button login" @click="signin()">{{ i18n.ts.login }}</button>
 			</div>
 		</div>
-	</div>
-	<div v-else-if="narrow === true" class="narrow">
-		<button class="menu _button" @click="$parent.showMenu = true">
-			<i class="ph-list ph-bold ph-lg icon"></i>
-		</button>
-		<div v-if="info" class="title">
-			<i v-if="info.icon" class="icon" :class="info.icon"></i>
-			<MkAvatar v-else-if="info.avatar" class="avatar" :user="info.avatar" :disable-preview="true" :show-indicator="true"/>
-			<span v-if="info.title" class="text">{{ info.title }}</span>
-			<MkUserName v-else-if="info.userName" :user="info.userName" :nowrap="false" class="text"/>
+		<div v-else-if="narrow === true" class="narrow">
+			<button class="menu _button" @click="$parent.showMenu = true">
+				<i class="ph-list ph-bold ph-lg icon"></i>
+			</button>
+			<div v-if="info" class="title">
+				<i v-if="info.icon" class="icon" :class="info.icon"></i>
+				<MkAvatar
+					v-else-if="info.avatar"
+					class="avatar"
+					:user="info.avatar"
+					:disable-preview="true"
+					:show-indicator="true"
+				/>
+				<span v-if="info.title" class="text">{{ info.title }}</span>
+				<MkUserName
+					v-else-if="info.userName"
+					:user="info.userName"
+					:nowrap="false"
+					class="text"
+				/>
+			</div>
+			<button
+				v-if="info && info.action"
+				class="action _button"
+				@click.stop="info.action.handler"
+			>
+				<!-- TODO -->
+			</button>
 		</div>
-		<button v-if="info && info.action" class="action _button" @click.stop="info.action.handler">
-			<!-- TODO -->
-		</button>
 	</div>
-</div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
-import XSigninDialog from '@/components/MkSigninDialog.vue';
-import XSignupDialog from '@/components/MkSignupDialog.vue';
-import * as os from '@/os';
-import { instance } from '@/instance';
-import { search } from '@/scripts/search';
-import { i18n } from '@/i18n';
+import { defineComponent } from "vue";
+import XSigninDialog from "@/components/MkSigninDialog.vue";
+import XSignupDialog from "@/components/MkSignupDialog.vue";
+import * as os from "@/os";
+import { instance } from "@/instance";
+import { search } from "@/scripts/search";
+import { i18n } from "@/i18n";
 
 export default defineComponent({
 	props: {
 		info: {
-			required: true
+			required: true,
 		},
 	},
 
@@ -62,7 +125,10 @@ export default defineComponent({
 			narrow: null,
 			showMenu: false,
 			i18n,
-			isTimelineAvailable: !instance.disableLocalTimeline || !instance.disableRecommendedTimeline || !instance.disableGlobalTimeline,
+			isTimelineAvailable:
+				!instance.disableLocalTimeline ||
+				!instance.disableRecommendedTimeline ||
+				!instance.disableGlobalTimeline,
 		};
 	},
 
@@ -72,19 +138,29 @@ export default defineComponent({
 
 	methods: {
 		signin() {
-			os.popup(XSigninDialog, {
-				autoSet: true
-			}, {}, 'closed');
+			os.popup(
+				XSigninDialog,
+				{
+					autoSet: true,
+				},
+				{},
+				"closed"
+			);
 		},
 
 		signup() {
-			os.popup(XSignupDialog, {
-				autoSet: true
-			}, {}, 'closed');
+			os.popup(
+				XSignupDialog,
+				{
+					autoSet: true,
+				},
+				{},
+				"closed"
+			);
 		},
 
-		search
-	}
+		search,
+	},
 });
 </script>
 
diff --git a/packages/client/src/ui/visitor/kanban.vue b/packages/client/src/ui/visitor/kanban.vue
index 28b2226975..1391bfb677 100644
--- a/packages/client/src/ui/visitor/kanban.vue
+++ b/packages/client/src/ui/visitor/kanban.vue
@@ -1,50 +1,96 @@
 <template>
-<div class="rwqkcmrc" :style="{ backgroundImage: transparent ? 'none' : `url(${ $instance.backgroundImageUrl })` }">
-	<div class="back" :class="{ transparent }"></div>
-	<div class="contents">
-		<div class="wrapper">
-			<h1 v-if="meta" :class="{ full }">
-				<MkA to="/" class="link"><img v-if="meta.logoImageUrl" class="logo" :src="meta.logoImageUrl" alt="logo"><span v-else class="text">{{ instanceName }}</span></MkA>
-			</h1>
-			<template v-if="full">
-				<div v-if="meta" class="about">
-					<div class="desc" v-html="meta.description || i18n.ts.introMisskey"></div>
-				</div>
-				<div class="action">
-					<button class="_buttonPrimary" @click="signup()">{{ i18n.ts.signup }}</button>
-					<button class="_button" @click="signin()">{{ i18n.ts.login }}</button>
-				</div>
-				<div class="announcements panel">
-					<header>{{ i18n.ts.announcements }}</header>
-					<MkPagination v-slot="{items}" :pagination="announcements" class="list">
-						<section v-for="announcement in items" :key="announcement.id" class="item">
-							<div class="title">{{ announcement.title }}</div>
-							<div class="content">
-								<Mfm :text="announcement.text"/>
-								<img v-if="announcement.imageUrl" :src="announcement.imageUrl" alt="announcement image"/>
-							</div>
-						</section>
-					</MkPagination>
-				</div>
-				<div v-if="poweredBy" class="powered-by">
-					<b><MkA to="/">{{ host }}</MkA></b>
-					<small>Powered by <a href="https://codeberg.org/calckey/calckey" target="_blank">Calckey</a></small>
-				</div>
-			</template>
+	<div
+		class="rwqkcmrc"
+		:style="{
+			backgroundImage: transparent
+				? 'none'
+				: `url(${$instance.backgroundImageUrl})`,
+		}"
+	>
+		<div class="back" :class="{ transparent }"></div>
+		<div class="contents">
+			<div class="wrapper">
+				<h1 v-if="meta" :class="{ full }">
+					<MkA to="/" class="link"
+						><img
+							v-if="meta.logoImageUrl"
+							class="logo"
+							:src="meta.logoImageUrl"
+							alt="logo"
+						/><span v-else class="text">{{
+							instanceName
+						}}</span></MkA
+					>
+				</h1>
+				<template v-if="full">
+					<div v-if="meta" class="about">
+						<div
+							class="desc"
+							v-html="meta.description || i18n.ts.introMisskey"
+						></div>
+					</div>
+					<div class="action">
+						<button class="_buttonPrimary" @click="signup()">
+							{{ i18n.ts.signup }}
+						</button>
+						<button class="_button" @click="signin()">
+							{{ i18n.ts.login }}
+						</button>
+					</div>
+					<div class="announcements panel">
+						<header>{{ i18n.ts.announcements }}</header>
+						<MkPagination
+							v-slot="{ items }"
+							:pagination="announcements"
+							class="list"
+						>
+							<section
+								v-for="announcement in items"
+								:key="announcement.id"
+								class="item"
+							>
+								<div class="title">
+									{{ announcement.title }}
+								</div>
+								<div class="content">
+									<Mfm :text="announcement.text" />
+									<img
+										v-if="announcement.imageUrl"
+										:src="announcement.imageUrl"
+										alt="announcement image"
+									/>
+								</div>
+							</section>
+						</MkPagination>
+					</div>
+					<div v-if="poweredBy" class="powered-by">
+						<b
+							><MkA to="/">{{ host }}</MkA></b
+						>
+						<small
+							>Powered by
+							<a
+								href="https://codeberg.org/calckey/calckey"
+								target="_blank"
+								>Calckey</a
+							></small
+						>
+					</div>
+				</template>
+			</div>
 		</div>
 	</div>
-</div>
 </template>
 
 <script lang="ts">
-import { defineComponent, defineAsyncComponent } from 'vue';
-import { host, instanceName } from '@/config';
-import * as os from '@/os';
-import MkPagination from '@/components/MkPagination.vue';
-import XSigninDialog from '@/components/MkSigninDialog.vue';
-import XSignupDialog from '@/components/MkSignupDialog.vue';
-import MkButton from '@/components/MkButton.vue';
-import { i18n } from '@/i18n';
+import { defineComponent, defineAsyncComponent } from "vue";
+import { host, instanceName } from "@/config";
+import * as os from "@/os";
+import MkPagination from "@/components/MkPagination.vue";
+import XSigninDialog from "@/components/MkSigninDialog.vue";
+import XSignupDialog from "@/components/MkSignupDialog.vue";
+import MkButton from "@/components/MkButton.vue";
+import { i18n } from "@/i18n";
 
 export default defineComponent({
 	components: {
@@ -78,7 +124,7 @@ export default defineComponent({
 			meta: null,
 			narrow: window.innerWidth < 1280,
 			announcements: {
-				endpoint: 'announcements',
+				endpoint: "announcements",
 				limit: 10,
 			},
 			i18n,
@@ -86,22 +132,32 @@ export default defineComponent({
 	},
 
 	created() {
-		os.api('meta', { detail: true }).then(meta => {
+		os.api("meta", { detail: true }).then((meta) => {
 			this.meta = meta;
 		});
 	},
 
 	methods: {
 		signin() {
-			os.popup(XSigninDialog, {
-				autoSet: true,
-			}, {}, 'closed');
+			os.popup(
+				XSigninDialog,
+				{
+					autoSet: true,
+				},
+				{},
+				"closed"
+			);
 		},
 
 		signup() {
-			os.popup(XSignupDialog, {
-				autoSet: true,
-			}, {}, 'closed');
+			os.popup(
+				XSignupDialog,
+				{
+					autoSet: true,
+				},
+				{},
+				"closed"
+			);
 		},
 	},
 });
@@ -147,7 +203,8 @@ export default defineComponent({
 				background: rgba(0, 0, 0, 0.5);
 				border-radius: var(--radius);
 
-				&, * {
+				&,
+				* {
 					color: #fff !important;
 				}
 			}
diff --git a/packages/client/src/ui/zen.vue b/packages/client/src/ui/zen.vue
index c915f82428..cb2354a2e5 100644
--- a/packages/client/src/ui/zen.vue
+++ b/packages/client/src/ui/zen.vue
@@ -1,21 +1,25 @@
 <template>
-<div class="mk-app">
-	<RouterView/>
+	<div class="mk-app">
+		<RouterView />
 
-	<XCommon/>
-</div>
+		<XCommon />
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { provide, ComputedRef } from 'vue';
-import XCommon from './_common_/common.vue';
-import { mainRouter } from '@/router';
-import { PageMetadata, provideMetadataReceiver, setPageMetadata } from '@/scripts/page-metadata';
-import { instanceName } from '@/config';
+import { provide, ComputedRef } from "vue";
+import XCommon from "./_common_/common.vue";
+import { mainRouter } from "@/router";
+import {
+	PageMetadata,
+	provideMetadataReceiver,
+	setPageMetadata,
+} from "@/scripts/page-metadata";
+import { instanceName } from "@/config";
 
 let pageMetadata = $ref<null | ComputedRef<PageMetadata>>();
 
-provide('router', mainRouter);
+provide("router", mainRouter);
 provideMetadataReceiver((info) => {
 	pageMetadata = info;
 	if (pageMetadata.value) {
@@ -23,7 +27,7 @@ provideMetadataReceiver((info) => {
 	}
 });
 
-document.documentElement.style.overflowY = 'scroll';
+document.documentElement.style.overflowY = "scroll";
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/widgets/activity.calendar.vue b/packages/client/src/widgets/activity.calendar.vue
index 2fcb7255cc..d7081a27c4 100644
--- a/packages/client/src/widgets/activity.calendar.vue
+++ b/packages/client/src/widgets/activity.calendar.vue
@@ -1,37 +1,58 @@
 <template>
-<svg viewBox="0 0 21 7">
-	<rect v-for="record in activity" class="day"
-		width="1" height="1"
-		:x="record.x" :y="record.date.weekday"
-		rx="1" ry="1"
-		fill="transparent">
-		<title>{{ record.date.year }}/{{ record.date.month + 1 }}/{{ record.date.day }}</title>
-	</rect>
-	<rect v-for="record in activity" class="day"
-		:width="record.v" :height="record.v"
-		:x="record.x + ((1 - record.v) / 2)" :y="record.date.weekday + ((1 - record.v) / 2)"
-		rx="1" ry="1"
-		:fill="record.color"
-		style="pointer-events: none;"/>
-	<rect class="today"
-		width="1" height="1"
-		:x="activity[0].x" :y="activity[0].date.weekday"
-		rx="1" ry="1"
-		fill="none"
-		stroke-width="0.1"
-		stroke="#eb6f92"/>
-</svg>
+	<svg viewBox="0 0 21 7">
+		<rect
+			v-for="record in activity"
+			class="day"
+			width="1"
+			height="1"
+			:x="record.x"
+			:y="record.date.weekday"
+			rx="1"
+			ry="1"
+			fill="transparent"
+		>
+			<title>
+				{{ record.date.year }}/{{ record.date.month + 1 }}/{{
+					record.date.day
+				}}
+			</title>
+		</rect>
+		<rect
+			v-for="record in activity"
+			class="day"
+			:width="record.v"
+			:height="record.v"
+			:x="record.x + (1 - record.v) / 2"
+			:y="record.date.weekday + (1 - record.v) / 2"
+			rx="1"
+			ry="1"
+			:fill="record.color"
+			style="pointer-events: none"
+		/>
+		<rect
+			class="today"
+			width="1"
+			height="1"
+			:x="activity[0].x"
+			:y="activity[0].date.weekday"
+			rx="1"
+			ry="1"
+			fill="none"
+			stroke-width="0.1"
+			stroke="#eb6f92"
+		/>
+	</svg>
 </template>
 
 <script lang="ts" setup>
 const props = defineProps<{
-	activity: any[]
+	activity: any[];
 }>();
 
 for (const d of props.activity) {
 	d.total = d.notes + d.replies + d.renotes;
 }
-const peak = Math.max(...props.activity.map(d => d.total));
+const peak = Math.max(...props.activity.map((d) => d.total));
 
 const now = new Date();
 const year = now.getFullYear();
@@ -47,7 +68,7 @@ props.activity.slice().forEach((d, i) => {
 		year: date.getFullYear(),
 		month: date.getMonth(),
 		day: date.getDate(),
-		weekday: date.getDay()
+		weekday: date.getDay(),
 	};
 
 	d.v = peak === 0 ? 0 : d.total / (peak / 2);
@@ -55,7 +76,7 @@ props.activity.slice().forEach((d, i) => {
 	// TODO: Make Rose Pine
 	const ch = d.date.weekday === 0 || d.date.weekday === 6 ? 275 : 170;
 	const cs = d.v * 100;
-	const cl = 15 + ((1 - d.v) * 80);
+	const cl = 15 + (1 - d.v) * 80;
 	d.color = `hsl(${ch}, ${cs}%, ${cl}%)`;
 
 	if (d.date.weekday === 0) x--;
diff --git a/packages/client/src/widgets/activity.chart.vue b/packages/client/src/widgets/activity.chart.vue
index f24125aa3a..d854ec7337 100644
--- a/packages/client/src/widgets/activity.chart.vue
+++ b/packages/client/src/widgets/activity.chart.vue
@@ -1,32 +1,39 @@
 <template>
-<svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`" @mousedown.prevent="onMousedown">
-	<polyline
-		:points="pointsNote"
-		fill="none"
-		stroke-width="1"
-		stroke="#c4a7e7"/>
-	<polyline
-		:points="pointsReply"
-		fill="none"
-		stroke-width="1"
-		stroke="#eb6f92"/>
-	<polyline
-		:points="pointsRenote"
-		fill="none"
-		stroke-width="1"
-		stroke="#ebbcba"/>
-	<polyline
-		:points="pointsTotal"
-		fill="none"
-		stroke-width="1"
-		stroke="#6e6a86"
-		stroke-dasharray="2 2"/>
-</svg>
+	<svg
+		:viewBox="`0 0 ${viewBoxX} ${viewBoxY}`"
+		@mousedown.prevent="onMousedown"
+	>
+		<polyline
+			:points="pointsNote"
+			fill="none"
+			stroke-width="1"
+			stroke="#c4a7e7"
+		/>
+		<polyline
+			:points="pointsReply"
+			fill="none"
+			stroke-width="1"
+			stroke="#eb6f92"
+		/>
+		<polyline
+			:points="pointsRenote"
+			fill="none"
+			stroke-width="1"
+			stroke="#ebbcba"
+		/>
+		<polyline
+			:points="pointsTotal"
+			fill="none"
+			stroke-width="1"
+			stroke="#6e6a86"
+			stroke-dasharray="2 2"
+		/>
+	</svg>
 </template>
 
 <script lang="ts" setup>
 const props = defineProps<{
-	activity: any[]
+	activity: any[];
 }>();
 
 let viewBoxX: number = $ref(147);
@@ -39,15 +46,15 @@ let pointsRenote: any = $ref(null);
 let pointsTotal: any = $ref(null);
 
 function dragListen(fn) {
-	window.addEventListener('mousemove', fn);
-	window.addEventListener('mouseleave', dragClear.bind(null, fn));
-	window.addEventListener('mouseup', dragClear.bind(null, fn));
+	window.addEventListener("mousemove", fn);
+	window.addEventListener("mouseleave", dragClear.bind(null, fn));
+	window.addEventListener("mouseup", dragClear.bind(null, fn));
 }
 
 function dragClear(fn) {
-	window.removeEventListener('mousemove', fn);
-	window.removeEventListener('mouseleave', dragClear);
-	window.removeEventListener('mouseup', dragClear);
+	window.removeEventListener("mousemove", fn);
+	window.removeEventListener("mouseleave", dragClear);
+	window.removeEventListener("mouseup", dragClear);
 }
 
 function onMousedown(ev) {
@@ -57,26 +64,45 @@ function onMousedown(ev) {
 	const basePos = pos;
 
 	// 動かした時
-	dragListen(me => {
+	dragListen((me) => {
 		let moveLeft = me.clientX - clickX;
 		let moveTop = me.clientY - clickY;
 
-		zoom = Math.max(1, baseZoom + (-moveTop / 20));
+		zoom = Math.max(1, baseZoom + -moveTop / 20);
 		pos = Math.min(0, basePos + moveLeft);
-		if (pos < -(((props.activity.length - 1) * zoom) - viewBoxX)) pos = -(((props.activity.length - 1) * zoom) - viewBoxX);
+		if (pos < -((props.activity.length - 1) * zoom - viewBoxX))
+			pos = -((props.activity.length - 1) * zoom - viewBoxX);
 
 		render();
 	});
 }
 
 function render() {
-	const peak = Math.max(...props.activity.map(d => d.total));
+	const peak = Math.max(...props.activity.map((d) => d.total));
 	if (peak !== 0) {
 		const activity = props.activity.slice().reverse();
-		pointsNote = activity.map((d, i) => `${(i * zoom) + pos},${(1 - (d.notes / peak)) * viewBoxY}`).join(' ');
-		pointsReply = activity.map((d, i) => `${(i * zoom) + pos},${(1 - (d.replies / peak)) * viewBoxY}`).join(' ');
-		pointsRenote = activity.map((d, i) => `${(i * zoom) + pos},${(1 - (d.renotes / peak)) * viewBoxY}`).join(' ');
-		pointsTotal = activity.map((d, i) => `${(i * zoom) + pos},${(1 - (d.total / peak)) * viewBoxY}`).join(' ');
+		pointsNote = activity
+			.map(
+				(d, i) => `${i * zoom + pos},${(1 - d.notes / peak) * viewBoxY}`
+			)
+			.join(" ");
+		pointsReply = activity
+			.map(
+				(d, i) =>
+					`${i * zoom + pos},${(1 - d.replies / peak) * viewBoxY}`
+			)
+			.join(" ");
+		pointsRenote = activity
+			.map(
+				(d, i) =>
+					`${i * zoom + pos},${(1 - d.renotes / peak) * viewBoxY}`
+			)
+			.join(" ");
+		pointsTotal = activity
+			.map(
+				(d, i) => `${i * zoom + pos},${(1 - d.total / peak) * viewBoxY}`
+			)
+			.join(" ");
 	}
 }
 </script>
diff --git a/packages/client/src/widgets/activity.vue b/packages/client/src/widgets/activity.vue
index f514458b94..b148d39345 100644
--- a/packages/client/src/widgets/activity.vue
+++ b/packages/client/src/widgets/activity.vue
@@ -1,42 +1,64 @@
 <template>
-<MkContainer :show-header="widgetProps.showHeader" :naked="widgetProps.transparent" class="mkw-activity">
-	<template #header><i class="ph-chart-bar ph-bold ph-lg"></i>{{ i18n.ts._widgets.activity }}</template>
-	<template #func><button class="_button" @click="toggleView()"><i class="ph-sort-ascending ph-bold ph-lg"></i></button></template>
+	<MkContainer
+		:show-header="widgetProps.showHeader"
+		:naked="widgetProps.transparent"
+		class="mkw-activity"
+	>
+		<template #header
+			><i class="ph-chart-bar ph-bold ph-lg"></i
+			>{{ i18n.ts._widgets.activity }}</template
+		>
+		<template #func
+			><button class="_button" @click="toggleView()">
+				<i class="ph-sort-ascending ph-bold ph-lg"></i></button
+		></template>
 
-	<div>
-		<MkLoading v-if="fetching"/>
-		<template v-else>
-			<XCalendar v-show="widgetProps.view === 0" :activity="[].concat(activity)"/>
-			<XChart v-show="widgetProps.view === 1" :activity="[].concat(activity)"/>
-		</template>
-	</div>
-</MkContainer>
+		<div>
+			<MkLoading v-if="fetching" />
+			<template v-else>
+				<XCalendar
+					v-show="widgetProps.view === 0"
+					:activity="[].concat(activity)"
+				/>
+				<XChart
+					v-show="widgetProps.view === 1"
+					:activity="[].concat(activity)"
+				/>
+			</template>
+		</div>
+	</MkContainer>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, reactive, ref, watch } from 'vue';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
-import XCalendar from './activity.calendar.vue';
-import XChart from './activity.chart.vue';
-import { GetFormResultType } from '@/scripts/form';
-import * as os from '@/os';
-import MkContainer from '@/components/MkContainer.vue';
-import { $i } from '@/account';
-import { i18n } from '@/i18n';
+import { onMounted, onUnmounted, reactive, ref, watch } from "vue";
+import {
+	useWidgetPropsManager,
+	Widget,
+	WidgetComponentEmits,
+	WidgetComponentExpose,
+	WidgetComponentProps,
+} from "./widget";
+import XCalendar from "./activity.calendar.vue";
+import XChart from "./activity.chart.vue";
+import { GetFormResultType } from "@/scripts/form";
+import * as os from "@/os";
+import MkContainer from "@/components/MkContainer.vue";
+import { $i } from "@/account";
+import { i18n } from "@/i18n";
 
-const name = 'activity';
+const name = "activity";
 
 const widgetPropsDef = {
 	showHeader: {
-		type: 'boolean' as const,
+		type: "boolean" as const,
 		default: true,
 	},
 	transparent: {
-		type: 'boolean' as const,
+		type: "boolean" as const,
 		default: false,
 	},
 	view: {
-		type: 'number' as const,
+		type: "number" as const,
 		default: 0,
 		hidden: true,
 	},
@@ -47,13 +69,14 @@ type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
 // 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
 //const props = defineProps<WidgetComponentProps<WidgetProps>>();
 //const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
-const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
+const props = defineProps<{ widget?: Widget<WidgetProps> }>();
+const emit = defineEmits<{ (ev: "updateProps", props: WidgetProps) }>();
 
-const { widgetProps, configure, save } = useWidgetPropsManager(name,
+const { widgetProps, configure, save } = useWidgetPropsManager(
+	name,
 	widgetPropsDef,
 	props,
-	emit,
+	emit
 );
 
 const activity = ref(null);
@@ -68,11 +91,11 @@ const toggleView = () => {
 	save();
 };
 
-os.apiGet('charts/user/notes', {
+os.apiGet("charts/user/notes", {
 	userId: $i.id,
-	span: 'day',
+	span: "day",
 	limit: 7 * 21,
-}).then(res => {
+}).then((res) => {
 	activity.value = res.diffs.normal.map((_, i) => ({
 		total: res.diffs.normal[i] + res.diffs.reply[i] + res.diffs.renote[i],
 		notes: res.diffs.normal[i],
diff --git a/packages/client/src/widgets/aiscript.vue b/packages/client/src/widgets/aiscript.vue
index d0eddacbbf..78a30a1590 100644
--- a/packages/client/src/widgets/aiscript.vue
+++ b/packages/client/src/widgets/aiscript.vue
@@ -1,39 +1,58 @@
 <template>
-<MkContainer :show-header="widgetProps.showHeader" class="mkw-aiscript">
-	<template #header><i class="ph-terminal-window ph-bold ph-lg"></i>{{ i18n.ts._widgets.aiscript }}</template>
+	<MkContainer :show-header="widgetProps.showHeader" class="mkw-aiscript">
+		<template #header
+			><i class="ph-terminal-window ph-bold ph-lg"></i
+			>{{ i18n.ts._widgets.aiscript }}</template
+		>
 
-	<div class="uylguesu _monospace">
-		<textarea v-model="widgetProps.script" placeholder="(1 + 1)"></textarea>
-		<button class="_buttonPrimary" @click="run">RUN</button>
-		<div class="logs">
-			<div v-for="log in logs" :key="log.id" class="log" :class="{ print: log.print }">{{ log.text }}</div>
+		<div class="uylguesu _monospace">
+			<textarea
+				v-model="widgetProps.script"
+				placeholder="(1 + 1)"
+			></textarea>
+			<button class="_buttonPrimary" @click="run">RUN</button>
+			<div class="logs">
+				<div
+					v-for="log in logs"
+					:key="log.id"
+					class="log"
+					:class="{ print: log.print }"
+				>
+					{{ log.text }}
+				</div>
+			</div>
 		</div>
-	</div>
-</MkContainer>
+	</MkContainer>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, ref, watch } from 'vue';
-import { AiScript, parse, utils } from '@syuilo/aiscript';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
-import { GetFormResultType } from '@/scripts/form';
-import * as os from '@/os';
-import MkContainer from '@/components/MkContainer.vue';
-import { createAiScriptEnv } from '@/scripts/aiscript/api';
-import { $i } from '@/account';
-import { i18n } from '@/i18n';
+import { onMounted, onUnmounted, ref, watch } from "vue";
+import { AiScript, parse, utils } from "@syuilo/aiscript";
+import {
+	useWidgetPropsManager,
+	Widget,
+	WidgetComponentEmits,
+	WidgetComponentExpose,
+	WidgetComponentProps,
+} from "./widget";
+import { GetFormResultType } from "@/scripts/form";
+import * as os from "@/os";
+import MkContainer from "@/components/MkContainer.vue";
+import { createAiScriptEnv } from "@/scripts/aiscript/api";
+import { $i } from "@/account";
+import { i18n } from "@/i18n";
 
-const name = 'aiscript';
+const name = "aiscript";
 
 const widgetPropsDef = {
 	showHeader: {
-		type: 'boolean' as const,
+		type: "boolean" as const,
 		default: true,
 	},
 	script: {
-		type: 'string' as const,
+		type: "string" as const,
 		multiline: true,
-		default: '(1 + 1)',
+		default: "(1 + 1)",
 		hidden: true,
 	},
 };
@@ -43,62 +62,74 @@ type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
 // 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
 //const props = defineProps<WidgetComponentProps<WidgetProps>>();
 //const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
-const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
+const props = defineProps<{ widget?: Widget<WidgetProps> }>();
+const emit = defineEmits<{ (ev: "updateProps", props: WidgetProps) }>();
 
-const { widgetProps, configure } = useWidgetPropsManager(name,
+const { widgetProps, configure } = useWidgetPropsManager(
+	name,
 	widgetPropsDef,
 	props,
-	emit,
+	emit
 );
 
-const logs = ref<{
-	id: string;
-	text: string;
-	print: boolean;
-}[]>([]);
+const logs = ref<
+	{
+		id: string;
+		text: string;
+		print: boolean;
+	}[]
+>([]);
 
 const run = async () => {
 	logs.value = [];
-	const aiscript = new AiScript(createAiScriptEnv({
-		storageKey: 'widget',
-		token: $i?.token,
-	}), {
-		in: (q) => {
-			return new Promise(ok => {
-				os.inputText({
-					title: q,
-				}).then(({ canceled, result: a }) => {
-					ok(a);
+	const aiscript = new AiScript(
+		createAiScriptEnv({
+			storageKey: "widget",
+			token: $i?.token,
+		}),
+		{
+			in: (q) => {
+				return new Promise((ok) => {
+					os.inputText({
+						title: q,
+					}).then(({ canceled, result: a }) => {
+						ok(a);
+					});
 				});
-			});
-		},
-		out: (value) => {
-			logs.value.push({
-				id: Math.random().toString(),
-				text: value.type === 'str' ? value.value : utils.valToString(value),
-				print: true,
-			});
-		},
-		log: (type, params) => {
-			switch (type) {
-				case 'end': logs.value.push({
+			},
+			out: (value) => {
+				logs.value.push({
 					id: Math.random().toString(),
-					text: utils.valToString(params.val, true),
-					print: false,
-				}); break;
-				default: break;
-			}
-		},
-	});
+					text:
+						value.type === "str"
+							? value.value
+							: utils.valToString(value),
+					print: true,
+				});
+			},
+			log: (type, params) => {
+				switch (type) {
+					case "end":
+						logs.value.push({
+							id: Math.random().toString(),
+							text: utils.valToString(params.val, true),
+							print: false,
+						});
+						break;
+					default:
+						break;
+				}
+			},
+		}
+	);
 
 	let ast;
 	try {
 		ast = parse(widgetProps.script);
 	} catch (err) {
 		os.alert({
-			type: 'error',
-			text: 'Syntax error :(',
+			type: "error",
+			text: "Syntax error :(",
 		});
 		return;
 	}
@@ -106,7 +137,7 @@ const run = async () => {
 		await aiscript.exec(ast);
 	} catch (err) {
 		os.alert({
-			type: 'error',
+			type: "error",
 			text: err,
 		});
 	}
diff --git a/packages/client/src/widgets/button.vue b/packages/client/src/widgets/button.vue
index f0148d7f4e..9e524f2953 100644
--- a/packages/client/src/widgets/button.vue
+++ b/packages/client/src/widgets/button.vue
@@ -1,34 +1,40 @@
 <template>
-<div class="mkw-button">
-	<MkButton :primary="widgetProps.colored" full @click="run">
-		{{ widgetProps.label }}
-	</MkButton>
-</div>
+	<div class="mkw-button">
+		<MkButton :primary="widgetProps.colored" full @click="run">
+			{{ widgetProps.label }}
+		</MkButton>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, ref, watch } from 'vue';
-import { AiScript, parse, utils } from '@syuilo/aiscript';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
-import { GetFormResultType } from '@/scripts/form';
-import * as os from '@/os';
-import { createAiScriptEnv } from '@/scripts/aiscript/api';
-import { $i } from '@/account';
-import MkButton from '@/components/MkButton.vue';
+import { onMounted, onUnmounted, ref, watch } from "vue";
+import { AiScript, parse, utils } from "@syuilo/aiscript";
+import {
+	useWidgetPropsManager,
+	Widget,
+	WidgetComponentEmits,
+	WidgetComponentExpose,
+	WidgetComponentProps,
+} from "./widget";
+import { GetFormResultType } from "@/scripts/form";
+import * as os from "@/os";
+import { createAiScriptEnv } from "@/scripts/aiscript/api";
+import { $i } from "@/account";
+import MkButton from "@/components/MkButton.vue";
 
-const name = 'button';
+const name = "button";
 
 const widgetPropsDef = {
 	label: {
-		type: 'string' as const,
-		default: 'BUTTON',
+		type: "string" as const,
+		default: "BUTTON",
 	},
 	colored: {
-		type: 'boolean' as const,
+		type: "boolean" as const,
 		default: true,
 	},
 	script: {
-		type: 'string' as const,
+		type: "string" as const,
 		multiline: true,
 		default: 'Mk:dialog("hello" "world")',
 	},
@@ -39,44 +45,48 @@ type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
 // 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
 //const props = defineProps<WidgetComponentProps<WidgetProps>>();
 //const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
-const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
+const props = defineProps<{ widget?: Widget<WidgetProps> }>();
+const emit = defineEmits<{ (ev: "updateProps", props: WidgetProps) }>();
 
-const { widgetProps, configure } = useWidgetPropsManager(name,
+const { widgetProps, configure } = useWidgetPropsManager(
+	name,
 	widgetPropsDef,
 	props,
-	emit,
+	emit
 );
 
 const run = async () => {
-	const aiscript = new AiScript(createAiScriptEnv({
-		storageKey: 'widget',
-		token: $i?.token,
-	}), {
-		in: (q) => {
-			return new Promise(ok => {
-				os.inputText({
-					title: q,
-				}).then(({ canceled, result: a }) => {
-					ok(a);
+	const aiscript = new AiScript(
+		createAiScriptEnv({
+			storageKey: "widget",
+			token: $i?.token,
+		}),
+		{
+			in: (q) => {
+				return new Promise((ok) => {
+					os.inputText({
+						title: q,
+					}).then(({ canceled, result: a }) => {
+						ok(a);
+					});
 				});
-			});
-		},
-		out: (value) => {
-			// nop
-		},
-		log: (type, params) => {
-			// nop
-		},
-	});
+			},
+			out: (value) => {
+				// nop
+			},
+			log: (type, params) => {
+				// nop
+			},
+		}
+	);
 
 	let ast;
 	try {
 		ast = parse(widgetProps.script);
 	} catch (err) {
 		os.alert({
-			type: 'error',
-			text: 'Syntax error :(',
+			type: "error",
+			text: "Syntax error :(",
 		});
 		return;
 	}
@@ -84,7 +94,7 @@ const run = async () => {
 		await aiscript.exec(ast);
 	} catch (err) {
 		os.alert({
-			type: 'error',
+			type: "error",
 			text: err,
 		});
 	}
diff --git a/packages/client/src/widgets/calendar.vue b/packages/client/src/widgets/calendar.vue
index 52e39138d9..655308d504 100644
--- a/packages/client/src/widgets/calendar.vue
+++ b/packages/client/src/widgets/calendar.vue
@@ -1,49 +1,66 @@
 <template>
-<div class="mkw-calendar" :class="{ _panel: !widgetProps.transparent }">
-	<div class="calendar" :class="{ isHoliday }">
-		<p class="month-and-year">
-			<span class="year">{{ i18n.t('yearX', { year }) }}</span>
-			<span class="month">{{ i18n.t('monthX', { month }) }}</span>
-		</p>
-		<p v-if="month === 1 && day === 1" class="day">🎉{{ i18n.t('dayX', { day }) }}<span style="display: inline-block; transform: scaleX(-1);">🎉</span></p>
-		<p v-else class="day">{{ i18n.t('dayX', { day }) }}</p>
-		<p class="week-day">{{ weekDay }}</p>
-	</div>
-	<div class="info">
-		<div>
-			<p>{{ i18n.ts.today }}: <b>{{ dayP.toFixed(1) }}%</b></p>
-			<div class="meter">
-				<div class="val" :style="{ width: `${dayP}%` }"></div>
-			</div>
+	<div class="mkw-calendar" :class="{ _panel: !widgetProps.transparent }">
+		<div class="calendar" :class="{ isHoliday }">
+			<p class="month-and-year">
+				<span class="year">{{ i18n.t("yearX", { year }) }}</span>
+				<span class="month">{{ i18n.t("monthX", { month }) }}</span>
+			</p>
+			<p v-if="month === 1 && day === 1" class="day">
+				🎉{{ i18n.t("dayX", { day })
+				}}<span style="display: inline-block; transform: scaleX(-1)"
+					>🎉</span
+				>
+			</p>
+			<p v-else class="day">{{ i18n.t("dayX", { day }) }}</p>
+			<p class="week-day">{{ weekDay }}</p>
 		</div>
-		<div>
-			<p>{{ i18n.ts.thisMonth }}: <b>{{ monthP.toFixed(1) }}%</b></p>
-			<div class="meter">
-				<div class="val" :style="{ width: `${monthP}%` }"></div>
+		<div class="info">
+			<div>
+				<p>
+					{{ i18n.ts.today }}: <b>{{ dayP.toFixed(1) }}%</b>
+				</p>
+				<div class="meter">
+					<div class="val" :style="{ width: `${dayP}%` }"></div>
+				</div>
 			</div>
-		</div>
-		<div>
-			<p>{{ i18n.ts.thisYear }}: <b>{{ yearP.toFixed(1) }}%</b></p>
-			<div class="meter">
-				<div class="val" :style="{ width: `${yearP}%` }"></div>
+			<div>
+				<p>
+					{{ i18n.ts.thisMonth }}: <b>{{ monthP.toFixed(1) }}%</b>
+				</p>
+				<div class="meter">
+					<div class="val" :style="{ width: `${monthP}%` }"></div>
+				</div>
+			</div>
+			<div>
+				<p>
+					{{ i18n.ts.thisYear }}: <b>{{ yearP.toFixed(1) }}%</b>
+				</p>
+				<div class="meter">
+					<div class="val" :style="{ width: `${yearP}%` }"></div>
+				</div>
 			</div>
 		</div>
 	</div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { onUnmounted, ref } from 'vue';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
-import { GetFormResultType } from '@/scripts/form';
-import { i18n } from '@/i18n';
-import { useInterval } from '@/scripts/use-interval';
+import { onUnmounted, ref } from "vue";
+import {
+	useWidgetPropsManager,
+	Widget,
+	WidgetComponentEmits,
+	WidgetComponentExpose,
+	WidgetComponentProps,
+} from "./widget";
+import { GetFormResultType } from "@/scripts/form";
+import { i18n } from "@/i18n";
+import { useInterval } from "@/scripts/use-interval";
 
-const name = 'calendar';
+const name = "calendar";
 
 const widgetPropsDef = {
 	transparent: {
-		type: 'boolean' as const,
+		type: "boolean" as const,
 		default: false,
 	},
 };
@@ -53,19 +70,20 @@ type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
 // 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
 //const props = defineProps<WidgetComponentProps<WidgetProps>>();
 //const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
-const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
+const props = defineProps<{ widget?: Widget<WidgetProps> }>();
+const emit = defineEmits<{ (ev: "updateProps", props: WidgetProps) }>();
 
-const { widgetProps, configure } = useWidgetPropsManager(name,
+const { widgetProps, configure } = useWidgetPropsManager(
+	name,
 	widgetPropsDef,
 	props,
-	emit,
+	emit
 );
 
 const year = ref(0);
 const month = ref(0);
 const day = ref(0);
-const weekDay = ref('');
+const weekDay = ref("");
 const yearP = ref(0);
 const monthP = ref(0);
 const dayP = ref(0);
@@ -90,15 +108,17 @@ const tick = () => {
 	][now.getDay()];
 
 	const dayNumer = now.getTime() - new Date(ny, nm, nd).getTime();
-	const dayDenom = 1000/*ms*/ * 60/*s*/ * 60/*m*/ * 24/*h*/;
+	const dayDenom = 1000 /*ms*/ * 60 /*s*/ * 60 /*m*/ * 24; /*h*/
 	const monthNumer = now.getTime() - new Date(ny, nm, 1).getTime();
-	const monthDenom = new Date(ny, nm + 1, 1).getTime() - new Date(ny, nm, 1).getTime();
+	const monthDenom =
+		new Date(ny, nm + 1, 1).getTime() - new Date(ny, nm, 1).getTime();
 	const yearNumer = now.getTime() - new Date(ny, 0, 1).getTime();
-	const yearDenom = new Date(ny + 1, 0, 1).getTime() - new Date(ny, 0, 1).getTime();
+	const yearDenom =
+		new Date(ny + 1, 0, 1).getTime() - new Date(ny, 0, 1).getTime();
 
-	dayP.value = dayNumer / dayDenom * 100;
-	monthP.value = monthNumer / monthDenom * 100;
-	yearP.value = yearNumer / yearDenom * 100;
+	dayP.value = (dayNumer / dayDenom) * 100;
+	monthP.value = (monthNumer / monthDenom) * 100;
+	yearP.value = (yearNumer / yearDenom) * 100;
 
 	isHoliday.value = now.getDay() === 0 || now.getDay() === 6;
 };
@@ -136,12 +156,14 @@ defineExpose<WidgetComponentExpose>({
 			}
 		}
 
-		> .month-and-year, > .week-day {
+		> .month-and-year,
+		> .week-day {
 			margin: 0;
 			line-height: 18px;
 			font-size: 0.9em;
 
-			> .year, > .month {
+			> .year,
+			> .month {
 				margin: 0 4px;
 			}
 		}
@@ -186,7 +208,7 @@ defineExpose<WidgetComponentExpose>({
 
 				> .val {
 					height: 4px;
-					transition: width .3s cubic-bezier(0.23, 1, 0.32, 1);
+					transition: width 0.3s cubic-bezier(0.23, 1, 0.32, 1);
 				}
 			}
 
diff --git a/packages/client/src/widgets/clock.vue b/packages/client/src/widgets/clock.vue
index dc99b6631e..60b90a4b9b 100644
--- a/packages/client/src/widgets/clock.vue
+++ b/packages/client/src/widgets/clock.vue
@@ -1,114 +1,188 @@
 <template>
-<MkContainer :naked="widgetProps.transparent" :show-header="false" class="mkw-clock">
-	<div class="vubelbmv" :class="widgetProps.size">
-		<div v-if="widgetProps.label === 'tz' || widgetProps.label === 'timeAndTz'" class="_monospace label a abbrev">{{ tzAbbrev }}</div>
-		<MkAnalogClock
-			class="clock"
-			:thickness="widgetProps.thickness"
-			:offset="tzOffset"
-			:graduations="widgetProps.graduations"
-			:fade-graduations="widgetProps.fadeGraduations"
-			:twentyfour="widgetProps.twentyFour"
-			:s-animation="widgetProps.sAnimation"
-		/>
-		<MkDigitalClock v-if="widgetProps.label === 'time' || widgetProps.label === 'timeAndTz'" class="_monospace label c time" :show-s="false" :offset="tzOffset"/>
-		<div v-if="widgetProps.label === 'tz' || widgetProps.label === 'timeAndTz'" class="_monospace label d offset">{{ tzOffsetLabel }}</div>
-	</div>
-</MkContainer>
+	<MkContainer
+		:naked="widgetProps.transparent"
+		:show-header="false"
+		class="mkw-clock"
+	>
+		<div class="vubelbmv" :class="widgetProps.size">
+			<div
+				v-if="
+					widgetProps.label === 'tz' ||
+					widgetProps.label === 'timeAndTz'
+				"
+				class="_monospace label a abbrev"
+			>
+				{{ tzAbbrev }}
+			</div>
+			<MkAnalogClock
+				class="clock"
+				:thickness="widgetProps.thickness"
+				:offset="tzOffset"
+				:graduations="widgetProps.graduations"
+				:fade-graduations="widgetProps.fadeGraduations"
+				:twentyfour="widgetProps.twentyFour"
+				:s-animation="widgetProps.sAnimation"
+			/>
+			<MkDigitalClock
+				v-if="
+					widgetProps.label === 'time' ||
+					widgetProps.label === 'timeAndTz'
+				"
+				class="_monospace label c time"
+				:show-s="false"
+				:offset="tzOffset"
+			/>
+			<div
+				v-if="
+					widgetProps.label === 'tz' ||
+					widgetProps.label === 'timeAndTz'
+				"
+				class="_monospace label d offset"
+			>
+				{{ tzOffsetLabel }}
+			</div>
+		</div>
+	</MkContainer>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
-import { GetFormResultType } from '@/scripts/form';
-import MkContainer from '@/components/MkContainer.vue';
-import MkAnalogClock from '@/components/MkAnalogClock.vue';
-import MkDigitalClock from '@/components/MkDigitalClock.vue';
-import { timezones } from '@/scripts/timezones';
-import { i18n } from '@/i18n';
+import {} from "vue";
+import {
+	useWidgetPropsManager,
+	Widget,
+	WidgetComponentEmits,
+	WidgetComponentExpose,
+	WidgetComponentProps,
+} from "./widget";
+import { GetFormResultType } from "@/scripts/form";
+import MkContainer from "@/components/MkContainer.vue";
+import MkAnalogClock from "@/components/MkAnalogClock.vue";
+import MkDigitalClock from "@/components/MkDigitalClock.vue";
+import { timezones } from "@/scripts/timezones";
+import { i18n } from "@/i18n";
 
-const name = 'clock';
+const name = "clock";
 
 const widgetPropsDef = {
 	transparent: {
-		type: 'boolean' as const,
+		type: "boolean" as const,
 		default: false,
 	},
 	size: {
-		type: 'radio' as const,
-		default: 'medium',
-		options: [{
-			value: 'small', label: i18n.ts.small,
-		}, {
-			value: 'medium', label: i18n.ts.medium,
-		}, {
-			value: 'large', label: i18n.ts.large,
-		}],
+		type: "radio" as const,
+		default: "medium",
+		options: [
+			{
+				value: "small",
+				label: i18n.ts.small,
+			},
+			{
+				value: "medium",
+				label: i18n.ts.medium,
+			},
+			{
+				value: "large",
+				label: i18n.ts.large,
+			},
+		],
 	},
 	thickness: {
-		type: 'radio' as const,
+		type: "radio" as const,
 		default: 0.2,
-		options: [{
-			value: 0.1, label: 'thin',
-		}, {
-			value: 0.2, label: 'medium',
-		}, {
-			value: 0.3, label: 'thick',
-		}],
+		options: [
+			{
+				value: 0.1,
+				label: "thin",
+			},
+			{
+				value: 0.2,
+				label: "medium",
+			},
+			{
+				value: 0.3,
+				label: "thick",
+			},
+		],
 	},
 	graduations: {
-		type: 'radio' as const,
-		default: 'numbers',
-		options: [{
-			value: 'none', label: 'None',
-		}, {
-			value: 'dots', label: 'Dots',
-		}, {
-			value: 'numbers', label: 'Numbers',
-		}],
+		type: "radio" as const,
+		default: "numbers",
+		options: [
+			{
+				value: "none",
+				label: "None",
+			},
+			{
+				value: "dots",
+				label: "Dots",
+			},
+			{
+				value: "numbers",
+				label: "Numbers",
+			},
+		],
 	},
 	fadeGraduations: {
-		type: 'boolean' as const,
+		type: "boolean" as const,
 		default: true,
 	},
 	sAnimation: {
-		type: 'radio' as const,
-		default: 'elastic',
-		options: [{
-			value: 'none', label: 'None',
-		}, {
-			value: 'elastic', label: 'Elastic',
-		}, {
-			value: 'easeOut', label: 'Ease out',
-		}],
+		type: "radio" as const,
+		default: "elastic",
+		options: [
+			{
+				value: "none",
+				label: "None",
+			},
+			{
+				value: "elastic",
+				label: "Elastic",
+			},
+			{
+				value: "easeOut",
+				label: "Ease out",
+			},
+		],
 	},
 	twentyFour: {
-		type: 'boolean' as const,
+		type: "boolean" as const,
 		default: false,
 	},
 	label: {
-		type: 'radio' as const,
-		default: 'none',
-		options: [{
-			value: 'none', label: 'None',
-		}, {
-			value: 'time', label: 'Time',
-		}, {
-			value: 'tz', label: 'TZ',
-		}, {
-			value: 'timeAndTz', label: 'Time + TZ',
-		}],
+		type: "radio" as const,
+		default: "none",
+		options: [
+			{
+				value: "none",
+				label: "None",
+			},
+			{
+				value: "time",
+				label: "Time",
+			},
+			{
+				value: "tz",
+				label: "TZ",
+			},
+			{
+				value: "timeAndTz",
+				label: "Time + TZ",
+			},
+		],
 	},
 	timezone: {
-		type: 'enum' as const,
+		type: "enum" as const,
 		default: null,
-		enum: [...timezones.map((tz) => ({
-			label: tz.name,
-			value: tz.name.toLowerCase(),
-		})), {
-			label: '(auto)',
-			value: null,
-		}],
+		enum: [
+			...timezones.map((tz) => ({
+				label: tz.name,
+				value: tz.name.toLowerCase(),
+			})),
+			{
+				label: "(auto)",
+				value: null,
+			},
+		],
 	},
 };
 
@@ -117,24 +191,47 @@ type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
 // 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
 //const props = defineProps<WidgetComponentProps<WidgetProps>>();
 //const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
-const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
+const props = defineProps<{ widget?: Widget<WidgetProps> }>();
+const emit = defineEmits<{ (ev: "updateProps", props: WidgetProps) }>();
 
-const { widgetProps, configure } = useWidgetPropsManager(name,
+const { widgetProps, configure } = useWidgetPropsManager(
+	name,
 	widgetPropsDef,
 	props,
-	emit,
+	emit
 );
 
-const tzAbbrev = $computed(() => (widgetProps.timezone === null
-	? timezones.find((tz) => tz.name.toLowerCase() === Intl.DateTimeFormat().resolvedOptions().timeZone.toLowerCase())?.abbrev
-	: timezones.find((tz) => tz.name.toLowerCase() === widgetProps.timezone)?.abbrev) ?? '?');
+const tzAbbrev = $computed(
+	() =>
+		(widgetProps.timezone === null
+			? timezones.find(
+					(tz) =>
+						tz.name.toLowerCase() ===
+						Intl.DateTimeFormat()
+							.resolvedOptions()
+							.timeZone.toLowerCase()
+			  )?.abbrev
+			: timezones.find(
+					(tz) => tz.name.toLowerCase() === widgetProps.timezone
+			  )?.abbrev) ?? "?"
+);
 
-const tzOffset = $computed(() => widgetProps.timezone === null
-	? 0 - new Date().getTimezoneOffset()
-	: timezones.find((tz) => tz.name.toLowerCase() === widgetProps.timezone)?.offset ?? 0);
+const tzOffset = $computed(() =>
+	widgetProps.timezone === null
+		? 0 - new Date().getTimezoneOffset()
+		: timezones.find((tz) => tz.name.toLowerCase() === widgetProps.timezone)
+				?.offset ?? 0
+);
 
-const tzOffsetLabel = $computed(() => (tzOffset >= 0 ? '+' : '-') + Math.floor(tzOffset / 60).toString().padStart(2, '0') + ':' + (tzOffset % 60).toString().padStart(2, '0'));
+const tzOffsetLabel = $computed(
+	() =>
+		(tzOffset >= 0 ? "+" : "-") +
+		Math.floor(tzOffset / 60)
+			.toString()
+			.padStart(2, "0") +
+		":" +
+		(tzOffset % 60).toString().padStart(2, "0")
+);
 
 defineExpose<WidgetComponentExpose>({
 	name,
diff --git a/packages/client/src/widgets/digital-clock.vue b/packages/client/src/widgets/digital-clock.vue
index d2bfd523f3..d0b6b4fd16 100644
--- a/packages/client/src/widgets/digital-clock.vue
+++ b/packages/client/src/widgets/digital-clock.vue
@@ -1,50 +1,65 @@
 <template>
-<div class="mkw-digitalClock _monospace" :class="{ _panel: !widgetProps.transparent }" :style="{ fontSize: `${widgetProps.fontSize}em` }">
-	<div v-if="widgetProps.showLabel" class="label">{{ tzAbbrev }}</div>
-	<div class="time">
-		<MkDigitalClock :show-ms="widgetProps.showMs" :offset="tzOffset"/>
+	<div
+		class="mkw-digitalClock _monospace"
+		:class="{ _panel: !widgetProps.transparent }"
+		:style="{ fontSize: `${widgetProps.fontSize}em` }"
+	>
+		<div v-if="widgetProps.showLabel" class="label">{{ tzAbbrev }}</div>
+		<div class="time">
+			<MkDigitalClock :show-ms="widgetProps.showMs" :offset="tzOffset" />
+		</div>
+		<div v-if="widgetProps.showLabel" class="label">
+			{{ tzOffsetLabel }}
+		</div>
 	</div>
-	<div v-if="widgetProps.showLabel" class="label">{{ tzOffsetLabel }}</div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { onUnmounted, ref, watch } from 'vue';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
-import { GetFormResultType } from '@/scripts/form';
-import { timezones } from '@/scripts/timezones';
-import MkDigitalClock from '@/components/MkDigitalClock.vue';
+import { onUnmounted, ref, watch } from "vue";
+import {
+	useWidgetPropsManager,
+	Widget,
+	WidgetComponentEmits,
+	WidgetComponentExpose,
+	WidgetComponentProps,
+} from "./widget";
+import { GetFormResultType } from "@/scripts/form";
+import { timezones } from "@/scripts/timezones";
+import MkDigitalClock from "@/components/MkDigitalClock.vue";
 
-const name = 'digitalClock';
+const name = "digitalClock";
 
 const widgetPropsDef = {
 	transparent: {
-		type: 'boolean' as const,
+		type: "boolean" as const,
 		default: false,
 	},
 	fontSize: {
-		type: 'number' as const,
+		type: "number" as const,
 		default: 1.5,
 		step: 0.1,
 	},
 	showMs: {
-		type: 'boolean' as const,
+		type: "boolean" as const,
 		default: true,
 	},
 	showLabel: {
-		type: 'boolean' as const,
+		type: "boolean" as const,
 		default: true,
 	},
 	timezone: {
-		type: 'enum' as const,
+		type: "enum" as const,
 		default: null,
-		enum: [...timezones.map((tz) => ({
-			label: tz.name,
-			value: tz.name.toLowerCase(),
-		})), {
-			label: '(auto)',
-			value: null,
-		}],
+		enum: [
+			...timezones.map((tz) => ({
+				label: tz.name,
+				value: tz.name.toLowerCase(),
+			})),
+			{
+				label: "(auto)",
+				value: null,
+			},
+		],
 	},
 };
 
@@ -53,24 +68,47 @@ type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
 // 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
 //const props = defineProps<WidgetComponentProps<WidgetProps>>();
 //const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
-const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
+const props = defineProps<{ widget?: Widget<WidgetProps> }>();
+const emit = defineEmits<{ (ev: "updateProps", props: WidgetProps) }>();
 
-const { widgetProps, configure } = useWidgetPropsManager(name,
+const { widgetProps, configure } = useWidgetPropsManager(
+	name,
 	widgetPropsDef,
 	props,
-	emit,
+	emit
 );
 
-const tzAbbrev = $computed(() => (widgetProps.timezone === null
-	? timezones.find((tz) => tz.name.toLowerCase() === Intl.DateTimeFormat().resolvedOptions().timeZone.toLowerCase())?.abbrev
-	: timezones.find((tz) => tz.name.toLowerCase() === widgetProps.timezone)?.abbrev) ?? '?');
+const tzAbbrev = $computed(
+	() =>
+		(widgetProps.timezone === null
+			? timezones.find(
+					(tz) =>
+						tz.name.toLowerCase() ===
+						Intl.DateTimeFormat()
+							.resolvedOptions()
+							.timeZone.toLowerCase()
+			  )?.abbrev
+			: timezones.find(
+					(tz) => tz.name.toLowerCase() === widgetProps.timezone
+			  )?.abbrev) ?? "?"
+);
 
-const tzOffset = $computed(() => widgetProps.timezone === null
-	? 0 - new Date().getTimezoneOffset()
-	: timezones.find((tz) => tz.name.toLowerCase() === widgetProps.timezone)?.offset ?? 0);
+const tzOffset = $computed(() =>
+	widgetProps.timezone === null
+		? 0 - new Date().getTimezoneOffset()
+		: timezones.find((tz) => tz.name.toLowerCase() === widgetProps.timezone)
+				?.offset ?? 0
+);
 
-const tzOffsetLabel = $computed(() => (tzOffset >= 0 ? '+' : '-') + Math.floor(tzOffset / 60).toString().padStart(2, '0') + ':' + (tzOffset % 60).toString().padStart(2, '0'));
+const tzOffsetLabel = $computed(
+	() =>
+		(tzOffset >= 0 ? "+" : "-") +
+		Math.floor(tzOffset / 60)
+			.toString()
+			.padStart(2, "0") +
+		":" +
+		(tzOffset % 60).toString().padStart(2, "0")
+);
 
 defineExpose<WidgetComponentExpose>({
 	name,
diff --git a/packages/client/src/widgets/federation.vue b/packages/client/src/widgets/federation.vue
index e2937de5e7..51c0e0d75d 100644
--- a/packages/client/src/widgets/federation.vue
+++ b/packages/client/src/widgets/federation.vue
@@ -1,39 +1,74 @@
 <template>
-<MkContainer :show-header="widgetProps.showHeader" :foldable="foldable" :scrollable="scrollable" class="mkw-federation">
-	<template #header><i class="ph-planet ph-bold ph-lg"></i>{{ i18n.ts._widgets.federation }}</template>
+	<MkContainer
+		:show-header="widgetProps.showHeader"
+		:foldable="foldable"
+		:scrollable="scrollable"
+		class="mkw-federation"
+	>
+		<template #header
+			><i class="ph-planet ph-bold ph-lg"></i
+			>{{ i18n.ts._widgets.federation }}</template
+		>
 
-	<div class="wbrkwalb">
-		<MkLoading v-if="fetching"/>
-		<transition-group v-else tag="div" :name="$store.state.animation ? 'chart' : ''" class="instances">
-			<div v-for="(instance, i) in instances" :key="instance.id" class="instance">
-				<img :src="getInstanceIcon(instance)" alt=""/>
-				<div class="body">
-					<a class="a" :href="'https://' + instance.host" target="_blank" :title="instance.host">{{ instance.host }}</a>
-					<p>{{ instance.softwareName || '?' }} {{ instance.softwareVersion }}</p>
+		<div class="wbrkwalb">
+			<MkLoading v-if="fetching" />
+			<transition-group
+				v-else
+				tag="div"
+				:name="$store.state.animation ? 'chart' : ''"
+				class="instances"
+			>
+				<div
+					v-for="(instance, i) in instances"
+					:key="instance.id"
+					class="instance"
+				>
+					<img :src="getInstanceIcon(instance)" alt="" />
+					<div class="body">
+						<a
+							class="a"
+							:href="'https://' + instance.host"
+							target="_blank"
+							:title="instance.host"
+							>{{ instance.host }}</a
+						>
+						<p>
+							{{ instance.softwareName || "?" }}
+							{{ instance.softwareVersion }}
+						</p>
+					</div>
+					<MkMiniChart
+						class="chart"
+						:src="charts[i].requests.received"
+					/>
 				</div>
-				<MkMiniChart class="chart" :src="charts[i].requests.received"/>
-			</div>
-		</transition-group>
-	</div>
-</MkContainer>
+			</transition-group>
+		</div>
+	</MkContainer>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, ref } from 'vue';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
-import { GetFormResultType } from '@/scripts/form';
-import MkContainer from '@/components/MkContainer.vue';
-import MkMiniChart from '@/components/MkMiniChart.vue';
-import * as os from '@/os';
-import { useInterval } from '@/scripts/use-interval';
-import { i18n } from '@/i18n';
-import { getProxiedImageUrlNullable } from '@/scripts/media-proxy';
+import { onMounted, onUnmounted, ref } from "vue";
+import {
+	useWidgetPropsManager,
+	Widget,
+	WidgetComponentEmits,
+	WidgetComponentExpose,
+	WidgetComponentProps,
+} from "./widget";
+import { GetFormResultType } from "@/scripts/form";
+import MkContainer from "@/components/MkContainer.vue";
+import MkMiniChart from "@/components/MkMiniChart.vue";
+import * as os from "@/os";
+import { useInterval } from "@/scripts/use-interval";
+import { i18n } from "@/i18n";
+import { getProxiedImageUrlNullable } from "@/scripts/media-proxy";
 
-const name = 'federation';
+const name = "federation";
 
 const widgetPropsDef = {
 	showHeader: {
-		type: 'boolean' as const,
+		type: "boolean" as const,
 		default: true,
 	},
 };
@@ -43,13 +78,18 @@ type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
 // 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
 //const props = defineProps<WidgetComponentProps<WidgetProps> & { foldable?: boolean; scrollable?: boolean; }>();
 //const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-const props = defineProps<{ widget?: Widget<WidgetProps>; foldable?: boolean; scrollable?: boolean; }>();
-const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
+const props = defineProps<{
+	widget?: Widget<WidgetProps>;
+	foldable?: boolean;
+	scrollable?: boolean;
+}>();
+const emit = defineEmits<{ (ev: "updateProps", props: WidgetProps) }>();
 
-const { widgetProps, configure } = useWidgetPropsManager(name,
+const { widgetProps, configure } = useWidgetPropsManager(
+	name,
 	widgetPropsDef,
 	props,
-	emit,
+	emit
 );
 
 const instances = ref([]);
@@ -57,11 +97,19 @@ const charts = ref([]);
 const fetching = ref(true);
 
 const fetch = async () => {
-	const fetchedInstances = await os.api('federation/instances', {
-		sort: '+lastCommunicatedAt',
+	const fetchedInstances = await os.api("federation/instances", {
+		sort: "+lastCommunicatedAt",
 		limit: 5,
 	});
-	const fetchedCharts = await Promise.all(fetchedInstances.map(i => os.apiGet('charts/instance', { host: i.host, limit: 16, span: 'hour' })));
+	const fetchedCharts = await Promise.all(
+		fetchedInstances.map((i) =>
+			os.apiGet("charts/instance", {
+				host: i.host,
+				limit: 16,
+				span: "hour",
+			})
+		)
+	);
 	instances.value = fetchedInstances;
 	charts.value = fetchedCharts;
 	fetching.value = false;
@@ -73,7 +121,11 @@ useInterval(fetch, 1000 * 60, {
 });
 
 function getInstanceIcon(instance): string {
-	return getProxiedImageUrlNullable(instance.iconUrl, 'preview') ?? getProxiedImageUrlNullable(instance.faviconUrl, 'preview') ?? '/client-assets/dummy.png';
+	return (
+		getProxiedImageUrlNullable(instance.iconUrl, "preview") ??
+		getProxiedImageUrlNullable(instance.faviconUrl, "preview") ??
+		"/client-assets/dummy.png"
+	);
 }
 
 defineExpose<WidgetComponentExpose>({
diff --git a/packages/client/src/widgets/instance-cloud.vue b/packages/client/src/widgets/instance-cloud.vue
index 3cb579c28f..b9d4a08057 100644
--- a/packages/client/src/widgets/instance-cloud.vue
+++ b/packages/client/src/widgets/instance-cloud.vue
@@ -1,33 +1,44 @@
 <template>
-<MkContainer :naked="widgetProps.transparent" :show-header="false" class="mkw-instance-cloud">
-	<div class="">
-		<MkTagCloud v-if="activeInstances">
-			<li v-for="instance in activeInstances" :key="instance.id">
-				<a @click.prevent="onInstanceClick(instance)">
-					<img style="width: 32px;" :src="getInstanceIcon(instance)">
-				</a>
-			</li>
-		</MkTagCloud>
-	</div>
-</MkContainer>
+	<MkContainer
+		:naked="widgetProps.transparent"
+		:show-header="false"
+		class="mkw-instance-cloud"
+	>
+		<div class="">
+			<MkTagCloud v-if="activeInstances">
+				<li v-for="instance in activeInstances" :key="instance.id">
+					<a @click.prevent="onInstanceClick(instance)">
+						<img
+							style="width: 32px"
+							:src="getInstanceIcon(instance)"
+						/>
+					</a>
+				</li>
+			</MkTagCloud>
+		</div>
+	</MkContainer>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import { useWidgetPropsManager, WidgetComponentEmits, WidgetComponentProps } from './widget';
-import type { Widget, WidgetComponentExpose } from './widget';
-import type { GetFormResultType } from '@/scripts/form';
-import MkContainer from '@/components/MkContainer.vue';
-import MkTagCloud from '@/components/MkTagCloud.vue';
-import * as os from '@/os';
-import { useInterval } from '@/scripts/use-interval';
-import { getProxiedImageUrlNullable } from '@/scripts/media-proxy';
+import {} from "vue";
+import {
+	useWidgetPropsManager,
+	WidgetComponentEmits,
+	WidgetComponentProps,
+} from "./widget";
+import type { Widget, WidgetComponentExpose } from "./widget";
+import type { GetFormResultType } from "@/scripts/form";
+import MkContainer from "@/components/MkContainer.vue";
+import MkTagCloud from "@/components/MkTagCloud.vue";
+import * as os from "@/os";
+import { useInterval } from "@/scripts/use-interval";
+import { getProxiedImageUrlNullable } from "@/scripts/media-proxy";
 
-const name = 'instanceCloud';
+const name = "instanceCloud";
 
 const widgetPropsDef = {
 	transparent: {
-		type: 'boolean' as const,
+		type: "boolean" as const,
 		default: false,
 	},
 };
@@ -37,13 +48,14 @@ type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
 // 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
 //const props = defineProps<WidgetComponentProps<WidgetProps>>();
 //const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
-const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
+const props = defineProps<{ widget?: Widget<WidgetProps> }>();
+const emit = defineEmits<{ (ev: "updateProps", props: WidgetProps) }>();
 
-const { widgetProps, configure } = useWidgetPropsManager(name,
+const { widgetProps, configure } = useWidgetPropsManager(
+	name,
 	widgetPropsDef,
 	props,
-	emit,
+	emit
 );
 
 let cloud = $ref<InstanceType<typeof MkTagCloud> | null>();
@@ -53,21 +65,29 @@ function onInstanceClick(i) {
 	os.pageWindow(`/instance-info/${i.host}`);
 }
 
-useInterval(() => {
-	os.api('federation/instances', {
-		sort: '+lastCommunicatedAt',
-		limit: 25,
-	}).then(res => {
-		activeInstances = res;
-		if (cloud) cloud.update();
-	});
-}, 1000 * 60 * 3, {
-	immediate: true,
-	afterMounted: true,
-});
+useInterval(
+	() => {
+		os.api("federation/instances", {
+			sort: "+lastCommunicatedAt",
+			limit: 25,
+		}).then((res) => {
+			activeInstances = res;
+			if (cloud) cloud.update();
+		});
+	},
+	1000 * 60 * 3,
+	{
+		immediate: true,
+		afterMounted: true,
+	}
+);
 
 function getInstanceIcon(instance): string {
-	return getProxiedImageUrlNullable(instance.iconUrl, 'preview') ?? getProxiedImageUrlNullable(instance.faviconUrl, 'preview') ?? '/client-assets/dummy.png';
+	return (
+		getProxiedImageUrlNullable(instance.iconUrl, "preview") ??
+		getProxiedImageUrlNullable(instance.faviconUrl, "preview") ??
+		"/client-assets/dummy.png"
+	);
 }
 
 defineExpose<WidgetComponentExpose>({
@@ -77,6 +97,4 @@ defineExpose<WidgetComponentExpose>({
 });
 </script>
 
-<style lang="scss" scoped>
-
-</style>
+<style lang="scss" scoped></style>
diff --git a/packages/client/src/widgets/job-queue.vue b/packages/client/src/widgets/job-queue.vue
index 7f04aca596..1757bd6843 100644
--- a/packages/client/src/widgets/job-queue.vue
+++ b/packages/client/src/widgets/job-queue.vue
@@ -1,69 +1,152 @@
 <template>
-<div class="mkw-jobQueue _monospace" :class="{ _panel: !widgetProps.transparent }">
-	<div class="inbox">
-		<div class="label">Inbox queue<i v-if="current.inbox.waiting > 0" class="ph-warning ph-bold ph-lg icon"></i></div>
-		<div class="values">
-			<div>
-				<div>Process</div>
-				<div :class="{ inc: current.inbox.activeSincePrevTick > prev.inbox.activeSincePrevTick, dec: current.inbox.activeSincePrevTick < prev.inbox.activeSincePrevTick }">{{ number(current.inbox.activeSincePrevTick) }}</div>
+	<div
+		class="mkw-jobQueue _monospace"
+		:class="{ _panel: !widgetProps.transparent }"
+	>
+		<div class="inbox">
+			<div class="label">
+				Inbox queue<i
+					v-if="current.inbox.waiting > 0"
+					class="ph-warning ph-bold ph-lg icon"
+				></i>
 			</div>
-			<div>
-				<div>Active</div>
-				<div :class="{ inc: current.inbox.active > prev.inbox.active, dec: current.inbox.active < prev.inbox.active }">{{ number(current.inbox.active) }}</div>
+			<div class="values">
+				<div>
+					<div>Process</div>
+					<div
+						:class="{
+							inc:
+								current.inbox.activeSincePrevTick >
+								prev.inbox.activeSincePrevTick,
+							dec:
+								current.inbox.activeSincePrevTick <
+								prev.inbox.activeSincePrevTick,
+						}"
+					>
+						{{ number(current.inbox.activeSincePrevTick) }}
+					</div>
+				</div>
+				<div>
+					<div>Active</div>
+					<div
+						:class="{
+							inc: current.inbox.active > prev.inbox.active,
+							dec: current.inbox.active < prev.inbox.active,
+						}"
+					>
+						{{ number(current.inbox.active) }}
+					</div>
+				</div>
+				<div>
+					<div>Delayed</div>
+					<div
+						:class="{
+							inc: current.inbox.delayed > prev.inbox.delayed,
+							dec: current.inbox.delayed < prev.inbox.delayed,
+						}"
+					>
+						{{ number(current.inbox.delayed) }}
+					</div>
+				</div>
+				<div>
+					<div>Waiting</div>
+					<div
+						:class="{
+							inc: current.inbox.waiting > prev.inbox.waiting,
+							dec: current.inbox.waiting < prev.inbox.waiting,
+						}"
+					>
+						{{ number(current.inbox.waiting) }}
+					</div>
+				</div>
 			</div>
-			<div>
-				<div>Delayed</div>
-				<div :class="{ inc: current.inbox.delayed > prev.inbox.delayed, dec: current.inbox.delayed < prev.inbox.delayed }">{{ number(current.inbox.delayed) }}</div>
+		</div>
+		<div class="deliver">
+			<div class="label">
+				Deliver queue<i
+					v-if="current.deliver.waiting > 0"
+					class="ph-warning ph-bold ph-lg icon"
+				></i>
 			</div>
-			<div>
-				<div>Waiting</div>
-				<div :class="{ inc: current.inbox.waiting > prev.inbox.waiting, dec: current.inbox.waiting < prev.inbox.waiting }">{{ number(current.inbox.waiting) }}</div>
+			<div class="values">
+				<div>
+					<div>Process</div>
+					<div
+						:class="{
+							inc:
+								current.deliver.activeSincePrevTick >
+								prev.deliver.activeSincePrevTick,
+							dec:
+								current.deliver.activeSincePrevTick <
+								prev.deliver.activeSincePrevTick,
+						}"
+					>
+						{{ number(current.deliver.activeSincePrevTick) }}
+					</div>
+				</div>
+				<div>
+					<div>Active</div>
+					<div
+						:class="{
+							inc: current.deliver.active > prev.deliver.active,
+							dec: current.deliver.active < prev.deliver.active,
+						}"
+					>
+						{{ number(current.deliver.active) }}
+					</div>
+				</div>
+				<div>
+					<div>Delayed</div>
+					<div
+						:class="{
+							inc: current.deliver.delayed > prev.deliver.delayed,
+							dec: current.deliver.delayed < prev.deliver.delayed,
+						}"
+					>
+						{{ number(current.deliver.delayed) }}
+					</div>
+				</div>
+				<div>
+					<div>Waiting</div>
+					<div
+						:class="{
+							inc: current.deliver.waiting > prev.deliver.waiting,
+							dec: current.deliver.waiting < prev.deliver.waiting,
+						}"
+					>
+						{{ number(current.deliver.waiting) }}
+					</div>
+				</div>
 			</div>
 		</div>
 	</div>
-	<div class="deliver">
-		<div class="label">Deliver queue<i v-if="current.deliver.waiting > 0" class="ph-warning ph-bold ph-lg icon"></i></div>
-		<div class="values">
-			<div>
-				<div>Process</div>
-				<div :class="{ inc: current.deliver.activeSincePrevTick > prev.deliver.activeSincePrevTick, dec: current.deliver.activeSincePrevTick < prev.deliver.activeSincePrevTick }">{{ number(current.deliver.activeSincePrevTick) }}</div>
-			</div>
-			<div>
-				<div>Active</div>
-				<div :class="{ inc: current.deliver.active > prev.deliver.active, dec: current.deliver.active < prev.deliver.active }">{{ number(current.deliver.active) }}</div>
-			</div>
-			<div>
-				<div>Delayed</div>
-				<div :class="{ inc: current.deliver.delayed > prev.deliver.delayed, dec: current.deliver.delayed < prev.deliver.delayed }">{{ number(current.deliver.delayed) }}</div>
-			</div>
-			<div>
-				<div>Waiting</div>
-				<div :class="{ inc: current.deliver.waiting > prev.deliver.waiting, dec: current.deliver.waiting < prev.deliver.waiting }">{{ number(current.deliver.waiting) }}</div>
-			</div>
-		</div>
-	</div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, reactive, ref } from 'vue';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
-import { GetFormResultType } from '@/scripts/form';
-import { stream } from '@/stream';
-import number from '@/filters/number';
-import * as sound from '@/scripts/sound';
-import * as os from '@/os';
-import { deepClone } from '@/scripts/clone';
+import { onMounted, onUnmounted, reactive, ref } from "vue";
+import {
+	useWidgetPropsManager,
+	Widget,
+	WidgetComponentEmits,
+	WidgetComponentExpose,
+	WidgetComponentProps,
+} from "./widget";
+import { GetFormResultType } from "@/scripts/form";
+import { stream } from "@/stream";
+import number from "@/filters/number";
+import * as sound from "@/scripts/sound";
+import * as os from "@/os";
+import { deepClone } from "@/scripts/clone";
 
-const name = 'jobQueue';
+const name = "jobQueue";
 
 const widgetPropsDef = {
 	transparent: {
-		type: 'boolean' as const,
+		type: "boolean" as const,
 		default: false,
 	},
 	sound: {
-		type: 'boolean' as const,
+		type: "boolean" as const,
 		default: false,
 	},
 };
@@ -73,16 +156,17 @@ type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
 // 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
 //const props = defineProps<WidgetComponentProps<WidgetProps>>();
 //const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
-const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
+const props = defineProps<{ widget?: Widget<WidgetProps> }>();
+const emit = defineEmits<{ (ev: "updateProps", props: WidgetProps) }>();
 
-const { widgetProps, configure } = useWidgetPropsManager(name,
+const { widgetProps, configure } = useWidgetPropsManager(
+	name,
 	widgetPropsDef,
 	props,
-	emit,
+	emit
 );
 
-const connection = stream.useChannel('queueStats');
+const connection = stream.useChannel("queueStats");
 const current = reactive({
 	inbox: {
 		activeSincePrevTick: 0,
@@ -98,21 +182,25 @@ const current = reactive({
 	},
 });
 const prev = reactive({} as typeof current);
-const jammedSound = sound.setVolume(sound.getAudio('syuilo/queue-jammed'), 1);
+const jammedSound = sound.setVolume(sound.getAudio("syuilo/queue-jammed"), 1);
 
-for (const domain of ['inbox', 'deliver']) {
+for (const domain of ["inbox", "deliver"]) {
 	prev[domain] = deepClone(current[domain]);
 }
 
 const onStats = (stats) => {
-	for (const domain of ['inbox', 'deliver']) {
+	for (const domain of ["inbox", "deliver"]) {
 		prev[domain] = deepClone(current[domain]);
 		current[domain].activeSincePrevTick = stats[domain].activeSincePrevTick;
 		current[domain].active = stats[domain].active;
 		current[domain].waiting = stats[domain].waiting;
 		current[domain].delayed = stats[domain].delayed;
 
-		if (current[domain].waiting > 0 && widgetProps.sound && jammedSound.paused) {
+		if (
+			current[domain].waiting > 0 &&
+			widgetProps.sound &&
+			jammedSound.paused
+		) {
 			jammedSound.play();
 		}
 	}
@@ -124,17 +212,17 @@ const onStatsLog = (statsLog) => {
 	}
 };
 
-connection.on('stats', onStats);
-connection.on('statsLog', onStatsLog);
+connection.on("stats", onStats);
+connection.on("statsLog", onStatsLog);
 
-connection.send('requestLog', {
+connection.send("requestLog", {
 	id: Math.random().toString().substr(2, 8),
 	length: 1,
 });
 
 onUnmounted(() => {
-	connection.off('stats', onStats);
-	connection.off('statsLog', onStatsLog);
+	connection.off("stats", onStats);
+	connection.off("statsLog", onStatsLog);
 	connection.dispose();
 });
 
@@ -147,8 +235,12 @@ defineExpose<WidgetComponentExpose>({
 
 <style lang="scss" scoped>
 @keyframes warnBlink {
-	0% { opacity: 1; }
-	50% { opacity: 0; }
+	0% {
+		opacity: 1;
+	}
+	50% {
+		opacity: 0;
+	}
 }
 
 .mkw-jobQueue {
diff --git a/packages/client/src/widgets/memo.vue b/packages/client/src/widgets/memo.vue
index 140a1960be..06f2e1bd91 100644
--- a/packages/client/src/widgets/memo.vue
+++ b/packages/client/src/widgets/memo.vue
@@ -1,28 +1,47 @@
 <template>
-<MkContainer :show-header="widgetProps.showHeader" class="mkw-memo">
-	<template #header><i class="ph-sticker ph-bold ph-lg"></i>{{ i18n.ts._widgets.memo }}</template>
+	<MkContainer :show-header="widgetProps.showHeader" class="mkw-memo">
+		<template #header
+			><i class="ph-sticker ph-bold ph-lg"></i
+			>{{ i18n.ts._widgets.memo }}</template
+		>
 
-	<div class="otgbylcu">
-		<textarea v-model="text" :placeholder="i18n.ts.placeholder" @input="onChange"></textarea>
-		<button :disabled="!changed" class="_buttonPrimary" @click="saveMemo">{{ i18n.ts.save }}</button>
-	</div>
-</MkContainer>
+		<div class="otgbylcu">
+			<textarea
+				v-model="text"
+				:placeholder="i18n.ts.placeholder"
+				@input="onChange"
+			></textarea>
+			<button
+				:disabled="!changed"
+				class="_buttonPrimary"
+				@click="saveMemo"
+			>
+				{{ i18n.ts.save }}
+			</button>
+		</div>
+	</MkContainer>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, reactive, ref, watch } from 'vue';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
-import { GetFormResultType } from '@/scripts/form';
-import * as os from '@/os';
-import MkContainer from '@/components/MkContainer.vue';
-import { defaultStore } from '@/store';
-import { i18n } from '@/i18n';
+import { onMounted, onUnmounted, reactive, ref, watch } from "vue";
+import {
+	useWidgetPropsManager,
+	Widget,
+	WidgetComponentEmits,
+	WidgetComponentExpose,
+	WidgetComponentProps,
+} from "./widget";
+import { GetFormResultType } from "@/scripts/form";
+import * as os from "@/os";
+import MkContainer from "@/components/MkContainer.vue";
+import { defaultStore } from "@/store";
+import { i18n } from "@/i18n";
 
-const name = 'memo';
+const name = "memo";
 
 const widgetPropsDef = {
 	showHeader: {
-		type: 'boolean' as const,
+		type: "boolean" as const,
 		default: true,
 	},
 };
@@ -32,13 +51,14 @@ type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
 // Currently, due to a limitation of vue, imported types cannot be passed to generics.
 //const props = defineProps<WidgetComponentProps<WidgetProps>>();
 //const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
-const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
+const props = defineProps<{ widget?: Widget<WidgetProps> }>();
+const emit = defineEmits<{ (ev: "updateProps", props: WidgetProps) }>();
 
-const { widgetProps, configure } = useWidgetPropsManager(name,
+const { widgetProps, configure } = useWidgetPropsManager(
+	name,
 	widgetPropsDef,
 	props,
-	emit,
+	emit
 );
 
 const text = ref<string | null>(defaultStore.state.memo);
@@ -46,7 +66,7 @@ const changed = ref(false);
 let timeoutId;
 
 const saveMemo = () => {
-	defaultStore.set('memo', text.value);
+	defaultStore.set("memo", text.value);
 	changed.value = false;
 };
 
@@ -56,9 +76,12 @@ const onChange = () => {
 	timeoutId = window.setTimeout(saveMemo, 1000);
 };
 
-watch(() => defaultStore.reactiveState.memo, newText => {
-	text.value = newText.value;
-});
+watch(
+	() => defaultStore.reactiveState.memo,
+	(newText) => {
+		text.value = newText.value;
+	}
+);
 
 defineExpose<WidgetComponentExpose>({
 	name,
diff --git a/packages/client/src/widgets/notifications.vue b/packages/client/src/widgets/notifications.vue
index 9cdbb94c05..48fb9278a9 100644
--- a/packages/client/src/widgets/notifications.vue
+++ b/packages/client/src/widgets/notifications.vue
@@ -1,35 +1,57 @@
 <template>
-<MkContainer :style="`height: ${widgetProps.height}px;`" :show-header="widgetProps.showHeader" :scrollable="true" class="mkw-notifications">
-	<template #header><i class="ph-bell ph-bold ph-lg"></i>{{ i18n.ts.notifications }}</template>
-	<template #func><button class="_button" @click="os.apiWithDialog('notifications/mark-all-as-read');"><i class="ph-check ph-bold ph-lg"></i></button><button class="_button" @click="configureNotification()"><i class="ph-gear-six ph-bold ph-lg"></i></button></template>
-	<div>
-		<XNotifications :include-types="widgetProps.includingTypes"/>
-	</div>
-</MkContainer>
+	<MkContainer
+		:style="`height: ${widgetProps.height}px;`"
+		:show-header="widgetProps.showHeader"
+		:scrollable="true"
+		class="mkw-notifications"
+	>
+		<template #header
+			><i class="ph-bell ph-bold ph-lg"></i
+			>{{ i18n.ts.notifications }}</template
+		>
+		<template #func
+			><button
+				class="_button"
+				@click="os.apiWithDialog('notifications/mark-all-as-read')"
+			>
+				<i class="ph-check ph-bold ph-lg"></i></button
+			><button class="_button" @click="configureNotification()">
+				<i class="ph-gear-six ph-bold ph-lg"></i></button
+		></template>
+		<div>
+			<XNotifications :include-types="widgetProps.includingTypes" />
+		</div>
+	</MkContainer>
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent } from 'vue';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
-import { GetFormResultType } from '@/scripts/form';
-import MkContainer from '@/components/MkContainer.vue';
-import XNotifications from '@/components/MkNotifications.vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
+import { defineAsyncComponent } from "vue";
+import {
+	useWidgetPropsManager,
+	Widget,
+	WidgetComponentEmits,
+	WidgetComponentExpose,
+	WidgetComponentProps,
+} from "./widget";
+import { GetFormResultType } from "@/scripts/form";
+import MkContainer from "@/components/MkContainer.vue";
+import XNotifications from "@/components/MkNotifications.vue";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
 
-const name = 'notifications';
+const name = "notifications";
 
 const widgetPropsDef = {
 	showHeader: {
-		type: 'boolean' as const,
+		type: "boolean" as const,
 		default: true,
 	},
 	height: {
-		type: 'number' as const,
+		type: "number" as const,
 		default: 300,
 	},
 	includingTypes: {
-		type: 'array' as const,
+		type: "array" as const,
 		hidden: true,
 		default: null,
 	},
@@ -40,25 +62,33 @@ type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
 // 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
 //const props = defineProps<WidgetComponentProps<WidgetProps>>();
 //const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
-const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
+const props = defineProps<{ widget?: Widget<WidgetProps> }>();
+const emit = defineEmits<{ (ev: "updateProps", props: WidgetProps) }>();
 
-const { widgetProps, configure, save } = useWidgetPropsManager(name,
+const { widgetProps, configure, save } = useWidgetPropsManager(
+	name,
 	widgetPropsDef,
 	props,
-	emit,
+	emit
 );
 
 const configureNotification = () => {
-	os.popup(defineAsyncComponent(() => import('@/components/MkNotificationSettingWindow.vue')), {
-		includingTypes: widgetProps.includingTypes,
-	}, {
-		done: async (res) => {
-			const { includingTypes } = res;
-			widgetProps.includingTypes = includingTypes;
-			save();
+	os.popup(
+		defineAsyncComponent(
+			() => import("@/components/MkNotificationSettingWindow.vue")
+		),
+		{
+			includingTypes: widgetProps.includingTypes,
 		},
-	}, 'closed');
+		{
+			done: async (res) => {
+				const { includingTypes } = res;
+				widgetProps.includingTypes = includingTypes;
+				save();
+			},
+		},
+		"closed"
+	);
 };
 
 defineExpose<WidgetComponentExpose>({
diff --git a/packages/client/src/widgets/online-users.vue b/packages/client/src/widgets/online-users.vue
index ed885bf13c..5ec197bcd0 100644
--- a/packages/client/src/widgets/online-users.vue
+++ b/packages/client/src/widgets/online-users.vue
@@ -1,24 +1,43 @@
 <template>
-<div class="mkw-onlineUsers" :class="{ _panel: !widgetProps.transparent, pad: !widgetProps.transparent }">
-	<I18n v-if="onlineUsersCount" :src="i18n.ts.onlineUsersCount" text-tag="span" class="text">
-		<template #n><b>{{ onlineUsersCount }}</b></template>
-	</I18n>
-</div>
+	<div
+		class="mkw-onlineUsers"
+		:class="{
+			_panel: !widgetProps.transparent,
+			pad: !widgetProps.transparent,
+		}"
+	>
+		<I18n
+			v-if="onlineUsersCount"
+			:src="i18n.ts.onlineUsersCount"
+			text-tag="span"
+			class="text"
+		>
+			<template #n
+				><b>{{ onlineUsersCount }}</b></template
+			>
+		</I18n>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, ref } from 'vue';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
-import { GetFormResultType } from '@/scripts/form';
-import * as os from '@/os';
-import { useInterval } from '@/scripts/use-interval';
-import { i18n } from '@/i18n';
+import { onMounted, onUnmounted, ref } from "vue";
+import {
+	useWidgetPropsManager,
+	Widget,
+	WidgetComponentEmits,
+	WidgetComponentExpose,
+	WidgetComponentProps,
+} from "./widget";
+import { GetFormResultType } from "@/scripts/form";
+import * as os from "@/os";
+import { useInterval } from "@/scripts/use-interval";
+import { i18n } from "@/i18n";
 
-const name = 'onlineUsers';
+const name = "onlineUsers";
 
 const widgetPropsDef = {
 	transparent: {
-		type: 'boolean' as const,
+		type: "boolean" as const,
 		default: true,
 	},
 };
@@ -28,19 +47,20 @@ type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
 // 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
 //const props = defineProps<WidgetComponentProps<WidgetProps>>();
 //const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
-const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
+const props = defineProps<{ widget?: Widget<WidgetProps> }>();
+const emit = defineEmits<{ (ev: "updateProps", props: WidgetProps) }>();
 
-const { widgetProps, configure } = useWidgetPropsManager(name,
+const { widgetProps, configure } = useWidgetPropsManager(
+	name,
 	widgetPropsDef,
 	props,
-	emit,
+	emit
 );
 
 const onlineUsersCount = ref(0);
 
 const tick = () => {
-	os.api('get-online-users-count').then(res => {
+	os.api("get-online-users-count").then((res) => {
 		onlineUsersCount.value = res.count;
 	});
 };
diff --git a/packages/client/src/widgets/photos.vue b/packages/client/src/widgets/photos.vue
index bc18cd8158..ef160f8c6d 100644
--- a/packages/client/src/widgets/photos.vue
+++ b/packages/client/src/widgets/photos.vue
@@ -1,40 +1,56 @@
 <template>
-<MkContainer :show-header="widgetProps.showHeader" :naked="widgetProps.transparent" :class="$style.root" :data-transparent="widgetProps.transparent ? true : null" class="mkw-photos">
-	<template #header><i class="ph-camera ph-bold ph-lg"></i>{{ i18n.ts._widgets.photos }}</template>
+	<MkContainer
+		:show-header="widgetProps.showHeader"
+		:naked="widgetProps.transparent"
+		:class="$style.root"
+		:data-transparent="widgetProps.transparent ? true : null"
+		class="mkw-photos"
+	>
+		<template #header
+			><i class="ph-camera ph-bold ph-lg"></i
+			>{{ i18n.ts._widgets.photos }}</template
+		>
 
-	<div class="">
-		<MkLoading v-if="fetching"/>
-		<div v-else :class="$style.stream">
-			<div
-				v-for="(image, i) in images" :key="i"
-				:class="$style.img"
-				:style="`background-image: url(${thumbnail(image)})`"
-			></div>
+		<div class="">
+			<MkLoading v-if="fetching" />
+			<div v-else :class="$style.stream">
+				<div
+					v-for="(image, i) in images"
+					:key="i"
+					:class="$style.img"
+					:style="`background-image: url(${thumbnail(image)})`"
+				></div>
+			</div>
 		</div>
-	</div>
-</MkContainer>
+	</MkContainer>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, reactive, ref } from 'vue';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
-import { GetFormResultType } from '@/scripts/form';
-import { stream } from '@/stream';
-import { getStaticImageUrl } from '@/scripts/get-static-image-url';
-import * as os from '@/os';
-import MkContainer from '@/components/MkContainer.vue';
-import { defaultStore } from '@/store';
-import { i18n } from '@/i18n';
+import { onMounted, onUnmounted, reactive, ref } from "vue";
+import {
+	useWidgetPropsManager,
+	Widget,
+	WidgetComponentEmits,
+	WidgetComponentExpose,
+	WidgetComponentProps,
+} from "./widget";
+import { GetFormResultType } from "@/scripts/form";
+import { stream } from "@/stream";
+import { getStaticImageUrl } from "@/scripts/get-static-image-url";
+import * as os from "@/os";
+import MkContainer from "@/components/MkContainer.vue";
+import { defaultStore } from "@/store";
+import { i18n } from "@/i18n";
 
-const name = 'photos';
+const name = "photos";
 
 const widgetPropsDef = {
 	showHeader: {
-		type: 'boolean' as const,
+		type: "boolean" as const,
 		default: true,
 	},
 	transparent: {
-		type: 'boolean' as const,
+		type: "boolean" as const,
 		default: false,
 	},
 };
@@ -44,16 +60,17 @@ type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
 // 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
 //const props = defineProps<WidgetComponentProps<WidgetProps>>();
 //const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
-const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
+const props = defineProps<{ widget?: Widget<WidgetProps> }>();
+const emit = defineEmits<{ (ev: "updateProps", props: WidgetProps) }>();
 
-const { widgetProps, configure } = useWidgetPropsManager(name,
+const { widgetProps, configure } = useWidgetPropsManager(
+	name,
 	widgetPropsDef,
 	props,
-	emit,
+	emit
 );
 
-const connection = stream.useChannel('main');
+const connection = stream.useChannel("main");
 const images = ref([]);
 const fetching = ref(true);
 
@@ -70,15 +87,15 @@ const thumbnail = (image: any): string => {
 		: image.thumbnailUrl;
 };
 
-os.api('drive/stream', {
-	type: 'image/*',
+os.api("drive/stream", {
+	type: "image/*",
 	limit: 9,
-}).then(res => {
+}).then((res) => {
 	images.value = res;
 	fetching.value = false;
 });
 
-connection.on('driveFileCreated', onDriveFileCreated);
+connection.on("driveFileCreated", onDriveFileCreated);
 onUnmounted(() => {
 	connection.dispose();
 });
diff --git a/packages/client/src/widgets/post-form.vue b/packages/client/src/widgets/post-form.vue
index f1708775ba..e44f23fbb3 100644
--- a/packages/client/src/widgets/post-form.vue
+++ b/packages/client/src/widgets/post-form.vue
@@ -1,30 +1,36 @@
 <template>
-<XPostForm class="_panel mkw-postForm" :fixed="true" :autofocus="false"/>
+	<XPostForm class="_panel mkw-postForm" :fixed="true" :autofocus="false" />
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import { GetFormResultType } from '@/scripts/form';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
-import XPostForm from '@/components/MkPostForm.vue';
+import {} from "vue";
+import { GetFormResultType } from "@/scripts/form";
+import {
+	useWidgetPropsManager,
+	Widget,
+	WidgetComponentEmits,
+	WidgetComponentExpose,
+	WidgetComponentProps,
+} from "./widget";
+import XPostForm from "@/components/MkPostForm.vue";
 
-const name = 'postForm';
+const name = "postForm";
 
-const widgetPropsDef = {
-};
+const widgetPropsDef = {};
 
 type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
 
 // 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
 //const props = defineProps<WidgetComponentProps<WidgetProps>>();
 //const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
-const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
+const props = defineProps<{ widget?: Widget<WidgetProps> }>();
+const emit = defineEmits<{ (ev: "updateProps", props: WidgetProps) }>();
 
-const { widgetProps, configure } = useWidgetPropsManager(name,
+const { widgetProps, configure } = useWidgetPropsManager(
+	name,
 	widgetPropsDef,
 	props,
-	emit,
+	emit
 );
 
 defineExpose<WidgetComponentExpose>({
diff --git a/packages/client/src/widgets/rss-ticker.vue b/packages/client/src/widgets/rss-ticker.vue
index 788c3c5c8f..0126f2169a 100644
--- a/packages/client/src/widgets/rss-ticker.vue
+++ b/packages/client/src/widgets/rss-ticker.vue
@@ -1,65 +1,89 @@
 <template>
-<MkContainer :naked="widgetProps.transparent" :show-header="widgetProps.showHeader" class="mkw-rss-ticker">
-	<template #header><i class="ph-rss ph-bold ph-lg"></i>RSS</template>
-	<template #func><button class="_button" @click="configure"><i class="ph-gear-six ph-bold ph-lg"></i></button></template>
+	<MkContainer
+		:naked="widgetProps.transparent"
+		:show-header="widgetProps.showHeader"
+		class="mkw-rss-ticker"
+	>
+		<template #header><i class="ph-rss ph-bold ph-lg"></i>RSS</template>
+		<template #func
+			><button class="_button" @click="configure">
+				<i class="ph-gear-six ph-bold ph-lg"></i></button
+		></template>
 
-	<div class="ekmkgxbk">
-		<MkLoading v-if="fetching"/>
-		<div v-else class="feed">
-			<transition name="change" mode="default">
-				<MarqueeText :key="key" :duration="widgetProps.duration" :reverse="widgetProps.reverse">
-					<span v-for="item in items" class="item">
-						<a class="link" :href="item.link" rel="nofollow noopener" target="_blank" :title="item.title">{{ item.title }}</a><span class="divider"></span>
-					</span>
-				</MarqueeText>
-			</transition>
+		<div class="ekmkgxbk">
+			<MkLoading v-if="fetching" />
+			<div v-else class="feed">
+				<transition name="change" mode="default">
+					<MarqueeText
+						:key="key"
+						:duration="widgetProps.duration"
+						:reverse="widgetProps.reverse"
+					>
+						<span v-for="item in items" class="item">
+							<a
+								class="link"
+								:href="item.link"
+								rel="nofollow noopener"
+								target="_blank"
+								:title="item.title"
+								>{{ item.title }}</a
+							><span class="divider"></span>
+						</span>
+					</MarqueeText>
+				</transition>
+			</div>
 		</div>
-	</div>
-</MkContainer>
+	</MkContainer>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, ref, watch } from 'vue';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
-import MarqueeText from '@/components/MkMarquee.vue';
-import { GetFormResultType } from '@/scripts/form';
-import * as os from '@/os';
-import MkContainer from '@/components/MkContainer.vue';
-import { useInterval } from '@/scripts/use-interval';
-import { shuffle } from '@/scripts/shuffle';
+import { onMounted, onUnmounted, ref, watch } from "vue";
+import {
+	useWidgetPropsManager,
+	Widget,
+	WidgetComponentEmits,
+	WidgetComponentExpose,
+	WidgetComponentProps,
+} from "./widget";
+import MarqueeText from "@/components/MkMarquee.vue";
+import { GetFormResultType } from "@/scripts/form";
+import * as os from "@/os";
+import MkContainer from "@/components/MkContainer.vue";
+import { useInterval } from "@/scripts/use-interval";
+import { shuffle } from "@/scripts/shuffle";
 
-const name = 'rssTicker';
+const name = "rssTicker";
 
 const widgetPropsDef = {
 	url: {
-		type: 'string' as const,
-		default: 'http://feeds.afpbb.com/rss/afpbb/afpbbnews',
+		type: "string" as const,
+		default: "http://feeds.afpbb.com/rss/afpbb/afpbbnews",
 	},
 	shuffle: {
-		type: 'boolean' as const,
+		type: "boolean" as const,
 		default: true,
 	},
 	refreshIntervalSec: {
-		type: 'number' as const,
+		type: "number" as const,
 		default: 60,
 	},
 	duration: {
-		type: 'range' as const,
+		type: "range" as const,
 		default: 70,
 		step: 1,
 		min: 5,
 		max: 200,
 	},
 	reverse: {
-		type: 'boolean' as const,
+		type: "boolean" as const,
 		default: false,
 	},
 	showHeader: {
-		type: 'boolean' as const,
+		type: "boolean" as const,
 		default: false,
 	},
 	transparent: {
-		type: 'boolean' as const,
+		type: "boolean" as const,
 		default: false,
 	},
 };
@@ -69,13 +93,14 @@ type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
 // 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
 //const props = defineProps<WidgetComponentProps<WidgetProps>>();
 //const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
-const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
+const props = defineProps<{ widget?: Widget<WidgetProps> }>();
+const emit = defineEmits<{ (ev: "updateProps", props: WidgetProps) }>();
 
-const { widgetProps, configure } = useWidgetPropsManager(name,
+const { widgetProps, configure } = useWidgetPropsManager(
+	name,
 	widgetPropsDef,
 	props,
-	emit,
+	emit
 );
 
 const items = ref([]);
@@ -83,8 +108,8 @@ const fetching = ref(true);
 let key = $ref(0);
 
 const tick = () => {
-	fetch(`/api/fetch-rss?url=${widgetProps.url}`, {}).then(res => {
-		res.json().then(feed => {
+	fetch(`/api/fetch-rss?url=${widgetProps.url}`, {}).then((res) => {
+		res.json().then((feed) => {
 			if (widgetProps.shuffle) {
 				shuffle(feed.items);
 			}
@@ -110,17 +135,18 @@ defineExpose<WidgetComponentExpose>({
 </script>
 
 <style lang="scss" scoped>
-.change-enter-active, .change-leave-active {
+.change-enter-active,
+.change-leave-active {
 	position: absolute;
 	top: 0;
-  transition: all 1s ease;
+	transition: all 1s ease;
 }
 .change-enter-from {
-  opacity: 0;
+	opacity: 0;
 	transform: translateY(-100%);
 }
 .change-leave-to {
-  opacity: 0;
+	opacity: 0;
 	transform: translateY(100%);
 }
 
diff --git a/packages/client/src/widgets/rss.vue b/packages/client/src/widgets/rss.vue
index 236d348a9b..370ec2023b 100644
--- a/packages/client/src/widgets/rss.vue
+++ b/packages/client/src/widgets/rss.vue
@@ -1,34 +1,51 @@
 <template>
-<MkContainer :show-header="widgetProps.showHeader" class="mkw-rss">
-	<template #header><i class="ph-rss ph-bold ph-lg"></i>RSS</template>
-	<template #func><button class="_button" @click="configure"><i class="ph-gear-six ph-bold ph-lg"></i></button></template>
+	<MkContainer :show-header="widgetProps.showHeader" class="mkw-rss">
+		<template #header><i class="ph-rss ph-bold ph-lg"></i>RSS</template>
+		<template #func
+			><button class="_button" @click="configure">
+				<i class="ph-gear-six ph-bold ph-lg"></i></button
+		></template>
 
-	<div class="ekmkgxbj">
-		<MkLoading v-if="fetching"/>
-		<div v-else class="feed">
-			<a v-for="item in items" class="item" :href="item.link" rel="nofollow noopener" target="_blank" :title="item.title">{{ item.title }}</a>
+		<div class="ekmkgxbj">
+			<MkLoading v-if="fetching" />
+			<div v-else class="feed">
+				<a
+					v-for="item in items"
+					class="item"
+					:href="item.link"
+					rel="nofollow noopener"
+					target="_blank"
+					:title="item.title"
+					>{{ item.title }}</a
+				>
+			</div>
 		</div>
-	</div>
-</MkContainer>
+	</MkContainer>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, ref, watch } from 'vue';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
-import { GetFormResultType } from '@/scripts/form';
-import * as os from '@/os';
-import MkContainer from '@/components/MkContainer.vue';
-import { useInterval } from '@/scripts/use-interval';
+import { onMounted, onUnmounted, ref, watch } from "vue";
+import {
+	useWidgetPropsManager,
+	Widget,
+	WidgetComponentEmits,
+	WidgetComponentExpose,
+	WidgetComponentProps,
+} from "./widget";
+import { GetFormResultType } from "@/scripts/form";
+import * as os from "@/os";
+import MkContainer from "@/components/MkContainer.vue";
+import { useInterval } from "@/scripts/use-interval";
 
-const name = 'rss';
+const name = "rss";
 
 const widgetPropsDef = {
 	url: {
-		type: 'string' as const,
-		default: 'http://feeds.afpbb.com/rss/afpbb/afpbbnews',
+		type: "string" as const,
+		default: "http://feeds.afpbb.com/rss/afpbb/afpbbnews",
 	},
 	showHeader: {
-		type: 'boolean' as const,
+		type: "boolean" as const,
 		default: true,
 	},
 };
@@ -38,21 +55,22 @@ type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
 // 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
 //const props = defineProps<WidgetComponentProps<WidgetProps>>();
 //const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
-const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
+const props = defineProps<{ widget?: Widget<WidgetProps> }>();
+const emit = defineEmits<{ (ev: "updateProps", props: WidgetProps) }>();
 
-const { widgetProps, configure } = useWidgetPropsManager(name,
+const { widgetProps, configure } = useWidgetPropsManager(
+	name,
 	widgetPropsDef,
 	props,
-	emit,
+	emit
 );
 
 const items = ref([]);
 const fetching = ref(true);
 
 const tick = () => {
-	fetch(`/api/fetch-rss?url=${widgetProps.url}`, {}).then(res => {
-		res.json().then(feed => {
+	fetch(`/api/fetch-rss?url=${widgetProps.url}`, {}).then((res) => {
+		res.json().then((feed) => {
 			items.value = feed.items;
 			fetching.value = false;
 		});
diff --git a/packages/client/src/widgets/server-metric/cpu-mem.vue b/packages/client/src/widgets/server-metric/cpu-mem.vue
index 00c3a10c9b..76ef290f6a 100644
--- a/packages/client/src/widgets/server-metric/cpu-mem.vue
+++ b/packages/client/src/widgets/server-metric/cpu-mem.vue
@@ -1,81 +1,93 @@
 <template>
-<div class="lcfyofjk">
-	<svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`">
-		<defs>
-			<linearGradient :id="cpuGradientId" x1="0" x2="0" y1="1" y2="0">
-				<stop offset="0%" stop-color="hsl(180, 80%, 70%)"></stop>
-				<stop offset="100%" stop-color="hsl(0, 80%, 70%)"></stop>
-			</linearGradient>
-			<mask :id="cpuMaskId" x="0" y="0" :width="viewBoxX" :height="viewBoxY">
-				<polygon
-					:points="cpuPolygonPoints"
-					fill="#fff"
-					fill-opacity="0.5"
-				/>
-				<polyline
-					:points="cpuPolylinePoints"
-					fill="none"
-					stroke="#fff"
-					stroke-width="1"
-				/>
-				<circle
-					:cx="cpuHeadX"
-					:cy="cpuHeadY"
-					r="1.5"
-					fill="#fff"
-				/>
-			</mask>
-		</defs>
-		<rect
-			x="-2" y="-2"
-			:width="viewBoxX + 4" :height="viewBoxY + 4"
-			:style="`stroke: none; fill: url(#${ cpuGradientId }); mask: url(#${ cpuMaskId })`"
-		/>
-		<text x="1" y="5">CPU <tspan>{{ cpuP }}%</tspan></text>
-	</svg>
-	<svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`">
-		<defs>
-			<linearGradient :id="memGradientId" x1="0" x2="0" y1="1" y2="0">
-				<stop offset="0%" stop-color="hsl(180, 80%, 70%)"></stop>
-				<stop offset="100%" stop-color="hsl(0, 80%, 70%)"></stop>
-			</linearGradient>
-			<mask :id="memMaskId" x="0" y="0" :width="viewBoxX" :height="viewBoxY">
-				<polygon
-					:points="memPolygonPoints"
-					fill="#fff"
-					fill-opacity="0.5"
-				/>
-				<polyline
-					:points="memPolylinePoints"
-					fill="none"
-					stroke="#fff"
-					stroke-width="1"
-				/>
-				<circle
-					:cx="memHeadX"
-					:cy="memHeadY"
-					r="1.5"
-					fill="#fff"
-				/>
-			</mask>
-		</defs>
-		<rect
-			x="-2" y="-2"
-			:width="viewBoxX + 4" :height="viewBoxY + 4"
-			:style="`stroke: none; fill: url(#${ memGradientId }); mask: url(#${ memMaskId })`"
-		/>
-		<text x="1" y="5">MEM <tspan>{{ memP }}%</tspan></text>
-	</svg>
-</div>
+	<div class="lcfyofjk">
+		<svg :viewBox="`0 0 ${viewBoxX} ${viewBoxY}`">
+			<defs>
+				<linearGradient :id="cpuGradientId" x1="0" x2="0" y1="1" y2="0">
+					<stop offset="0%" stop-color="hsl(180, 80%, 70%)"></stop>
+					<stop offset="100%" stop-color="hsl(0, 80%, 70%)"></stop>
+				</linearGradient>
+				<mask
+					:id="cpuMaskId"
+					x="0"
+					y="0"
+					:width="viewBoxX"
+					:height="viewBoxY"
+				>
+					<polygon
+						:points="cpuPolygonPoints"
+						fill="#fff"
+						fill-opacity="0.5"
+					/>
+					<polyline
+						:points="cpuPolylinePoints"
+						fill="none"
+						stroke="#fff"
+						stroke-width="1"
+					/>
+					<circle :cx="cpuHeadX" :cy="cpuHeadY" r="1.5" fill="#fff" />
+				</mask>
+			</defs>
+			<rect
+				x="-2"
+				y="-2"
+				:width="viewBoxX + 4"
+				:height="viewBoxY + 4"
+				:style="`stroke: none; fill: url(#${cpuGradientId}); mask: url(#${cpuMaskId})`"
+			/>
+			<text x="1" y="5">
+				CPU
+				<tspan>{{ cpuP }}%</tspan>
+			</text>
+		</svg>
+		<svg :viewBox="`0 0 ${viewBoxX} ${viewBoxY}`">
+			<defs>
+				<linearGradient :id="memGradientId" x1="0" x2="0" y1="1" y2="0">
+					<stop offset="0%" stop-color="hsl(180, 80%, 70%)"></stop>
+					<stop offset="100%" stop-color="hsl(0, 80%, 70%)"></stop>
+				</linearGradient>
+				<mask
+					:id="memMaskId"
+					x="0"
+					y="0"
+					:width="viewBoxX"
+					:height="viewBoxY"
+				>
+					<polygon
+						:points="memPolygonPoints"
+						fill="#fff"
+						fill-opacity="0.5"
+					/>
+					<polyline
+						:points="memPolylinePoints"
+						fill="none"
+						stroke="#fff"
+						stroke-width="1"
+					/>
+					<circle :cx="memHeadX" :cy="memHeadY" r="1.5" fill="#fff" />
+				</mask>
+			</defs>
+			<rect
+				x="-2"
+				y="-2"
+				:width="viewBoxX + 4"
+				:height="viewBoxY + 4"
+				:style="`stroke: none; fill: url(#${memGradientId}); mask: url(#${memMaskId})`"
+			/>
+			<text x="1" y="5">
+				MEM
+				<tspan>{{ memP }}%</tspan>
+			</text>
+		</svg>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onBeforeUnmount } from 'vue';
-import { v4 as uuid } from 'uuid';
+import { onMounted, onBeforeUnmount } from "vue";
+import { v4 as uuid } from "uuid";
 
 const props = defineProps<{
-	connection: any,
-	meta: any
+	connection: any;
+	meta: any;
 }>();
 
 let viewBoxX: number = $ref(50);
@@ -85,41 +97,55 @@ const cpuGradientId = uuid();
 const cpuMaskId = uuid();
 const memGradientId = uuid();
 const memMaskId = uuid();
-let cpuPolylinePoints: string = $ref('');
-let memPolylinePoints: string = $ref('');
-let cpuPolygonPoints: string = $ref('');
-let memPolygonPoints: string = $ref('');
+let cpuPolylinePoints: string = $ref("");
+let memPolylinePoints: string = $ref("");
+let cpuPolygonPoints: string = $ref("");
+let memPolygonPoints: string = $ref("");
 let cpuHeadX: any = $ref(null);
 let cpuHeadY: any = $ref(null);
 let memHeadX: any = $ref(null);
 let memHeadY: any = $ref(null);
-let cpuP: string = $ref('');
-let memP: string = $ref('');
+let cpuP: string = $ref("");
+let memP: string = $ref("");
 
 onMounted(() => {
-	props.connection.on('stats', onStats);
-	props.connection.on('statsLog', onStatsLog);
-	props.connection.send('requestLog', {
-		id: Math.random().toString().substr(2, 8)
+	props.connection.on("stats", onStats);
+	props.connection.on("statsLog", onStatsLog);
+	props.connection.send("requestLog", {
+		id: Math.random().toString().substr(2, 8),
 	});
 });
 
 onBeforeUnmount(() => {
-	props.connection.off('stats', onStats);
-	props.connection.off('statsLog', onStatsLog);
+	props.connection.off("stats", onStats);
+	props.connection.off("statsLog", onStatsLog);
 });
 
 function onStats(connStats) {
 	stats.push(connStats);
 	if (stats.length > 50) stats.shift();
 
-	let cpuPolylinePointsStats = stats.map((s, i) => [viewBoxX - ((stats.length - 1) - i), (1 - s.cpu) * viewBoxY]);
-	let memPolylinePointsStats = stats.map((s, i) => [viewBoxX - ((stats.length - 1) - i), (1 - (s.mem.active / props.meta.mem.total)) * viewBoxY]);
-	cpuPolylinePoints = cpuPolylinePointsStats.map(xy => `${xy[0]},${xy[1]}`).join(' ');
-	memPolylinePoints = memPolylinePointsStats.map(xy => `${xy[0]},${xy[1]}`).join(' ');
+	let cpuPolylinePointsStats = stats.map((s, i) => [
+		viewBoxX - (stats.length - 1 - i),
+		(1 - s.cpu) * viewBoxY,
+	]);
+	let memPolylinePointsStats = stats.map((s, i) => [
+		viewBoxX - (stats.length - 1 - i),
+		(1 - s.mem.active / props.meta.mem.total) * viewBoxY,
+	]);
+	cpuPolylinePoints = cpuPolylinePointsStats
+		.map((xy) => `${xy[0]},${xy[1]}`)
+		.join(" ");
+	memPolylinePoints = memPolylinePointsStats
+		.map((xy) => `${xy[0]},${xy[1]}`)
+		.join(" ");
 
-	cpuPolygonPoints = `${viewBoxX - (stats.length - 1)},${viewBoxY} ${cpuPolylinePoints} ${viewBoxX},${viewBoxY}`;
-	memPolygonPoints = `${viewBoxX - (stats.length - 1)},${viewBoxY} ${memPolylinePoints} ${viewBoxX},${viewBoxY}`;
+	cpuPolygonPoints = `${
+		viewBoxX - (stats.length - 1)
+	},${viewBoxY} ${cpuPolylinePoints} ${viewBoxX},${viewBoxY}`;
+	memPolygonPoints = `${
+		viewBoxX - (stats.length - 1)
+	},${viewBoxY} ${memPolylinePoints} ${viewBoxX},${viewBoxY}`;
 
 	cpuHeadX = cpuPolylinePointsStats[cpuPolylinePointsStats.length - 1][0];
 	cpuHeadY = cpuPolylinePointsStats[cpuPolylinePointsStats.length - 1][1];
@@ -127,7 +153,7 @@ function onStats(connStats) {
 	memHeadY = memPolylinePointsStats[memPolylinePointsStats.length - 1][1];
 
 	cpuP = (connStats.cpu * 100).toFixed(0);
-	memP = (connStats.mem.active / props.meta.mem.total * 100).toFixed(0);
+	memP = ((connStats.mem.active / props.meta.mem.total) * 100).toFixed(0);
 }
 
 function onStatsLog(statsLog) {
diff --git a/packages/client/src/widgets/server-metric/cpu.vue b/packages/client/src/widgets/server-metric/cpu.vue
index cafebeb1d4..5aa4d26987 100644
--- a/packages/client/src/widgets/server-metric/cpu.vue
+++ b/packages/client/src/widgets/server-metric/cpu.vue
@@ -1,21 +1,21 @@
 <template>
-<div class="vrvdvrys">
-	<XPie class="pie" :value="usage"/>
-	<div>
-		<p><i class="ph-microchip ph-bold ph-lg"></i>CPU</p>
-		<p>{{ meta.cpu.cores }} Logical cores</p>
-		<p>{{ meta.cpu.model }}</p>
+	<div class="vrvdvrys">
+		<XPie class="pie" :value="usage" />
+		<div>
+			<p><i class="ph-microchip ph-bold ph-lg"></i>CPU</p>
+			<p>{{ meta.cpu.cores }} Logical cores</p>
+			<p>{{ meta.cpu.model }}</p>
+		</div>
 	</div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onBeforeUnmount } from 'vue';
-import XPie from './pie.vue';
+import { onMounted, onBeforeUnmount } from "vue";
+import XPie from "./pie.vue";
 
 const props = defineProps<{
-	connection: any,
-	meta: any
+	connection: any;
+	meta: any;
 }>();
 
 let usage: number = $ref(0);
@@ -25,11 +25,11 @@ function onStats(stats) {
 }
 
 onMounted(() => {
-	props.connection.on('stats', onStats);
+	props.connection.on("stats", onStats);
 });
 
 onBeforeUnmount(() => {
-	props.connection.off('stats', onStats);
+	props.connection.off("stats", onStats);
 });
 </script>
 
diff --git a/packages/client/src/widgets/server-metric/disk.vue b/packages/client/src/widgets/server-metric/disk.vue
index b16e5db605..67ea398c16 100644
--- a/packages/client/src/widgets/server-metric/disk.vue
+++ b/packages/client/src/widgets/server-metric/disk.vue
@@ -1,19 +1,19 @@
 <template>
-<div class="zbwaqsat">
-	<XPie class="pie" :value="usage"/>
-	<div>
-		<p><i class="ph-hard-drives ph-bold ph-lg"></i>Disk</p>
-		<p>Total: {{ bytes(total, 1) }}</p>
-		<p>Free: {{ bytes(available, 1) }}</p>
-		<p>Used: {{ bytes(used, 1) }}</p>
+	<div class="zbwaqsat">
+		<XPie class="pie" :value="usage" />
+		<div>
+			<p><i class="ph-hard-drives ph-bold ph-lg"></i>Disk</p>
+			<p>Total: {{ bytes(total, 1) }}</p>
+			<p>Free: {{ bytes(available, 1) }}</p>
+			<p>Used: {{ bytes(used, 1) }}</p>
+		</div>
 	</div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import XPie from './pie.vue';
-import bytes from '@/filters/bytes';
+import {} from "vue";
+import XPie from "./pie.vue";
+import bytes from "@/filters/bytes";
 
 const props = defineProps<{
 	meta: any; // TODO
diff --git a/packages/client/src/widgets/server-metric/index.vue b/packages/client/src/widgets/server-metric/index.vue
index 58a41f2e6b..96dd3333d9 100644
--- a/packages/client/src/widgets/server-metric/index.vue
+++ b/packages/client/src/widgets/server-metric/index.vue
@@ -1,45 +1,80 @@
 <template>
-<MkContainer :show-header="widgetProps.showHeader" :naked="widgetProps.transparent">
-	<template #header><i class="ph-hard-drives ph-bold ph-lg"></i>{{ i18n.ts._widgets.serverMetric }}</template>
-	<template #func><button class="_button" @click="toggleView()"><i class="ph-sort-ascending ph-bold ph-lg"></i></button></template>
+	<MkContainer
+		:show-header="widgetProps.showHeader"
+		:naked="widgetProps.transparent"
+	>
+		<template #header
+			><i class="ph-hard-drives ph-bold ph-lg"></i
+			>{{ i18n.ts._widgets.serverMetric }}</template
+		>
+		<template #func
+			><button class="_button" @click="toggleView()">
+				<i class="ph-sort-ascending ph-bold ph-lg"></i></button
+		></template>
 
-	<div v-if="meta" class="mkw-serverMetric">
-		<XCpuMemory v-if="widgetProps.view === 0" :connection="connection" :meta="meta"/>
-		<XNet v-else-if="widgetProps.view === 1" :connection="connection" :meta="meta"/>
-		<XCpu v-else-if="widgetProps.view === 2" :connection="connection" :meta="meta"/>
-		<XMemory v-else-if="widgetProps.view === 3" :connection="connection" :meta="meta"/>
-		<XDisk v-else-if="widgetProps.view === 4" :connection="connection" :meta="meta"/>
-	</div>
-</MkContainer>
+		<div v-if="meta" class="mkw-serverMetric">
+			<XCpuMemory
+				v-if="widgetProps.view === 0"
+				:connection="connection"
+				:meta="meta"
+			/>
+			<XNet
+				v-else-if="widgetProps.view === 1"
+				:connection="connection"
+				:meta="meta"
+			/>
+			<XCpu
+				v-else-if="widgetProps.view === 2"
+				:connection="connection"
+				:meta="meta"
+			/>
+			<XMemory
+				v-else-if="widgetProps.view === 3"
+				:connection="connection"
+				:meta="meta"
+			/>
+			<XDisk
+				v-else-if="widgetProps.view === 4"
+				:connection="connection"
+				:meta="meta"
+			/>
+		</div>
+	</MkContainer>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, ref } from 'vue';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from '../widget';
-import XCpuMemory from './cpu-mem.vue';
-import XNet from './net.vue';
-import XCpu from './cpu.vue';
-import XMemory from './mem.vue';
-import XDisk from './disk.vue';
-import MkContainer from '@/components/MkContainer.vue';
-import { GetFormResultType } from '@/scripts/form';
-import * as os from '@/os';
-import { stream } from '@/stream';
-import { i18n } from '@/i18n';
+import { onMounted, onUnmounted, ref } from "vue";
+import {
+	useWidgetPropsManager,
+	Widget,
+	WidgetComponentEmits,
+	WidgetComponentExpose,
+	WidgetComponentProps,
+} from "../widget";
+import XCpuMemory from "./cpu-mem.vue";
+import XNet from "./net.vue";
+import XCpu from "./cpu.vue";
+import XMemory from "./mem.vue";
+import XDisk from "./disk.vue";
+import MkContainer from "@/components/MkContainer.vue";
+import { GetFormResultType } from "@/scripts/form";
+import * as os from "@/os";
+import { stream } from "@/stream";
+import { i18n } from "@/i18n";
 
-const name = 'serverMetric';
+const name = "serverMetric";
 
 const widgetPropsDef = {
 	showHeader: {
-		type: 'boolean' as const,
+		type: "boolean" as const,
 		default: true,
 	},
 	transparent: {
-		type: 'boolean' as const,
+		type: "boolean" as const,
 		default: false,
 	},
 	view: {
-		type: 'number' as const,
+		type: "number" as const,
 		default: 0,
 		hidden: true,
 	},
@@ -50,18 +85,19 @@ type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
 // 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
 //const props = defineProps<WidgetComponentProps<WidgetProps>>();
 //const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
-const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
+const props = defineProps<{ widget?: Widget<WidgetProps> }>();
+const emit = defineEmits<{ (ev: "updateProps", props: WidgetProps) }>();
 
-const { widgetProps, configure, save } = useWidgetPropsManager(name,
+const { widgetProps, configure, save } = useWidgetPropsManager(
+	name,
 	widgetPropsDef,
 	props,
-	emit,
+	emit
 );
 
 const meta = ref(null);
 
-os.api('server-info', {}).then(res => {
+os.api("server-info", {}).then((res) => {
 	meta.value = res;
 });
 
@@ -74,7 +110,7 @@ const toggleView = () => {
 	save();
 };
 
-const connection = stream.useChannel('serverStats');
+const connection = stream.useChannel("serverStats");
 onUnmounted(() => {
 	connection.dispose();
 });
diff --git a/packages/client/src/widgets/server-metric/mem.vue b/packages/client/src/widgets/server-metric/mem.vue
index 11ab1b2bf7..e3ef00d5e2 100644
--- a/packages/client/src/widgets/server-metric/mem.vue
+++ b/packages/client/src/widgets/server-metric/mem.vue
@@ -1,23 +1,23 @@
 <template>
-<div class="zlxnikvl">
-	<XPie class="pie" :value="usage"/>
-	<div>
-		<p><i class="ph-cpu ph-bold ph-lg"></i>RAM</p>
-		<p>Total: {{ bytes(total, 1) }}</p>
-		<p>Used: {{ bytes(used, 1) }}</p>
-		<p>Free: {{ bytes(free, 1) }}</p>
+	<div class="zlxnikvl">
+		<XPie class="pie" :value="usage" />
+		<div>
+			<p><i class="ph-cpu ph-bold ph-lg"></i>RAM</p>
+			<p>Total: {{ bytes(total, 1) }}</p>
+			<p>Used: {{ bytes(used, 1) }}</p>
+			<p>Free: {{ bytes(free, 1) }}</p>
+		</div>
 	</div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onBeforeUnmount } from 'vue';
-import XPie from './pie.vue';
-import bytes from '@/filters/bytes';
+import { onMounted, onBeforeUnmount } from "vue";
+import XPie from "./pie.vue";
+import bytes from "@/filters/bytes";
 
 const props = defineProps<{
-	connection: any,
-	meta: any
+	connection: any;
+	meta: any;
 }>();
 
 let usage: number = $ref(0);
@@ -33,11 +33,11 @@ function onStats(stats) {
 }
 
 onMounted(() => {
-	props.connection.on('stats', onStats);
+	props.connection.on("stats", onStats);
 });
 
 onBeforeUnmount(() => {
-	props.connection.off('stats', onStats);
+	props.connection.off("stats", onStats);
 });
 </script>
 
diff --git a/packages/client/src/widgets/server-metric/net.vue b/packages/client/src/widgets/server-metric/net.vue
index b698953f97..648880c240 100644
--- a/packages/client/src/widgets/server-metric/net.vue
+++ b/packages/client/src/widgets/server-metric/net.vue
@@ -1,64 +1,60 @@
 <template>
-<div class="oxxrhrto">
-	<svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`">
-		<polygon
-			:points="inPolygonPoints"
-			fill="#94a029"
-			fill-opacity="0.5"
-		/>
-		<polyline
-			:points="inPolylinePoints"
-			fill="none"
-			stroke="#94a029"
-			stroke-width="1"
-		/>
-		<circle
-			:cx="inHeadX"
-			:cy="inHeadY"
-			r="1.5"
-			fill="#94a029"
-		/>
-		<text x="1" y="5">NET rx <tspan>{{ bytes(inRecent) }}</tspan></text>
-	</svg>
-	<svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`">
-		<polygon
-			:points="outPolygonPoints"
-			fill="#ff9156"
-			fill-opacity="0.5"
-		/>
-		<polyline
-			:points="outPolylinePoints"
-			fill="none"
-			stroke="#ff9156"
-			stroke-width="1"
-		/>
-		<circle
-			:cx="outHeadX"
-			:cy="outHeadY"
-			r="1.5"
-			fill="#ff9156"
-		/>
-		<text x="1" y="5">NET tx <tspan>{{ bytes(outRecent) }}</tspan></text>
-	</svg>
-</div>
+	<div class="oxxrhrto">
+		<svg :viewBox="`0 0 ${viewBoxX} ${viewBoxY}`">
+			<polygon
+				:points="inPolygonPoints"
+				fill="#94a029"
+				fill-opacity="0.5"
+			/>
+			<polyline
+				:points="inPolylinePoints"
+				fill="none"
+				stroke="#94a029"
+				stroke-width="1"
+			/>
+			<circle :cx="inHeadX" :cy="inHeadY" r="1.5" fill="#94a029" />
+			<text x="1" y="5">
+				NET rx
+				<tspan>{{ bytes(inRecent) }}</tspan>
+			</text>
+		</svg>
+		<svg :viewBox="`0 0 ${viewBoxX} ${viewBoxY}`">
+			<polygon
+				:points="outPolygonPoints"
+				fill="#ff9156"
+				fill-opacity="0.5"
+			/>
+			<polyline
+				:points="outPolylinePoints"
+				fill="none"
+				stroke="#ff9156"
+				stroke-width="1"
+			/>
+			<circle :cx="outHeadX" :cy="outHeadY" r="1.5" fill="#ff9156" />
+			<text x="1" y="5">
+				NET tx
+				<tspan>{{ bytes(outRecent) }}</tspan>
+			</text>
+		</svg>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onBeforeUnmount } from 'vue';
-import bytes from '@/filters/bytes';
+import { onMounted, onBeforeUnmount } from "vue";
+import bytes from "@/filters/bytes";
 
 const props = defineProps<{
-	connection: any,
-	meta: any
+	connection: any;
+	meta: any;
 }>();
 
 let viewBoxX: number = $ref(50);
 let viewBoxY: number = $ref(30);
 let stats: any[] = $ref([]);
-let inPolylinePoints: string = $ref('');
-let outPolylinePoints: string = $ref('');
-let inPolygonPoints: string = $ref('');
-let outPolygonPoints: string = $ref('');
+let inPolylinePoints: string = $ref("");
+let outPolylinePoints: string = $ref("");
+let inPolygonPoints: string = $ref("");
+let outPolygonPoints: string = $ref("");
 let inHeadX: any = $ref(null);
 let inHeadY: any = $ref(null);
 let outHeadX: any = $ref(null);
@@ -67,32 +63,49 @@ let inRecent: number = $ref(0);
 let outRecent: number = $ref(0);
 
 onMounted(() => {
-	props.connection.on('stats', onStats);
-	props.connection.on('statsLog', onStatsLog);
-	props.connection.send('requestLog', {
-		id: Math.random().toString().substr(2, 8)
+	props.connection.on("stats", onStats);
+	props.connection.on("statsLog", onStatsLog);
+	props.connection.send("requestLog", {
+		id: Math.random().toString().substr(2, 8),
 	});
 });
 
 onBeforeUnmount(() => {
-	props.connection.off('stats', onStats);
-	props.connection.off('statsLog', onStatsLog);
+	props.connection.off("stats", onStats);
+	props.connection.off("statsLog", onStatsLog);
 });
 
 function onStats(connStats) {
 	stats.push(connStats);
 	if (stats.length > 50) stats.shift();
 
-	const inPeak = Math.max(1024 * 64, Math.max(...stats.map(s => s.net.rx)));
-	const outPeak = Math.max(1024 * 64, Math.max(...stats.map(s => s.net.tx)));
+	const inPeak = Math.max(1024 * 64, Math.max(...stats.map((s) => s.net.rx)));
+	const outPeak = Math.max(
+		1024 * 64,
+		Math.max(...stats.map((s) => s.net.tx))
+	);
 
-	let inPolylinePointsStats = stats.map((s, i) => [viewBoxX - ((stats.length - 1) - i), (1 - (s.net.rx / inPeak)) * viewBoxY]);
-	let outPolylinePointsStats = stats.map((s, i) => [viewBoxX - ((stats.length - 1) - i), (1 - (s.net.tx / outPeak)) * viewBoxY]);
-	inPolylinePoints = inPolylinePointsStats.map(xy => `${xy[0]},${xy[1]}`).join(' ');
-	outPolylinePoints = outPolylinePointsStats.map(xy => `${xy[0]},${xy[1]}`).join(' ');
+	let inPolylinePointsStats = stats.map((s, i) => [
+		viewBoxX - (stats.length - 1 - i),
+		(1 - s.net.rx / inPeak) * viewBoxY,
+	]);
+	let outPolylinePointsStats = stats.map((s, i) => [
+		viewBoxX - (stats.length - 1 - i),
+		(1 - s.net.tx / outPeak) * viewBoxY,
+	]);
+	inPolylinePoints = inPolylinePointsStats
+		.map((xy) => `${xy[0]},${xy[1]}`)
+		.join(" ");
+	outPolylinePoints = outPolylinePointsStats
+		.map((xy) => `${xy[0]},${xy[1]}`)
+		.join(" ");
 
-	inPolygonPoints = `${viewBoxX - (stats.length - 1)},${viewBoxY} ${inPolylinePoints} ${viewBoxX},${viewBoxY}`;
-	outPolygonPoints = `${viewBoxX - (stats.length - 1)},${viewBoxY} ${outPolylinePoints} ${viewBoxX},${viewBoxY}`;
+	inPolygonPoints = `${
+		viewBoxX - (stats.length - 1)
+	},${viewBoxY} ${inPolylinePoints} ${viewBoxX},${viewBoxY}`;
+	outPolygonPoints = `${
+		viewBoxX - (stats.length - 1)
+	},${viewBoxY} ${outPolylinePoints} ${viewBoxX},${viewBoxY}`;
 
 	inHeadX = inPolylinePointsStats[inPolylinePointsStats.length - 1][0];
 	inHeadY = inPolylinePointsStats[inPolylinePointsStats.length - 1][1];
diff --git a/packages/client/src/widgets/server-metric/pie.vue b/packages/client/src/widgets/server-metric/pie.vue
index 868dbc0484..9edbfc94eb 100644
--- a/packages/client/src/widgets/server-metric/pie.vue
+++ b/packages/client/src/widgets/server-metric/pie.vue
@@ -1,27 +1,31 @@
 <template>
-<svg class="hsalcinq" viewBox="0 0 1 1" preserveAspectRatio="none">
-	<circle
-		:r="r"
-		cx="50%" cy="50%"
-		fill="none"
-		stroke-width="0.1"
-		stroke="rgba(0, 0, 0, 0.05)"
-	/>
-	<circle
-		:r="r"
-		cx="50%" cy="50%"
-		:stroke-dasharray="Math.PI * (r * 2)"
-		:stroke-dashoffset="strokeDashoffset"
-		fill="none"
-		stroke-width="0.1"
-		:stroke="color"
-	/>
-	<text x="50%" y="50%" dy="0.05" text-anchor="middle">{{ (value * 100).toFixed(0) }}%</text>
-</svg>
+	<svg class="hsalcinq" viewBox="0 0 1 1" preserveAspectRatio="none">
+		<circle
+			:r="r"
+			cx="50%"
+			cy="50%"
+			fill="none"
+			stroke-width="0.1"
+			stroke="rgba(0, 0, 0, 0.05)"
+		/>
+		<circle
+			:r="r"
+			cx="50%"
+			cy="50%"
+			:stroke-dasharray="Math.PI * (r * 2)"
+			:stroke-dashoffset="strokeDashoffset"
+			fill="none"
+			stroke-width="0.1"
+			:stroke="color"
+		/>
+		<text x="50%" y="50%" dy="0.05" text-anchor="middle">
+			{{ (value * 100).toFixed(0) }}%
+		</text>
+	</svg>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
+import {} from "vue";
 
 const props = defineProps<{
 	value: number;
@@ -29,8 +33,10 @@ const props = defineProps<{
 
 const r = 0.45;
 
-const color = $computed(() => `hsl(${180 - (props.value * 180)}, 80%, 70%)`);
-const strokeDashoffset = $computed(() => (1 - props.value) * (Math.PI * (r * 2)));
+const color = $computed(() => `hsl(${180 - props.value * 180}, 80%, 70%)`);
+const strokeDashoffset = $computed(
+	() => (1 - props.value) * (Math.PI * (r * 2))
+);
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/widgets/slideshow.vue b/packages/client/src/widgets/slideshow.vue
index 128b0f35b7..fa0c1c9e00 100644
--- a/packages/client/src/widgets/slideshow.vue
+++ b/packages/client/src/widgets/slideshow.vue
@@ -1,33 +1,50 @@
 <template>
-<div class="kvausudm _panel mkw-slideshow" :style="{ height: widgetProps.height + 'px' }">
-	<div @click="choose">
-		<p v-if="widgetProps.folderId == null">
-			{{ i18n.ts.folder }}
-		</p>
-		<p v-if="widgetProps.folderId != null && images.length === 0 && !fetching">{{ i18n.t('no-image') }}</p>
-		<div ref="slideA" class="slide a"></div>
-		<div ref="slideB" class="slide b"></div>
+	<div
+		class="kvausudm _panel mkw-slideshow"
+		:style="{ height: widgetProps.height + 'px' }"
+	>
+		<div @click="choose">
+			<p v-if="widgetProps.folderId == null">
+				{{ i18n.ts.folder }}
+			</p>
+			<p
+				v-if="
+					widgetProps.folderId != null &&
+					images.length === 0 &&
+					!fetching
+				"
+			>
+				{{ i18n.t("no-image") }}
+			</p>
+			<div ref="slideA" class="slide a"></div>
+			<div ref="slideB" class="slide b"></div>
+		</div>
 	</div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { nextTick, onMounted, onUnmounted, reactive, ref } from 'vue';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
-import { GetFormResultType } from '@/scripts/form';
-import * as os from '@/os';
-import { useInterval } from '@/scripts/use-interval';
-import { i18n } from '@/i18n';
+import { nextTick, onMounted, onUnmounted, reactive, ref } from "vue";
+import {
+	useWidgetPropsManager,
+	Widget,
+	WidgetComponentEmits,
+	WidgetComponentExpose,
+	WidgetComponentProps,
+} from "./widget";
+import { GetFormResultType } from "@/scripts/form";
+import * as os from "@/os";
+import { useInterval } from "@/scripts/use-interval";
+import { i18n } from "@/i18n";
 
-const name = 'slideshow';
+const name = "slideshow";
 
 const widgetPropsDef = {
 	height: {
-		type: 'number' as const,
+		type: "number" as const,
 		default: 300,
 	},
 	folderId: {
-		type: 'string' as const,
+		type: "string" as const,
 		default: null,
 		hidden: true,
 	},
@@ -38,13 +55,14 @@ type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
 // 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
 //const props = defineProps<WidgetComponentProps<WidgetProps>>();
 //const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
-const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
+const props = defineProps<{ widget?: Widget<WidgetProps> }>();
+const emit = defineEmits<{ (ev: "updateProps", props: WidgetProps) }>();
 
-const { widgetProps, configure, save } = useWidgetPropsManager(name,
+const { widgetProps, configure, save } = useWidgetPropsManager(
+	name,
 	widgetPropsDef,
 	props,
-	emit,
+	emit
 );
 
 const images = ref([]);
@@ -56,39 +74,39 @@ const change = () => {
 	if (images.value.length === 0) return;
 
 	const index = Math.floor(Math.random() * images.value.length);
-	const img = `url(${ images.value[index].url })`;
+	const img = `url(${images.value[index].url})`;
 
 	slideB.value.style.backgroundImage = img;
 
-	slideB.value.classList.add('anime');
+	slideB.value.classList.add("anime");
 	window.setTimeout(() => {
 		// 既にこのウィジェットがunmountされていたら要素がない
 		if (slideA.value == null) return;
 
 		slideA.value.style.backgroundImage = img;
 
-		slideB.value.classList.remove('anime');
+		slideB.value.classList.remove("anime");
 	}, 1000);
 };
 
 const fetch = () => {
 	fetching.value = true;
 
-	os.api('drive/files', {
+	os.api("drive/files", {
 		folderId: widgetProps.folderId,
-		type: 'image/*',
+		type: "image/*",
 		limit: 100,
-	}).then(res => {
+	}).then((res) => {
 		images.value = res;
 		fetching.value = false;
-		slideA.value.style.backgroundImage = '';
-		slideB.value.style.backgroundImage = '';
+		slideA.value.style.backgroundImage = "";
+		slideB.value.style.backgroundImage = "";
 		change();
 	});
 };
 
 const choose = () => {
-	os.selectDriveFolder(false).then(folder => {
+	os.selectDriveFolder(false).then((folder) => {
 		if (folder == null) {
 			return;
 		}
diff --git a/packages/client/src/widgets/timeline.vue b/packages/client/src/widgets/timeline.vue
index f0e7232bf0..6ae74b813e 100644
--- a/packages/client/src/widgets/timeline.vue
+++ b/packages/client/src/widgets/timeline.vue
@@ -1,57 +1,110 @@
 <template>
-<MkContainer :show-header="widgetProps.showHeader" :style="`height: ${widgetProps.height}px;`" :scrollable="true" class="mkw-timeline">
-	<template #header>
-		<button class="_button" @click="choose">
-			<i v-if="widgetProps.src === 'home'" class="ph-house ph-bold ph-lg"></i>
-			<i v-else-if="widgetProps.src === 'local'" class="ph-chats-circle ph-bold ph-lg"></i>
-			<i v-else-if="widgetProps.src === 'social'" class="ph-share-network ph-bold ph-lg"></i>
-			<i v-else-if="widgetProps.src === 'global'" class="ph-planet ph-bold ph-lg"></i>
-			<i v-else-if="widgetProps.src === 'list'" class="ph-list-bullets ph-bold ph-lg"></i>
-			<i v-else-if="widgetProps.src === 'antenna'" class="ph-television ph-bold ph-lg"></i>
-			<span style="margin-left: 8px;">{{ widgetProps.src === 'list' ? widgetProps.list.name : widgetProps.src === 'antenna' ? widgetProps.antenna.name : i18n.t('_timelines.' + widgetProps.src) }}</span>
-			<i :class="menuOpened ? 'ph-caret-up ph-bold ph-lg' : 'ph-caret-down ph-bold ph-lg'" style="margin-left: 8px;"></i>
-		</button>
-	</template>
+	<MkContainer
+		:show-header="widgetProps.showHeader"
+		:style="`height: ${widgetProps.height}px;`"
+		:scrollable="true"
+		class="mkw-timeline"
+	>
+		<template #header>
+			<button class="_button" @click="choose">
+				<i
+					v-if="widgetProps.src === 'home'"
+					class="ph-house ph-bold ph-lg"
+				></i>
+				<i
+					v-else-if="widgetProps.src === 'local'"
+					class="ph-chats-circle ph-bold ph-lg"
+				></i>
+				<i
+					v-else-if="widgetProps.src === 'social'"
+					class="ph-share-network ph-bold ph-lg"
+				></i>
+				<i
+					v-else-if="widgetProps.src === 'global'"
+					class="ph-planet ph-bold ph-lg"
+				></i>
+				<i
+					v-else-if="widgetProps.src === 'list'"
+					class="ph-list-bullets ph-bold ph-lg"
+				></i>
+				<i
+					v-else-if="widgetProps.src === 'antenna'"
+					class="ph-television ph-bold ph-lg"
+				></i>
+				<span style="margin-left: 8px">{{
+					widgetProps.src === "list"
+						? widgetProps.list.name
+						: widgetProps.src === "antenna"
+						? widgetProps.antenna.name
+						: i18n.t("_timelines." + widgetProps.src)
+				}}</span>
+				<i
+					:class="
+						menuOpened
+							? 'ph-caret-up ph-bold ph-lg'
+							: 'ph-caret-down ph-bold ph-lg'
+					"
+					style="margin-left: 8px"
+				></i>
+			</button>
+		</template>
 
-	<div>
-		<XTimeline :key="widgetProps.src === 'list' ? `list:${widgetProps.list.id}` : widgetProps.src === 'antenna' ? `antenna:${widgetProps.antenna.id}` : widgetProps.src" :src="widgetProps.src" :list="widgetProps.list ? widgetProps.list.id : null" :antenna="widgetProps.antenna ? widgetProps.antenna.id : null"/>
-	</div>
-</MkContainer>
+		<div>
+			<XTimeline
+				:key="
+					widgetProps.src === 'list'
+						? `list:${widgetProps.list.id}`
+						: widgetProps.src === 'antenna'
+						? `antenna:${widgetProps.antenna.id}`
+						: widgetProps.src
+				"
+				:src="widgetProps.src"
+				:list="widgetProps.list ? widgetProps.list.id : null"
+				:antenna="widgetProps.antenna ? widgetProps.antenna.id : null"
+			/>
+		</div>
+	</MkContainer>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, reactive, ref, watch } from 'vue';
-import { GetFormResultType } from '@/scripts/form';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
-import * as os from '@/os';
-import MkContainer from '@/components/MkContainer.vue';
-import XTimeline from '@/components/MkTimeline.vue';
-import { $i } from '@/account';
-import { i18n } from '@/i18n';
+import { onMounted, onUnmounted, reactive, ref, watch } from "vue";
+import { GetFormResultType } from "@/scripts/form";
+import {
+	useWidgetPropsManager,
+	Widget,
+	WidgetComponentEmits,
+	WidgetComponentExpose,
+	WidgetComponentProps,
+} from "./widget";
+import * as os from "@/os";
+import MkContainer from "@/components/MkContainer.vue";
+import XTimeline from "@/components/MkTimeline.vue";
+import { $i } from "@/account";
+import { i18n } from "@/i18n";
 
-const name = 'timeline';
+const name = "timeline";
 
 const widgetPropsDef = {
 	showHeader: {
-		type: 'boolean' as const,
+		type: "boolean" as const,
 		default: true,
 	},
 	height: {
-		type: 'number' as const,
+		type: "number" as const,
 		default: 300,
 	},
 	src: {
-		type: 'string' as const,
-		default: 'home',
+		type: "string" as const,
+		default: "home",
 		hidden: true,
 	},
 	antenna: {
-		type: 'object' as const,
+		type: "object" as const,
 		default: null,
 		hidden: true,
 	},
 	list: {
-		type: 'object' as const,
+		type: "object" as const,
 		default: null,
 		hidden: true,
 	},
@@ -62,13 +115,14 @@ type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
 // 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
 //const props = defineProps<WidgetComponentProps<WidgetProps>>();
 //const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
-const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
+const props = defineProps<{ widget?: Widget<WidgetProps> }>();
+const emit = defineEmits<{ (ev: "updateProps", props: WidgetProps) }>();
 
-const { widgetProps, configure, save } = useWidgetPropsManager(name,
+const { widgetProps, configure, save } = useWidgetPropsManager(
+	name,
 	widgetPropsDef,
 	props,
-	emit,
+	emit
 );
 
 const menuOpened = ref(false);
@@ -81,42 +135,62 @@ const setSrc = (src) => {
 const choose = async (ev) => {
 	menuOpened.value = true;
 	const [antennas, lists] = await Promise.all([
-		os.api('antennas/list'),
-		os.api('users/lists/list')
+		os.api("antennas/list"),
+		os.api("users/lists/list"),
 	]);
-	const antennaItems = antennas.map(antenna => ({
+	const antennaItems = antennas.map((antenna) => ({
 		text: antenna.name,
-		icon: 'ph-flying-saucer ph-bold ph-lg',
+		icon: "ph-flying-saucer ph-bold ph-lg",
 		action: () => {
 			widgetProps.antenna = antenna;
-			setSrc('antenna');
-		}
+			setSrc("antenna");
+		},
 	}));
-	const listItems = lists.map(list => ({
+	const listItems = lists.map((list) => ({
 		text: list.name,
-		icon: 'ph-list-bullets ph-bold ph-lg',
+		icon: "ph-list-bullets ph-bold ph-lg",
 		action: () => {
 			widgetProps.list = list;
-			setSrc('list');
-		}
+			setSrc("list");
+		},
 	}));
-	os.popupMenu([{
-		text: i18n.ts._timelines.home,
-		icon: 'ph-house ph-bold ph-lg',
-		action: () => { setSrc('home'); }
-	}, {
-		text: i18n.ts._timelines.local,
-		icon: 'ph-chats-teardrop ph-bold ph-lg',
-		action: () => { setSrc('local'); }
-	}, {
-		text: i18n.ts._timelines.social,
-		icon: 'ph-share-network ph-bold ph-lg',
-		action: () => { setSrc('social'); }
-	}, {
-		text: i18n.ts._timelines.global,
-		icon: 'ph-planet ph-bold ph-lg',
-		action: () => { setSrc('global'); }
-	}, antennaItems.length > 0 ? null : undefined, ...antennaItems, listItems.length > 0 ? null : undefined, ...listItems], ev.currentTarget ?? ev.target).then(() => {
+	os.popupMenu(
+		[
+			{
+				text: i18n.ts._timelines.home,
+				icon: "ph-house ph-bold ph-lg",
+				action: () => {
+					setSrc("home");
+				},
+			},
+			{
+				text: i18n.ts._timelines.local,
+				icon: "ph-chats-teardrop ph-bold ph-lg",
+				action: () => {
+					setSrc("local");
+				},
+			},
+			{
+				text: i18n.ts._timelines.social,
+				icon: "ph-share-network ph-bold ph-lg",
+				action: () => {
+					setSrc("social");
+				},
+			},
+			{
+				text: i18n.ts._timelines.global,
+				icon: "ph-planet ph-bold ph-lg",
+				action: () => {
+					setSrc("global");
+				},
+			},
+			antennaItems.length > 0 ? null : undefined,
+			...antennaItems,
+			listItems.length > 0 ? null : undefined,
+			...listItems,
+		],
+		ev.currentTarget ?? ev.target
+	).then(() => {
 		menuOpened.value = false;
 	});
 };
diff --git a/packages/client/src/widgets/trends.vue b/packages/client/src/widgets/trends.vue
index 4789293d6c..6bf5c0b97a 100644
--- a/packages/client/src/widgets/trends.vue
+++ b/packages/client/src/widgets/trends.vue
@@ -1,37 +1,62 @@
 <template>
-<MkContainer :show-header="widgetProps.showHeader" class="mkw-trends">
-	<template #header><i class="ph-hash ph-bold ph-lg"></i>{{ i18n.ts._widgets.trends }}</template>
+	<MkContainer :show-header="widgetProps.showHeader" class="mkw-trends">
+		<template #header
+			><i class="ph-hash ph-bold ph-lg"></i
+			>{{ i18n.ts._widgets.trends }}</template
+		>
 
-	<div class="wbrkwala">
-		<MkLoading v-if="fetching"/>
-		<transition-group v-else tag="div" :name="$store.state.animation ? 'chart' : ''" class="tags">
-			<div v-for="stat in stats" :key="stat.tag">
-				<div class="tag">
-					<MkA class="a" :to="`/tags/${ encodeURIComponent(stat.tag) }`" :title="stat.tag">#{{ stat.tag }}</MkA>
-					<p>{{ i18n.t('nUsersMentioned', { n: stat.usersCount }) }}</p>
+		<div class="wbrkwala">
+			<MkLoading v-if="fetching" />
+			<transition-group
+				v-else
+				tag="div"
+				:name="$store.state.animation ? 'chart' : ''"
+				class="tags"
+			>
+				<div v-for="stat in stats" :key="stat.tag">
+					<div class="tag">
+						<MkA
+							class="a"
+							:to="`/tags/${encodeURIComponent(stat.tag)}`"
+							:title="stat.tag"
+							>#{{ stat.tag }}</MkA
+						>
+						<p>
+							{{
+								i18n.t("nUsersMentioned", {
+									n: stat.usersCount,
+								})
+							}}
+						</p>
+					</div>
+					<MkMiniChart class="chart" :src="stat.chart" />
 				</div>
-				<MkMiniChart class="chart" :src="stat.chart"/>
-			</div>
-		</transition-group>
-	</div>
-</MkContainer>
+			</transition-group>
+		</div>
+	</MkContainer>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, ref } from 'vue';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
-import { GetFormResultType } from '@/scripts/form';
-import MkContainer from '@/components/MkContainer.vue';
-import MkMiniChart from '@/components/MkMiniChart.vue';
-import * as os from '@/os';
-import { useInterval } from '@/scripts/use-interval';
-import { i18n } from '@/i18n';
+import { onMounted, onUnmounted, ref } from "vue";
+import {
+	useWidgetPropsManager,
+	Widget,
+	WidgetComponentEmits,
+	WidgetComponentExpose,
+	WidgetComponentProps,
+} from "./widget";
+import { GetFormResultType } from "@/scripts/form";
+import MkContainer from "@/components/MkContainer.vue";
+import MkMiniChart from "@/components/MkMiniChart.vue";
+import * as os from "@/os";
+import { useInterval } from "@/scripts/use-interval";
+import { i18n } from "@/i18n";
 
-const name = 'hashtags';
+const name = "hashtags";
 
 const widgetPropsDef = {
 	showHeader: {
-		type: 'boolean' as const,
+		type: "boolean" as const,
 		default: true,
 	},
 };
@@ -41,20 +66,21 @@ type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
 // 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
 //const props = defineProps<WidgetComponentProps<WidgetProps>>();
 //const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
-const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
+const props = defineProps<{ widget?: Widget<WidgetProps> }>();
+const emit = defineEmits<{ (ev: "updateProps", props: WidgetProps) }>();
 
-const { widgetProps, configure } = useWidgetPropsManager(name,
+const { widgetProps, configure } = useWidgetPropsManager(
+	name,
 	widgetPropsDef,
 	props,
-	emit,
+	emit
 );
 
 const stats = ref([]);
 const fetching = ref(true);
 
 const fetch = () => {
-	os.api('hashtags/trend').then(res => {
+	os.api("hashtags/trend").then((res) => {
 		stats.value = res;
 		fetching.value = false;
 	});
diff --git a/packages/client/src/widgets/unix-clock.vue b/packages/client/src/widgets/unix-clock.vue
index cf85ac782c..190bcd0926 100644
--- a/packages/client/src/widgets/unix-clock.vue
+++ b/packages/client/src/widgets/unix-clock.vue
@@ -1,38 +1,50 @@
 <template>
-<div class="mkw-unixClock _monospace" :class="{ _panel: !widgetProps.transparent }" :style="{ fontSize: `${widgetProps.fontSize}em` }">
-	<div v-if="widgetProps.showLabel" class="label">UNIX Epoch</div>
-	<div class="time">
-		<span v-text="ss"></span>
-		<span v-if="widgetProps.showMs" class="colon" :class="{ showColon }">:</span>
-		<span v-if="widgetProps.showMs" v-text="ms"></span>
+	<div
+		class="mkw-unixClock _monospace"
+		:class="{ _panel: !widgetProps.transparent }"
+		:style="{ fontSize: `${widgetProps.fontSize}em` }"
+	>
+		<div v-if="widgetProps.showLabel" class="label">UNIX Epoch</div>
+		<div class="time">
+			<span v-text="ss"></span>
+			<span v-if="widgetProps.showMs" class="colon" :class="{ showColon }"
+				>:</span
+			>
+			<span v-if="widgetProps.showMs" v-text="ms"></span>
+		</div>
+		<div v-if="widgetProps.showLabel" class="label">UTC</div>
 	</div>
-	<div v-if="widgetProps.showLabel" class="label">UTC</div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { onUnmounted, ref, watch } from 'vue';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
-import { GetFormResultType } from '@/scripts/form';
+import { onUnmounted, ref, watch } from "vue";
+import {
+	useWidgetPropsManager,
+	Widget,
+	WidgetComponentEmits,
+	WidgetComponentExpose,
+	WidgetComponentProps,
+} from "./widget";
+import { GetFormResultType } from "@/scripts/form";
 
-const name = 'unixClock';
+const name = "unixClock";
 
 const widgetPropsDef = {
 	transparent: {
-		type: 'boolean' as const,
+		type: "boolean" as const,
 		default: false,
 	},
 	fontSize: {
-		type: 'number' as const,
+		type: "number" as const,
 		default: 1.5,
 		step: 0.1,
 	},
 	showMs: {
-		type: 'boolean' as const,
+		type: "boolean" as const,
 		default: true,
 	},
 	showLabel: {
-		type: 'boolean' as const,
+		type: "boolean" as const,
 		default: true,
 	},
 };
@@ -42,18 +54,19 @@ type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
 // 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
 //const props = defineProps<WidgetComponentProps<WidgetProps>>();
 //const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
-const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
+const props = defineProps<{ widget?: Widget<WidgetProps> }>();
+const emit = defineEmits<{ (ev: "updateProps", props: WidgetProps) }>();
 
-const { widgetProps, configure } = useWidgetPropsManager(name,
+const { widgetProps, configure } = useWidgetPropsManager(
+	name,
 	widgetPropsDef,
 	props,
-	emit,
+	emit
 );
 
 let intervalId;
-const ss = ref('');
-const ms = ref('');
+const ss = ref("");
+const ms = ref("");
 const showColon = ref(false);
 let prevSec: string | null = null;
 
@@ -68,17 +81,23 @@ watch(showColon, (v) => {
 const tick = () => {
 	const now = new Date();
 	ss.value = Math.floor(now.getTime() / 1000).toString();
-	ms.value = Math.floor(now.getTime() % 1000 / 10).toString().padStart(2, '0');
+	ms.value = Math.floor((now.getTime() % 1000) / 10)
+		.toString()
+		.padStart(2, "0");
 	if (ss.value !== prevSec) showColon.value = true;
 	prevSec = ss.value;
 };
 
 tick();
 
-watch(() => widgetProps.showMs, () => {
-	if (intervalId) window.clearInterval(intervalId);
-	intervalId = window.setInterval(tick, widgetProps.showMs ? 10 : 1000);
-}, { immediate: true });
+watch(
+	() => widgetProps.showMs,
+	() => {
+		if (intervalId) window.clearInterval(intervalId);
+		intervalId = window.setInterval(tick, widgetProps.showMs ? 10 : 1000);
+	},
+	{ immediate: true }
+);
 
 onUnmounted(() => {
 	window.clearInterval(intervalId);
diff --git a/packages/client/src/widgets/user-list.vue b/packages/client/src/widgets/user-list.vue
index 4418455498..515c58c474 100644
--- a/packages/client/src/widgets/user-list.vue
+++ b/packages/client/src/widgets/user-list.vue
@@ -1,38 +1,50 @@
 <template>
 	<MkContainer :show-header="widgetProps.showHeader" class="mkw-userList">
-		<template #header><i class="ph-user-list ph-bold ph-lg"></i> {{ list ? list.name : i18n.ts._widgets.userList }}</template>
-		<template #func="{ buttonStyleClass }"><button class="_button" :class="buttonStyleClass" @click="configure()"><i class="ph-gear-six ph-bold ph-lg"></i></button></template>
+		<template #header
+			><i class="ph-user-list ph-bold ph-lg"></i>
+			{{ list ? list.name : i18n.ts._widgets.userList }}</template
+		>
+		<template #func="{ buttonStyleClass }"
+			><button
+				class="_button"
+				:class="buttonStyleClass"
+				@click="configure()"
+			>
+				<i class="ph-gear-six ph-bold ph-lg"></i></button
+		></template>
 
 		<div class="wsdlkfj">
 			<div v-if="widgetProps.listId == null" class="init">
-				<MkButton primary @click="chooseList">{{ i18n.ts._widgets._userList.chooseList }}</MkButton>
+				<MkButton primary @click="chooseList">{{
+					i18n.ts._widgets._userList.chooseList
+				}}</MkButton>
 			</div>
-			<MkLoading v-else-if="fetching"/>
+			<MkLoading v-else-if="fetching" />
 			<div v-else class="users">
-				<MkAvatars :user-ids="users" class="userAvatars"/>
+				<MkAvatars :user-ids="users" class="userAvatars" />
 			</div>
 		</div>
 	</MkContainer>
 </template>
 
 <script lang="ts" setup>
-import { useWidgetPropsManager, Widget, WidgetComponentExpose } from './widget';
-import { GetFormResultType } from '@/scripts/form';
-import MkContainer from '@/components/MkContainer.vue';
-import MkAvatars from '@/components/MkAvatars.vue';
-import * as os from '@/os';
-import { useInterval } from '@/scripts/use-interval';
-import { i18n } from '@/i18n';
-import MkButton from '@/components/MkButton.vue';
+import { useWidgetPropsManager, Widget, WidgetComponentExpose } from "./widget";
+import { GetFormResultType } from "@/scripts/form";
+import MkContainer from "@/components/MkContainer.vue";
+import MkAvatars from "@/components/MkAvatars.vue";
+import * as os from "@/os";
+import { useInterval } from "@/scripts/use-interval";
+import { i18n } from "@/i18n";
+import MkButton from "@/components/MkButton.vue";
 
-const name = 'userList';
+const name = "userList";
 const widgetPropsDef = {
 	showHeader: {
-		type: 'boolean' as const,
+		type: "boolean" as const,
 		default: true,
 	},
 	listId: {
-		type: 'string' as const,
+		type: "string" as const,
 		default: null,
 		hidden: true,
 	},
@@ -41,22 +53,24 @@ type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
 // 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
 //const props = defineProps<WidgetComponentProps<WidgetProps>>();
 //const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
-const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
-const { widgetProps, configure, save } = useWidgetPropsManager(name,
+const props = defineProps<{ widget?: Widget<WidgetProps> }>();
+const emit = defineEmits<{ (ev: "updateProps", props: WidgetProps) }>();
+const { widgetProps, configure, save } = useWidgetPropsManager(
+	name,
 	widgetPropsDef,
 	props,
-	emit,
+	emit
 );
 let list = $ref();
 let users = $ref([]);
 let fetching = $ref(true);
 async function chooseList() {
-	const lists = await os.api('users/lists/list');
+	const lists = await os.api("users/lists/list");
 	const { canceled, result: list } = await os.select({
 		title: i18n.ts.selectList,
-		items: lists.map(x => ({
-			value: x, text: x.name,
+		items: lists.map((x) => ({
+			value: x,
+			text: x.name,
 		})),
 		default: widgetProps.listId,
 	});
@@ -70,13 +84,13 @@ const fetch = () => {
 		fetching = false;
 		return;
 	}
-	os.api('users/lists/show', {
+	os.api("users/lists/show", {
 		listId: widgetProps.listId,
-	}).then(_list => {
+	}).then((_list) => {
 		list = _list;
-		os.api('users/show', {
+		os.api("users/show", {
 			userIds: list.userIds,
-		}).then(_users => {
+		}).then((_users) => {
 			users = list.userIds;
 			fetching = false;
 		});
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b7b0b31239..dad3911899 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -788,6 +788,12 @@ importers:
       photoswipe:
         specifier: 5.3.4
         version: 5.3.4
+      prettier:
+        specifier: 2.8.7
+        version: 2.8.7
+      prettier-plugin-vue:
+        specifier: 1.1.6
+        version: 1.1.6
       prismjs:
         specifier: 1.29.0
         version: 1.29.0
@@ -12363,6 +12369,18 @@ packages:
     engines: {node: '>=4'}
     dev: true
 
+  /prettier-plugin-vue@1.1.6:
+    resolution: {integrity: sha512-trQ/oY+6hSsGe2zPIFThXMIM0TbxMEbk2VOrKjwHWuSz7OEo0rnumbz9a47OxVPCaAnGY9vZG8qDTiTmk9bq0A==}
+    dependencies:
+      prettier: 2.8.7
+    dev: true
+
+  /prettier@2.8.7:
+    resolution: {integrity: sha512-yPngTo3aXUUmyuTjeTUT75txrf+aMh9FiD7q9ZE/i6r0bPb22g4FsE6Y338PQX1bmfy08i9QQCB7/rcUAVntfw==}
+    engines: {node: '>=10.13.0'}
+    hasBin: true
+    dev: true
+
   /pretty-bytes@5.6.0:
     resolution: {integrity: sha512-FFw039TmrBqFK8ma/7OL3sDz/VytdtJr044/QUJtH0wK9lb9jLq9tJyIxUwtQJHwar2BqtiA4iCWSwo9JLkzFg==}
     engines: {node: '>=6'}