From 7faa75d48334a6593378e2a9c33606c9401249f0 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Fri, 17 Jun 2022 13:20:33 +0900
Subject: [PATCH 01/90] chore(client): tweak range control design

---
 packages/client/src/components/form/range.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/client/src/components/form/range.vue b/packages/client/src/components/form/range.vue
index 07f2c23124..9bf7651119 100644
--- a/packages/client/src/components/form/range.vue
+++ b/packages/client/src/components/form/range.vue
@@ -1,7 +1,7 @@
 <template>
 <div class="timctyfi" :class="{ disabled }">
 	<div class="label"><slot name="label"></slot></div>
-	<div v-panel class="body">
+	<div v-adaptive-border class="body">
 		<div ref="containerEl" class="container">
 			<div class="track">
 				<div class="highlight" :style="{ width: (steppedValue * 100) + '%' }"></div>
@@ -192,6 +192,8 @@ export default defineComponent({
 
 	> .body {
 		padding: 12px;
+		background: var(--panel);
+		border: solid 1px var(--panel);
 		border-radius: 6px;
 
 		> .container {

From 8df2f19b5b371d73809d12b2ffbcba3ec3cffb2d Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Fri, 17 Jun 2022 15:03:02 +0900
Subject: [PATCH 02/90] enhance(client): improve file moderation ui

---
 locales/ja-JP.yml                             |  1 +
 .../{admin/file-dialog.vue => admin-file.vue} | 45 ++++++++++---------
 packages/client/src/pages/admin/files.vue     |  4 +-
 packages/client/src/router.ts                 |  9 ++--
 4 files changed, 30 insertions(+), 29 deletions(-)
 rename packages/client/src/pages/{admin/file-dialog.vue => admin-file.vue} (68%)

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 43ab7f2d69..c17e6959b9 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -845,6 +845,7 @@ failedToFetchAccountInformation: "アカウント情報の取得に失敗しま
 rateLimitExceeded: "レート制限を超えました"
 cropImage: "画像のクロップ"
 cropImageAsk: "画像をクロップしますか？"
+file: "ファイル"
 
 _emailUnavailable:
   used: "既に使用されています"
diff --git a/packages/client/src/pages/admin/file-dialog.vue b/packages/client/src/pages/admin-file.vue
similarity index 68%
rename from packages/client/src/pages/admin/file-dialog.vue
rename to packages/client/src/pages/admin-file.vue
index 0765548aab..b0e879b8f3 100644
--- a/packages/client/src/pages/admin/file-dialog.vue
+++ b/packages/client/src/pages/admin-file.vue
@@ -1,12 +1,7 @@
 <template>
-<XModalWindow ref="dialog"
-	:width="370"
-	@close="$refs.dialog.close()"
-	@closed="$emit('closed')"
->
-	<template v-if="file" #header>{{ file.name }}</template>
-	<div v-if="file" class="cxqhhsmd">
-		<div class="_section">
+<MkSpacer :content-max="500" :margin-min="16" :margin-max="32">
+	<div v-if="file" class="cxqhhsmd _formRoot">
+		<div class="_formBlock">
 			<MkDriveFileThumbnail class="thumbnail" :file="file" fit="contain"/>
 			<div class="info">
 				<span style="margin-right: 1em;">{{ file.type }}</span>
@@ -14,35 +9,33 @@
 				<MkTime :time="file.createdAt" mode="detail" style="display: block;"/>
 			</div>
 		</div>
-		<div class="_section">
-			<div class="_content">
-				<MkSwitch v-model="isSensitive" @update:modelValue="toggleIsSensitive">NSFW</MkSwitch>
-			</div>
+		<div class="_formBlock">
+			<MkSwitch v-model="isSensitive" @update:modelValue="toggleIsSensitive">NSFW</MkSwitch>
 		</div>
-		<div class="_section">
-			<div class="_content">
-				<MkButton full @click="showUser"><i class="fas fa-external-link-square-alt"></i> {{ $ts.user }}</MkButton>
-				<MkButton full danger @click="del"><i class="fas fa-trash-alt"></i> {{ $ts.delete }}</MkButton>
-			</div>
+		<div class="_formBlock">
+			<MkButton full @click="showUser"><i class="fas fa-external-link-square-alt"></i> {{ $ts.user }}</MkButton>
 		</div>
-		<div v-if="info" class="_section">
+		<div class="_formBlock">
+			<MkButton full danger @click="del"><i class="fas fa-trash-alt"></i> {{ $ts.delete }}</MkButton>
+		</div>
+		<div v-if="info" class="_formBlock">
 			<details class="_content rawdata">
 				<pre><code>{{ JSON.stringify(info, null, 2) }}</code></pre>
 			</details>
 		</div>
 	</div>
-</XModalWindow>
+</MkSpacer>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
+import { computed } from 'vue';
 import MkButton from '@/components/ui/button.vue';
 import MkSwitch from '@/components/form/switch.vue';
-import XModalWindow from '@/components/ui/modal-window.vue';
 import MkDriveFileThumbnail from '@/components/drive-file-thumbnail.vue';
 import bytes from '@/filters/bytes';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
+import * as symbols from '@/symbols';
 
 let file: any = $ref(null);
 let info: any = $ref(null);
@@ -72,7 +65,7 @@ async function del() {
 	if (canceled) return;
 
 	os.apiWithDialog('drive/files/delete', {
-		fileId: file.id
+		fileId: file.id,
 	});
 }
 
@@ -80,6 +73,14 @@ async function toggleIsSensitive(v) {
 	await os.api('drive/files/update', { fileId: props.fileId, isSensitive: v });
 	isSensitive = v;
 }
+
+defineExpose({
+	[symbols.PAGE_INFO]: computed(() => ({
+		title: file ? i18n.ts.file + ': ' + file.name : i18n.ts.file,
+		icon: 'fas fa-file',
+		bg: 'var(--bg)',
+	})),
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/pages/admin/files.vue b/packages/client/src/pages/admin/files.vue
index 6f43c2b7bd..9350911b60 100644
--- a/packages/client/src/pages/admin/files.vue
+++ b/packages/client/src/pages/admin/files.vue
@@ -82,9 +82,7 @@ function clear() {
 }
 
 function show(file) {
-	os.popup(defineAsyncComponent(() => import('./file-dialog.vue')), {
-		fileId: file.id,
-	}, {}, 'closed');
+	os.pageWindow(`/admin-file/${file.id}`);
 }
 
 async function find() {
diff --git a/packages/client/src/router.ts b/packages/client/src/router.ts
index 96c793166c..7e16c35d2b 100644
--- a/packages/client/src/router.ts
+++ b/packages/client/src/router.ts
@@ -1,9 +1,9 @@
 import { AsyncComponentLoader, defineAsyncComponent, markRaw } from 'vue';
 import { createRouter, createWebHistory } from 'vue-router';
+import { $i, iAmModerator } from './account';
 import MkLoading from '@/pages/_loading_.vue';
 import MkError from '@/pages/_error_.vue';
 import MkTimeline from '@/pages/timeline.vue';
-import { $i, iAmModerator } from './account';
 import { ui } from '@/config';
 
 // pathに/が入るとrollupが解決してくれないので、() => import('*.vue')を指定すること
@@ -70,6 +70,7 @@ const defaultRoutes = [
 	{ path: '/scratchpad', component: page('scratchpad') },
 	{ path: '/admin/:page(.*)?', component: iAmModerator ? page(() => import('./pages/admin/index.vue')) : page('not-found'), props: route => ({ initialPage: route.params.page || null }) },
 	{ path: '/admin', component: iAmModerator ? page(() => import('./pages/admin/index.vue')) : page('not-found') },
+	{ path: '/admin-file/:fileId', component: page('admin-file'), props: route => ({ fileId: route.params.fileId }) },
 	{ path: '/notes/:note', name: 'note', component: page('note'), props: route => ({ noteId: route.params.note }) },
 	{ path: '/tags/:tag', component: page('tag'), props: route => ({ tag: route.params.tag }) },
 	{ path: '/user-info/:user', component: page('user-info'), props: route => ({ userId: route.params.user }) },
@@ -82,7 +83,7 @@ const defaultRoutes = [
 	{ path: '/miauth/:session', component: page('miauth') },
 	{ path: '/authorize-follow', component: page('follow') },
 	{ path: '/share', component: page('share') },
-	{ path: '/:catchAll(.*)', component: page('not-found') }
+	{ path: '/:catchAll(.*)', component: page('not-found') },
 ];
 
 const chatRoutes = [
@@ -126,7 +127,7 @@ export const router = createRouter({
 				window.scroll({ top: 0, behavior: 'instant' });
 			}
 		};
-	}
+	},
 });
 
 router.afterEach((to, from) => {
@@ -141,6 +142,6 @@ export function resolve(path: string) {
 	return {
 		component: markRaw(route.components.default),
 		// TODO: route.propsには関数以外も入る可能性があるのでよしなにハンドリングする
-		props: route.props?.default ? route.props.default(resolved) : resolved.params
+		props: route.props.default ? route.props.default(resolved) : resolved.params,
 	};
 }

From 6422cde5f28502519f1e7858d18110b4305195a4 Mon Sep 17 00:00:00 2001
From: MeiMei <30769358+mei23@users.noreply.github.com>
Date: Sat, 18 Jun 2022 16:02:31 +0900
Subject: [PATCH 03/90] enhance: Improve player detection in URL preview
 (#8849)

* enhance: Improve player detection in URL preview

* CHANGELOG
---
 CHANGELOG.md                  | 1 +
 packages/backend/package.json | 2 +-
 packages/backend/yarn.lock    | 8 ++++----
 3 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 63d6966658..5853b982a7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,7 @@ You should also include the user name that made the change.
 ### Improvements
 - Server: Add rate limit to i/notifications @tamaina
 - Client: Improve files page of control panel @syuilo
+- Improve player detection in URL preview @mei23
 
 ### Bugfixes
 - Server: Fix GenerateVideoThumbnail failed @mei23
diff --git a/packages/backend/package.json b/packages/backend/package.json
index 2186dcc6a9..3ac5b7398c 100644
--- a/packages/backend/package.json
+++ b/packages/backend/package.json
@@ -100,7 +100,7 @@
 		"strict-event-emitter-types": "2.0.0",
 		"stringz": "2.1.0",
 		"style-loader": "3.3.1",
-		"summaly": "2.5.1",
+		"summaly": "2.6.0",
 		"syslog-pro": "1.0.0",
 		"systeminformation": "5.11.16",
 		"tinycolor2": "1.4.2",
diff --git a/packages/backend/yarn.lock b/packages/backend/yarn.lock
index 5ce87c34eb..4c89fdf050 100644
--- a/packages/backend/yarn.lock
+++ b/packages/backend/yarn.lock
@@ -6429,10 +6429,10 @@ style-loader@3.3.1:
   resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-3.3.1.tgz#057dfa6b3d4d7c7064462830f9113ed417d38575"
   integrity sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ==
 
-summaly@2.5.1:
-  version "2.5.1"
-  resolved "https://registry.yarnpkg.com/summaly/-/summaly-2.5.1.tgz#742fe6631987f84ad2e95d2b0f7902ec57e0f6b3"
-  integrity sha512-WWvl7rLs3wm61Xc2JqgTbSuqtIOmGqKte+rkbnxe6ISy4089lQ+7F2ajooQNee6PWHl9kZ27SDd1ZMoL3/6R4A==
+summaly@2.6.0:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/summaly/-/summaly-2.6.0.tgz#aaac80eb8ae88b130318f44d9b98da9c2ccb328c"
+  integrity sha512-wIv6fL3aeFfXcQoZISzeUfNUgD3u8Hwx8Rg0awZliQhans62w23K3nDezwfvmYAQCgXs6e0EF7jtGmJv/qeVTA==
   dependencies:
     cheerio "0.22.0"
     debug "4.3.3"

From d7bab7cf0b0d6c80bbe836d2d310c82502cba35d Mon Sep 17 00:00:00 2001
From: futchitwo <74236683+futchitwo@users.noreply.github.com>
Date: Sat, 18 Jun 2022 18:23:54 +0900
Subject: [PATCH 04/90] Refactor clip page to Composition API (#8822)

* Refactor clip page to use Composition API

* Refactor clip page

* Refactor clip page

* Refactor clip page
---
 packages/client/src/pages/clip.vue | 177 ++++++++++++-----------------
 1 file changed, 73 insertions(+), 104 deletions(-)

diff --git a/packages/client/src/pages/clip.vue b/packages/client/src/pages/clip.vue
index c999f1bfc9..cfe11efd1c 100644
--- a/packages/client/src/pages/clip.vue
+++ b/packages/client/src/pages/clip.vue
@@ -15,121 +15,90 @@
 </MkSpacer>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent } from 'vue';
-import MkContainer from '@/components/ui/container.vue';
-import XPostForm from '@/components/post-form.vue';
+<script lang="ts" setup>
+import { computed, watch } from 'vue';
+import * as misskey from 'misskey-js';
 import XNotes from '@/components/notes.vue';
+import { $i } from '@/account';
+import { i18n } from '@/i18n';
 import * as os from '@/os';
 import * as symbols from '@/symbols';
 
-export default defineComponent({
-	components: {
-		MkContainer,
-		XPostForm,
-		XNotes,
-	},
+const props = defineProps<{
+	clipId: string,
+}>();
 
-	props: {
-		clipId: {
-			type: String,
-			required: true
-		}
-	},
+let clip: misskey.entities.Clip = $ref<misskey.entities.Clip>();
+const pagination = {
+	endpoint: 'clips/notes' as const,
+	limit: 10,
+	params: computed(() => ({
+		clipId: props.clipId,
+	})),
+};
 
-	data() {
-		return {
-			[symbols.PAGE_INFO]: computed(() => this.clip ? {
-				title: this.clip.name,
-				icon: 'fas fa-paperclip',
-				bg: 'var(--bg)',
-				actions: [{
-					icon: 'fas fa-ellipsis-h',
-					handler: this.menu
-				}],
-			} : null),
-			clip: null,
-			pagination: {
-				endpoint: 'clips/notes' as const,
-				limit: 10,
-				params: computed(() => ({
-					clipId: this.clipId,
-				}))
-			},
-		};
-	},
+const isOwned: boolean | null = $computed<boolean | null>(() => $i && clip && ($i.id === clip.userId));
 
-	computed: {
-		isOwned(): boolean {
-			return this.$i && this.clip && (this.$i.id === this.clip.userId);
-		}
-	},
+watch(() => props.clipId, async () => {
+	clip = await os.api('clips/show', {
+		clipId: props.clipId,
+	});
+}, {
+	immediate: true,
+}); 
 
-	watch: {
-		clipId: {
-			async handler() {
-				this.clip = await os.api('clips/show', {
-					clipId: this.clipId,
+defineExpose({
+	[symbols.PAGE_INFO]: computed(() => clip ? {
+		title: clip.name,
+		icon: 'fas fa-paperclip',
+		bg: 'var(--bg)',
+		actions: isOwned ? [{
+			icon: 'fas fa-pencil-alt',
+			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,
 				});
 			},
-			immediate: true
-		}
-	},
+		}, {
+			icon: 'fas fa-trash-alt',
+			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;
 
-	created() {
-
-	},
-
-	methods: {
-		menu(ev) {
-			os.popupMenu([this.isOwned ? {
-				icon: 'fas fa-pencil-alt',
-				text: this.$ts.edit,
-				action: async () => {
-					const { canceled, result } = await os.form(this.clip.name, {
-						name: {
-							type: 'string',
-							label: this.$ts.name,
-							default: this.clip.name
-						},
-						description: {
-							type: 'string',
-							required: false,
-							multiline: true,
-							label: this.$ts.description,
-							default: this.clip.description
-						},
-						isPublic: {
-							type: 'boolean',
-							label: this.$ts.public,
-							default: this.clip.isPublic
-						}
-					});
-					if (canceled) return;
-
-					os.apiWithDialog('clips/update', {
-						clipId: this.clip.id,
-						...result
-					});
-				}
-			} : undefined, this.isOwned ? {
-				icon: 'fas fa-trash-alt',
-				text: this.$ts.delete,
-				danger: true,
-				action: async () => {
-					const { canceled } = await os.confirm({
-						type: 'warning',
-						text: this.$t('deleteAreYouSure', { x: this.clip.name }),
-					});
-					if (canceled) return;
-
-					await os.apiWithDialog('clips/delete', {
-						clipId: this.clip.id,
-					});
-				}
-			} : undefined], ev.currentTarget ?? ev.target);
-		}
-	}
+				await os.apiWithDialog('clips/delete', {
+					clipId: clip.id,
+				});
+			},
+		}] : [],
+	} : null),
 });
 </script>
 

From 5b7595d9d7e313271c692a849fc915e73fcea108 Mon Sep 17 00:00:00 2001
From: futchitwo <74236683+futchitwo@users.noreply.github.com>
Date: Sat, 18 Jun 2022 18:27:09 +0900
Subject: [PATCH 05/90] Improve: unclip (#8823)

* Refactor clip page to use Composition API

* Refactor clip page

* Refactor clip page

* Refactor clip page

* Improve: unclip

* Fix unclip

* Fix unclip

* chore: better type and name

* Fix

* Fix clipPage vue provider

Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>
---
 locales/ja-JP.yml                             |  2 +
 packages/backend/src/server/api/endpoints.ts  |  2 +
 .../server/api/endpoints/clips/remove-note.ts | 57 +++++++++++++++++++
 .../client/src/components/note-detailed.vue   |  4 +-
 packages/client/src/components/note.vue       |  8 ++-
 packages/client/src/pages/clip.vue            |  4 +-
 packages/client/src/scripts/get-note-menu.ts  | 42 +++++++++++++-
 7 files changed, 110 insertions(+), 9 deletions(-)
 create mode 100644 packages/backend/src/server/api/endpoints/clips/remove-note.ts

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index c17e6959b9..082b8a24bc 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -643,6 +643,8 @@ clip: "クリップ"
 createNew: "新規作成"
 optional: "任意"
 createNewClip: "新しいクリップを作成"
+unclip: "クリップ解除"
+confirmToUnclipAlreadyClippedNote: "このノートはすでにクリップ「{name}」に含まれています。ノートをこのクリップから除外しますか？"
 public: "パブリック"
 i18nInfo: "Misskeyは有志によって様々な言語に翻訳されています。{link}で翻訳に協力できます。"
 manageAccessTokens: "アクセストークンの管理"
diff --git a/packages/backend/src/server/api/endpoints.ts b/packages/backend/src/server/api/endpoints.ts
index 1e7afd8cdd..5fac7df239 100644
--- a/packages/backend/src/server/api/endpoints.ts
+++ b/packages/backend/src/server/api/endpoints.ts
@@ -99,6 +99,7 @@ import * as ep___charts_user_notes from './endpoints/charts/user/notes.js';
 import * as ep___charts_user_reactions from './endpoints/charts/user/reactions.js';
 import * as ep___charts_users from './endpoints/charts/users.js';
 import * as ep___clips_addNote from './endpoints/clips/add-note.js';
+import * as ep___clips_removeNote from './endpoints/clips/remove-note.js';
 import * as ep___clips_create from './endpoints/clips/create.js';
 import * as ep___clips_delete from './endpoints/clips/delete.js';
 import * as ep___clips_list from './endpoints/clips/list.js';
@@ -409,6 +410,7 @@ const eps = [
 	['charts/user/reactions', ep___charts_user_reactions],
 	['charts/users', ep___charts_users],
 	['clips/add-note', ep___clips_addNote],
+	['clips/remove-note', ep___clips_removeNote],
 	['clips/create', ep___clips_create],
 	['clips/delete', ep___clips_delete],
 	['clips/list', ep___clips_list],
diff --git a/packages/backend/src/server/api/endpoints/clips/remove-note.ts b/packages/backend/src/server/api/endpoints/clips/remove-note.ts
new file mode 100644
index 0000000000..8b90e31f65
--- /dev/null
+++ b/packages/backend/src/server/api/endpoints/clips/remove-note.ts
@@ -0,0 +1,57 @@
+import define from '../../define.js';
+import { ClipNotes, Clips } from '@/models/index.js';
+import { ApiError } from '../../error.js';
+import { getNote } from '../../common/getters.js';
+
+export const meta = {
+	tags: ['account', 'notes', 'clips'],
+
+	requireCredential: true,
+
+	kind: 'write:account',
+
+	errors: {
+		noSuchClip: {
+			message: 'No such clip.',
+			code: 'NO_SUCH_CLIP',
+			id: 'b80525c6-97f7-49d7-a42d-ebccd49cfd52',
+		},
+
+		noSuchNote: {
+			message: 'No such note.',
+			code: 'NO_SUCH_NOTE',
+			id: 'aff017de-190e-434b-893e-33a9ff5049d8',
+		},
+	},
+} as const;
+
+export const paramDef = {
+	type: 'object',
+	properties: {
+		clipId: { type: 'string', format: 'misskey:id' },
+		noteId: { type: 'string', format: 'misskey:id' },
+	},
+	required: ['clipId', 'noteId'],
+} as const;
+
+// eslint-disable-next-line import/no-default-export
+export default define(meta, paramDef, async (ps, user) => {
+	const clip = await Clips.findOneBy({
+		id: ps.clipId,
+		userId: user.id,
+	});
+
+	if (clip == null) {
+		throw new ApiError(meta.errors.noSuchClip);
+	}
+
+	const note = await getNote(ps.noteId).catch(e => {
+		if (e.id === '9725d0ce-ba28-4dde-95a7-2cbb2c15de24') throw new ApiError(meta.errors.noSuchNote);
+		throw e;
+	});
+
+	await ClipNotes.delete({
+		noteId: note.id,
+		clipId: clip.id,
+	});
+});
diff --git a/packages/client/src/components/note-detailed.vue b/packages/client/src/components/note-detailed.vue
index 6234b710d2..ba47bfcd4a 100644
--- a/packages/client/src/components/note-detailed.vue
+++ b/packages/client/src/components/note-detailed.vue
@@ -251,12 +251,12 @@ function onContextmenu(ev: MouseEvent): void {
 		ev.preventDefault();
 		react();
 	} else {
-		os.contextMenu(getNoteMenu({ note: note, translating, translation, menuButton }), 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 }), menuButton.value, {
+	os.popupMenu(getNoteMenu({ note: note, translating, translation, menuButton, isDeleted }), menuButton.value, {
 		viaKeyboard,
 	}).then(focus);
 }
diff --git a/packages/client/src/components/note.vue b/packages/client/src/components/note.vue
index e5744d1ce9..b06f4edd0a 100644
--- a/packages/client/src/components/note.vue
+++ b/packages/client/src/components/note.vue
@@ -105,7 +105,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, onMounted, onUnmounted, reactive, ref } from 'vue';
+import { computed, inject, onMounted, onUnmounted, reactive, ref, Ref } from 'vue';
 import * as mfm from 'mfm-js';
 import * as misskey from 'misskey-js';
 import MkNoteSub from './MkNoteSub.vue';
@@ -225,6 +225,8 @@ function undoReact(note): void {
 	});
 }
 
+const cullentClipPage = inject<Ref<misskey.entities.Clip>>('cullentClipPage');
+
 function onContextmenu(ev: MouseEvent): void {
 	const isLink = (el: HTMLElement) => {
 		if (el.tagName === 'A') return true;
@@ -239,12 +241,12 @@ function onContextmenu(ev: MouseEvent): void {
 		ev.preventDefault();
 		react();
 	} else {
-		os.contextMenu(getNoteMenu({ note: note, translating, translation, menuButton }), ev).then(focus);
+		os.contextMenu(getNoteMenu({ note: note, translating, translation, menuButton, isDeleted, cullentClipPage }), ev).then(focus);
 	}
 }
 
 function menu(viaKeyboard = false): void {
-	os.popupMenu(getNoteMenu({ note: note, translating, translation, menuButton }), menuButton.value, {
+	os.popupMenu(getNoteMenu({ note: note, translating, translation, menuButton, isDeleted, cullentClipPage }), menuButton.value, {
 		viaKeyboard,
 	}).then(focus);
 }
diff --git a/packages/client/src/pages/clip.vue b/packages/client/src/pages/clip.vue
index cfe11efd1c..bfe1578b13 100644
--- a/packages/client/src/pages/clip.vue
+++ b/packages/client/src/pages/clip.vue
@@ -16,7 +16,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, watch } from 'vue';
+import { computed, watch, provide } from 'vue';
 import * as misskey from 'misskey-js';
 import XNotes from '@/components/notes.vue';
 import { $i } from '@/account';
@@ -47,6 +47,8 @@ watch(() => props.clipId, async () => {
 	immediate: true,
 }); 
 
+provide('cullentClipPage', $$(clip));
+
 defineExpose({
 	[symbols.PAGE_INFO]: computed(() => clip ? {
 		title: clip.name,
diff --git a/packages/client/src/scripts/get-note-menu.ts b/packages/client/src/scripts/get-note-menu.ts
index 78749ad6bb..e56d519493 100644
--- a/packages/client/src/scripts/get-note-menu.ts
+++ b/packages/client/src/scripts/get-note-menu.ts
@@ -1,4 +1,4 @@
-import { defineAsyncComponent, Ref } from 'vue';
+import { defineAsyncComponent, Ref, inject } from 'vue';
 import * as misskey from 'misskey-js';
 import { $i } from '@/account';
 import { i18n } from '@/i18n';
@@ -14,6 +14,8 @@ export function getNoteMenu(props: {
 	menuButton: Ref<HTMLElement>;
 	translation: Ref<any>;
 	translating: Ref<boolean>;
+	isDeleted: Ref<boolean>;
+	cullentClipPage?: Ref<misskey.entities.Clip>;
 }) {
 	const isRenote = (
 		props.note.renote != null &&
@@ -125,12 +127,37 @@ export function getNoteMenu(props: {
 		}, null, ...clips.map(clip => ({
 			text: clip.name,
 			action: () => {
-				os.apiWithDialog('clips/add-note', { clipId: clip.id, noteId: appearNote.id });
+				os.promiseDialog(
+					os.api('clips/add-note', { clipId: clip.id, noteId: appearNote.id }),
+					null,
+					async (err) => {
+						if (err.id === '734806c4-542c-463a-9311-15c512803965') {
+							const confirm = await os.confirm({
+								type: 'warning',
+								text: i18n.t('confirmToUnclipAlreadyClippedNote', { name: clip.name }),
+							});
+							if (!confirm.canceled) {
+								os.apiWithDialog('clips/remove-note', { clipId: clip.id, noteId: appearNote.id });
+								if (props.cullentClipPage?.value.id === clip.id) props.isDeleted.value = true;
+							}
+						} else {
+							os.alert({
+								type: 'error',
+								text: err.message + '\n' + err.id,
+							});
+						}
+					}
+				);
 			}
 		}))], props.menuButton.value, {
 		}).then(focus);
 	}
 
+	async function unclip(): Promise<void> {
+		os.apiWithDialog('clips/remove-note', { clipId: props.cullentClipPage.value.id, noteId: appearNote.id });
+		props.isDeleted.value = true;
+	}
+
 	async function promote(): Promise<void> {
 		const { canceled, result: days } = await os.inputNumber({
 			title: i18n.ts.numberOfDays,
@@ -169,7 +196,16 @@ export function getNoteMenu(props: {
 			noteId: appearNote.id
 		});
 
-		menu = [{
+		menu = [
+		...(
+			props.cullentClipPage?.value.userId === $i.id ? [{
+				icon: 'fas fa-circle-minus',
+				text: i18n.ts.unclip,
+				danger: true,
+				action: unclip,
+			}, null] : []
+		),
+		{
 			icon: 'fas fa-copy',
 			text: i18n.ts.copyContent,
 			action: copyContent

From 802a35d4b6f438f9f931eb5cd791e950deaa445b Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sat, 18 Jun 2022 18:27:47 +0900
Subject: [PATCH 06/90] fix typo

---
 packages/client/src/components/note.vue      | 6 +++---
 packages/client/src/pages/clip.vue           | 2 +-
 packages/client/src/scripts/get-note-menu.ts | 8 ++++----
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/client/src/components/note.vue b/packages/client/src/components/note.vue
index b06f4edd0a..9ec1e53c1e 100644
--- a/packages/client/src/components/note.vue
+++ b/packages/client/src/components/note.vue
@@ -225,7 +225,7 @@ function undoReact(note): void {
 	});
 }
 
-const cullentClipPage = inject<Ref<misskey.entities.Clip>>('cullentClipPage');
+const currentClipPage = inject<Ref<misskey.entities.Clip>>('currentClipPage');
 
 function onContextmenu(ev: MouseEvent): void {
 	const isLink = (el: HTMLElement) => {
@@ -241,12 +241,12 @@ function onContextmenu(ev: MouseEvent): void {
 		ev.preventDefault();
 		react();
 	} else {
-		os.contextMenu(getNoteMenu({ note: note, translating, translation, menuButton, isDeleted, cullentClipPage }), 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, cullentClipPage }), menuButton.value, {
+	os.popupMenu(getNoteMenu({ note: note, translating, translation, menuButton, isDeleted, currentClipPage }), menuButton.value, {
 		viaKeyboard,
 	}).then(focus);
 }
diff --git a/packages/client/src/pages/clip.vue b/packages/client/src/pages/clip.vue
index bfe1578b13..163384337e 100644
--- a/packages/client/src/pages/clip.vue
+++ b/packages/client/src/pages/clip.vue
@@ -47,7 +47,7 @@ watch(() => props.clipId, async () => {
 	immediate: true,
 }); 
 
-provide('cullentClipPage', $$(clip));
+provide('currentClipPage', $$(clip));
 
 defineExpose({
 	[symbols.PAGE_INFO]: computed(() => clip ? {
diff --git a/packages/client/src/scripts/get-note-menu.ts b/packages/client/src/scripts/get-note-menu.ts
index e56d519493..283c90362c 100644
--- a/packages/client/src/scripts/get-note-menu.ts
+++ b/packages/client/src/scripts/get-note-menu.ts
@@ -15,7 +15,7 @@ export function getNoteMenu(props: {
 	translation: Ref<any>;
 	translating: Ref<boolean>;
 	isDeleted: Ref<boolean>;
-	cullentClipPage?: Ref<misskey.entities.Clip>;
+	currentClipPage?: Ref<misskey.entities.Clip>;
 }) {
 	const isRenote = (
 		props.note.renote != null &&
@@ -138,7 +138,7 @@ export function getNoteMenu(props: {
 							});
 							if (!confirm.canceled) {
 								os.apiWithDialog('clips/remove-note', { clipId: clip.id, noteId: appearNote.id });
-								if (props.cullentClipPage?.value.id === clip.id) props.isDeleted.value = true;
+								if (props.currentClipPage?.value.id === clip.id) props.isDeleted.value = true;
 							}
 						} else {
 							os.alert({
@@ -154,7 +154,7 @@ export function getNoteMenu(props: {
 	}
 
 	async function unclip(): Promise<void> {
-		os.apiWithDialog('clips/remove-note', { clipId: props.cullentClipPage.value.id, noteId: appearNote.id });
+		os.apiWithDialog('clips/remove-note', { clipId: props.currentClipPage.value.id, noteId: appearNote.id });
 		props.isDeleted.value = true;
 	}
 
@@ -198,7 +198,7 @@ export function getNoteMenu(props: {
 
 		menu = [
 		...(
-			props.cullentClipPage?.value.userId === $i.id ? [{
+			props.currentClipPage?.value.userId === $i.id ? [{
 				icon: 'fas fa-circle-minus',
 				text: i18n.ts.unclip,
 				danger: true,

From 54465d36a791654317ad6ecc0e5a727984991b76 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <github-bf215181b5140522137b3d4f6b73544a@desu.email>
Date: Sat, 18 Jun 2022 11:39:04 +0200
Subject: [PATCH 07/90] Refactor page-editor elements to use Composition API
 (#8721)

* refactor(client): refactor page-editor elements to use Composition API

* Apply review suggestions from @Johann150

Co-authored-by: Johann150 <johann@qwertqwefsday.eu>

Co-authored-by: Johann150 <johann@qwertqwefsday.eu>
---
 .../page-editor/els/page-editor.el.button.vue | 48 ++++-------
 .../page-editor/els/page-editor.el.canvas.vue | 34 +++-----
 .../els/page-editor.el.counter.vue            | 30 ++-----
 .../page-editor/els/page-editor.el.if.vue     | 63 ++++++--------
 .../page-editor/els/page-editor.el.image.vue  | 64 ++++++--------
 .../page-editor/els/page-editor.el.note.vue   | 57 +++++--------
 .../els/page-editor.el.number-input.vue       | 30 ++-----
 .../page-editor/els/page-editor.el.post.vue   | 34 +++-----
 .../els/page-editor.el.radio-button.vue       | 49 ++++-------
 .../els/page-editor.el.section.vue            | 83 ++++++++-----------
 .../page-editor/els/page-editor.el.switch.vue | 30 ++-----
 .../els/page-editor.el.text-input.vue         | 30 ++-----
 .../page-editor/els/page-editor.el.text.vue   | 30 ++-----
 .../els/page-editor.el.textarea-input.vue     | 30 ++-----
 .../els/page-editor.el.textarea.vue           | 30 ++-----
 15 files changed, 214 insertions(+), 428 deletions(-)

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 827679d6a9..4c2e0e4eb4 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
@@ -38,44 +38,28 @@
 </XContainer>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 /* eslint-disable vue/no-mutating-props */
-import { defineComponent } from 'vue';
+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 * as os from '@/os';
 
-export default defineComponent({
-	components: {
-		XContainer, MkSelect, MkInput, MkSwitch
-	},
-
-	props: {
-		value: {
-			required: true
-		},
-		hpml: {
-			required: true,
-		},
-	},
-
-	data() {
-		return {
-		};
-	},
-
-	created() {
-		if (this.value.text == null) this.value.text = '';
-		if (this.value.action == null) this.value.action = 'dialog';
-		if (this.value.content == null) this.value.content = null;
-		if (this.value.event == null) this.value.event = null;
-		if (this.value.message == null) this.value.message = null;
-		if (this.value.primary == null) this.value.primary = false;
-		if (this.value.var == null) this.value.var = null;
-		if (this.value.fn == null) this.value.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>
 
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 ba5d0ba1f7..191321ae14 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
@@ -20,33 +20,19 @@
 </XContainer>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 /* eslint-disable vue/no-mutating-props */
-import { defineComponent } from 'vue';
+import { } from 'vue';
 import XContainer from '../page-editor.container.vue';
 import MkInput from '@/components/form/input.vue';
-import * as os from '@/os';
 
-export default defineComponent({
-	components: {
-		XContainer, MkInput
-	},
-
-	props: {
-		value: {
-			required: true
-		},
-	},
-
-	data() {
-		return {
-		};
-	},
-
-	created() {
-		if (this.value.name == null) this.value.name = '';
-		if (this.value.width == null) this.value.width = 300;
-		if (this.value.height == null) this.value.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 dc98a610ba..1a2078448d 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
@@ -18,31 +18,17 @@
 </XContainer>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 /* eslint-disable vue/no-mutating-props */
-import { defineComponent } from 'vue';
+import { } from 'vue';
 import XContainer from '../page-editor.container.vue';
 import MkInput from '@/components/form/input.vue';
-import * as os from '@/os';
 
-export default defineComponent({
-	components: {
-		XContainer, MkInput
-	},
-
-	props: {
-		value: {
-			required: true
-		},
-	},
-
-	data() {
-		return {
-		};
-	},
-
-	created() {
-		if (this.value.name == null) this.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 be3a520ea5..d763070b15 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
@@ -25,54 +25,39 @@
 </XContainer>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 /* eslint-disable vue/no-mutating-props */
-import { defineComponent, defineAsyncComponent } from 'vue';
+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';
 
-export default defineComponent({
-	components: {
-		XContainer, MkSelect,
-		XBlocks: defineAsyncComponent(() => import('../page-editor.blocks.vue')),
-	},
+const XBlocks = defineAsyncComponent(() => import('../page-editor.blocks.vue'));
 
-	inject: ['getPageBlockList'],
-
-	props: {
-		value: {
-			required: true
-		},
-		hpml: {
-			required: true,
-		},
-	},
-
-	data() {
-		return {
-		};
-	},
-
-	created() {
-		if (this.value.children == null) this.value.children = [];
-		if (this.value.var === undefined) this.value.var = null;
-	},
-
-	methods: {
-		async add() {
-			const { canceled, result: type } = await os.select({
-				title: this.$ts._pages.chooseBlock,
-				groupedItems: this.getPageBlockList()
-			});
-			if (canceled) return;
-
-			const id = uuid();
-			this.value.children.push({ id, type });
-		},
+const props = withDefaults(defineProps<{
+	value: any,
+	hpml: any
+}>(), {
+	value: {
+		children: [],
+		var: null
 	}
 });
+
+const getPageBlockList = inject<(any) => any>('getPageBlockList');
+
+async function add() {
+	const { canceled, result: type } = await os.select({
+		title: i18n.ts._pages.chooseBlock,
+		groupedItems: getPageBlockList()
+	});
+	if (canceled) return;
+
+	const id = uuid();
+	props.value.children.push({ id, type });
+}
 </script>
 
 <style lang="scss" scoped>
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 9a6adab30a..b22bf1cb34 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
@@ -14,53 +14,39 @@
 </XContainer>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 /* eslint-disable vue/no-mutating-props */
-import { defineComponent } from 'vue';
+import { onMounted } from 'vue';
 import XContainer from '../page-editor.container.vue';
 import MkDriveFileThumbnail from '@/components/drive-file-thumbnail.vue';
 import * as os from '@/os';
 
-export default defineComponent({
-	components: {
-		XContainer, MkDriveFileThumbnail
-	},
+const props = withDefaults(defineProps<{
+	value: any
+}>(), {
+	value: {
+		fileId: null
+	}
+});
 
-	props: {
-		value: {
-			required: true
-		},
-	},
+let file: any = $ref(null);
 
-	data() {
-		return {
-			file: null,
-		};
-	},
+async function choose() {
+	os.selectDriveFile(false).then((fileResponse: any) => {
+		file = fileResponse;
+		props.value.fileId = fileResponse.id;
+	});
+}
 
-	created() {
-		if (this.value.fileId === undefined) this.value.fileId = null;
-	},
-
-	mounted() {
-		if (this.value.fileId == null) {
-			this.choose();
-		} else {
-			os.api('drive/files/show', {
-				fileId: this.value.fileId
-			}).then(file => {
-				this.file = file;
-			});
-		}
-	},
-
-	methods: {
-		async choose() {
-			os.selectDriveFile(false).then(file => {
-				this.file = file;
-				this.value.fileId = file.id;
-			});
-		},
+onMounted(async () => {
+	if (props.value.fileId == null) {
+		await choose();
+	} else {
+		os.api('drive/files/show', {
+			fileId: props.value.fileId
+		}).then(fileResponse => {
+			file = fileResponse;
+		});
 	}
 });
 </script>
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 2d4d9c5dcc..27f9f961f3 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
@@ -16,9 +16,9 @@
 </XContainer>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 /* eslint-disable vue/no-mutating-props */
-import { defineComponent } from 'vue';
+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';
@@ -26,42 +26,27 @@ import XNote from '@/components/note.vue';
 import XNoteDetailed from '@/components/note-detailed.vue';
 import * as os from '@/os';
 
-export default defineComponent({
-	components: {
-		XContainer, MkInput, MkSwitch, XNote, XNoteDetailed,
-	},
+const props = withDefaults(defineProps<{
+	value: any
+}>(), {
+	value: {
+		note: null,
+		detailed: false
+	}
+});
 
-	props: {
-		value: {
-			required: true
-		},
-	},
+let id: any = $ref(props.value.note);
+let note: any = $ref(null);
 
-	data() {
-		return {
-			id: this.value.note,
-			note: 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 handler() {
-				if (this.id && (this.id.startsWith('http://') || this.id.startsWith('https://'))) {
-					this.value.note = this.id.endsWith('/') ? this.id.substr(0, this.id.length - 1).split('/').pop() : this.id.split('/').pop();
-				} else {
-					this.value.note = this.id;
-				}
-
-				this.note = await os.api('notes/show', { noteId: this.value.note });
-			},
-			immediate: true
-		},
-	},
-
-	created() {
-		if (this.value.note == null) this.value.note = null;
-		if (this.value.detailed == null) this.value.detailed = false;
-	},
+	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 9083f0c493..479a859e76 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
@@ -18,31 +18,17 @@
 </XContainer>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 /* eslint-disable vue/no-mutating-props */
-import { defineComponent } from 'vue';
+import { } from 'vue';
 import XContainer from '../page-editor.container.vue';
 import MkInput from '@/components/form/input.vue';
-import * as os from '@/os';
 
-export default defineComponent({
-	components: {
-		XContainer, MkInput
-	},
-
-	props: {
-		value: {
-			required: true
-		},
-	},
-
-	data() {
-		return {
-		};
-	},
-
-	created() {
-		if (this.value.name == null) this.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 3af720f4b7..f8c42c296b 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
@@ -11,35 +11,21 @@
 </XContainer>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 /* eslint-disable vue/no-mutating-props */
-import { defineComponent } from 'vue';
+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 * as os from '@/os';
 
-export default defineComponent({
-	components: {
-		XContainer, MkTextarea, MkInput, MkSwitch
-	},
-
-	props: {
-		value: {
-			required: true
-		},
-	},
-
-	data() {
-		return {
-		};
-	},
-
-	created() {
-		if (this.value.text == null) this.value.text = '';
-		if (this.value.attachCanvasImage == null) this.value.attachCanvasImage = false;
-		if (this.value.canvasId == null) this.value.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 2502a54d79..183e60a69a 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
@@ -12,41 +12,28 @@
 </XContainer>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 /* eslint-disable vue/no-mutating-props */
-import { defineComponent } from 'vue';
+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 * as os from '@/os';
 
-export default defineComponent({
-	components: {
-		XContainer, MkTextarea, MkInput
-	},
-	props: {
-		value: {
-			required: true
-		},
-	},
-	data() {
-		return {
-			values: '',
-		};
-	},
-	watch: {
-		values: {
-			handler() {
-				this.value.values = this.values.split('\n');
-			},
-			deep: true
-		}
-	},
-	created() {
-		if (this.value.name == null) this.value.name = '';
-		if (this.value.title == null) this.value.title = '';
-		if (this.value.values == null) this.value.values = [];
-		this.values = this.value.values.join('\n');
-	},
+const props = withDefaults(defineProps<{
+	value: any
+}>(), {
+	value: {
+		name: '',
+		title: '',
+		values: []
+	}
+});
+
+let values: string = $ref(props.value.values.join('\n'));
+
+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 1684895fe1..7276cc1e1b 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
@@ -17,66 +17,51 @@
 </XContainer>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 /* eslint-disable vue/no-mutating-props */
-import { defineComponent, defineAsyncComponent } from 'vue';
+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';
 
-export default defineComponent({
-	components: {
-		XContainer,
-		XBlocks: defineAsyncComponent(() => import('../page-editor.blocks.vue')),
-	},
+const XBlocks = defineAsyncComponent(() => import('../page-editor.blocks.vue'));
 
-	inject: ['getPageBlockList'],
+const props = withDefaults(defineProps<{
+	value: any,
+	hpml: any
+}>(), {
+	value: {
+		title: null,
+		children: []
+	}
+});
 
-	props: {
-		value: {
-			required: true
-		},
-		hpml: {
-			required: true,
-		},
-	},
+const getPageBlockList = inject<(any) => any>('getPageBlockList');
 
-	data() {
-		return {
-		};
-	},
+async function rename() {
+	const { canceled, result: title } = await os.inputText({
+		title: 'Enter title',
+		default: props.value.title
+	});
+	if (canceled) return;
+	props.value.title = title;
+}
 
-	created() {
-		if (this.value.title == null) this.value.title = null;
-		if (this.value.children == null) this.value.children = [];
-	},
+async function add() {
+	const { canceled, result: type } = await os.select({
+		title: i18n.ts._pages.chooseBlock,
+		groupedItems: getPageBlockList()
+	});
+	if (canceled) return;
 
-	mounted() {
-		if (this.value.title == null) {
-			this.rename();
-		}
-	},
+	const id = uuid();
+	props.value.children.push({ id, type });
+}
 
-	methods: {
-		async rename() {
-			const { canceled, result: title } = await os.inputText({
-				title: 'Enter title',
-				default: this.value.title
-			});
-			if (canceled) return;
-			this.value.title = title;
-		},
-
-		async add() {
-			const { canceled, result: type } = await os.select({
-				title: this.$ts._pages.chooseBlock,
-				groupedItems: this.getPageBlockList()
-			});
-			if (canceled) return;
-
-			const id = uuid();
-			this.value.children.push({ id, type });
-		},
+onMounted(() => {
+	if (props.value.title == null) {
+		rename();
 	}
 });
 </script>
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 b989dce0ac..ded57cf304 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
@@ -11,33 +11,19 @@
 </XContainer>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 /* eslint-disable vue/no-mutating-props */
-import { defineComponent } from 'vue';
+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 * as os from '@/os';
 
-export default defineComponent({
-	components: {
-		XContainer, MkSwitch, MkInput
-	},
-
-	props: {
-		value: {
-			required: true
-		},
-	},
-
-	data() {
-		return {
-		};
-	},
-
-	created() {
-		if (this.value.name == null) this.value.name = '';
-	},
+withDefaults(defineProps<{
+	value: any
+}>(), {
+	value: {
+		name: ''
+	}
 });
 </script>
 
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 b25ac38d51..1e269ae58c 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
@@ -11,31 +11,17 @@
 </XContainer>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 /* eslint-disable vue/no-mutating-props */
-import { defineComponent } from 'vue';
+import { } from 'vue';
 import XContainer from '../page-editor.container.vue';
 import MkInput from '@/components/form/input.vue';
-import * as os from '@/os';
 
-export default defineComponent({
-	components: {
-		XContainer, MkInput
-	},
-
-	props: {
-		value: {
-			required: true
-		},
-	},
-
-	data() {
-		return {
-		};
-	},
-
-	created() {
-		if (this.value.name == null) this.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 f23a8ded90..e0ebe68dda 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
@@ -9,31 +9,17 @@
 </XContainer>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 /* eslint-disable vue/no-mutating-props */
-import { defineComponent } from 'vue';
+import { } from 'vue';
 import XContainer from '../page-editor.container.vue';
-import * as os from '@/os';
 
-export default defineComponent({
-	components: {
-		XContainer
-	},
-
-	props: {
-		value: {
-			required: true
-		},
-	},
-
-	data() {
-		return {
-		};
-	},
-
-	created() {
-		if (this.value.text == null) this.value.text = '';
-	},
+withDefaults(defineProps<{
+	value: any
+}>(), {
+	value: {
+		text: ''
+	}
 });
 </script>
 
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 f61f0cb1b7..1bb4aaa543 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
@@ -11,32 +11,18 @@
 </XContainer>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 /* eslint-disable vue/no-mutating-props */
-import { defineComponent } from 'vue';
+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 * as os from '@/os';
 
-export default defineComponent({
-	components: {
-		XContainer, MkTextarea, MkInput
-	},
-
-	props: {
-		value: {
-			required: true
-		},
-	},
-
-	data() {
-		return {
-		};
-	},
-
-	created() {
-		if (this.value.name == null) this.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 bbabe28488..dca7de8df9 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
@@ -9,31 +9,17 @@
 </XContainer>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 /* eslint-disable vue/no-mutating-props */
-import { defineComponent } from 'vue';
+import { } from 'vue';
 import XContainer from '../page-editor.container.vue';
-import * as os from '@/os';
 
-export default defineComponent({
-	components: {
-		XContainer
-	},
-
-	props: {
-		value: {
-			required: true
-		},
-	},
-
-	data() {
-		return {
-		};
-	},
-
-	created() {
-		if (this.value.text == null) this.value.text = '';
-	},
+withDefaults(defineProps<{
+	value: any
+}>(), {
+	value: {
+		text: ''
+	}
 });
 </script>
 

From b70473ed60f64d97c0758f864043b850a5728770 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Mon, 20 Jun 2022 00:33:46 +0900
Subject: [PATCH 08/90] feat: Add Badge Image to Push Notification (#8012)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix

* nanka iroiro

* wip

* wip

* fix lint

* fix loginId

* fix

* refactor

* refactor

* remove follow action

* clean up

* Revert "remove follow action"

This reverts commit defbb416480905af2150d1c92f10d8e1d1288c0a.

* Revert "clean up"

This reverts commit f94919cb9cff41e274044fc69c56ad36a33974f2.

* remove fetch specification

* renoteの条件追加

* apiFetch => cli

* bypass fetch?

* fix

* refactor: use path alias

* temp: add submodule

* remove submodule

* enhane: unison-reloadに指定したパスに移動できるように

* null

* null

* feat: ログインするアカウントのIDをクエリ文字列で指定する機能

* null

* await?

* rename

* rename

* Update read.ts

* merge

* get-note-summary

* fix

* swパッケージに

* add missing packages

* fix getNoteSummary

* add webpack-cli

* :v:

* remove plugins

* sw-inject分離したがテストしてない

* fix notification.vue

* remove a blank line

* disconnect intersection observer

* disconnect2

* fix notification.vue

* remove a blank line

* disconnect intersection observer

* disconnect2

* fix

* :v:

* clean up config

* typesを戻した

* backend/src/web/index.ts

* notification-badges

* add scripts

* change create-notification.ts

* Update packages/client/src/components/notification.vue

Co-authored-by: Acid Chicken (硫酸鶏) <root@acid-chicken.com>

* disconnect

* oops

* Failed to load the script unexpectedly回避
sw.jsとlib.tsを分離してみた

* truncate notification

* Update packages/client/src/ui/_common_/common.vue

Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>

* clean up

* clean up

* refactor

* キャッシュ対策

* Truncate push notification message

* fix

* クライアントがあったらストリームに接続しているということなので通知しない判定の位置を修正

* components/drive-file-thumbnail.vue

* components/drive-select-dialog.vue

* components/drive-window.vue

* merge

* fix

* Service Workerのビルドにesbuildを使うようにする

* return createEmptyNotification()

* fix

* fix

* i18n.ts

* update

* :v:

* remove ts-loader

* fix

* fix

* enhance: Service Workerを常に登録するように

* pollEnded

* pollEnded

* URLをsw.jsに戻す

* clean up

* fix lint

* changelog

* alpha-test

* also with twemoji

* add isMimeImage function

* catch

* Colour => Color

* char2file => char2filePath

* Update autocomplete.vue

* remove clone?

Co-authored-by: Acid Chicken (硫酸鶏) <root@acid-chicken.com>
Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>
---
 CHANGELOG.md                                  |   1 +
 .../assets/notification-badges/LICENSE        |   5 ++
 .../backend/assets/notification-badges/at.png | Bin 0 -> 1752 bytes
 .../assets/notification-badges/check.png      | Bin 0 -> 577 bytes
 .../clipboard-check-solid.png                 | Bin 0 -> 1402 bytes
 .../assets/notification-badges/clock.png      | Bin 0 -> 1131 bytes
 .../assets/notification-badges/comments.png   | Bin 0 -> 1134 bytes
 .../notification-badges/id-card-alt.png       | Bin 0 -> 844 bytes
 .../assets/notification-badges/null.png       | Bin 0 -> 174 bytes
 .../assets/notification-badges/plus.png       | Bin 0 -> 507 bytes
 .../assets/notification-badges/poll-h.png     | Bin 0 -> 689 bytes
 .../notification-badges/quote-right.png       | Bin 0 -> 772 bytes
 .../assets/notification-badges/reply.png      | Bin 0 -> 930 bytes
 .../assets/notification-badges/retweet.png    | Bin 0 -> 798 bytes
 .../assets/notification-badges/user-plus.png  | Bin 0 -> 991 bytes
 packages/backend/src/misc/is-mime-image.ts    |   8 +++
 .../backend/src/server/proxy/proxy-media.ts   |  49 ++++++++++++++--
 packages/backend/src/server/web/index.ts      |  44 ++++++++++++++
 .../client/src/components/autocomplete.vue    |  12 +---
 .../client/src/components/global/emoji.vue    |   9 +--
 packages/client/src/scripts/twemoji-base.ts   |  11 ++++
 .../sw/src/scripts/create-notification.ts     |  54 +++++++++++++++++-
 packages/sw/src/scripts/twemoji-base.ts       |  12 ++++
 packages/sw/src/scripts/url.ts                |  13 +++++
 24 files changed, 197 insertions(+), 21 deletions(-)
 create mode 100644 packages/backend/assets/notification-badges/LICENSE
 create mode 100644 packages/backend/assets/notification-badges/at.png
 create mode 100644 packages/backend/assets/notification-badges/check.png
 create mode 100644 packages/backend/assets/notification-badges/clipboard-check-solid.png
 create mode 100644 packages/backend/assets/notification-badges/clock.png
 create mode 100644 packages/backend/assets/notification-badges/comments.png
 create mode 100644 packages/backend/assets/notification-badges/id-card-alt.png
 create mode 100644 packages/backend/assets/notification-badges/null.png
 create mode 100644 packages/backend/assets/notification-badges/plus.png
 create mode 100644 packages/backend/assets/notification-badges/poll-h.png
 create mode 100644 packages/backend/assets/notification-badges/quote-right.png
 create mode 100644 packages/backend/assets/notification-badges/reply.png
 create mode 100644 packages/backend/assets/notification-badges/retweet.png
 create mode 100644 packages/backend/assets/notification-badges/user-plus.png
 create mode 100644 packages/backend/src/misc/is-mime-image.ts
 create mode 100644 packages/sw/src/scripts/twemoji-base.ts
 create mode 100644 packages/sw/src/scripts/url.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5853b982a7..01b179f13f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -15,6 +15,7 @@ You should also include the user name that made the change.
 - Server: Add rate limit to i/notifications @tamaina
 - Client: Improve files page of control panel @syuilo
 - Improve player detection in URL preview @mei23
+- Add Badge Image to Push Notification #8012 @tamaina
 
 ### Bugfixes
 - Server: Fix GenerateVideoThumbnail failed @mei23
diff --git a/packages/backend/assets/notification-badges/LICENSE b/packages/backend/assets/notification-badges/LICENSE
new file mode 100644
index 0000000000..841c4c682b
--- /dev/null
+++ b/packages/backend/assets/notification-badges/LICENSE
@@ -0,0 +1,5 @@
+Font Awesome Icons
+-------------------------
+
+Ⓒ Font Awesome
+CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)
diff --git a/packages/backend/assets/notification-badges/at.png b/packages/backend/assets/notification-badges/at.png
new file mode 100644
index 0000000000000000000000000000000000000000..d1492856de2b2f837a24a439eaa13631283aa87a
GIT binary patch
literal 1752
zcmV;}1}FK6P)<h;3K|Lk000e1NJLTq003YB003YJ1^@s6;+S_h000J`Nkl<Zc%1EB
zZL#Yt5Pl>?LL^iI5{?8U)IlUvLL^)XNQeX^M8dg02-7r82>U@2diu=lyfgQmv+Nhk
zvJeV<@kJ(D05<?X6IlTF8QJOI%|u@?(I6PG1Mm;P0AK|0%OpSX>F{;TCR&6jc90o6
zm!d;%2k3TLGze*9KzW1bIK-Az_DZ+`c;J{w=cKEyoa*Po;JSuiqX$B2tR4-5GG`l<
zOFb%eM1!!f))MhKj;IDVTw`(7CXWg#Cxg$4`Yr0TjHQiFN;!Kp;6iIdgODT7Hp&@f
z<>r&2LD<L~q3no|hlgp*$3#8CF4|51|L9qG7h92u8-l{6jO`GVyCFEbA<EYxMCb$M
zivmlOO^h4#BW=X9EkHGP4jP1xX|F8z;ZA6w8~Fpu89jwN^k=XsEp&sB8nhz*j^ho#
zgn{m?FeQc65cDdBUqWjGIik>p?XDnPj|<h$8_>{m)E3G@zUZD-t}&o78~$kuBQgGn
zP<_-0X(v~#w{+1RP(cH02NEZUQ;{Se4$xm{8$54FnCZW*@)&E7IHBVX+Jc{YJmkiY
z8>igc5wSf{YQ}M$FoGE*y<kAD5#nLJgKXV#c;A`EL!xen?$|aM*Cr3DA#MWYISWrT
zycdj{Qrv*<(0)T!j*KIS8G-BRjxxvugR;#s2Yw;3R!SNsuk13s1#kLOr&%rM2y5w-
z(}MT8hT#~6I>nAWN08E5<Tl_1X`5ph4&!c*@eC!;5sq>I5Y{YpJ8|lMkNoH_agI=$
zwu%Z)u<mZm97Dj|#ic=Aksql|=+tZS<CLBr`O#lX&Zk7|4}+)OV#Y~7o6HvI7`(4Q
zLxyfz`wMb}=2kwOD7gydl-50wr`uvg^<-|pyXI?(HbXyZfUTxA!w@c~<xnE}9YSQr
zZ^Jt1ol`F<r>E60_`YQhYW~md@M%WB+c8Lq{Y7qpLFH?f45;}(C;ezee>}v`g_hHE
z7T^eK`hLqE)X2#(h}I1QYIoHrjQb1PHvv>#?UDi2gL}DA(#}o_nhA|P2W4zW<oy!B
zEkn3=M<9)>9ppod89IgWDKn3HTGq|~*f50KgERuk2N(-ztUoPbJgUQA96%M;?+C-~
zsBQ|#fHVbC7GQwB8GF&sDhqdX^sPbafSx!Wb;jHIA6sSNr1_s3eQPj68K^VR6ZyZa
zFI0o=EsniVdCB4%VTCeKOJ6E~Gyh|42S^uSOH_Uholu6BFcv4>y_E5m_{V#@V5tK%
z?vZ-I_|z0gb@p3@M_n{sLFIoT|G+`I08?)@Q+L5{_ETx6&TzH^q&J!=YY?a6d*g42
z4E7vw=63|G!uXUF=rs7N^s{G>&VY_!fTbQ9J)kyoJZ`F6<xgdjYQ{;spgz+8OLW3<
zf02KmpZnd!=K4Z4S}IL&1Y45LG(?0(^Y0h=6%cow*-USm2QnHDH07SSHA>^<IzV!t
zHOZT*M5<e96%Aq&hA_}Sf=s2L8)R!tm*A~>!HBb{r^w^^)Z`r@ShNj4r+%S}f&9I@
z-S#@iX#FaufZFbVZaH2{kF3(x5t*i@YkvU)UWKwZb{&Jc-QcBlCR{st5Ki_uX~-w|
z)qEpPgGMmgDxNWr-QZR8olp(qv%0#LIoK9zyppbAe3LSA3fvOXCiwXSmA5#z02rX~
z<vvG&RGn)MQr=GEolyXc2-S|t(+n+Bh*W!`q)|q^&%h&7pF@G?5jeA89))WtaeFzX
zyi*?Q5W`2b0>R7<Z;j4nyfM8u<ux01Bc8819`XbacN*tB))Bjy)EVKxdvDH8<L%9g
zaiU?;zsK|EPE_(c1(K$kCyZkdjN0S%_1kEOxe>I`Ak6Yerx-W~9b`H33k6Wq#GF*>
z;=c}Q2`Sncei2|GuOcMZO}>CmNvCn~wgl!UUk_a1cLBDbwZpUr%bkM3dh2|^1uLTl
zx}SmCL#2O(!M-jY7j=T>neTw(Ue=ANhBA}gL9&rxpyz;jwe&!lis^>1r}0eLx&ktZ
zQTp|(*mr4(ay64|7J5Hll6z6?aI`q~?APP9N7Lc;hkOQ<3ks`Zu|oI@M~|1^$7r^G
zuSiDCQU&p;HzAy+kxHYscR}~)k{hxdXx-UAi*irhE{z-NyC*uLjvpH$!JrODIMn}>
zD@j~&M#RJRk2d@g4MKiB^8&BK2jqAS7?gc_avtdp`Um_UhaWs0;=wn#$Me&s%iemZ
u1ucSOES`_GMv4!(8a#j2>TB#T_VFKL7<q$9mbgIx0000<MNUMnLSTZmT0^h^

literal 0
HcmV?d00001

diff --git a/packages/backend/assets/notification-badges/check.png b/packages/backend/assets/notification-badges/check.png
new file mode 100644
index 0000000000000000000000000000000000000000..baeb76babfa3f9f8dff025f7a007a0be3eeb69b8
GIT binary patch
literal 577
zcmeAS@N?(olHy`uVBq!ia0vp^2_VeD1|%QND7Ro>VB+v}aSW-L^Y%`>FSDaa>qq5<
zLK7NVv>7=q9Gz4{n1CD>l@O=O8~4~xeA;eYT=uPQf68I$xj*?Bojg>5#(+S*=%l_$
z^VZA1U%OoMiNZ^jmzzGx^gh>mxZtUFoo=0-{<h0+@8mx+c2ckJJkQblSKUt8q{zF*
zZAW1DkDd?yx{sfKw)w&){94d{etYBh8A0cN)M)>5eE&n-^LgU-nP)nHjQquVCX)j{
z{&d`vl=5fukM5W3iyzzb?Yyeek?&HY{772xe#Z~DBj!r`E?)WQeChI6rsdb>*ED24
zmf!Lx|8(WkR=>4zOE#~3Jio5u;Po*5YbVz|&aZ6|`ncW7Y2}Y->4hnO*7gKg?W=Cd
zeC&OC{VZL6i>j8DkL^pWUaSyY*0=s#`+M6%Up_8<8n0X>x92*??hgI0@(Yf0?C#Xx
z`k(PmbxZ8g^W42Ve7Xh8#O+;=cW;qO-2O56PQinF%5UuIy7Kv+NiFpGBXa8;$J0m4
zC)BrW`WSq|-09~JO_Ms7NA*Hd)=VG6TaNWQ{Lydu^YGL$f5rL(ASLpfa{h>XV%L?n
zZ~c>a8YKJxEW8UWtPc`?2oipDyR{=<Txnly$B#1noNM=aT7EFgZrLMy?(|nnuU*A*
d9FQ2ycq{w-4nxDepeZ{+0-mmZF6*2UngEjs688WA

literal 0
HcmV?d00001

diff --git a/packages/backend/assets/notification-badges/clipboard-check-solid.png b/packages/backend/assets/notification-badges/clipboard-check-solid.png
new file mode 100644
index 0000000000000000000000000000000000000000..d8cdfa9da4562d7a247ab7c734933be48bc68fc6
GIT binary patch
literal 1402
zcmV-=1%>*FP)<h;3K|Lk000e1NJLTq003YB003YJ1^@s6;+S_h000F+Nkl<ZcwX(D
zfpOD75JgD`(1FuIr~p#|p#qW)LIsct2o>N|03Bc|ARXWipaa;SIn5YH((PZJbbFfJ
znHvZ4Wu5-py*tU4a`vpPcrM+&l=e;<e%_?+ALJG7hqRrvKdl_rStA{V*&n1`CF675
zz7xUc1SO}f`ui3DY{j9kO5;z>d@KL)t*XPBoqGpxlQJI_V2$fEELpdobvw@hreuCI
zmEaWsGX9rw*y+nyOv*1k&Iw)tV8Z=axb}DQei)8ig+~C|?0-lZjqJWiEobhzw<_=m
z02A-05hr2ztu!n(kK;=I@g+mxeb06|XtVy_BLFNpak4cOV<uudY(ErOl45D<COiW8
zIWnAJ*ui8v7MQ#@0|Hdf3pegdM?3-;GjJz;&P}8kzA%jS#cBa;<!E0?!w`V%n{whb
zmY|v;WDLO6<Ojfmw7s-@X{g9aF|`7^YcxX{H>q<y8*4H+H;0t$6BYuPlgu#%0G56@
zSY-T?F?M|?Hwn+tPb3BUgsPy!3ILh^T^b-P9XMcQ-R@+^+msM<4S!?Dsj1A~?X3Xj
z9A~vaF&`X~80ObVhU30!=BFpeW&u#6%(YNz>*&kh765Zxr>SjRsr_SE%q^4u+m{8v
z*oji918Mbr=()fGVC+PxRpUzadl3MCOZ9f8??WXuB~FF~fbq<sJf*||KvlDpr<6DV
z1OSx-l|@uiQ{t!q6<W$uN*n+JfXac&A}XmVaa4c`E#)aC4gdi_<v?W-mDH3tDnNyn
z@{|$>fB>L!pt6WcYDydxph8P|N{ItN08lwlSwtl@C5{SEp`|>f!~q}xs2r#)qLP{t
zudo8}A$sX=(ovpL;uQga@wd`;((rT1Z~9T5QsR{WfZ^BD@KwU&C<TG?loGE1z>xVJ
zh!PMePbqQZ0CMJ+f<Spni5mu>HNOM|%2P_*C;-;{4gzj@y)rCmDNiYJg8;1NcfMP`
z2TOTMi5mkj)qEVT<$g2DQ%c+rfD-281kLim5Xw_Z+z5bD=3@@P-9T(mo>Jl&0F=HI
zP}_W1M0rYy3j^56`{B8657KU=jXj`4lZ774ZwA1f^z`%w=dJu7Zhf_c7xS9{&}V*U
zx&?wK^W6g&Gv5NioB6H*Xv}9Icr@QF0LFX`1h3}11OT(nrQwy0zB$3O`7QzAgO4eX
z2|I=W^UY5tN%V1sYdy)*BoMW<r^IRRmfKWO0S8U*2Q+|y>oTvU;k>~bbDQt70?;X#
zmV4Hl)l}_vOPKE#Ky3(1neQ3^I=4^5h&F3W=$16!J%FVlz<kUdm_wEdYF?$p=?E;7
z@ae%XQ3)`=#$(kePbqOh0CQJDE%Tcgf{v?Uj!LL$escgyS3+&`n*>k_f(P@P1uzwY
z7xSA2V1=+rs~x<02x?(Ni3_iShRk9nW^d*<UjZEy4Fr$ouLeMFIPz-#ssIc@@NE9-
z0CW&=N6SIlRvJD`@iO7|&12NON{JVmgoh?)e5P>WVVRTZ1LY|tt_+|7?;pEJc}j@`
zfGP(lPbqN#2mmSvDvPM3ro>SJDzucRlsEtc0F?ukMO0E#;-~->TFO&OoOb_PUUB_B
zqTd0^Q%aon7k|WOIQ0(lD|`)89Tos39%!NNU}Hl1i^vuLxE_Nlh<NJ2B7evYyS3aw
zzII?cIY3;srNUAH*a0SCRKbSY+j_<3n^3F(U?qm48h_5#8^%d@>`VdB8DV{_i#H=J
z{n^V#822r=Up?-x1OU9xrL;HFwksc&U^E&&9J-f=RnMgO2d_sLaN2p@od5s;07*qo
IM6N<$g3e8FJOBUy

literal 0
HcmV?d00001

diff --git a/packages/backend/assets/notification-badges/clock.png b/packages/backend/assets/notification-badges/clock.png
new file mode 100644
index 0000000000000000000000000000000000000000..9323f8f3070dd4ef538f7df33d54975c449d7cf6
GIT binary patch
literal 1131
zcmV-x1eE)UP)<h;3K|Lk000e1NJLTq003YB003YJ1^@s6;+S_h000CsNkl<Zc%1EB
z(UGhm5bO{Pfe;LV5H<uuxC{tkLokFFf+1`OhF}Q3546tRLq!&u2JNc;ySi$+br?`w
z;KmJ4C;&Bp$HWG}&%|b;o~TlbD+v{>i3Y$w051RofH8pm^gqn>KX0r+!CuK7!p-*O
z9EeIVE^1V;W#ff&4c}r18~mkE19;;6EBz>+DEzL_;56P<qSPr42%&;CUfS5BY>{~o
zbB$-e;`f;498p7da*fT`G^Q+|k^fb{#z#Dx&cP4LHGigw=2k>hu#=XwIjPviu`LcN
z*w#(jl+=8Ipi8P@_gkdRkm3Nr$+<@P_1>4sL#S}=EB})N5|*Q@*8DxbzA^O(q_!0X
z*fw|Tc30EiNQKb(nivYn!I?~Sp0;(-Kz7nq2eej#I!BzaVrJ-gjzUuFh=`q01zX#s
z2XqwDdiwy)PDs|%oC6pUVLnihFFiR2@b&tjB^X4`0gSL~rXbV=;!6l%MBs$n5(qCP
zfWvoz0#EHPA%GDF=Yp0%aA^UwzQQZ;UHv5lFv9aLVCnly48Ut$&=CkNHGqCkG+XOg
zS^y(<$`EV$DJcN6C7St3*HK98UE}7OfU)~2Er1cW)BFQXAnYmuXqRB-`d?ZA#wD1!
z{+AYja~|jkgk2?o!6o<(KyW;YK+x3!czZ^m2?Sj&0KF8e2?Sj&fMzMSArN%60N!>+
z8v;R>4uE|TR$>5VDYnD_*vIr1KtmuXb^rkPdF8hf^dJzlN9PWrCm27K&@2V!5Wu%@
z8*73wtOmd)&czr9A1d&aq_;B!(gzxR*dK9v2Zmrg>QfZ+)3BMrFS<G)ea89EoW^o%
z?y>Q<cpp+HK6{rK_6IUc#y$v_dhDG`1Y@hVH;8Xq(<M^Rflrr+99q#&4v6<X(3HBJ
zrzmsigw|;MJYGfWi%+cy=@JWx$rr*(QtDHno1Zi=35A@&kdo9U*66JNGjc9NOPZ}g
zE+DaEs`o_og2u(<-WRPNNWb{>`l3ohU|uW^aCaOEGAn<x>HLIJ%FvQe*sX{8)A+rR
z4&@U7z<Ee7cOKfuQUroaqdwq2fcq|p$)H_aMIgKs>O;;ikkbw+E5CY%QDR4wl2JbF
z%Km;0GfjZsPV@wW$&EeYJ+GiXz|F|D75G=s1Ov;3O_0ML$nCME1UI*vW8iL0*V!Us
z-QPkkudt+K=o7ghuzu7@iXuPcaCb((=8OHh62mv8FKhk`rZ<jLlHx~vmbg-P)FI)7
zdjtmZ=A6wZNX?(2A#c(d9B|?aH#Vf-y^qZo2qxPQ<i3?X|8Nj>$=O4VJfAOj$ml0*
zeV~y?5XBk)3C25Ozy*x|L<L)4B^PlWZ0md}<6Y3OMs!GXrQfFS;DO&jdW0L^Pygcy
x8*<j&j5HK%FwI1>;LpSc*68^~+#5Hx@gEPy`5mNRh?f8W002ovPDHLkV1iQt4c7nw

literal 0
HcmV?d00001

diff --git a/packages/backend/assets/notification-badges/comments.png b/packages/backend/assets/notification-badges/comments.png
new file mode 100644
index 0000000000000000000000000000000000000000..bc8a1c35b4423bc08af88c3c72d4d29c6e81c6bf
GIT binary patch
literal 1134
zcmV-!1d;oRP)<h;3K|Lk000e1NJLTq003YB003YJ1^@s6;+S_h000CvNkl<Zc%1E>
z>yfK4428cED1j1E0wtsbN=OHkuq9B!mOu%VKnawv_lMzz&0?N@2%|G|e(X#(v5$o;
z%ZdUDg+ifFC=?2XLZMJ7!XX24-~l{=V)#3YHlhTPVT64F4bTD|&;vg!?1$HW17Da$
z(#2W9D0qbtdyCL}*#R|XQFTEEWEjyq+zY<OZ_J|K5(UOR_^|Z7Y=P3}WF?`%OgOga
zHdfwd9vK<N;$sWE^@(`+ks%HW;`sQp{PLhhP-K{mF1C<o*mKd1I>W^8u?2L+!l^o*
zk#kL#v&Pb$ME>v~P4P#*+)3pgIWpq<TRsV?`TRAC3sWoNixQHZ8`<2T;2y5$liv=s
zJB<w4sRiGBo|o_(D&mU}ll^%K&!Ho}2(cM$Lw;@?VCt;T3V9S)&-1useoo5$$hl|a
zV`K0Wa_L~uDKU6R`f@bzR2V!OsvQkH71|b{!d&b)kCb!+{>!;im#L>{aky7>0wyet
z#f(n2Q2q2mXaw|^b7_gCvr@;2)b^e8KQ<OKI+Yv#ujRlwq7g7*X`B;rPqbLBX#NYe
zfC)>YEehHju5T`dxk`~$D7F@zjzo*ilJFxm5%-(6lW=$N{WdLvMnZ4SML^lf_q07#
z|4|E=xCHjhAHrOCiNzdKAz<<nSXuOOl`UAj_SEyheE6B+)<s)$NreCbV$$X!O2?nG
zxF6g#G1p_aOdp=X>WXp!V#J^=q2?<@?`#X;^FyW5=6ZbBNiA;3wE$s4u*3c}SKk?e
z)vM1=fIvRkW4FQ(USRR+GbioS@sjwi!_FmI-B8L2x{l?XeaN}bW=wO^wf?mWlh73+
zv-?1*XMu+0z7jFYbN(F4Qmhf`ST8+~HSb>=aZXyUr^oo%wQed^<Z%LNd=Y!fhHV8@
zvBm%Y1RUA<r;~gU|J=|If^HFBiovy`czY(fWL;0fpQ0P~HEt@A<7yjNx7<<mz1^vv
zyt`((8gM_n-;wrZ4`f*Vlr_Bl;5fN<7-%&N+Eq)iC&v0J%z`$U#h)6$*duNn!`LgX
z!rWIJ8B2yNtDjQzxAo6rY@sIkrZ4w3`IvYhr-j-QS1Tp1gt1d&gM8sfRz8FXg=uTd
zD~UeRR{kOmpPh9p{PiNemGu|Aqn!p5?bPh=tb0X@v3_YWc_@krJu~8`FG90+qMSn%
z#1|zLTZFitPu!slW~uN?1X8>R`dk3<NVyQ;2SJ<f5=!C=b?c`9((YGUIn>E3GSV%N
z6ulXLq9nbip>ruvC{)B3&LwNN@`Qtg%m0zhFrK3!bo4fvXHXKS#X^s<-Z?+McOk?d
z&bFe&Z(^^*oKXt4r4mZE8^>ir)2$dU{=Yc(gmk<M0bZQ5&}<mb(pZwZmb77dsZ;P?
zq+;NMa6g|oj$`_>jS7WAp-?Ck3WY+UP}~Ur0DhV)Yg-p@t^fc407*qoM6N<$f)7F>
A<^TWy

literal 0
HcmV?d00001

diff --git a/packages/backend/assets/notification-badges/id-card-alt.png b/packages/backend/assets/notification-badges/id-card-alt.png
new file mode 100644
index 0000000000000000000000000000000000000000..67e1410e34cb2a6ec1a17ebd89dc15fdfff87205
GIT binary patch
literal 844
zcmeAS@N?(olHy`uVBq!ia0vp^2_VeD1|%QND7Ro>U>5dtaSW-L^LFmT-qi*IEz4QF
z7PL%p;M8msy42_mV`?-CRoLg;bL9{)Y>V9d+f#Y&BIh&jCdjn$vP-lj0@0cPrV7Rk
zhCTHcv~#juf)1G1G8o8B*nR6qY{kQf$GR=dQ!MJ9oDYqAVP732_jhvK^sot*`Ahg0
z?A_9IW+TIi2!<3L1|u;B$*YVu5BzUNG00vrPg<wCj_1LfU%xiwx65WvlzJ)daEp0H
zcB$<pp)(mg2`nFG&bCN?n#q{+`oHzUBVXmM#Tvpn3;OHcGFmizznRa-;=h;G;qn2q
z1-1==EsWd_aSWvy5nh(u3H1!&PV49AHSp}M+r?<~<=0EL6Bk}DmsW6IKR?%D_Y1Zy
z-Ff&Z1vlnDSK`?1lP`0BSfbRx|L5#1rqecu-*2eBr`Nz(SCh8(WATl}X4|<IG|Nl;
zo65dUQg2@=1M@feuihdP{(o=GOYr`>UN(M#P=Nb1#wCB8SgU{OpJq7K;kG`IV}<%^
zhFvSn@;?g(gqty%6x!Z9!ns0wHp8nGV)?<`AlA8xb<VmA^sX{`#L8ag)p^<T{)-vY
zt5a$XitCQg_SmcAXue_DjMw(rAxy7M>NVIcx(Kv%H=BU$few?`jOq*ea+oCw-z<K?
z_^y0GzTkn59hWajeVRSrmqGbYq|eU9A6Zl4|DG{x@Z|lo_r7M2(w`W`v(0h345^Ex
zFX-)Jd<&;$WH;<Dxo}|q|LZ@hJ09rY-n~9|_J>(Vj8%3uzCZSMW?gmLGpir%Ra<^=
zzuuW#o%x;h1>3O;CzP2Z4EG3Ep0{gYyKY|Z<iwFR+x{S5<F?0(i|4OQINyJ%?2V9#
zzNqOGR)wc8<|pjq*08os{_;UXUV|&4WzGMrkcRCZi&-xmj6a+n#KM0@+G30BY#jzc
zkgGN-S4&-CENTxkUBUX~+}Z32&I`m7+-6tR#PY6Sk+`%>J?#pUPv(V^=lK(3=B=Nw
z+U|yBPRzmm%2G?}`}UjpeqSv=p_KK80ncHBlF$6IQhO)62ZpQ%<`M=^S3j3^P6<r_
DXhU;v

literal 0
HcmV?d00001

diff --git a/packages/backend/assets/notification-badges/null.png b/packages/backend/assets/notification-badges/null.png
new file mode 100644
index 0000000000000000000000000000000000000000..be1384df1318b7714fe9625efb9520f6274f7a65
GIT binary patch
literal 174
zcmeAS@N?(olHy`uVBq!ia0vp^2_VeD1|%QND7OGooCO|{#S9F5he4R}c>anMprB-l
zYeY$Kep*R+Vo@qXd3m{BW?pu2a$-TMUVc&f>~}U&Kt<M`E{-7;bKV{_WCZdKE%@r6
h%Mrf-$Rq?Bt}{$XU|^K@)wl{$>gnp|vd$@?2>|`|Cv*S+

literal 0
HcmV?d00001

diff --git a/packages/backend/assets/notification-badges/plus.png b/packages/backend/assets/notification-badges/plus.png
new file mode 100644
index 0000000000000000000000000000000000000000..05362c122bd2162d5c5ed95c7e8f2d40d9e7eff4
GIT binary patch
literal 507
zcmeAS@N?(olHy`uVBq!ia0vp^2_VeD1|%QND7Ro>U_9jM;uumf=k48txwjnz94=})
zs_syken99-qgNoOR-$(Rr;elQ4faWPGaJgLKZxi3$NX%X#N?k=5^iRl6I47e-Pou6
zNKo*6$B&ycEB~4bZ%*=?9?`d}{L9|Tb^F8TM)mFYW&Gxw+V$;mzVX~W#ag!W|K-Xp
z&!2lj<}YI$koI{0aeJUL^8p?PV}>&f2Bb1JR6Q?j*?dNZ-A*X8R_3A3<-Z<B9)I^=
zx$jq&RKiak<Ivc;r_2BE$gEN^;@?m)4M;ob&&^$Rkvn~M)|W#!mr3m{*tXJ5e-2dW
zGlO^f%w_q`@0oSxrFuPmtDN+cQ)6$%w4I^%{`pHL{PdqMBx^6Yw?(k3|9@!pm;W)>
z^}k6y;5YrX=UQ~E@<Drv(kp>iPLS>mnCG9pu;2H8Vsv};7j_L$APM%n<N;})&VBy>
zkN+1fjC!p+QHb5P@4}<G?n*1=+&w0#JpIaT{mt&>^TzTwz({5AboFyt=akR{03trk
AK>z>%

literal 0
HcmV?d00001

diff --git a/packages/backend/assets/notification-badges/poll-h.png b/packages/backend/assets/notification-badges/poll-h.png
new file mode 100644
index 0000000000000000000000000000000000000000..3b7ded66597679a8d19ef9eccc09834fa7a4f222
GIT binary patch
literal 689
zcmeAS@N?(olHy`uVBq!ia0vp^2_VeD1|%QND7Ro>V5;zRaSW-L^LDOd;o|@S7wIMi
zjwVGN7Uu|#!~~8;Ale|nbWngr(bA)R&8e-?w)K<d*<W4%D%SY#a^d4$bA%Fl439}9
z|2wbGV9xNK!Hhv(O#ZmuJ;psuJ6xv!)}Qvcdo{mR_xg>d_RpCf1U?AZyfd->s6^7i
ze~XveomrFj=hXjW`qq#4U5vKhA;xk4sP@ikhTpqoOF!t{J9(G+Lw5bLh4)$enGWuj
z&~lL7HQVIXfxAlr+25)4S{0aQUTNIzxtQ;cuT<%Syh|&X%O|_Z?wD;7*=)|B|6`f8
ztNOL%X;n9ua_w+!;}6=%GHcDj?35o0-UivHnL<{Gzhmmsv~J+~dMMVxFqJ)EVcZUG
zjb(2bKuYSQe;u8E;)7$2V%ewVUJ(p`+|KgzU4~nL;fBekKh)oMq;6FDAJwFm{Xy4g
z564W^3n{#D%7?or{8Z<ay7?e!2ZN!WLl3vWW2PfO=4J5>Zf)WVkKPVAD!Wl9DyHLX
z#G&##k&9329AFE;>b(?Rxt+?}7Cl>jXPMRmG0D0`&YVD>UO(|cSkykp+LtkMh4>35
zweYeBI#;+$7$<967l^%L-PLe%s%%9skNv~#3z^gI^n7f+vEZVR*8lU@Ls)MxVE6+w
zEM?c(X?s3y|MBFfLOK5d{=(BHUktW;H$I5vu|2_iV|H-+{JYkBzv}CJ_<Y3ePM<8_
z!{axPO_#5GS$S;lfrV)w`Gxj<o?m!0?#SW;irPD6tt*{BmG1>57axB+#(+&H7xe92
SI188*89ZJ6T-G@yGywp^oij%O

literal 0
HcmV?d00001

diff --git a/packages/backend/assets/notification-badges/quote-right.png b/packages/backend/assets/notification-badges/quote-right.png
new file mode 100644
index 0000000000000000000000000000000000000000..0fa483765481dd43d88a470c45614c6a782c748b
GIT binary patch
literal 772
zcmeAS@N?(olHy`uVBq!ia0vp^2_VeD1|%QND7Ro>U^?yT;uumf=k46Y!rKl4ZuT5a
z2^?(-9Bl#|i9iyF0yx?dIGQH>n~-+t<BqN0N~){%@0xG^f9Yj)+|fdj$Z3;QJV7Ym
z&2#dS-Ai0AP5-QO`+w=wl7I7ex4rG&d-UGf(*8A!F4rS3EoMGx-#_o;UFF@(F4q@)
zjaH3%H}#F6L9A^}^}pOaYxy_f3cK`VPwbi9{WNfSsjqCup4m6Q-Qd1@^>Oi&&r|;B
z94N8168IRwuuMBD>3u}!x4U;mbtiB)^i0jTAH$Gxh_#4u!bYLDv$-35b~xxU7=<mW
zEoPj+DSm?0;h5K!e4xlfrkxBYfEv%TI;h1ch%-oPU)%>2Y2kjtq>!w7%UqmcW<ev+
zs5LIX-@VKF=+@f7ny`yw`iH4H441EdR=wjc*6`A*T;btHhLG!PnJ3=jb|~e2^*`&8
zP(bY7y))MyW10|K%pPPa-tcBu&LLY_OVb}KWB;=#XR%yv6*O&nd8k9`U`e7&Z^ABv
zMQ#SM5`oGy^m<kZ`iQ$-;aJ9vU70}aa<57J`GLynj=PR|Eh-1H7AwRCt6sbr4b=2H
z&~wYT-kAQT7pp3-A37O)g=5j`Z@j_YdC@N!mu0Wh*qQUtw&BIEH5xycCYPUE>-jyl
zxkm4AN8K;SlHN}{r7AD}^7a>5Z1qNJTfNPz--iXVxZQ02mfZfjux!4?N1Mg2K=ZUe
zy-GU2SpH(@@8$bS_t<%}T^6mJQt_{=?`2oj<k{b~<$c1h1U~w^Oa8K`;>|~E)R(Q^
z`Xojvl405ErB7nt`t3;E73DS0OO^XT$<_&bR{mX?<}-c!lai1P0zT8HKUnnD#z$m^
z9{<6}jmxL2285rzym9}N-<Ai(3}P=k?mQa3K_F!M*Nn(5`<Q+N*w=g1v#xsm*|Xwe
uRpO=E$-DC6jonVjK3HC+3Qm9wKX|7khxaGNYvce^H-o3EpUXO@geCwhN@g?w

literal 0
HcmV?d00001

diff --git a/packages/backend/assets/notification-badges/reply.png b/packages/backend/assets/notification-badges/reply.png
new file mode 100644
index 0000000000000000000000000000000000000000..77021f71a7af666a33db652aaaf997508200c769
GIT binary patch
literal 930
zcmV;T16}-yP)<h;3K|Lk000e1NJLTq003YB003YJ1^@s6;+S_h000ANNkl<Zc%1E>
zO_i)L5QVP<Bp{(BL;@0!fCD771SGTsB(#J`K*G!-@HVd}ou5i7!2Qm-yIEA~hDs%Y
z9)J)+2qA>%(gBzNya8AMF94%vKzE{pOZd+Ry%giR1rN9x|0(&0X0_-pjsdX2pZuTw
zZ-_7x!jgZ82r?l&@iah?4#0x=<kJ8Fe4P#rC`?GFLjwvSk$f7E$bh&`hXx1|+h)=L
zAvyq0$R(ZzM3CF*(0~j&04vHQp9XwEs?(tX2^h#Owlp9D=}w0RL{OsBp#cHp9H`}J
zg1e#|;Wl_?*JD?|$JP}Ybt9B)Go@wsSQoe(wGqy+UN$B5sL|=v)(ftb4ru(zF{roL
zYHEWsW!}f!1T{OI7Nz=nOv=^aRkgvDt3D^8p=fnFXHn6o;!K^6wk%wg5aWuSP7S@`
zI;kv}{Cq9ZS>KVoI=s8yaFaQhp2;tw;F81zx17ch18f6<URhsFpaJFOEk{cO0bX4j
zJUi&VfdKEI^)CYeck-tl;2q@MH9r~%@apoGqQeB+K%iIF;xhnnhjH%)0==rfJ_QHd
zpq0}cVgOM8)swp@>Z?!Qij`3x;Q`y!0-9qC09=Q}Q&Tx5eSEIjAsuhM^}8N$Pv!u3
z;5EU`ss(P>X%&+jGo~a~g<x|S;0!v<(N6p!lQXEZznnYlW6&(C*%$hA#b8S^K<89=
zkqF*Y3bqEd--lYI0<X~_)#QOXYsFhK=pJP|Bn{@s7-MCn11|Zcq!z{#Q?82r5Y<v3
zSWO1VkEf^sfc)dDjr4e`j7xInw1CCQ3;^V=I$OX%Hu<(z;8*&=CdsEjv<>}6?m=EF
zjF2;6tsA-{^{TTKI>;IDtQ`A4QV#N3LTbaA{ZU5_u~(ffA$1bmSC0EX48j7nO7Z>0
zjQr$RU4VUr9OTVv(S1f@f1_6aKjG_;UTE)U1SAYFwSx{}f-5&0T#GiLz2pP=1~gNC
z&Wb^v0j-tP(=j4F`5W4Ns!v7E+k%|^0;KK(IQxZ2Jx<~57s4Vw`4*i0BBUP1sh;~>
ziIfW_{x38^Vmlx%yu!pRz#CY4#EDse+4Tq$Q~wvG7%xp|{a?YlUxbkQ&*T^6Tm5J9
z3*$532`0Zd2A^9^(ccawenz-bbKKgo&nJWsLI{cG7r>uR1s%&lUjP6A07*qoM6N<$
Ef-jw?4FCWD

literal 0
HcmV?d00001

diff --git a/packages/backend/assets/notification-badges/retweet.png b/packages/backend/assets/notification-badges/retweet.png
new file mode 100644
index 0000000000000000000000000000000000000000..dc6106048107a8459bd6efc921835d9bf2e25d9b
GIT binary patch
literal 798
zcmeAS@N?(olHy`uVBq!ia0vp^2_VeD1|%QND7Ro>V0!B5;uumf=k4s=jh_qzTKid4
z6c!3;Efkv2z^oF(Ikf@IpK#%~@^<6e%HJDjr)=h(lb-hfV9qz2DgBceS_GUp6p;x@
z-iB+{g7-a`AMhp2xq7wKHQt3e;lTcf!A^?X4lQR%R(TlQBslAXrlPUo!{r_sj9(by
zCfe#||A>w@3_8?5@xr4S2lYD*)ZKqXaqj#zRpavZ8*?6Ji@lLuwXBZivrD4jK9@r$
zH>`L4y2+w6qD_Bdf#JK_3`W&M(>*Fgq7E-)nZolwSS3aH0Z^UO`z^~BG1(lR?(u@*
z&c8O@NLLma#hOkQ{xhs|7SzwL)tskXD|&Xdx1@&gGbXFV$(28N5B2k(e9XAFrTUb^
zOhfSkQL~wc=Eu#IVr+P)B^|_e>P+IghRPoeaSRI6KZJ%eY>+=w{lj4n149K@)z+2F
zsY^N<gs(MMD&7&RP!DtP(f9A-V3^i?lS>7{;heEUsioTa$F|LGT@9V5*Ic(uJUdN9
zTtT(HL23a*y2b%Xu7WnEISbL44Z??Xr%QkPU+XQp;N{XqVT`)}?tl61!jaV}!Z>%+
z^e!pZEfMz%|Hf4Mt!daBcTy-zxZv2ovhS*#hD=h9>)l^DY~`%5KdH&<rtKi~FJ$_Z
z#w_6t-@{+bV(De@{h@q_z1Re(z(MXzOjF1K$zNx4!745|iJ#;6*;D@Fu>6D{jxn<t
z6k<L_af)r-a@wUg<beOfU5VAv-P>Dq9x@j(#$C-{bJyEx+lR)-+!7oA#_rzIvgRRk
zDThT@%bSPHUpatcrRSrXJbyUEGR0YMj_@?#mS5q0pyTh{@|~(P+W24amsMO-n4>wJ
z<?{!1lked+-okFHT9O_zKU`iie@DXVS?4w$mHE{@HNfPLzq@whLurMn2R`uLoP6K|
z_Xf4bhvHBETD%v&t=`cgDC_hga@#cY6#41qA12wRZPvS3xb1=Ip25@A&t;ucLK6TV
C7*n4B

literal 0
HcmV?d00001

diff --git a/packages/backend/assets/notification-badges/user-plus.png b/packages/backend/assets/notification-badges/user-plus.png
new file mode 100644
index 0000000000000000000000000000000000000000..9d376d04d666f856fc927a82cf78ddadc4629e8b
GIT binary patch
literal 991
zcmV<510ei~P)<h;3K|Lk000e1NJLTq003kF003kN1^@s6aN?Cz000A~Nkl<Zc%1E>
zYq6_95QJL-5|Ds|NH`LZ5C=$z1SCWP5|DrdB;@{BwnF6sS=gQJ3Cvg3Rrzs}Gc(P;
zcr1Wn7=~dOhG7_nVHidM;11vcpaakY7$@}ro&ehEZ%R&x=cfSB;9dOJ4t3LajRbfj
z_L{J!N8a$y#SOrKG)Bxd0{F|9#yPknU8`7=bz=b(a09ZW5uf9Wu|ZBV%#<(Ok>3oj
zdxrdeia*GY8Q)|B{X_w`zF?a1f;%7#xY-Wd46jBwSM?O&cU7OQq?AlpJDOUDwGy}~
zC)<FfR&q&7@Qc5uQY>r5FxMU5bjfu|3x46(^c2inEl=<Zzot$wZ?$Mx46f;t1N#7e
z;mwd4nihmhlBC9Z4>5o=snFbI4T5=Bfic_!V_2jM42+>(Fz?Xmej^yeB9Fkp7-|Lc
zZUSS-Zb%&%7(<f9P-{pL7#Ks9VBTsC0d!7%CC3jyxgi?I5$QsxHbh&umE!`HYD4w}
zc!t&i{D2_^bc`kA6pJ+K4FTM$lx;{YoTKL_3<0<UeC%EEH@Fpe6QC|IrY`XJ8VF9)
z8P`Z!#C26UZVV4m9g)K(IZf#hKW+>e<K2?zC4(kI0uQ7a#Mws7CCUvlUBQU7&6{mP
zHbXqA?oJuuT3+g@E!%|bh5+wp4Tl3k_S1Juq1f0aPz;$<!L^zv+@S1D8mG_x(dY)U
zXKg)f6X=F$<4CKO&?RroSfU2sj29HF>@`s#d{x~ctiaul-^|f9pOyx8#H&KBA-<V^
zZXz=e>WOrVxB_mm*?#;VKRffA)<|~&stoZa9Jxu(o3m$Ow`M|!dboq7Jd)@JDhw&$
zl1q6i<nyS0OrO_UTZ~c~Lp4Og2&Pi(CPXu&fbM5Nj;cr8`7nwh74)oNB{bmpz@Oca
z3g_vfwlw0HDOnBCvQ0)#Q}%XW*$g@BnDI^B&N^j#J|xunGivYbYwN~{5ec54(za&_
zLuG6cQ=;*v>D+3gtC)xq);he(s7fZH0lyGh)JE1a2?O|r&?5R})X*v1l~l$QG#1S}
z`mjXZNvK^3>dK<-By`1<`8Rb@6^&$A3F^wC4(w)#GDFzOYZVQ4;#x(6ow!!fU?;9s
zG}wu26%BUcT1A7MxK`1)(hUuvlHT5F6T4FQzuKsZMsiyS=<1@sI>}BjzNKQ%crDv2
zv8C$mJh@*8sZAXenK7q^8|cqI`<lNhyiQOz!!QiPFbu;m48t%^$3I+7t|l<5&T9Yw
N002ovPDHLkV1n>o#FPL4

literal 0
HcmV?d00001

diff --git a/packages/backend/src/misc/is-mime-image.ts b/packages/backend/src/misc/is-mime-image.ts
new file mode 100644
index 0000000000..8993ede33a
--- /dev/null
+++ b/packages/backend/src/misc/is-mime-image.ts
@@ -0,0 +1,8 @@
+import { FILE_TYPE_BROWSERSAFE } from '@/const.js';
+
+const dictionary = {
+	'safe-file': FILE_TYPE_BROWSERSAFE,
+	'sharp-convertible-image': ['image/jpeg', 'image/png', 'image/gif', 'image/apng', 'image/vnd.mozilla.apng', 'image/webp', 'image/svg+xml'],
+};
+
+export const isMimeImage = (mime: string, type: keyof typeof dictionary): boolean => dictionary[type].includes(mime);
diff --git a/packages/backend/src/server/proxy/proxy-media.ts b/packages/backend/src/server/proxy/proxy-media.ts
index 48887bf12f..ca036e8fdf 100644
--- a/packages/backend/src/server/proxy/proxy-media.ts
+++ b/packages/backend/src/server/proxy/proxy-media.ts
@@ -1,13 +1,16 @@
 import * as fs from 'node:fs';
 import Koa from 'koa';
-import { serverLogger } from '../index.js';
+import sharp from 'sharp';
 import { IImage, convertToWebp } from '@/services/drive/image-processor.js';
 import { createTemp } from '@/misc/create-temp.js';
 import { downloadUrl } from '@/misc/download-url.js';
 import { detectType } from '@/misc/get-file-info.js';
 import { StatusError } from '@/misc/fetch.js';
 import { FILE_TYPE_BROWSERSAFE } from '@/const.js';
+import { serverLogger } from '../index.js';
+import { isMimeImage } from '@/misc/is-mime-image.js';
 
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 export async function proxyMedia(ctx: Koa.Context) {
 	const url = 'url' in ctx.query ? ctx.query.url : 'https://' + ctx.params.url;
 
@@ -23,14 +26,50 @@ export async function proxyMedia(ctx: Koa.Context) {
 		await downloadUrl(url, path);
 
 		const { mime, ext } = await detectType(path);
+		const isConvertibleImage = isMimeImage(mime, 'sharp-convertible-image');
 
 		let image: IImage;
 
-		if ('static' in ctx.query && ['image/png', 'image/gif', 'image/apng', 'image/vnd.mozilla.apng', 'image/webp', 'image/svg+xml'].includes(mime)) {
+		if ('static' in ctx.query && isConvertibleImage) {
 			image = await convertToWebp(path, 498, 280);
-		} else if ('preview' in ctx.query && ['image/jpeg', 'image/png', 'image/gif', 'image/apng', 'image/vnd.mozilla.apng', 'image/svg+xml'].includes(mime)) {
+		} else if ('preview' in ctx.query && isConvertibleImage) {
 			image = await convertToWebp(path, 200, 200);
-		}	else if (['image/svg+xml'].includes(mime)) {
+		} else if ('badge' in ctx.query) {
+			if (!isConvertibleImage) {
+				// 画像でないなら404でお茶を濁す
+				throw new StatusError('Unexpected mime', 404);
+			}
+
+			const mask = sharp(path)
+				.resize(96, 96, {
+					fit: 'inside',
+					withoutEnlargement: false,
+				})
+				.greyscale()
+				.normalise()
+				.linear(1.75, -(128 * 1.75) + 128) // 1.75x contrast
+				.flatten({ background: '#000' })
+				.toColorspace('b-w');
+
+			const stats = await mask.clone().stats();
+
+			if (stats.entropy < 0.1) {
+				// エントロピーがあまりない場合は404にする
+				throw new StatusError('Skip to provide badge', 404);
+			}
+
+			const data = sharp({
+				create: { width: 96, height: 96, channels: 4, background: { r: 0, g: 0, b: 0, alpha: 0 } },
+			})
+				.pipelineColorspace('b-w')
+				.boolean(await mask.png().toBuffer(), 'eor');
+
+			image = {
+				data: await data.png().toBuffer(),
+				ext: 'png',
+				type: 'image/png',
+			};
+		}	else if (mime === 'image/svg+xml') {
 			image = await convertToWebp(path, 2048, 2048, 1);
 		} else if (!mime.startsWith('image/') || !FILE_TYPE_BROWSERSAFE.includes(mime)) {
 			throw new StatusError('Rejected type', 403, 'Rejected type');
@@ -48,7 +87,7 @@ export async function proxyMedia(ctx: Koa.Context) {
 	} catch (e) {
 		serverLogger.error(`${e}`);
 
-		if (e instanceof StatusError && e.isClientError) {
+		if (e instanceof StatusError && (e.statusCode === 302 || e.isClientError)) {
 			ctx.status = e.statusCode;
 		} else {
 			ctx.status = 500;
diff --git a/packages/backend/src/server/web/index.ts b/packages/backend/src/server/web/index.ts
index 2feee72be7..be95becb68 100644
--- a/packages/backend/src/server/web/index.ts
+++ b/packages/backend/src/server/web/index.ts
@@ -11,6 +11,7 @@ import Router from '@koa/router';
 import send from 'koa-send';
 import favicon from 'koa-favicon';
 import views from 'koa-views';
+import sharp from 'sharp';
 import { createBullBoard } from '@bull-board/api';
 import { BullAdapter } from '@bull-board/api/bullAdapter.js';
 import { KoaAdapter } from '@bull-board/koa';
@@ -140,6 +141,49 @@ router.get('/twemoji/(.*)', async ctx => {
 	});
 });
 
+router.get('/twemoji-badge/(.*)', async ctx => {
+	const path = ctx.path.replace('/twemoji-badge/', '');
+
+	if (!path.match(/^[0-9a-f-]+\.png$/)) {
+		ctx.status = 404;
+		return;
+	}
+
+	const mask = await sharp(
+		`${_dirname}/../../../node_modules/@discordapp/twemoji/dist/svg/${path.replace('.png', '')}.svg`,
+		{ density: 1000 },
+	)
+		.resize(488, 488)
+		.greyscale()
+		.normalise()
+		.linear(1.75, -(128 * 1.75) + 128) // 1.75x contrast
+		.flatten({ background: '#000' })
+		.extend({
+			top: 12,
+			bottom: 12,
+			left: 12,
+			right: 12,
+			background: '#000',
+		})
+		.toColorspace('b-w')
+		.png()
+		.toBuffer();
+
+	const buffer = await sharp({
+		create: { width: 512, height: 512, channels: 4, background: { r: 0, g: 0, b: 0, alpha: 0 } },
+	})
+		.pipelineColorspace('b-w')
+		.boolean(mask, 'eor')
+		.resize(96, 96)
+		.png()
+		.toBuffer();
+
+	ctx.set('Content-Security-Policy', 'default-src \'none\'; style-src \'unsafe-inline\'');
+	ctx.set('Cache-Control', 'max-age=2592000');
+	ctx.set('Content-Type', 'image/png');
+	ctx.body = buffer;
+});
+
 // ServiceWorker
 router.get(`/sw.js`, async ctx => {
 	await send(ctx as any, `/sw.js`, {
diff --git a/packages/client/src/components/autocomplete.vue b/packages/client/src/components/autocomplete.vue
index 1e4a4506f7..ae708026e0 100644
--- a/packages/client/src/components/autocomplete.vue
+++ b/packages/client/src/components/autocomplete.vue
@@ -35,6 +35,7 @@
 <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';
@@ -42,7 +43,6 @@ import { MFM_TAGS } from '@/scripts/mfm-tags';
 import { defaultStore } from '@/store';
 import { emojilist } from '@/scripts/emojilist';
 import { instance } from '@/instance';
-import { twemojiSvgBase } from '@/scripts/twemoji-base';
 import { i18n } from '@/i18n';
 
 type EmojiDef = {
@@ -55,16 +55,10 @@ type EmojiDef = {
 
 const lib = emojilist.filter(x => x.category !== 'flags');
 
-const char2file = (char: string) => {
-	let codes = Array.from(char).map(x => x.codePointAt(0)?.toString(16));
-	if (!codes.includes('200d')) codes = codes.filter(x => x !== 'fe0f');
-	return codes.filter(x => x && x.length).join('-');
-};
-
 const emjdb: EmojiDef[] = lib.map(x => ({
 	emoji: x.char,
 	name: x.name,
-	url: `${twemojiSvgBase}/${char2file(x.char)}.svg`
+	url: char2filePath(x.char),
 }));
 
 for (const x of lib) {
@@ -74,7 +68,7 @@ for (const x of lib) {
 				emoji: x.char,
 				name: k,
 				aliasOf: x.name,
-				url: `${twemojiSvgBase}/${char2file(x.char)}.svg`
+				url: char2filePath(x.char),
 			});
 		}
 	}
diff --git a/packages/client/src/components/global/emoji.vue b/packages/client/src/components/global/emoji.vue
index 0075e0867d..23cb649f7a 100644
--- a/packages/client/src/components/global/emoji.vue
+++ b/packages/client/src/components/global/emoji.vue
@@ -1,4 +1,4 @@
-<template>
+char2filePath<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>
@@ -8,7 +8,7 @@
 <script lang="ts">
 import { computed, defineComponent, ref, watch } from 'vue';
 import { getStaticImageUrl } from '@/scripts/get-static-image-url';
-import { twemojiSvgBase } from '@/scripts/twemoji-base';
+import { char2filePath } from '@/scripts/twemoji-base';
 import { defaultStore } from '@/store';
 import { instance } from '@/instance';
 
@@ -45,10 +45,7 @@ export default defineComponent({
 		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) {
-				let codes = Array.from(char.value).map(x => x.codePointAt(0).toString(16));
-				if (!codes.includes('200d')) codes = codes.filter(x => x !== 'fe0f');
-				codes = codes.filter(x => x && x.length);
-				return `${twemojiSvgBase}/${codes.join('-')}.svg`;
+				return char2filePath(char.value);
 			} else {
 				return defaultStore.state.disableShowingAnimatedImages
 					? getStaticImageUrl(customEmoji.value.url)
diff --git a/packages/client/src/scripts/twemoji-base.ts b/packages/client/src/scripts/twemoji-base.ts
index cd50311b15..638aae3284 100644
--- a/packages/client/src/scripts/twemoji-base.ts
+++ b/packages/client/src/scripts/twemoji-base.ts
@@ -1 +1,12 @@
 export const twemojiSvgBase = '/twemoji';
+
+export function char2fileName(char: string): string {
+	let codes = Array.from(char).map(x => x.codePointAt(0)?.toString(16));
+	if (!codes.includes('200d')) codes = codes.filter(x => x !== 'fe0f');
+	codes = codes.filter(x => x && x.length);
+	return codes.join('-');
+}
+
+export function char2filePath(char: string): string {
+	return `${twemojiSvgBase}/${char2fileName(char)}.svg`;
+}
diff --git a/packages/sw/src/scripts/create-notification.ts b/packages/sw/src/scripts/create-notification.ts
index 6d7ba7d524..7c95e8e41f 100644
--- a/packages/sw/src/scripts/create-notification.ts
+++ b/packages/sw/src/scripts/create-notification.ts
@@ -9,6 +9,10 @@ import { pushNotificationDataMap } from '@/types';
 import getUserName from '@/scripts/get-user-name';
 import { I18n } from '@/scripts/i18n';
 import { getAccountFromId } from '@/scripts/get-account-from-id';
+import { char2fileName } from '@/scripts/twemoji-base';
+import * as url from '@/scripts/url';
+
+const iconUrl = (name: string) => `/static-assets/notification-badges/${name}.png`;
 
 export async function createNotification<K extends keyof pushNotificationDataMap>(data: pushNotificationDataMap[K]) {
 	const n = await composeNotification(data);
@@ -44,6 +48,7 @@ async function composeNotification<K extends keyof pushNotificationDataMap>(data
 					return [t('_notification.youWereFollowed'), {
 						body: getUserName(data.body.user),
 						icon: data.body.user.avatarUrl,
+						badge: iconUrl('user-plus'),
 						data,
 						actions: userDetail.isFollowing ? [] : [
 							{
@@ -57,6 +62,7 @@ async function composeNotification<K extends keyof pushNotificationDataMap>(data
 					return [t('_notification.youGotMention', { name: getUserName(data.body.user) }), {
 						body: data.body.note.text || '',
 						icon: data.body.user.avatarUrl,
+						badge: iconUrl('at'),
 						data,
 						actions: [
 							{
@@ -70,6 +76,7 @@ async function composeNotification<K extends keyof pushNotificationDataMap>(data
 					return [t('_notification.youGotReply', { name: getUserName(data.body.user) }), {
 						body: data.body.note.text || '',
 						icon: data.body.user.avatarUrl,
+						badge: iconUrl('reply'),
 						data,
 						actions: [
 							{
@@ -83,6 +90,7 @@ async function composeNotification<K extends keyof pushNotificationDataMap>(data
 					return [t('_notification.youRenoted', { name: getUserName(data.body.user) }), {
 						body: data.body.note.text || '',
 						icon: data.body.user.avatarUrl,
+						badge: iconUrl('retweet'),
 						data,
 						actions: [
 							{
@@ -96,6 +104,7 @@ async function composeNotification<K extends keyof pushNotificationDataMap>(data
 					return [t('_notification.youGotQuote', { name: getUserName(data.body.user) }), {
 						body: data.body.note.text || '',
 						icon: data.body.user.avatarUrl,
+						badge: iconUrl('quote-right'),
 						data,
 						actions: [
 							{
@@ -112,9 +121,44 @@ async function composeNotification<K extends keyof pushNotificationDataMap>(data
 					}];
 
 				case 'reaction':
-					return [`${data.body.reaction} ${getUserName(data.body.user)}`, {
+					let reaction = data.body.reaction;
+					let badge: string | undefined;
+
+					if (reaction.startsWith(':')) {
+						// カスタム絵文字の場合
+						const customEmoji = data.body.note.emojis.find(x => x.name === reaction.substr(1, reaction.length - 2));
+						if (customEmoji) {
+							if (reaction.includes('@')) {
+								reaction = `:${reaction.substr(1, reaction.indexOf('@') - 1)}:`;
+							}
+
+							const u = new URL(customEmoji.url);
+							if (u.href.startsWith(`${origin}/proxy/`)) {
+								// もう既にproxyっぽそうだったらsearchParams付けるだけ
+								u.searchParams.set('badge', '1');
+								badge = u.href;
+							} else {
+								const dummy = `${u.host}${u.pathname}`;	// 拡張子がないとキャッシュしてくれないCDNがあるので
+								badge = `${origin}/proxy/${dummy}?${url.query({
+									url: u.href,
+									badge: '1'
+								})}`;
+							}
+						}
+					} else {
+						// Unicode絵文字の場合
+						badge = `/twemoji-badge/${char2fileName(reaction)}.png`;
+					}
+
+
+					if (badge ? await fetch(badge).then(res => res.status !== 200).catch(() => true) : true) {
+						badge = iconUrl('plus');
+					}
+
+					return [`${reaction} ${getUserName(data.body.user)}`, {
 						body: data.body.note.text || '',
 						icon: data.body.user.avatarUrl,
+						badge,
 						data,
 						actions: [
 							{
@@ -128,12 +172,14 @@ async function composeNotification<K extends keyof pushNotificationDataMap>(data
 					return [t('_notification.youGotPoll', { name: getUserName(data.body.user) }), {
 						body: data.body.note.text || '',
 						icon: data.body.user.avatarUrl,
+						badge: iconUrl('poll-h'),
 						data,
 					}];
 
 				case 'pollEnded':
 					return [t('_notification.pollEnded'), {
 						body: data.body.note.text || '',
+						badge: iconUrl('clipboard-check-solid'),
 						data,
 					}];
 
@@ -141,6 +187,7 @@ async function composeNotification<K extends keyof pushNotificationDataMap>(data
 					return [t('_notification.youReceivedFollowRequest'), {
 						body: getUserName(data.body.user),
 						icon: data.body.user.avatarUrl,
+						badge: iconUrl('clock'),
 						data,
 						actions: [
 							{
@@ -158,12 +205,14 @@ async function composeNotification<K extends keyof pushNotificationDataMap>(data
 					return [t('_notification.yourFollowRequestAccepted'), {
 						body: getUserName(data.body.user),
 						icon: data.body.user.avatarUrl,
+						badge: iconUrl('check'),
 						data,
 					}];
 
 				case 'groupInvited':
 					return [t('_notification.youWereInvitedToGroup', { userName: getUserName(data.body.user) }), {
 						body: data.body.invitation.group.name,
+						badge: iconUrl('id-card-alt'),
 						data,
 						actions: [
 							{
@@ -191,6 +240,7 @@ async function composeNotification<K extends keyof pushNotificationDataMap>(data
 			if (data.body.groupId === null) {
 				return [t('_notification.youGotMessagingMessageFromUser', { name: getUserName(data.body.user) }), {
 					icon: data.body.user.avatarUrl,
+					badge: iconUrl('comments'),
 					tag: `messaging:user:${data.body.userId}`,
 					data,
 					renotify: true,
@@ -198,6 +248,7 @@ async function composeNotification<K extends keyof pushNotificationDataMap>(data
 			}
 			return [t('_notification.youGotMessagingMessageFromGroup', { name: data.body.group.name }), {
 				icon: data.body.user.avatarUrl,
+				badge: iconUrl('comments'),
 				tag: `messaging:group:${data.body.groupId}`,
 				data,
 				renotify: true,
@@ -217,6 +268,7 @@ export async function createEmptyNotification() {
 			t('_notification.emptyPushNotificationMessage'),
 			{
 				silent: true,
+				badge: iconUrl('null'),
 				tag: 'read_notification',
 			}
 		);
diff --git a/packages/sw/src/scripts/twemoji-base.ts b/packages/sw/src/scripts/twemoji-base.ts
new file mode 100644
index 0000000000..638aae3284
--- /dev/null
+++ b/packages/sw/src/scripts/twemoji-base.ts
@@ -0,0 +1,12 @@
+export const twemojiSvgBase = '/twemoji';
+
+export function char2fileName(char: string): string {
+	let codes = Array.from(char).map(x => x.codePointAt(0)?.toString(16));
+	if (!codes.includes('200d')) codes = codes.filter(x => x !== 'fe0f');
+	codes = codes.filter(x => x && x.length);
+	return codes.join('-');
+}
+
+export function char2filePath(char: string): string {
+	return `${twemojiSvgBase}/${char2fileName(char)}.svg`;
+}
diff --git a/packages/sw/src/scripts/url.ts b/packages/sw/src/scripts/url.ts
new file mode 100644
index 0000000000..c7f2b7c1e7
--- /dev/null
+++ b/packages/sw/src/scripts/url.ts
@@ -0,0 +1,13 @@
+export function query(obj: {}): string {
+	const params = Object.entries(obj)
+		.filter(([, v]) => Array.isArray(v) ? v.length : v !== undefined)
+		.reduce((a, [k, v]) => (a[k] = v, a), {} as Record<string, any>);
+
+	return Object.entries(params)
+		.map((e) => `${e[0]}=${encodeURIComponent(e[1])}`)
+		.join('&');
+}
+
+export function appendQuery(url: string, query: string): string {
+	return `${url}${/\?/.test(url) ? url.endsWith('?') ? '' : '&' : '?'}${query}`;
+}

From 30a39a296dcea701deb1cf5ac323aa1e6bcee13f Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Mon, 20 Jun 2022 13:20:28 +0900
Subject: [PATCH 09/90] =?UTF-8?q?refactor:=20=E3=83=81=E3=83=A3=E3=83=83?=
 =?UTF-8?q?=E3=83=88=E3=83=AB=E3=83=BC=E3=83=A0=E3=82=92Composition=20API?=
 =?UTF-8?q?=E5=8C=96=20(#8850)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* pick form

* pick message

* pick room

* fix lint

* fix scroll?

* fix scroll.ts

* fix directives/sticky-container

* update global/sticky-container.vue

* fix, :art:

* test.1
---
 package.json                                  |   2 +-
 .../components/global/sticky-container.vue    |  92 ++-
 .../client/src/directives/sticky-container.ts |   2 +
 .../pages/messaging/messaging-room.form.vue   | 460 ++++++-------
 .../messaging/messaging-room.message.vue      |  52 +-
 .../src/pages/messaging/messaging-room.vue    | 623 ++++++++----------
 packages/client/src/scripts/scroll.ts         |  15 +-
 7 files changed, 585 insertions(+), 661 deletions(-)

diff --git a/package.json b/package.json
index a035745727..fd565f7cec 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "misskey",
-	"version": "12.111.1",
+	"version": "12.111.1-test.1",
 	"codename": "indigo",
 	"repository": {
 		"type": "git",
diff --git a/packages/client/src/components/global/sticky-container.vue b/packages/client/src/components/global/sticky-container.vue
index 89d397f082..98a7ee9c30 100644
--- a/packages/client/src/components/global/sticky-container.vue
+++ b/packages/client/src/components/global/sticky-container.vue
@@ -1,71 +1,63 @@
 <template>
 <div ref="rootEl">
 	<slot name="header"></slot>
-	<div ref="bodyEl">
+	<div ref="bodyEl" :data-sticky-container-header-height="headerHeight">
 		<slot></slot>
 	</div>
 </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, onMounted, onUnmounted, ref } from 'vue';
+<script lang="ts" setup>
+import { onMounted, onUnmounted } from 'vue';
 
-export default defineComponent({
-	props: {
-		autoSticky: {
-			type: Boolean,
-			required: false,
-			default: false,
-		},
-	},
+const props = withDefaults(defineProps<{
+	autoSticky?: boolean;
+}>(), {
+	autoSticky: false,
+});
 
-	setup(props, context) {
-		const rootEl = ref<HTMLElement>(null);
-		const bodyEl = ref<HTMLElement>(null);
+const rootEl = $ref<HTMLElement>();
+const bodyEl = $ref<HTMLElement>();
 
-		const calc = () => {
-			const currentStickyTop = getComputedStyle(rootEl.value).getPropertyValue('--stickyTop') || '0px';
+let headerHeight = $ref<string | undefined>();
 
-			const header = rootEl.value.children[0];
-			if (header === bodyEl.value) {
-				bodyEl.value.style.setProperty('--stickyTop', currentStickyTop);
-			} else {
-				bodyEl.value.style.setProperty('--stickyTop', `calc(${currentStickyTop} + ${header.offsetHeight}px)`);
+const calc = () => {
+	const currentStickyTop = getComputedStyle(rootEl).getPropertyValue('--stickyTop') || '0px';
 
-				if (props.autoSticky) {
-					header.style.setProperty('--stickyTop', currentStickyTop);
-					header.style.position = 'sticky';
-					header.style.top = 'var(--stickyTop)';
-					header.style.zIndex = '1';
-				}
-			}
-		};
+	const header = rootEl.children[0] as HTMLElement;
+	if (header === bodyEl) {
+		bodyEl.style.setProperty('--stickyTop', currentStickyTop);
+	} else {
+		bodyEl.style.setProperty('--stickyTop', `calc(${currentStickyTop} + ${header.offsetHeight}px)`);
+		headerHeight = header.offsetHeight.toString();
 
-		onMounted(() => {
-			calc();
+		if (props.autoSticky) {
+			header.style.setProperty('--stickyTop', currentStickyTop);
+			header.style.position = 'sticky';
+			header.style.top = 'var(--stickyTop)';
+			header.style.zIndex = '1';
+		}
+	}
+};
 
-			const observer = new MutationObserver(() => {
-				window.setTimeout(() => {
-					calc();
-				}, 100);
-			});
+const observer = new MutationObserver(() => {
+	window.setTimeout(() => {
+		calc();
+	}, 100);
+});
 
-			observer.observe(rootEl.value, {
-				attributes: false,
-				childList: true,
-				subtree: false,
-			});
+onMounted(() => {
+	calc();
 
-			onUnmounted(() => {
-				observer.disconnect();
-			});
-		});
+	observer.observe(rootEl, {
+		attributes: false,
+		childList: true,
+		subtree: false,
+	});
+});
 
-		return {
-			rootEl,
-			bodyEl,
-		};
-	},
+onUnmounted(() => {
+	observer.disconnect();
 });
 </script>
 
diff --git a/packages/client/src/directives/sticky-container.ts b/packages/client/src/directives/sticky-container.ts
index 9610eba4da..3cf813054b 100644
--- a/packages/client/src/directives/sticky-container.ts
+++ b/packages/client/src/directives/sticky-container.ts
@@ -5,8 +5,10 @@ export default {
 		//const query = binding.value;
 
 		const header = src.children[0];
+		const body = src.children[1];
 		const currentStickyTop = getComputedStyle(src).getPropertyValue('--stickyTop') || '0px';
 		src.style.setProperty('--stickyTop', `calc(${currentStickyTop} + ${header.offsetHeight}px)`);
+		if (body) body.dataset.stickyContainerHeaderHeight = header.offsetHeight.toString();
 		header.style.setProperty('--stickyTop', currentStickyTop);
 		header.style.position = 'sticky';
 		header.style.top = 'var(--stickyTop)';
diff --git a/packages/client/src/pages/messaging/messaging-room.form.vue b/packages/client/src/pages/messaging/messaging-room.form.vue
index 8e779c4f39..38bab90502 100644
--- a/packages/client/src/pages/messaging/messaging-room.form.vue
+++ b/packages/client/src/pages/messaging/messaging-room.form.vue
@@ -1,222 +1,222 @@
 <template>
-<div class="pemppnzi _block"
+<div
+	class="pemppnzi _block"
 	@dragover.stop="onDragover"
 	@drop.stop="onDrop"
 >
 	<textarea
-		ref="text"
+		ref="textEl"
 		v-model="text"
-		:placeholder="$ts.inputMessageHere"
+		:placeholder="i18n.ts.inputMessageHere"
 		@keydown="onKeydown"
 		@compositionupdate="onCompositionUpdate"
 		@paste="onPaste"
 	></textarea>
-	<div v-if="file" class="file" @click="file = null">{{ file.name }}</div>
-	<button class="send _button" :disabled="!canSend || sending" :title="$ts.send" @click="send">
-		<template v-if="!sending"><i class="fas fa-paper-plane"></i></template><template v-if="sending"><i class="fas fa-spinner fa-pulse fa-fw"></i></template>
-	</button>
-	<button class="_button" @click="chooseFile"><i class="fas fa-photo-video"></i></button>
-	<button class="_button" @click="insertEmoji"><i class="fas fa-laugh-squint"></i></button>
-	<input ref="file" type="file" @change="onChangeFile"/>
+	<footer>
+		<div v-if="file" class="file" @click="file = null">{{ file.name }}</div>
+		<div class="buttons">
+			<button class="_button" @click="chooseFile"><i class="fas fa-photo-video"></i></button>
+			<button class="_button" @click="insertEmoji"><i class="fas fa-laugh-squint"></i></button>
+			<button class="send _button" :disabled="!canSend || sending" :title="i18n.ts.send" @click="send">
+				<template v-if="!sending"><i class="fas fa-paper-plane"></i></template><template v-if="sending"><i class="fas fa-spinner fa-pulse fa-fw"></i></template>
+			</button>
+		</div>
+	</footer>
+	<input ref="fileEl" type="file" @change="onChangeFile"/>
 </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, defineAsyncComponent } from 'vue';
-import insertTextAtCursor from 'insert-text-at-cursor';
+<script lang="ts" setup>
+import { onMounted, watch } from 'vue';
+import * as Misskey from 'misskey-js';
 import autosize from 'autosize';
+//import insertTextAtCursor from 'insert-text-at-cursor';
+import { throttle } from 'throttle-debounce';
 import { formatTimeString } from '@/scripts/format-time-string';
 import { selectFile } from '@/scripts/select-file';
 import * as os from '@/os';
 import { stream } from '@/stream';
-import { Autocomplete } from '@/scripts/autocomplete';
-import { throttle } from 'throttle-debounce';
+import { defaultStore } from '@/store';
+import { i18n } from '@/i18n';
+//import { Autocomplete } from '@/scripts/autocomplete';
 import { uploadFile } from '@/scripts/upload';
 
-export default defineComponent({
-	props: {
-		user: {
-			type: Object,
-			requird: false,
-		},
-		group: {
-			type: Object,
-			requird: false,
-		},
-	},
-	data() {
-		return {
-			text: null,
-			file: null,
-			sending: false,
-			typing: throttle(3000, () => {
-				stream.send('typingOnMessaging', this.user ? { partner: this.user.id } : { group: this.group.id });
-			}),
-		};
-	},
-	computed: {
-		draftKey(): string {
-			return this.user ? 'user:' + this.user.id : 'group:' + this.group.id;
-		},
-		canSend(): boolean {
-			return (this.text != null && this.text !== '') || this.file != null;
-		},
-		room(): any {
-			return this.$parent;
+const props = defineProps<{
+	user?: Misskey.entities.UserDetailed | null;
+	group?: Misskey.entities.UserGroup | null;
+}>();
+
+let textEl = $ref<HTMLTextAreaElement>();
+let fileEl = $ref<HTMLInputElement>();
+
+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 });
+});
+
+let draftKey = $computed(() => props.user ? 'user:' + props.user.id : 'group:' + props.group?.id);
+let canSend = $computed(() => (text != null && text !== '') || file != null);
+
+watch([$$(text), $$(file)], saveDraft);
+
+async function onPaste(ev: ClipboardEvent) {
+	if (!ev.clipboardData) return;
+
+	const clipboardData = ev.clipboardData;
+	const items = clipboardData.items;
+
+	if (items.length === 1) {
+		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;
+			if (formatted) upload(pastedFile, formatted);
 		}
-	},
-	watch: {
-		text() {
-			this.saveDraft();
-		},
-		file() {
-			this.saveDraft();
-		}
-	},
-	mounted() {
-		autosize(this.$refs.text);
-
-		// TODO: detach when unmount
-		// TODO
-		//new Autocomplete(this.$refs.text, this, { model: 'text' });
-
-		// 書きかけの投稿を復元
-		const draft = JSON.parse(localStorage.getItem('message_drafts') || '{}')[this.draftKey];
-		if (draft) {
-			this.text = draft.data.text;
-			this.file = draft.data.file;
-		}
-	},
-	methods: {
-		async onPaste(evt: ClipboardEvent) {
-			const items = evt.clipboardData.items;
-
-			if (items.length === 1) {
-				if (items[0].kind === 'file') {
-					const file = items[0].getAsFile();
-					const lio = file.name.lastIndexOf('.');
-					const ext = lio >= 0 ? file.name.slice(lio) : '';
-					const formatted = `${formatTimeString(new Date(file.lastModified), this.$store.state.pastedFileName).replace(/{{number}}/g, '1')}${ext}`;
-					if (formatted) this.upload(file, formatted);
-				}
-			} else {
-				if (items[0].kind === 'file') {
-					os.alert({
-						type: 'error',
-						text: this.$ts.onlyOneFileCanBeAttached
-					});
-				}
-			}
-		},
-
-		onDragover(evt) {
-			const isFile = evt.dataTransfer.items[0].kind === 'file';
-			const isDriveFile = evt.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FILE_;
-			if (isFile || isDriveFile) {
-				evt.preventDefault();
-				evt.dataTransfer.dropEffect = evt.dataTransfer.effectAllowed === 'all' ? 'copy' : 'move';
-			}
-		},
-
-		onDrop(evt): void {
-			// ファイルだったら
-			if (evt.dataTransfer.files.length === 1) {
-				evt.preventDefault();
-				this.upload(evt.dataTransfer.files[0]);
-				return;
-			} else if (evt.dataTransfer.files.length > 1) {
-				evt.preventDefault();
-				os.alert({
-					type: 'error',
-					text: this.$ts.onlyOneFileCanBeAttached
-				});
-				return;
-			}
-
-			//#region ドライブのファイル
-			const driveFile = evt.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FILE_);
-			if (driveFile != null && driveFile !== '') {
-				this.file = JSON.parse(driveFile);
-				evt.preventDefault();
-			}
-			//#endregion
-		},
-
-		onKeydown(evt) {
-			this.typing();
-			if ((evt.which === 10 || evt.which === 13) && (evt.ctrlKey || evt.metaKey) && this.canSend) {
-				this.send();
-			}
-		},
-
-		onCompositionUpdate() {
-			this.typing();
-		},
-
-		chooseFile(evt) {
-			selectFile(evt.currentTarget ?? evt.target, this.$ts.selectFile).then(file => {
-				this.file = file;
+	} else {
+		if (items[0].kind === 'file') {
+			os.alert({
+				type: 'error',
+				text: i18n.ts.onlyOneFileCanBeAttached,
 			});
-		},
-
-		onChangeFile() {
-			this.upload((this.$refs.file as any).files[0]);
-		},
-
-		upload(file: File, name?: string) {
-			uploadFile(file, this.$store.state.uploadFolder, name).then(res => {
-				this.file = res;
-			});
-		},
-
-		send() {
-			this.sending = true;
-			os.api('messaging/messages/create', {
-				userId: this.user ? this.user.id : undefined,
-				groupId: this.group ? this.group.id : undefined,
-				text: this.text ? this.text : undefined,
-				fileId: this.file ? this.file.id : undefined
-			}).then(message => {
-				this.clear();
-			}).catch(err => {
-				console.error(err);
-			}).then(() => {
-				this.sending = false;
-			});
-		},
-
-		clear() {
-			this.text = '';
-			this.file = null;
-			this.deleteDraft();
-		},
-
-		saveDraft() {
-			const drafts = JSON.parse(localStorage.getItem('message_drafts') || '{}');
-
-			drafts[this.draftKey] = {
-				updatedAt: new Date(),
-				data: {
-					text: this.text,
-					file: this.file
-				}
-			};
-
-			localStorage.setItem('message_drafts', JSON.stringify(drafts));
-		},
-
-		deleteDraft() {
-			const drafts = JSON.parse(localStorage.getItem('message_drafts') || '{}');
-
-			delete drafts[this.draftKey];
-
-			localStorage.setItem('message_drafts', JSON.stringify(drafts));
-		},
-
-		async insertEmoji(ev) {
-			os.openEmojiPicker(ev.currentTarget ?? ev.target, {}, this.$refs.text);
 		}
 	}
+}
+
+function onDragover(ev: DragEvent) {
+	if (!ev.dataTransfer) return;
+
+	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';
+	}
+}
+
+function onDrop(ev: DragEvent): void {
+	if (!ev.dataTransfer) return;
+
+	// ファイルだったら
+	if (ev.dataTransfer.files.length === 1) {
+		ev.preventDefault();
+		upload(ev.dataTransfer.files[0]);
+		return;
+	} else if (ev.dataTransfer.files.length > 1) {
+		ev.preventDefault();
+		os.alert({
+			type: 'error',
+			text: i18n.ts.onlyOneFileCanBeAttached,
+		});
+		return;
+	}
+
+	//#region ドライブのファイル
+	const driveFile = ev.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FILE_);
+	if (driveFile != null && driveFile !== '') {
+		file = JSON.parse(driveFile);
+		ev.preventDefault();
+	}
+	//#endregion
+}
+
+function onKeydown(ev: KeyboardEvent) {
+	typing();
+	if ((ev.key === 'Enter') && (ev.ctrlKey || ev.metaKey) && canSend) {
+		send();
+	}
+}
+
+function onCompositionUpdate() {
+	typing();
+}
+
+function chooseFile(ev: MouseEvent) {
+	selectFile(ev.currentTarget ?? ev.target, i18n.ts.selectFile).then(selectedFile => {
+		file = selectedFile;
+	});
+}
+
+function onChangeFile() {
+	if (fileEl.files![0]) upload(fileEl.files[0]);
+}
+
+function upload(fileToUpload: File, name?: string) {
+	uploadFile(fileToUpload, defaultStore.state.uploadFolder, name).then(res => {
+		file = res;
+	});
+}
+
+function send() {
+	sending = true;
+	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;
+	});
+}
+
+function clear() {
+	text = '';
+	file = null;
+	deleteDraft();
+}
+
+function saveDraft() {
+	const drafts = JSON.parse(localStorage.getItem('message_drafts') || '{}');
+
+	drafts[draftKey] = {
+		updatedAt: new Date(),
+		// eslint-disable-next-line id-denylist
+		data: {
+			text: text,
+			file: file,
+		},
+	};
+
+	localStorage.setItem('message_drafts', JSON.stringify(drafts));
+}
+
+function deleteDraft() {
+	const drafts = JSON.parse(localStorage.getItem('message_drafts') || '{}');
+
+	delete drafts[draftKey];
+
+	localStorage.setItem('message_drafts', JSON.stringify(drafts));
+}
+
+async function insertEmoji(ev: MouseEvent) {
+	os.openEmojiPicker(ev.currentTarget ?? ev.target, {}, textEl);
+}
+
+onMounted(() => {
+	autosize(textEl);
+
+	// TODO: detach when unmount
+	// TODO
+	//new Autocomplete(textEl, this, { model: 'text' });
+
+	// 書きかけの投稿を復元
+	const draft = JSON.parse(localStorage.getItem('message_drafts') || '{}')[draftKey];
+	if (draft) {
+		text = draft.data.text;
+		file = draft.data.file;
+	}
+});
+
+defineExpose({
+	file,
+	upload,
 });
 </script>
 
@@ -230,7 +230,7 @@ export default defineComponent({
 		width: 100%;
 		min-width: 100%;
 		max-width: 100%;
-		height: 80px;
+		min-height: 80px;
 		margin: 0;
 		padding: 16px 16px 0 16px;
 		resize: none;
@@ -245,26 +245,16 @@ export default defineComponent({
 		color: var(--fg);
 	}
 
-	> .file {
-		padding: 8px;
-		color: #444;
-		background: #eee;
-		cursor: pointer;
-	}
-
-	> .send {
-		position: absolute;
+	footer {
+		position: sticky;
 		bottom: 0;
-		right: 0;
-		margin: 0;
-		padding: 16px;
-		font-size: 1em;
-		transition: color 0.1s ease;
-		color: var(--accent);
+		background: var(--panel);
 
-		&:active {
-			color: var(--accentDarken);
-			transition: color 0s ease;
+		> .file {
+			padding: 8px;
+			color: var(--fg);
+			background: transparent;
+			cursor: pointer;
 		}
 	}
 
@@ -316,21 +306,39 @@ export default defineComponent({
 		}
 	}
 
-	._button {
-		margin: 0;
-		padding: 16px;
-		font-size: 1em;
-		font-weight: normal;
-		text-decoration: none;
-		transition: color 0.1s ease;
+	.buttons {
+		display: flex;
 
-		&:hover {
-			color: var(--accent);
+		._button {
+			margin: 0;
+			padding: 16px;
+			font-size: 1em;
+			font-weight: normal;
+			text-decoration: none;
+			transition: color 0.1s ease;
+
+			&:hover {
+				color: var(--accent);
+			}
+
+			&:active {
+				color: var(--accentDarken);
+				transition: color 0s ease;
+			}
 		}
 
-		&:active {
-			color: var(--accentDarken);
-			transition: color 0s ease;
+		> .send {
+			margin-left: auto;
+			color: var(--accent);
+
+			&:hover {
+				color: var(--accentLighten);
+			}
+
+			&:active {
+				color: var(--accentDarken);
+				transition: color 0s ease;
+			}
 		}
 	}
 
diff --git a/packages/client/src/pages/messaging/messaging-room.message.vue b/packages/client/src/pages/messaging/messaging-room.message.vue
index 4315bbecdb..393d2a17b2 100644
--- a/packages/client/src/pages/messaging/messaging-room.message.vue
+++ b/packages/client/src/pages/messaging/messaging-room.message.vue
@@ -35,45 +35,28 @@
 </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
+import { } from 'vue';
 import * as mfm from 'mfm-js';
+import * as Misskey from 'misskey-js';
 import { extractUrlFromMfm } from '@/scripts/extract-url-from-mfm';
 import MkUrlPreview from '@/components/url-preview.vue';
 import * as os from '@/os';
+import { $i } from '@/account';
 
-export default defineComponent({
-	components: {
-		MkUrlPreview
-	},
-	props: {
-		message: {
-			required: true
-		},
-		isGroup: {
-			required: false
-		}
-	},
-	computed: {
-		isMe(): boolean {
-			return this.message.userId === this.$i.id;
-		},
-		urls(): string[] {
-			if (this.message.text) {
-				return extractUrlFromMfm(mfm.parse(this.message.text));
-			} else {
-				return [];
-			}
-		}
-	},
-	methods: {
-		del() {
-			os.api('messaging/messages/delete', {
-				messageId: this.message.id
-			});
-		}
-	}
-});
+const props = defineProps<{
+	message: Misskey.entities.MessagingMessage;
+	isGroup?: boolean;
+}>();
+
+const isMe = $computed(() => props.message.userId === $i?.id);
+const urls = $computed(() => props.message.text ? extractUrlFromMfm(mfm.parse(props.message.text)) : []);
+
+function del(): void {
+	os.api('messaging/messages/delete', {
+		messageId: props.message.id,
+	});
+}
 </script>
 
 <style lang="scss" scoped>
@@ -266,6 +249,7 @@ export default defineComponent({
 	&.isMe {
 		flex-direction: row-reverse;
 		padding-right: var(--margin);
+		right: var(--margin); // 削除時にposition: absoluteになったときに使う
 
 		> .content {
 			padding-right: 16px;
diff --git a/packages/client/src/pages/messaging/messaging-room.vue b/packages/client/src/pages/messaging/messaging-room.vue
index fd1962218a..65c67e6354 100644
--- a/packages/client/src/pages/messaging/messaging-room.vue
+++ b/packages/client/src/pages/messaging/messaging-room.vue
@@ -1,379 +1,302 @@
 <template>
-<div class="_section"
+<div
+	ref="rootEl"
+	class="_section"
 	@dragover.prevent.stop="onDragover"
 	@drop.prevent.stop="onDrop"
 >
 	<div class="_content mk-messaging-room">
 		<div class="body">
-			<MkLoading v-if="fetching"/>
-			<p v-if="!fetching && messages.length == 0" class="empty"><i class="fas fa-info-circle"></i>{{ $ts.noMessagesYet }}</p>
-			<p v-if="!fetching && messages.length > 0 && !existMoreMessages" class="no-history"><i class="fas fa-flag"></i>{{ $ts.noMoreHistory }}</p>
-			<button v-show="existMoreMessages" ref="loadMore" class="more _button" :class="{ fetching: fetchingMoreMessages }" :disabled="fetchingMoreMessages" @click="fetchMoreMessages">
-				<template v-if="fetchingMoreMessages"><i class="fas fa-spinner fa-pulse fa-fw"></i></template>{{ fetchingMoreMessages ? $ts.loading : $ts.loadMore }}
-			</button>
-			<XList v-if="messages.length > 0" v-slot="{ item: message }" class="messages" :items="messages" direction="up" reversed>
-				<XMessage :key="message.id" :message="message" :is-group="group != null"/>
-			</XList>
+			<MkPagination v-if="pagination" ref="pagingComponent" :key="userAcct || groupId" :pagination="pagination">
+				<template #empty>
+					<div class="_fullinfo">
+						<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
+						<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="$ts.typingUsers" text-tag="span" class="users">
+				<I18n :src="i18n.ts.typingUsers" text-tag="span" class="users">
 					<template #users>
-						<b v-for="user in typers" :key="user.id" class="user">{{ user.username }}</b>
+						<b v-for="typer in typers" :key="typer.id" class="user">{{ typer.username }}</b>
 					</template>
 				</I18n>
 				<MkEllipsis/>
 			</div>
-			<transition :name="$store.state.animation ? 'fade' : ''">
+			<transition :name="animation ? 'fade' : ''">
 				<div v-show="showIndicator" class="new-message">
-					<button class="_buttonPrimary" @click="onIndicatorClick"><i class="fas fa-arrow-circle-down"></i>{{ $ts.newMessageExists }}</button>
+					<button class="_buttonPrimary" @click="onIndicatorClick"><i class="fas fa-fw fa-arrow-circle-down"></i>{{ i18n.ts.newMessageExists }}</button>
 				</div>
 			</transition>
-			<XForm v-if="!fetching" ref="form" :user="user" :group="group" class="form"/>
+			<XForm v-if="!fetching" ref="formEl" :user="user" :group="group" class="form"/>
 		</footer>
 	</div>
 </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, markRaw } from 'vue';
-import XList from '@/components/date-separated-list.vue';
+<script lang="ts" setup>
+import { computed, watch, onMounted, nextTick, onBeforeUnmount } from 'vue';
+import * as Misskey from 'misskey-js';
+import * as Acct from 'misskey-js/built/acct';
 import XMessage from './messaging-room.message.vue';
 import XForm from './messaging-room.form.vue';
-import * as Acct from 'misskey-js/built/acct';
-import { isBottom, onScrollBottom, scroll } from '@/scripts/scroll';
+import XList from '@/components/date-separated-list.vue';
+import MkPagination, { Paging } from '@/components/ui/pagination.vue';
+import { isBottomVisible, onScrollBottom, scrollToBottom } from '@/scripts/scroll';
 import * as os from '@/os';
 import { stream } from '@/stream';
-import { popout } from '@/scripts/popout';
 import * as sound from '@/scripts/sound';
 import * as symbols from '@/symbols';
+import { i18n } from '@/i18n';
+import { $i } from '@/account';
+import { defaultStore } from '@/store';
 
-const Component = defineComponent({
-	components: {
-		XMessage,
-		XForm,
-		XList,
-	},
+const props = defineProps<{
+	userAcct?: string;
+	groupId?: string;
+}>();
 
-	inject: ['inWindow'],
+let rootEl = $ref<HTMLDivElement>();
+let formEl = $ref<InstanceType<typeof XForm>>();
+let pagingComponent = $ref<InstanceType<typeof MkPagination>>();
 
-	props: {
-		userAcct: {
-			type: String,
-			required: false,
-		},
-		groupId: {
-			type: String,
-			required: false,
-		},
-	},
+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 showIndicator = $ref(false);
+const {
+	animation,
+} = defaultStore.reactiveState;
 
-	data() {
-		return {
-			[symbols.PAGE_INFO]: computed(() => !this.fetching ? this.user ? {
-				userName: this.user,
-				avatar: this.user,
-				action: {
-					icon: 'fas fa-ellipsis-h',
-					handler: this.menu,
-				},
-			} : {
-				title: this.group.name,
-				icon: 'fas fa-users',
-				action: {
-					icon: 'fas fa-ellipsis-h',
-					handler: this.menu,
-				},
-			} : null),
-			fetching: true,
-			user: null,
-			group: null,
-			fetchingMoreMessages: false,
-			messages: [],
-			existMoreMessages: false,
-			connection: null,
-			showIndicator: false,
-			timer: null,
-			typers: [],
-			ilObserver: new IntersectionObserver(
-				(entries) => entries.some((entry) => entry.isIntersecting)
-					&& !this.fetching
-					&& !this.fetchingMoreMessages
-					&& this.existMoreMessages
-					&& this.fetchMoreMessages()
-			),
-		};
-	},
+let pagination: Paging | null = $ref(null);
 
-	computed: {
-		form(): any {
-			return this.$refs.form;
-		}
-	},
-
-	watch: {
-		userAcct: 'fetch',
-		groupId: 'fetch',
-	},
-
-	mounted() {
-		this.fetch();
-		if (this.$store.state.enableInfiniteScroll) {
-			this.$nextTick(() => this.ilObserver.observe(this.$refs.loadMore as Element));
-		}
-	},
-
-	beforeUnmount() {
-		this.connection.dispose();
-
-		document.removeEventListener('visibilitychange', this.onVisibilitychange);
-
-		this.ilObserver.disconnect();
-	},
-
-	methods: {
-		async fetch() {
-			this.fetching = true;
-			if (this.userAcct) {
-				const user = await os.api('users/show', Acct.parse(this.userAcct));
-				this.user = user;
-			} else {
-				const group = await os.api('users/groups/show', { groupId: this.groupId });
-				this.group = group;
-			}
-
-			this.connection = markRaw(stream.useChannel('messaging', {
-				otherparty: this.user ? this.user.id : undefined,
-				group: this.group ? this.group.id : undefined,
-			}));
-
-			this.connection.on('message', this.onMessage);
-			this.connection.on('read', this.onRead);
-			this.connection.on('deleted', this.onDeleted);
-			this.connection.on('typers', typers => {
-				this.typers = typers.filter(u => u.id !== this.$i.id);
-			});
-
-			document.addEventListener('visibilitychange', this.onVisibilitychange);
-
-			this.fetchMessages().then(() => {
-				this.scrollToBottom();
-
-				// もっと見るの交差検知を発火させないためにfetchは
-				// スクロールが終わるまでfalseにしておく
-				// scrollendのようなイベントはないのでsetTimeoutで
-				window.setTimeout(() => this.fetching = false, 300);
-			});
-		},
-
-		onDragover(evt) {
-			const isFile = evt.dataTransfer.items[0].kind === 'file';
-			const isDriveFile = evt.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FILE_;
-
-			if (isFile || isDriveFile) {
-				evt.dataTransfer.dropEffect = evt.dataTransfer.effectAllowed === 'all' ? 'copy' : 'move';
-			} else {
-				evt.dataTransfer.dropEffect = 'none';
-			}
-		},
-
-		onDrop(evt): void {
-			// ファイルだったら
-			if (evt.dataTransfer.files.length === 1) {
-				this.form.upload(evt.dataTransfer.files[0]);
-				return;
-			} else if (evt.dataTransfer.files.length > 1) {
-				os.alert({
-					type: 'error',
-					text: this.$ts.onlyOneFileCanBeAttached
-				});
-				return;
-			}
-
-			//#region ドライブのファイル
-			const driveFile = evt.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FILE_);
-			if (driveFile != null && driveFile !== '') {
-				const file = JSON.parse(driveFile);
-				this.form.file = file;
-			}
-			//#endregion
-		},
-
-		fetchMessages() {
-			return new Promise((resolve, reject) => {
-				const max = this.existMoreMessages ? 20 : 10;
-
-				os.api('messaging/messages', {
-					userId: this.user ? this.user.id : undefined,
-					groupId: this.group ? this.group.id : undefined,
-					limit: max + 1,
-					untilId: this.existMoreMessages ? this.messages[0].id : undefined
-				}).then(messages => {
-					if (messages.length === max + 1) {
-						this.existMoreMessages = true;
-						messages.pop();
-					} else {
-						this.existMoreMessages = false;
-					}
-
-					this.messages.unshift.apply(this.messages, messages.reverse());
-					resolve();
-				});
-			});
-		},
-
-		fetchMoreMessages() {
-			this.fetchingMoreMessages = true;
-			this.fetchMessages().then(() => {
-				this.fetchingMoreMessages = false;
-			});
-		},
-
-		onMessage(message) {
-			sound.play('chat');
-
-			const _isBottom = isBottom(this.$el, 64);
-
-			this.messages.push(message);
-			if (message.userId !== this.$i.id && !document.hidden) {
-				this.connection.send('read', {
-					id: message.id
-				});
-			}
-
-			if (_isBottom) {
-				// Scroll to bottom
-				this.$nextTick(() => {
-					this.scrollToBottom();
-				});
-			} else if (message.userId !== this.$i.id) {
-				// Notify
-				this.notifyNewMessage();
-			}
-		},
-
-		onRead(x) {
-			if (this.user) {
-				if (!Array.isArray(x)) x = [x];
-				for (const id of x) {
-					if (this.messages.some(x => x.id === id)) {
-						const exist = this.messages.map(x => x.id).indexOf(id);
-						this.messages[exist] = {
-							...this.messages[exist],
-							isRead: true,
-						};
-					}
-				}
-			} else if (this.group) {
-				for (const id of x.ids) {
-					if (this.messages.some(x => x.id === id)) {
-						const exist = this.messages.map(x => x.id).indexOf(id);
-						this.messages[exist] = {
-							...this.messages[exist],
-							reads: [...this.messages[exist].reads, x.userId]
-						};
-					}
-				}
-			}
-		},
-
-		onDeleted(id) {
-			const msg = this.messages.find(m => m.id === id);
-			if (msg) {
-				this.messages = this.messages.filter(m => m.id !== msg.id);
-			}
-		},
-
-		scrollToBottom() {
-			scroll(this.$el, { top: this.$el.offsetHeight });
-		},
-
-		onIndicatorClick() {
-			this.showIndicator = false;
-			this.scrollToBottom();
-		},
-
-		notifyNewMessage() {
-			this.showIndicator = true;
-
-			onScrollBottom(this.$el, () => {
-				this.showIndicator = false;
-			});
-
-			if (this.timer) window.clearTimeout(this.timer);
-
-			this.timer = window.setTimeout(() => {
-				this.showIndicator = false;
-			}, 4000);
-		},
-
-		onVisibilitychange() {
-			if (document.hidden) return;
-			for (const message of this.messages) {
-				if (message.userId !== this.$i.id && !message.isRead) {
-					this.connection.send('read', {
-						id: message.id
-					});
-				}
-			}
-		},
-
-		menu(ev) {
-			const path = this.groupId ? `/my/messaging/group/${this.groupId}` : `/my/messaging/${this.userAcct}`;
-
-			os.popupMenu([this.inWindow ? undefined : {
-				text: this.$ts.openInWindow,
-				icon: 'fas fa-window-maximize',
-				action: () => {
-					os.pageWindow(path);
-					this.$router.back();
-				},
-			}, this.inWindow ? undefined : {
-				text: this.$ts.popout,
-				icon: 'fas fa-external-link-alt',
-				action: () => {
-					popout(path);
-					this.$router.back();
-				},
-			}], ev.currentTarget ?? ev.target);
-		}
-	}
+watch([() => props.userAcct, () => props.groupId], () => {
+	if (connection) connection.dispose();
+	fetch();
 });
 
-export default Component;
+async function fetch() {
+	fetching = true;
+
+	if (props.userAcct) {
+		const acct = Acct.parse(props.userAcct);
+		user = await os.api('users/show', { username: acct.username, host: acct.host || undefined });
+		group = null;
+		
+		pagination = {
+			endpoint: 'messaging/messages',
+			limit: 20,
+			params: {
+				userId: user.id,
+			},
+			reversed: true,
+			pageEl: $$(rootEl).value,
+		};
+		connection = stream.useChannel('messaging', {
+			otherparty: user.id,
+		});
+	} else {
+		user = null;
+		group = await os.api('users/groups/show', { groupId: props.groupId });
+
+		pagination = {
+			endpoint: 'messaging/messages',
+			limit: 20,
+			params: {
+				groupId: group?.id,
+			},
+			reversed: true,
+			pageEl: $$(rootEl).value,
+		};
+		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);
+	});
+
+	document.addEventListener('visibilitychange', onVisibilitychange);
+
+	nextTick(() => {
+		thisScrollToBottom();
+		window.setTimeout(() => {
+			fetching = false;
+		}, 300);
+	});
+}
+
+function onDragover(ev: DragEvent) {
+	if (!ev.dataTransfer) return;
+
+	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';
+	} else {
+		ev.dataTransfer.dropEffect = 'none';
+	}
+}
+
+function onDrop(ev: DragEvent): void {
+	if (!ev.dataTransfer) return;
+
+	// ファイルだったら
+	if (ev.dataTransfer.files.length === 1) {
+		formEl.upload(ev.dataTransfer.files[0]);
+		return;
+	} else if (ev.dataTransfer.files.length > 1) {
+		os.alert({
+			type: 'error',
+			text: i18n.ts.onlyOneFileCanBeAttached,
+		});
+		return;
+	}
+
+	//#region ドライブのファイル
+	const driveFile = ev.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FILE_);
+	if (driveFile != null && driveFile !== '') {
+		const file = JSON.parse(driveFile);
+		formEl.file = file;
+	}
+	//#endregion
+}
+
+function onMessage(message) {
+	sound.play('chat');
+
+	const _isBottom = isBottomVisible(rootEl, 64);
+
+	pagingComponent.prepend(message);
+	if (message.userId !== $i?.id && !document.hidden) {
+		connection?.send('read', {
+			id: message.id,
+		});
+	}
+
+	if (_isBottom) {
+		// Scroll to bottom
+		nextTick(() => {
+			thisScrollToBottom();
+		});
+	} else if (message.userId !== $i?.id) {
+		// Notify
+		notifyNewMessage();
+	}
+}
+
+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);
+				pagingComponent.items[exist] = {
+					...pagingComponent.items[exist],
+					isRead: true,
+				};
+			}
+		}
+	} 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);
+				pagingComponent.items[exist] = {
+					...pagingComponent.items[exist],
+					reads: [...pagingComponent.items[exist].reads, x.userId],
+				};
+			}
+		}
+	}
+}
+
+function onDeleted(id) {
+	const msg = pagingComponent.items.find(m => m.id === id);
+	if (msg) {
+		pagingComponent.items = pagingComponent.items.filter(m => m.id !== msg.id);
+	}
+}
+
+function thisScrollToBottom() {
+	scrollToBottom($$(rootEl).value, { behavior: 'smooth' });
+}
+
+function onIndicatorClick() {
+	showIndicator = false;
+	thisScrollToBottom();
+}
+
+let scrollRemove: (() => void) | null = $ref(null);
+
+function notifyNewMessage() {
+	showIndicator = true;
+
+	scrollRemove = onScrollBottom(rootEl, () => {
+		showIndicator = false;
+		scrollRemove = null;
+	});
+}
+
+function onVisibilitychange() {
+	if (document.hidden) return;
+	for (const message of pagingComponent.items) {
+		if (message.userId !== $i?.id && !message.isRead) {
+			connection?.send('read', {
+				id: message.id,
+			});
+		}
+	}
+}
+
+onMounted(() => {
+	fetch();
+});
+
+onBeforeUnmount(() => {
+	connection?.dispose();
+	document.removeEventListener('visibilitychange', onVisibilitychange);
+	if (scrollRemove) scrollRemove();
+});
+
+defineExpose({
+	[symbols.PAGE_INFO]: computed(() => !fetching ? user ? {
+		userName: user,
+		avatar: user,
+	} : {
+		title: group?.name,
+		icon: 'fas fa-users',
+	} : null),
+});
 </script>
 
 <style lang="scss" scoped>
 .mk-messaging-room {
+	position: relative;
+
 	> .body {
-		> .empty {
-			width: 100%;
-			margin: 0;
-			padding: 16px 8px 8px 8px;
-			text-align: center;
-			font-size: 0.8em;
-			opacity: 0.5;
-
-			i {
-				margin-right: 4px;
-			}
-		}
-
-		> .no-history {
-			display: block;
-			margin: 0;
-			padding: 16px;
-			text-align: center;
-			font-size: 0.8em;
-			color: var(--messagingRoomInfo);
-			opacity: 0.5;
-
-			i {
-				margin-right: 4px;
-			}
-		}
-
-		> .more {
+		.more {
 			display: block;
 			margin: 16px auto;
 			padding: 0 12px;
@@ -399,7 +322,9 @@ export default Component;
 			}
 		}
 
-		> .messages {
+		.messages {
+			padding: 8px 0;
+
 			> ::v-deep(*) {
 				margin-bottom: 16px;
 			}
@@ -408,29 +333,31 @@ export default Component;
 
 	> footer {
 		width: 100%;
-		position: relative;
+		position: sticky;
+		z-index: 2;
+		bottom: 0;
+		padding-top: 8px;
+
+		@media (max-width: 500px) {
+			bottom: calc(env(safe-area-inset-bottom, 0px) + 92px);
+		}
 
 		> .new-message {
-			position: absolute;
-			top: -48px;
 			width: 100%;
-			padding: 8px 0;
+			padding-bottom: 8px;
 			text-align: center;
 
 			> button {
 				display: inline-block;
 				margin: 0;
-				padding: 0 12px 0 30px;
+				padding: 0 12px;
 				line-height: 32px;
 				font-size: 12px;
 				border-radius: 16px;
 
 				> i {
-					position: absolute;
-					top: 0;
-					left: 10px;
-					line-height: 32px;
-					font-size: 16px;
+					display: inline-block;
+					margin-right: 8px;
 				}
 			}
 		}
@@ -455,6 +382,8 @@ export default Component;
 		}
 
 		> .form {
+			max-height: 12em;
+			overflow-y: scroll;
 			border-top: solid 0.5px var(--divider);
 		}
 	}
diff --git a/packages/client/src/scripts/scroll.ts b/packages/client/src/scripts/scroll.ts
index 621fe88105..0643bad2fb 100644
--- a/packages/client/src/scripts/scroll.ts
+++ b/packages/client/src/scripts/scroll.ts
@@ -1,9 +1,13 @@
 type ScrollBehavior = 'auto' | 'smooth' | 'instant';
 
-export function getScrollContainer(el: Element | null): Element | null {
-	if (el == null || el.tagName === 'BODY') return null;
+export function getScrollContainer(el: HTMLElement | null): HTMLElement | null {
+	if (el == null || el.tagName === 'HTML') return null;
 	const overflow = window.getComputedStyle(el).getPropertyValue('overflow');
-	if (overflow.endsWith('auto')) { // xとyを個別に指定している場合、hidden auto みたいな値になる
+	if (
+		// xとyを個別に指定している場合、`hidden scroll`みたいな値になる
+		overflow.endsWith('scroll') ||
+		overflow.endsWith('auto')
+	) {
 		return el;
 	} else {
 		return getScrollContainer(el.parentElement);
@@ -22,6 +26,11 @@ export function isTopVisible(el: Element | null): boolean {
 	return scrollTop <= topPosition;
 }
 
+export function isBottomVisible(el: HTMLElement, tolerance = 1, container = getScrollContainer(el)) {
+	if (container) return el.scrollHeight <= container.clientHeight + Math.abs(container.scrollTop) + tolerance;
+	return el.scrollHeight <= window.innerHeight + window.scrollY + tolerance;
+}
+
 export function onScrollTop(el: Element, cb) {
 	const container = getScrollContainer(el) || window;
 	const onScroll = ev => {

From 699f24f3dcdb156838eb70602885c0b2cdd02cbc Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Mon, 20 Jun 2022 17:38:49 +0900
Subject: [PATCH 10/90] refactor(client): Refine routing (#8846)

---
 packages/client/package.json                  |   1 -
 packages/client/src/account.ts                |  34 +-
 packages/client/src/components/chart.vue      |  94 +--
 .../src/components/drive-file-thumbnail.vue   |   2 +-
 .../client/src/components/form/folder.vue     |   4 +-
 packages/client/src/components/global/a.vue   |  31 +-
 .../client/src/components/global/header.vue   | 361 ---------
 .../src/components/global/page-header.vue     | 300 ++++++++
 .../src/components/global/router-view.vue     |  39 +
 packages/client/src/components/index.ts       |   9 +-
 .../src/components/modal-page-window.vue      | 225 +++---
 packages/client/src/components/note.vue       |   2 +-
 .../client/src/components/page-window.vue     | 257 +++----
 packages/client/src/components/ui/window.vue  |  69 +-
 packages/client/src/init.ts                   |  14 +-
 packages/client/src/menu.ts                   |  31 +-
 packages/client/src/nirax.ts                  | 200 +++++
 packages/client/src/os.ts                     |   7 -
 packages/client/src/pages/_error_.vue         |  14 +-
 packages/client/src/pages/about-misskey.vue   | 131 ++--
 packages/client/src/pages/about.vue           | 153 ++--
 packages/client/src/pages/admin-file.vue      |  69 +-
 packages/client/src/pages/admin/_header_.vue  | 249 +++++++
 packages/client/src/pages/admin/abuses.vue    |  80 +-
 packages/client/src/pages/admin/ads.vue       | 103 +--
 .../client/src/pages/admin/announcements.vue  |  81 +-
 .../client/src/pages/admin/bot-protection.vue |   1 -
 packages/client/src/pages/admin/database.vue  |  23 +-
 .../client/src/pages/admin/email-settings.vue | 121 +--
 packages/client/src/pages/admin/emojis.vue    | 184 ++---
 packages/client/src/pages/admin/files.vue     | 119 +--
 packages/client/src/pages/admin/index.vue     |  50 +-
 .../client/src/pages/admin/instance-block.vue |  38 +-
 .../client/src/pages/admin/integrations.vue   |  27 +-
 .../client/src/pages/admin/object-storage.vue | 143 ++--
 .../client/src/pages/admin/other-settings.vue |  41 +-
 packages/client/src/pages/admin/overview.vue  |  22 +-
 .../client/src/pages/admin/proxy-account.vue  |  23 +-
 packages/client/src/pages/admin/queue.vue     |  57 +-
 packages/client/src/pages/admin/relays.vue    |  63 +-
 packages/client/src/pages/admin/security.vue  |  70 +-
 packages/client/src/pages/admin/settings.vue  | 301 ++++----
 packages/client/src/pages/admin/users.vue     | 174 ++---
 packages/client/src/pages/announcements.vue   |  86 +--
 .../client/src/pages/antenna-timeline.vue     | 135 ++--
 packages/client/src/pages/api-console.vue     |  65 +-
 packages/client/src/pages/auth.vue            |  18 +-
 packages/client/src/pages/channel-editor.vue  | 207 +++--
 packages/client/src/pages/channel.vue         | 147 ++--
 packages/client/src/pages/channels.vue        | 149 ++--
 packages/client/src/pages/clip.vue            | 130 ++--
 packages/client/src/pages/drive.vue           |  20 +-
 packages/client/src/pages/emojis.category.vue |   1 -
 packages/client/src/pages/emojis.vue          |  36 +-
 packages/client/src/pages/explore.vue         | 243 +++---
 packages/client/src/pages/favorites.vue       |  45 +-
 packages/client/src/pages/featured.vue        |  21 +-
 packages/client/src/pages/federation.vue      | 201 ++---
 packages/client/src/pages/follow-requests.vue |  20 +-
 packages/client/src/pages/follow.vue          |  15 +-
 packages/client/src/pages/gallery/edit.vue    | 169 ++---
 packages/client/src/pages/gallery/index.vue   | 205 +++--
 packages/client/src/pages/gallery/post.vue    | 199 +++--
 packages/client/src/pages/instance-info.vue   |  39 +-
 packages/client/src/pages/mentions.vue        |  23 +-
 packages/client/src/pages/messages.vue        |  25 +-
 packages/client/src/pages/messaging/index.vue | 288 +++----
 .../src/pages/messaging/messaging-room.vue    |  18 +-
 packages/client/src/pages/mfm-cheat-sheet.vue | 596 ++++++++-------
 packages/client/src/pages/miauth.vue          |  26 +-
 .../client/src/pages/my-antennas/create.vue   |  24 +-
 .../client/src/pages/my-antennas/edit.vue     |  22 +-
 .../client/src/pages/my-antennas/index.vue    |  23 +-
 packages/client/src/pages/my-clips/index.vue  |  29 +-
 packages/client/src/pages/my-groups/group.vue | 178 -----
 packages/client/src/pages/my-groups/index.vue | 147 ----
 packages/client/src/pages/my-lists/index.vue  |  29 +-
 packages/client/src/pages/my-lists/list.vue   | 161 ++--
 packages/client/src/pages/not-found.vue       |  16 +-
 packages/client/src/pages/note.vue            | 196 +++--
 packages/client/src/pages/notifications.vue   |  77 +-
 .../src/pages/page-editor/page-editor.vue     | 705 +++++++++---------
 packages/client/src/pages/page.vue            | 215 +++---
 packages/client/src/pages/pages.vue           | 149 ++--
 packages/client/src/pages/preview.vue         |  18 +-
 packages/client/src/pages/reset-password.vue  |  43 +-
 packages/client/src/pages/scratchpad.vue      |  26 +-
 packages/client/src/pages/search.vue          |  29 +-
 .../src/pages/settings/account-info.vue       |  18 +-
 .../client/src/pages/settings/accounts.vue    |  26 +-
 packages/client/src/pages/settings/api.vue    |  20 +-
 packages/client/src/pages/settings/apps.vue   |  24 +-
 .../client/src/pages/settings/custom-css.vue  |  18 +-
 packages/client/src/pages/settings/deck.vue   |  20 +-
 .../src/pages/settings/delete-account.vue     |  21 +-
 packages/client/src/pages/settings/drive.vue  |  26 +-
 packages/client/src/pages/settings/email.vue  |  24 +-
 .../client/src/pages/settings/general.vue     |  23 +-
 .../src/pages/settings/import-export.vue      |  18 +-
 packages/client/src/pages/settings/index.vue  |  95 +--
 .../src/pages/settings/instance-mute.vue      |  16 +-
 .../client/src/pages/settings/integration.vue |  22 +-
 packages/client/src/pages/settings/menu.vue   |  26 +-
 .../client/src/pages/settings/mute-block.vue  |  20 +-
 .../src/pages/settings/notifications.vue      |  22 +-
 packages/client/src/pages/settings/other.vue  |  20 +-
 .../src/pages/settings/plugin.install.vue     |  36 +-
 packages/client/src/pages/settings/plugin.vue |  20 +-
 .../client/src/pages/settings/privacy.vue     |  16 +-
 .../client/src/pages/settings/profile.vue     |  16 +-
 .../client/src/pages/settings/reaction.vue    |  26 +-
 .../client/src/pages/settings/security.vue    |  35 +-
 packages/client/src/pages/settings/sounds.vue |  40 +-
 .../src/pages/settings/theme.install.vue      |  24 +-
 .../src/pages/settings/theme.manage.vue       |  18 +-
 packages/client/src/pages/settings/theme.vue  |  23 +-
 .../src/pages/settings/webhook.edit.vue       |  22 +-
 .../client/src/pages/settings/webhook.new.vue |  16 +-
 .../client/src/pages/settings/webhook.vue     |  18 +-
 .../client/src/pages/settings/word-mute.vue   |  20 +-
 packages/client/src/pages/share.vue           | 254 +++----
 packages/client/src/pages/signup-complete.vue |  14 +-
 packages/client/src/pages/tag.vue             |  18 +-
 packages/client/src/pages/theme-editor.vue    |  44 +-
 packages/client/src/pages/timeline.vue        | 138 ++--
 packages/client/src/pages/user-info.vue       | 409 +++++-----
 .../client/src/pages/user-list-timeline.vue   | 128 ++--
 packages/client/src/pages/user/index.vue      | 465 ++++++------
 packages/client/src/pages/welcome.vue         |  16 +-
 packages/client/src/router.ts                 | 372 +++++----
 packages/client/src/scripts/get-user-menu.ts  |  58 +-
 packages/client/src/scripts/navigate.ts       |  34 -
 packages/client/src/scripts/page-metadata.ts  |  41 +
 packages/client/src/scripts/search.ts         |  16 +-
 .../client/src/scripts/use-leave-guard.ts     |   1 -
 packages/client/src/symbols.ts                |   1 -
 packages/client/src/ui/_common_/sw-inject.ts  |  15 +-
 packages/client/src/ui/classic.side.vue       | 148 ----
 packages/client/src/ui/classic.vue            | 267 +++----
 packages/client/src/ui/deck.vue               |  33 +-
 packages/client/src/ui/deck/main-column.vue   |  40 +-
 packages/client/src/ui/desktop.vue            |  70 --
 packages/client/src/ui/universal.vue          |  89 +--
 packages/client/src/ui/visitor/a.vue          |  25 +-
 packages/client/src/ui/visitor/b.vue          | 146 ++--
 packages/client/src/ui/zen.vue                |  99 +--
 packages/client/tsconfig.json                 |   3 +-
 packages/client/vite.config.ts                |   6 +-
 packages/client/yarn.lock                     |  12 -
 149 files changed, 6312 insertions(+), 6670 deletions(-)
 delete mode 100644 packages/client/src/components/global/header.vue
 create mode 100644 packages/client/src/components/global/page-header.vue
 create mode 100644 packages/client/src/components/global/router-view.vue
 create mode 100644 packages/client/src/nirax.ts
 create mode 100644 packages/client/src/pages/admin/_header_.vue
 delete mode 100644 packages/client/src/pages/my-groups/group.vue
 delete mode 100644 packages/client/src/pages/my-groups/index.vue
 delete mode 100644 packages/client/src/scripts/navigate.ts
 create mode 100644 packages/client/src/scripts/page-metadata.ts
 delete mode 100644 packages/client/src/symbols.ts
 delete mode 100644 packages/client/src/ui/classic.side.vue
 delete mode 100644 packages/client/src/ui/desktop.vue

diff --git a/packages/client/package.json b/packages/client/package.json
index 83c8086e23..f1ab23a55e 100644
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -77,7 +77,6 @@
 		"vite": "2.9.10",
 		"vue": "3.2.37",
 		"vue-prism-editor": "2.0.0-alpha.2",
-		"vue-router": "4.0.16",
 		"vuedraggable": "4.0.1",
 		"websocket": "1.0.34",
 		"ws": "8.8.0"
diff --git a/packages/client/src/account.ts b/packages/client/src/account.ts
index ce4af61f18..2b07dd1990 100644
--- a/packages/client/src/account.ts
+++ b/packages/client/src/account.ts
@@ -1,11 +1,11 @@
-import { del, get, set } from '@/scripts/idb-proxy';
 import { defineAsyncComponent, reactive } from 'vue';
 import * as misskey from 'misskey-js';
+import { showSuspendedDialog } from './scripts/show-suspended-dialog';
+import { i18n } from './i18n';
+import { del, get, set } from '@/scripts/idb-proxy';
 import { apiUrl } from '@/config';
 import { waiting, api, popup, popupMenu, success, alert } from '@/os';
 import { unisonReload, reloadChannel } from '@/scripts/unison-reload';
-import { showSuspendedDialog } from './scripts/show-suspended-dialog';
-import { i18n } from './i18n';
 
 // TODO: 他のタブと永続化されたstateを同期
 
@@ -22,13 +22,7 @@ export async function signout() {
 	waiting();
 	localStorage.removeItem('account');
 
-	//#region Remove account
-	const accounts = await getAccounts();
-	accounts.splice(accounts.findIndex(x => x.id === $i.id), 1);
-
-	if (accounts.length > 0) await set('accounts', accounts);
-	else await del('accounts');
-	//#endregion
+	await removeAccount($i.id);
 
 	//#region Remove service worker registration
 	try {
@@ -55,7 +49,7 @@ export async function signout() {
 	} catch (err) {}
 	//#endregion
 
-	document.cookie = `igi=; path=/`;
+	document.cookie = 'igi=; path=/';
 
 	if (accounts.length > 0) login(accounts[0].token);
 	else unisonReload('/');
@@ -72,14 +66,22 @@ export async function addAccount(id: Account['id'], token: Account['token']) {
 	}
 }
 
+export async function removeAccount(id: Account['id']) {
+	const accounts = await getAccounts();
+	accounts.splice(accounts.findIndex(x => x.id === id), 1);
+
+	if (accounts.length > 0) await set('accounts', accounts);
+	else await del('accounts');
+}
+
 function fetchAccount(token: string): Promise<Account> {
 	return new Promise((done, fail) => {
 		// Fetch user
 		fetch(`${apiUrl}/i`, {
 			method: 'POST',
 			body: JSON.stringify({
-				i: token
-			})
+				i: token,
+			}),
 		})
 		.then(res => res.json())
 		.then(res => {
@@ -216,13 +218,13 @@ export async function openAccountMenu(opts: {
 			type: 'link',
 			icon: 'fas fa-users',
 			text: i18n.ts.manageAccounts,
-			to: `/settings/accounts`,
+			to: '/settings/accounts',
 		}]], ev.currentTarget ?? ev.target, {
-			align: 'left'
+			align: 'left',
 		});
 	} else {
 		popupMenu([...(opts.includeCurrentAccount ? [createItem($i)] : []), ...accountItemPromises], ev.currentTarget ?? ev.target, {
-			align: 'left'
+			align: 'left',
 		});
 	}
 }
diff --git a/packages/client/src/components/chart.vue b/packages/client/src/components/chart.vue
index 4e9c4e587a..5e9c2f03be 100644
--- a/packages/client/src/components/chart.vue
+++ b/packages/client/src/components/chart.vue
@@ -13,7 +13,7 @@
   id-denylist violation when setting it. This is causing about 60+ lint issues.
   As this is part of Chart.js's API it makes sense to disable the check here.
 */
-import { defineProps, onMounted, ref, watch, PropType, onUnmounted } from 'vue';
+import { onMounted, ref, watch, PropType, onUnmounted } from 'vue';
 import {
 	Chart,
 	ArcElement,
@@ -53,7 +53,7 @@ const props = defineProps({
 	limit: {
 		type: Number,
 		required: false,
-		default: 90
+		default: 90,
 	},
 	span: {
 		type: String as PropType<'hour' | 'day'>,
@@ -62,22 +62,22 @@ const props = defineProps({
 	detailed: {
 		type: Boolean,
 		required: false,
-		default: false
+		default: false,
 	},
 	stacked: {
 		type: Boolean,
 		required: false,
-		default: false
+		default: false,
 	},
 	bar: {
 		type: Boolean,
 		required: false,
-		default: false
+		default: false,
 	},
 	aspectRatio: {
 		type: Number,
 		required: false,
-		default: null
+		default: null,
 	},
 });
 
@@ -156,7 +156,7 @@ const getDate = (ago: number) => {
 const format = (arr) => {
 	return arr.map((v, i) => ({
 		x: getDate(i).getTime(),
-		y: v
+		y: v,
 	}));
 };
 
@@ -343,7 +343,7 @@ const render = () => {
 							min: 'original',
 							max: 'original',
 						},
-					}
+					},
 				} : undefined,
 				//gradient,
 			},
@@ -367,8 +367,8 @@ const render = () => {
 					ctx.stroke();
 					ctx.restore();
 				}
-			}
-		}]
+			},
+		}],
 	});
 };
 
@@ -433,18 +433,18 @@ const fetchApRequestChart = async (): Promise<typeof chartData> => {
 			name: 'In',
 			type: 'area',
 			color: '#008FFB',
-			data: format(raw.inboxReceived)
+			data: format(raw.inboxReceived),
 		}, {
 			name: 'Out (succ)',
 			type: 'area',
 			color: '#00E396',
-			data: format(raw.deliverSucceeded)
+			data: format(raw.deliverSucceeded),
 		}, {
 			name: 'Out (fail)',
 			type: 'area',
 			color: '#FEB019',
-			data: format(raw.deliverFailed)
-		}]
+			data: format(raw.deliverFailed),
+		}],
 	};
 };
 
@@ -456,7 +456,7 @@ const fetchNotesChart = async (type: string): Promise<typeof chartData> => {
 			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))
+				: sum(raw[type].inc, negate(raw[type].dec)),
 			),
 			color: '#888888',
 		}, {
@@ -464,7 +464,7 @@ const fetchNotesChart = async (type: string): Promise<typeof chartData> => {
 			type: 'area',
 			data: format(type === 'combined'
 				? sum(raw.local.diffs.renote, raw.remote.diffs.renote)
-				: raw[type].diffs.renote
+				: raw[type].diffs.renote,
 			),
 			color: colors.green,
 		}, {
@@ -472,7 +472,7 @@ const fetchNotesChart = async (type: string): Promise<typeof chartData> => {
 			type: 'area',
 			data: format(type === 'combined'
 				? sum(raw.local.diffs.reply, raw.remote.diffs.reply)
-				: raw[type].diffs.reply
+				: raw[type].diffs.reply,
 			),
 			color: colors.yellow,
 		}, {
@@ -480,7 +480,7 @@ const fetchNotesChart = async (type: string): Promise<typeof chartData> => {
 			type: 'area',
 			data: format(type === 'combined'
 				? sum(raw.local.diffs.normal, raw.remote.diffs.normal)
-				: raw[type].diffs.normal
+				: raw[type].diffs.normal,
 			),
 			color: colors.blue,
 		}, {
@@ -488,7 +488,7 @@ const fetchNotesChart = async (type: string): Promise<typeof chartData> => {
 			type: 'area',
 			data: format(type === 'combined'
 				? sum(raw.local.diffs.withFile, raw.remote.diffs.withFile)
-				: raw[type].diffs.withFile
+				: raw[type].diffs.withFile,
 			),
 			color: colors.purple,
 		}],
@@ -522,21 +522,21 @@ const fetchUsersChart = async (total: boolean): Promise<typeof chartData> => {
 			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))
+				: 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))
+				: 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))
+				: sum(raw.remote.inc, negate(raw.remote.dec)),
 			),
 		}],
 	};
@@ -607,8 +607,8 @@ const fetchDriveChart = async (): Promise<typeof chartData> => {
 					raw.local.incSize,
 					negate(raw.local.decSize),
 					raw.remote.incSize,
-					negate(raw.remote.decSize)
-				)
+					negate(raw.remote.decSize),
+				),
 			),
 		}, {
 			name: 'Local +',
@@ -642,8 +642,8 @@ const fetchDriveFilesChart = async (): Promise<typeof chartData> => {
 					raw.local.incCount,
 					negate(raw.local.decCount),
 					raw.remote.incCount,
-					negate(raw.remote.decCount)
-				)
+					negate(raw.remote.decCount),
+				),
 			),
 		}, {
 			name: 'Local +',
@@ -672,18 +672,18 @@ const fetchInstanceRequestsChart = async (): Promise<typeof chartData> => {
 			name: 'In',
 			type: 'area',
 			color: '#008FFB',
-			data: format(raw.requests.received)
+			data: format(raw.requests.received),
 		}, {
 			name: 'Out (succ)',
 			type: 'area',
 			color: '#00E396',
-			data: format(raw.requests.succeeded)
+			data: format(raw.requests.succeeded),
 		}, {
 			name: 'Out (fail)',
 			type: 'area',
 			color: '#FEB019',
-			data: format(raw.requests.failed)
-		}]
+			data: format(raw.requests.failed),
+		}],
 	};
 };
 
@@ -696,9 +696,9 @@ const fetchInstanceUsersChart = async (total: boolean): Promise<typeof chartData
 			color: '#008FFB',
 			data: format(total
 				? raw.users.total
-				: sum(raw.users.inc, negate(raw.users.dec))
-			)
-		}]
+				: sum(raw.users.inc, negate(raw.users.dec)),
+			),
+		}],
 	};
 };
 
@@ -711,9 +711,9 @@ const fetchInstanceNotesChart = async (total: boolean): Promise<typeof chartData
 			color: '#008FFB',
 			data: format(total
 				? raw.notes.total
-				: sum(raw.notes.inc, negate(raw.notes.dec))
-			)
-		}]
+				: sum(raw.notes.inc, negate(raw.notes.dec)),
+			),
+		}],
 	};
 };
 
@@ -726,17 +726,17 @@ const fetchInstanceFfChart = async (total: boolean): Promise<typeof chartData> =
 			color: '#008FFB',
 			data: format(total
 				? raw.following.total
-				: sum(raw.following.inc, negate(raw.following.dec))
-			)
+				: sum(raw.following.inc, negate(raw.following.dec)),
+			),
 		}, {
 			name: 'Followers',
 			type: 'area',
 			color: '#00E396',
 			data: format(total
 				? raw.followers.total
-				: sum(raw.followers.inc, negate(raw.followers.dec))
-			)
-		}]
+				: sum(raw.followers.inc, negate(raw.followers.dec)),
+			),
+		}],
 	};
 };
 
@@ -750,9 +750,9 @@ const fetchInstanceDriveUsageChart = async (total: boolean): Promise<typeof char
 			color: '#008FFB',
 			data: format(total
 				? raw.drive.totalUsage
-				: sum(raw.drive.incUsage, negate(raw.drive.decUsage))
-			)
-		}]
+				: sum(raw.drive.incUsage, negate(raw.drive.decUsage)),
+			),
+		}],
 	};
 };
 
@@ -765,9 +765,9 @@ const fetchInstanceDriveFilesChart = async (total: boolean): Promise<typeof char
 			color: '#008FFB',
 			data: format(total
 				? raw.drive.totalFiles
-				: sum(raw.drive.incFiles, negate(raw.drive.decFiles))
-			)
-		}]
+				: sum(raw.drive.incFiles, negate(raw.drive.decFiles)),
+			),
+		}],
 	};
 };
 
diff --git a/packages/client/src/components/drive-file-thumbnail.vue b/packages/client/src/components/drive-file-thumbnail.vue
index 07cd565c58..b346585cec 100644
--- a/packages/client/src/components/drive-file-thumbnail.vue
+++ b/packages/client/src/components/drive-file-thumbnail.vue
@@ -57,7 +57,7 @@ const isThumbnailAvailable = computed(() => {
 .zdjebgpv {
 	position: relative;
 	display: flex;
-	background: #e1e1e1;
+	background: var(--panel);
 	border-radius: 8px;
 	overflow: clip;
 
diff --git a/packages/client/src/components/form/folder.vue b/packages/client/src/components/form/folder.vue
index 1b960657d7..a9d8bd97b8 100644
--- a/packages/client/src/components/form/folder.vue
+++ b/packages/client/src/components/form/folder.vue
@@ -9,13 +9,13 @@
 			<i v-else class="fas fa-angle-down icon"></i>
 		</span>
 	</div>
-	<keep-alive>
+	<KeepAlive>
 		<div v-if="openedAtLeastOnce" v-show="opened" class="body">
 			<MkSpacer :margin-min="14" :margin-max="22">
 				<slot></slot>
 			</MkSpacer>
 		</div>
-	</keep-alive>
+	</KeepAlive>
 </div>
 </template>
 
diff --git a/packages/client/src/components/global/a.vue b/packages/client/src/components/global/a.vue
index 5287d59b3e..c7cf12e8c8 100644
--- a/packages/client/src/components/global/a.vue
+++ b/packages/client/src/components/global/a.vue
@@ -5,13 +5,13 @@
 </template>
 
 <script lang="ts" setup>
+import { inject } from 'vue';
 import * as os from '@/os';
 import copyToClipboard from '@/scripts/copy-to-clipboard';
-import { router } from '@/router';
 import { url } from '@/config';
 import { popout as popout_ } from '@/scripts/popout';
 import { i18n } from '@/i18n';
-import { MisskeyNavigator } from '@/scripts/navigate';
+import { useRouter } from '@/router';
 
 const props = withDefaults(defineProps<{
 	to: string;
@@ -22,15 +22,16 @@ const props = withDefaults(defineProps<{
 	behavior: null,
 });
 
-const mkNav = new MisskeyNavigator();
+const router = useRouter();
 
 const active = $computed(() => {
 	if (props.activeClass == null) return false;
 	const resolved = router.resolve(props.to);
-	if (resolved.path === router.currentRoute.value.path) return true;
-	if (resolved.name == null) return false;
+	if (resolved == null) return false;
+	if (resolved.route.path === router.currentRoute.value.path) return true;
+	if (resolved.route.name == null) return false;
 	if (router.currentRoute.value.name == null) return false;
-	return resolved.name === router.currentRoute.value.name;
+	return resolved.route.name === router.currentRoute.value.name;
 });
 
 function onContextmenu(ev) {
@@ -44,31 +45,25 @@ function onContextmenu(ev) {
 		text: i18n.ts.openInWindow,
 		action: () => {
 			os.pageWindow(props.to);
-		}
-	}, mkNav.sideViewHook ? {
-		icon: 'fas fa-columns',
-		text: i18n.ts.openInSideView,
-		action: () => {
-			if (mkNav.sideViewHook) mkNav.sideViewHook(props.to);
-		}
-	} : undefined, {
+		},
+	}, {
 		icon: 'fas fa-expand-alt',
 		text: i18n.ts.showInPage,
 		action: () => {
 			router.push(props.to);
-		}
+		},
 	}, null, {
 		icon: 'fas fa-external-link-alt',
 		text: i18n.ts.openInNewTab,
 		action: () => {
 			window.open(props.to, '_blank');
-		}
+		},
 	}, {
 		icon: 'fas fa-link',
 		text: i18n.ts.copyLink,
 		action: () => {
 			copyToClipboard(`${url}${props.to}`);
-		}
+		},
 	}], ev);
 }
 
@@ -98,6 +93,6 @@ function nav() {
 		}
 	}
 
-	mkNav.push(props.to);
+	router.push(props.to);
 }
 </script>
diff --git a/packages/client/src/components/global/header.vue b/packages/client/src/components/global/header.vue
deleted file mode 100644
index 63db19a520..0000000000
--- a/packages/client/src/components/global/header.vue
+++ /dev/null
@@ -1,361 +0,0 @@
-<template>
-<div ref="el" class="fdidabkb" :class="{ slim: narrow, thin: thin_ }" :style="{ background: bg }" @click="onClick">
-	<template v-if="info">
-		<div v-if="!hideTitle" class="titleContainer" @click="showTabsPopup">
-			<MkAvatar v-if="info.avatar" class="avatar" :user="info.avatar" :disable-preview="true" :show-indicator="true"/>
-			<i v-else-if="info.icon" class="icon" :class="info.icon"></i>
-
-			<div class="title">
-				<MkUserName v-if="info.userName" :user="info.userName" :nowrap="true" class="title"/>
-				<div v-else-if="info.title" class="title">{{ info.title }}</div>
-				<div v-if="!narrow && info.subtitle" class="subtitle">
-					{{ info.subtitle }}
-				</div>
-				<div v-if="narrow && hasTabs" class="subtitle activeTab">
-					{{ info.tabs.find(tab => tab.active)?.title }}
-					<i class="chevron fas fa-chevron-down"></i>
-				</div>
-			</div>
-		</div>
-		<div v-if="!narrow || hideTitle" class="tabs">
-			<button v-for="tab in info.tabs" v-tooltip="tab.title" class="tab _button" :class="{ active: tab.active }" @click="tab.onClick">
-				<i v-if="tab.icon" class="icon" :class="tab.icon"></i>
-				<span v-if="!tab.iconOnly" class="title">{{ tab.title }}</span>
-			</button>
-		</div>
-	</template>
-	<div class="buttons right">
-		<template v-if="info && info.actions && !narrow">
-			<template v-for="action in info.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="action.text" class="_button button" :class="{ highlighted: action.highlighted }" @click.stop="action.handler" @touchstart="preventDrag"><i :class="action.icon"></i></button>
-			</template>
-		</template>
-		<button v-if="shouldShowMenu" v-tooltip="$ts.menu" class="_button button" @click.stop="showMenu" @touchstart="preventDrag"><i class="fas fa-ellipsis-h"></i></button>
-	</div>
-</div>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, onMounted, onUnmounted, PropType, ref, inject } from 'vue';
-import tinycolor from 'tinycolor2';
-import { popupMenu } from '@/os';
-import { url } from '@/config';
-import { scrollToTop } from '@/scripts/scroll';
-import MkButton from '@/components/ui/button.vue';
-import { i18n } from '@/i18n';
-import { globalEvents } from '@/events';
-
-export default defineComponent({
-	components: {
-		MkButton
-	},
-
-	props: {
-		info: {
-			type: Object as PropType<{
-				actions?: {}[];
-				tabs?: {}[];
-			}>,
-			required: true
-		},
-		menu: {
-			required: false
-		},
-		thin: {
-			required: false,
-			default: false
-		},
-	},
-
-	setup(props) {
-		const el = ref<HTMLElement>(null);
-		const bg = ref(null);
-		const narrow = ref(false);
-		const height = ref(0);
-		const hasTabs = computed(() => {
-			return props.info.tabs && props.info.tabs.length > 0;
-		});
-		const shouldShowMenu = computed(() => {
-			if (props.info == null) return false;
-			if (props.info.actions != null && narrow.value) return true;
-			if (props.info.menu != null) return true;
-			if (props.info.share != null) return true;
-			if (props.menu != null) return true;
-			return false;
-		});
-
-		const share = () => {
-			navigator.share({
-				url: url + props.info.path,
-				...props.info.share,
-			});
-		};
-
-		const showMenu = (ev: MouseEvent) => {
-			let menu = props.info.menu ? props.info.menu() : [];
-			if (narrow.value && props.info.actions) {
-				menu = [...props.info.actions.map(x => ({
-					text: x.text,
-					icon: x.icon,
-					action: x.handler
-				})), menu.length > 0 ? null : undefined, ...menu];
-			}
-			if (props.info.share) {
-				if (menu.length > 0) menu.push(null);
-				menu.push({
-					text: i18n.ts.share,
-					icon: 'fas fa-share-alt',
-					action: share
-				});
-			}
-			if (props.menu) {
-				if (menu.length > 0) menu.push(null);
-				menu = menu.concat(props.menu);
-			}
-			popupMenu(menu, ev.currentTarget ?? ev.target);
-		};
-
-		const showTabsPopup = (ev: MouseEvent) => {
-			if (!hasTabs.value) return;
-			if (!narrow.value) return;
-			ev.preventDefault();
-			ev.stopPropagation();
-			const menu = props.info.tabs.map(tab => ({
-				text: tab.title,
-				icon: tab.icon,
-				action: tab.onClick,
-			}));
-			popupMenu(menu, ev.currentTarget ?? ev.target);
-		};
-
-		const preventDrag = (ev: TouchEvent) => {
-			ev.stopPropagation();
-		};
-
-		const onClick = () => {
-			scrollToTop(el.value, { behavior: 'smooth' });
-		};
-
-		const calcBg = () => {
-			const rawBg = props.info?.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);
-			onUnmounted(() => {
-				globalEvents.off('themeChanged', calcBg);
-			});
-		
-			if (el.value.parentElement) {
-				narrow.value = el.value.parentElement.offsetWidth < 500;
-				const ro = new ResizeObserver((entries, observer) => {
-					if (el.value) {
-						narrow.value = el.value.parentElement.offsetWidth < 500;
-					}
-				});
-				ro.observe(el.value.parentElement);
-				onUnmounted(() => {
-					ro.disconnect();
-				});
-			}
-		});
-
-		return {
-			el,
-			bg,
-			narrow,
-			height,
-			hasTabs,
-			shouldShowMenu,
-			share,
-			showMenu,
-			showTabsPopup,
-			preventDrag,
-			onClick,
-			hideTitle: inject('shouldOmitHeaderTitle', false),
-			thin_: props.thin || inject('shouldHeaderThin', false)
-		};
-	},
-});
-</script>
-
-<style lang="scss" scoped>
-.fdidabkb {
-	--height: 60px;
-	display: flex;
-	position: sticky;
-	top: var(--stickyTop, 0);
-	z-index: 1000;
-	width: 100%;
-	-webkit-backdrop-filter: var(--blur, blur(15px));
-	backdrop-filter: var(--blur, blur(15px));
-	border-bottom: solid 0.5px var(--divider);
-
-	&.thin {
-		--height: 50px;
-
-		> .buttons {
-			> .button {
-				font-size: 0.9em;
-			}
-		}
-	}
-
-	&.slim {
-		text-align: center;
-
-		> .titleContainer {
-			flex: 1;
-			margin: 0 auto;
-			margin-left: var(--height);
-
-			> *:first-child {
-				margin-left: auto;
-			}
-
-			> *:last-child {
-				margin-right: auto;
-			}
-		}
-	}
-
-	> .buttons {
-		--margin: 8px;
-		display: flex;
-    align-items: center;
-		height: var(--height);
-		margin: 0 var(--margin);
-
-		&.right {
-			margin-left: auto;
-		}
-
-		&:empty {
-			width: var(--height);
-		}
-
-		> .button {
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			height: calc(var(--height) - (var(--margin) * 2));
-			width: calc(var(--height) - (var(--margin) * 2));
-			box-sizing: border-box;
-			position: relative;
-			border-radius: 5px;
-
-			&:hover {
-				background: rgba(0, 0, 0, 0.05);
-			}
-
-			&.highlighted {
-				color: var(--accent);
-			}
-		}
-
-		> .fullButton {
-			& + .fullButton {
-				margin-left: 12px;
-			}
-		}
-	}
-
-	> .titleContainer {
-		display: flex;
-		align-items: center;
-		max-width: 400px;
-		overflow: auto;
-		white-space: nowrap;
-		text-align: left;
-		font-weight: bold;
-		flex-shrink: 0;
-		margin-left: 24px;
-
-		> .avatar {
-			$size: 32px;
-			display: inline-block;
-			width: $size;
-			height: $size;
-			vertical-align: bottom;
-			margin: 0 8px;
-			pointer-events: none;
-		}
-
-		> .icon {
-			margin-right: 8px;
-		}
-
-		> .title {
-			min-width: 0;
-			overflow: hidden;
-			text-overflow: ellipsis;
-			white-space: nowrap;
-			line-height: 1.1;
-
-			> .subtitle {
-				opacity: 0.6;
-				font-size: 0.8em;
-				font-weight: normal;
-				white-space: nowrap;
-				overflow: hidden;
-				text-overflow: ellipsis;
-
-				&.activeTab {
-					text-align: center;
-
-					> .chevron {
-						display: inline-block;
-						margin-left: 6px;
-					}
-				}
-			}
-		}
-	}
-
-	> .tabs {
-		margin-left: 16px;
-		font-size: 0.8em;
-		overflow: auto;
-		white-space: nowrap;
-
-		> .tab {
-			display: inline-block;
-			position: relative;
-			padding: 0 10px;
-			height: 100%;
-			font-weight: normal;
-			opacity: 0.7;
-
-			&:hover {
-				opacity: 1;
-			}
-
-			&.active {
-				opacity: 1;
-
-				&:after {
-					content: "";
-					display: block;
-					position: absolute;
-					bottom: 0;
-					left: 0;
-					right: 0;
-					margin: 0 auto;
-					width: 100%;
-					height: 3px;
-					background: var(--accent);
-				}
-			}
-
-			> .icon + .title {
-				margin-left: 8px;
-			}
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/components/global/page-header.vue b/packages/client/src/components/global/page-header.vue
new file mode 100644
index 0000000000..c01631c6a3
--- /dev/null
+++ b/packages/client/src/components/global/page-header.vue
@@ -0,0 +1,300 @@
+<template>
+<div v-if="show" ref="el" class="fdidabkb" :class="{ slim: narrow, thin: thin_ }" :style="{ background: bg }" @click="onClick">
+	<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" 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" class="title">{{ metadata.title }}</div>
+				<div v-if="!narrow && metadata.subtitle" class="subtitle">
+					{{ metadata.subtitle }}
+				</div>
+				<div v-if="narrow && hasTabs" class="subtitle activeTab">
+					{{ tabs.find(tab => tab.active)?.title }}
+					<i class="chevron fas fa-chevron-down"></i>
+				</div>
+			</div>
+		</div>
+		<div v-if="!narrow || hideTitle" class="tabs">
+			<button v-for="tab in tabs" v-tooltip="tab.title" class="tab _button" :class="{ active: tab.active }" @click="tab.onClick">
+				<i v-if="tab.icon" class="icon" :class="tab.icon"></i>
+				<span v-if="!tab.iconOnly" class="title">{{ tab.title }}</span>
+			</button>
+		</div>
+	</template>
+	<div class="buttons right">
+		<template v-for="action in actions">
+			<button v-tooltip="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 } from 'vue';
+import tinycolor from 'tinycolor2';
+import { popupMenu } from '@/os';
+import { scrollToTop } from '@/scripts/scroll';
+import { i18n } from '@/i18n';
+import { globalEvents } from '@/events';
+import { injectPageMetadata, PageMetadata } from '@/scripts/page-metadata';
+
+const props = defineProps<{
+	tabs?: {
+		title: string;
+		active: boolean;
+		icon?: string;
+		iconOnly?: boolean;
+		onClick: () => void;
+	}[];
+	actions?: {
+		text: string;
+		icon: string;
+		handler: (ev: MouseEvent) => void;
+	}[];
+	thin?: boolean;
+}>();
+
+const metadata = injectPageMetadata();
+
+const hideTitle = inject('shouldOmitHeaderTitle', false);
+const thin_ = props.thin || inject('shouldHeaderThin', false);
+
+const el = $ref<HTMLElement | null>(null);
+const bg = ref(null);
+let narrow = $ref(false);
+const height = ref(0);
+const hasTabs = $computed(() => props.tabs && props.tabs.length > 0);
+const hasActions = $computed(() => props.actions && props.actions.length > 0);
+const show = $computed(() => {
+	return !hideTitle || hasTabs || hasActions;
+});
+
+const showTabsPopup = (ev: MouseEvent) => {
+	if (!hasTabs) return;
+	if (!narrow) return;
+	ev.preventDefault();
+	ev.stopPropagation();
+	const menu = props.tabs.map(tab => ({
+		text: tab.title,
+		icon: tab.icon,
+		action: tab.onClick,
+	}));
+	popupMenu(menu, ev.currentTarget ?? ev.target);
+};
+
+const preventDrag = (ev: TouchEvent) => {
+	ev.stopPropagation();
+};
+
+const onClick = () => {
+	scrollToTop(el, { behavior: 'smooth' });
+};
+
+const calcBg = () => {
+	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();
+};
+
+let ro: ResizeObserver | null;
+
+onMounted(() => {
+	calcBg();
+	globalEvents.on('themeChanged', calcBg);
+
+	if (el && el.parentElement) {
+		narrow = el.parentElement.offsetWidth < 500;
+		ro = new ResizeObserver((entries, observer) => {
+			if (el.parentElement) {
+				narrow = el.parentElement.offsetWidth < 500;
+			}
+		});
+		ro.observe(el.parentElement);
+	}
+});
+
+onUnmounted(() => {
+	globalEvents.off('themeChanged', calcBg);
+	if (ro) ro.disconnect();
+});
+</script>
+
+<style lang="scss" scoped>
+.fdidabkb {
+	--height: 60px;
+	display: flex;
+	position: sticky;
+	top: var(--stickyTop, 0);
+	z-index: 1000;
+	width: 100%;
+	-webkit-backdrop-filter: var(--blur, blur(15px));
+	backdrop-filter: var(--blur, blur(15px));
+	border-bottom: solid 0.5px var(--divider);
+
+	&.thin {
+		--height: 50px;
+
+		> .buttons {
+			> .button {
+				font-size: 0.9em;
+			}
+		}
+	}
+
+	&.slim {
+		text-align: center;
+
+		> .titleContainer {
+			flex: 1;
+			margin: 0 auto;
+			margin-left: var(--height);
+
+			> *:first-child {
+				margin-left: auto;
+			}
+
+			> *:last-child {
+				margin-right: auto;
+			}
+		}
+	}
+
+	> .buttons {
+		--margin: 8px;
+		display: flex;
+    align-items: center;
+		height: var(--height);
+		margin: 0 var(--margin);
+
+		&.right {
+			margin-left: auto;
+		}
+
+		&:empty {
+			width: var(--height);
+		}
+
+		> .button {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			height: calc(var(--height) - (var(--margin) * 2));
+			width: calc(var(--height) - (var(--margin) * 2));
+			box-sizing: border-box;
+			position: relative;
+			border-radius: 5px;
+
+			&:hover {
+				background: rgba(0, 0, 0, 0.05);
+			}
+
+			&.highlighted {
+				color: var(--accent);
+			}
+		}
+
+		> .fullButton {
+			& + .fullButton {
+				margin-left: 12px;
+			}
+		}
+	}
+
+	> .titleContainer {
+		display: flex;
+		align-items: center;
+		max-width: 400px;
+		overflow: auto;
+		white-space: nowrap;
+		text-align: left;
+		font-weight: bold;
+		flex-shrink: 0;
+		margin-left: 24px;
+
+		> .avatar {
+			$size: 32px;
+			display: inline-block;
+			width: $size;
+			height: $size;
+			vertical-align: bottom;
+			margin: 0 8px;
+			pointer-events: none;
+		}
+
+		> .icon {
+			margin-right: 8px;
+		}
+
+		> .title {
+			min-width: 0;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+			line-height: 1.1;
+
+			> .subtitle {
+				opacity: 0.6;
+				font-size: 0.8em;
+				font-weight: normal;
+				white-space: nowrap;
+				overflow: hidden;
+				text-overflow: ellipsis;
+
+				&.activeTab {
+					text-align: center;
+
+					> .chevron {
+						display: inline-block;
+						margin-left: 6px;
+					}
+				}
+			}
+		}
+	}
+
+	> .tabs {
+		margin-left: 16px;
+		font-size: 0.8em;
+		overflow: auto;
+		white-space: nowrap;
+
+		> .tab {
+			display: inline-block;
+			position: relative;
+			padding: 0 10px;
+			height: 100%;
+			font-weight: normal;
+			opacity: 0.7;
+
+			&:hover {
+				opacity: 1;
+			}
+
+			&.active {
+				opacity: 1;
+
+				&:after {
+					content: "";
+					display: block;
+					position: absolute;
+					bottom: 0;
+					left: 0;
+					right: 0;
+					margin: 0 auto;
+					width: 100%;
+					height: 3px;
+					background: var(--accent);
+				}
+			}
+
+			> .icon + .title {
+				margin-left: 8px;
+			}
+		}
+	}
+}
+</style>
diff --git a/packages/client/src/components/global/router-view.vue b/packages/client/src/components/global/router-view.vue
new file mode 100644
index 0000000000..393ba30c3d
--- /dev/null
+++ b/packages/client/src/components/global/router-view.vue
@@ -0,0 +1,39 @@
+<template>
+<KeepAlive max="5">
+	<component :is="currentPageComponent" :key="key" v-bind="Object.fromEntries(currentPageProps)"/>
+</KeepAlive>
+</template>
+
+<script lang="ts" setup>
+import { inject, nextTick, onMounted, onUnmounted, watch } from 'vue';
+import { Router } from '@/nirax';
+
+const props = defineProps<{
+	router?: Router;
+}>();
+
+const emit = defineEmits<{
+}>();
+
+const router = props.router ?? inject('router');
+
+if (router == null) {
+	throw new Error('no router provided');
+}
+
+let currentPageComponent = $ref(router.getCurrentComponent());
+let currentPageProps = $ref(router.getCurrentProps());
+let key = $ref(router.getCurrentKey());
+
+function onChange({ route, props: newProps, key: newKey }) {
+	currentPageComponent = route.component;
+	currentPageProps = newProps;
+	key = newKey;
+}
+
+router.addListener('change', onChange);
+
+onUnmounted(() => {
+	router.removeListener('change', onChange);
+});
+</script>
diff --git a/packages/client/src/components/index.ts b/packages/client/src/components/index.ts
index 26bac63245..aa8a591e51 100644
--- a/packages/client/src/components/index.ts
+++ b/packages/client/src/components/index.ts
@@ -10,15 +10,17 @@ import MkEllipsis from './global/ellipsis.vue';
 import MkTime from './global/time.vue';
 import MkUrl from './global/url.vue';
 import I18n from './global/i18n';
+import RouterView from './global/router-view.vue';
 import MkLoading from './global/loading.vue';
 import MkError from './global/error.vue';
 import MkAd from './global/ad.vue';
-import MkHeader from './global/header.vue';
+import MkPageHeader from './global/page-header.vue';
 import MkSpacer from './global/spacer.vue';
 import MkStickyContainer from './global/sticky-container.vue';
 
 export default function(app: App) {
 	app.component('I18n', I18n);
+	app.component('RouterView', RouterView);
 	app.component('Mfm', Mfm);
 	app.component('MkA', MkA);
 	app.component('MkAcct', MkAcct);
@@ -31,7 +33,7 @@ export default function(app: App) {
 	app.component('MkLoading', MkLoading);
 	app.component('MkError', MkError);
 	app.component('MkAd', MkAd);
-	app.component('MkHeader', MkHeader);
+	app.component('MkPageHeader', MkPageHeader);
 	app.component('MkSpacer', MkSpacer);
 	app.component('MkStickyContainer', MkStickyContainer);
 }
@@ -39,6 +41,7 @@ export default function(app: App) {
 declare module '@vue/runtime-core' {
 	export interface GlobalComponents {
 		I18n: typeof I18n;
+		RouterView: typeof RouterView;
 		Mfm: typeof Mfm;
 		MkA: typeof MkA;
 		MkAcct: typeof MkAcct;
@@ -51,7 +54,7 @@ declare module '@vue/runtime-core' {
 		MkLoading: typeof MkLoading;
 		MkError: typeof MkError;
 		MkAd: typeof MkAd;
-		MkHeader: typeof MkHeader;
+		MkPageHeader: typeof MkPageHeader;
 		MkSpacer: typeof MkSpacer;
 		MkStickyContainer: typeof MkStickyContainer;
 	}
diff --git a/packages/client/src/components/modal-page-window.vue b/packages/client/src/components/modal-page-window.vue
index 21bdb657b7..aef70f113b 100644
--- a/packages/client/src/components/modal-page-window.vue
+++ b/packages/client/src/components/modal-page-window.vue
@@ -1,163 +1,118 @@
 <template>
 <MkModal ref="modal" @click="$emit('click')" @closed="$emit('closed')">
-	<div class="hrmcaedk _window _narrow_" :style="{ width: `${width}px`, height: (height ? `min(${height}px, 100%)` : '100%') }">
+	<div ref="rootEl" class="hrmcaedk _window _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="$ts.goBack" class="_button" @click="back()"><i class="fas fa-arrow-left"></i></button>
 			<span v-else style="display: inline-block; width: 20px"></span>
-			<span v-if="pageInfo" class="title">
-				<i v-if="pageInfo.icon" class="icon" :class="pageInfo.icon"></i>
-				<span>{{ pageInfo.title }}</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="fas fa-times"></i></button>
 		</div>
 		<div class="body">
 			<MkStickyContainer>
-				<template #header><MkHeader v-if="pageInfo && !pageInfo.hideHeader" :info="pageInfo"/></template>
-				<keep-alive>
-					<component :is="component" v-bind="props" :ref="changePage"/>
-				</keep-alive>
+				<template #header><MkPageHeader v-if="pageMetadata?.value && !pageMetadata?.value.hideHeader" :info="pageMetadata?.value"/></template>
+				<RouterView :router="router"/>
 			</MkStickyContainer>
 		</div>
 	</div>
 </MkModal>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
+import { ComputedRef, provide } from 'vue';
 import MkModal from '@/components/ui/modal.vue';
-import { popout } from '@/scripts/popout';
+import { popout as _popout } from '@/scripts/popout';
 import copyToClipboard from '@/scripts/copy-to-clipboard';
-import { resolve } from '@/router';
 import { url } from '@/config';
-import * as symbols from '@/symbols';
 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';
 
-export default defineComponent({
-	components: {
-		MkModal,
-	},
+const props = defineProps<{
+	initialPath: string;
+}>();
 
-	inject: {
-		sideViewHook: {
-			default: null,
-		},
-	},
+defineEmits<{
+	(ev: 'closed'): void;
+	(ev: 'click'): void;
+}>();
 
-	provide() {
-		return {
-			navHook: (path) => {
-				this.navigate(path);
-			},
-			shouldHeaderThin: true,
-		};
-	},
+const router = new Router(routes, props.initialPath);
 
-	props: {
-		initialPath: {
-			type: String,
-			required: true,
-		},
-		initialComponent: {
-			type: Object,
-			required: true,
-		},
-		initialProps: {
-			type: Object,
-			required: false,
-			default: () => {},
-		},
-	},
-
-	emits: ['closed'],
-
-	data() {
-		return {
-			width: 860,
-			height: 660,
-			pageInfo: null,
-			path: this.initialPath,
-			component: this.initialComponent,
-			props: this.initialProps,
-			history: [],
-		};
-	},
-
-	computed: {
-		url(): string {
-			return url + this.path;
-		},
-
-		contextmenu() {
-			return [{
-				type: 'label',
-				text: this.path,
-			}, {
-				icon: 'fas fa-expand-alt',
-				text: this.$ts.showInPage,
-				action: this.expand,
-			}, this.sideViewHook ? {
-				icon: 'fas fa-columns',
-				text: this.$ts.openInSideView,
-				action: () => {
-					this.sideViewHook(this.path);
-					this.$refs.window.close();
-				},
-			} : undefined, {
-				icon: 'fas fa-external-link-alt',
-				text: this.$ts.popout,
-				action: this.popout,
-			}, null, {
-				icon: 'fas fa-external-link-alt',
-				text: this.$ts.openInNewTab,
-				action: () => {
-					window.open(this.url, '_blank');
-					this.$refs.window.close();
-				},
-			}, {
-				icon: 'fas fa-link',
-				text: this.$ts.copyLink,
-				action: () => {
-					copyToClipboard(this.url);
-				},
-			}];
-		},
-	},
-
-	methods: {
-		changePage(page) {
-			if (page == null) return;
-			if (page[symbols.PAGE_INFO]) {
-				this.pageInfo = page[symbols.PAGE_INFO];
-			}
-		},
-
-		navigate(path, record = true) {
-			if (record) this.history.push(this.path);
-			this.path = path;
-			const { component, props } = resolve(path);
-			this.component = component;
-			this.props = props;
-		},
-
-		back() {
-			this.navigate(this.history.pop(), false);
-		},
-
-		expand() {
-			this.$router.push(this.path);
-			this.$refs.window.close();
-		},
-
-		popout() {
-			popout(this.path, this.$el);
-			this.$refs.window.close();
-		},
-
-		onContextmenu(ev: MouseEvent) {
-			os.contextMenu(this.contextmenu, ev);
-		},
-	},
+router.addListener('push', ctx => {
+	
 });
+
+let pageMetadata = $ref<null | ComputedRef<PageMetadata>>();
+let rootEl = $ref();
+let modal = $ref<InstanceType<typeof MkModal>>();
+let path = $ref(props.initialPath);
+let width = $ref(860);
+let height = $ref(660);
+const history = [];
+
+provide('router', router);
+provideMetadataReceiver((info) => {
+	pageMetadata = info;
+});
+provide('shouldOmitHeaderTitle', true);
+provide('shouldHeaderThin', true);
+
+const pageUrl = $computed(() => url + path);
+const contextmenu = $computed(() => {
+	return [{
+		type: 'label',
+		text: path,
+	}, {
+		icon: 'fas fa-expand-alt',
+		text: i18n.ts.showInPage,
+		action: expand,
+	}, {
+		icon: 'fas fa-external-link-alt',
+		text: i18n.ts.popout,
+		action: popout,
+	}, null, {
+		icon: 'fas fa-external-link-alt',
+		text: i18n.ts.openInNewTab,
+		action: () => {
+			window.open(pageUrl, '_blank');
+			modal.close();
+		},
+	}, {
+		icon: 'fas fa-link',
+		text: i18n.ts.copyLink,
+		action: () => {
+			copyToClipboard(pageUrl);
+		},
+	}];
+});
+
+function navigate(path, record = true) {
+	if (record) history.push(router.getCurrentPath());
+	router.push(path);
+}
+
+function back() {
+	navigate(history.pop(), false);
+}
+
+function expand() {
+	mainRouter.push(path);
+	modal.close();
+}
+
+function popout() {
+	_popout(path, rootEl);
+	modal.close();
+}
+
+function onContextmenu(ev: MouseEvent) {
+	os.contextMenu(contextmenu, ev);
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/components/note.vue b/packages/client/src/components/note.vue
index 9ec1e53c1e..c2c92f541d 100644
--- a/packages/client/src/components/note.vue
+++ b/packages/client/src/components/note.vue
@@ -225,7 +225,7 @@ function undoReact(note): void {
 	});
 }
 
-const currentClipPage = inject<Ref<misskey.entities.Clip>>('currentClipPage');
+const currentClipPage = inject<Ref<misskey.entities.Clip> | null>('currentClipPage', null);
 
 function onContextmenu(ev: MouseEvent): void {
 	const isLink = (el: HTMLElement) => {
diff --git a/packages/client/src/components/page-window.vue b/packages/client/src/components/page-window.vue
index 7455236bad..7de09d3be4 100644
--- a/packages/client/src/components/page-window.vue
+++ b/packages/client/src/components/page-window.vue
@@ -1,186 +1,135 @@
 <template>
-<XWindow ref="window"
+<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="pageInfo">
-			<i v-if="pageInfo.icon" class="icon" :class="pageInfo.icon" style="margin-right: 0.5em;"></i>
-			<span>{{ pageInfo.title }}</span>
+		<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 #headerLeft>
-		<button v-if="history.length > 0" v-tooltip="$ts.goBack" class="_button" @click="back()"><i class="fas fa-arrow-left"></i></button>
-	</template>
-	<template #headerRight>
-		<button v-tooltip="$ts.showInPage" class="_button" @click="expand()"><i class="fas fa-expand-alt"></i></button>
-		<button v-tooltip="$ts.popout" class="_button" @click="popout()"><i class="fas fa-external-link-alt"></i></button>
-		<button class="_button" @click="menu"><i class="fas fa-ellipsis-h"></i></button>
-	</template>
 
-	<div class="yrolvcoq" :style="{ background: pageInfo?.bg }">
-		<MkStickyContainer>
-			<template #header><MkHeader v-if="pageInfo && !pageInfo.hideHeader" :info="pageInfo"/></template>
-			<component :is="component" v-bind="props" :ref="changePage"/>
-		</MkStickyContainer>
+	<div class="yrolvcoq" :style="{ background: pageMetadata?.value?.bg }">
+		<RouterView :router="router"/>
 	</div>
 </XWindow>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
+import { ComputedRef, inject, provide } from 'vue';
+import RouterView from './global/router-view.vue';
 import XWindow from '@/components/ui/window.vue';
-import { popout } from '@/scripts/popout';
+import { popout as _popout } from '@/scripts/popout';
 import copyToClipboard from '@/scripts/copy-to-clipboard';
-import { resolve } from '@/router';
 import { url } from '@/config';
-import * as symbols from '@/symbols';
 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';
 
-export default defineComponent({
-	components: {
-		XWindow,
+const props = defineProps<{
+	initialPath: string;
+}>();
+
+defineEmits<{
+	(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<string[]>([props.initialPath]);
+const buttonsLeft = $computed(() => {
+	const buttons = [];
+
+	if (history.length > 1) {
+		buttons.push({
+			icon: 'fas fa-arrow-left',
+			onClick: back,
+		});
+	}
+
+	return buttons;
+});
+const buttonsRight = $computed(() => {
+	const buttons = [{
+		icon: 'fas fa-expand-alt',
+		title: i18n.ts.showInPage,
+		onClick: expand,
+	}];
+
+	return buttons;
+});
+
+router.addListener('push', ctx => {
+	history.push(router.getCurrentPath());
+});
+
+provide('router', router);
+provideMetadataReceiver((info) => {
+	pageMetadata = info;
+});
+provide('shouldOmitHeaderTitle', true);
+provide('shouldHeaderThin', true);
+
+const contextmenu = $computed(() => ([{
+	icon: 'fas fa-expand-alt',
+	text: i18n.ts.showInPage,
+	action: expand,
+}, {
+	icon: 'fas fa-external-link-alt',
+	text: i18n.ts.popout,
+	action: popout,
+}, {
+	icon: 'fas fa-external-link-alt',
+	text: i18n.ts.openInNewTab,
+	action: () => {
+		window.open(url + router.getCurrentPath(), '_blank');
+		windowEl.close();
 	},
-
-	inject: {
-		sideViewHook: {
-			default: null
-		}
+}, {
+	icon: 'fas fa-link',
+	text: i18n.ts.copyLink,
+	action: () => {
+		copyToClipboard(url + router.getCurrentPath());
 	},
+}]));
 
-	provide() {
-		return {
-			navHook: (path) => {
-				this.navigate(path);
-			},
-			shouldHeaderThin: true,
-		};
-	},
+function menu(ev) {
+	os.popupMenu(contextmenu, ev.currentTarget ?? ev.target);
+}
 
-	props: {
-		initialPath: {
-			type: String,
-			required: true,
-		},
-		initialComponent: {
-			type: Object,
-			required: true,
-		},
-		initialProps: {
-			type: Object,
-			required: false,
-			default: () => {},
-		},
-	},
+function back() {
+	history.pop();
+	router.change(history[history.length - 1]);
+}
 
-	emits: ['closed'],
+function close() {
+	windowEl.close();
+}
 
-	data() {
-		return {
-			pageInfo: null,
-			path: this.initialPath,
-			component: this.initialComponent,
-			props: this.initialProps,
-			history: [],
-		};
-	},
+function expand() {
+	mainRouter.push(router.getCurrentPath());
+	windowEl.close();
+}
 
-	computed: {
-		url(): string {
-			return url + this.path;
-		},
+function popout() {
+	_popout(router.getCurrentPath(), windowEl.$el);
+	windowEl.close();
+}
 
-		contextmenu() {
-			return [{
-				type: 'label',
-				text: this.path,
-			}, {
-				icon: 'fas fa-expand-alt',
-				text: this.$ts.showInPage,
-				action: this.expand
-			}, this.sideViewHook ? {
-				icon: 'fas fa-columns',
-				text: this.$ts.openInSideView,
-				action: () => {
-					this.sideViewHook(this.path);
-					this.$refs.window.close();
-				}
-			} : undefined, {
-				icon: 'fas fa-external-link-alt',
-				text: this.$ts.popout,
-				action: this.popout
-			}, null, {
-				icon: 'fas fa-external-link-alt',
-				text: this.$ts.openInNewTab,
-				action: () => {
-					window.open(this.url, '_blank');
-					this.$refs.window.close();
-				}
-			}, {
-				icon: 'fas fa-link',
-				text: this.$ts.copyLink,
-				action: () => {
-					copyToClipboard(this.url);
-				}
-			}];
-		},
-	},
-
-	methods: {
-		changePage(page) {
-			if (page == null) return;
-			if (page[symbols.PAGE_INFO]) {
-				this.pageInfo = page[symbols.PAGE_INFO];
-			}
-		},
-
-		navigate(path, record = true) {
-			if (record) this.history.push(this.path);
-			this.path = path;
-			const { component, props } = resolve(path);
-			this.component = component;
-			this.props = props;
-		},
-
-		menu(ev) {
-			os.popupMenu([{
-				icon: 'fas fa-external-link-alt',
-				text: this.$ts.openInNewTab,
-				action: () => {
-					window.open(this.url, '_blank');
-					this.$refs.window.close();
-				}
-			}, {
-				icon: 'fas fa-link',
-				text: this.$ts.copyLink,
-				action: () => {
-					copyToClipboard(this.url);
-				}
-			}], ev.currentTarget ?? ev.target);
-		},
-
-		back() {
-			this.navigate(this.history.pop(), false);
-		},
-
-		close() {
-			this.$refs.window.close();
-		},
-
-		expand() {
-			this.$router.push(this.path);
-			this.$refs.window.close();
-		},
-
-		popout() {
-			popout(this.path, this.$el);
-			this.$refs.window.close();
-		},
-	},
+defineExpose({
+	close,
 });
 </script>
 
diff --git a/packages/client/src/components/ui/window.vue b/packages/client/src/components/ui/window.vue
index 2066cf579d..3cd4378f03 100644
--- a/packages/client/src/components/ui/window.vue
+++ b/packages/client/src/components/ui/window.vue
@@ -4,14 +4,14 @@
 		<div class="body _window _shadow _narrow_" @mousedown="onBodyMousedown" @keydown="onKeydown">
 			<div class="header" :class="{ mini }" @contextmenu.prevent.stop="onContextmenu">
 				<span class="left">
-					<slot name="headerLeft"></slot>
+					<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">
-					<slot name="headerRight"></slot>
-					<button v-if="closeButton" class="_button" @click="close()"><i class="fas fa-times"></i></button>
+					<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="closeButton" class="button _button" @click="close()"><i class="fas fa-times"></i></button>
 				</span>
 			</div>
 			<div v-if="padding" class="body">
@@ -46,41 +46,41 @@ const minHeight = 50;
 const minWidth = 250;
 
 function dragListen(fn) {
-	window.addEventListener('mousemove',  fn);
-	window.addEventListener('touchmove',  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));
+	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('mousemove', fn);
+	window.removeEventListener('touchmove', fn);
 	window.removeEventListener('mouseleave', dragClear);
-	window.removeEventListener('mouseup',    dragClear);
-	window.removeEventListener('touchend',   dragClear);
+	window.removeEventListener('mouseup', dragClear);
+	window.removeEventListener('touchend', dragClear);
 }
 
 export default defineComponent({
 	provide: {
-		inWindow: true
+		inWindow: true,
 	},
 
 	props: {
 		padding: {
 			type: Boolean,
 			required: false,
-			default: false
+			default: false,
 		},
 		initialWidth: {
 			type: Number,
 			required: false,
-			default: 400
+			default: 400,
 		},
 		initialHeight: {
 			type: Number,
 			required: false,
-			default: null
+			default: null,
 		},
 		canResize: {
 			type: Boolean,
@@ -105,7 +105,17 @@ export default defineComponent({
 		contextmenu: {
 			type: Array,
 			required: false,
-		}
+		},
+		buttonsLeft: {
+			type: Array,
+			required: false,
+			default: [],
+		},
+		buttonsRight: {
+			type: Array,
+			required: false,
+			default: [],
+		},
 	},
 
 	emits: ['closed'],
@@ -162,7 +172,10 @@ export default defineComponent({
 			this.top();
 		},
 
-		onHeaderMousedown(evt) {
+		onHeaderMousedown(evt: MouseEvent) {
+			// 右クリックはコンテキストメニューを開こうとした可能性が高いため無視
+			if (evt.button === 2) return;
+
 			const main = this.$el as any;
 
 			if (!contains(main, document.activeElement)) main.focus();
@@ -356,12 +369,12 @@ export default defineComponent({
 			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; // 上はみ出し
+		},
+	},
 });
 </script>
 
@@ -404,17 +417,25 @@ export default defineComponent({
 			border-bottom: solid 1px var(--divider);
 
 			> .left, > .right {
-				> ::v-deep(button) {
+				> .button {
 					height: var(--height);
 					width: var(--height);
 
 					&:hover {
 						color: var(--fgHighlighted);
 					}
+
+					&.highlighted {
+						color: var(--accent);
+					}
 				}
 			}
 
 			> .left {
+				margin-right: 16px;
+			}
+
+			> .right {
 				min-width: 16px;
 			}
 
diff --git a/packages/client/src/init.ts b/packages/client/src/init.ts
index bb6176e409..a11dd2d050 100644
--- a/packages/client/src/init.ts
+++ b/packages/client/src/init.ts
@@ -21,7 +21,6 @@ import widgets from '@/widgets';
 import directives from '@/directives';
 import components from '@/components';
 import { version, ui, lang, host } from '@/config';
-import { router } from '@/router';
 import { applyTheme } from '@/scripts/theme';
 import { isDeviceDarkmode } from '@/scripts/is-device-darkmode';
 import { i18n } from '@/i18n';
@@ -170,11 +169,10 @@ fetchInstanceMetaPromise.then(() => {
 
 const app = createApp(
 	window.location.search === '?zen' ? defineAsyncComponent(() => import('@/ui/zen.vue')) :
-	!$i                               ? defineAsyncComponent(() => import('@/ui/visitor.vue')) :
-	ui === 'deck'                     ? defineAsyncComponent(() => import('@/ui/deck.vue')) :
-	ui === 'desktop'                  ? defineAsyncComponent(() => import('@/ui/desktop.vue')) :
-	ui === 'classic'                  ? defineAsyncComponent(() => import('@/ui/classic.vue')) :
-	defineAsyncComponent(() => import('@/ui/universal.vue'))
+	!$i ? defineAsyncComponent(() => import('@/ui/visitor.vue')) :
+	ui === 'deck' ? defineAsyncComponent(() => import('@/ui/deck.vue')) :
+	ui === 'classic' ? defineAsyncComponent(() => import('@/ui/classic.vue')) :
+	defineAsyncComponent(() => import('@/ui/universal.vue')),
 );
 
 if (_DEV_) {
@@ -189,14 +187,10 @@ app.config.globalProperties = {
 	$ts: i18n.ts,
 };
 
-app.use(router);
-
 widgets(app);
 directives(app);
 components(app);
 
-await router.isReady();
-
 const splash = document.getElementById('splash');
 // 念のためnullチェック(HTMLが古い場合があるため(そのうち消す))
 if (splash) splash.addEventListener('transitionend', () => {
diff --git a/packages/client/src/menu.ts b/packages/client/src/menu.ts
index ebc7898101..5e281f4ea1 100644
--- a/packages/client/src/menu.ts
+++ b/packages/client/src/menu.ts
@@ -1,11 +1,11 @@
 import { computed, ref, reactive } from 'vue';
+import { $i } from './account';
+import { mainRouter } from '@/router';
 import { search } from '@/scripts/search';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
 import { ui } from '@/config';
-import { $i } from './account';
 import { unisonReload } from '@/scripts/unison-reload';
-import { router } from './router';
 
 export const menuDef = reactive({
 	notifications: {
@@ -60,16 +60,16 @@ export const menuDef = reactive({
 		title: 'lists',
 		icon: 'fas fa-list-ul',
 		show: computed(() => $i != null),
-		active: computed(() => router.currentRoute.value.path.startsWith('/timeline/list/') || router.currentRoute.value.path === '/my/lists' || router.currentRoute.value.path.startsWith('/my/lists/')),
+		active: computed(() => mainRouter.currentRoute.value.path.startsWith('/timeline/list/') || mainRouter.currentRoute.value.path === '/my/lists' || mainRouter.currentRoute.value.path.startsWith('/my/lists/')),
 		action: (ev) => {
 			const items = ref([{
-				type: 'pending'
+				type: 'pending',
 			}]);
 			os.api('users/lists/list').then(lists => {
 				const _items = [...lists.map(list => ({
 					type: 'link',
 					text: list.name,
-					to: `/timeline/list/${list.id}`
+					to: `/timeline/list/${list.id}`,
 				})), null, {
 					type: 'link',
 					to: '/my/lists',
@@ -91,16 +91,16 @@ export const menuDef = reactive({
 		title: 'antennas',
 		icon: 'fas fa-satellite',
 		show: computed(() => $i != null),
-		active: computed(() => router.currentRoute.value.path.startsWith('/timeline/antenna/') || router.currentRoute.value.path === '/my/antennas' || router.currentRoute.value.path.startsWith('/my/antennas/')),
+		active: computed(() => mainRouter.currentRoute.value.path.startsWith('/timeline/antenna/') || mainRouter.currentRoute.value.path === '/my/antennas' || mainRouter.currentRoute.value.path.startsWith('/my/antennas/')),
 		action: (ev) => {
 			const items = ref([{
-				type: 'pending'
+				type: 'pending',
 			}]);
 			os.api('antennas/list').then(antennas => {
 				const _items = [...antennas.map(antenna => ({
 					type: 'link',
 					text: antenna.name,
-					to: `/timeline/antenna/${antenna.id}`
+					to: `/timeline/antenna/${antenna.id}`,
 				})), null, {
 					type: 'link',
 					to: '/my/antennas',
@@ -178,29 +178,22 @@ export const menuDef = reactive({
 				action: () => {
 					localStorage.setItem('ui', 'default');
 					unisonReload();
-				}
+				},
 			}, {
 				text: i18n.ts.deck,
 				active: ui === 'deck',
 				action: () => {
 					localStorage.setItem('ui', 'deck');
 					unisonReload();
-				}
+				},
 			}, {
 				text: i18n.ts.classic,
 				active: ui === 'classic',
 				action: () => {
 					localStorage.setItem('ui', 'classic');
 					unisonReload();
-				}
-			}, /*{
-				text: i18n.ts.desktop + ' (β)',
-				active: ui === 'desktop',
-				action: () => {
-					localStorage.setItem('ui', 'desktop');
-					unisonReload();
-				}
-			}*/], ev.currentTarget ?? ev.target);
+				},
+			}], ev.currentTarget ?? ev.target);
 		},
 	},
 });
diff --git a/packages/client/src/nirax.ts b/packages/client/src/nirax.ts
new file mode 100644
index 0000000000..6840483c21
--- /dev/null
+++ b/packages/client/src/nirax.ts
@@ -0,0 +1,200 @@
+import { EventEmitter } from 'eventemitter3';
+import { Ref, Component, ref, shallowRef, ShallowRef } from 'vue';
+
+type RouteDef = {
+	path: string;
+	component: Component;
+	query?: Record<string, string>;
+	name?: string;
+	globalCacheKey?: string;
+};
+
+type ParsedPath = (string | {
+	name: string;
+	startsWith?: string;
+	wildcard?: boolean;
+	optional?: boolean;
+})[];
+
+function parsePath(path: string): ParsedPath {
+	const res = [] as ParsedPath;
+
+	path = path.substring(1);
+
+	for (const part of path.split('/')) {
+		if (part.includes(':')) {
+			const prefix = part.substring(0, part.indexOf(':'));
+			const placeholder = part.substring(part.indexOf(':') + 1);
+			const wildcard = placeholder.includes('(*)');
+			const optional = placeholder.endsWith('?');
+			res.push({
+				name: placeholder.replace('(*)', '').replace('?', ''),
+				startsWith: prefix !== '' ? prefix : undefined,
+				wildcard,
+				optional,
+			});
+		} else {
+			res.push(part);
+		}
+	}
+
+	return res;
+}
+
+export class Router extends EventEmitter<{
+	change: (ctx: {
+		beforePath: string;
+		path: string;
+		route: RouteDef | null;
+		props: Map<string, string> | null;
+		key: string;
+	}) => void;
+	push: (ctx: {
+		beforePath: string;
+		path: string;
+		route: RouteDef | null;
+		props: Map<string, string> | null;
+		key: string;
+	}) => void;
+}> {
+	private routes: RouteDef[];
+	private currentPath: string;
+	private currentComponent: Component | null = null;
+	private currentProps: Map<string, string> | null = null;
+	private currentKey = Date.now().toString();
+
+	public currentRoute: ShallowRef<RouteDef | null> = shallowRef(null);
+
+	constructor(routes: Router['routes'], currentPath: Router['currentPath']) {
+		super();
+
+		this.routes = routes;
+		this.currentPath = currentPath;
+		this.navigate(currentPath, null, true);
+	}
+
+	public resolve(path: string): { route: RouteDef; props: Map<string, string>; } | null {
+		let queryString: string | null = null;
+		if (path[0] === '/') path = path.substring(1);
+		if (path.includes('?')) {
+			queryString = path.substring(path.indexOf('?') + 1);
+			path = path.substring(0, path.indexOf('?'));
+		}
+
+		if (_DEV_) console.log('Routing: ', path, queryString);
+
+		forEachRouteLoop:
+		for (const route of this.routes) {
+			let parts = path.split('/');
+			const props = new Map<string, string>();
+
+			pathMatchLoop:
+			for (const p of parsePath(route.path)) {
+				if (typeof p === 'string') {
+					if (p === parts[0]) {
+						parts.shift();
+					} else {
+						continue forEachRouteLoop;
+					}
+				} else {
+					if (parts[0] == null && !p.optional) {
+						continue forEachRouteLoop;
+					}
+					if (p.wildcard) {
+						if (parts.length !== 0) {
+							props.set(p.name, parts.join('/'));
+							parts = [];
+						}
+						break pathMatchLoop;
+					} else {
+						if (p.startsWith && (parts[0] == null || !parts[0].startsWith(p.startsWith))) continue forEachRouteLoop;
+
+						props.set(p.name, parts[0]);
+						parts.shift();
+					}
+				}
+			}
+
+			if (parts.length !== 0) continue forEachRouteLoop;
+
+			if (route.query != null && queryString != null) {
+				const queryObject = [...new URLSearchParams(queryString).entries()]
+					.reduce((obj, entry) => ({ ...obj, [entry[0]]: entry[1] }), {});
+
+				for (const q in route.query) {
+					const as = route.query[q];
+					if (queryObject[q]) {
+						props.set(as, queryObject[q]);
+					}
+				}
+			}
+			return {
+				route,
+				props,
+			};
+		}
+
+		return null;
+	}
+
+	private navigate(path: string, key: string | null | undefined, initial = false) {
+		const beforePath = this.currentPath;
+		const beforeRoute = this.currentRoute.value;
+		this.currentPath = path;
+
+		const res = this.resolve(this.currentPath);
+
+		if (res == null) {
+			throw new Error('no route found for: ' + path);
+		}
+
+		const isSamePath = beforePath === path;
+		if (isSamePath && key == null) key = this.currentKey;
+		this.currentComponent = res.route.component;
+		this.currentProps = res.props;
+		this.currentRoute.value = res.route;
+		this.currentKey = this.currentRoute.value.globalCacheKey ?? key ?? Date.now().toString();
+
+		if (!initial) {
+			this.emit('change', {
+				beforePath,
+				path,
+				route: this.currentRoute.value,
+				props: this.currentProps,
+				key: this.currentKey,
+			});
+		}
+	}
+
+	public getCurrentComponent() {
+		return this.currentComponent;
+	}
+
+	public getCurrentProps() {
+		return this.currentProps;
+	}
+
+	public getCurrentPath() {
+		return this.currentPath;
+	}
+
+	public getCurrentKey() {
+		return this.currentKey;
+	}
+
+	public push(path: string) {
+		const beforePath = this.currentPath;
+		this.navigate(path, null);
+		this.emit('push', {
+			beforePath,
+			path,
+			route: this.currentRoute.value,
+			props: this.currentProps,
+			key: this.currentKey,
+		});
+	}
+
+	public change(path: string, key?: string | null) {
+		this.navigate(path, key);
+	}
+}
diff --git a/packages/client/src/os.ts b/packages/client/src/os.ts
index 14860465fa..e823d3719c 100644
--- a/packages/client/src/os.ts
+++ b/packages/client/src/os.ts
@@ -8,7 +8,6 @@ import { apiUrl, url } from '@/config';
 import MkPostFormDialog from '@/components/post-form-dialog.vue';
 import MkWaitingDialog from '@/components/waiting-dialog.vue';
 import { MenuItem } from '@/types/menu';
-import { resolve } from '@/router';
 import { $i } from '@/account';
 
 export const pendingApiRequestsCount = ref(0);
@@ -155,20 +154,14 @@ export async function popup(component: Component, props: Record<string, any>, ev
 }
 
 export function pageWindow(path: string) {
-	const { component, props } = resolve(path);
 	popup(defineAsyncComponent(() => import('@/components/page-window.vue')), {
 		initialPath: path,
-		initialComponent: markRaw(component),
-		initialProps: props,
 	}, {}, 'closed');
 }
 
 export function modalPageWindow(path: string) {
-	const { component, props } = resolve(path);
 	popup(defineAsyncComponent(() => import('@/components/modal-page-window.vue')), {
 		initialPath: path,
-		initialComponent: markRaw(component),
-		initialProps: props,
 	}, {}, 'closed');
 }
 
diff --git a/packages/client/src/pages/_error_.vue b/packages/client/src/pages/_error_.vue
index 4cfe2e255c..6ac1f4297a 100644
--- a/packages/client/src/pages/_error_.vue
+++ b/packages/client/src/pages/_error_.vue
@@ -21,11 +21,11 @@
 import { } from 'vue';
 import * as misskey from 'misskey-js';
 import MkButton from '@/components/ui/button.vue';
-import * as symbols from '@/symbols';
 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;
@@ -52,11 +52,13 @@ function reload() {
 	unisonReload();
 }
 
-defineExpose({
-	[symbols.PAGE_INFO]: {
-		title: i18n.ts.error,
-		icon: 'fas fa-exclamation-triangle',
-	},
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.error,
+	icon: 'fas fa-exclamation-triangle',
 });
 </script>
 
diff --git a/packages/client/src/pages/about-misskey.vue b/packages/client/src/pages/about-misskey.vue
index 691bc4f07b..ba85860cda 100644
--- a/packages/client/src/pages/about-misskey.vue
+++ b/packages/client/src/pages/about-misskey.vue
@@ -1,62 +1,65 @@
 <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">Misskey</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://misskey-hub.net/docs/misskey.html" 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 ❤]"/> #Misskey</MkButton>
-			</div>
-			<FormSection>
-				<div class="_formLinks">
-					<FormLink to="https://github.com/misskey-dev/misskey" external>
-						<template #icon><i class="fas fa-code"></i></template>
-						{{ i18n.ts._aboutMisskey.source }}
-						<template #suffix>GitHub</template>
-					</FormLink>
-					<FormLink to="https://crowdin.com/project/misskey" external>
-						<template #icon><i class="fas fa-language"></i></template>
-						{{ i18n.ts._aboutMisskey.translation }}
-						<template #suffix>Crowdin</template>
-					</FormLink>
-					<FormLink to="https://www.patreon.com/syuilo" external>
-						<template #icon><i class="fas fa-hand-holding-medical"></i></template>
-						{{ i18n.ts._aboutMisskey.donate }}
-						<template #suffix>Patreon</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">Misskey</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="https://github.com/syuilo" external>@syuilo</FormLink>
-					<FormLink to="https://github.com/AyaMorisawa" external>@AyaMorisawa</FormLink>
-					<FormLink to="https://github.com/mei23" external>@mei23</FormLink>
-					<FormLink to="https://github.com/acid-chicken" external>@acid-chicken</FormLink>
-					<FormLink to="https://github.com/tamaina" external>@tamaina</FormLink>
-					<FormLink to="https://github.com/rinsuki" external>@rinsuki</FormLink>
-					<FormLink to="https://github.com/Xeltica" external>@Xeltica</FormLink>
-					<FormLink to="https://github.com/u1-liquid" external>@u1-liquid</FormLink>
-					<FormLink to="https://github.com/marihachi" external>@marihachi</FormLink>
+				<div class="_formBlock" style="text-align: center;">
+					{{ i18n.ts._aboutMisskey.about }}<br><a href="https://misskey-hub.net/docs/misskey.html" target="_blank" class="_link">{{ i18n.ts.learnMore }}</a>
 				</div>
-				<template #caption><MkLink url="https://github.com/misskey-dev/misskey/graphs/contributors">{{ i18n.ts._aboutMisskey.allContributors }}</MkLink></template>
-			</FormSection>
-			<FormSection>
-				<template #label><Mfm text="$[jelly ❤]"/> {{ i18n.ts._aboutMisskey.patrons }}</template>
-				<div v-for="patron in patrons" :key="patron">{{ patron }}</div>
-				<template #caption>{{ i18n.ts._aboutMisskey.morePatrons }}</template>
-			</FormSection>
-		</div>
-	</MkSpacer>
-</div>
+				<div class="_formBlock" style="text-align: center;">
+					<MkButton primary rounded inline @click="iLoveMisskey">I <Mfm text="$[jelly ❤]"/> #Misskey</MkButton>
+				</div>
+				<FormSection>
+					<div class="_formLinks">
+						<FormLink to="https://github.com/misskey-dev/misskey" external>
+							<template #icon><i class="fas fa-code"></i></template>
+							{{ i18n.ts._aboutMisskey.source }}
+							<template #suffix>GitHub</template>
+						</FormLink>
+						<FormLink to="https://crowdin.com/project/misskey" external>
+							<template #icon><i class="fas fa-language"></i></template>
+							{{ i18n.ts._aboutMisskey.translation }}
+							<template #suffix>Crowdin</template>
+						</FormLink>
+						<FormLink to="https://www.patreon.com/syuilo" external>
+							<template #icon><i class="fas fa-hand-holding-medical"></i></template>
+							{{ i18n.ts._aboutMisskey.donate }}
+							<template #suffix>Patreon</template>
+						</FormLink>
+					</div>
+				</FormSection>
+				<FormSection>
+					<template #label>{{ i18n.ts._aboutMisskey.contributors }}</template>
+					<div class="_formLinks">
+						<FormLink to="https://github.com/syuilo" external>@syuilo</FormLink>
+						<FormLink to="https://github.com/AyaMorisawa" external>@AyaMorisawa</FormLink>
+						<FormLink to="https://github.com/mei23" external>@mei23</FormLink>
+						<FormLink to="https://github.com/acid-chicken" external>@acid-chicken</FormLink>
+						<FormLink to="https://github.com/tamaina" external>@tamaina</FormLink>
+						<FormLink to="https://github.com/rinsuki" external>@rinsuki</FormLink>
+						<FormLink to="https://github.com/Xeltica" external>@Xeltica</FormLink>
+						<FormLink to="https://github.com/u1-liquid" external>@u1-liquid</FormLink>
+						<FormLink to="https://github.com/marihachi" external>@marihachi</FormLink>
+					</div>
+					<template #caption><MkLink url="https://github.com/misskey-dev/misskey/graphs/contributors">{{ i18n.ts._aboutMisskey.allContributors }}</MkLink></template>
+				</FormSection>
+				<FormSection>
+					<template #label><Mfm text="$[jelly ❤]"/> {{ i18n.ts._aboutMisskey.patrons }}</template>
+					<div v-for="patron in patrons" :key="patron">{{ patron }}</div>
+					<template #caption>{{ i18n.ts._aboutMisskey.morePatrons }}</template>
+				</FormSection>
+			</div>
+		</MkSpacer>
+	</div>
+</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
@@ -67,10 +70,10 @@ import FormSection from '@/components/form/section.vue';
 import MkButton from '@/components/ui/button.vue';
 import MkLink from '@/components/link.vue';
 import { physics } from '@/scripts/physics';
-import * as symbols from '@/symbols';
 import { i18n } from '@/i18n';
 import { defaultStore } from '@/store';
 import * as os from '@/os';
+import { definePageMetadata } from '@/scripts/page-metadata';
 
 const patrons = [
 	'まっちゃとーにゅ',
@@ -194,12 +197,14 @@ onBeforeUnmount(() => {
 	}
 });
 
-defineExpose({
-	[symbols.PAGE_INFO]: {
-		title: i18n.ts.aboutMisskey,
-		icon: null,
-		bg: 'var(--bg)',
-	},
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.aboutMisskey,
+	icon: null,
+	bg: 'var(--bg)',
 });
 </script>
 
diff --git a/packages/client/src/pages/about.vue b/packages/client/src/pages/about.vue
index 6cc2e387ec..20497c86fc 100644
--- a/packages/client/src/pages/about.vue
+++ b/packages/client/src/pages/about.vue
@@ -1,78 +1,81 @@
 <template>
-<MkSpacer v-if="tab === 'overview'" :content-max="600" :margin-min="20">
-	<div class="_formRoot">
-		<div class="_formBlock fwhjspax" :style="{ backgroundImage: `url(${ $instance.bannerUrl })` }">
-			<div class="content">
-				<img :src="$instance.iconUrl || $instance.faviconUrl || '/favicon.ico'" alt="" class="icon"/>
-				<div class="name">
-					<b>{{ $instance.name || host }}</b>
+<MkStickyContainer>
+	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
+	<MkSpacer v-if="tab === 'overview'" :content-max="600" :margin-min="20">
+		<div class="_formRoot">
+			<div class="_formBlock fwhjspax" :style="{ backgroundImage: `url(${ $instance.bannerUrl })` }">
+				<div class="content">
+					<img :src="$instance.iconUrl || $instance.faviconUrl || '/favicon.ico'" alt="" class="icon"/>
+					<div class="name">
+						<b>{{ $instance.name || host }}</b>
+					</div>
 				</div>
 			</div>
-		</div>
 
-		<MkKeyValue class="_formBlock">
-			<template #key>{{ $ts.description }}</template>
-			<template #value>{{ $instance.description }}</template>
-		</MkKeyValue>
-
-		<FormSection>
-			<MkKeyValue class="_formBlock" :copy="version">
-				<template #key>Misskey</template>
-				<template #value>{{ version }}</template>
+			<MkKeyValue class="_formBlock">
+				<template #key>{{ $ts.description }}</template>
+				<template #value>{{ $instance.description }}</template>
 			</MkKeyValue>
-			<FormLink to="/about-misskey">{{ $ts.aboutMisskey }}</FormLink>
-		</FormSection>
 
-		<FormSection>
-			<FormSplit>
-				<MkKeyValue class="_formBlock">
-					<template #key>{{ $ts.administrator }}</template>
-					<template #value>{{ $instance.maintainerName }}</template>
-				</MkKeyValue>
-				<MkKeyValue class="_formBlock">
-					<template #key>{{ $ts.contact }}</template>
-					<template #value>{{ $instance.maintainerEmail }}</template>
-				</MkKeyValue>
-			</FormSplit>
-			<FormLink v-if="$instance.tosUrl" :to="$instance.tosUrl" class="_formBlock" external>{{ $ts.tos }}</FormLink>
-		</FormSection>
-
-		<FormSuspense :p="initStats">
 			<FormSection>
-				<template #label>{{ $ts.statistics }}</template>
+				<MkKeyValue class="_formBlock" :copy="version">
+					<template #key>Misskey</template>
+					<template #value>{{ version }}</template>
+				</MkKeyValue>
+				<FormLink to="/about-misskey">{{ $ts.aboutMisskey }}</FormLink>
+			</FormSection>
+
+			<FormSection>
 				<FormSplit>
 					<MkKeyValue class="_formBlock">
-						<template #key>{{ $ts.users }}</template>
-						<template #value>{{ number(stats.originalUsersCount) }}</template>
+						<template #key>{{ $ts.administrator }}</template>
+						<template #value>{{ $instance.maintainerName }}</template>
 					</MkKeyValue>
 					<MkKeyValue class="_formBlock">
-						<template #key>{{ $ts.notes }}</template>
-						<template #value>{{ number(stats.originalNotesCount) }}</template>
+						<template #key>{{ $ts.contact }}</template>
+						<template #value>{{ $instance.maintainerEmail }}</template>
 					</MkKeyValue>
 				</FormSplit>
+				<FormLink v-if="$instance.tosUrl" :to="$instance.tosUrl" class="_formBlock" external>{{ $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>
-</MkSpacer>
-<MkSpacer v-else-if="tab === 'charts'" :content-max="1200" :margin-min="20">
-	<MkInstanceStats :chart-limit="500" :detailed="true"/>
-</MkSpacer>
+			<FormSuspense :p="initStats">
+				<FormSection>
+					<template #label>{{ $ts.statistics }}</template>
+					<FormSplit>
+						<MkKeyValue class="_formBlock">
+							<template #key>{{ $ts.users }}</template>
+							<template #value>{{ number(stats.originalUsersCount) }}</template>
+						</MkKeyValue>
+						<MkKeyValue class="_formBlock">
+							<template #key>{{ $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>
+	</MkSpacer>
+	<MkSpacer v-else-if="tab === 'charts'" :content-max="1200" :margin-min="20">
+		<MkInstanceStats :chart-limit="500" :detailed="true"/>
+	</MkSpacer>
+</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
 import { ref, computed } from 'vue';
-import { version, instanceName } from '@/config';
+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';
@@ -81,9 +84,8 @@ import MkKeyValue from '@/components/key-value.vue';
 import MkInstanceStats from '@/components/instance-stats.vue';
 import * as os from '@/os';
 import number from '@/filters/number';
-import * as symbols from '@/symbols';
-import { host } from '@/config';
 import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
 
 let stats = $ref(null);
 let tab = $ref('overview');
@@ -93,23 +95,24 @@ const initStats = () => os.api('stats', {
 	stats = res;
 });
 
-defineExpose({
-	[symbols.PAGE_INFO]: computed(() => ({
-		title: i18n.ts.instanceInfo,
-		icon: 'fas fa-info-circle',
-		bg: 'var(--bg)',
-		tabs: [{
-			active: tab === 'overview',
-			title: i18n.ts.overview,
-			onClick: () => { tab = 'overview'; },
-		}, {
-			active: tab === 'charts',
-			title: i18n.ts.charts,
-			icon: 'fas fa-chart-bar',
-			onClick: () => { tab = 'charts'; },
-		},],
-	})),
-});
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => [{
+	active: tab === 'overview',
+	title: i18n.ts.overview,
+	onClick: () => { tab = 'overview'; },
+}, {
+	active: tab === 'charts',
+	title: i18n.ts.charts,
+	icon: 'fas fa-chart-bar',
+	onClick: () => { tab = 'charts'; },
+}]);
+
+definePageMetadata(computed(() => ({
+	title: i18n.ts.instanceInfo,
+	icon: 'fas fa-info-circle',
+	bg: 'var(--bg)',
+})));
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/pages/admin-file.vue b/packages/client/src/pages/admin-file.vue
index b0e879b8f3..67dcd88bc4 100644
--- a/packages/client/src/pages/admin-file.vue
+++ b/packages/client/src/pages/admin-file.vue
@@ -1,30 +1,33 @@
 <template>
-<MkSpacer :content-max="500" :margin-min="16" :margin-max="32">
-	<div v-if="file" class="cxqhhsmd _formRoot">
-		<div class="_formBlock">
-			<MkDriveFileThumbnail class="thumbnail" :file="file" fit="contain"/>
-			<div class="info">
-				<span style="margin-right: 1em;">{{ file.type }}</span>
-				<span>{{ bytes(file.size) }}</span>
-				<MkTime :time="file.createdAt" mode="detail" style="display: block;"/>
+<MkStickyContainer>
+	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
+	<MkSpacer :content-max="500" :margin-min="16" :margin-max="32">
+		<div v-if="file" class="cxqhhsmd _formRoot">
+			<div class="_formBlock">
+				<MkDriveFileThumbnail class="thumbnail" :file="file" fit="contain"/>
+				<div class="info">
+					<span style="margin-right: 1em;">{{ file.type }}</span>
+					<span>{{ bytes(file.size) }}</span>
+					<MkTime :time="file.createdAt" mode="detail" style="display: block;"/>
+				</div>
+			</div>
+			<div class="_formBlock">
+				<MkSwitch v-model="isSensitive" @update:modelValue="toggleIsSensitive">NSFW</MkSwitch>
+			</div>
+			<div class="_formBlock">
+				<MkButton full @click="showUser"><i class="fas fa-external-link-square-alt"></i> {{ $ts.user }}</MkButton>
+			</div>
+			<div class="_formBlock">
+				<MkButton full danger @click="del"><i class="fas fa-trash-alt"></i> {{ $ts.delete }}</MkButton>
+			</div>
+			<div v-if="info" class="_formBlock">
+				<details class="_content rawdata">
+					<pre><code>{{ JSON.stringify(info, null, 2) }}</code></pre>
+				</details>
 			</div>
 		</div>
-		<div class="_formBlock">
-			<MkSwitch v-model="isSensitive" @update:modelValue="toggleIsSensitive">NSFW</MkSwitch>
-		</div>
-		<div class="_formBlock">
-			<MkButton full @click="showUser"><i class="fas fa-external-link-square-alt"></i> {{ $ts.user }}</MkButton>
-		</div>
-		<div class="_formBlock">
-			<MkButton full danger @click="del"><i class="fas fa-trash-alt"></i> {{ $ts.delete }}</MkButton>
-		</div>
-		<div v-if="info" class="_formBlock">
-			<details class="_content rawdata">
-				<pre><code>{{ JSON.stringify(info, null, 2) }}</code></pre>
-			</details>
-		</div>
-	</div>
-</MkSpacer>
+	</MkSpacer>
+</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
@@ -35,7 +38,7 @@ import MkDriveFileThumbnail from '@/components/drive-file-thumbnail.vue';
 import bytes from '@/filters/bytes';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
-import * as symbols from '@/symbols';
+import { definePageMetadata } from '@/scripts/page-metadata';
 
 let file: any = $ref(null);
 let info: any = $ref(null);
@@ -74,13 +77,15 @@ async function toggleIsSensitive(v) {
 	isSensitive = v;
 }
 
-defineExpose({
-	[symbols.PAGE_INFO]: computed(() => ({
-		title: file ? i18n.ts.file + ': ' + file.name : i18n.ts.file,
-		icon: 'fas fa-file',
-		bg: 'var(--bg)',
-	})),
-});
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata(computed(() => ({
+	title: file ? i18n.ts.file + ': ' + file.name : i18n.ts.file,
+	icon: 'fas fa-file',
+	bg: 'var(--bg)',
+})));
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/pages/admin/_header_.vue b/packages/client/src/pages/admin/_header_.vue
new file mode 100644
index 0000000000..9e11d065d9
--- /dev/null
+++ b/packages/client/src/pages/admin/_header_.vue
@@ -0,0 +1,249 @@
+<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 class="title">
+				<div class="title">{{ metadata.title }}</div>
+			</div>
+		</div>
+		<div class="tabs">
+			<button v-for="tab in tabs" v-tooltip="tab.title" class="tab _button" :class="{ active: tab.active }" @click="tab.onClick">
+				<i v-if="tab.icon" class="icon" :class="tab.icon"></i>
+				<span v-if="!tab.iconOnly" class="title">{{ tab.title }}</span>
+			</button>
+		</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="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>
+</template>
+
+<script lang="ts" setup>
+import { computed, onMounted, onUnmounted, ref, inject } from 'vue';
+import tinycolor from 'tinycolor2';
+import { popupMenu } from '@/os';
+import { url } from '@/config';
+import { scrollToTop } from '@/scripts/scroll';
+import MkButton from '@/components/ui/button.vue';
+import { i18n } from '@/i18n';
+import { globalEvents } from '@/events';
+import { injectPageMetadata, PageMetadata } from '@/scripts/page-metadata';
+
+const props = defineProps<{
+	tabs?: {
+		title: string;
+		active: boolean;
+		icon?: string;
+		iconOnly?: boolean;
+		onClick: () => void;
+	}[];
+	actions?: {
+		text: string;
+		icon: string;
+		asFullButton?: boolean;
+		handler: (ev: MouseEvent) => void;
+	}[];
+	thin?: boolean;
+}>();
+
+const metadata = injectPageMetadata();
+
+const el = ref<HTMLElement>(null);
+const bg = ref(null);
+const height = ref(0);
+const hasTabs = computed(() => {
+	return props.tabs && props.tabs.length > 0;
+});
+
+const showTabsPopup = (ev: MouseEvent) => {
+	if (!hasTabs.value) return;
+	if (!narrow.value) return;
+	ev.preventDefault();
+	ev.stopPropagation();
+	const menu = props.tabs.map(tab => ({
+		text: tab.title,
+		icon: tab.icon,
+		action: tab.onClick,
+	}));
+	popupMenu(menu, ev.currentTarget ?? ev.target);
+};
+
+const preventDrag = (ev: TouchEvent) => {
+	ev.stopPropagation();
+};
+
+const onClick = () => {
+	scrollToTop(el.value, { behavior: 'smooth' });
+};
+
+const calcBg = () => {
+	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);
+});
+
+onUnmounted(() => {
+	globalEvents.off('themeChanged', calcBg);
+});
+</script>
+
+<style lang="scss" scoped>
+.fdidabkc {
+	--height: 60px;
+	display: flex;
+	position: sticky;
+	top: var(--stickyTop, 0);
+	z-index: 1000;
+	width: 100%;
+	-webkit-backdrop-filter: var(--blur, blur(15px));
+	backdrop-filter: var(--blur, blur(15px));
+
+	> .buttons {
+		--margin: 8px;
+		display: flex;
+    align-items: center;
+		height: var(--height);
+		margin: 0 var(--margin);
+
+		&.right {
+			margin-left: auto;
+		}
+
+		&:empty {
+			width: var(--height);
+		}
+
+		> .button {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			height: calc(var(--height) - (var(--margin) * 2));
+			width: calc(var(--height) - (var(--margin) * 2));
+			box-sizing: border-box;
+			position: relative;
+			border-radius: 5px;
+
+			&:hover {
+				background: rgba(0, 0, 0, 0.05);
+			}
+
+			&.highlighted {
+				color: var(--accent);
+			}
+		}
+
+		> .fullButton {
+			& + .fullButton {
+				margin-left: 12px;
+			}
+		}
+	}
+
+	> .titleContainer {
+		display: flex;
+		align-items: center;
+		max-width: 400px;
+		overflow: auto;
+		white-space: nowrap;
+		text-align: left;
+		font-weight: bold;
+		flex-shrink: 0;
+		margin-left: 24px;
+
+		> .avatar {
+			$size: 32px;
+			display: inline-block;
+			width: $size;
+			height: $size;
+			vertical-align: bottom;
+			margin: 0 8px;
+			pointer-events: none;
+		}
+
+		> .icon {
+			margin-right: 8px;
+		}
+
+		> .title {
+			min-width: 0;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+			line-height: 1.1;
+
+			> .subtitle {
+				opacity: 0.6;
+				font-size: 0.8em;
+				font-weight: normal;
+				white-space: nowrap;
+				overflow: hidden;
+				text-overflow: ellipsis;
+
+				&.activeTab {
+					text-align: center;
+
+					> .chevron {
+						display: inline-block;
+						margin-left: 6px;
+					}
+				}
+			}
+		}
+	}
+
+	> .tabs {
+		margin-left: 16px;
+		font-size: 0.8em;
+		overflow: auto;
+		white-space: nowrap;
+
+		> .tab {
+			display: inline-block;
+			position: relative;
+			padding: 0 10px;
+			height: 100%;
+			font-weight: normal;
+			opacity: 0.7;
+
+			&:hover {
+				opacity: 1;
+			}
+
+			&.active {
+				opacity: 1;
+
+				&:after {
+					content: "";
+					display: block;
+					position: absolute;
+					bottom: 0;
+					left: 0;
+					right: 0;
+					margin: 0 auto;
+					width: 100%;
+					height: 3px;
+					background: var(--accent);
+				}
+			}
+
+			> .icon + .title {
+				margin-left: 8px;
+			}
+		}
+	}
+}
+</style>
diff --git a/packages/client/src/pages/admin/abuses.vue b/packages/client/src/pages/admin/abuses.vue
index e1d0361c0b..2b6dadf7c6 100644
--- a/packages/client/src/pages/admin/abuses.vue
+++ b/packages/client/src/pages/admin/abuses.vue
@@ -1,28 +1,31 @@
 <template>
-<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>{{ $ts.state }}</template>
-					<option value="all">{{ $ts.all }}</option>
-					<option value="unresolved">{{ $ts.unresolved }}</option>
-					<option value="resolved">{{ $ts.resolved }}</option>
-				</MkSelect>
-				<MkSelect v-model="targetUserOrigin" style="margin: 0; flex: 1;">
-					<template #label>{{ $ts.reporteeOrigin }}</template>
-					<option value="combined">{{ $ts.all }}</option>
-					<option value="local">{{ $ts.local }}</option>
-					<option value="remote">{{ $ts.remote }}</option>
-				</MkSelect>
-				<MkSelect v-model="reporterOrigin" style="margin: 0; flex: 1;">
-					<template #label>{{ $ts.reporterOrigin }}</template>
-					<option value="combined">{{ $ts.all }}</option>
-					<option value="local">{{ $ts.local }}</option>
-					<option value="remote">{{ $ts.remote }}</option>
-				</MkSelect>
-			</div>
-			<!-- TODO
+<MkStickyContainer>
+	<template #header><XHeader :actions="headerActions" :tabs="headerTabs"/></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>{{ $ts.state }}</template>
+							<option value="all">{{ $ts.all }}</option>
+							<option value="unresolved">{{ $ts.unresolved }}</option>
+							<option value="resolved">{{ $ts.resolved }}</option>
+						</MkSelect>
+						<MkSelect v-model="targetUserOrigin" style="margin: 0; flex: 1;">
+							<template #label>{{ $ts.reporteeOrigin }}</template>
+							<option value="combined">{{ $ts.all }}</option>
+							<option value="local">{{ $ts.local }}</option>
+							<option value="remote">{{ $ts.remote }}</option>
+						</MkSelect>
+						<MkSelect v-model="reporterOrigin" style="margin: 0; flex: 1;">
+							<template #label>{{ $ts.reporterOrigin }}</template>
+							<option value="combined">{{ $ts.all }}</option>
+							<option value="local">{{ $ts.local }}</option>
+							<option value="remote">{{ $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>{{ $ts.username }}</span>
@@ -33,24 +36,27 @@
 			</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>
-</div>
+	</MkSpacer>
+</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
 import { computed } from 'vue';
 
+import XHeader from './_header_.vue';
 import MkInput from '@/components/form/input.vue';
 import MkSelect from '@/components/form/select.vue';
 import MkPagination from '@/components/ui/pagination.vue';
 import XAbuseReport from '@/components/abuse-report.vue';
 import * as os from '@/os';
-import * as symbols from '@/symbols';
 import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
 
 let reports = $ref<InstanceType<typeof MkPagination>>();
 
@@ -74,12 +80,14 @@ function resolved(reportId) {
 	reports.removeItem(item => item.id === reportId);
 }
 
-defineExpose({
-	[symbols.PAGE_INFO]: {
-		title: i18n.ts.abuseReports,
-		icon: 'fas fa-exclamation-circle',
-		bg: 'var(--bg)',
-	}
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.abuseReports,
+	icon: 'fas fa-exclamation-circle',
+	bg: 'var(--bg)',
 });
 </script>
 
diff --git a/packages/client/src/pages/admin/ads.vue b/packages/client/src/pages/admin/ads.vue
index b18e08db96..05557469e7 100644
--- a/packages/client/src/pages/admin/ads.vue
+++ b/packages/client/src/pages/admin/ads.vue
@@ -1,21 +1,23 @@
 <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="square">square</option>
-				<option value="horizontal">horizontal</option>
-				<option value="horizontal-big">horizontal-big</option>
-			</FormRadios>
-			<!--
+<MkStickyContainer>
+	<template #header><XHeader :actions="headerActions" :tabs="headerTabs"/></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="square">square</option>
+					<option value="horizontal">horizontal</option>
+					<option value="horizontal-big">horizontal-big</option>
+				</FormRadios>
+				<!--
 			<div style="margin: 32px 0;">
 				{{ i18n.ts.priority }}
 				<MkRadio v-model="ad.priority" value="high">{{ i18n.ts.high }}</MkRadio>
@@ -23,36 +25,38 @@
 				<MkRadio v-model="ad.priority" value="low">{{ i18n.ts.low }}</MkRadio>
 			</div>
 			-->
-			<FormSplit>
-				<MkInput 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="fas fa-save"></i> {{ i18n.ts.save }}</MkButton>
-				<MkButton class="button" inline danger @click="remove(ad)"><i class="fas fa-trash-alt"></i> {{ i18n.ts.remove }}</MkButton>
+				<FormSplit>
+					<MkInput 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="fas fa-save"></i> {{ i18n.ts.save }}</MkButton>
+					<MkButton class="button" inline danger @click="remove(ad)"><i class="fas fa-trash-alt"></i> {{ i18n.ts.remove }}</MkButton>
+				</div>
 			</div>
 		</div>
-	</div>
-</MkSpacer>
+	</MkSpacer>
+</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
 import { } from 'vue';
+import XHeader from './_header_.vue';
 import MkButton from '@/components/ui/button.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 * as symbols from '@/symbols';
 import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
 
 let ads: any[] = $ref([]);
 
@@ -81,7 +85,7 @@ function remove(ad) {
 		if (canceled) return;
 		ads = ads.filter(x => x !== ad);
 		os.apiWithDialog('admin/ad/delete', {
-			id: ad.id
+			id: ad.id,
 		});
 	});
 }
@@ -90,28 +94,29 @@ function save(ad) {
 	if (ad.id == null) {
 		os.apiWithDialog('admin/ad/create', {
 			...ad,
-			expiresAt: new Date(ad.expiresAt).getTime()
+			expiresAt: new Date(ad.expiresAt).getTime(),
 		});
 	} else {
 		os.apiWithDialog('admin/ad/update', {
 			...ad,
-			expiresAt: new Date(ad.expiresAt).getTime()
+			expiresAt: new Date(ad.expiresAt).getTime(),
 		});
 	}
 }
 
-defineExpose({
-	[symbols.PAGE_INFO]: {
-		title: i18n.ts.ads,
-		icon: 'fas fa-audio-description',
-		bg: 'var(--bg)',
-		actions: [{
-			asFullButton: true,
-			icon: 'fas fa-plus',
-			text: i18n.ts.add,
-			handler: add,
-		}],
-	}
+const headerActions = $computed(() => [{
+	asFullButton: true,
+	icon: 'fas fa-plus',
+	text: i18n.ts.add,
+	handler: add,
+}]);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.ads,
+	icon: 'fas fa-audio-description',
+	bg: 'var(--bg)',
 });
 </script>
 
diff --git a/packages/client/src/pages/admin/announcements.vue b/packages/client/src/pages/admin/announcements.vue
index 97774975de..025897d093 100644
--- a/packages/client/src/pages/admin/announcements.vue
+++ b/packages/client/src/pages/admin/announcements.vue
@@ -1,34 +1,40 @@
 <template>
-<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="fas fa-save"></i> {{ i18n.ts.save }}</MkButton>
-				<MkButton class="button" inline @click="remove(announcement)"><i class="fas fa-trash-alt"></i> {{ i18n.ts.remove }}</MkButton>
-			</div>
+<MkStickyContainer>
+	<template #header><XHeader :actions="headerActions" :tabs="headerTabs"/></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="fas fa-save"></i> {{ i18n.ts.save }}</MkButton>
+						<MkButton class="button" inline @click="remove(announcement)"><i class="fas fa-trash-alt"></i> {{ i18n.ts.remove }}</MkButton>
+					</div>
+				</div>
+			</section>
 		</div>
-	</section>
-</div>
+	</MkSpacer>
+</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
 import { } from 'vue';
+import XHeader from './_header_.vue';
 import MkButton from '@/components/ui/button.vue';
 import MkInput from '@/components/form/input.vue';
 import MkTextarea from '@/components/form/textarea.vue';
 import * as os from '@/os';
-import * as symbols from '@/symbols';
 import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
 
 let announcements: any[] = $ref([]);
 
@@ -41,7 +47,7 @@ function add() {
 		id: null,
 		title: '',
 		text: '',
-		imageUrl: null
+		imageUrl: null,
 	});
 }
 
@@ -61,41 +67,42 @@ function save(announcement) {
 		os.api('admin/announcements/create', announcement).then(() => {
 			os.alert({
 				type: 'success',
-				text: i18n.ts.saved
+				text: i18n.ts.saved,
 			});
 		}).catch(err => {
 			os.alert({
 				type: 'error',
-				text: err
+				text: err,
 			});
 		});
 	} else {
 		os.api('admin/announcements/update', announcement).then(() => {
 			os.alert({
 				type: 'success',
-				text: i18n.ts.saved
+				text: i18n.ts.saved,
 			});
 		}).catch(err => {
 			os.alert({
 				type: 'error',
-				text: err
+				text: err,
 			});
 		});
 	}
 }
 
-defineExpose({
-	[symbols.PAGE_INFO]: {
-		title: i18n.ts.announcements,
-		icon: 'fas fa-broadcast-tower',
-		bg: 'var(--bg)',
-		actions: [{
-			asFullButton: true,
-			icon: 'fas fa-plus',
-			text: i18n.ts.add,
-			handler: add,
-		}],
-	}
+const headerActions = $computed(() => [{
+	asFullButton: true,
+	icon: 'fas fa-plus',
+	text: i18n.ts.add,
+	handler: add,
+}]);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.announcements,
+	icon: 'fas fa-broadcast-tower',
+	bg: 'var(--bg)',
 });
 </script>
 
diff --git a/packages/client/src/pages/admin/bot-protection.vue b/packages/client/src/pages/admin/bot-protection.vue
index 30fee5015a..d2e7919b4f 100644
--- a/packages/client/src/pages/admin/bot-protection.vue
+++ b/packages/client/src/pages/admin/bot-protection.vue
@@ -51,7 +51,6 @@ import FormButton from '@/components/ui/button.vue';
 import FormSuspense from '@/components/form/suspense.vue';
 import FormSlot from '@/components/form/slot.vue';
 import * as os from '@/os';
-import * as symbols from '@/symbols';
 import { fetchInstance } from '@/instance';
 
 const MkCaptcha = defineAsyncComponent(() => import('@/components/captcha.vue'));
diff --git a/packages/client/src/pages/admin/database.vue b/packages/client/src/pages/admin/database.vue
index d3519922b1..b9c5f9e393 100644
--- a/packages/client/src/pages/admin/database.vue
+++ b/packages/client/src/pages/admin/database.vue
@@ -1,12 +1,13 @@
-<template>
-<MkSpacer :content-max="800" :margin-min="16" :margin-max="32">
+<template><MkStickyContainer>
+	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
+		<MkSpacer :content-max="800" :margin-min="16" :margin-max="32">
 	<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>
+</MkSpacer></MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
@@ -14,18 +15,20 @@ import { } from 'vue';
 import FormSuspense from '@/components/form/suspense.vue';
 import MkKeyValue from '@/components/key-value.vue';
 import * as os from '@/os';
-import * as symbols from '@/symbols';
 import bytes from '@/filters/bytes';
 import number from '@/filters/number';
 import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
 
 const databasePromiseFactory = () => os.api('admin/get-table-stats').then(res => Object.entries(res).sort((a, b) => b[1].size - a[1].size));
 
-defineExpose({
-	[symbols.PAGE_INFO]: {
-		title: i18n.ts.database,
-		icon: 'fas fa-database',
-		bg: 'var(--bg)',
-	}
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.database,
+	icon: 'fas fa-database',
+	bg: 'var(--bg)',
 });
 </script>
diff --git a/packages/client/src/pages/admin/email-settings.vue b/packages/client/src/pages/admin/email-settings.vue
index aa13043193..5487c5f333 100644
--- a/packages/client/src/pages/admin/email-settings.vue
+++ b/packages/client/src/pages/admin/email-settings.vue
@@ -1,49 +1,53 @@
 <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 }}</template>
-				<template #caption>{{ i18n.ts.emailConfigInfo }}</template>
-			</FormSwitch>
+<MkStickyContainer>
+	<template #header><XHeader :actions="headerActions" :tabs="headerTabs"/></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 }}</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>
+					<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 XHeader from './_header_.vue';
 import FormSwitch from '@/components/form/switch.vue';
 import FormInput from '@/components/form/input.vue';
 import FormInfo from '@/components/ui/info.vue';
@@ -51,9 +55,9 @@ 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 * as symbols from '@/symbols';
 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);
@@ -78,13 +82,13 @@ async function testEmail() {
 	const { canceled, result: destination } = await os.inputText({
 		title: i18n.ts.destination,
 		type: 'email',
-		placeholder: instance.maintainerEmail
+		placeholder: instance.maintainerEmail,
 	});
 	if (canceled) return;
 	os.apiWithDialog('admin/send-email', {
 		to: destination,
 		subject: 'Test email',
-		text: 'Yo'
+		text: 'Yo',
 	});
 }
 
@@ -102,21 +106,22 @@ function save() {
 	});
 }
 
-defineExpose({
-	[symbols.PAGE_INFO]: {
-		title: i18n.ts.emailServer,
-		icon: 'fas fa-envelope',
-		bg: 'var(--bg)',
-		actions: [{
-			asFullButton: true,
-			text: i18n.ts.testEmail,
-			handler: testEmail,
-		}, {
-			asFullButton: true,
-			icon: 'fas fa-check',
-			text: i18n.ts.save,
-			handler: save,
-		}],
-	}
+const headerActions = $computed(() => [{
+	asFullButton: true,
+	text: i18n.ts.testEmail,
+	handler: testEmail,
+}, {
+	asFullButton: true,
+	icon: 'fas fa-check',
+	text: i18n.ts.save,
+	handler: save,
+}]);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.emailServer,
+	icon: 'fas fa-envelope',
+	bg: 'var(--bg)',
 });
 </script>
diff --git a/packages/client/src/pages/admin/emojis.vue b/packages/client/src/pages/admin/emojis.vue
index 8ca5b3d65c..9d6b56dbc5 100644
--- a/packages/client/src/pages/admin/emojis.vue
+++ b/packages/client/src/pages/admin/emojis.vue
@@ -1,69 +1,75 @@
 <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="fas fa-search"></i></template>
-				<template #label>{{ $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 danger @click="delBulk">Delete</MkButton>
-			</div>
-			<MkPagination ref="emojisPaginationComponent" :pagination="pagination">
-				<template #empty><span>{{ $ts.noCustomEmojis }}</span></template>
-				<template v-slot="{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>
+	<MkStickyContainer>
+		<template #header><XHeader :actions="headerActions" :tabs="headerTabs"/></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="fas fa-search"></i></template>
+						<template #label>{{ $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 danger @click="delBulk">Delete</MkButton>
 					</div>
-				</template>
-			</MkPagination>
-		</div>
+					<MkPagination ref="emojisPaginationComponent" :pagination="pagination">
+						<template #empty><span>{{ $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="fas fa-search"></i></template>
-					<template #label>{{ $ts.search }}</template>
-				</MkInput>
-				<MkInput v-model="host" :debounce="true">
-					<template #label>{{ $ts.host }}</template>
-				</MkInput>
-			</FormSplit>
-			<MkPagination :pagination="remotePagination">
-				<template #empty><span>{{ $ts.noCustomEmojis }}</span></template>
-				<template v-slot="{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 v-else-if="tab === 'remote'" class="remote">
+					<FormSplit>
+						<MkInput v-model="queryRemote" :debounce="true" type="search">
+							<template #prefix><i class="fas fa-search"></i></template>
+							<template #label>{{ $ts.search }}</template>
+						</MkInput>
+						<MkInput v-model="host" :debounce="true">
+							<template #label>{{ $ts.host }}</template>
+						</MkInput>
+					</FormSplit>
+					<MkPagination :pagination="remotePagination">
+						<template #empty><span>{{ $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>
-					</div>
-				</template>
-			</MkPagination>
-		</div>
-	</div>
-</MkSpacer>
+						</template>
+					</MkPagination>
+				</div>
+			</div>
+		</MkSpacer>
+	</MkStickyContainer>
+</div>
 </template>
 
 <script lang="ts" setup>
 import { computed, defineAsyncComponent, defineComponent, ref, toRef } from 'vue';
+import XHeader from './_header_.vue';
 import MkButton from '@/components/ui/button.vue';
 import MkInput from '@/components/form/input.vue';
 import MkPagination from '@/components/ui/pagination.vue';
@@ -72,8 +78,8 @@ 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 * as symbols from '@/symbols';
 import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
 
 const emojisPaginationComponent = ref<InstanceType<typeof MkPagination>>();
 
@@ -131,13 +137,13 @@ const add = async (ev: MouseEvent) => {
 
 const edit = (emoji) => {
 	os.popup(defineAsyncComponent(() => import('./emoji-edit-dialog.vue')), {
-		emoji: emoji
+		emoji: emoji,
 	}, {
 		done: result => {
 			if (result.updated) {
 				emojisPaginationComponent.value.updateItem(result.updated.id, (oldEmoji: any) => ({
 					...oldEmoji,
-					...result.updated
+					...result.updated,
 				}));
 			} else if (result.deleted) {
 				emojisPaginationComponent.value.removeItem((item) => item.id === emoji.id);
@@ -159,7 +165,7 @@ const remoteMenu = (emoji, ev: MouseEvent) => {
 	}, {
 		text: i18n.ts.import,
 		icon: 'fas fa-plus',
-		action: () => { im(emoji); }
+		action: () => { im(emoji); },
 	}], ev.currentTarget ?? ev.target);
 };
 
@@ -181,7 +187,7 @@ const menu = (ev: MouseEvent) => {
 					text: err.message,
 				});
 			});
-		}
+		},
 	}, {
 		icon: 'fas fa-upload',
 		text: i18n.ts.import,
@@ -201,7 +207,7 @@ const menu = (ev: MouseEvent) => {
 					text: err.message,
 				});
 			});
-		}
+		},
 	}], ev.currentTarget ?? ev.target);
 };
 
@@ -265,31 +271,31 @@ const delBulk = async () => {
 	emojisPaginationComponent.value.reload();
 };
 
-defineExpose({
-	[symbols.PAGE_INFO]: computed(() => ({
-		title: i18n.ts.customEmojis,
-		icon: 'fas fa-laugh',
-		bg: 'var(--bg)',
-		actions: [{
-			asFullButton: true,
-			icon: 'fas fa-plus',
-			text: i18n.ts.addEmoji,
-			handler: add,
-		}, {
-			icon: 'fas fa-ellipsis-h',
-			handler: menu,
-		}],
-		tabs: [{
-			active: tab.value === 'local',
-			title: i18n.ts.local,
-			onClick: () => { tab.value = 'local'; },
-		}, {
-			active: tab.value === 'remote',
-			title: i18n.ts.remote,
-			onClick: () => { tab.value = 'remote'; },
-		},]
-	})),
-});
+const headerActions = $computed(() => [{
+	asFullButton: true,
+	icon: 'fas fa-plus',
+	text: i18n.ts.addEmoji,
+	handler: add,
+}, {
+	icon: 'fas fa-ellipsis-h',
+	handler: menu,
+}]);
+
+const headerTabs = $computed(() => [{
+	active: tab.value === 'local',
+	title: i18n.ts.local,
+	onClick: () => { tab.value = 'local'; },
+}, {
+	active: tab.value === 'remote',
+	title: i18n.ts.remote,
+	onClick: () => { tab.value = 'remote'; },
+}]);
+
+definePageMetadata(computed(() => ({
+	title: i18n.ts.customEmojis,
+	icon: 'fas fa-laugh',
+	bg: 'var(--bg)',
+})));
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/pages/admin/files.vue b/packages/client/src/pages/admin/files.vue
index 9350911b60..18bf4f9a8c 100644
--- a/packages/client/src/pages/admin/files.vue
+++ b/packages/client/src/pages/admin/files.vue
@@ -1,50 +1,58 @@
 <template>
-<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>{{ $ts.instance }}</template>
-				<option value="combined">{{ $ts.all }}</option>
-				<option value="local">{{ $ts.local }}</option>
-				<option value="remote">{{ $ts.remote }}</option>
-			</MkSelect>
-			<MkInput v-model="searchHost" :debounce="true" type="search" style="margin: 0; flex: 1;" :disabled="pagination.params.origin === 'local'">
-				<template #label>{{ $ts.host }}</template>
-			</MkInput>
-		</div>
-		<div class="inputs" style="display: flex; padding-top: 1.2em;">
-			<MkInput v-model="type" :debounce="true" type="search" style="margin: 0; flex: 1;">
-				<template #label>MIME type</template>
-			</MkInput>
-		</div>
-		<MkPagination v-slot="{items}" :pagination="pagination" class="urempief" :class="{ grid: viewMode === 'grid' }">
-			<button 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'}`" class="file _panel _button" @click="show(file, $event)">
-				<MkDriveFileThumbnail class="thumbnail" :file="file" fit="contain"/>
-				<div v-if="viewMode === 'list'" class="body">
-					<div>
-						<small style="opacity: 0.7;">{{ file.name }}</small>
+<div>
+	<MkStickyContainer>
+		<template #header><XHeader :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>{{ $ts.instance }}</template>
+							<option value="combined">{{ $ts.all }}</option>
+							<option value="local">{{ $ts.local }}</option>
+							<option value="remote">{{ $ts.remote }}</option>
+						</MkSelect>
+						<MkInput v-model="searchHost" :debounce="true" type="search" style="margin: 0; flex: 1;" :disabled="pagination.params.origin === 'local'">
+							<template #label>{{ $ts.host }}</template>
+						</MkInput>
 					</div>
-					<div>
-						<MkAcct v-if="file.user" :user="file.user"/>
-						<div v-else>{{ $ts.system }}</div>
-					</div>
-					<div>
-						<span style="margin-right: 1em;">{{ file.type }}</span>
-						<span>{{ bytes(file.size) }}</span>
-					</div>
-					<div>
-						<span>{{ $ts.registeredDate }}: <MkTime :time="file.createdAt" mode="detail"/></span>
+					<div class="inputs" style="display: flex; padding-top: 1.2em;">
+						<MkInput v-model="type" :debounce="true" type="search" style="margin: 0; flex: 1;">
+							<template #label>MIME type</template>
+						</MkInput>
 					</div>
+					<MkPagination v-slot="{items}" :pagination="pagination" class="urempief" :class="{ grid: viewMode === 'grid' }">
+						<button 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'}`" class="file _button" @click="show(file, $event)">
+							<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>{{ $ts.system }}</div>
+								</div>
+								<div>
+									<span style="margin-right: 1em;">{{ file.type }}</span>
+									<span>{{ bytes(file.size) }}</span>
+								</div>
+								<div>
+									<span>{{ $ts.registeredDate }}: <MkTime :time="file.createdAt" mode="detail"/></span>
+								</div>
+							</div>
+						</button>
+					</MkPagination>
 				</div>
-			</button>
-		</MkPagination>
-	</div>
+			</div>
+		</MkSpacer>
+	</MkStickyContainer>
 </div>
 </template>
 
 <script lang="ts" setup>
 import { computed, defineAsyncComponent } from 'vue';
 import * as Acct from 'misskey-js/built/acct';
+import XHeader from './_header_.vue';
 import MkButton from '@/components/ui/button.vue';
 import MkInput from '@/components/form/input.vue';
 import MkSelect from '@/components/form/select.vue';
@@ -53,8 +61,8 @@ import MkContainer from '@/components/ui/container.vue';
 import MkDriveFileThumbnail from '@/components/drive-file-thumbnail.vue';
 import bytes from '@/filters/bytes';
 import * as os from '@/os';
-import * as symbols from '@/symbols';
 import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
 
 let origin = $ref('local');
 let type = $ref(null);
@@ -82,7 +90,7 @@ function clear() {
 }
 
 function show(file) {
-	os.pageWindow(`/admin-file/${file.id}`);
+	os.pageWindow(`/admin/file/${file.id}`);
 }
 
 async function find() {
@@ -104,22 +112,23 @@ async function find() {
 	});
 }
 
-defineExpose({
-	[symbols.PAGE_INFO]: computed(() => ({
-		title: i18n.ts.files,
-		icon: 'fas fa-cloud',
-		bg: 'var(--bg)',
-		actions: [{
-			text: i18n.ts.lookup,
-			icon: 'fas fa-search',
-			handler: find,
-		}, {
-			text: i18n.ts.clearCachedFiles,
-			icon: 'fas fa-trash-alt',
-			handler: clear,
-		}],
-	})),
-});
+const headerActions = $computed(() => [{
+	text: i18n.ts.lookup,
+	icon: 'fas fa-search',
+	handler: find,
+}, {
+	text: i18n.ts.clearCachedFiles,
+	icon: 'fas fa-trash-alt',
+	handler: clear,
+}]);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata(computed(() => ({
+	title: i18n.ts.files,
+	icon: 'fas fa-cloud',
+	bg: 'var(--bg)',
+})));
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/pages/admin/index.vue b/packages/client/src/pages/admin/index.vue
index 9b7fa5678e..5db91101d7 100644
--- a/packages/client/src/pages/admin/index.vue
+++ b/packages/client/src/pages/admin/index.vue
@@ -1,8 +1,6 @@
 <template>
 <div ref="el" class="hiyeyicy" :class="{ wide: !narrow }">
-	<div v-if="!narrow || initialPage == null" class="nav">
-		<MkHeader :info="header"></MkHeader>
-	
+	<div v-if="!narrow || initialPage == null" class="nav">	
 		<MkSpacer :content-max="700" :margin-min="16">
 			<div class="lxpfedzu">
 				<div class="banner">
@@ -17,29 +15,26 @@
 		</MkSpacer>
 	</div>
 	<div v-if="!(narrow && initialPage == null)" class="main">
-		<MkStickyContainer>
-			<template #header><MkHeader v-if="childInfo && !childInfo.hideHeader" :info="childInfo"/></template>
-			<component :is="component" :ref="el => pageChanged(el)" :key="initialPage" v-bind="pageProps"/>
-		</MkStickyContainer>
+		<component :is="component" :key="initialPage" v-bind="pageProps"/>
 	</div>
 </div>
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent, nextTick, onMounted, onUnmounted, provide, watch } from 'vue';
+import { defineAsyncComponent, inject, nextTick, onMounted, onUnmounted, provide, watch } from 'vue';
 import { i18n } from '@/i18n';
 import MkSuperMenu from '@/components/ui/super-menu.vue';
 import MkInfo from '@/components/ui/info.vue';
 import { scroll } from '@/scripts/scroll';
 import { instance } from '@/instance';
-import * as symbols from '@/symbols';
 import * as os from '@/os';
 import { lookupUser } from '@/scripts/lookup-user';
-import { MisskeyNavigator } from '@/scripts/navigate';
+import { useRouter } from '@/router';
+import { definePageMetadata, provideMetadataReceiver, setPageMetadata } from '@/scripts/page-metadata';
 
 const isEmpty = (x: string | null) => x == null || x === '';
 
-const nav = new MisskeyNavigator();
+const router = useRouter();
 
 const indexInfo = {
 	title: i18n.ts.controlPanel,
@@ -224,7 +219,7 @@ watch(component, () => {
 
 watch(() => props.initialPage, () => {
 	if (props.initialPage == null && !narrow) {
-		nav.push('/admin/overview');
+		router.push('/admin/overview');
 	} else {
 		if (props.initialPage == null) {
 			INFO = indexInfo;
@@ -234,7 +229,7 @@ watch(() => props.initialPage, () => {
 
 watch(narrow, () => {
 	if (props.initialPage == null && !narrow) {
-		nav.push('/admin/overview');
+		router.push('/admin/overview');
 	}
 });
 
@@ -243,7 +238,7 @@ onMounted(() => {
 
 	narrow = el.offsetWidth < NARROW_THRESHOLD;
 	if (props.initialPage == null && !narrow) {
-		nav.push('/admin/overview');
+		router.push('/admin/overview');
 	}
 });
 
@@ -251,19 +246,19 @@ onUnmounted(() => {
 	ro.disconnect();
 });
 
-const pageChanged = (page) => {
-	if (page == null) {
+provideMetadataReceiver((info) => {
+	if (info == null) {
 		childInfo = null;
 	} else {
-		childInfo = page[symbols.PAGE_INFO];
+		childInfo = info;
 	}
-};
+});
 
 const invite = () => {
 	os.api('admin/invite').then(x => {
 		os.alert({
 			type: 'info',
-			text: x.code
+			text: x.code,
 		});
 	}).catch(err => {
 		os.alert({
@@ -279,33 +274,38 @@ const lookup = (ev) => {
 		icon: 'fas fa-user',
 		action: () => {
 			lookupUser();
-		}
+		},
 	}, {
 		text: i18n.ts.note,
 		icon: 'fas fa-pencil-alt',
 		action: () => {
 			alert('TODO');
-		}
+		},
 	}, {
 		text: i18n.ts.file,
 		icon: 'fas fa-cloud',
 		action: () => {
 			alert('TODO');
-		}
+		},
 	}, {
 		text: i18n.ts.instance,
 		icon: 'fas fa-globe',
 		action: () => {
 			alert('TODO');
-		}
+		},
 	}], ev.currentTarget ?? ev.target);
 };
 
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata(INFO);
+
 defineExpose({
-	[symbols.PAGE_INFO]: INFO,
 	header: {
 		title: i18n.ts.controlPanel,
-	}
+	},
 });
 </script>
 
diff --git a/packages/client/src/pages/admin/instance-block.vue b/packages/client/src/pages/admin/instance-block.vue
index 3347846a80..1aec151abb 100644
--- a/packages/client/src/pages/admin/instance-block.vue
+++ b/packages/client/src/pages/admin/instance-block.vue
@@ -1,25 +1,29 @@
 <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><XHeader :actions="headerActions" :tabs="headerTabs"/></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="fas fa-save"></i> {{ i18n.ts.save }}</FormButton>
-	</FormSuspense>
-</MkSpacer>
+			<FormButton primary class="_formBlock" @click="save"><i class="fas fa-save"></i> {{ i18n.ts.save }}</FormButton>
+		</FormSuspense>
+	</MkSpacer>
+</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
 import { } from 'vue';
+import XHeader from './_header_.vue';
 import FormButton from '@/components/ui/button.vue';
 import FormTextarea from '@/components/form/textarea.vue';
 import FormSuspense from '@/components/form/suspense.vue';
 import * as os from '@/os';
-import * as symbols from '@/symbols';
 import { fetchInstance } from '@/instance';
 import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
 
 let blockedHosts: string = $ref('');
 
@@ -36,11 +40,13 @@ function save() {
 	});
 }
 
-defineExpose({
-	[symbols.PAGE_INFO]: {
-		title: i18n.ts.instanceBlocking,
-		icon: 'fas fa-ban',
-		bg: 'var(--bg)',
-	}
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.instanceBlocking,
+	icon: 'fas fa-ban',
+	bg: 'var(--bg)',
 });
 </script>
diff --git a/packages/client/src/pages/admin/integrations.vue b/packages/client/src/pages/admin/integrations.vue
index d6061d0e51..d407d440b9 100644
--- a/packages/client/src/pages/admin/integrations.vue
+++ b/packages/client/src/pages/admin/integrations.vue
@@ -1,5 +1,6 @@
-<template>
-<MkSpacer :content-max="700" :margin-min="16" :margin-max="32">
+<template><MkStickyContainer>
+	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
+		<MkSpacer :content-max="700" :margin-min="16" :margin-max="32">
 	<FormSuspense :p="init">
 		<FormFolder class="_formBlock">
 			<template #icon><i class="fab fa-twitter"></i></template>
@@ -20,19 +21,19 @@
 			<XDiscord/>
 		</FormFolder>
 	</FormSuspense>
-</MkSpacer>
+</MkSpacer></MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
 import { } from 'vue';
-import FormFolder from '@/components/form/folder.vue';
-import FormSuspense from '@/components/form/suspense.vue';
 import XTwitter from './integrations.twitter.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 * as symbols from '@/symbols';
 import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
 
 let enableTwitterIntegration: boolean = $ref(false);
 let enableGithubIntegration: boolean = $ref(false);
@@ -45,11 +46,13 @@ async function init() {
 	enableDiscordIntegration = meta.enableDiscordIntegration;
 }
 
-defineExpose({
-	[symbols.PAGE_INFO]: {
-		title: i18n.ts.integration,
-		icon: 'fas fa-share-alt',
-		bg: 'var(--bg)',
-	}
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.integration,
+	icon: 'fas fa-share-alt',
+	bg: 'var(--bg)',
 });
 </script>
diff --git a/packages/client/src/pages/admin/object-storage.vue b/packages/client/src/pages/admin/object-storage.vue
index d109db9c38..bae5277f49 100644
--- a/packages/client/src/pages/admin/object-storage.vue
+++ b/packages/client/src/pages/admin/object-storage.vue
@@ -1,72 +1,76 @@
 <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><XHeader :actions="headerActions" :tabs="headerTabs"/></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="fas fa-key"></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="fas fa-key"></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>
+					<FormSplit :min-width="280">
+						<FormInput v-model="objectStorageAccessKey" class="_formBlock">
+							<template #prefix><i class="fas fa-key"></i></template>
+							<template #label>Access key</template>
+						</FormInput>
+
+						<FormInput v-model="objectStorageSecretKey" class="_formBlock">
+							<template #prefix><i class="fas fa-key"></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 XHeader from './_header_.vue';
 import FormSwitch from '@/components/form/switch.vue';
 import FormInput from '@/components/form/input.vue';
 import FormGroup from '@/components/form/group.vue';
@@ -74,9 +78,9 @@ 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 * as symbols from '@/symbols';
 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);
@@ -129,17 +133,18 @@ function save() {
 	});
 }
 
-defineExpose({
-  [symbols.PAGE_INFO]: {
-		title: i18n.ts.objectStorage,
-		icon: 'fas fa-cloud',
-		bg: 'var(--bg)',
-		actions: [{
-			asFullButton: true,
-			icon: 'fas fa-check',
-			text: i18n.ts.save,
-			handler: save,
-		}],
-	}
+const headerActions = $computed(() => [{
+	asFullButton: true,
+	icon: 'fas fa-check',
+	text: i18n.ts.save,
+	handler: save,
+}]);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.objectStorage,
+	icon: 'fas fa-cloud',
+	bg: 'var(--bg)',
 });
 </script>
diff --git a/packages/client/src/pages/admin/other-settings.vue b/packages/client/src/pages/admin/other-settings.vue
index 552b05f347..59b3503c3c 100644
--- a/packages/client/src/pages/admin/other-settings.vue
+++ b/packages/client/src/pages/admin/other-settings.vue
@@ -1,18 +1,22 @@
 <template>
-<MkSpacer :content-max="700" :margin-min="16" :margin-max="32">
-	<FormSuspense :p="init">
-		none
-	</FormSuspense>
-</MkSpacer>
+<MkStickyContainer>
+	<template #header><XHeader :actions="headerActions" :tabs="headerTabs"/></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 XHeader from './_header_.vue';
 import FormSuspense from '@/components/form/suspense.vue';
 import * as os from '@/os';
-import * as symbols from '@/symbols';
 import { fetchInstance } from '@/instance';
 import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
 
 async function init() {
 	await os.api('admin/meta');
@@ -24,17 +28,18 @@ function save() {
 	});
 }
 
-defineExpose({
-  [symbols.PAGE_INFO]: {
-		title: i18n.ts.other,
-		icon: 'fas fa-cogs',
-		bg: 'var(--bg)',
-		actions: [{
-			asFullButton: true,
-			icon: 'fas fa-check',
-			text: i18n.ts.save,
-			handler: save,
-		}],
-	}
+const headerActions = $computed(() => [{
+	asFullButton: true,
+	icon: 'fas fa-check',
+	text: i18n.ts.save,
+	handler: save,
+}]);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.other,
+	icon: 'fas fa-cogs',
+	bg: 'var(--bg)',
 });
 </script>
diff --git a/packages/client/src/pages/admin/overview.vue b/packages/client/src/pages/admin/overview.vue
index cc69424c3b..82b3c33852 100644
--- a/packages/client/src/pages/admin/overview.vue
+++ b/packages/client/src/pages/admin/overview.vue
@@ -35,7 +35,7 @@
 		</MkContainer>
 	</div>
 
-		<!--<XMetrics/>-->
+	<!--<XMetrics/>-->
 
 	<MkFolder style="margin: var(--margin)">
 		<template #header><i class="fas fa-info-circle"></i> {{ i18n.ts.info }}</template>
@@ -67,6 +67,7 @@
 
 <script lang="ts" setup>
 import { markRaw, version as vueVersion, onMounted, onBeforeUnmount, nextTick } from 'vue';
+import XMetrics from './metrics.vue';
 import MkInstanceStats from '@/components/instance-stats.vue';
 import MkNumberDiff from '@/components/number-diff.vue';
 import MkContainer from '@/components/ui/container.vue';
@@ -74,11 +75,10 @@ import MkFolder from '@/components/ui/folder.vue';
 import MkQueueChart from '@/components/queue-chart.vue';
 import { version, url } from '@/config';
 import number from '@/filters/number';
-import XMetrics from './metrics.vue';
 import * as os from '@/os';
 import { stream } from '@/stream';
-import * as symbols from '@/symbols';
 import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
 
 let stats: any = $ref(null);
 let serverInfo: any = $ref(null);
@@ -106,7 +106,7 @@ onMounted(async () => {
 	nextTick(() => {
 		queueStatsConnection.send('requestLog', {
 			id: Math.random().toString().substr(2, 8),
-			length: 200
+			length: 200,
 		});
 	});
 });
@@ -115,12 +115,14 @@ onBeforeUnmount(() => {
 	queueStatsConnection.dispose();
 });
 
-defineExpose({
-	[symbols.PAGE_INFO]: {
-		title: i18n.ts.dashboard,
-		icon: 'fas fa-tachometer-alt',
-		bg: 'var(--bg)',
-	}
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.dashboard,
+	icon: 'fas fa-tachometer-alt',
+	bg: 'var(--bg)',
 });
 </script>
 
diff --git a/packages/client/src/pages/admin/proxy-account.vue b/packages/client/src/pages/admin/proxy-account.vue
index 727e20e7e5..0c5bb1bc9f 100644
--- a/packages/client/src/pages/admin/proxy-account.vue
+++ b/packages/client/src/pages/admin/proxy-account.vue
@@ -1,5 +1,6 @@
-<template>
-<MkSpacer :content-max="700" :margin-min="16" :margin-max="32">
+<template><MkStickyContainer>
+	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
+		<MkSpacer :content-max="700" :margin-min="16" :margin-max="32">
 	<FormSuspense :p="init">
 		<MkInfo class="_formBlock">{{ i18n.ts.proxyAccountDescription }}</MkInfo>
 		<MkKeyValue class="_formBlock">
@@ -9,7 +10,7 @@
 
 		<FormButton primary class="_formBlock" @click="chooseProxyAccount">{{ i18n.ts.selectAccount }}</FormButton>
 	</FormSuspense>
-</MkSpacer>
+</MkSpacer></MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
@@ -19,9 +20,9 @@ import FormButton from '@/components/ui/button.vue';
 import MkInfo from '@/components/ui/info.vue';
 import FormSuspense from '@/components/form/suspense.vue';
 import * as os from '@/os';
-import * as symbols from '@/symbols';
 import { fetchInstance } from '@/instance';
 import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
 
 let proxyAccount: any = $ref(null);
 let proxyAccountId: any = $ref(null);
@@ -50,11 +51,13 @@ function save() {
 	});
 }
 
-defineExpose({
-	[symbols.PAGE_INFO]: {
-		title: i18n.ts.proxyAccount,
-		icon: 'fas fa-ghost',
-		bg: 'var(--bg)',
-	}
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.proxyAccount,
+	icon: 'fas fa-ghost',
+	bg: 'var(--bg)',
 });
 </script>
diff --git a/packages/client/src/pages/admin/queue.vue b/packages/client/src/pages/admin/queue.vue
index 656b18199f..c2865525ab 100644
--- a/packages/client/src/pages/admin/queue.vue
+++ b/packages/client/src/pages/admin/queue.vue
@@ -1,24 +1,28 @@
 <template>
-<MkSpacer :content-max="800">
-	<XQueue :connection="connection" domain="inbox">
-		<template #title>In</template>
-	</XQueue>
-	<XQueue :connection="connection" domain="deliver">
-		<template #title>Out</template>
-	</XQueue>
-	<MkButton danger @click="clear()"><i class="fas fa-trash-alt"></i> {{ i18n.ts.clearQueue }}</MkButton>
-</MkSpacer>
+<MkStickyContainer>
+	<template #header><XHeader :actions="headerActions" :tabs="headerTabs"/></template>
+	<MkSpacer :content-max="800">
+		<XQueue :connection="connection" domain="inbox">
+			<template #title>In</template>
+		</XQueue>
+		<XQueue :connection="connection" domain="deliver">
+			<template #title>Out</template>
+		</XQueue>
+		<MkButton danger @click="clear()"><i class="fas fa-trash-alt"></i> {{ i18n.ts.clearQueue }}</MkButton>
+	</MkSpacer>
+</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
 import { markRaw, onMounted, onBeforeUnmount, nextTick } from 'vue';
-import MkButton from '@/components/ui/button.vue';
 import XQueue from './queue.chart.vue';
+import XHeader from './_header_.vue';
+import MkButton from '@/components/ui/button.vue';
 import * as os from '@/os';
 import { stream } from '@/stream';
-import * as symbols from '@/symbols';
 import * as config from '@/config';
 import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
 
 const connection = markRaw(stream.useChannel('queueStats'));
 
@@ -38,7 +42,7 @@ onMounted(() => {
 	nextTick(() => {
 		connection.send('requestLog', {
 			id: Math.random().toString().substr(2, 8),
-			length: 200
+			length: 200,
 		});
 	});
 });
@@ -47,19 +51,20 @@ onBeforeUnmount(() => {
 	connection.dispose();
 });
 
-defineExpose({
-	[symbols.PAGE_INFO]: {
-		title: i18n.ts.jobQueue,
-		icon: 'fas fa-clipboard-list',
-		bg: 'var(--bg)',
-		actions: [{
-			asFullButton: true,
-			icon: 'fas fa-up-right-from-square',
-			text: i18n.ts.dashboard,
-			handler: () => {
-				window.open(config.url + '/queue', '_blank');
-			},
-		}],
-	}
+const headerActions = $computed(() => [{
+	asFullButton: true,
+	icon: 'fas fa-up-right-from-square',
+	text: i18n.ts.dashboard,
+	handler: () => {
+		window.open(config.url + '/queue', '_blank');
+	},
+}]);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.jobQueue,
+	icon: 'fas fa-clipboard-list',
+	bg: 'var(--bg)',
 });
 </script>
diff --git a/packages/client/src/pages/admin/relays.vue b/packages/client/src/pages/admin/relays.vue
index 1a36bb4753..1ca4f2df09 100644
--- a/packages/client/src/pages/admin/relays.vue
+++ b/packages/client/src/pages/admin/relays.vue
@@ -1,24 +1,28 @@
 <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="fas fa-check icon accepted"></i>
-			<i v-else-if="relay.status === 'rejected'" class="fas fa-ban icon rejected"></i>
-			<i v-else class="fas fa-clock icon requesting"></i>
-			<span>{{ $t(`_relayStatus.${relay.status}`) }}</span>
+<MkStickyContainer>
+	<template #header><XHeader :actions="headerActions" :tabs="headerTabs"/></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="fas fa-check icon accepted"></i>
+				<i v-else-if="relay.status === 'rejected'" class="fas fa-ban icon rejected"></i>
+				<i v-else class="fas fa-clock icon requesting"></i>
+				<span>{{ $t(`_relayStatus.${relay.status}`) }}</span>
+			</div>
+			<MkButton class="button" inline danger @click="remove(relay.inbox)"><i class="fas fa-trash-alt"></i> {{ i18n.ts.remove }}</MkButton>
 		</div>
-		<MkButton class="button" inline danger @click="remove(relay.inbox)"><i class="fas fa-trash-alt"></i> {{ i18n.ts.remove }}</MkButton>
-	</div>
-</MkSpacer>
+	</MkSpacer>
+</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
 import { } from 'vue';
+import XHeader from './_header_.vue';
 import MkButton from '@/components/ui/button.vue';
 import * as os from '@/os';
-import * as symbols from '@/symbols';
 import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
 
 let relays: any[] = $ref([]);
 
@@ -26,30 +30,30 @@ async function addRelay() {
 	const { canceled, result: inbox } = await os.inputText({
 		title: i18n.ts.addRelay,
 		type: 'url',
-		placeholder: i18n.ts.inboxUrl
+		placeholder: i18n.ts.inboxUrl,
 	});
 	if (canceled) return;
 	os.api('admin/relays/add', {
-		inbox
+		inbox,
 	}).then((relay: any) => {
 		refresh();
 	}).catch((err: any) => {
 		os.alert({
 			type: 'error',
-			text: err.message || err
+			text: err.message || err,
 		});
 	});
 }
 
 function remove(inbox: string) {
 	os.api('admin/relays/remove', {
-		inbox
+		inbox,
 	}).then(() => {
 		refresh();
 	}).catch((err: any) => {
 		os.alert({
 			type: 'error',
-			text: err.message || err
+			text: err.message || err,
 		});
 	});
 }
@@ -62,18 +66,19 @@ function refresh() {
 
 refresh();
 
-defineExpose({
-	[symbols.PAGE_INFO]: {
-		title: i18n.ts.relays,
-		icon: 'fas fa-globe',
-		bg: 'var(--bg)',
-		actions: [{
-			asFullButton: true,
-			icon: 'fas fa-plus',
-			text: i18n.ts.addRelay,
-			handler: addRelay,
-		}],
-	}
+const headerActions = $computed(() => [{
+	asFullButton: true,
+	icon: 'fas fa-plus',
+	text: i18n.ts.addRelay,
+	handler: addRelay,
+}]);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.relays,
+	icon: 'fas fa-globe',
+	bg: 'var(--bg)',
 });
 </script>
 
diff --git a/packages/client/src/pages/admin/security.vue b/packages/client/src/pages/admin/security.vue
index 6b8f70cca5..65b08565cd 100644
--- a/packages/client/src/pages/admin/security.vue
+++ b/packages/client/src/pages/admin/security.vue
@@ -1,36 +1,41 @@
 <template>
-<MkSpacer :content-max="700" :margin-min="16" :margin-max="32">
-	<FormSuspense :p="init">
-		<div class="_formRoot">
-			<FormFolder class="_formBlock">
-				<template #icon><i class="fas fa-shield-alt"></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><XHeader :actions="headerActions" :tabs="headerTabs"/></template>
+	<MkSpacer :content-max="700" :margin-min="16" :margin-max="32">
+		<FormSuspense :p="init">
+			<div class="_formRoot">
+				<FormFolder class="_formBlock">
+					<template #icon><i class="fas fa-shield-alt"></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 #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="fas fa-link"></i></template>
-						<template #label>Summaly Proxy URL</template>
-					</FormInput>
+					<div class="_formRoot">
+						<FormInput v-model="summalyProxy" class="_formBlock">
+							<template #prefix><i class="fas fa-link"></i></template>
+							<template #label>Summaly Proxy URL</template>
+						</FormInput>
 
-					<FormButton primary class="_formBlock" @click="save"><i class="fas fa-save"></i> {{ i18n.ts.save }}</FormButton>
-				</div>
-			</FormFolder>
-		</div>
-	</FormSuspense>
-</MkSpacer>
+						<FormButton primary class="_formBlock" @click="save"><i class="fas fa-save"></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 XHeader from './_header_.vue';
 import FormFolder from '@/components/form/folder.vue';
 import FormSwitch from '@/components/form/switch.vue';
 import FormInfo from '@/components/ui/info.vue';
@@ -38,11 +43,10 @@ import FormSuspense from '@/components/form/suspense.vue';
 import FormSection from '@/components/form/section.vue';
 import FormInput from '@/components/form/input.vue';
 import FormButton from '@/components/ui/button.vue';
-import XBotProtection from './bot-protection.vue';
 import * as os from '@/os';
-import * as symbols from '@/symbols';
 import { fetchInstance } from '@/instance';
 import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
 
 let summalyProxy: string = $ref('');
 let enableHcaptcha: boolean = $ref(false);
@@ -63,11 +67,13 @@ function save() {
 	});
 }
 
-defineExpose({
-	[symbols.PAGE_INFO]: {
-		title: i18n.ts.security,
-		icon: 'fas fa-lock',
-		bg: 'var(--bg)',
-	}
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.security,
+	icon: 'fas fa-lock',
+	bg: 'var(--bg)',
 });
 </script>
diff --git a/packages/client/src/pages/admin/settings.vue b/packages/client/src/pages/admin/settings.vue
index 6dc30fe50b..a5767cc2c2 100644
--- a/packages/client/src/pages/admin/settings.vue
+++ b/packages/client/src/pages/admin/settings.vue
@@ -1,149 +1,155 @@
 <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="fas fa-link"></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>
-				</FormInput>
-
-				<FormInput v-model="maintainerEmail" type="email" class="_formBlock">
-					<template #prefix><i class="fas fa-envelope"></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="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>
-				<template #label>{{ i18n.ts.theme }}</template>
-
-				<FormInput v-model="iconUrl" class="_formBlock">
-					<template #prefix><i class="fas fa-link"></i></template>
-					<template #label>{{ i18n.ts.iconUrl }}</template>
-				</FormInput>
-
-				<FormInput v-model="bannerUrl" class="_formBlock">
-					<template #prefix><i class="fas fa-link"></i></template>
-					<template #label>{{ i18n.ts.bannerUrl }}</template>
-				</FormInput>
-
-				<FormInput v-model="backgroundImageUrl" class="_formBlock">
-					<template #prefix><i class="fas fa-link"></i></template>
-					<template #label>{{ i18n.ts.backgroundImageUrl }}</template>
-				</FormInput>
-
-				<FormInput v-model="themeColor" class="_formBlock">
-					<template #prefix><i class="fas fa-palette"></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.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>
+<div>
+	<MkStickyContainer>
+		<template #header><XHeader :actions="headerActions" :tabs="headerTabs"/></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="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>
+					<FormTextarea v-model="description" class="_formBlock">
+						<template #label>{{ i18n.ts.instanceDescription }}</template>
+					</FormTextarea>
 
-			<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="fas fa-key"></i></template>
-						<template #label>Public key</template>
+					<FormInput v-model="tosUrl" class="_formBlock">
+						<template #prefix><i class="fas fa-link"></i></template>
+						<template #label>{{ i18n.ts.tosUrl }}</template>
 					</FormInput>
 
-					<FormInput v-model="swPrivateKey" class="_formBlock">
-						<template #prefix><i class="fas fa-key"></i></template>
-						<template #label>Private key</template>
-					</FormInput>
-				</template>
-			</FormSection>
+					<FormSplit :min-width="300">
+						<FormInput v-model="maintainerName" class="_formBlock">
+							<template #label>{{ i18n.ts.maintainerName }}</template>
+						</FormInput>
 
-			<FormSection>
-				<template #label>DeepL Translation</template>
+						<FormInput v-model="maintainerEmail" type="email" class="_formBlock">
+							<template #prefix><i class="fas fa-envelope"></i></template>
+							<template #label>{{ i18n.ts.maintainerEmail }}</template>
+						</FormInput>
+					</FormSplit>
 
-				<FormInput v-model="deeplAuthKey" class="_formBlock">
-					<template #prefix><i class="fas fa-key"></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>
+					<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="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>
+						<template #label>{{ i18n.ts.theme }}</template>
+
+						<FormInput v-model="iconUrl" class="_formBlock">
+							<template #prefix><i class="fas fa-link"></i></template>
+							<template #label>{{ i18n.ts.iconUrl }}</template>
+						</FormInput>
+
+						<FormInput v-model="bannerUrl" class="_formBlock">
+							<template #prefix><i class="fas fa-link"></i></template>
+							<template #label>{{ i18n.ts.bannerUrl }}</template>
+						</FormInput>
+
+						<FormInput v-model="backgroundImageUrl" class="_formBlock">
+							<template #prefix><i class="fas fa-link"></i></template>
+							<template #label>{{ i18n.ts.backgroundImageUrl }}</template>
+						</FormInput>
+
+						<FormInput v-model="themeColor" class="_formBlock">
+							<template #prefix><i class="fas fa-palette"></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.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="fas fa-key"></i></template>
+								<template #label>Public key</template>
+							</FormInput>
+
+							<FormInput v-model="swPrivateKey" class="_formBlock">
+								<template #prefix><i class="fas fa-key"></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="fas fa-key"></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 { } from 'vue';
+import XHeader from './_header_.vue';
 import FormSwitch from '@/components/form/switch.vue';
 import FormInput from '@/components/form/input.vue';
 import FormTextarea from '@/components/form/textarea.vue';
@@ -152,9 +158,9 @@ import FormSection from '@/components/form/section.vue';
 import FormSplit from '@/components/form/split.vue';
 import FormSuspense from '@/components/form/suspense.vue';
 import * as os from '@/os';
-import * as symbols from '@/symbols';
 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);
@@ -240,17 +246,18 @@ function save() {
 	});
 }
 
-defineExpose({
-	[symbols.PAGE_INFO]: {
-		title: i18n.ts.general,
-		icon: 'fas fa-cog',
-		bg: 'var(--bg)',
-		actions: [{
-			asFullButton: true,
-			icon: 'fas fa-check',
-			text: i18n.ts.save,
-			handler: save,
-		}],
-	}
+const headerActions = $computed(() => [{
+	asFullButton: true,
+	icon: 'fas fa-check',
+	text: i18n.ts.save,
+	handler: save,
+}]);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.general,
+	icon: 'fas fa-cog',
+	bg: 'var(--bg)',
 });
 </script>
diff --git a/packages/client/src/pages/admin/users.vue b/packages/client/src/pages/admin/users.vue
index f05aa5ff45..dccf952ba9 100644
--- a/packages/client/src/pages/admin/users.vue
+++ b/packages/client/src/pages/admin/users.vue
@@ -1,76 +1,84 @@
 <template>
-<div class="lknzcolw">
-	<div class="users">
-		<div class="inputs">
-			<MkSelect v-model="sort" style="flex: 1;">
-				<template #label>{{ $ts.sort }}</template>
-				<option value="-createdAt">{{ $ts.registeredDate }} ({{ $ts.ascendingOrder }})</option>
-				<option value="+createdAt">{{ $ts.registeredDate }} ({{ $ts.descendingOrder }})</option>
-				<option value="-updatedAt">{{ $ts.lastUsed }} ({{ $ts.ascendingOrder }})</option>
-				<option value="+updatedAt">{{ $ts.lastUsed }} ({{ $ts.descendingOrder }})</option>
-			</MkSelect>
-			<MkSelect v-model="state" style="flex: 1;">
-				<template #label>{{ $ts.state }}</template>
-				<option value="all">{{ $ts.all }}</option>
-				<option value="available">{{ $ts.normal }}</option>
-				<option value="admin">{{ $ts.administrator }}</option>
-				<option value="moderator">{{ $ts.moderator }}</option>
-				<option value="silenced">{{ $ts.silence }}</option>
-				<option value="suspended">{{ $ts.suspend }}</option>
-			</MkSelect>
-			<MkSelect v-model="origin" style="flex: 1;">
-				<template #label>{{ $ts.instance }}</template>
-				<option value="combined">{{ $ts.all }}</option>
-				<option value="local">{{ $ts.local }}</option>
-				<option value="remote">{{ $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>{{ $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>{{ $ts.host }}</template>
-			</MkInput>
-		</div>
+<div>
+	<MkStickyContainer>
+		<template #header><XHeader :actions="headerActions" :tabs="headerTabs"/></template>
+		<MkSpacer :content-max="900">
+			<div class="lknzcolw">
+				<div class="users">
+					<div class="inputs">
+						<MkSelect v-model="sort" style="flex: 1;">
+							<template #label>{{ $ts.sort }}</template>
+							<option value="-createdAt">{{ $ts.registeredDate }} ({{ $ts.ascendingOrder }})</option>
+							<option value="+createdAt">{{ $ts.registeredDate }} ({{ $ts.descendingOrder }})</option>
+							<option value="-updatedAt">{{ $ts.lastUsed }} ({{ $ts.ascendingOrder }})</option>
+							<option value="+updatedAt">{{ $ts.lastUsed }} ({{ $ts.descendingOrder }})</option>
+						</MkSelect>
+						<MkSelect v-model="state" style="flex: 1;">
+							<template #label>{{ $ts.state }}</template>
+							<option value="all">{{ $ts.all }}</option>
+							<option value="available">{{ $ts.normal }}</option>
+							<option value="admin">{{ $ts.administrator }}</option>
+							<option value="moderator">{{ $ts.moderator }}</option>
+							<option value="silenced">{{ $ts.silence }}</option>
+							<option value="suspended">{{ $ts.suspend }}</option>
+						</MkSelect>
+						<MkSelect v-model="origin" style="flex: 1;">
+							<template #label>{{ $ts.instance }}</template>
+							<option value="combined">{{ $ts.all }}</option>
+							<option value="local">{{ $ts.local }}</option>
+							<option value="remote">{{ $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>{{ $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>{{ $ts.host }}</template>
+						</MkInput>
+					</div>
 
-		<MkPagination v-slot="{items}" ref="paginationComponent" :pagination="pagination" class="users">
-			<button v-for="user in items" :key="user.id" class="user _panel _button _gap" @click="show(user)">
-				<MkAvatar class="avatar" :user="user" :disable-link="true" :show-indicator="true"/>
-				<div class="body">
-					<header>
-						<MkUserName class="name" :user="user"/>
-						<span class="acct">@{{ acct(user) }}</span>
-						<span v-if="user.isAdmin" class="staff"><i class="fas fa-bookmark"></i></span>
-						<span v-if="user.isModerator" class="staff"><i class="far fa-bookmark"></i></span>
-						<span v-if="user.isSilenced" class="punished"><i class="fas fa-microphone-slash"></i></span>
-						<span v-if="user.isSuspended" class="punished"><i class="fas fa-snowflake"></i></span>
-					</header>
-					<div>
-						<span>{{ $ts.lastUsed }}: <MkTime v-if="user.updatedAt" :time="user.updatedAt" mode="detail"/></span>
-					</div>
-					<div>
-						<span>{{ $ts.registeredDate }}: <MkTime :time="user.createdAt" mode="detail"/></span>
-					</div>
+					<MkPagination v-slot="{items}" ref="paginationComponent" :pagination="pagination" class="users">
+						<button v-for="user in items" :key="user.id" class="user _panel _button _gap" @click="show(user)">
+							<MkAvatar class="avatar" :user="user" :disable-link="true" :show-indicator="true"/>
+							<div class="body">
+								<header>
+									<MkUserName class="name" :user="user"/>
+									<span class="acct">@{{ acct(user) }}</span>
+									<span v-if="user.isAdmin" class="staff"><i class="fas fa-bookmark"></i></span>
+									<span v-if="user.isModerator" class="staff"><i class="far fa-bookmark"></i></span>
+									<span v-if="user.isSilenced" class="punished"><i class="fas fa-microphone-slash"></i></span>
+									<span v-if="user.isSuspended" class="punished"><i class="fas fa-snowflake"></i></span>
+								</header>
+								<div>
+									<span>{{ $ts.lastUsed }}: <MkTime v-if="user.updatedAt" :time="user.updatedAt" mode="detail"/></span>
+								</div>
+								<div>
+									<span>{{ $ts.registeredDate }}: <MkTime :time="user.createdAt" mode="detail"/></span>
+								</div>
+							</div>
+						</button>
+					</MkPagination>
 				</div>
-			</button>
-		</MkPagination>
-	</div>
+			</div>
+		</MkSpacer>
+	</MkStickyContainer>
 </div>
 </template>
 
 <script lang="ts" setup>
 import { computed } from 'vue';
+import XHeader from './_header_.vue';
 import MkInput from '@/components/form/input.vue';
 import MkSelect from '@/components/form/select.vue';
 import MkPagination from '@/components/ui/pagination.vue';
 import { acct } from '@/filters/user';
 import * as os from '@/os';
-import * as symbols from '@/symbols';
 import { lookupUser } from '@/scripts/lookup-user';
 import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
 
 let paginationComponent = $ref<InstanceType<typeof MkPagination>>();
 
@@ -89,7 +97,7 @@ const pagination = {
 		username: searchUsername,
 		hostname: searchHost,
 	})),
-	offsetMode: true
+	offsetMode: true,
 };
 
 function searchUser() {
@@ -106,7 +114,7 @@ async function addUser() {
 
 	const { canceled: canceled2, result: password } = await os.inputText({
 		title: i18n.ts.password,
-		type: 'password'
+		type: 'password',
 	});
 	if (canceled2) return;
 
@@ -122,34 +130,34 @@ function show(user) {
 	os.pageWindow(`/user-info/${user.id}`);
 }
 
-defineExpose({
-	[symbols.PAGE_INFO]: computed(() => ({
-		title: i18n.ts.users,
-		icon: 'fas fa-users',
-		bg: 'var(--bg)',
-		actions: [{
-			icon: 'fas fa-search',
-			text: i18n.ts.search,
-			handler: searchUser
-		}, {
-			asFullButton: true,
-			icon: 'fas fa-plus',
-			text: i18n.ts.addUser,
-			handler: addUser
-		}, {
-			asFullButton: true,
-			icon: 'fas fa-search',
-			text: i18n.ts.lookup,
-			handler: lookupUser
-		}],
-	})),
-});
+const headerActions = $computed(() => [{
+	icon: 'fas fa-search',
+	text: i18n.ts.search,
+	handler: searchUser,
+}, {
+	asFullButton: true,
+	icon: 'fas fa-plus',
+	text: i18n.ts.addUser,
+	handler: addUser,
+}, {
+	asFullButton: true,
+	icon: 'fas fa-search',
+	text: i18n.ts.lookup,
+	handler: lookupUser,
+}]);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata(computed(() => ({
+	title: i18n.ts.users,
+	icon: 'fas fa-users',
+	bg: 'var(--bg)',
+})));
 </script>
 
 <style lang="scss" scoped>
 .lknzcolw {
 	> .users {
-		margin: var(--margin);
 
 		> .inputs {
 			display: flex;
diff --git a/packages/client/src/pages/announcements.vue b/packages/client/src/pages/announcements.vue
index 53727823a4..9afaa7fd1f 100644
--- a/packages/client/src/pages/announcements.vue
+++ b/packages/client/src/pages/announcements.vue
@@ -1,57 +1,53 @@
 <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="fas fa-check"></i> {{ $ts.gotIt }}</MkButton>
-			</div>
-		</section>
-	</MkPagination>
-</MkSpacer>
+<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="fas fa-check"></i> {{ $ts.gotIt }}</MkButton>
+				</div>
+			</section>
+		</MkPagination>
+	</MkSpacer>
+</MkStickyContainer>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
+import { } from 'vue';
 import MkPagination from '@/components/ui/pagination.vue';
 import MkButton from '@/components/ui/button.vue';
 import * as os from '@/os';
-import * as symbols from '@/symbols';
+import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
 
-export default defineComponent({
-	components: {
-		MkPagination,
-		MkButton
-	},
+const pagination = {
+	endpoint: 'announcements' as const,
+	limit: 10,
+};
 
-	data() {
-		return {
-			[symbols.PAGE_INFO]: {
-				title: this.$ts.announcements,
-				icon: 'fas fa-broadcast-tower',
-				bg: 'var(--bg)',
-			},
-			pagination: {
-				endpoint: 'announcements' as const,
-				limit: 10,
-			},
-		};
-	},
+// TODO: これは実質的に親コンポーネントから子コンポーネントのプロパティを変更してるのでなんとかしたい
+function read(items, announcement, i) {
+	items[i] = {
+		...announcement,
+		isRead: true,
+	};
+	os.api('i/read-announcement', { announcementId: announcement.id });
+}
 
-	methods: {
-		// TODO: これは実質的に親コンポーネントから子コンポーネントのプロパティを変更してるのでなんとかしたい
-		read(items, announcement, i) {
-			items[i] = {
-				...announcement,
-				isRead: true,
-			};
-			os.api('i/read-announcement', { announcementId: announcement.id });
-		},
-	}
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.announcements,
+	icon: 'fas fa-broadcast-tower',
+	bg: 'var(--bg)',
 });
 </script>
 
diff --git a/packages/client/src/pages/antenna-timeline.vue b/packages/client/src/pages/antenna-timeline.vue
index c38f285725..29b6066fc9 100644
--- a/packages/client/src/pages/antenna-timeline.vue
+++ b/packages/client/src/pages/antenna-timeline.vue
@@ -1,8 +1,9 @@
 <template>
-<div v-hotkey.global="keymap" v-size="{ min: [800] }" class="tqmomfks">
+<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()">{{ $ts.newNoteRecived }}</button></div>
 	<div class="tl _block">
-		<XTimeline ref="tl" :key="antennaId"
+		<XTimeline
+			ref="tlEl" :key="antennaId"
 			class="tl"
 			src="antenna"
 			:antenna="antennaId"
@@ -13,92 +14,78 @@
 </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, defineAsyncComponent, computed } from 'vue';
+<script lang="ts" setup>
+import { computed, inject, watch } from 'vue';
 import XTimeline from '@/components/timeline.vue';
 import { scroll } from '@/scripts/scroll';
 import * as os from '@/os';
-import * as symbols from '@/symbols';
+import { useRouter } from '@/router';
+import { definePageMetadata } from '@/scripts/page-metadata';
+import i18n from '@/components/global/i18n';
 
-export default defineComponent({
-	components: {
-		XTimeline,
-	},
+const router = useRouter();
 
-	props: {
-		antennaId: {
-			type: String,
-			required: true
-		}
-	},
+const props = defineProps<{
+	antennaId: string;
+}>();
 
-	data() {
-		return {
-			antenna: null,
-			queue: 0,
-			[symbols.PAGE_INFO]: computed(() => this.antenna ? {
-				title: this.antenna.name,
-				icon: 'fas fa-satellite',
-				bg: 'var(--bg)',
-				actions: [{
-					icon: 'fas fa-calendar-alt',
-					text: this.$ts.jumpToSpecifiedDate,
-					handler: this.timetravel
-				}, {
-					icon: 'fas fa-cog',
-					text: this.$ts.settings,
-					handler: this.settings
-				}],
-			} : null),
-		};
-	},
+let antenna = $ref(null);
+let queue = $ref(0);
+let rootEl = $ref<HTMLElement>();
+let tlEl = $ref<InstanceType<typeof XTimeline>>();
+const keymap = $computed(() => ({
+	't': focus,
+}));
 
-	computed: {
-		keymap(): any {
-			return {
-				't': this.focus
-			};
-		},
-	},
+function queueUpdated(q) {
+	queue = q;
+}
 
-	watch: {
-		antennaId: {
-			async handler() {
-				this.antenna = await os.api('antennas/show', {
-					antennaId: this.antennaId
-				});
-			},
-			immediate: true
-		}
-	},
+function top() {
+	scroll(rootEl, { top: 0 });
+}
 
-	methods: {
-		queueUpdated(q) {
-			this.queue = q;
-		},
+async function timetravel() {
+	const { canceled, result: date } = await os.inputDate({
+		title: i18n.ts.date,
+	});
+	if (canceled) return;
 
-		top() {
-			scroll(this.$el, { top: 0 });
-		},
+	tlEl.timetravel(date);
+}
 
-		async timetravel() {
-			const { canceled, result: date } = await os.inputDate({
-				title: this.$ts.date,
-			});
-			if (canceled) return;
+function settings() {
+	router.push(`/my/antennas/${props.antennaId}`);
+}
 
-			this.$refs.tl.timetravel(date);
-		},
+function focus() {
+	tlEl.focus();
+}
 
-		settings() {
-			this.$router.push(`/my/antennas/${this.antennaId}`);
-		},
+watch(() => props.antennaId, async () => {
+	antenna = await os.api('antennas/show', {
+		antennaId: props.antennaId,
+	});
+}, { immediate: true });
 
-		focus() {
-			(this.$refs.tl as any).focus();
-		}
-	}
-});
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata(computed(() => antenna ? {
+	title: antenna.name,
+	icon: 'fas fa-satellite',
+	bg: 'var(--bg)',
+	actions: [{
+		icon: 'fas fa-calendar-alt',
+		text: i18n.ts.jumpToSpecifiedDate,
+		handler: timetravel,
+	}, {
+		icon: 'fas fa-cog',
+		text: i18n.ts.settings,
+		handler: settings,
+	}],
+} : 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 88acbcd3a3..2f8eeadff1 100644
--- a/packages/client/src/pages/api-console.vue
+++ b/packages/client/src/pages/api-console.vue
@@ -1,40 +1,43 @@
 <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="fas fa-paper-plane"></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="fas fa-paper-plane"></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>
+	</MkSpacer>
+</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
 import { ref } from 'vue';
 import JSON5 from 'json5';
+import { Endpoints } from 'misskey-js';
 import MkButton from '@/components/ui/button.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 * as symbols from '@/symbols';
-import { Endpoints } from 'misskey-js';
+import { definePageMetadata } from '@/scripts/page-metadata';
 
 const body = ref('{}');
 const endpoint = ref('');
@@ -75,10 +78,12 @@ function onEndpointChange() {
 	});
 }
 
-defineExpose({
-	[symbols.PAGE_INFO]: {
-		title: 'API console',
-		icon: 'fas fa-terminal'
-	},
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: 'API console',
+	icon: 'fas fa-terminal',
 });
 </script>
diff --git a/packages/client/src/pages/auth.vue b/packages/client/src/pages/auth.vue
index e65161dd2b..9457cd6b2f 100644
--- a/packages/client/src/pages/auth.vue
+++ b/packages/client/src/pages/auth.vue
@@ -15,7 +15,7 @@
 		<h1>{{ $ts._auth.denied }}</h1>
 	</div>
 	<div v-if="state == 'accepted'" class="accepted">
-		<h1>{{ session.app.isAuthorized ? this.$t('already-authorized') : this.$ts.allowed }}</h1>
+		<h1>{{ session.app.isAuthorized ? $t('already-authorized') : $ts.allowed }}</h1>
 		<p v-if="session.app.callbackUrl">{{ $ts._auth.callback }}<MkEllipsis/></p>
 		<p v-if="!session.app.callbackUrl">{{ $ts._auth.pleaseGoBack }}</p>
 	</div>
@@ -40,24 +40,20 @@ export default defineComponent({
 		XForm,
 		MkSignin,
 	},
+	props: ['token'],
 	data() {
 		return {
 			state: null,
 			session: null,
-			fetching: true
+			fetching: true,
 		};
 	},
-	computed: {
-		token(): string {
-			return this.$route.params.token;
-		}
-	},
 	mounted() {
 		if (!this.$i) return;
 
 		// Fetch session
 		os.api('auth/session/show', {
-			token: this.token
+			token: this.token,
 		}).then(session => {
 			this.session = session;
 			this.fetching = false;
@@ -65,7 +61,7 @@ export default defineComponent({
 			// 既に連携していた場合
 			if (this.session.app.isAuthorized) {
 				os.api('auth/accept', {
-					token: this.session.token
+					token: this.session.token,
 				}).then(() => {
 					this.accepted();
 				});
@@ -85,8 +81,8 @@ export default defineComponent({
 			}
 		}, onLogin(res) {
 			login(res.i);
-		}
-	}
+		},
+	},
 });
 </script>
 
diff --git a/packages/client/src/pages/channel-editor.vue b/packages/client/src/pages/channel-editor.vue
index ea3a5dab76..2065bd6689 100644
--- a/packages/client/src/pages/channel-editor.vue
+++ b/packages/client/src/pages/channel-editor.vue
@@ -1,127 +1,122 @@
 <template>
-<MkSpacer :content-max="700">
-	<div class="_formRoot">
-		<MkInput v-model="name" class="_formBlock">
-			<template #label>{{ $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>{{ $ts.name }}</template>
+			</MkInput>
 
-		<MkTextarea v-model="description" class="_formBlock">
-			<template #label>{{ $ts.description }}</template>
-		</MkTextarea>
+			<MkTextarea v-model="description" class="_formBlock">
+				<template #label>{{ $ts.description }}</template>
+			</MkTextarea>
 
-		<div class="banner">
-			<MkButton v-if="bannerId == null" @click="setBannerImage"><i class="fas fa-plus"></i> {{ $ts._channel.setBanner }}</MkButton>
-			<div v-else-if="bannerUrl">
-				<img :src="bannerUrl" style="width: 100%;"/>
-				<MkButton @click="removeBannerImage()"><i class="fas fa-trash-alt"></i> {{ $ts._channel.removeBanner }}</MkButton>
+			<div class="banner">
+				<MkButton v-if="bannerId == null" @click="setBannerImage"><i class="fas fa-plus"></i> {{ $ts._channel.setBanner }}</MkButton>
+				<div v-else-if="bannerUrl">
+					<img :src="bannerUrl" style="width: 100%;"/>
+					<MkButton @click="removeBannerImage()"><i class="fas fa-trash-alt"></i> {{ $ts._channel.removeBanner }}</MkButton>
+				</div>
+			</div>
+			<div class="_formBlock">
+				<MkButton primary @click="save()"><i class="fas fa-save"></i> {{ channelId ? $ts.save : $ts.create }}</MkButton>
 			</div>
 		</div>
-		<div class="_formBlock">
-			<MkButton primary @click="save()"><i class="fas fa-save"></i> {{ channelId ? $ts.save : $ts.create }}</MkButton>
-		</div>
-	</div>
-</MkSpacer>
+	</MkSpacer>
+</MkStickyContainer>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent } from 'vue';
+<script lang="ts" setup>
+import { computed, inject, watch } from 'vue';
 import MkTextarea from '@/components/form/textarea.vue';
 import MkButton from '@/components/ui/button.vue';
 import MkInput from '@/components/form/input.vue';
 import { selectFile } from '@/scripts/select-file';
 import * as os from '@/os';
-import * as symbols from '@/symbols';
+import { useRouter } from '@/router';
+import { definePageMetadata } from '@/scripts/page-metadata';
+import { i18n } from '@/i18n';
 
-export default defineComponent({
-	components: {
-		MkTextarea, MkButton, MkInput,
-	},
+const router = useRouter();
 
-	props: {
-		channelId: {
-			type: String,
-			required: false
-		},
-	},
+const props = defineProps<{
+	channelId?: string;
+}>();
 
-	data() {
-		return {
-			[symbols.PAGE_INFO]: computed(() => this.channelId ? {
-				title: this.$ts._channel.edit,
-				icon: 'fas fa-satellite-dish',
-				bg: 'var(--bg)',
-			} : {
-				title: this.$ts._channel.create,
-				icon: 'fas fa-satellite-dish',
-				bg: 'var(--bg)',
-			}),
-			channel: null,
-			name: null,
-			description: null,
-			bannerUrl: null,
-			bannerId: null,
-		};
-	},
+let channel = $ref(null);
+let name = $ref(null);
+let description = $ref(null);
+let bannerUrl = $ref<string | null>(null);
+let bannerId = $ref<string | null>(null);
 
-	watch: {
-		async bannerId() {
-			if (this.bannerId == null) {
-				this.bannerUrl = null;
-			} else {
-				this.bannerUrl = (await os.api('drive/files/show', {
-					fileId: this.bannerId,
-				})).url;
-			}
-		},
-	},
-
-	async created() {
-		if (this.channelId) {
-			this.channel = await os.api('channels/show', {
-				channelId: this.channelId,
-			});
-
-			this.name = this.channel.name;
-			this.description = this.channel.description;
-			this.bannerId = this.channel.bannerId;
-			this.bannerUrl = this.channel.bannerUrl;
-		}
-	},
-
-	methods: {
-		save() {
-			const params = {
-				name: this.name,
-				description: this.description,
-				bannerId: this.bannerId,
-			};
-
-			if (this.channelId) {
-				params.channelId = this.channelId;
-				os.api('channels/update', params)
-				.then(channel => {
-					os.success();
-				});
-			} else {
-				os.api('channels/create', params)
-				.then(channel => {
-					os.success();
-					this.$router.push(`/channels/${channel.id}`);
-				});
-			}
-		},
-
-		setBannerImage(evt) {
-			selectFile(evt.currentTarget ?? evt.target, null).then(file => {
-				this.bannerId = file.id;
-			});
-		},
-
-		removeBannerImage() {
-			this.bannerId = null;
-		}
+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', {
+		channelId: props.channelId,
+	});
+
+	name = channel.name;
+	description = channel.description;
+	bannerId = channel.bannerId;
+	bannerUrl = channel.bannerUrl;
+}
+
+fetchChannel();
+
+function save() {
+	const params = {
+		name: name,
+		description: description,
+		bannerId: bannerId,
+	};
+
+	if (props.channelId) {
+		params.channelId = props.channelId;
+		os.api('channels/update', params).then(() => {
+			os.success();
+		});
+	} else {
+		os.api('channels/create', params).then(created => {
+			os.success();
+			router.push(`/channels/${created.id}`);
+		});
+	}
+}
+
+function setBannerImage(evt) {
+	selectFile(evt.currentTarget ?? evt.target, null).then(file => {
+		bannerId = file.id;
+	});
+}
+
+function removeBannerImage() {
+	bannerId = null;
+}
+
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata(computed(() => props.channelId ? {
+	title: i18n.ts._channel.edit,
+	icon: 'fas fa-satellite-dish',
+	bg: 'var(--bg)',
+} : {
+	title: i18n.ts._channel.create,
+	icon: 'fas fa-satellite-dish',
+	bg: 'var(--bg)',
+}));
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/pages/channel.vue b/packages/client/src/pages/channel.vue
index c9a8f36844..003ad5cce9 100644
--- a/packages/client/src/pages/channel.vue
+++ b/packages/client/src/pages/channel.vue
@@ -1,98 +1,87 @@
 <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="fas fa-angle-up"></i></template>
-				<template v-else><i class="fas fa-angle-down"></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="fas fa-users fa-fw"></i><I18n :src="$ts._channel.usersCount" tag="span" style="margin-left: 4px;"><template #n><b>{{ channel.usersCount }}</b></template></I18n></div>
-					<div><i class="fas fa-pencil-alt fa-fw"></i><I18n :src="$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"/></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="fas fa-angle-up"></i></template>
+					<template v-else><i class="fas fa-angle-down"></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="fas fa-users fa-fw"></i><I18n :src="$ts._channel.usersCount" tag="span" style="margin-left: 4px;"><template #n><b>{{ channel.usersCount }}</b></template></I18n></div>
+						<div><i class="fas fa-pencil-alt fa-fw"></i><I18n :src="$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>
+	</MkSpacer>
+</MkStickyContainer>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent } from 'vue';
+<script lang="ts" setup>
+import { computed, inject, watch } from 'vue';
 import MkContainer from '@/components/ui/container.vue';
 import XPostForm from '@/components/post-form.vue';
 import XTimeline from '@/components/timeline.vue';
 import XChannelFollowButton from '@/components/channel-follow-button.vue';
 import * as os from '@/os';
-import * as symbols from '@/symbols';
+import { useRouter } from '@/router';
+import { $i } from '@/account';
+import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
 
-export default defineComponent({
-	components: {
-		MkContainer,
-		XPostForm,
-		XTimeline,
-		XChannelFollowButton
-	},
+const router = useRouter();
 
-	props: {
-		channelId: {
-			type: String,
-			required: true
-		}
-	},
+const props = defineProps<{
+	channelId: string;
+}>();
 
-	data() {
-		return {
-			[symbols.PAGE_INFO]: computed(() => this.channel ? {
-				title: this.channel.name,
-				icon: 'fas fa-satellite-dish',
-				bg: 'var(--bg)',
-				actions: [...(this.$i && this.$i.id === this.channel.userId ? [{
-					icon: 'fas fa-cog',
-					text: this.$ts.edit,
-					handler: this.edit,
-				}] : [])],
-			} : null),
-			channel: null,
-			showBanner: true,
-			pagination: {
-				endpoint: 'channels/timeline' as const,
-				limit: 10,
-				params: computed(() => ({
-					channelId: this.channelId,
-				}))
-			},
-		};
-	},
+let channel = $ref(null);
+let showBanner = $ref(true);
+const pagination = {
+	endpoint: 'channels/timeline' as const,
+	limit: 10,
+	params: computed(() => ({
+		channelId: props.channelId,
+	})),
+};
 
-	watch: {
-		channelId: {
-			async handler() {
-				this.channel = await os.api('channels/show', {
-					channelId: this.channelId,
-				});
-			},
-			immediate: true
-		}
-	},
+watch(() => props.channelId, async () => {
+	channel = await os.api('channels/show', {
+		channelId: props.channelId,
+	});
+}, { immediate: true });
 
-	methods: {
-		edit() {
-			this.$router.push(`/channels/${this.channel.id}/edit`);
-		}
-	},
-});
+function edit() {
+	router.push(`/channels/${channel.id}/edit`);
+}
+
+const headerActions = $computed(() => channel && channel.userId ? [{
+	icon: 'fas fa-cog',
+	text: i18n.ts.edit,
+	handler: edit,
+}] : null);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata(computed(() => channel ? {
+	title: channel.name,
+	icon: 'fas fa-satellite-dish',
+	bg: 'var(--bg)',
+} : null));
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/pages/channels.vue b/packages/client/src/pages/channels.vue
index 4e538a6da3..89d23350f2 100644
--- a/packages/client/src/pages/channels.vue
+++ b/packages/client/src/pages/channels.vue
@@ -1,82 +1,83 @@
 <template>
-<MkSpacer :content-max="700">
-	<div v-if="tab === 'featured'" 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>
-	<div v-else-if="tab === 'following'" 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>
-	<div v-else-if="tab === 'owned'" class="_content grwlizim owned">
-		<MkButton class="new" @click="create()"><i class="fas fa-plus"></i></MkButton>
-		<MkPagination v-slot="{items}" :pagination="ownedPagination">
-			<MkChannelPreview v-for="channel in items" :key="channel.id" class="_gap" :channel="channel"/>
-		</MkPagination>
-	</div>
-</MkSpacer>
+<MkStickyContainer>
+	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
+	<MkSpacer :content-max="700">
+		<div v-if="tab === 'featured'" 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>
+		<div v-else-if="tab === 'following'" 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>
+		<div v-else-if="tab === 'owned'" class="_content grwlizim owned">
+			<MkButton class="new" @click="create()"><i class="fas fa-plus"></i></MkButton>
+			<MkPagination v-slot="{items}" :pagination="ownedPagination">
+				<MkChannelPreview v-for="channel in items" :key="channel.id" class="_gap" :channel="channel"/>
+			</MkPagination>
+		</div>
+	</MkSpacer>
+</MkStickyContainer>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent } from 'vue';
+<script lang="ts" setup>
+import { computed, defineComponent, inject } from 'vue';
 import MkChannelPreview from '@/components/channel-preview.vue';
 import MkPagination from '@/components/ui/pagination.vue';
 import MkButton from '@/components/ui/button.vue';
-import * as symbols from '@/symbols';
+import { useRouter } from '@/router';
+import { definePageMetadata } from '@/scripts/page-metadata';
+import { i18n } from '@/i18n';
 
-export default defineComponent({
-	components: {
-		MkChannelPreview, MkPagination, MkButton,
-	},
-	data() {
-		return {
-			[symbols.PAGE_INFO]: computed(() => ({
-				title: this.$ts.channel,
-				icon: 'fas fa-satellite-dish',
-				bg: 'var(--bg)',
-				actions: [{
-					icon: 'fas fa-plus',
-					text: this.$ts.create,
-					handler: this.create,
-				}],
-				tabs: [{
-					active: this.tab === 'featured',
-					title: this.$ts._channel.featured,
-					icon: 'fas fa-fire-alt',
-					onClick: () => { this.tab = 'featured'; },
-				}, {
-					active: this.tab === 'following',
-					title: this.$ts._channel.following,
-					icon: 'fas fa-heart',
-					onClick: () => { this.tab = 'following'; },
-				}, {
-					active: this.tab === 'owned',
-					title: this.$ts._channel.owned,
-					icon: 'fas fa-edit',
-					onClick: () => { this.tab = 'owned'; },
-				},]
-			})),
-			tab: 'featured',
-			featuredPagination: {
-				endpoint: 'channels/featured' as const,
-				noPaging: true,
-			},
-			followingPagination: {
-				endpoint: 'channels/followed' as const,
-				limit: 5,
-			},
-			ownedPagination: {
-				endpoint: 'channels/owned' as const,
-				limit: 5,
-			},
-		};
-	},
-	methods: {
-		create() {
-			this.$router.push(`/channels/new`);
-		}
-	}
-});
+const router = useRouter();
+
+let tab = $ref('featured');
+
+const featuredPagination = {
+	endpoint: 'channels/featured' as const,
+	noPaging: true,
+};
+const followingPagination = {
+	endpoint: 'channels/followed' as const,
+	limit: 5,
+};
+const ownedPagination = {
+	endpoint: 'channels/owned' as const,
+	limit: 5,
+};
+
+function create() {
+	router.push('/channels/new');
+}
+
+const headerActions = $computed(() => [{
+	icon: 'fas fa-plus',
+	text: i18n.ts.create,
+	handler: create,
+}]);
+
+const headerTabs = $computed(() => [{
+	active: tab === 'featured',
+	title: i18n.ts._channel.featured,
+	icon: 'fas fa-fire-alt',
+	onClick: () => { tab = 'featured'; },
+}, {
+	active: tab === 'following',
+	title: i18n.ts._channel.following,
+	icon: 'fas fa-heart',
+	onClick: () => { tab = 'following'; },
+}, {
+	active: tab === 'owned',
+	title: i18n.ts._channel.owned,
+	icon: 'fas fa-edit',
+	onClick: () => { tab = 'owned'; },
+}]);
+
+definePageMetadata(computed(() => ({
+	title: i18n.ts.channel,
+	icon: 'fas fa-satellite-dish',
+	bg: 'var(--bg)',
+})));
 </script>
diff --git a/packages/client/src/pages/clip.vue b/packages/client/src/pages/clip.vue
index 163384337e..ce21b4c809 100644
--- a/packages/client/src/pages/clip.vue
+++ b/packages/client/src/pages/clip.vue
@@ -1,18 +1,21 @@
 <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>
+			<XNotes :pagination="pagination" :detail="true"/>
+		</div>
+	</MkSpacer>
+</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
@@ -22,7 +25,7 @@ import XNotes from '@/components/notes.vue';
 import { $i } from '@/account';
 import { i18n } from '@/i18n';
 import * as os from '@/os';
-import * as symbols from '@/symbols';
+import { definePageMetadata } from '@/scripts/page-metadata';
 
 const props = defineProps<{
 	clipId: string,
@@ -49,59 +52,58 @@ watch(() => props.clipId, async () => {
 
 provide('currentClipPage', $$(clip));
 
-defineExpose({
-	[symbols.PAGE_INFO]: computed(() => clip ? {
-		title: clip.name,
-		icon: 'fas fa-paperclip',
-		bg: 'var(--bg)',
-		actions: isOwned ? [{
-			icon: 'fas fa-pencil-alt',
-			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,
-				});
+const headerActions = $computed(() => clip && isOwned ? [{
+	icon: 'fas fa-pencil-alt',
+	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,
 			},
-		}, {
-			icon: 'fas fa-trash-alt',
-			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,
-				});
+			description: {
+				type: 'string',
+				required: false,
+				multiline: true,
+				label: i18n.ts.description,
+				default: clip.description,
 			},
-		}] : [],
-	} : null),
-});
+			isPublic: {
+				type: 'boolean',
+				label: i18n.ts.public,
+				default: clip.isPublic,
+			},
+		});
+		if (canceled) return;
+
+		os.apiWithDialog('clips/update', {
+			clipId: clip.id,
+			...result,
+		});
+	},
+}, {
+	icon: 'fas fa-trash-alt',
+	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: 'fas fa-paperclip',
+	bg: 'var(--bg)',
+} : null));
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/pages/drive.vue b/packages/client/src/pages/drive.vue
index 68777bb083..c7bc31135c 100644
--- a/packages/client/src/pages/drive.vue
+++ b/packages/client/src/pages/drive.vue
@@ -8,17 +8,19 @@
 import { computed } from 'vue';
 import XDrive from '@/components/drive.vue';
 import * as os from '@/os';
-import * as symbols from '@/symbols';
 import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
 
 let folder = $ref(null);
 
-defineExpose({
-	[symbols.PAGE_INFO]: computed(() => ({
-		title: folder ? folder.name : i18n.ts.drive,
-		icon: 'fas fa-cloud',
-		bg: 'var(--bg)',
-		hideHeader: true,
-	})),
-});
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata(computed(() => ({
+	title: folder ? folder.name : i18n.ts.drive,
+	icon: 'fas fa-cloud',
+	bg: 'var(--bg)',
+	hideHeader: true,
+})));
 </script>
diff --git a/packages/client/src/pages/emojis.category.vue b/packages/client/src/pages/emojis.category.vue
index c47870f4d4..6d915c5843 100644
--- a/packages/client/src/pages/emojis.category.vue
+++ b/packages/client/src/pages/emojis.category.vue
@@ -36,7 +36,6 @@ import MkSelect from '@/components/form/select.vue';
 import MkFolder from '@/components/ui/folder.vue';
 import MkTab from '@/components/tab.vue';
 import * as os from '@/os';
-import * as symbols from '@/symbols';
 import { emojiCategories, emojiTags } from '@/instance';
 import XEmoji from './emojis.emoji.vue';
 
diff --git a/packages/client/src/pages/emojis.vue b/packages/client/src/pages/emojis.vue
index f44b29df04..1592995844 100644
--- a/packages/client/src/pages/emojis.vue
+++ b/packages/client/src/pages/emojis.vue
@@ -1,15 +1,18 @@
 <template>
-<div :class="$style.root">
-	<XCategory v-if="tab === 'category'"/>
-</div>
+<MkStickyContainer>
+	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
+	<div :class="$style.root">
+		<XCategory v-if="tab === 'category'"/>
+	</div>
+</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
 import { ref, computed } from 'vue';
-import * as os from '@/os';
-import * as symbols from '@/symbols';
 import XCategory from './emojis.category.vue';
+import * as os from '@/os';
 import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
 
 const tab = ref('category');
 
@@ -31,20 +34,21 @@ function menu(ev) {
 					text: err.message,
 				});
 			});
-		}
+		},
 	}], ev.currentTarget ?? ev.target);
 }
 
-defineExpose({
-	[symbols.PAGE_INFO]: {
-		title: i18n.ts.customEmojis,
-		icon: 'fas fa-laugh',
-		bg: 'var(--bg)',
-		actions: [{
-			icon: 'fas fa-ellipsis-h',
-			handler: menu,
-		}],
-	},
+const headerActions = $computed(() => [{
+	icon: 'fas fa-ellipsis-h',
+	handler: menu,
+}]);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.customEmojis,
+	icon: 'fas fa-laugh',
+	bg: 'var(--bg)',
 });
 </script>
 
diff --git a/packages/client/src/pages/explore.vue b/packages/client/src/pages/explore.vue
index 04cc3662a7..26e201cd99 100644
--- a/packages/client/src/pages/explore.vue
+++ b/packages/client/src/pages/explore.vue
@@ -1,11 +1,12 @@
 <template>
-<div>
+<MkStickyContainer>
+	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :content-max="1200">
 		<div class="lznhrdub">
 			<div v-if="tab === 'local'">
-				<div v-if="meta && stats && tag == null" class="localfedi7 _block _isolated" :style="{ backgroundImage: meta.bannerUrl ? `url(${meta.bannerUrl})` : null }">
-					<header><span>{{ $t('explore', { host: meta.name || 'Misskey' }) }}</span></header>
-					<div><span>{{ $t('exploreUsersCount', { count: num(stats.originalUsersCount) }) }}</span></div>
+				<div v-if="instance && stats && tag == null" class="localfedi7 _block _isolated" :style="{ backgroundImage: instance.bannerUrl ? `url(${instance.bannerUrl})` : null }">
+					<header><span>{{ $t('explore', { host: instance.name || 'Misskey' }) }}</span></header>
+					<div><span>{{ $t('exploreUsersCount', { count: number(stats.originalUsersCount) }) }}</span></div>
 				</div>
 
 				<template v-if="tag == null">
@@ -32,7 +33,7 @@
 					<header><span>{{ $ts.exploreFediverse }}</span></header>
 				</div>
 
-				<MkFolder ref="tags" :foldable="true" :expanded="false" class="_gap">
+				<MkFolder ref="tagsEl" :foldable="true" :expanded="false" class="_gap">
 					<template #header><i class="fas fa-hashtag fa-fw" style="margin-right: 0.5em;"></i>{{ $ts.popularTags }}</template>
 
 					<div class="vxjfqztj">
@@ -74,147 +75,127 @@
 					</MkRadios>
 				</div>
 
-				<XUserList v-if="searchQuery" ref="search" class="_gap" :pagination="searchPagination"/>
+				<XUserList v-if="searchQuery" ref="searchEl" class="_gap" :pagination="searchPagination"/>
 			</div>
 		</div>
 	</MkSpacer>
-</div>
+</MkStickyContainer>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent } from 'vue';
+<script lang="ts" setup>
+import { computed, defineComponent, watch } from 'vue';
 import XUserList from '@/components/user-list.vue';
 import MkFolder from '@/components/ui/folder.vue';
 import MkInput from '@/components/form/input.vue';
 import MkRadios from '@/components/form/radios.vue';
 import number from '@/filters/number';
 import * as os from '@/os';
-import * as symbols from '@/symbols';
+import { definePageMetadata } from '@/scripts/page-metadata';
+import { i18n } from '@/i18n';
+import { instance } from '@/instance';
 
-export default defineComponent({
-	components: {
-		XUserList,
-		MkFolder,
-		MkInput,
-		MkRadios,
-	},
+const props = defineProps<{
+	tag?: string;
+}>();
 
-	props: {
-		tag: {
-			type: String,
-			required: false
-		}
-	},
+let tab = $ref('local');
+let tagsEl = $ref<InstanceType<typeof MkFolder>>();
+let tagsLocal = $ref([]);
+let tagsRemote = $ref([]);
+let stats = $ref(null);
+let searchQuery = $ref(null);
+let searchOrigin = $ref('combined');
 
-	data() {
-		return {
-			[symbols.PAGE_INFO]: computed(() => ({
-				title: this.$ts.explore,
-				icon: 'fas fa-hashtag',
-				bg: 'var(--bg)',
-				tabs: [{
-					active: this.tab === 'local',
-					title: this.$ts.local,
-					onClick: () => { this.tab = 'local'; },
-				}, {
-					active: this.tab === 'remote',
-					title: this.$ts.remote,
-					onClick: () => { this.tab = 'remote'; },
-				}, {
-					active: this.tab === 'search',
-					title: this.$ts.search,
-					onClick: () => { this.tab = 'search'; },
-				},]
-			})),
-			tab: 'local',
-			pinnedUsers: { endpoint: 'pinned-users' },
-			popularUsers: { endpoint: 'users', limit: 10, noPaging: true, params: {
-				state: 'alive',
-				origin: 'local',
-				sort: '+follower',
-			} },
-			recentlyUpdatedUsers: { endpoint: 'users', limit: 10, noPaging: true, params: {
-				origin: 'local',
-				sort: '+updatedAt',
-			} },
-			recentlyRegisteredUsers: { endpoint: 'users', limit: 10, noPaging: true, params: {
-				origin: 'local',
-				state: 'alive',
-				sort: '+createdAt',
-			} },
-			popularUsersF: { endpoint: 'users', limit: 10, noPaging: true, params: {
-				state: 'alive',
-				origin: 'remote',
-				sort: '+follower',
-			} },
-			recentlyUpdatedUsersF: { endpoint: 'users', limit: 10, noPaging: true, params: {
-				origin: 'combined',
-				sort: '+updatedAt',
-			} },
-			recentlyRegisteredUsersF: { endpoint: 'users', limit: 10, noPaging: true, params: {
-				origin: 'combined',
-				sort: '+createdAt',
-			} },
-			searchPagination: {
-				endpoint: 'users/search' as const,
-				limit: 10,
-				params: computed(() => (this.searchQuery && this.searchQuery !== '') ? {
-					query: this.searchQuery,
-					origin: this.searchOrigin,
-				} : null)
-			},
-			tagsLocal: [],
-			tagsRemote: [],
-			stats: null,
-			searchQuery: null,
-			searchOrigin: 'combined',
-			num: number,
-		};
-	},
-
-	computed: {
-		meta() {
-			return this.$instance;
-		},
-		tagUsers(): any {
-			return {
-				endpoint: 'hashtags/users' as const,
-				limit: 30,
-				params: {
-					tag: this.tag,
-					origin: 'combined',
-					sort: '+follower',
-				}
-			};
-		},
-	},
-
-	watch: {
-		tag() {
-			if (this.$refs.tags) this.$refs.tags.toggleContent(this.tag == null);
-		},
-	},
-
-	created() {
-		os.api('hashtags/list', {
-			sort: '+attachedLocalUsers',
-			attachedToLocalUserOnly: true,
-			limit: 30
-		}).then(tags => {
-			this.tagsLocal = tags;
-		});
-		os.api('hashtags/list', {
-			sort: '+attachedRemoteUsers',
-			attachedToRemoteUserOnly: true,
-			limit: 30
-		}).then(tags => {
-			this.tagsRemote = tags;
-		});
-		os.api('stats').then(stats => {
-			this.stats = stats;
-		});
-	},
+watch(() => props.tag, () => {
+	if (tagsEl) tagsEl.toggleContent(props.tag == null);
 });
+
+const tagUsers = $computed(() => ({
+	endpoint: 'hashtags/users' as const,
+	limit: 30,
+	params: {
+		tag: props.tag,
+		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 searchPagination = {
+	endpoint: 'users/search' as const,
+	limit: 10,
+	params: computed(() => (searchQuery && searchQuery !== '') ? {
+		query: searchQuery,
+		origin: searchOrigin,
+	} : null),
+};
+
+os.api('hashtags/list', {
+	sort: '+attachedLocalUsers',
+	attachedToLocalUserOnly: true,
+	limit: 30,
+}).then(tags => {
+	tagsLocal = tags;
+});
+os.api('hashtags/list', {
+	sort: '+attachedRemoteUsers',
+	attachedToRemoteUserOnly: true,
+	limit: 30,
+}).then(tags => {
+	tagsRemote = tags;
+});
+os.api('stats').then(_stats => {
+	stats = _stats;
+});
+
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => [{
+	active: tab === 'local',
+	title: i18n.ts.local,
+	onClick: () => { tab = 'local'; },
+}, {
+	active: tab === 'remote',
+	title: i18n.ts.remote,
+	onClick: () => { tab = 'remote'; },
+}, {
+	active: tab === 'search',
+	title: i18n.ts.search,
+	onClick: () => { tab = 'search'; },
+}]);
+
+definePageMetadata(computed(() => ({
+	title: i18n.ts.explore,
+	icon: 'fas fa-hashtag',
+	bg: 'var(--bg)',
+})));
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/pages/favorites.vue b/packages/client/src/pages/favorites.vue
index b4f6ff35bc..6efca4c221 100644
--- a/packages/client/src/pages/favorites.vue
+++ b/packages/client/src/pages/favorites.vue
@@ -1,20 +1,23 @@
 <template>
-<MkSpacer :content-max="800">
-	<MkPagination ref="pagingComponent" :pagination="pagination">
-		<template #empty>
-			<div class="_fullinfo">
-				<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
-				<div>{{ $ts.noNotes }}</div>
-			</div>
-		</template>
+<MkStickyContainer>
+	<template #header><MkPageHeader/></template>
+	<MkSpacer :content-max="800">
+		<MkPagination ref="pagingComponent" :pagination="pagination">
+			<template #empty>
+				<div class="_fullinfo">
+					<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
+					<div>{{ $ts.noNotes }}</div>
+				</div>
+			</template>
 
-		<template #default="{ items }">
-			<XList v-slot="{ item }" :items="items" :direction="'down'" :no-gap="false" :ad="false">
-				<XNote :key="item.id" :note="item.note" :class="$style.note"/>
-			</XList>
-		</template>
-	</MkPagination>
-</MkSpacer>
+			<template #default="{ items }">
+				<XList v-slot="{ item }" :items="items" :direction="'down'" :no-gap="false" :ad="false">
+					<XNote :key="item.id" :note="item.note" :class="$style.note"/>
+				</XList>
+			</template>
+		</MkPagination>
+	</MkSpacer>
+</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
@@ -22,8 +25,8 @@ import { ref } from 'vue';
 import MkPagination from '@/components/ui/pagination.vue';
 import XNote from '@/components/note.vue';
 import XList from '@/components/date-separated-list.vue';
-import * as symbols from '@/symbols';
 import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
 
 const pagination = {
 	endpoint: 'i/favorites' as const,
@@ -32,12 +35,10 @@ const pagination = {
 
 const pagingComponent = ref<InstanceType<typeof MkPagination>>();
 
-defineExpose({
-	[symbols.PAGE_INFO]: {
-		title: i18n.ts.favorites,
-		icon: 'fas fa-star',
-		bg: 'var(--bg)',
-	},
+definePageMetadata({
+	title: i18n.ts.favorites,
+	icon: 'fas fa-star',
+	bg: 'var(--bg)',
 });
 </script>
 
diff --git a/packages/client/src/pages/featured.vue b/packages/client/src/pages/featured.vue
index 14fe0cb740..4e3f67c76c 100644
--- a/packages/client/src/pages/featured.vue
+++ b/packages/client/src/pages/featured.vue
@@ -1,13 +1,16 @@
 <template>
-<MkSpacer :content-max="800">
-	<XNotes ref="notes" :pagination="pagination"/>
-</MkSpacer>
+<MkStickyContainer>
+	<template #header><MkPageHeader/></template>
+	<MkSpacer :content-max="800">
+		<XNotes ref="notes" :pagination="pagination"/>
+	</MkSpacer>
+</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
 import XNotes from '@/components/notes.vue';
-import * as symbols from '@/symbols';
 import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
 
 const pagination = {
 	endpoint: 'notes/featured' as const,
@@ -15,11 +18,9 @@ const pagination = {
 	offsetMode: true,
 };
 
-defineExpose({
-	[symbols.PAGE_INFO]: {
-		title: i18n.ts.featured,
-		icon: 'fas fa-fire-alt',
-		bg: 'var(--bg)',
-	},
+definePageMetadata({
+	title: i18n.ts.featured,
+	icon: 'fas fa-fire-alt',
+	bg: 'var(--bg)',
 });
 </script>
diff --git a/packages/client/src/pages/federation.vue b/packages/client/src/pages/federation.vue
index 447918905b..eda46b9aa3 100644
--- a/packages/client/src/pages/federation.vue
+++ b/packages/client/src/pages/federation.vue
@@ -1,94 +1,97 @@
 <template>
-<MkSpacer :content-max="1000">
-	<div class="taeiyria">
-		<div class="query">
-			<MkInput v-model="host" :debounce="true" class="">
-				<template #prefix><i class="fas fa-search"></i></template>
-				<template #label>{{ $ts.host }}</template>
-			</MkInput>
-			<FormSplit style="margin-top: var(--margin);">
-				<MkSelect v-model="state">
-					<template #label>{{ $ts.state }}</template>
-					<option value="all">{{ $ts.all }}</option>
-					<option value="federating">{{ $ts.federating }}</option>
-					<option value="subscribing">{{ $ts.subscribing }}</option>
-					<option value="publishing">{{ $ts.publishing }}</option>
-					<option value="suspended">{{ $ts.suspended }}</option>
-					<option value="blocked">{{ $ts.blocked }}</option>
-					<option value="notResponding">{{ $ts.notResponding }}</option>
-				</MkSelect>
-				<MkSelect v-model="sort">
-					<template #label>{{ $ts.sort }}</template>
-					<option value="+pubSub">{{ $ts.pubSub }} ({{ $ts.descendingOrder }})</option>
-					<option value="-pubSub">{{ $ts.pubSub }} ({{ $ts.ascendingOrder }})</option>
-					<option value="+notes">{{ $ts.notes }} ({{ $ts.descendingOrder }})</option>
-					<option value="-notes">{{ $ts.notes }} ({{ $ts.ascendingOrder }})</option>
-					<option value="+users">{{ $ts.users }} ({{ $ts.descendingOrder }})</option>
-					<option value="-users">{{ $ts.users }} ({{ $ts.ascendingOrder }})</option>
-					<option value="+following">{{ $ts.following }} ({{ $ts.descendingOrder }})</option>
-					<option value="-following">{{ $ts.following }} ({{ $ts.ascendingOrder }})</option>
-					<option value="+followers">{{ $ts.followers }} ({{ $ts.descendingOrder }})</option>
-					<option value="-followers">{{ $ts.followers }} ({{ $ts.ascendingOrder }})</option>
-					<option value="+caughtAt">{{ $ts.registeredAt }} ({{ $ts.descendingOrder }})</option>
-					<option value="-caughtAt">{{ $ts.registeredAt }} ({{ $ts.ascendingOrder }})</option>
-					<option value="+lastCommunicatedAt">{{ $ts.lastCommunication }} ({{ $ts.descendingOrder }})</option>
-					<option value="-lastCommunicatedAt">{{ $ts.lastCommunication }} ({{ $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" class="instance" :to="`/instance-info/${instance.host}`">
-					<div class="host"><img :src="instance.faviconUrl">{{ instance.host }}</div>
-					<div class="table">
-						<div class="cell">
-							<div class="key">{{ $ts.registeredAt }}</div>
-							<div class="value"><MkTime :time="instance.caughtAt"/></div>
-						</div>
-						<div class="cell">
-							<div class="key">{{ $ts.software }}</div>
-							<div class="value">{{ instance.softwareName || `(${$ts.unknown})` }}</div>
-						</div>
-						<div class="cell">
-							<div class="key">{{ $ts.version }}</div>
-							<div class="value">{{ instance.softwareVersion || `(${$ts.unknown})` }}</div>
-						</div>
-						<div class="cell">
-							<div class="key">{{ $ts.users }}</div>
-							<div class="value">{{ instance.usersCount }}</div>
-						</div>
-						<div class="cell">
-							<div class="key">{{ $ts.notes }}</div>
-							<div class="value">{{ instance.notesCount }}</div>
-						</div>
-						<div class="cell">
-							<div class="key">{{ $ts.sent }}</div>
-							<div class="value"><MkTime v-if="instance.latestRequestSentAt" :time="instance.latestRequestSentAt"/><span v-else>N/A</span></div>
-						</div>
-						<div class="cell">
-							<div class="key">{{ $ts.received }}</div>
-							<div class="value"><MkTime v-if="instance.latestRequestReceivedAt" :time="instance.latestRequestReceivedAt"/><span v-else>N/A</span></div>
-						</div>
-					</div>
-					<div class="footer">
-						<span class="status" :class="getStatus(instance)">{{ getStatus(instance) }}</span>
-						<span class="pubSub">
-							<span v-if="instance.followersCount > 0" class="sub"><i class="fas fa-caret-down icon"></i>Sub</span>
-							<span v-else class="sub"><i class="fas fa-caret-down icon"></i>-</span>
-							<span v-if="instance.followingCount > 0" class="pub"><i class="fas fa-caret-up icon"></i>Pub</span>
-							<span v-else class="pub"><i class="fas fa-caret-up icon"></i>-</span>
-						</span>
-						<span class="right">
-							<span class="latestStatus">{{ instance.latestStatus || '-' }}</span>
-							<span class="lastCommunicatedAt"><MkTime :time="instance.lastCommunicatedAt"/></span>
-						</span>
-					</div>
-				</MkA>
+<MkStickyContainer>
+	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
+	<MkSpacer :content-max="1000">
+		<div class="taeiyria">
+			<div class="query">
+				<MkInput v-model="host" :debounce="true" class="">
+					<template #prefix><i class="fas fa-search"></i></template>
+					<template #label>{{ $ts.host }}</template>
+				</MkInput>
+				<FormSplit style="margin-top: var(--margin);">
+					<MkSelect v-model="state">
+						<template #label>{{ $ts.state }}</template>
+						<option value="all">{{ $ts.all }}</option>
+						<option value="federating">{{ $ts.federating }}</option>
+						<option value="subscribing">{{ $ts.subscribing }}</option>
+						<option value="publishing">{{ $ts.publishing }}</option>
+						<option value="suspended">{{ $ts.suspended }}</option>
+						<option value="blocked">{{ $ts.blocked }}</option>
+						<option value="notResponding">{{ $ts.notResponding }}</option>
+					</MkSelect>
+					<MkSelect v-model="sort">
+						<template #label>{{ $ts.sort }}</template>
+						<option value="+pubSub">{{ $ts.pubSub }} ({{ $ts.descendingOrder }})</option>
+						<option value="-pubSub">{{ $ts.pubSub }} ({{ $ts.ascendingOrder }})</option>
+						<option value="+notes">{{ $ts.notes }} ({{ $ts.descendingOrder }})</option>
+						<option value="-notes">{{ $ts.notes }} ({{ $ts.ascendingOrder }})</option>
+						<option value="+users">{{ $ts.users }} ({{ $ts.descendingOrder }})</option>
+						<option value="-users">{{ $ts.users }} ({{ $ts.ascendingOrder }})</option>
+						<option value="+following">{{ $ts.following }} ({{ $ts.descendingOrder }})</option>
+						<option value="-following">{{ $ts.following }} ({{ $ts.ascendingOrder }})</option>
+						<option value="+followers">{{ $ts.followers }} ({{ $ts.descendingOrder }})</option>
+						<option value="-followers">{{ $ts.followers }} ({{ $ts.ascendingOrder }})</option>
+						<option value="+caughtAt">{{ $ts.registeredAt }} ({{ $ts.descendingOrder }})</option>
+						<option value="-caughtAt">{{ $ts.registeredAt }} ({{ $ts.ascendingOrder }})</option>
+						<option value="+lastCommunicatedAt">{{ $ts.lastCommunication }} ({{ $ts.descendingOrder }})</option>
+						<option value="-lastCommunicatedAt">{{ $ts.lastCommunication }} ({{ $ts.ascendingOrder }})</option>
+					</MkSelect>
+				</FormSplit>
 			</div>
-		</MkPagination>
-	</div>
-</MkSpacer>
+
+			<MkPagination v-slot="{items}" ref="instances" :key="host + state" :pagination="pagination">
+				<div class="dqokceoi">
+					<MkA v-for="instance in items" :key="instance.id" class="instance" :to="`/instance-info/${instance.host}`">
+						<div class="host"><img :src="instance.faviconUrl">{{ instance.host }}</div>
+						<div class="table">
+							<div class="cell">
+								<div class="key">{{ $ts.registeredAt }}</div>
+								<div class="value"><MkTime :time="instance.caughtAt"/></div>
+							</div>
+							<div class="cell">
+								<div class="key">{{ $ts.software }}</div>
+								<div class="value">{{ instance.softwareName || `(${$ts.unknown})` }}</div>
+							</div>
+							<div class="cell">
+								<div class="key">{{ $ts.version }}</div>
+								<div class="value">{{ instance.softwareVersion || `(${$ts.unknown})` }}</div>
+							</div>
+							<div class="cell">
+								<div class="key">{{ $ts.users }}</div>
+								<div class="value">{{ instance.usersCount }}</div>
+							</div>
+							<div class="cell">
+								<div class="key">{{ $ts.notes }}</div>
+								<div class="value">{{ instance.notesCount }}</div>
+							</div>
+							<div class="cell">
+								<div class="key">{{ $ts.sent }}</div>
+								<div class="value"><MkTime v-if="instance.latestRequestSentAt" :time="instance.latestRequestSentAt"/><span v-else>N/A</span></div>
+							</div>
+							<div class="cell">
+								<div class="key">{{ $ts.received }}</div>
+								<div class="value"><MkTime v-if="instance.latestRequestReceivedAt" :time="instance.latestRequestReceivedAt"/><span v-else>N/A</span></div>
+							</div>
+						</div>
+						<div class="footer">
+							<span class="status" :class="getStatus(instance)">{{ getStatus(instance) }}</span>
+							<span class="pubSub">
+								<span v-if="instance.followersCount > 0" class="sub"><i class="fas fa-caret-down icon"></i>Sub</span>
+								<span v-else class="sub"><i class="fas fa-caret-down icon"></i>-</span>
+								<span v-if="instance.followingCount > 0" class="pub"><i class="fas fa-caret-up icon"></i>Pub</span>
+								<span v-else class="pub"><i class="fas fa-caret-up icon"></i>-</span>
+							</span>
+							<span class="right">
+								<span class="latestStatus">{{ instance.latestStatus || '-' }}</span>
+								<span class="lastCommunicatedAt"><MkTime :time="instance.lastCommunicatedAt"/></span>
+							</span>
+						</div>
+					</MkA>
+				</div>
+			</MkPagination>
+		</div>
+	</MkSpacer>
+</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
@@ -99,8 +102,8 @@ import MkSelect from '@/components/form/select.vue';
 import MkPagination from '@/components/ui/pagination.vue';
 import FormSplit from '@/components/form/split.vue';
 import * as os from '@/os';
-import * as symbols from '@/symbols';
 import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
 
 let host = $ref('');
 let state = $ref('federating');
@@ -119,8 +122,8 @@ const pagination = {
 			state === 'suspended' ? { suspended: true } :
 			state === 'blocked' ? { blocked: true } :
 			state === 'notResponding' ? { notResponding: true } :
-			{})
-	}))
+			{}),
+	})),
 };
 
 function getStatus(instance) {
@@ -129,12 +132,14 @@ function getStatus(instance) {
 	return 'alive';
 }
 
-defineExpose({
-	[symbols.PAGE_INFO]: {
-		title: i18n.ts.federation,
-		icon: 'fas fa-globe',
-		bg: 'var(--bg)',
-	},
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.federation,
+	icon: 'fas fa-globe',
+	bg: 'var(--bg)',
 });
 </script>
 
diff --git a/packages/client/src/pages/follow-requests.vue b/packages/client/src/pages/follow-requests.vue
index 6adc1a404b..e6f9a9a5d9 100644
--- a/packages/client/src/pages/follow-requests.vue
+++ b/packages/client/src/pages/follow-requests.vue
@@ -7,7 +7,7 @@
 				<div>{{ $ts.noFollowRequests }}</div>
 			</div>
 		</template>
-		<template v-slot="{items}">
+		<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"/>
@@ -36,8 +36,8 @@ import { ref, computed } from 'vue';
 import MkPagination from '@/components/ui/pagination.vue';
 import { userPage, acct } from '@/filters/user';
 import * as os from '@/os';
-import * as symbols from '@/symbols';
 import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
 
 const paginationComponent = ref<InstanceType<typeof MkPagination>>();
 
@@ -58,13 +58,15 @@ function reject(user) {
 	});
 }
 
-defineExpose({
-	[symbols.PAGE_INFO]: computed(() => ({
-		title: i18n.ts.followRequests,
-		icon: 'fas fa-user-clock',
-		bg: 'var(--bg)',
-	})),
-});
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata(computed(() => ({
+	title: i18n.ts.followRequests,
+	icon: 'fas fa-user-clock',
+	bg: 'var(--bg)',
+})));
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/pages/follow.vue b/packages/client/src/pages/follow.vue
index e69e0481e0..0c1cb7733b 100644
--- a/packages/client/src/pages/follow.vue
+++ b/packages/client/src/pages/follow.vue
@@ -5,8 +5,9 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import * as os from '@/os';
 import * as Acct from 'misskey-js/built/acct';
+import * as os from '@/os';
+import { mainRouter } from '@/router';
 
 export default defineComponent({
 	created() {
@@ -17,17 +18,17 @@ export default defineComponent({
 
 		if (acct.startsWith('https://')) {
 			promise = os.api('ap/show', {
-				uri: acct
+				uri: acct,
 			});
 			promise.then(res => {
 				if (res.type === 'User') {
 					this.follow(res.object);
 				} else if (res.type === 'Note') {
-					this.$router.push(`/notes/${res.object.id}`);
+					mainRouter.push(`/notes/${res.object.id}`);
 				} else {
 					os.alert({
 						type: 'error',
-						text: 'Not a user'
+						text: 'Not a user',
 					}).then(() => {
 						window.close();
 					});
@@ -56,9 +57,9 @@ export default defineComponent({
 			}
 			
 			os.apiWithDialog('following/create', {
-				userId: user.id
+				userId: user.id,
 			});
-		}
-	}
+		},
+	},
 });
 </script>
diff --git a/packages/client/src/pages/gallery/edit.vue b/packages/client/src/pages/gallery/edit.vue
index bc87160c44..6d1140ba3a 100644
--- a/packages/client/src/pages/gallery/edit.vue
+++ b/packages/client/src/pages/gallery/edit.vue
@@ -27,8 +27,8 @@
 </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent } from 'vue';
+<script lang="ts" setup>
+import { computed, inject, watch } from 'vue';
 import FormButton from '@/components/ui/button.vue';
 import FormInput from '@/components/form/input.vue';
 import FormTextarea from '@/components/form/textarea.vue';
@@ -37,104 +37,87 @@ import FormGroup from '@/components/form/group.vue';
 import FormSuspense from '@/components/form/suspense.vue';
 import { selectFiles } from '@/scripts/select-file';
 import * as os from '@/os';
-import * as symbols from '@/symbols';
+import { useRouter } from '@/router';
+import { definePageMetadata } from '@/scripts/page-metadata';
+import { i18n } from '@/i18n';
 
-export default defineComponent({
-	components: {
-		FormButton,
-		FormInput,
-		FormTextarea,
-		FormSwitch,
-		FormGroup,
-		FormSuspense,
-	},
+const router = useRouter();
 
-	props: {
-		postId: {
-			type: String,
-			required: false,
-			default: null,
-		}
-	},
-	
-	data() {
-		return {
-			[symbols.PAGE_INFO]: computed(() => this.postId ? {
-				title: this.$ts.edit,
-				icon: 'fas fa-pencil-alt'
-			} : {
-				title: this.$ts.postToGallery,
-				icon: 'fas fa-pencil-alt'
-			}),
-			init: null,
-			files: [],
-			description: null,
-			title: null,
-			isSensitive: false,
-		};
-	},
+const props = defineProps<{
+	postId?: string;
+}>();
 
-	watch: {
-		postId: {
-			handler() {
-				this.init = () => this.postId ? os.api('gallery/posts/show', {
-					postId: this.postId
-				}).then(post => {
-					this.files = post.files;
-					this.title = post.title;
-					this.description = post.description;
-					this.isSensitive = post.isSensitive;
-				}) : Promise.resolve(null);
-			},
-			immediate: true,
-		}
-	},
+let init = $ref(null);
+let files = $ref([]);
+let description = $ref(null);
+let title = $ref(null);
+let isSensitive = $ref(false);
 
-	methods: {
-		selectFile(evt) {
-			selectFiles(evt.currentTarget ?? evt.target, null).then(files => {
-				this.files = this.files.concat(files);
-			});
-		},
+function selectFile(evt) {
+	selectFiles(evt.currentTarget ?? evt.target, null).then(selected => {
+		files = files.concat(selected);
+	});
+}
 
-		remove(file) {
-			this.files = this.files.filter(f => f.id !== file.id);
-		},
+function remove(file) {
+	files = files.filter(f => f.id !== file.id);
+}
 
-		async save() {
-			if (this.postId) {
-				await os.apiWithDialog('gallery/posts/update', {
-					postId: this.postId,
-					title: this.title,
-					description: this.description,
-					fileIds: this.files.map(file => file.id),
-					isSensitive: this.isSensitive,
-				});
-				this.$router.push(`/gallery/${this.postId}`);
-			} else {
-				const post = await os.apiWithDialog('gallery/posts/create', {
-					title: this.title,
-					description: this.description,
-					fileIds: this.files.map(file => file.id),
-					isSensitive: this.isSensitive,
-				});
-				this.$router.push(`/gallery/${post.id}`);
-			}
-		},
-
-		async del() {
-			const { canceled } = await os.confirm({
-				type: 'warning',
-				text: this.$ts.deleteConfirm,
-			});
-			if (canceled) return;
-			await os.apiWithDialog('gallery/posts/delete', {
-				postId: this.postId,
-			});
-			this.$router.push(`/gallery`);
-		}
+async function save() {
+	if (props.postId) {
+		await os.apiWithDialog('gallery/posts/update', {
+			postId: props.postId,
+			title: title,
+			description: description,
+			fileIds: files.map(file => file.id),
+			isSensitive: isSensitive,
+		});
+		mainRouter.push(`/gallery/${props.postId}`);
+	} else {
+		const created = await os.apiWithDialog('gallery/posts/create', {
+			title: title,
+			description: description,
+			fileIds: files.map(file => file.id),
+			isSensitive: isSensitive,
+		});
+		router.push(`/gallery/${created.id}`);
 	}
-});
+}
+
+async function del() {
+	const { canceled } = await os.confirm({
+		type: 'warning',
+		text: i18n.ts.deleteConfirm,
+	});
+	if (canceled) return;
+	await os.apiWithDialog('gallery/posts/delete', {
+		postId: props.postId,
+	});
+	mainRouter.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 });
+
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata(computed(() => props.postId ? {
+	title: i18n.ts.edit,
+	icon: 'fas fa-pencil-alt',
+} : {
+	title: i18n.ts.postToGallery,
+	icon: 'fas fa-pencil-alt',
+}));
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/pages/gallery/index.vue b/packages/client/src/pages/gallery/index.vue
index a19d69d5c2..b26470dbe9 100644
--- a/packages/client/src/pages/gallery/index.vue
+++ b/packages/client/src/pages/gallery/index.vue
@@ -1,49 +1,54 @@
 <template>
-<div class="xprsixdl _root">
-	<MkTab v-if="$i" v-model="tab">
-		<option value="explore"><i class="fas fa-icons"></i> {{ $ts.gallery }}</option>
-		<option value="liked"><i class="fas fa-heart"></i> {{ $ts._gallery.liked }}</option>
-		<option value="my"><i class="fas fa-edit"></i> {{ $ts._gallery.my }}</option>
-	</MkTab>
+<MkStickyContainer>
+	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
+	<MkSpacer :content-max="1400">
+		<div class="_root">
+			<MkTab v-if="$i" v-model="tab">
+				<option value="explore"><i class="fas fa-icons"></i> {{ $ts.gallery }}</option>
+				<option value="liked"><i class="fas fa-heart"></i> {{ $ts._gallery.liked }}</option>
+				<option value="my"><i class="fas fa-edit"></i> {{ $ts._gallery.my }}</option>
+			</MkTab>
 
-	<div v-if="tab === 'explore'">
-		<MkFolder class="_gap">
-			<template #header><i class="fas fa-clock"></i>{{ $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="fas fa-fire-alt"></i>{{ $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>
-	</div>
-	<div v-else-if="tab === 'liked'">
-		<MkPagination v-slot="{items}" :pagination="likedPostsPagination">
-			<div class="vfpdbgtk">
-				<MkGalleryPostPreview v-for="like in items" :key="like.id" :post="like.post" class="post"/>
+			<div v-if="tab === 'explore'">
+				<MkFolder class="_gap">
+					<template #header><i class="fas fa-clock"></i>{{ $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="fas fa-fire-alt"></i>{{ $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>
 			</div>
-		</MkPagination>
-	</div>
-	<div v-else-if="tab === 'my'">
-		<MkA to="/gallery/new" class="_link" style="margin: 16px;"><i class="fas fa-plus"></i> {{ $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 v-else-if="tab === 'liked'">
+				<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>
 			</div>
-		</MkPagination>
-	</div>
-</div>
+			<div v-else-if="tab === 'my'">
+				<MkA to="/gallery/new" class="_link" style="margin: 16px;"><i class="fas fa-plus"></i> {{ $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>
+			</div>
+		</div>
+	</MkSpacer>
+</MkStickyContainer>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent } from 'vue';
+<script lang="ts" setup>
+import { computed, defineComponent, watch } from 'vue';
 import XUserList from '@/components/user-list.vue';
 import MkFolder from '@/components/ui/folder.vue';
 import MkInput from '@/components/form/input.vue';
@@ -53,92 +58,60 @@ import MkPagination from '@/components/ui/pagination.vue';
 import MkGalleryPostPreview from '@/components/gallery-post-preview.vue';
 import number from '@/filters/number';
 import * as os from '@/os';
-import * as symbols from '@/symbols';
+import { definePageMetadata } from '@/scripts/page-metadata';
+import { i18n } from '@/i18n';
 
-export default defineComponent({
-	components: {
-		XUserList,
-		MkFolder,
-		MkInput,
-		MkButton,
-		MkTab,
-		MkPagination,
-		MkGalleryPostPreview,
+const props = defineProps<{
+	tag?: string;
+}>();
+
+let tab = $ref('explore');
+let tags = $ref([]);
+let tagsRef = $ref();
+
+const recentPostsPagination = {
+	endpoint: 'gallery/posts' as const,
+	limit: 6,
+};
+const popularPostsPagination = {
+	endpoint: 'gallery/featured' as const,
+	limit: 5,
+};
+const myPostsPagination = {
+	endpoint: 'i/gallery/posts' as const,
+	limit: 5,
+};
+const likedPostsPagination = {
+	endpoint: 'i/gallery/likes' as const,
+	limit: 5,
+};
+
+const tagUsersPagination = $computed(() => ({
+	endpoint: 'hashtags/users' as const,
+	limit: 30,
+	params: {
+		tag: this.tag,
+		origin: 'combined',
+		sort: '+follower',
 	},
+}));
 
-	props: {
-		tag: {
-			type: String,
-			required: false
-		}
-	},
+watch(() => props.tag, () => {
+	if (tagsRef) tagsRef.tags.toggleContent(props.tag == null);
+});
 
-	data() {
-		return {
-			[symbols.PAGE_INFO]: {
-				title: this.$ts.gallery,
-				icon: 'fas fa-icons'
-			},
-			tab: 'explore',
-			recentPostsPagination: {
-				endpoint: 'gallery/posts' as const,
-				limit: 6,
-			},
-			popularPostsPagination: {
-				endpoint: 'gallery/featured' as const,
-				limit: 5,
-			},
-			myPostsPagination: {
-				endpoint: 'i/gallery/posts' as const,
-				limit: 5,
-			},
-			likedPostsPagination: {
-				endpoint: 'i/gallery/likes' as const,
-				limit: 5,
-			},
-			tags: [],
-		};
-	},
+const headerActions = $computed(() => []);
 
-	computed: {
-		meta() {
-			return this.$instance;
-		},
-		tagUsers(): any {
-			return {
-				endpoint: 'hashtags/users' as const,
-				limit: 30,
-				params: {
-					tag: this.tag,
-					origin: 'combined',
-					sort: '+follower',
-				}
-			};
-		},
-	},
+const headerTabs = $computed(() => []);
 
-	watch: {
-		tag() {
-			if (this.$refs.tags) this.$refs.tags.toggleContent(this.tag == null);
-		},
-	},
-
-	created() {
-
-	},
-
-	methods: {
-
-	}
+definePageMetadata({
+	title: i18n.ts.gallery,
+	icon: 'fas fa-icons',
+	bg: 'var(--bg)',
 });
 </script>
 
 <style lang="scss" scoped>
-.xprsixdl {
-	max-width: 1400px;
-	margin: 0 auto;
-}
-
 .vfpdbgtk {
 	display: grid;
 	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
diff --git a/packages/client/src/pages/gallery/post.vue b/packages/client/src/pages/gallery/post.vue
index 1ca3443e56..d5f3253b3e 100644
--- a/packages/client/src/pages/gallery/post.vue
+++ b/packages/client/src/pages/gallery/post.vue
@@ -49,123 +49,108 @@
 </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent } from 'vue';
+<script lang="ts" setup>
+import { computed, defineComponent, inject, watch } from 'vue';
 import MkButton from '@/components/ui/button.vue';
 import * as os from '@/os';
-import * as symbols from '@/symbols';
 import MkContainer from '@/components/ui/container.vue';
 import ImgWithBlurhash from '@/components/img-with-blurhash.vue';
 import MkPagination from '@/components/ui/pagination.vue';
 import MkGalleryPostPreview from '@/components/gallery-post-preview.vue';
 import MkFollowButton from '@/components/follow-button.vue';
 import { url } from '@/config';
+import { useRouter } from '@/router';
+import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
 
-export default defineComponent({
-	components: {
-		MkContainer,
-		ImgWithBlurhash,
-		MkPagination,
-		MkGalleryPostPreview,
-		MkButton,
-		MkFollowButton,
+const router = useRouter();
+
+const props = defineProps<{
+	postId: string;
+}>();
+
+const post = $ref(null);
+const error = $ref(null);
+const otherPostsPagination = {
+	endpoint: 'users/gallery/posts' as const,
+	limit: 6,
+	params: computed(() => ({
+		userId: post.user.id,
+	})),
+};
+
+function fetchPost() {
+	post = null;
+	os.api('gallery/posts/show', {
+		postId: props.postId,
+	}).then(_post => {
+		post = _post;
+	}).catch(_error => {
+		error = _error;
+	});
+}
+
+function share() {
+	navigator.share({
+		title: post.title,
+		text: post.description,
+		url: `${url}/gallery/${post.id}`,
+	});
+}
+
+function shareWithNote() {
+	os.post({
+		initialText: `${post.title} ${url}/gallery/${post.id}`,
+	});
+}
+
+function like() {
+	os.apiWithDialog('gallery/posts/like', {
+		postId: props.postId,
+	}).then(() => {
+		post.isLiked = true;
+		post.likedCount++;
+	});
+}
+
+async function unlike() {
+	const confirm = await os.confirm({
+		type: 'warning',
+		text: i18n.ts.unlikeConfirm,
+	});
+	if (confirm.canceled) return;
+	os.apiWithDialog('gallery/posts/unlike', {
+		postId: props.postId,
+	}).then(() => {
+		post.isLiked = false;
+		post.likedCount--;
+	});
+}
+
+function edit() {
+	router.push(`/gallery/${post.id}/edit`);
+}
+
+watch(() => props.postId, fetchPost, { immediate: true });
+
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata(computed(() => post ? {
+	title: post.title,
+	avatar: post.user,
+	path: `/gallery/${post.id}`,
+	share: {
+		title: post.title,
+		text: post.description,
 	},
-	props: {
-		postId: {
-			type: String,
-			required: true
-		}
-	},
-	data() {
-		return {
-			[symbols.PAGE_INFO]: computed(() => this.post ? {
-				title: this.post.title,
-				avatar: this.post.user,
-				path: `/gallery/${this.post.id}`,
-				share: {
-					title: this.post.title,
-					text: this.post.description,
-				},
-				actions: [{
-					icon: 'fas fa-pencil-alt',
-					text: this.$ts.edit,
-					handler: this.edit
-				}]
-			} : null),
-			otherPostsPagination: {
-				endpoint: 'users/gallery/posts' as const,
-				limit: 6,
-				params: computed(() => ({
-					userId: this.post.user.id
-				})),
-			},
-			post: null,
-			error: null,
-		};
-	},
-
-	watch: {
-		postId: 'fetch'
-	},
-
-	created() {
-		this.fetch();
-	},
-
-	methods: {
-		fetch() {
-			this.post = null;
-			os.api('gallery/posts/show', {
-				postId: this.postId
-			}).then(post => {
-				this.post = post;
-			}).catch(err => {
-				this.error = err;
-			});
-		},
-
-		share() {
-			navigator.share({
-				title: this.post.title,
-				text: this.post.description,
-				url: `${url}/gallery/${this.post.id}`
-			});
-		},
-
-		shareWithNote() {
-			os.post({
-				initialText: `${this.post.title} ${url}/gallery/${this.post.id}`
-			});
-		},
-
-		like() {
-			os.apiWithDialog('gallery/posts/like', {
-				postId: this.postId,
-			}).then(() => {
-				this.post.isLiked = true;
-				this.post.likedCount++;
-			});
-		},
-
-		async unlike() {
-			const confirm = await os.confirm({
-				type: 'warning',
-				text: this.$ts.unlikeConfirm,
-			});
-			if (confirm.canceled) return;
-			os.apiWithDialog('gallery/posts/unlike', {
-				postId: this.postId,
-			}).then(() => {
-				this.post.isLiked = false;
-				this.post.likedCount--;
-			});
-		},
-
-		edit() {
-			this.$router.push(`/gallery/${this.post.id}/edit`);
-		}
-	}
-});
+	actions: [{
+		icon: 'fas fa-pencil-alt',
+		text: i18n.ts.edit,
+		handler: edit,
+	}],
+} : null));
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/pages/instance-info.vue b/packages/client/src/pages/instance-info.vue
index f19cb9d1a2..31d3d4ac83 100644
--- a/packages/client/src/pages/instance-info.vue
+++ b/packages/client/src/pages/instance-info.vue
@@ -1,5 +1,6 @@
-<template>
-<MkSpacer :content-max="600" :margin-min="16" :margin-max="32">
+<template><MkStickyContainer>
+	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
+		<MkSpacer :content-max="600" :margin-min="16" :margin-max="32">
 	<div v-if="instance" class="_formRoot">
 		<div class="fnfelxur">
 			<img :src="instance.iconUrl || instance.faviconUrl" alt="" class="icon"/>
@@ -102,7 +103,7 @@
 			<FormLink :to="`https://${host}/manifest.json`" external style="margin-bottom: 8px;">manifest.json</FormLink>
 		</FormSection>
 	</div>
-</MkSpacer>
+</MkSpacer></MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
@@ -120,8 +121,8 @@ import FormSwitch from '@/components/form/switch.vue';
 import * as os from '@/os';
 import number from '@/filters/number';
 import bytes from '@/filters/bytes';
-import * as symbols from '@/symbols';
 import { iAmModerator } from '@/account';
+import { definePageMetadata } from '@/scripts/page-metadata';
 
 const props = defineProps<{
 	host: string;
@@ -146,7 +147,7 @@ async function fetch() {
 async function toggleBlock(ev) {
 	if (meta == null) return;
 	await os.api('admin/update-meta', {
-		blockedHosts: isBlocked ? meta.blockedHosts.concat([instance.host]) : meta.blockedHosts.filter(x => x !== instance.host)
+		blockedHosts: isBlocked ? meta.blockedHosts.concat([instance.host]) : meta.blockedHosts.filter(x => x !== instance.host),
 	});
 }
 
@@ -168,19 +169,21 @@ function refreshMetadata() {
 
 fetch();
 
-defineExpose({
-	[symbols.PAGE_INFO]: {
-		title: props.host,
-		icon: 'fas fa-info-circle',
-		bg: 'var(--bg)',
-		actions: [{
-			text: `https://${props.host}`,
-			icon: 'fas fa-external-link-alt',
-			handler: () => {
-				window.open(`https://${props.host}`, '_blank');
-			}
-		}],
-	},
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: props.host,
+	icon: 'fas fa-info-circle',
+	bg: 'var(--bg)',
+	actions: [{
+		text: `https://${props.host}`,
+		icon: 'fas fa-external-link-alt',
+		handler: () => {
+			window.open(`https://${props.host}`, '_blank');
+		},
+	}],
 });
 </script>
 
diff --git a/packages/client/src/pages/mentions.vue b/packages/client/src/pages/mentions.vue
index 9b57c956bf..0835f1f019 100644
--- a/packages/client/src/pages/mentions.vue
+++ b/packages/client/src/pages/mentions.vue
@@ -1,24 +1,27 @@
-<template>
-<MkSpacer :content-max="800">
+<template><MkStickyContainer>
+	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
+		<MkSpacer :content-max="800">
 	<XNotes :pagination="pagination"/>
-</MkSpacer>
+</MkSpacer></MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
 import XNotes from '@/components/notes.vue';
-import * as symbols from '@/symbols';
 import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
 
 const pagination = {
 	endpoint: 'notes/mentions' as const,
 	limit: 10,
 };
 
-defineExpose({
-	[symbols.PAGE_INFO]: {
-		title: i18n.ts.mentions,
-		icon: 'fas fa-at',
-		bg: 'var(--bg)',
-	},
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.mentions,
+	icon: 'fas fa-at',
+	bg: 'var(--bg)',
 });
 </script>
diff --git a/packages/client/src/pages/messages.vue b/packages/client/src/pages/messages.vue
index 9c5fb9b341..e443b5c461 100644
--- a/packages/client/src/pages/messages.vue
+++ b/packages/client/src/pages/messages.vue
@@ -1,27 +1,30 @@
-<template>
-<MkSpacer :content-max="800">
+<template><MkStickyContainer>
+	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
+		<MkSpacer :content-max="800">
 	<XNotes :pagination="pagination"/>
-</MkSpacer>
+</MkSpacer></MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
 import XNotes from '@/components/notes.vue';
-import * as symbols from '@/symbols';
 import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
 
 const pagination = {
 	endpoint: 'notes/mentions' as const,
 	limit: 10,
 	params: {
-		visibility: 'specified'
+		visibility: 'specified',
 	},
 };
 
-defineExpose({
-	[symbols.PAGE_INFO]: {
-		title: i18n.ts.directNotes,
-		icon: 'fas fa-envelope',
-		bg: 'var(--bg)',
-	},
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.directNotes,
+	icon: 'fas fa-envelope',
+	bg: 'var(--bg)',
 });
 </script>
diff --git a/packages/client/src/pages/messaging/index.vue b/packages/client/src/pages/messaging/index.vue
index 7c1d3e3cbe..bf9ac056cf 100644
--- a/packages/client/src/pages/messaging/index.vue
+++ b/packages/client/src/pages/messaging/index.vue
@@ -1,165 +1,165 @@
 <template>
-<MkSpacer :content-max="800">
-	<div v-size="{ max: [400] }" class="yweeujhr">
-		<MkButton primary class="start" @click="start"><i class="fas fa-plus"></i> {{ $ts.startMessaging }}</MkButton>
+<MkStickyContainer>
+	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
+	<MkSpacer :content-max="800">
+		<div v-size="{ max: [400] }" class="yweeujhr">
+			<MkButton primary class="start" @click="start"><i class="fas fa-plus"></i> {{ $ts.startMessaging }}</MkButton>
 
-		<div v-if="messages.length > 0" class="history">
-			<MkA v-for="(message, i) in messages"
-				:key="message.id"
-				v-anim="i"
-				class="message _block"
-				: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)}`"
-				:data-index="i"
-			>
-				<div>
-					<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">{{ $ts.you }}:</span>{{ message.text }}</p>
+			<div v-if="messages.length > 0" class="history">
+				<MkA
+					v-for="(message, i) in messages"
+					:key="message.id"
+					v-anim="i"
+					class="message _block"
+					: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)}`"
+					:data-index="i"
+				>
+					<div>
+						<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">{{ $ts.you }}:</span>{{ message.text }}</p>
+						</div>
 					</div>
-				</div>
-			</MkA>
+				</MkA>
+			</div>
+			<div v-if="!fetching && messages.length == 0" class="_fullinfo">
+				<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
+				<div>{{ $ts.noHistory }}</div>
+			</div>
+			<MkLoading v-if="fetching"/>
 		</div>
-		<div v-if="!fetching && messages.length == 0" class="_fullinfo">
-			<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
-			<div>{{ $ts.noHistory }}</div>
-		</div>
-		<MkLoading v-if="fetching"/>
-	</div>
-</MkSpacer>
+	</MkSpacer>
+</MkStickyContainer>
 </template>
 
-<script lang="ts">
-import { defineAsyncComponent, defineComponent, markRaw } from 'vue';
+<script lang="ts" setup>
+import { defineAsyncComponent, defineComponent, inject, markRaw, onMounted, onUnmounted } from 'vue';
 import * as Acct from 'misskey-js/built/acct';
 import MkButton from '@/components/ui/button.vue';
 import { acct } from '@/filters/user';
 import * as os from '@/os';
 import { stream } from '@/stream';
-import * as symbols from '@/symbols';
+import { useRouter } from '@/router';
+import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
+import { $i } from '@/account';
 
-export default defineComponent({
-	components: {
-		MkButton
-	},
+const router = useRouter();
 
-	data() {
-		return {
-			[symbols.PAGE_INFO]: {
-				title: this.$ts.messaging,
-				icon: 'fas fa-comments',
-				bg: 'var(--bg)',
-			},
-			fetching: true,
-			moreFetching: false,
-			messages: [],
-			connection: null,
-		};
-	},
+let fetching = $ref(true);
+let moreFetching = $ref(false);
+let messages = $ref([]);
+let connection = $ref(null);
 
-	mounted() {
-		this.connection = markRaw(stream.useChannel('messagingIndex'));
+const getAcct = Acct.toString;
 
-		this.connection.on('message', this.onMessage);
-		this.connection.on('read', this.onRead);
+function isMe(message) {
+	return message.userId === $i.id;
+}
 
-		os.api('messaging/history', { group: false }).then(userMessages => {
-			os.api('messaging/history', { group: true }).then(groupMessages => {
-				const messages = userMessages.concat(groupMessages);
-				messages.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
-				this.messages = messages;
-				this.fetching = false;
-			});
-		});
-	},
+function onMessage(message) {
+	if (message.recipientId) {
+		messages = messages.filter(m => !(
+			(m.recipientId === message.recipientId && m.userId === message.userId) ||
+			(m.recipientId === message.userId && m.userId === message.recipientId)));
 
-	beforeUnmount() {
-		this.connection.dispose();
-	},
-
-	methods: {
-		getAcct: Acct.toString,
-
-		isMe(message) {
-			return message.userId === this.$i.id;
-		},
-
-		onMessage(message) {
-			if (message.recipientId) {
-				this.messages = this.messages.filter(m => !(
-					(m.recipientId === message.recipientId && m.userId === message.userId) ||
-					(m.recipientId === message.userId && m.userId === message.recipientId)));
-
-				this.messages.unshift(message);
-			} else if (message.groupId) {
-				this.messages = this.messages.filter(m => m.groupId !== message.groupId);
-				this.messages.unshift(message);
-			}
-		},
-
-		onRead(ids) {
-			for (const id of ids) {
-				const found = this.messages.find(m => m.id === id);
-				if (found) {
-					if (found.recipientId) {
-						found.isRead = true;
-					} else if (found.groupId) {
-						found.reads.push(this.$i.id);
-					}
-				}
-			}
-		},
-
-		start(ev) {
-			os.popupMenu([{
-				text: this.$ts.messagingWithUser,
-				icon: 'fas fa-user',
-				action: () => { this.startUser(); }
-			}, {
-				text: this.$ts.messagingWithGroup,
-				icon: 'fas fa-users',
-				action: () => { this.startGroup(); }
-			}], ev.currentTarget ?? ev.target);
-		},
-
-		async startUser() {
-			os.selectUser().then(user => {
-				this.$router.push(`/my/messaging/${Acct.toString(user)}`);
-			});
-		},
-
-		async startGroup() {
-			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',
-					title: this.$ts.youHaveNoGroups,
-					text: this.$ts.joinOrCreateGroup,
-				});
-				return;
-			}
-			const { canceled, result: group } = await os.select({
-				title: this.$ts.group,
-				items: groups1.concat(groups2).map(group => ({
-					value: group, text: group.name
-				}))
-			});
-			if (canceled) return;
-			this.$router.push(`/my/messaging/group/${group.id}`);
-		},
-
-		acct
+		messages.unshift(message);
+	} else if (message.groupId) {
+		messages = messages.filter(m => m.groupId !== message.groupId);
+		messages.unshift(message);
 	}
+}
+
+function onRead(ids) {
+	for (const id of ids) {
+		const found = messages.find(m => m.id === id);
+		if (found) {
+			if (found.recipientId) {
+				found.isRead = true;
+			} else if (found.groupId) {
+				found.reads.push($i.id);
+			}
+		}
+	}
+}
+
+function start(ev) {
+	os.popupMenu([{
+		text: i18n.ts.messagingWithUser,
+		icon: 'fas fa-user',
+		action: () => { startUser(); },
+	}, {
+		text: i18n.ts.messagingWithGroup,
+		icon: 'fas fa-users',
+		action: () => { startGroup(); },
+	}], ev.currentTarget ?? ev.target);
+}
+
+async function startUser() {
+	os.selectUser().then(user => {
+		router.push(`/my/messaging/${Acct.toString(user)}`);
+	});
+}
+
+async function startGroup() {
+	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',
+			title: i18n.ts.youHaveNoGroups,
+			text: i18n.ts.joinOrCreateGroup,
+		});
+		return;
+	}
+	const { canceled, result: group } = await os.select({
+		title: i18n.ts.group,
+		items: groups1.concat(groups2).map(group => ({
+			value: group, text: group.name,
+		})),
+	});
+	if (canceled) return;
+	router.push(`/my/messaging/group/${group.id}`);
+}
+
+onMounted(() => {
+	connection = markRaw(stream.useChannel('messagingIndex'));
+
+	connection.on('message', onMessage);
+	connection.on('read', onRead);
+
+	os.api('messaging/history', { group: false }).then(userMessages => {
+		os.api('messaging/history', { group: true }).then(groupMessages => {
+			const _messages = userMessages.concat(groupMessages);
+			_messages.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
+			messages = _messages;
+			fetching = false;
+		});
+	});
+});
+
+onUnmounted(() => {
+	if (connection) connection.dispose();
+});
+
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.messaging,
+	icon: 'fas fa-comments',
+	bg: 'var(--bg)',
 });
 </script>
 
diff --git a/packages/client/src/pages/messaging/messaging-room.vue b/packages/client/src/pages/messaging/messaging-room.vue
index 65c67e6354..2e00c3ab19 100644
--- a/packages/client/src/pages/messaging/messaging-room.vue
+++ b/packages/client/src/pages/messaging/messaging-room.vue
@@ -61,10 +61,10 @@ import { isBottomVisible, onScrollBottom, scrollToBottom } from '@/scripts/scrol
 import * as os from '@/os';
 import { stream } from '@/stream';
 import * as sound from '@/scripts/sound';
-import * as symbols from '@/symbols';
 import { i18n } from '@/i18n';
 import { $i } from '@/account';
 import { defaultStore } from '@/store';
+import { definePageMetadata } from '@/scripts/page-metadata';
 
 const props = defineProps<{
 	userAcct?: string;
@@ -280,15 +280,13 @@ onBeforeUnmount(() => {
 	if (scrollRemove) scrollRemove();
 });
 
-defineExpose({
-	[symbols.PAGE_INFO]: computed(() => !fetching ? user ? {
-		userName: user,
-		avatar: user,
-	} : {
-		title: group?.name,
-		icon: 'fas fa-users',
-	} : null),
-});
+definePageMetadata(computed(() => !fetching ? user ? {
+	userName: user,
+	avatar: user,
+} : {
+	title: group?.name,
+	icon: 'fas fa-users',
+} : null));
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/pages/mfm-cheat-sheet.vue b/packages/client/src/pages/mfm-cheat-sheet.vue
index 2c10494ede..2b92a69c4b 100644
--- a/packages/client/src/pages/mfm-cheat-sheet.vue
+++ b/packages/client/src/pages/mfm-cheat-sheet.vue
@@ -1,127 +1,129 @@
 <template>
-<div class="mwysmxbg">
-	<div class="_isolated">{{ $ts._mfm.intro }}</div>
-	<div class="section _block">
-		<div class="title">{{ $ts._mfm.mention }}</div>
-		<div class="content">
-			<p>{{ $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>
+	<div class="mwysmxbg">
+		<div class="_isolated">{{ $ts._mfm.intro }}</div>
+		<div class="section _block">
+			<div class="title">{{ $ts._mfm.mention }}</div>
+			<div class="content">
+				<p>{{ $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">{{ $ts._mfm.hashtag }}</div>
-		<div class="content">
-			<p>{{ $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">{{ $ts._mfm.hashtag }}</div>
+			<div class="content">
+				<p>{{ $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">{{ $ts._mfm.url }}</div>
-		<div class="content">
-			<p>{{ $ts._mfm.urlDescription }}</p>
-			<div class="preview">
-				<Mfm :text="preview_url"/>
-				<MkTextarea v-model="preview_url"><template #label>MFM</template></MkTextarea>
+		<div class="section _block">
+			<div class="title">{{ $ts._mfm.url }}</div>
+			<div class="content">
+				<p>{{ $ts._mfm.urlDescription }}</p>
+				<div class="preview">
+					<Mfm :text="preview_url"/>
+					<MkTextarea v-model="preview_url"><template #label>MFM</template></MkTextarea>
+				</div>
 			</div>
 		</div>
-	</div>
-	<div class="section _block">
-		<div class="title">{{ $ts._mfm.link }}</div>
-		<div class="content">
-			<p>{{ $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">{{ $ts._mfm.link }}</div>
+			<div class="content">
+				<p>{{ $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">{{ $ts._mfm.emoji }}</div>
-		<div class="content">
-			<p>{{ $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">{{ $ts._mfm.emoji }}</div>
+			<div class="content">
+				<p>{{ $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">{{ $ts._mfm.bold }}</div>
-		<div class="content">
-			<p>{{ $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">{{ $ts._mfm.bold }}</div>
+			<div class="content">
+				<p>{{ $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">{{ $ts._mfm.small }}</div>
-		<div class="content">
-			<p>{{ $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">{{ $ts._mfm.small }}</div>
+			<div class="content">
+				<p>{{ $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">{{ $ts._mfm.quote }}</div>
-		<div class="content">
-			<p>{{ $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">{{ $ts._mfm.quote }}</div>
+			<div class="content">
+				<p>{{ $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">{{ $ts._mfm.center }}</div>
-		<div class="content">
-			<p>{{ $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">{{ $ts._mfm.center }}</div>
+			<div class="content">
+				<p>{{ $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">{{ $ts._mfm.inlineCode }}</div>
-		<div class="content">
-			<p>{{ $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">{{ $ts._mfm.inlineCode }}</div>
+			<div class="content">
+				<p>{{ $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">{{ $ts._mfm.blockCode }}</div>
-		<div class="content">
-			<p>{{ $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">{{ $ts._mfm.blockCode }}</div>
+			<div class="content">
+				<p>{{ $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">{{ $ts._mfm.inlineMath }}</div>
-		<div class="content">
-			<p>{{ $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">{{ $ts._mfm.inlineMath }}</div>
+			<div class="content">
+				<p>{{ $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">{{ $ts._mfm.search }}</div>
 		<div class="content">
@@ -133,216 +135,210 @@
 		</div>
 	</div>
 	-->
-	<div class="section _block">
-		<div class="title">{{ $ts._mfm.flip }}</div>
-		<div class="content">
-			<p>{{ $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">{{ $ts._mfm.flip }}</div>
+			<div class="content">
+				<p>{{ $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">{{ $ts._mfm.font }}</div>
+			<div class="content">
+				<p>{{ $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">{{ $ts._mfm.x2 }}</div>
+			<div class="content">
+				<p>{{ $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">{{ $ts._mfm.x3 }}</div>
+			<div class="content">
+				<p>{{ $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">{{ $ts._mfm.x4 }}</div>
+			<div class="content">
+				<p>{{ $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">{{ $ts._mfm.blur }}</div>
+			<div class="content">
+				<p>{{ $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">{{ $ts._mfm.jelly }}</div>
+			<div class="content">
+				<p>{{ $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">{{ $ts._mfm.tada }}</div>
+			<div class="content">
+				<p>{{ $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">{{ $ts._mfm.jump }}</div>
+			<div class="content">
+				<p>{{ $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">{{ $ts._mfm.bounce }}</div>
+			<div class="content">
+				<p>{{ $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">{{ $ts._mfm.spin }}</div>
+			<div class="content">
+				<p>{{ $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">{{ $ts._mfm.shake }}</div>
+			<div class="content">
+				<p>{{ $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">{{ $ts._mfm.twitch }}</div>
+			<div class="content">
+				<p>{{ $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">{{ $ts._mfm.rainbow }}</div>
+			<div class="content">
+				<p>{{ $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">{{ $ts._mfm.sparkle }}</div>
+			<div class="content">
+				<p>{{ $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">{{ $ts._mfm.rotate }}</div>
+			<div class="content">
+				<p>{{ $ts._mfm.rotateDescription }}</p>
+				<div class="preview">
+					<Mfm :text="preview_rotate"/>
+					<MkTextarea v-model="preview_rotate"><span>MFM</span></MkTextarea>
+				</div>
 			</div>
 		</div>
 	</div>
-	<div class="section _block">
-		<div class="title">{{ $ts._mfm.font }}</div>
-		<div class="content">
-			<p>{{ $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">{{ $ts._mfm.x2 }}</div>
-		<div class="content">
-			<p>{{ $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">{{ $ts._mfm.x3 }}</div>
-		<div class="content">
-			<p>{{ $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">{{ $ts._mfm.x4 }}</div>
-		<div class="content">
-			<p>{{ $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">{{ $ts._mfm.blur }}</div>
-		<div class="content">
-			<p>{{ $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">{{ $ts._mfm.jelly }}</div>
-		<div class="content">
-			<p>{{ $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">{{ $ts._mfm.tada }}</div>
-		<div class="content">
-			<p>{{ $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">{{ $ts._mfm.jump }}</div>
-		<div class="content">
-			<p>{{ $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">{{ $ts._mfm.bounce }}</div>
-		<div class="content">
-			<p>{{ $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">{{ $ts._mfm.spin }}</div>
-		<div class="content">
-			<p>{{ $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">{{ $ts._mfm.shake }}</div>
-		<div class="content">
-			<p>{{ $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">{{ $ts._mfm.twitch }}</div>
-		<div class="content">
-			<p>{{ $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">{{ $ts._mfm.rainbow }}</div>
-		<div class="content">
-			<p>{{ $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">{{ $ts._mfm.sparkle }}</div>
-		<div class="content">
-			<p>{{ $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">{{ $ts._mfm.rotate }}</div>
-		<div class="content">
-			<p>{{ $ts._mfm.rotateDescription }}</p>
-			<div class="preview">
-				<Mfm :text="preview_rotate"/>
-				<MkTextarea v-model="preview_rotate"><span>MFM</span></MkTextarea>
-			</div>
-		</div>
-	</div>
-</div>
+</MkStickyContainer>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 import { defineComponent } from 'vue';
 import MkTextarea from '@/components/form/textarea.vue';
-import * as symbols from '@/symbols';
+import { definePageMetadata } from '@/scripts/page-metadata';
+import { i18n } from '@/i18n';
+import { instance } from '@/instance';
 
-export default defineComponent({
-	components: {
-		MkTextarea
-	},
+const preview_mention = '@example';
+const preview_hashtag = '#test';
+const preview_url = 'https://example.com';
+const preview_link = `[${i18n.ts._mfm.dummy}](https://example.com)`;
+const preview_emoji = instance.emojis.length ? `:${instance.emojis[0].name}:` : ':emojiname:';
+const preview_bold = `**${i18n.ts._mfm.dummy}**`;
+const preview_small = `<small>${i18n.ts._mfm.dummy}</small>`;
+const preview_center = `<center>${i18n.ts._mfm.dummy}</center>`;
+const preview_inlineCode = '`<: "Hello, world!"`';
+const preview_blockCode = '```\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```';
+const preview_inlineMath = '\\(x= \\frac{-b\' \\pm \\sqrt{(b\')^2-ac}}{a}\\)';
+const preview_quote = `> ${i18n.ts._mfm.dummy}`;
+const preview_search = `${i18n.ts._mfm.dummy} 検索`;
+const preview_jelly = '$[jelly 🍮] $[jelly.speed=5s 🍮]';
+const preview_tada = '$[tada 🍮] $[tada.speed=5s 🍮]';
+const preview_jump = '$[jump 🍮] $[jump.speed=5s 🍮]';
+const preview_bounce = '$[bounce 🍮] $[bounce.speed=5s 🍮]';
+const preview_shake = '$[shake 🍮] $[shake.speed=5s 🍮]';
+const preview_twitch = '$[twitch 🍮] $[twitch.speed=5s 🍮]';
+const preview_spin = '$[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 🍮]';
+const preview_flip = `$[flip ${i18n.ts._mfm.dummy}]\n$[flip.v ${i18n.ts._mfm.dummy}]\n$[flip.h,v ${i18n.ts._mfm.dummy}]`;
+const preview_font = `$[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}]`;
+const preview_x2 = '$[x2 🍮]';
+const preview_x3 = '$[x3 🍮]';
+const preview_x4 = '$[x4 🍮]';
+const preview_blur = `$[blur ${i18n.ts._mfm.dummy}]`;
+const preview_rainbow = '$[rainbow 🍮] $[rainbow.speed=5s 🍮]';
+const preview_sparkle = '$[sparkle 🍮]';
+const preview_rotate = '$[rotate 🍮]';
 
-	data() {
-		return {
-			[symbols.PAGE_INFO]: {
-				title: this.$ts._mfm.cheatSheet,
-				icon: 'fas fa-question-circle',
-			},
-			preview_mention: '@example',
-			preview_hashtag: '#test',
-			preview_url: `https://example.com`,
-			preview_link: `[${this.$ts._mfm.dummy}](https://example.com)`,
-			preview_emoji: this.$instance.emojis.length ? `:${this.$instance.emojis[0].name}:` : `:emojiname:`,
-			preview_bold: `**${this.$ts._mfm.dummy}**`,
-			preview_small: `<small>${this.$ts._mfm.dummy}</small>`,
-			preview_center: `<center>${this.$ts._mfm.dummy}</center>`,
-			preview_inlineCode: '`<: "Hello, world!"`',
-			preview_blockCode: '```\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```',
-			preview_inlineMath: '\\(x= \\frac{-b\' \\pm \\sqrt{(b\')^2-ac}}{a}\\)',
-			preview_quote: `> ${this.$ts._mfm.dummy}`,
-			preview_search: `${this.$ts._mfm.dummy} 検索`,
-			preview_jelly: `$[jelly 🍮] $[jelly.speed=5s 🍮]`,
-			preview_tada: `$[tada 🍮] $[tada.speed=5s 🍮]`,
-			preview_jump: `$[jump 🍮] $[jump.speed=5s 🍮]`,
-			preview_bounce: `$[bounce 🍮] $[bounce.speed=5s 🍮]`,
-			preview_shake: `$[shake 🍮] $[shake.speed=5s 🍮]`,
-			preview_twitch: `$[twitch 🍮] $[twitch.speed=5s 🍮]`,
-			preview_spin: `$[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 🍮]`,
-			preview_flip: `$[flip ${this.$ts._mfm.dummy}]\n$[flip.v ${this.$ts._mfm.dummy}]\n$[flip.h,v ${this.$ts._mfm.dummy}]`,
-			preview_font: `$[font.serif ${this.$ts._mfm.dummy}]\n$[font.monospace ${this.$ts._mfm.dummy}]\n$[font.cursive ${this.$ts._mfm.dummy}]\n$[font.fantasy ${this.$ts._mfm.dummy}]`,
-			preview_x2: `$[x2 🍮]`,
-			preview_x3: `$[x3 🍮]`,
-			preview_x4: `$[x4 🍮]`,
-			preview_blur: `$[blur ${this.$ts._mfm.dummy}]`,
-			preview_rainbow: `$[rainbow 🍮] $[rainbow.speed=5s 🍮]`,
-			preview_sparkle: `$[sparkle 🍮]`,
-			preview_rotate: `$[rotate 🍮]`,
-		};
-	},
+definePageMetadata({
+	title: i18n.ts._mfm.cheatSheet,
+	icon: 'fas fa-question-circle',
 });
 </script>
 
diff --git a/packages/client/src/pages/miauth.vue b/packages/client/src/pages/miauth.vue
index 4032d7723e..4b3ac7761e 100644
--- a/packages/client/src/pages/miauth.vue
+++ b/packages/client/src/pages/miauth.vue
@@ -49,28 +49,12 @@ export default defineComponent({
 		MkSignin,
 		MkButton,
 	},
+	props: ['session', 'callback', 'name', 'icon', 'permission'],
 	data() {
 		return {
-			state: null
+			state: null,
 		};
 	},
-	computed: {
-		session(): string {
-			return this.$route.params.session;
-		},
-		callback(): string {
-			return this.$route.query.callback;
-		},
-		name(): string {
-			return this.$route.query.name;
-		},
-		icon(): string {
-			return this.$route.query.icon;
-		},
-		permission(): string[] {
-			return this.$route.query.permission ? this.$route.query.permission.split(',') : [];
-		},
-	},
 	methods: {
 		async accept() {
 			this.state = 'waiting';
@@ -84,7 +68,7 @@ export default defineComponent({
 			this.state = 'accepted';
 			if (this.callback) {
 				location.href = appendQuery(this.callback, query({
-					session: this.session
+					session: this.session,
 				}));
 			}
 		},
@@ -93,8 +77,8 @@ export default defineComponent({
 		},
 		onLogin(res) {
 			login(res.i);
-		}
-	}
+		},
+	},
 });
 </script>
 
diff --git a/packages/client/src/pages/my-antennas/create.vue b/packages/client/src/pages/my-antennas/create.vue
index a08bece731..e792834a89 100644
--- a/packages/client/src/pages/my-antennas/create.vue
+++ b/packages/client/src/pages/my-antennas/create.vue
@@ -5,11 +5,13 @@
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
+import { inject } from 'vue';
 import XAntenna from './editor.vue';
-import * as symbols from '@/symbols';
 import { i18n } from '@/i18n';
-import { router } from '@/router';
+import { definePageMetadata } from '@/scripts/page-metadata';
+import { useRouter } from '@/router';
+
+const router = useRouter();
 
 let draft = $ref({
 	name: '',
@@ -22,19 +24,21 @@ let draft = $ref({
 	withReplies: false,
 	caseSensitive: false,
 	withFile: false,
-	notify: false
+	notify: false,
 });
 
 function onAntennaCreated() {
 	router.push('/my/antennas');
 }
 
-defineExpose({
-	[symbols.PAGE_INFO]: {
-		title: i18n.ts.manageAntennas,
-		icon: 'fas fa-satellite',
-		bg: 'var(--bg)',
-	},
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.manageAntennas,
+	icon: 'fas fa-satellite',
+	bg: 'var(--bg)',
 });
 </script>
 
diff --git a/packages/client/src/pages/my-antennas/edit.vue b/packages/client/src/pages/my-antennas/edit.vue
index 38e56ce35d..53f9b07db0 100644
--- a/packages/client/src/pages/my-antennas/edit.vue
+++ b/packages/client/src/pages/my-antennas/edit.vue
@@ -5,14 +5,14 @@
 </template>
 
 <script lang="ts" setup>
-import { watch } from 'vue';
+import { inject, watch } from 'vue';
 import XAntenna from './editor.vue';
-import * as symbols from '@/symbols';
 import * as os from '@/os';
-import { MisskeyNavigator } from '@/scripts/navigate';
 import { i18n } from '@/i18n';
+import { useRouter } from '@/router';
+import { definePageMetadata } from '@/scripts/page-metadata';
 
-const nav = new MisskeyNavigator();
+const router = useRouter();
 
 let antenna: any = $ref(null);
 
@@ -21,18 +21,20 @@ const props = defineProps<{
 }>();
 
 function onAntennaUpdated() {
-	nav.push('/my/antennas');
+	router.push('/my/antennas');
 }
 
 os.api('antennas/show', { antennaId: props.antennaId }).then((antennaResponse) => {
 	antenna = antennaResponse;
 });
 
-defineExpose({
-	[symbols.PAGE_INFO]: {
-		title: i18n.ts.manageAntennas,
-		icon: 'fas fa-satellite',
-	}
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.manageAntennas,
+	icon: 'fas fa-satellite',
 });
 </script>
 
diff --git a/packages/client/src/pages/my-antennas/index.vue b/packages/client/src/pages/my-antennas/index.vue
index a568f64c52..2cdb26031f 100644
--- a/packages/client/src/pages/my-antennas/index.vue
+++ b/packages/client/src/pages/my-antennas/index.vue
@@ -1,5 +1,6 @@
-<template>
-<MkSpacer :content-max="700">
+<template><MkStickyContainer>
+	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
+		<MkSpacer :content-max="700">
 	<div class="ieepwinx">
 		<MkButton :link="true" to="/my/antennas/create" primary class="add"><i class="fas fa-plus"></i> {{ i18n.ts.add }}</MkButton>
 
@@ -11,27 +12,29 @@
 			</MkPagination>
 		</div>
 	</div>
-</MkSpacer>
+</MkSpacer></MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
 import { } from 'vue';
 import MkPagination from '@/components/ui/pagination.vue';
 import MkButton from '@/components/ui/button.vue';
-import * as symbols from '@/symbols';
 import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
 
 const pagination = {
 	endpoint: 'antennas/list' as const,
 	limit: 10,
 };
 
-defineExpose({
-	[symbols.PAGE_INFO]: {
-		title: i18n.ts.manageAntennas,
-		icon: 'fas fa-satellite',
-		bg: 'var(--bg)'
-	}
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.manageAntennas,
+	icon: 'fas fa-satellite',
+	bg: 'var(--bg)',
 });
 </script>
 
diff --git a/packages/client/src/pages/my-clips/index.vue b/packages/client/src/pages/my-clips/index.vue
index e287357a42..6434b0c004 100644
--- a/packages/client/src/pages/my-clips/index.vue
+++ b/packages/client/src/pages/my-clips/index.vue
@@ -1,5 +1,6 @@
-<template>
-<MkSpacer :content-max="700">
+<template><MkStickyContainer>
+	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
+		<MkSpacer :content-max="700">
 	<div class="qtcaoidl">
 		<MkButton primary class="add" @click="create"><i class="fas fa-plus"></i> {{ $ts.add }}</MkButton>
 
@@ -10,7 +11,7 @@
 			</MkA>
 		</MkPagination>
 	</div>
-</MkSpacer>
+</MkSpacer></MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
@@ -18,8 +19,8 @@ import { } from 'vue';
 import MkPagination from '@/components/ui/pagination.vue';
 import MkButton from '@/components/ui/button.vue';
 import * as os from '@/os';
-import * as symbols from '@/symbols';
 import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
 
 const pagination = {
 	endpoint: 'clips/list' as const,
@@ -61,15 +62,17 @@ function onClipDeleted() {
 	pagingComponent.reload();
 }
 
-defineExpose({
-	[symbols.PAGE_INFO]: {
-		title: i18n.ts.clip,
-		icon: 'fas fa-paperclip',
-		bg: 'var(--bg)',
-		action: {
-			icon: 'fas fa-plus',
-			handler: create
-		},
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.clip,
+	icon: 'fas fa-paperclip',
+	bg: 'var(--bg)',
+	action: {
+		icon: 'fas fa-plus',
+		handler: create,
 	},
 });
 </script>
diff --git a/packages/client/src/pages/my-groups/group.vue b/packages/client/src/pages/my-groups/group.vue
deleted file mode 100644
index 92c0483af9..0000000000
--- a/packages/client/src/pages/my-groups/group.vue
+++ /dev/null
@@ -1,178 +0,0 @@
-<template>
-<div class="mk-group-page">
-	<transition :name="$store.state.animation ? 'zoom' : ''" mode="out-in">
-		<div v-if="group" class="_section">
-			<div class="_content" style="display: flex; gap: var(--margin); flex-wrap: wrap;">
-				<MkButton inline @click="invite()">{{ $ts.invite }}</MkButton>
-				<MkButton inline @click="renameGroup()">{{ $ts.rename }}</MkButton>
-				<MkButton inline @click="transfer()">{{ $ts.transfer }}</MkButton>
-				<MkButton inline @click="deleteGroup()">{{ $ts.delete }}</MkButton>
-			</div>
-		</div>
-	</transition>
-
-	<transition :name="$store.state.animation ? 'zoom' : ''" mode="out-in">
-		<div v-if="group" class="_section members _gap">
-			<div class="_title">{{ $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="fas fa-times"></i></button>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-	</transition>
-</div>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent } from 'vue';
-import MkButton from '@/components/ui/button.vue';
-import * as os from '@/os';
-import * as symbols from '@/symbols';
-
-export default defineComponent({
-	components: {
-		MkButton
-	},
-
-	props: {
-		groupId: {
-			type: String,
-			required: true,
-		},
-	},
-
-	data() {
-		return {
-			[symbols.PAGE_INFO]: computed(() => this.group ? {
-				title: this.group.name,
-				icon: 'fas fa-users',
-			} : null),
-			group: null,
-			users: [],
-		};
-	},
-
-	watch: {
-		groupId: 'fetch',
-	},
-
-	created() {
-		this.fetch();
-	},
-
-	methods: {
-		fetch() {
-			os.api('users/groups/show', {
-				groupId: this.groupId
-			}).then(group => {
-				this.group = group;
-				os.api('users/show', {
-					userIds: this.group.userIds
-				}).then(users => {
-					this.users = users;
-				});
-			});
-		},
-
-		invite() {
-			os.selectUser().then(user => {
-				os.apiWithDialog('users/groups/invite', {
-					groupId: this.group.id,
-					userId: user.id
-				});
-			});
-		},
-
-		removeUser(user) {
-			os.api('users/groups/pull', {
-				groupId: this.group.id,
-				userId: user.id
-			}).then(() => {
-				this.users = this.users.filter(x => x.id !== user.id);
-			});
-		},
-
-		async renameGroup() {
-			const { canceled, result: name } = await os.inputText({
-				title: this.$ts.groupName,
-				default: this.group.name
-			});
-			if (canceled) return;
-
-			await os.api('users/groups/update', {
-				groupId: this.group.id,
-				name: name
-			});
-
-			this.group.name = name;
-		},
-
-		transfer() {
-			os.selectUser().then(user => {
-				os.apiWithDialog('users/groups/transfer', {
-					groupId: this.group.id,
-					userId: user.id
-				});
-			});
-		},
-
-		async deleteGroup() {
-			const { canceled } = await os.confirm({
-				type: 'warning',
-				text: this.$t('removeAreYouSure', { x: this.group.name }),
-			});
-			if (canceled) return;
-
-			await os.apiWithDialog('users/groups/delete', {
-				groupId: this.group.id
-			});
-			this.$router.push('/my/groups');
-		}
-	}
-});
-</script>
-
-<style lang="scss" scoped>
-.mk-group-page {
-	> .members {
-		> ._content {
-			> .users {
-				> .user {
-					display: flex;
-					align-items: center;
-					padding: 16px;
-
-					> .avatar {
-						width: 50px;
-						height: 50px;
-					}
-
-					> .body {
-						flex: 1;
-						padding: 8px;
-
-						> .name {
-							display: block;
-							font-weight: bold;
-						}
-
-						> .acct {
-							opacity: 0.5;
-						}
-					}
-				}
-			}
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/pages/my-groups/index.vue b/packages/client/src/pages/my-groups/index.vue
deleted file mode 100644
index 4b2b2963a8..0000000000
--- a/packages/client/src/pages/my-groups/index.vue
+++ /dev/null
@@ -1,147 +0,0 @@
-<template>
-<MkSpacer :content-max="700">
-	<div v-if="tab === 'owned'" class="_content">
-		<MkButton primary style="margin: 0 auto var(--margin) auto;" @click="create"><i class="fas fa-plus"></i> {{ $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>
-		</MkPagination>
-	</div>
-
-	<div v-else-if="tab === 'joined'" class="_content">
-		<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)">{{ $ts.leaveGroup }}</MkButton>
-				</div>
-			</div>
-		</MkPagination>
-	</div>
-
-	<div v-else-if="tab === 'invites'" class="_content">
-		<MkPagination v-slot="{items}" ref="invitations" :pagination="invitationPagination">
-			<div v-for="invitation in items" :key="invitation.id" class="_card">
-				<div class="_title">{{ invitation.group.name }}</div>
-				<div class="_content"><MkAvatars :user-ids="invitation.group.userIds"/></div>
-				<div class="_footer">
-					<MkButton primary inline @click="acceptInvite(invitation)"><i class="fas fa-check"></i> {{ $ts.accept }}</MkButton>
-					<MkButton primary inline @click="rejectInvite(invitation)"><i class="fas fa-ban"></i> {{ $ts.reject }}</MkButton>
-				</div>
-			</div>
-		</MkPagination>
-	</div>
-</MkSpacer>
-</template>
-
-<script lang="ts">
-import { defineComponent, computed } from 'vue';
-import MkPagination from '@/components/ui/pagination.vue';
-import MkButton from '@/components/ui/button.vue';
-import MkContainer from '@/components/ui/container.vue';
-import MkAvatars from '@/components/avatars.vue';
-import MkTab from '@/components/tab.vue';
-import * as os from '@/os';
-import * as symbols from '@/symbols';
-
-export default defineComponent({
-	components: {
-		MkPagination,
-		MkButton,
-		MkContainer,
-		MkTab,
-		MkAvatars,
-	},
-
-	data() {
-		return {
-			[symbols.PAGE_INFO]: computed(() => ({
-				title: this.$ts.groups,
-				icon: 'fas fa-users',
-				bg: 'var(--bg)',
-				actions: [{
-					icon: 'fas fa-plus',
-					text: this.$ts.createGroup,
-					handler: this.create,
-				}],
-				tabs: [{
-					active: this.tab === 'owned',
-					title: this.$ts.ownedGroups,
-					icon: 'fas fa-user-tie',
-					onClick: () => { this.tab = 'owned'; },
-				}, {
-					active: this.tab === 'joined',
-					title: this.$ts.joinedGroups,
-					icon: 'fas fa-id-badge',
-					onClick: () => { this.tab = 'joined'; },
-				}, {
-					active: this.tab === 'invites',
-					title: this.$ts.invites,
-					icon: 'fas fa-envelope-open-text',
-					onClick: () => { this.tab = 'invites'; },
-				},]
-			})),
-			tab: 'owned',
-			ownedPagination: {
-				endpoint: 'users/groups/owned' as const,
-				limit: 10,
-			},
-			joinedPagination: {
-				endpoint: 'users/groups/joined' as const,
-				limit: 10,
-			},
-			invitationPagination: {
-				endpoint: 'i/user-group-invites' as const,
-				limit: 10,
-			},
-		};
-	},
-
-	methods: {
-		async create() {
-			const { canceled, result: name } = await os.inputText({
-				title: this.$ts.groupName,
-			});
-			if (canceled) return;
-			await os.api('users/groups/create', { name: name });
-			this.$refs.owned.reload();
-			os.success();
-		},
-		acceptInvite(invitation) {
-			os.api('users/groups/invitations/accept', {
-				invitationId: invitation.id
-			}).then(() => {
-				os.success();
-				this.$refs.invitations.reload();
-				this.$refs.joined.reload();
-			});
-		},
-		rejectInvite(invitation) {
-			os.api('users/groups/invitations/reject', {
-				invitationId: invitation.id
-			}).then(() => {
-				this.$refs.invitations.reload();
-			});
-		},
-		async leave(group) {
-			const { canceled } = await os.confirm({
-				type: 'warning',
-				text: this.$t('leaveGroupConfirm', { name: group.name }),
-			});
-			if (canceled) return;
-			os.apiWithDialog('users/groups/leave', {
-				groupId: group.id,
-			}).then(() => {
-				this.$refs.joined.reload();
-			});
-		}
-	}
-});
-</script>
-
-<style lang="scss" scoped>
-</style>
diff --git a/packages/client/src/pages/my-lists/index.vue b/packages/client/src/pages/my-lists/index.vue
index 9ed9e2960e..411826a950 100644
--- a/packages/client/src/pages/my-lists/index.vue
+++ b/packages/client/src/pages/my-lists/index.vue
@@ -1,5 +1,6 @@
-<template>
-<MkSpacer :content-max="700">
+<template><MkStickyContainer>
+	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
+		<MkSpacer :content-max="700">
 	<div class="qkcjvfiv">
 		<MkButton primary class="add" @click="create"><i class="fas fa-plus"></i> {{ $ts.createList }}</MkButton>
 
@@ -10,7 +11,7 @@
 			</MkA>
 		</MkPagination>
 	</div>
-</MkSpacer>
+</MkSpacer></MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
@@ -19,8 +20,8 @@ import MkPagination from '@/components/ui/pagination.vue';
 import MkButton from '@/components/ui/button.vue';
 import MkAvatars from '@/components/avatars.vue';
 import * as os from '@/os';
-import * as symbols from '@/symbols';
 import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
 
 const pagingComponent = $ref<InstanceType<typeof MkPagination>>();
 
@@ -38,15 +39,17 @@ async function create() {
 	pagingComponent.reload();
 }
 
-defineExpose({
-	[symbols.PAGE_INFO]: {
-		title: i18n.ts.manageLists,
-		icon: 'fas fa-list-ul',
-		bg: 'var(--bg)',
-		action: {
-			icon: 'fas fa-plus',
-			handler: create,
-		},
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.manageLists,
+	icon: 'fas fa-list-ul',
+	bg: 'var(--bg)',
+	action: {
+		icon: 'fas fa-plus',
+		handler: create,
 	},
 });
 </script>
diff --git a/packages/client/src/pages/my-lists/list.vue b/packages/client/src/pages/my-lists/list.vue
index bc24f58431..6e76c4a7d5 100644
--- a/packages/client/src/pages/my-lists/list.vue
+++ b/packages/client/src/pages/my-lists/list.vue
@@ -1,5 +1,6 @@
-<template>
-<MkSpacer :content-max="700">
+<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">
@@ -31,104 +32,96 @@
 			</div>
 		</transition>
 	</div>
-</MkSpacer>
+</MkSpacer></MkStickyContainer>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent } from 'vue';
+<script lang="ts" setup>
+import { computed, defineComponent, watch } from 'vue';
 import MkButton from '@/components/ui/button.vue';
 import * as os from '@/os';
-import * as symbols from '@/symbols';
+import { mainRouter } from '@/router';
+import { definePageMetadata } from '@/scripts/page-metadata';
 
-export default defineComponent({
-	components: {
-		MkButton
-	},
+const props = defineProps<{
+	listId: string;
+}>();
 
-	data() {
-		return {
-			[symbols.PAGE_INFO]: computed(() => this.list ? {
-				title: this.list.name,
-				icon: 'fas fa-list-ul',
-				bg: 'var(--bg)',
-			} : null),
-			list: null,
-			users: [],
-		};
-	},
+let list = $ref(null);
+let users = $ref([]);
 
-	watch: {
-		$route: 'fetch'
-	},
+function fetchList() {
+	os.api('users/lists/show', {
+		listId: props.listId,
+	}).then(_list => {
+		list = _list;
+		os.api('users/show', {
+			userIds: list.userIds,
+		}).then(_users => {
+			users = _users;
+		});
+	});
+}
 
-	created() {
-		this.fetch();
-	},
+function addUser() {
+	os.selectUser().then(user => {
+		os.apiWithDialog('users/lists/push', {
+			listId: list.id,
+			userId: user.id,
+		}).then(() => {
+			users.push(user);
+		});
+	});
+}
 
-	methods: {
-		fetch() {
-			os.api('users/lists/show', {
-				listId: this.$route.params.list
-			}).then(list => {
-				this.list = list;
-				os.api('users/show', {
-					userIds: this.list.userIds
-				}).then(users => {
-					this.users = users;
-				});
-			});
-		},
+function removeUser(user) {
+	os.api('users/lists/pull', {
+		listId: list.id,
+		userId: user.id,
+	}).then(() => {
+		users = users.filter(x => x.id !== user.id);
+	});
+}
 
-		addUser() {
-			os.selectUser().then(user => {
-				os.apiWithDialog('users/lists/push', {
-					listId: this.list.id,
-					userId: user.id
-				}).then(() => {
-					this.users.push(user);
-				});
-			});
-		},
+async function renameList() {
+	const { canceled, result: name } = await os.inputText({
+		title: i18n.ts.enterListName,
+		default: list.name,
+	});
+	if (canceled) return;
 
-		removeUser(user) {
-			os.api('users/lists/pull', {
-				listId: this.list.id,
-				userId: user.id
-			}).then(() => {
-				this.users = this.users.filter(x => x.id !== user.id);
-			});
-		},
+	await os.api('users/lists/update', {
+		listId: list.id,
+		name: name,
+	});
 
-		async renameList() {
-			const { canceled, result: name } = await os.inputText({
-				title: this.$ts.enterListName,
-				default: this.list.name
-			});
-			if (canceled) return;
+	list.name = name;
+}
 
-			await os.api('users/lists/update', {
-				listId: this.list.id,
-				name: name
-			});
+async function deleteList() {
+	const { canceled } = await os.confirm({
+		type: 'warning',
+		text: i18n.t('removeAreYouSure', { x: list.name }),
+	});
+	if (canceled) return;
 
-			this.list.name = name;
-		},
+	await os.api('users/lists/delete', {
+		listId: list.id,
+	});
+	os.success();
+	mainRouter.push('/my/lists');
+}
 
-		async deleteList() {
-			const { canceled } = await os.confirm({
-				type: 'warning',
-				text: this.$t('removeAreYouSure', { x: this.list.name }),
-			});
-			if (canceled) return;
+watch(() => props.listId, fetchList, { immediate: true });
 
-			await os.api('users/lists/delete', {
-				listId: this.list.id
-			});
-			os.success();
-			this.$router.push('/my/lists');
-		}
-	}
-});
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata(computed(() => list ? {
+	title: list.name,
+	icon: 'fas fa-list-ul',
+	bg: 'var(--bg)',
+} : 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 cdeb54b88b..955fbbccfd 100644
--- a/packages/client/src/pages/not-found.vue
+++ b/packages/client/src/pages/not-found.vue
@@ -8,14 +8,16 @@
 </template>
 
 <script lang="ts" setup>
-import * as symbols from '@/symbols';
 import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
 
-defineExpose({
-	[symbols.PAGE_INFO]: {
-		title: i18n.ts.notFound,
-		icon: 'fas fa-exclamation-triangle',
-		bg: 'var(--bg)',
-	},
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.notFound,
+	icon: 'fas fa-exclamation-triangle',
+	bg: 'var(--bg)',
 });
 </script>
diff --git a/packages/client/src/pages/note.vue b/packages/client/src/pages/note.vue
index f0a18ecc36..852b821573 100644
--- a/packages/client/src/pages/note.vue
+++ b/packages/client/src/pages/note.vue
@@ -1,10 +1,11 @@
-<template>
-<MkSpacer :content-max="800">
+<template><MkStickyContainer>
+	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
+		<MkSpacer :content-max="800">
 	<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="next" :no-gap="true"/>
+					<XNotes class="_content" :pagination="nextPagination" :no-gap="true"/>
 				</div>
 
 				<div class="main _gap">
@@ -27,121 +28,112 @@
 				</div>
 
 				<div v-if="showPrev" class="_gap">
-					<XNotes class="_content" :pagination="prev" :no-gap="true"/>
+					<XNotes class="_content" :pagination="prevPagination" :no-gap="true"/>
 				</div>
 			</div>
 			<MkError v-else-if="error" @retry="fetch()"/>
 			<MkLoading v-else/>
 		</transition>
 	</div>
-</MkSpacer>
+</MkSpacer></MkStickyContainer>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent } from 'vue';
+<script lang="ts" setup>
+import { computed, defineComponent, watch } from 'vue';
+import * as misskey from 'misskey-js';
 import XNote from '@/components/note.vue';
 import XNoteDetailed from '@/components/note-detailed.vue';
 import XNotes from '@/components/notes.vue';
 import MkRemoteCaution from '@/components/remote-caution.vue';
 import MkButton from '@/components/ui/button.vue';
 import * as os from '@/os';
-import * as symbols from '@/symbols';
+import { definePageMetadata } from '@/scripts/page-metadata';
+import { i18n } from '@/i18n';
 
-export default defineComponent({
-	components: {
-		XNote,
-		XNoteDetailed,
-		XNotes,
-		MkRemoteCaution,
-		MkButton,
-	},
-	props: {
-		noteId: {
-			type: String,
-			required: true
-		}
-	},
-	data() {
-		return {
-			[symbols.PAGE_INFO]: computed(() => this.note ? {
-				title: this.$ts.note,
-				subtitle: new Date(this.note.createdAt).toLocaleString(),
-				avatar: this.note.user,
-				path: `/notes/${this.note.id}`,
-				share: {
-					title: this.$t('noteOf', { user: this.note.user.name }),
-					text: this.note.text,
-				},
-				bg: 'var(--bg)',
-			} : null),
-			note: null,
-			clips: null,
-			hasPrev: false,
-			hasNext: false,
-			showPrev: false,
-			showNext: false,
-			error: null,
-			prev: {
-				endpoint: 'users/notes' as const,
-				limit: 10,
-				params: computed(() => ({
-					userId: this.note.userId,
-					untilId: this.note.id,
-				})),
-			},
-			next: {
-				reversed: true,
-				endpoint: 'users/notes' as const,
-				limit: 10,
-				params: computed(() => ({
-					userId: this.note.userId,
-					sinceId: this.note.id,
-				})),
-			},
-		};
-	},
-	watch: {
-		noteId: 'fetch'
-	},
-	created() {
-		this.fetch();
-	},
-	methods: {
-		fetch() {
-			this.hasPrev = false;
-			this.hasNext = false;
-			this.showPrev = false;
-			this.showNext = false;
-			this.note = null;
-			os.api('notes/show', {
-				noteId: this.noteId
-			}).then(note => {
-				this.note = note;
-				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]) => {
-					this.clips = clips;
-					this.hasPrev = prev.length !== 0;
-					this.hasNext = next.length !== 0;
-				});
-			}).catch(err => {
-				this.error = err;
-			});
-		}
-	}
+const props = defineProps<{
+	noteId: string;
+}>();
+
+let note = $ref<null | misskey.entities.Note>();
+let clips = $ref();
+let hasPrev = $ref(false);
+let hasNext = $ref(false);
+let showPrev = $ref(false);
+let showNext = $ref(false);
+let error = $ref();
+
+const prevPagination = {
+	endpoint: 'users/notes' as const,
+	limit: 10,
+	params: computed(() => note ? ({
+		userId: note.userId,
+		untilId: note.id,
+	}) : null),
+};
+
+const nextPagination = {
+	reversed: true,
+	endpoint: 'users/notes' as const,
+	limit: 10,
+	params: computed(() => note ? ({
+		userId: note.userId,
+		sinceId: note.id,
+	}) : null),
+};
+
+function fetchNote() {
+	hasPrev = false;
+	hasNext = false;
+	showPrev = false;
+	showNext = false;
+	note = null;
+	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;
+		});
+	}).catch(err => {
+		error = err;
+	});
+}
+
+watch(() => props.noteId, fetchNote, {
+	immediate: true,
 });
+
+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,
+	},
+	bg: 'var(--bg)',
+} : null));
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/pages/notifications.vue b/packages/client/src/pages/notifications.vue
index 36e423e534..3d1014b3cd 100644
--- a/packages/client/src/pages/notifications.vue
+++ b/packages/client/src/pages/notifications.vue
@@ -1,18 +1,21 @@
 <template>
-<MkSpacer :content-max="800">
-	<div class="clupoqwt">
-		<XNotifications class="notifications" :include-types="includeTypes" :unread-only="tab === 'unread'"/>
-	</div>
-</MkSpacer>
+<MkStickyContainer>
+	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
+	<MkSpacer :content-max="800">
+		<div class="clupoqwt">
+			<XNotifications class="notifications" :include-types="includeTypes" :unread-only="tab === 'unread'"/>
+		</div>
+	</MkSpacer>
+</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
 import { computed } from 'vue';
+import { notificationTypes } from 'misskey-js';
 import XNotifications from '@/components/notifications.vue';
 import * as os from '@/os';
-import * as symbols from '@/symbols';
-import { notificationTypes } from 'misskey-js';
 import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
 
 let tab = $ref('all');
 let includeTypes = $ref<string[] | null>(null);
@@ -23,46 +26,46 @@ function setFilter(ev) {
 		active: includeTypes && includeTypes.includes(t),
 		action: () => {
 			includeTypes = [t];
-		}
+		},
 	}));
 	const items = includeTypes != null ? [{
 		icon: 'fas fa-times',
 		text: i18n.ts.clear,
 		action: () => {
 			includeTypes = null;
-		}
+		},
 	}, null, ...typeItems] : typeItems;
 	os.popupMenu(items, ev.currentTarget ?? ev.target);
 }
 
-defineExpose({
-	[symbols.PAGE_INFO]: computed(() => ({
-		title: i18n.ts.notifications,
-		icon: 'fas fa-bell',
-		bg: 'var(--bg)',
-		actions: [{
-			text: i18n.ts.filter,
-			icon: 'fas fa-filter',
-			highlighted: includeTypes != null,
-			handler: setFilter,
-		}, {
-			text: i18n.ts.markAllAsRead,
-			icon: 'fas fa-check',
-			handler: () => {
-				os.apiWithDialog('notifications/mark-all-as-read');
-			},
-		}],
-		tabs: [{
-			active: tab === 'all',
-			title: i18n.ts.all,
-			onClick: () => { tab = 'all'; },
-		}, {
-			active: tab === 'unread',
-			title: i18n.ts.unread,
-			onClick: () => { tab = 'unread'; },
-		},]
-	})),
-});
+const headerActions = $computed(() => [{
+	text: i18n.ts.filter,
+	icon: 'fas fa-filter',
+	highlighted: includeTypes != null,
+	handler: setFilter,
+}, {
+	text: i18n.ts.markAllAsRead,
+	icon: 'fas fa-check',
+	handler: () => {
+		os.apiWithDialog('notifications/mark-all-as-read');
+	},
+}]);
+
+const headerTabs = $computed(() => [{
+	active: tab === 'all',
+	title: i18n.ts.all,
+	onClick: () => { tab = 'all'; },
+}, {
+	active: tab === 'unread',
+	title: i18n.ts.unread,
+	onClick: () => { tab = 'unread'; },
+}]);
+
+definePageMetadata(computed(() => ({
+	title: i18n.ts.notifications,
+	icon: 'fas fa-bell',
+	bg: 'var(--bg)',
+})));
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/pages/page-editor/page-editor.vue b/packages/client/src/pages/page-editor/page-editor.vue
index 9566592618..97c278e5e8 100644
--- a/packages/client/src/pages/page-editor/page-editor.vue
+++ b/packages/client/src/pages/page-editor/page-editor.vue
@@ -1,5 +1,6 @@
-<template>
-<MkSpacer :content-max="700">
+<template><MkStickyContainer>
+	<template #header><MkPageHeader :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="fas fa-external-link-square-alt"></i> {{ $ts._pages.viewPage }}</MkButton>
 		<MkButton v-if="!readonly" inline primary class="button" @click="save"><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
@@ -55,7 +56,7 @@
 			<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
-						:modelValue="element"
+						:model-value="element"
 						:removable="true"
 						:hpml="hpml"
 						:name="element.name"
@@ -75,11 +76,11 @@
 			<MkTextarea v-model="script" class="_code"/>
 		</div>
 	</div>
-</MkSpacer>
+</MkSpacer></MkStickyContainer>
 </template>
 
-<script lang="ts">
-import { defineComponent, defineAsyncComponent, computed } from 'vue';
+<script lang="ts" setup>
+import { defineComponent, defineAsyncComponent, computed, provide, watch } from 'vue';
 import 'prismjs';
 import { highlight, languages } from 'prismjs/components/prism-core';
 import 'prismjs/components/prism-clike';
@@ -101,367 +102,349 @@ import { url } from '@/config';
 import { collectPageVars } from '@/scripts/collect-page-vars';
 import * as os from '@/os';
 import { selectFile } from '@/scripts/select-file';
-import * as symbols from '@/symbols';
+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));
 
-export default defineComponent({
-	components: {
-		XDraggable: defineAsyncComponent(() => import('vuedraggable').then(x => x.default)),
-		XVariable, XBlocks, MkTextarea, MkContainer, MkButton, MkSelect, MkSwitch, MkInput,
-	},
+const props = defineProps<{
+	initPageId?: string;
+	initPageName?: string;
+	initUser?: string;
+}>();
 
-	provide() {
-		return {
-			readonly: this.readonly,
-			getScriptBlockList: this.getScriptBlockList,
-			getPageBlockList: this.getPageBlockList
-		};
-	},
+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 summary = $ref(null);
+let name = $ref(Date.now().toString());
+let eyeCatchingImage = $ref(null);
+let eyeCatchingImageId = $ref(null);
+let font = $ref('sans-serif');
+let content = $ref([]);
+let alignCenter = $ref(false);
+let hideTitleWhenPinned = $ref(false);
+let variables = $ref([]);
+let hpml = $ref(null);
+let script = $ref('');
 
-	props: {
-		initPageId: {
-			type: String,
-			required: false
-		},
-		initPageName: {
-			type: String,
-			required: false
-		},
-		initUser: {
-			type: String,
-			required: false
-		},
-	},
+provide('readonly', readonly);
+provide('getScriptBlockList', getScriptBlockList);
+provide('getPageBlockList', getPageBlockList);
 
-	data() {
-		return {
-			[symbols.PAGE_INFO]: computed(() => {
-				let title = this.$ts._pages.newPage;
-				if (this.initPageId) {
-					title = this.$ts._pages.editPage;
-				}
-				else if (this.initPageName && this.initUser) {
-					title = this.$ts._pages.readPage;
-				}
-				return {
-					title: title,
-					icon: 'fas fa-pencil-alt',
-					bg: 'var(--bg)',
-					tabs: [{
-						active: this.tab === 'settings',
-						title: this.$ts._pages.pageSetting,
-						icon: 'fas fa-cog',
-						onClick: () => { this.tab = 'settings'; },
-					}, {
-						active: this.tab === 'contents',
-						title: this.$ts._pages.contents,
-						icon: 'fas fa-sticky-note',
-						onClick: () => { this.tab = 'contents'; },
-					}, {
-						active: this.tab === 'variables',
-						title: this.$ts._pages.variables,
-						icon: 'fas fa-magic',
-						onClick: () => { this.tab = 'variables'; },
-					}, {
-						active: this.tab === 'script',
-						title: this.$ts.script,
-						icon: 'fas fa-code',
-						onClick: () => { this.tab = 'script'; },
-					}],
-				};
-			}),
-			tab: 'settings',
-			author: this.$i,
-			readonly: false,
-			page: null,
-			pageId: null,
-			currentName: null,
-			title: '',
-			summary: null,
-			name: Date.now().toString(),
-			eyeCatchingImage: null,
-			eyeCatchingImageId: null,
-			font: 'sans-serif',
-			content: [],
-			alignCenter: false,
-			hideTitleWhenPinned: false,
-			variables: [],
-			hpml: null,
-			script: '',
-			url,
-		};
-	},
-
-	watch: {
-		async eyeCatchingImageId() {
-			if (this.eyeCatchingImageId == null) {
-				this.eyeCatchingImage = null;
-			} else {
-				this.eyeCatchingImage = await os.api('drive/files/show', {
-					fileId: this.eyeCatchingImageId,
-				});
-			}
-		},
-	},
-
-	async created() {
-		this.hpml = new HpmlTypeChecker();
-
-		this.$watch('variables', () => {
-			this.hpml.variables = this.variables;
-		}, { deep: true });
-
-		this.$watch('content', () => {
-			this.hpml.pageVars = collectPageVars(this.content);
-		}, { deep: true });
-
-		if (this.initPageId) {
-			this.page = await os.api('pages/show', {
-				pageId: this.initPageId,
-			});
-		} else if (this.initPageName && this.initUser) {
-			this.page = await os.api('pages/show', {
-				name: this.initPageName,
-				username: this.initUser,
-			});
-			this.readonly = true;
-		}
-
-		if (this.page) {
-			this.author = this.page.user;
-			this.pageId = this.page.id;
-			this.title = this.page.title;
-			this.name = this.page.name;
-			this.currentName = this.page.name;
-			this.summary = this.page.summary;
-			this.font = this.page.font;
-			this.script = this.page.script;
-			this.hideTitleWhenPinned = this.page.hideTitleWhenPinned;
-			this.alignCenter = this.page.alignCenter;
-			this.content = this.page.content;
-			this.variables = this.page.variables;
-			this.eyeCatchingImageId = this.page.eyeCatchingImageId;
-		} else {
-			const id = uuid();
-			this.content = [{
-				id,
-				type: 'text',
-				text: 'Hello World!'
-			}];
-		}
-	},
-
-	methods: {
-		getSaveOptions() {
-			return {
-				title: this.title.trim(),
-				name: this.name.trim(),
-				summary: this.summary,
-				font: this.font,
-				script: this.script,
-				hideTitleWhenPinned: this.hideTitleWhenPinned,
-				alignCenter: this.alignCenter,
-				content: this.content,
-				variables: this.variables,
-				eyeCatchingImageId: this.eyeCatchingImageId,
-			};
-		},
-
-		save() {
-			const options = this.getSaveOptions();
-
-			const onError = err => {
-				if (err.id == '3d81ceae-475f-4600-b2a8-2bc116157532') {
-					if (err.info.param == 'name') {
-						os.alert({
-							type: 'error',
-							title: this.$ts._pages.invalidNameTitle,
-							text: this.$ts._pages.invalidNameText
-						});
-					}
-				} else if (err.code == 'NAME_ALREADY_EXISTS') {
-					os.alert({
-						type: 'error',
-						text: this.$ts._pages.nameAlreadyExists
-					});
-				}
-			};
-
-			if (this.pageId) {
-				options.pageId = this.pageId;
-				os.api('pages/update', options)
-				.then(page => {
-					this.currentName = this.name.trim();
-					os.alert({
-						type: 'success',
-						text: this.$ts._pages.updated
-					});
-				}).catch(onError);
-			} else {
-				os.api('pages/create', options)
-				.then(page => {
-					this.pageId = page.id;
-					this.currentName = this.name.trim();
-					os.alert({
-						type: 'success',
-						text: this.$ts._pages.created
-					});
-					this.$router.push(`/pages/edit/${this.pageId}`);
-				}).catch(onError);
-			}
-		},
-
-		del() {
-			os.confirm({
-				type: 'warning',
-				text: this.$t('removeAreYouSure', { x: this.title.trim() }),
-			}).then(({ canceled }) => {
-				if (canceled) return;
-				os.api('pages/delete', {
-					pageId: this.pageId,
-				}).then(() => {
-					os.alert({
-						type: 'success',
-						text: this.$ts._pages.deleted
-					});
-					this.$router.push(`/pages`);
-				});
-			});
-		},
-
-		duplicate() {
-			this.title = this.title + ' - copy';
-			this.name = this.name + '-copy';
-			os.api('pages/create', this.getSaveOptions()).then(page => {
-				this.pageId = page.id;
-				this.currentName = this.name.trim();
-				os.alert({
-					type: 'success',
-					text: this.$ts._pages.created
-				});
-				this.$router.push(`/pages/edit/${this.pageId}`);
-			});
-		},
-
-		async add() {
-			const { canceled, result: type } = await os.select({
-				type: null,
-				title: this.$ts._pages.chooseBlock,
-				groupedItems: this.getPageBlockList()
-			});
-			if (canceled) return;
-
-			const id = uuid();
-			this.content.push({ id, type });
-		},
-
-		async addVariable() {
-			let { canceled, result: name } = await os.inputText({
-				title: this.$ts._pages.enterVariableName,
-			});
-			if (canceled) return;
-
-			name = name.trim();
-
-			if (this.hpml.isUsedName(name)) {
-				os.alert({
-					type: 'error',
-					text: this.$ts._pages.variableNameIsAlreadyUsed
-				});
-				return;
-			}
-
-			const id = uuid();
-			this.variables.push({ id, name, type: null });
-		},
-
-		removeVariable(v) {
-			this.variables = this.variables.filter(x => x.name !== v.name);
-		},
-
-		getPageBlockList() {
-			return [{
-				label: this.$ts._pages.contentBlocks,
-				items: [
-					{ value: 'section', text: this.$ts._pages.blocks.section },
-					{ value: 'text', text: this.$ts._pages.blocks.text },
-					{ value: 'image', text: this.$ts._pages.blocks.image },
-					{ value: 'textarea', text: this.$ts._pages.blocks.textarea },
-					{ value: 'note', text: this.$ts._pages.blocks.note },
-					{ value: 'canvas', text: this.$ts._pages.blocks.canvas },
-				]
-			}, {
-				label: this.$ts._pages.inputBlocks,
-				items: [
-					{ value: 'button', text: this.$ts._pages.blocks.button },
-					{ value: 'radioButton', text: this.$ts._pages.blocks.radioButton },
-					{ value: 'textInput', text: this.$ts._pages.blocks.textInput },
-					{ value: 'textareaInput', text: this.$ts._pages.blocks.textareaInput },
-					{ value: 'numberInput', text: this.$ts._pages.blocks.numberInput },
-					{ value: 'switch', text: this.$ts._pages.blocks.switch },
-					{ value: 'counter', text: this.$ts._pages.blocks.counter }
-				]
-			}, {
-				label: this.$ts._pages.specialBlocks,
-				items: [
-					{ value: 'if', text: this.$ts._pages.blocks.if },
-					{ value: 'post', text: this.$ts._pages.blocks.post }
-				]
-			}];
-		},
-
-		getScriptBlockList(type: string = null) {
-			const list = [];
-
-			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);
-				if (category) {
-					category.items.push({
-						value: block.type,
-						text: this.$t(`_pages.script.blocks.${block.type}`)
-					});
-				} else {
-					list.push({
-						category: block.category,
-						label: this.$t(`_pages.script.categories.${block.category}`),
-						items: [{
-							value: block.type,
-							text: this.$t(`_pages.script.blocks.${block.type}`)
-						}]
-					});
-				}
-			}
-
-			const userFns = this.variables.filter(x => x.type === 'fn');
-			if (userFns.length > 0) {
-				list.unshift({
-					label: this.$t(`_pages.script.categories.fn`),
-					items: userFns.map(v => ({
-						value: 'fn:' + v.name,
-						text: v.name
-					}))
-				});
-			}
-
-			return list;
-		},
-
-		setEyeCatchingImage(e) {
-			selectFile(e.currentTarget ?? e.target, null).then(file => {
-				this.eyeCatchingImageId = file.id;
-			});
-		},
-
-		removeEyeCatchingImage() {
-			this.eyeCatchingImageId = null;
-		},
-
-		highlighter(code) {
-			return highlight(code, languages.js, 'javascript');
-		},
+watch($$(eyeCatchingImageId), async () => {
+	if (eyeCatchingImageId == null) {
+		eyeCatchingImage = null;
+	} else {
+		eyeCatchingImage = await os.api('drive/files/show', {
+			fileId: eyeCatchingImageId,
+		});
 	}
 });
+
+function getSaveOptions() {
+	return {
+		title: tatitle.trim(),
+		name: taname.trim(),
+		summary: tasummary,
+		font: tafont,
+		script: tascript,
+		hideTitleWhenPinned: tahideTitleWhenPinned,
+		alignCenter: taalignCenter,
+		content: tacontent,
+		variables: tavariables,
+		eyeCatchingImageId: taeyeCatchingImageId,
+	};
+}
+
+function save() {
+	const options = tagetSaveOptions();
+
+	const onError = err => {
+		if (err.id == '3d81ceae-475f-4600-b2a8-2bc116157532') {
+			if (err.info.param == 'name') {
+				os.alert({
+					type: 'error',
+					title: i18n.ts._pages.invalidNameTitle,
+					text: i18n.ts._pages.invalidNameText,
+				});
+			}
+		} else if (err.code == 'NAME_ALREADY_EXISTS') {
+			os.alert({
+				type: 'error',
+				text: i18n.ts._pages.nameAlreadyExists,
+			});
+		}
+	};
+
+	if (tapageId) {
+		options.pageId = tapageId;
+		os.api('pages/update', options)
+		.then(page => {
+			tacurrentName = taname.trim();
+			os.alert({
+				type: 'success',
+				text: i18n.ts._pages.updated,
+			});
+		}).catch(onError);
+	} else {
+		os.api('pages/create', options)
+		.then(created => {
+			tapageId = created.id;
+			tacurrentName = 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() }),
+	}).then(({ canceled }) => {
+		if (canceled) return;
+		os.api('pages/delete', {
+			pageId: pageId,
+		}).then(() => {
+			os.alert({
+				type: 'success',
+				text: i18n.ts._pages.deleted,
+			});
+			mainRouter.push('/pages');
+		});
+	});
+}
+
+function duplicate() {
+	tatitle = tatitle + ' - copy';
+	taname = taname + '-copy';
+	os.api('pages/create', tagetSaveOptions()).then(created => {
+		tapageId = created.id;
+		tacurrentName = taname.trim();
+		os.alert({
+			type: 'success',
+			text: i18n.ts._pages.created,
+		});
+		mainRouter.push(`/pages/edit/${pageId}`);
+	});
+}
+
+async function add() {
+	const { canceled, result: type } = await os.select({
+		type: null,
+		title: i18n.ts._pages.chooseBlock,
+		groupedItems: tagetPageBlockList(),
+	});
+	if (canceled) return;
+
+	const id = uuid();
+	tacontent.push({ id, type });
+}
+
+async function addVariable() {
+	let { canceled, result: name } = await os.inputText({
+		title: i18n.ts._pages.enterVariableName,
+	});
+	if (canceled) return;
+
+	name = name.trim();
+
+	if (tahpml.isUsedName(name)) {
+		os.alert({
+			type: 'error',
+			text: i18n.ts._pages.variableNameIsAlreadyUsed,
+		});
+		return;
+	}
+
+	const id = uuid();
+	tavariables.push({ id, name, type: null });
+}
+
+function removeVariable(v) {
+	tavariables = tavariables.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 },
+		],
+	}];
+}
+
+function getScriptBlockList(type: string = null) {
+	const list = [];
+
+	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);
+		if (category) {
+			category.items.push({
+				value: block.type,
+				text: i18n.t(`_pages.script.blocks.${block.type}`),
+			});
+		} else {
+			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}`),
+				}],
+			});
+		}
+	}
+
+	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,
+				text: v.name,
+			})),
+		});
+	}
+
+	return list;
+}
+
+function setEyeCatchingImage(e) {
+	selectFile(e.currentTarget ?? e.target, null).then(file => {
+		eyeCatchingImageId = file.id;
+	});
+}
+
+function removeEyeCatchingImage() {
+	taeyeCatchingImageId = null;
+}
+
+function highlighter(code) {
+	return highlight(code, languages.js, 'javascript');
+}
+
+async function init() {
+	hpml = new HpmlTypeChecker();
+
+	watch($$(variables), () => {
+		hpml.variables = variables;
+	}, { deep: true });
+
+	watch($$(content), () => {
+		hpml.pageVars = collectPageVars(content);
+	}, { deep: true });
+
+	if (props.initPageId) {
+		page = await os.api('pages/show', {
+			pageId: props.initPageId,
+		});
+	} else if (props.initPageName && props.initUser) {
+		page = await os.api('pages/show', {
+			name: props.initPageName,
+			username: props.initUser,
+		});
+		readonly = true;
+	}
+
+	if (page) {
+		author = page.user;
+		pageId = page.id;
+		title = page.title;
+		name = page.name;
+		currentName = page.name;
+		summary = page.summary;
+		font = page.font;
+		script = page.script;
+		hideTitleWhenPinned = page.hideTitleWhenPinned;
+		alignCenter = page.alignCenter;
+		content = page.content;
+		variables = page.variables;
+		eyeCatchingImageId = page.eyeCatchingImageId;
+	} else {
+		const id = uuid();
+		content = [{
+			id,
+			type: 'text',
+			text: 'Hello World!',
+		}];
+	}
+}
+
+init();
+
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+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: 'fas fa-pencil-alt',
+		bg: 'var(--bg)',
+		tabs: [{
+			active: tab === 'settings',
+			title: i18n.ts._pages.pageSetting,
+			icon: 'fas fa-cog',
+			onClick: () => { tab = 'settings'; },
+		}, {
+			active: tab === 'contents',
+			title: i18n.ts._pages.contents,
+			icon: 'fas fa-sticky-note',
+			onClick: () => { tab = 'contents'; },
+		}, {
+			active: tab === 'variables',
+			title: i18n.ts._pages.variables,
+			icon: 'fas fa-magic',
+			onClick: () => { tab = 'variables'; },
+		}, {
+			active: tab === 'script',
+			title: i18n.ts.script,
+			icon: 'fas fa-code',
+			onClick: () => { tab = 'script'; },
+		}],
+	};
+}));
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/pages/page.vue b/packages/client/src/pages/page.vue
index 5bca971438..71b404bbf4 100644
--- a/packages/client/src/pages/page.vue
+++ b/packages/client/src/pages/page.vue
@@ -1,5 +1,6 @@
-<template>
-<MkSpacer :content-max="700">
+<template><MkStickyContainer>
+	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
+		<MkSpacer :content-max="700">
 	<transition :name="$store.state.animation ? 'fade' : ''" mode="out-in">
 		<div v-if="page" :key="page.id" v-size="{ max: [450] }" class="xcukqgmh">
 			<div class="_block main">
@@ -56,138 +57,108 @@
 		<MkError v-else-if="error" @retry="fetch()"/>
 		<MkLoading v-else/>
 	</transition>
-</MkSpacer>
+</MkSpacer></MkStickyContainer>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent } from 'vue';
+<script lang="ts" setup>
+import { computed, watch } from 'vue';
 import XPage from '@/components/page/page.vue';
 import MkButton from '@/components/ui/button.vue';
 import * as os from '@/os';
-import * as symbols from '@/symbols';
 import { url } from '@/config';
 import MkFollowButton from '@/components/follow-button.vue';
 import MkContainer from '@/components/ui/container.vue';
 import MkPagination from '@/components/ui/pagination.vue';
 import MkPagePreview from '@/components/page-preview.vue';
+import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
 
-export default defineComponent({
-	components: {
-		XPage,
-		MkButton,
-		MkFollowButton,
-		MkContainer,
-		MkPagination,
-		MkPagePreview,
+const props = defineProps<{
+	pageName: string;
+	username: string;
+}>();
+
+let page = $ref(null);
+let error = $ref(null);
+const otherPostsPagination = {
+	endpoint: 'users/pages' as const,
+	limit: 6,
+	params: computed(() => ({
+		userId: page.user.id,
+	})),
+};
+const path = $computed(() => props.username + '/' + props.pageName);
+
+function fetchPage() {
+	page = null;
+	os.api('pages/show', {
+		name: props.pageName,
+		username: props.username,
+	}).then(_page => {
+		page = _page;
+	}).catch(err => {
+		error = err;
+	});
+}
+
+function share() {
+	navigator.share({
+		title: page.title ?? page.name,
+		text: page.summary,
+		url: `${url}/@${page.user.username}/pages/${page.name}`,
+	});
+}
+
+function shareWithNote() {
+	os.post({
+		initialText: `${page.title || page.name} ${url}/@${page.user.username}/pages/${page.name}`,
+	});
+}
+
+function like() {
+	os.apiWithDialog('pages/like', {
+		pageId: page.id,
+	}).then(() => {
+		page.isLiked = true;
+		page.likedCount++;
+	});
+}
+
+async function unlike() {
+	const confirm = await os.confirm({
+		type: 'warning',
+		text: i18n.ts.unlikeConfirm,
+	});
+	if (confirm.canceled) return;
+	os.apiWithDialog('pages/unlike', {
+		pageId: page.id,
+	}).then(() => {
+		page.isLiked = false;
+		page.likedCount--;
+	});
+}
+
+function pin(pin) {
+	os.apiWithDialog('i/update', {
+		pinnedPageId: pin ? page.id : null,
+	});
+}
+
+watch(() => path, fetchPage, { immediate: true });
+
+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,
 	},
-
-	props: {
-		pageName: {
-			type: String,
-			required: true
-		},
-		username: {
-			type: String,
-			required: true
-		},
-	},
-
-	data() {
-		return {
-			[symbols.PAGE_INFO]: computed(() => this.page ? {
-				title: computed(() => this.page.title || this.page.name),
-				avatar: this.page.user,
-				path: `/@${this.page.user.username}/pages/${this.page.name}`,
-				share: {
-					title: this.page.title || this.page.name,
-					text: this.page.summary,
-				},
-			} : null),
-			page: null,
-			error: null,
-			otherPostsPagination: {
-				endpoint: 'users/pages' as const,
-				limit: 6,
-				params: computed(() => ({
-					userId: this.page.user.id
-				})),
-			},
-		};
-	},
-
-	computed: {
-		path(): string {
-			return this.username + '/' + this.pageName;
-		}
-	},
-
-	watch: {
-		path() {
-			this.fetch();
-		}
-	},
-
-	created() {
-		this.fetch();
-	},
-
-	methods: {
-		fetch() {
-			this.page = null;
-			os.api('pages/show', {
-				name: this.pageName,
-				username: this.username,
-			}).then(page => {
-				this.page = page;
-			}).catch(err => {
-				this.error = err;
-			});
-		},
-
-		share() {
-			navigator.share({
-				title: this.page.title || this.page.name,
-				text: this.page.summary,
-				url: `${url}/@${this.page.user.username}/pages/${this.page.name}`
-			});
-		},
-
-		shareWithNote() {
-			os.post({
-				initialText: `${this.page.title || this.page.name} ${url}/@${this.page.user.username}/pages/${this.page.name}`
-			});
-		},
-
-		like() {
-			os.apiWithDialog('pages/like', {
-				pageId: this.page.id,
-			}).then(() => {
-				this.page.isLiked = true;
-				this.page.likedCount++;
-			});
-		},
-
-		async unlike() {
-			const confirm = await os.confirm({
-				type: 'warning',
-				text: this.$ts.unlikeConfirm,
-			});
-			if (confirm.canceled) return;
-			os.apiWithDialog('pages/unlike', {
-				pageId: this.page.id,
-			}).then(() => {
-				this.page.isLiked = false;
-				this.page.likedCount--;
-			});
-		},
-
-		pin(pin) {
-			os.apiWithDialog('i/update', {
-				pinnedPageId: pin ? this.page.id : null,
-			});
-		}
-	}
-});
+} : null));
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/pages/pages.vue b/packages/client/src/pages/pages.vue
index dcccf7f7c4..541c968ff4 100644
--- a/packages/client/src/pages/pages.vue
+++ b/packages/client/src/pages/pages.vue
@@ -1,86 +1,87 @@
 <template>
-<MkSpacer :content-max="700">
-	<div v-if="tab === 'featured'" class="rknalgpo">
-		<MkPagination v-slot="{items}" :pagination="featuredPagesPagination">
-			<MkPagePreview v-for="page in items" :key="page.id" class="ckltabjg" :page="page"/>
-		</MkPagination>
-	</div>
+<MkStickyContainer>
+	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
+	<MkSpacer :content-max="700">
+		<div v-if="tab === 'featured'" class="rknalgpo">
+			<MkPagination v-slot="{items}" :pagination="featuredPagesPagination">
+				<MkPagePreview v-for="page in items" :key="page.id" class="ckltabjg" :page="page"/>
+			</MkPagination>
+		</div>
 
-	<div v-else-if="tab === 'my'" class="rknalgpo my">
-		<MkButton class="new" @click="create()"><i class="fas fa-plus"></i></MkButton>
-		<MkPagination v-slot="{items}" :pagination="myPagesPagination">
-			<MkPagePreview v-for="page in items" :key="page.id" class="ckltabjg" :page="page"/>
-		</MkPagination>
-	</div>
+		<div v-else-if="tab === 'my'" class="rknalgpo my">
+			<MkButton class="new" @click="create()"><i class="fas fa-plus"></i></MkButton>
+			<MkPagination v-slot="{items}" :pagination="myPagesPagination">
+				<MkPagePreview v-for="page in items" :key="page.id" class="ckltabjg" :page="page"/>
+			</MkPagination>
+		</div>
 
-	<div v-else-if="tab === 'liked'" class="rknalgpo">
-		<MkPagination v-slot="{items}" :pagination="likedPagesPagination">
-			<MkPagePreview v-for="like in items" :key="like.page.id" class="ckltabjg" :page="like.page"/>
-		</MkPagination>
-	</div>
-</MkSpacer>
+		<div v-else-if="tab === 'liked'" class="rknalgpo">
+			<MkPagination v-slot="{items}" :pagination="likedPagesPagination">
+				<MkPagePreview v-for="like in items" :key="like.page.id" class="ckltabjg" :page="like.page"/>
+			</MkPagination>
+		</div>
+	</MkSpacer>
+</MkStickyContainer>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent } from 'vue';
+<script lang="ts" setup>
+import { computed, inject } from 'vue';
 import MkPagePreview from '@/components/page-preview.vue';
 import MkPagination from '@/components/ui/pagination.vue';
 import MkButton from '@/components/ui/button.vue';
-import * as symbols from '@/symbols';
+import { useRouter } from '@/router';
+import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
 
-export default defineComponent({
-	components: {
-		MkPagePreview, MkPagination, MkButton
-	},
-	data() {
-		return {
-			[symbols.PAGE_INFO]: computed(() => ({
-				title: this.$ts.pages,
-				icon: 'fas fa-sticky-note',
-				bg: 'var(--bg)',
-				actions: [{
-					icon: 'fas fa-plus',
-					text: this.$ts.create,
-					handler: this.create,
-				}],
-				tabs: [{
-					active: this.tab === 'featured',
-					title: this.$ts._pages.featured,
-					icon: 'fas fa-fire-alt',
-					onClick: () => { this.tab = 'featured'; },
-				}, {
-					active: this.tab === 'my',
-					title: this.$ts._pages.my,
-					icon: 'fas fa-edit',
-					onClick: () => { this.tab = 'my'; },
-				}, {
-					active: this.tab === 'liked',
-					title: this.$ts._pages.liked,
-					icon: 'fas fa-heart',
-					onClick: () => { this.tab = 'liked'; },
-				},]
-			})),
-			tab: 'featured',
-			featuredPagesPagination: {
-				endpoint: 'pages/featured' as const,
-				noPaging: true,
-			},
-			myPagesPagination: {
-				endpoint: 'i/pages' as const,
-				limit: 5,
-			},
-			likedPagesPagination: {
-				endpoint: 'i/page-likes' as const,
-				limit: 5,
-			},
-		};
-	},
-	methods: {
-		create() {
-			this.$router.push(`/pages/new`);
-		}
-	}
-});
+const router = useRouter();
+
+let tab = $ref('featured');
+
+const featuredPagesPagination = {
+	endpoint: 'pages/featured' as const,
+	noPaging: true,
+};
+const myPagesPagination = {
+	endpoint: 'i/pages' as const,
+	limit: 5,
+};
+const likedPagesPagination = {
+	endpoint: 'i/page-likes' as const,
+	limit: 5,
+};
+
+function create() {
+	router.push('/pages/new');
+}
+
+const headerActions = $computed(() => [{
+	icon: 'fas fa-plus',
+	text: i18n.ts.create,
+	handler: create,
+}]);
+
+const headerTabs = $computed(() => [{
+	active: tab === 'featured',
+	title: i18n.ts._pages.featured,
+	icon: 'fas fa-fire-alt',
+	onClick: () => { tab = 'featured'; },
+}, {
+	active: tab === 'my',
+	title: i18n.ts._pages.my,
+	icon: 'fas fa-edit',
+	onClick: () => { tab = 'my'; },
+}, {
+	active: tab === 'liked',
+	title: i18n.ts._pages.liked,
+	icon: 'fas fa-heart',
+	onClick: () => { tab = 'liked'; },
+}]);
+
+definePageMetadata(computed(() => ({
+	title: i18n.ts.pages,
+	icon: 'fas fa-sticky-note',
+	bg: 'var(--bg)',
+})));
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/pages/preview.vue b/packages/client/src/pages/preview.vue
index 4accac4192..cba7589a38 100644
--- a/packages/client/src/pages/preview.vue
+++ b/packages/client/src/pages/preview.vue
@@ -7,16 +7,18 @@
 <script lang="ts" setup>
 import { computed } from 'vue';
 import MkSample from '@/components/sample.vue';
-import * as symbols from '@/symbols';
 import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
 
-defineExpose({
-	[symbols.PAGE_INFO]: computed(() => ({
-		title: i18n.ts.preview,
-		icon: 'fas fa-eye',
-		bg: 'var(--bg)',
-	})),
-});
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata(computed(() => ({
+	title: i18n.ts.preview,
+	icon: 'fas fa-eye',
+	bg: 'var(--bg)',
+})));
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/pages/reset-password.vue b/packages/client/src/pages/reset-password.vue
index b3e2ca8d6f..39a1191caf 100644
--- a/packages/client/src/pages/reset-password.vue
+++ b/packages/client/src/pages/reset-password.vue
@@ -1,14 +1,17 @@
 <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="fas fa-lock"></i></template>
-			<template #label>{{ i18n.ts.newPassword }}</template>
-		</FormInput>
+<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="fas fa-lock"></i></template>
+				<template #label>{{ i18n.ts.newPassword }}</template>
+			</FormInput>
 		
-		<FormButton primary class="_formBlock" @click="save">{{ i18n.ts.save }}</FormButton>
-	</div>
-</MkSpacer>
+			<FormButton primary class="_formBlock" @click="save">{{ i18n.ts.save }}</FormButton>
+		</div>
+	</MkSpacer>
+</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
@@ -16,9 +19,9 @@ import { defineAsyncComponent, onMounted } from 'vue';
 import FormInput from '@/components/form/input.vue';
 import FormButton from '@/components/ui/button.vue';
 import * as os from '@/os';
-import * as symbols from '@/symbols';
 import { i18n } from '@/i18n';
-import { router } from '@/router';
+import { mainRouter } from '@/router';
+import { definePageMetadata } from '@/scripts/page-metadata';
 
 const props = defineProps<{
 	token?: string;
@@ -31,22 +34,24 @@ async function save() {
 		token: props.token,
 		password: password,
 	});
-	router.push('/');
+	mainRouter.push('/');
 }
 
 onMounted(() => {
 	if (props.token == null) {
 		os.popup(defineAsyncComponent(() => import('@/components/forgot-password.vue')), {}, {}, 'closed');
-		router.push('/');
+		mainRouter.push('/');
 	}
 });
 
-defineExpose({
-	[symbols.PAGE_INFO]: {
-		title: i18n.ts.resetPassword,
-		icon: 'fas fa-lock',
-		bg: 'var(--bg)',
-	},
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.resetPassword,
+	icon: 'fas fa-lock',
+	bg: 'var(--bg)',
 });
 </script>
 
diff --git a/packages/client/src/pages/scratchpad.vue b/packages/client/src/pages/scratchpad.vue
index 34a41b81a5..d437601475 100644
--- a/packages/client/src/pages/scratchpad.vue
+++ b/packages/client/src/pages/scratchpad.vue
@@ -19,7 +19,7 @@
 </template>
 
 <script lang="ts" setup>
-import { defineExpose, ref, watch } from 'vue';
+import { ref, watch } from 'vue';
 import 'prismjs';
 import { highlight, languages } from 'prismjs/components/prism-core';
 import 'prismjs/components/prism-clike';
@@ -32,9 +32,9 @@ import MkContainer from '@/components/ui/container.vue';
 import MkButton from '@/components/ui/button.vue';
 import { createAiScriptEnv } from '@/scripts/aiscript/api';
 import * as os from '@/os';
-import * as symbols from '@/symbols';
 import { $i } from '@/account';
 import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
 
 const code = ref('');
 const logs = ref<any[]>([]);
@@ -67,7 +67,7 @@ async function run() {
 			logs.value.push({
 				id: Math.random(),
 				text: value.type === 'str' ? value.value : utils.valToString(value),
-				print: true
+				print: true,
 			});
 		},
 		log: (type, params) => {
@@ -75,11 +75,11 @@ async function run() {
 				case 'end': logs.value.push({
 					id: Math.random(),
 					text: utils.valToString(params.val, true),
-					print: false
+					print: false,
 				}); break;
 				default: break;
 			}
-		}
+		},
 	});
 
 	let ast;
@@ -88,7 +88,7 @@ async function run() {
 	} catch (error) {
 		os.alert({
 			type: 'error',
-			text: 'Syntax error :('
+			text: 'Syntax error :(',
 		});
 		return;
 	}
@@ -97,7 +97,7 @@ async function run() {
 	} catch (error: any) {
 		os.alert({
 			type: 'error',
-			text: error.message
+			text: error.message,
 		});
 	}
 }
@@ -106,11 +106,13 @@ function highlighter(code) {
 	return highlight(code, languages.js, 'javascript');
 }
 
-defineExpose({
-	[symbols.PAGE_INFO]: {
-		title: i18n.ts.scratchpad,
-		icon: 'fas fa-terminal',
-	},
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.scratchpad,
+	icon: 'fas fa-terminal',
 });
 </script>
 
diff --git a/packages/client/src/pages/search.vue b/packages/client/src/pages/search.vue
index ce2b7035da..25fef7af50 100644
--- a/packages/client/src/pages/search.vue
+++ b/packages/client/src/pages/search.vue
@@ -1,16 +1,17 @@
 <template>
-<div class="_section">
-	<div class="_content">
+<MkStickyContainer>
+	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
+	<MkSpacer :content-max="800">
 		<XNotes ref="notes" :pagination="pagination"/>
-	</div>
-</div>
+	</MkSpacer>
+</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
 import { computed } from 'vue';
 import XNotes from '@/components/notes.vue';
-import * as symbols from '@/symbols';
 import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
 
 const props = defineProps<{
 	query: string;
@@ -23,14 +24,16 @@ const pagination = {
 	params: computed(() => ({
 		query: props.query,
 		channelId: props.channel,
-	}))
+	})),
 };
 
-defineExpose({
-	[symbols.PAGE_INFO]: computed(() => ({
-		title: i18n.t('searchWith', { q: props.query }),
-		icon: 'fas fa-search',
-		bg: 'var(--bg)',
-	})),
-});
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata(computed(() => ({
+	title: i18n.t('searchWith', { q: props.query }),
+	icon: 'fas fa-search',
+	bg: 'var(--bg)',
+})));
 </script>
diff --git a/packages/client/src/pages/settings/account-info.vue b/packages/client/src/pages/settings/account-info.vue
index 12142b4dc1..65b6233693 100644
--- a/packages/client/src/pages/settings/account-info.vue
+++ b/packages/client/src/pages/settings/account-info.vue
@@ -127,30 +127,32 @@
 </template>
 
 <script lang="ts" setup>
-import { defineExpose, onMounted, ref } from 'vue';
+import { onMounted, ref } from 'vue';
 import FormSection from '@/components/form/section.vue';
 import MkKeyValue from '@/components/key-value.vue';
 import * as os from '@/os';
 import number from '@/filters/number';
 import bytes from '@/filters/bytes';
-import * as symbols from '@/symbols';
 import { $i } from '@/account';
 import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
 
 const stats = ref<any>({});
 
 onMounted(() => {
 	os.api('users/stats', {
-		userId: $i!.id
+		userId: $i!.id,
 	}).then(response => {
 		stats.value = response;
 	});
 });
 
-defineExpose({
-	[symbols.PAGE_INFO]: {
-		title: i18n.ts.accountInfo,
-		icon: 'fas fa-info-circle'
-	}
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.accountInfo,
+	icon: 'fas fa-info-circle',
 });
 </script>
diff --git a/packages/client/src/pages/settings/accounts.vue b/packages/client/src/pages/settings/accounts.vue
index 5e75639c55..47b816243f 100644
--- a/packages/client/src/pages/settings/accounts.vue
+++ b/packages/client/src/pages/settings/accounts.vue
@@ -21,13 +21,13 @@
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent, defineExpose, ref } from 'vue';
+import { defineAsyncComponent, ref } from 'vue';
 import FormSuspense from '@/components/form/suspense.vue';
 import FormButton from '@/components/ui/button.vue';
 import * as os from '@/os';
-import * as symbols from '@/symbols';
-import { getAccounts, addAccount as addAccounts, login, $i } from '@/account';
+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);
@@ -39,7 +39,7 @@ const init = async () => {
 		console.log(storedAccounts.value);
 
 		return os.api('users/show', {
-			userIds: storedAccounts.value.map(x => x.id)
+			userIds: storedAccounts.value.map(x => x.id),
 		});
 	}).then(response => {
 		accounts.value = response;
@@ -70,6 +70,10 @@ function addAccount(ev) {
 	}], ev.currentTarget ?? ev.target);
 }
 
+function removeAccount(account) {
+	_removeAccount(account.id);
+}
+
 function addExistingAccount() {
 	os.popup(defineAsyncComponent(() => import('@/components/signin-dialog.vue')), {}, {
 		done: res => {
@@ -98,12 +102,14 @@ function switchAccountWithToken(token: string) {
 	login(token);
 }
 
-defineExpose({
-	[symbols.PAGE_INFO]: {
-		title: i18n.ts.accounts,
-		icon: 'fas fa-users',
-		bg: 'var(--bg)',
-	}
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.accounts,
+	icon: 'fas fa-users',
+	bg: 'var(--bg)',
 });
 </script>
 
diff --git a/packages/client/src/pages/settings/api.vue b/packages/client/src/pages/settings/api.vue
index e6375763f1..d94862712e 100644
--- a/packages/client/src/pages/settings/api.vue
+++ b/packages/client/src/pages/settings/api.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent, defineExpose, ref } from 'vue';
+import { defineAsyncComponent, ref } from 'vue';
 import FormLink from '@/components/form/link.vue';
 import FormButton from '@/components/ui/button.vue';
 import * as os from '@/os';
-import * as symbols from '@/symbols';
 import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
 
 const isDesktop = ref(window.innerWidth >= 1100);
 
@@ -29,17 +29,19 @@ function generateToken() {
 			os.alert({
 				type: 'success',
 				title: i18n.ts.token,
-				text: token
+				text: token,
 			});
 		},
 	}, 'closed');
 }
 
-defineExpose({
-	[symbols.PAGE_INFO]: {
-		title: 'API',
-		icon: 'fas fa-key',
-		bg: 'var(--bg)',
-	}
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: 'API',
+	icon: 'fas fa-key',
+	bg: 'var(--bg)',
 });
 </script>
diff --git a/packages/client/src/pages/settings/apps.vue b/packages/client/src/pages/settings/apps.vue
index 7b0b5548d5..673e91fe6b 100644
--- a/packages/client/src/pages/settings/apps.vue
+++ b/packages/client/src/pages/settings/apps.vue
@@ -7,7 +7,7 @@
 				<div>{{ i18n.ts.nothing }}</div>
 			</div>
 		</template>
-		<template v-slot="{items}">
+		<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">
@@ -38,11 +38,11 @@
 </template>
 
 <script lang="ts" setup>
-import { defineExpose, ref } from 'vue';
+import { ref } from 'vue';
 import FormPagination from '@/components/ui/pagination.vue';
 import * as os from '@/os';
-import * as symbols from '@/symbols';
 import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
 
 const list = ref<any>(null);
 
@@ -50,8 +50,8 @@ const pagination = {
 	endpoint: 'i/apps' as const,
 	limit: 100,
 	params: {
-		sort: '+lastUsedAt'
-	}
+		sort: '+lastUsedAt',
+	},
 };
 
 function revoke(token) {
@@ -60,12 +60,14 @@ function revoke(token) {
 	});
 }
 
-defineExpose({
-	[symbols.PAGE_INFO]: {
-		title: i18n.ts.installedApps,
-		icon: 'fas fa-plug',
-		bg: 'var(--bg)',
-	}
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.installedApps,
+	icon: 'fas fa-plug',
+	bg: 'var(--bg)',
 });
 </script>
 
diff --git a/packages/client/src/pages/settings/custom-css.vue b/packages/client/src/pages/settings/custom-css.vue
index 20db077ceb..3e032be257 100644
--- a/packages/client/src/pages/settings/custom-css.vue
+++ b/packages/client/src/pages/settings/custom-css.vue
@@ -9,13 +9,13 @@
 </template>
 
 <script lang="ts" setup>
-import { defineExpose, ref, watch } from 'vue';
+import { ref, watch } from 'vue';
 import FormTextarea from '@/components/form/textarea.vue';
 import FormInfo from '@/components/ui/info.vue';
 import * as os from '@/os';
 import { unisonReload } from '@/scripts/unison-reload';
-import * as symbols from '@/symbols';
 import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
 
 const localCustomCss = ref(localStorage.getItem('customCss') ?? '');
 
@@ -35,11 +35,13 @@ watch(localCustomCss, async () => {
 	await apply();
 });
 
-defineExpose({
-	[symbols.PAGE_INFO]: {
-		title: i18n.ts.customCss,
-		icon: 'fas fa-code',
-		bg: 'var(--bg)',
-	}
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.customCss,
+	icon: 'fas fa-code',
+	bg: 'var(--bg)',
 });
 </script>
diff --git a/packages/client/src/pages/settings/deck.vue b/packages/client/src/pages/settings/deck.vue
index 2d868aa0a7..edada683ae 100644
--- a/packages/client/src/pages/settings/deck.vue
+++ b/packages/client/src/pages/settings/deck.vue
@@ -30,7 +30,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, defineExpose, watch } from 'vue';
+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';
@@ -39,8 +39,8 @@ import FormGroup from '@/components/form/group.vue';
 import { deckStore } from '@/ui/deck/deck-store';
 import * as os from '@/os';
 import { unisonReload } from '@/scripts/unison-reload';
-import * as symbols from '@/symbols';
 import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
 
 const navWindow = computed(deckStore.makeGetterSetter('navWindow'));
 const alwaysShowMainColumn = computed(deckStore.makeGetterSetter('alwaysShowMainColumn'));
@@ -62,7 +62,7 @@ watch(navWindow, async () => {
 async function setProfile() {
 	const { canceled, result: name } = await os.inputText({
 		title: i18n.ts._deck.profile,
-		allowEmpty: false
+		allowEmpty: false,
 	});
 	if (canceled) return;
 	
@@ -70,11 +70,13 @@ async function setProfile() {
 	unisonReload();
 }
 
-defineExpose({
-	[symbols.PAGE_INFO]: {
-		title: i18n.ts.deck,
-		icon: 'fas fa-columns',
-		bg: 'var(--bg)',
-	}
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.deck,
+	icon: 'fas fa-columns',
+	bg: 'var(--bg)',
 });
 </script>
diff --git a/packages/client/src/pages/settings/delete-account.vue b/packages/client/src/pages/settings/delete-account.vue
index e9f19aaf0b..a587c32998 100644
--- a/packages/client/src/pages/settings/delete-account.vue
+++ b/packages/client/src/pages/settings/delete-account.vue
@@ -8,13 +8,12 @@
 </template>
 
 <script lang="ts" setup>
-import { defineExpose } from 'vue';
 import FormInfo from '@/components/ui/info.vue';
 import FormButton from '@/components/ui/button.vue';
 import * as os from '@/os';
 import { signout } from '@/account';
-import * as symbols from '@/symbols';
 import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
 
 async function deleteAccount() {
 	{
@@ -27,12 +26,12 @@ 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', {
-		password: password
+		password: password,
 	});
 
 	await os.alert({
@@ -42,11 +41,13 @@ async function deleteAccount() {
 	await signout();
 }
 
-defineExpose({
-	[symbols.PAGE_INFO]: {
-		title: i18n.ts._accountDelete.accountDelete,
-		icon: 'fas fa-exclamation-triangle',
-		bg: 'var(--bg)',
-	}
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts._accountDelete.accountDelete,
+	icon: 'fas fa-exclamation-triangle',
+	bg: 'var(--bg)',
 });
 </script>
diff --git a/packages/client/src/pages/settings/drive.vue b/packages/client/src/pages/settings/drive.vue
index 09a2537ed5..73c0384f1f 100644
--- a/packages/client/src/pages/settings/drive.vue
+++ b/packages/client/src/pages/settings/drive.vue
@@ -34,7 +34,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, defineExpose, ref } from 'vue';
+import { computed, ref } from 'vue';
 import tinycolor from 'tinycolor2';
 import FormLink from '@/components/form/link.vue';
 import FormSwitch from '@/components/form/switch.vue';
@@ -43,10 +43,10 @@ import MkKeyValue from '@/components/key-value.vue';
 import FormSplit from '@/components/form/split.vue';
 import * as os from '@/os';
 import bytes from '@/filters/bytes';
-import * as symbols from '@/symbols';
 import { defaultStore } from '@/store';
 import MkChart from '@/components/chart.vue';
 import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
 
 const fetching = ref(true);
 const usage = ref<any>(null);
@@ -59,8 +59,8 @@ const meterStyle = computed(() => {
 		background: tinycolor({
 			h: 180 - (usage.value / capacity.value * 180),
 			s: 0.7,
-			l: 0.5
-		})
+			l: 0.5,
+		}),
 	};
 });
 
@@ -74,7 +74,7 @@ os.api('drive').then(info => {
 
 if (defaultStore.state.uploadFolder) {
 	os.api('drive/folders/show', {
-		folderId: defaultStore.state.uploadFolder
+		folderId: defaultStore.state.uploadFolder,
 	}).then(response => {
 		uploadFolder.value = response;
 	});
@@ -86,7 +86,7 @@ function chooseUploadFolder() {
 		os.success();
 		if (defaultStore.state.uploadFolder) {
 			uploadFolder.value = await os.api('drive/folders/show', {
-				folderId: defaultStore.state.uploadFolder
+				folderId: defaultStore.state.uploadFolder,
 			});
 		} else {
 			uploadFolder.value = null;
@@ -94,12 +94,14 @@ function chooseUploadFolder() {
 	});
 }
 
-defineExpose({
-	[symbols.PAGE_INFO]: {
-		title: i18n.ts.drive,
-		icon: 'fas fa-cloud',
-		bg: 'var(--bg)',
-	}
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.drive,
+	icon: 'fas fa-cloud',
+	bg: 'var(--bg)',
 });
 </script>
 
diff --git a/packages/client/src/pages/settings/email.vue b/packages/client/src/pages/settings/email.vue
index 37f14068e2..8b67ff34dd 100644
--- a/packages/client/src/pages/settings/email.vue
+++ b/packages/client/src/pages/settings/email.vue
@@ -40,27 +40,27 @@
 </template>
 
 <script lang="ts" setup>
-import { defineExpose, onMounted, ref, watch } from 'vue';
+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 * as symbols from '@/symbols';
 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', {
-		receiveAnnouncementEmail: v
+		receiveAnnouncementEmail: 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', {
@@ -86,7 +86,7 @@ const saveNotificationSettings = () => {
 			...[emailNotification_follow.value ? 'follow' : null],
 			...[emailNotification_receiveFollowRequest.value ? 'receiveFollowRequest' : null],
 			...[emailNotification_groupInvited.value ? 'groupInvited' : null],
-		].filter(x => x != null)
+		].filter(x => x != null),
 	});
 };
 
@@ -100,11 +100,13 @@ onMounted(() => {
 	});
 });
 
-defineExpose({
-	[symbols.PAGE_INFO]: {
-		title: i18n.ts.email,
-		icon: 'fas fa-envelope',
-		bg: 'var(--bg)',
-	}
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.email,
+	icon: 'fas fa-envelope',
+	bg: 'var(--bg)',
 });
 </script>
diff --git a/packages/client/src/pages/settings/general.vue b/packages/client/src/pages/settings/general.vue
index 64b8cc3106..ac2e3a4968 100644
--- a/packages/client/src/pages/settings/general.vue
+++ b/packages/client/src/pages/settings/general.vue
@@ -48,7 +48,8 @@
 		<FormSwitch v-model="disableShowingAnimatedImages" class="_formBlock">{{ i18n.ts.disableShowingAnimatedImages }}</FormSwitch>
 		<FormSwitch v-model="squareAvatars" class="_formBlock">{{ i18n.ts.squareAvatars }}</FormSwitch>
 		<FormSwitch v-model="useSystemFont" class="_formBlock">{{ i18n.ts.useSystemFont }}</FormSwitch>
-		<FormSwitch v-model="useOsNativeEmojis" class="_formBlock">{{ i18n.ts.useOsNativeEmojis }}
+		<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>
@@ -92,7 +93,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, defineExpose, ref, watch } from 'vue';
+import { computed, ref, watch } from 'vue';
 import FormSwitch from '@/components/form/switch.vue';
 import FormSelect from '@/components/form/select.vue';
 import FormRadios from '@/components/form/radios.vue';
@@ -104,8 +105,8 @@ import { langs } from '@/config';
 import { defaultStore } from '@/store';
 import * as os from '@/os';
 import { unisonReload } from '@/scripts/unison-reload';
-import * as symbols from '@/symbols';
 import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
 
 const lang = ref(localStorage.getItem('lang'));
 const fontSize = ref(localStorage.getItem('fontSize'));
@@ -173,16 +174,18 @@ watch([
 	aiChanMode,
 	showGapBetweenNotesInTimeline,
 	instanceTicker,
-	overridedDeviceKind
+	overridedDeviceKind,
 ], async () => {
 	await reloadAsk();
 });
 
-defineExpose({
-	[symbols.PAGE_INFO]: {
-		title: i18n.ts.general,
-		icon: 'fas fa-cogs',
-		bg: 'var(--bg)'
-	}
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.general,
+	icon: 'fas fa-cogs',
+	bg: 'var(--bg)',
 });
 </script>
diff --git a/packages/client/src/pages/settings/import-export.vue b/packages/client/src/pages/settings/import-export.vue
index 127cbcd4c1..438ecbd330 100644
--- a/packages/client/src/pages/settings/import-export.vue
+++ b/packages/client/src/pages/settings/import-export.vue
@@ -38,15 +38,15 @@
 </template>
 
 <script lang="ts" setup>
-import { defineExpose, ref } from 'vue';
+import { ref } from 'vue';
 import MkButton from '@/components/ui/button.vue';
 import FormSection from '@/components/form/section.vue';
 import FormGroup from '@/components/form/group.vue';
 import FormSwitch from '@/components/form/switch.vue';
 import * as os from '@/os';
 import { selectFile } from '@/scripts/select-file';
-import * as symbols from '@/symbols';
 import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
 
 const excludeMutingUsers = ref(false);
 const excludeInactiveUsers = ref(false);
@@ -116,12 +116,14 @@ const importBlocking = async (ev) => {
 	os.api('i/import-blocking', { fileId: file.id }).then(onImportSuccess).catch(onError);
 };
 
-defineExpose({
-	[symbols.PAGE_INFO]: {
-		title: i18n.ts.importAndExport,
-		icon: 'fas fa-boxes',
-		bg: 'var(--bg)',
-	}
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.importAndExport,
+	icon: 'fas fa-boxes',
+	bg: 'var(--bg)',
 });
 </script>
 
diff --git a/packages/client/src/pages/settings/index.vue b/packages/client/src/pages/settings/index.vue
index e6670ea930..011962c2e3 100644
--- a/packages/client/src/pages/settings/index.vue
+++ b/packages/client/src/pages/settings/index.vue
@@ -1,46 +1,42 @@
 <template>
-<MkSpacer :content-max="900" :margin-min="20" :margin-max="32">
-	<div ref="el" class="vvcocwet" :class="{ wide: !narrow }">
-		<div class="header">
-			<div class="title">
-				<MkA v-if="narrow" to="/settings">{{ $ts.settings }}</MkA>
-				<template v-else>{{ $ts.settings }}</template>
-			</div>
-			<div v-if="childInfo" class="subtitle">{{ childInfo.title }}</div>
-		</div>
-		<div class="body">
-			<div v-if="!narrow || initialPage == null" class="nav">
-				<div class="baaadecd">
-					<MkInfo v-if="emailNotConfigured" warn class="info">{{ $ts.emailNotConfiguredWarning }} <MkA to="/settings/email" class="_link">{{ $ts.configure }}</MkA></MkInfo>
-					<MkSuperMenu :def="menuDef" :grid="initialPage == null"></MkSuperMenu>
+<MkStickyContainer>
+	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></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 || initialPage == null" class="nav">
+					<div class="baaadecd">
+						<MkInfo v-if="emailNotConfigured" warn class="info">{{ $ts.emailNotConfiguredWarning }} <MkA to="/settings/email" class="_link">{{ $ts.configure }}</MkA></MkInfo>
+						<MkSuperMenu :def="menuDef" :grid="initialPage == null"></MkSuperMenu>
+					</div>
 				</div>
-			</div>
-			<div v-if="!(narrow && initialPage == null)" class="main">
-				<div class="bkzroven">
-					<component :is="component" :ref="el => pageChanged(el)" :key="initialPage" v-bind="pageProps"/>
+				<div v-if="!(narrow && initialPage == null)" class="main">
+					<div class="bkzroven">
+						<component :is="component" :key="initialPage" v-bind="pageProps"/>
+					</div>
 				</div>
 			</div>
 		</div>
-	</div>
-</MkSpacer>
+	</MkSpacer>
+</mkstickycontainer>
 </template>
 
 <script setup lang="ts">
-import { computed, defineAsyncComponent, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
+import { computed, defineAsyncComponent, inject, nextTick, onMounted, onUnmounted, provide, ref, watch } from 'vue';
 import { i18n } from '@/i18n';
 import MkInfo from '@/components/ui/info.vue';
 import MkSuperMenu from '@/components/ui/super-menu.vue';
 import { scroll } from '@/scripts/scroll';
-import { signout } from '@/account';
+import { signout , $i } from '@/account';
 import { unisonReload } from '@/scripts/unison-reload';
-import * as symbols from '@/symbols';
 import { instance } from '@/instance';
-import { $i } from '@/account';
-import { MisskeyNavigator } from '@/scripts/navigate';
+import { useRouter } from '@/router';
+import { definePageMetadata, provideMetadataReceiver, setPageMetadata } from '@/scripts/page-metadata';
 
-const props = defineProps<{
-  initialPage?: string
-}>();
+const props = withDefaults(defineProps<{
+  initialPage?: string;
+}>(), {
+});
 
 const indexInfo = {
 	title: i18n.ts.settings,
@@ -52,7 +48,7 @@ const INFO = ref(indexInfo);
 const el = ref<HTMLElement | null>(null);
 const childInfo = ref(null);
 
-const nav = new MisskeyNavigator();
+const router = useRouter();
 
 const narrow = ref(false);
 const NARROW_THRESHOLD = 600;
@@ -189,7 +185,7 @@ const menuDef = computed(() => [{
 			signout();
 		},
 		danger: true,
-	},],
+	}],
 }]);
 
 const pageProps = ref({});
@@ -242,7 +238,7 @@ watch(component, () => {
 
 watch(() => props.initialPage, () => {
 	if (props.initialPage == null && !narrow.value) {
-		nav.push('/settings/profile');
+		router.push('/settings/profile');
 	} else {
 		if (props.initialPage == null) {
 			INFO.value = indexInfo;
@@ -252,7 +248,7 @@ watch(() => props.initialPage, () => {
 
 watch(narrow, () => {
 	if (props.initialPage == null && !narrow.value) {
-		nav.push('/settings/profile');
+		router.push('/settings/profile');
 	}
 });
 
@@ -261,7 +257,7 @@ onMounted(() => {
 
 	narrow.value = el.value.offsetWidth < NARROW_THRESHOLD;
 	if (props.initialPage == null && !narrow.value) {
-		nav.push('/settings/profile');
+		router.push('/settings/profile');
 	}
 });
 
@@ -271,38 +267,23 @@ onUnmounted(() => {
 
 const emailNotConfigured = computed(() => instance.enableEmail && ($i.email == null || !$i.emailVerified));
 
-const pageChanged = (page) => {
-	if (page == null) {
+provideMetadataReceiver((info) => {
+	if (info == null) {
 		childInfo.value = null;
 	} else {
-		childInfo.value = page[symbols.PAGE_INFO];
+		childInfo.value = info;
 	}
-};
-
-defineExpose({
-	[symbols.PAGE_INFO]: INFO,
 });
+
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata(INFO);
 </script>
 
 <style lang="scss" scoped>
 .vvcocwet {
-	> .header {
-		display: flex;
-		margin-bottom: 24px;
-		font-size: 1.3em;
-		font-weight: bold;
-
-		> .title {
-			display: block;
-			width: 34%;
-		}
-
-		> .subtitle {
-			flex: 1;
-			min-width: 0;
-		}
-	}
-
 	> .body {
 		> .nav {
 			.baaadecd {
diff --git a/packages/client/src/pages/settings/instance-mute.vue b/packages/client/src/pages/settings/instance-mute.vue
index bcc2ee85ad..d0ca85adca 100644
--- a/packages/client/src/pages/settings/instance-mute.vue
+++ b/packages/client/src/pages/settings/instance-mute.vue
@@ -10,14 +10,14 @@
 </template>
 
 <script lang="ts" setup>
-import { defineExpose, ref, watch } from 'vue';
+import { ref, watch } from 'vue';
 import FormTextarea from '@/components/form/textarea.vue';
 import MkInfo from '@/components/ui/info.vue';
 import MkButton from '@/components/ui/button.vue';
 import * as os from '@/os';
-import * as symbols from '@/symbols';
 import { $i } from '@/account';
 import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
 
 const instanceMutes = ref($i!.mutedInstances.join('\n'));
 const changed = ref(false);
@@ -42,10 +42,12 @@ watch(instanceMutes, () => {
 	changed.value = true;
 });
 
-defineExpose({
-	[symbols.PAGE_INFO]: {
-		title: i18n.ts.instanceMute,
-		icon: 'fas fa-volume-mute'
-	}
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.instanceMute,
+	icon: 'fas fa-volume-mute',
 });
 </script>
diff --git a/packages/client/src/pages/settings/integration.vue b/packages/client/src/pages/settings/integration.vue
index 75c6200944..7de151040e 100644
--- a/packages/client/src/pages/settings/integration.vue
+++ b/packages/client/src/pages/settings/integration.vue
@@ -24,14 +24,14 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, defineExpose, onMounted, ref, watch } from 'vue';
+import { computed, onMounted, ref, watch } from 'vue';
 import { apiUrl } from '@/config';
 import FormSection from '@/components/form/section.vue';
 import MkButton from '@/components/ui/button.vue';
-import * as symbols from '@/symbols';
 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);
@@ -42,7 +42,7 @@ const integrations = computed(() => $i!.integrations);
 function openWindow(service: string, type: string) {
 	return window.open(`${apiUrl}/${type}/${service}`,
 		`${service}_${type}_window`,
-		'height=570, width=520'
+		'height=570, width=520',
 	);
 }
 
@@ -72,7 +72,7 @@ function disconnectGithub() {
 
 onMounted(() => {
 	document.cookie = `igi=${$i!.token}; path=/;` +
-		` max-age=31536000;` +
+		' max-age=31536000;' +
 		(document.location.protocol.startsWith('https') ? ' secure' : '');
 
 	watch(integrations, () => {
@@ -88,11 +88,13 @@ onMounted(() => {
 	});
 });
 
-defineExpose({
-	[symbols.PAGE_INFO]: {
-		title: i18n.ts.integration,
-		icon: 'fas fa-share-alt',
-		bg: 'var(--bg)',
-	}
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.integration,
+	icon: 'fas fa-share-alt',
+	bg: 'var(--bg)',
 });
 </script>
diff --git a/packages/client/src/pages/settings/menu.vue b/packages/client/src/pages/settings/menu.vue
index 2288c3f718..1b4d8799c8 100644
--- a/packages/client/src/pages/settings/menu.vue
+++ b/packages/client/src/pages/settings/menu.vue
@@ -18,16 +18,16 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, defineExpose, ref, watch } from 'vue';
+import { computed, ref, watch } from 'vue';
 import FormTextarea from '@/components/form/textarea.vue';
 import FormRadios from '@/components/form/radios.vue';
 import FormButton from '@/components/ui/button.vue';
 import * as os from '@/os';
 import { menuDef } from '@/menu';
 import { defaultStore } from '@/store';
-import * as symbols from '@/symbols';
 import { unisonReload } from '@/scripts/unison-reload';
 import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
 
 const items = ref(defaultStore.state.menu.join('\n'));
 
@@ -37,7 +37,7 @@ const menuDisplay = computed(defaultStore.makeGetterSetter('menuDisplay'));
 async function reloadAsk() {
 	const { canceled } = await os.confirm({
 		type: 'info',
-		text: i18n.ts.reloadToApplySetting
+		text: i18n.ts.reloadToApplySetting,
 	});
 	if (canceled) return;
 
@@ -49,10 +49,10 @@ async function addItem() {
 	const { canceled, result: item } = await os.select({
 		title: i18n.ts.addItem,
 		items: [...menu.map(k => ({
-			value: k, text: i18n.ts[menuDef[k].title]
+			value: k, text: i18n.ts[menuDef[k].title],
 		})), {
-			value: '-', text: i18n.ts.divider
-		}]
+			value: '-', text: i18n.ts.divider,
+		}],
 	});
 	if (canceled) return;
 	items.value = [...split.value, item].join('\n');
@@ -76,11 +76,13 @@ watch(menuDisplay, async () => {
 	await reloadAsk();
 });
 
-defineExpose({
-	[symbols.PAGE_INFO]: {
-		title: i18n.ts.menu,
-		icon: 'fas fa-list-ul',
-		bg: 'var(--bg)',
-	}
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.menu,
+	icon: 'fas fa-list-ul',
+	bg: 'var(--bg)',
 });
 </script>
diff --git a/packages/client/src/pages/settings/mute-block.vue b/packages/client/src/pages/settings/mute-block.vue
index 28d11809e3..d8cb286626 100644
--- a/packages/client/src/pages/settings/mute-block.vue
+++ b/packages/client/src/pages/settings/mute-block.vue
@@ -7,7 +7,7 @@
 	<div v-if="tab === 'mute'">
 		<MkPagination :pagination="mutingPagination" class="muting">
 			<template #empty><FormInfo>{{ $ts.noUsers }}</FormInfo></template>
-			<template v-slot="{items}">
+			<template #default="{items}">
 				<FormLink v-for="mute in items" :key="mute.id" :to="userPage(mute.mutee)">
 					<MkAcct :user="mute.mutee"/>
 				</FormLink>
@@ -17,7 +17,7 @@
 	<div v-if="tab === 'block'">
 		<MkPagination :pagination="blockingPagination" class="blocking">
 			<template #empty><FormInfo>{{ $ts.noUsers }}</FormInfo></template>
-			<template v-slot="{items}">
+			<template #default="{items}">
 				<FormLink v-for="block in items" :key="block.id" :to="userPage(block.blockee)">
 					<MkAcct :user="block.blockee"/>
 				</FormLink>
@@ -35,8 +35,8 @@ import FormInfo from '@/components/ui/info.vue';
 import FormLink from '@/components/form/link.vue';
 import { userPage } from '@/filters/user';
 import * as os from '@/os';
-import * as symbols from '@/symbols';
 import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
 
 let tab = $ref('mute');
 
@@ -50,11 +50,13 @@ const blockingPagination = {
 	limit: 10,
 };
 
-defineExpose({
-	[symbols.PAGE_INFO]: {
-		title: i18n.ts.muteAndBlock,
-		icon: 'fas fa-ban',
-		bg: 'var(--bg)',
-	},
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.muteAndBlock,
+	icon: 'fas fa-ban',
+	bg: 'var(--bg)',
 });
 </script>
diff --git a/packages/client/src/pages/settings/notifications.vue b/packages/client/src/pages/settings/notifications.vue
index b8fff95a8d..494a3eebe0 100644
--- a/packages/client/src/pages/settings/notifications.vue
+++ b/packages/client/src/pages/settings/notifications.vue
@@ -10,15 +10,15 @@
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent, defineExpose } from 'vue';
+import { defineAsyncComponent } from 'vue';
+import { notificationTypes } from 'misskey-js';
 import FormButton from '@/components/ui/button.vue';
 import FormLink from '@/components/form/link.vue';
 import FormSection from '@/components/form/section.vue';
-import { notificationTypes } from 'misskey-js';
 import * as os from '@/os';
-import * as symbols from '@/symbols';
 import { $i } from '@/account';
 import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
 
 async function readAllUnreadNotes() {
 	await os.api('i/read-all-unread-notes');
@@ -45,15 +45,17 @@ function configure() {
 			}).then(i => {
 				$i!.mutingNotificationTypes = i.mutingNotificationTypes;
 			});
-		}
+		},
 	}, 'closed');
 }
 
-defineExpose({
-	[symbols.PAGE_INFO]: {
-		title: i18n.ts.notifications,
-		icon: 'fas fa-bell',
-		bg: 'var(--bg)',
-	}
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.notifications,
+	icon: 'fas fa-bell',
+	bg: 'var(--bg)',
 });
 </script>
diff --git a/packages/client/src/pages/settings/other.vue b/packages/client/src/pages/settings/other.vue
index 82e174a5b4..283d87a066 100644
--- a/packages/client/src/pages/settings/other.vue
+++ b/packages/client/src/pages/settings/other.vue
@@ -15,30 +15,32 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, defineExpose } from 'vue';
+import { computed } from 'vue';
 import FormSwitch from '@/components/form/switch.vue';
 import FormLink from '@/components/form/link.vue';
 import * as os from '@/os';
 import { defaultStore } from '@/store';
-import * as symbols from '@/symbols';
 import { $i } from '@/account';
 import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
 
 const reportError = computed(defaultStore.makeGetterSetter('reportError'));
 
 function onChangeInjectFeaturedNote(v) {
 	os.api('i/update', {
-		injectFeaturedNote: v
+		injectFeaturedNote: v,
 	}).then((i) => {
 		$i!.injectFeaturedNote = i.injectFeaturedNote;
 	});
 }
 
-defineExpose({
-	[symbols.PAGE_INFO]: {
-		title: i18n.ts.other,
-		icon: 'fas fa-ellipsis-h',
-		bg: 'var(--bg)',
-	}
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.other,
+	icon: 'fas fa-ellipsis-h',
+	bg: 'var(--bg)',
 });
 </script>
diff --git a/packages/client/src/pages/settings/plugin.install.vue b/packages/client/src/pages/settings/plugin.install.vue
index 96c0abfd99..7ff55e9d83 100644
--- a/packages/client/src/pages/settings/plugin.install.vue
+++ b/packages/client/src/pages/settings/plugin.install.vue
@@ -13,7 +13,7 @@
 </template>
 
 <script lang="ts" setup>
-import { defineExpose, defineAsyncComponent, nextTick, ref } from 'vue';
+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';
@@ -24,7 +24,7 @@ import * as os from '@/os';
 import { ColdDeviceStorage } from '@/store';
 import { unisonReload } from '@/scripts/unison-reload';
 import { i18n } from '@/i18n';
-import * as symbols from '@/symbols';
+import { definePageMetadata } from '@/scripts/page-metadata';
 
 const code = ref(null);
 
@@ -35,7 +35,7 @@ function installPlugin({ id, meta, ast, token }) {
 		active: true,
 		configData: {},
 		token: token,
-		ast: ast
+		ast: ast,
 	}));
 }
 
@@ -46,7 +46,7 @@ async function install() {
 	} catch (err) {
 		os.alert({
 			type: 'error',
-			text: 'Syntax error :('
+			text: 'Syntax error :(',
 		});
 		return;
 	}
@@ -55,7 +55,7 @@ async function install() {
 	if (meta == null) {
 		os.alert({
 			type: 'error',
-			text: 'No metadata found :('
+			text: 'No metadata found :(',
 		});
 		return;
 	}
@@ -64,7 +64,7 @@ async function install() {
 	if (metadata == null) {
 		os.alert({
 			type: 'error',
-			text: 'No metadata found :('
+			text: 'No metadata found :(',
 		});
 		return;
 	}
@@ -73,7 +73,7 @@ async function install() {
 	if (name == null || version == null || author == null) {
 		os.alert({
 			type: 'error',
-			text: 'Required property not found :('
+			text: 'Required property not found :(',
 		});
 		return;
 	}
@@ -83,7 +83,7 @@ async function install() {
 			title: i18n.ts.tokenRequested,
 			information: i18n.ts.pluginTokenRequestedDescription,
 			initialName: name,
-			initialPermissions: permissions
+			initialPermissions: permissions,
 		}, {
 			done: async result => {
 				const { name, permissions } = result;
@@ -93,17 +93,17 @@ async function install() {
 					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)
+		ast: serialize(ast),
 	});
 
 	os.success();
@@ -113,11 +113,13 @@ async function install() {
 	});
 }
 
-defineExpose({
-	[symbols.PAGE_INFO]: {
-		title: i18n.ts._plugin.install,
-		icon: 'fas fa-download',
-		bg: 'var(--bg)',
-	}
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts._plugin.install,
+	icon: 'fas fa-download',
+	bg: 'var(--bg)',
 });
 </script>
diff --git a/packages/client/src/pages/settings/plugin.vue b/packages/client/src/pages/settings/plugin.vue
index 873a022cbc..75cf42bb89 100644
--- a/packages/client/src/pages/settings/plugin.vue
+++ b/packages/client/src/pages/settings/plugin.vue
@@ -7,7 +7,7 @@
 		<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" :modelValue="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>
@@ -32,7 +32,7 @@
 </template>
 
 <script lang="ts" setup>
-import { defineExpose, nextTick, ref } from 'vue';
+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';
@@ -40,9 +40,9 @@ import MkButton from '@/components/ui/button.vue';
 import MkKeyValue from '@/components/key-value.vue';
 import * as os from '@/os';
 import { ColdDeviceStorage } from '@/store';
-import * as symbols from '@/symbols';
 import { unisonReload } from '@/scripts/unison-reload';
 import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
 
 const plugins = ref(ColdDeviceStorage.get('plugins'));
 
@@ -83,12 +83,14 @@ function changeActive(plugin, active) {
 	});
 }
 
-defineExpose({
-	[symbols.PAGE_INFO]: {
-		title: i18n.ts.plugins,
-		icon: 'fas fa-plug',
-		bg: 'var(--bg)',
-	}
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.plugins,
+	icon: 'fas fa-plug',
+	bg: 'var(--bg)',
 });
 </script>
 
diff --git a/packages/client/src/pages/settings/privacy.vue b/packages/client/src/pages/settings/privacy.vue
index a84d2f8786..a209c3f469 100644
--- a/packages/client/src/pages/settings/privacy.vue
+++ b/packages/client/src/pages/settings/privacy.vue
@@ -55,9 +55,9 @@ import FormSection from '@/components/form/section.vue';
 import FormGroup from '@/components/form/group.vue';
 import * as os from '@/os';
 import { defaultStore } from '@/store';
-import * as symbols from '@/symbols';
 import { i18n } from '@/i18n';
 import { $i } from '@/account';
+import { definePageMetadata } from '@/scripts/page-metadata';
 
 let isLocked = $ref($i.isLocked);
 let autoAcceptFollowed = $ref($i.autoAcceptFollowed);
@@ -84,11 +84,13 @@ function save() {
 	});
 }
 
-defineExpose({
-	[symbols.PAGE_INFO]: {
-		title: i18n.ts.privacy,
-		icon: 'fas fa-lock-open',
-		bg: 'var(--bg)',
-	},
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.privacy,
+	icon: 'fas fa-lock-open',
+	bg: 'var(--bg)',
 });
 </script>
diff --git a/packages/client/src/pages/settings/profile.vue b/packages/client/src/pages/settings/profile.vue
index b64dc93cc7..b662de9e3d 100644
--- a/packages/client/src/pages/settings/profile.vue
+++ b/packages/client/src/pages/settings/profile.vue
@@ -74,10 +74,10 @@ import FormSlot from '@/components/form/slot.vue';
 import { host } from '@/config';
 import { selectFile } from '@/scripts/select-file';
 import * as os from '@/os';
-import * as symbols from '@/symbols';
 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,
@@ -176,12 +176,14 @@ function changeBanner(ev) {
 	});
 }
 
-defineExpose({
-	[symbols.PAGE_INFO]: {
-		title: i18n.ts.profile,
-		icon: 'fas fa-user',
-		bg: 'var(--bg)',
-	},
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.profile,
+	icon: 'fas fa-user',
+	bg: 'var(--bg)',
 });
 </script>
 
diff --git a/packages/client/src/pages/settings/reaction.vue b/packages/client/src/pages/settings/reaction.vue
index 963ac81dfa..d0fdf835cf 100644
--- a/packages/client/src/pages/settings/reaction.vue
+++ b/packages/client/src/pages/settings/reaction.vue
@@ -64,8 +64,8 @@ import FormSection from '@/components/form/section.vue';
 import FormSwitch from '@/components/form/switch.vue';
 import * as os from '@/os';
 import { defaultStore } from '@/store';
-import * as symbols from '@/symbols';
 import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
 
 let reactions = $ref(JSON.parse(JSON.stringify(defaultStore.state.reactions)));
 
@@ -83,7 +83,7 @@ function remove(reaction, ev: MouseEvent) {
 		text: i18n.ts.remove,
 		action: () => {
 			reactions = reactions.filter(x => x !== reaction);
-		}
+		},
 	}], ev.currentTarget ?? ev.target);
 }
 
@@ -106,7 +106,7 @@ async function setDefault() {
 
 function chooseEmoji(ev: MouseEvent) {
 	os.pickEmoji(ev.currentTarget ?? ev.target, {
-		showPinned: false
+		showPinned: false,
 	}).then(emoji => {
 		if (!reactions.includes(emoji)) {
 			reactions.push(emoji);
@@ -120,16 +120,18 @@ watch($$(reactions), () => {
 	deep: true,
 });
 
-defineExpose({
-	[symbols.PAGE_INFO]: {
-		title: i18n.ts.reaction,
-		icon: 'fas fa-laugh',
-		action: {
-			icon: 'fas fa-eye',
-			handler: preview,
-		},
-		bg: 'var(--bg)',
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.reaction,
+	icon: 'fas fa-laugh',
+	action: {
+		icon: 'fas fa-eye',
+		handler: preview,
 	},
+	bg: 'var(--bg)',
 });
 </script>
 
diff --git a/packages/client/src/pages/settings/security.vue b/packages/client/src/pages/settings/security.vue
index 401648790a..57880ef3dd 100644
--- a/packages/client/src/pages/settings/security.vue
+++ b/packages/client/src/pages/settings/security.vue
@@ -13,7 +13,7 @@
 	<FormSection>
 		<template #label>{{ i18n.ts.signinHistory }}</template>
 		<MkPagination :pagination="pagination">
-			<template v-slot="{items}">
+			<template #default="{items}">
 				<div>
 					<div v-for="item in items" :key="item.id" v-panel class="timnmucd">
 						<header>
@@ -38,15 +38,14 @@
 </template>
 
 <script lang="ts" setup>
-import { defineExpose } from 'vue';
+import X2fa from './2fa.vue';
 import FormSection from '@/components/form/section.vue';
 import FormSlot from '@/components/form/slot.vue';
 import FormButton from '@/components/ui/button.vue';
 import MkPagination from '@/components/ui/pagination.vue';
-import X2fa from './2fa.vue';
 import * as os from '@/os';
-import * as symbols from '@/symbols';
 import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
 
 const pagination = {
 	endpoint: 'i/signin-history' as const,
@@ -56,54 +55,56 @@ const pagination = {
 async function change() {
 	const { canceled: canceled1, result: currentPassword } = await os.inputText({
 		title: i18n.ts.currentPassword,
-		type: 'password'
+		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',
-			text: i18n.ts.retypedNotMatch
+			text: i18n.ts.retypedNotMatch,
 		});
 		return;
 	}
 	
 	os.apiWithDialog('i/change-password', {
 		currentPassword,
-		newPassword
+		newPassword,
 	});
 }
 
 function regenerateToken() {
 	os.inputText({
 		title: i18n.ts.password,
-		type: 'password'
+		type: 'password',
 	}).then(({ canceled, result: password }) => {
 		if (canceled) return;
 		os.api('i/regenerate_token', {
-			password: password
+			password: password,
 		});
 	});
 }
 
-defineExpose({
-	[symbols.PAGE_INFO]: {
-		title: i18n.ts.security,
-		icon: 'fas fa-lock',
-		bg: 'var(--bg)',
-	}
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.security,
+	icon: 'fas fa-lock',
+	bg: 'var(--bg)',
 });
 </script>
 
diff --git a/packages/client/src/pages/settings/sounds.vue b/packages/client/src/pages/settings/sounds.vue
index d01e87c1f8..bb23257d7a 100644
--- a/packages/client/src/pages/settings/sounds.vue
+++ b/packages/client/src/pages/settings/sounds.vue
@@ -18,7 +18,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, defineExpose, ref } from 'vue';
+import { computed, ref } from 'vue';
 import FormRange from '@/components/form/range.vue';
 import FormButton from '@/components/ui/button.vue';
 import FormLink from '@/components/form/link.vue';
@@ -26,8 +26,8 @@ import FormSection from '@/components/form/section.vue';
 import * as os from '@/os';
 import { ColdDeviceStorage } from '@/store';
 import { playFile } from '@/scripts/sound';
-import * as symbols from '@/symbols';
 import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
 
 const masterVolume = computed({
 	get: () => {
@@ -35,19 +35,19 @@ const masterVolume = computed({
 	},
 	set: (value) => {
 		ColdDeviceStorage.set('sound_masterVolume', value);
-	}
+	},
 });
 
 const volumeIcon = computed(() => masterVolume.value === 0 ? 'fas fa-volume-mute' : 'fas fa-volume-up');
 
 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 = [
@@ -95,15 +95,15 @@ async function edit(type) {
 			step: 0.05,
 			textConverter: (v) => `${Math.floor(v * 100)}%`,
 			label: i18n.ts.volume,
-			default: sounds.value[type].volume
+			default: sounds.value[type].volume,
 		},
 		listen: {
 			type: 'button',
 			content: i18n.ts.listen,
 			action: (_, values) => {
 				playFile(values.type, values.volume);
-			}
-		}
+			},
+		},
 	});
 	if (canceled) return;
 
@@ -124,11 +124,13 @@ function reset() {
 	}
 }
 
-defineExpose({
-	[symbols.PAGE_INFO]: {
-		title: i18n.ts.sounds,
-		icon: 'fas fa-music',
-		bg: 'var(--bg)',
-	}
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.sounds,
+	icon: 'fas fa-music',
+	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 25fa6c012b..6a863ed9e6 100644
--- a/packages/client/src/pages/settings/theme.install.vue
+++ b/packages/client/src/pages/settings/theme.install.vue
@@ -19,8 +19,8 @@ import FormButton from '@/components/ui/button.vue';
 import { applyTheme, validateTheme } from '@/scripts/theme';
 import * as os from '@/os';
 import { addTheme, getThemes } from '@/theme-store';
-import * as symbols from '@/symbols';
 import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
 
 let installThemeCode = $ref(null);
 
@@ -32,21 +32,21 @@ function parseThemeCode(code: string) {
 	} catch (err) {
 		os.alert({
 			type: 'error',
-			text: i18n.ts._theme.invalid
+			text: i18n.ts._theme.invalid,
 		});
 		return false;
 	}
 	if (!validateTheme(theme)) {
 		os.alert({
 			type: 'error',
-			text: i18n.ts._theme.invalid
+			text: i18n.ts._theme.invalid,
 		});
 		return false;
 	}
 	if (getThemes().some(t => t.id === theme.id)) {
 		os.alert({
 			type: 'info',
-			text: i18n.ts._theme.alreadyInstalled
+			text: i18n.ts._theme.alreadyInstalled,
 		});
 		return false;
 	}
@@ -65,15 +65,17 @@ async function install(code: string): Promise<void> {
 	await addTheme(theme);
 	os.alert({
 		type: 'success',
-		text: i18n.t('_theme.installed', { name: theme.name })
+		text: i18n.t('_theme.installed', { name: theme.name }),
 	});
 }
 
-defineExpose({
-	[symbols.PAGE_INFO]: {
-		title: i18n.ts._theme.install,
-		icon: 'fas fa-download',
-		bg: 'var(--bg)',
-	},
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts._theme.install,
+	icon: 'fas fa-download',
+	bg: 'var(--bg)',
 });
 </script>
diff --git a/packages/client/src/pages/settings/theme.manage.vue b/packages/client/src/pages/settings/theme.manage.vue
index 94b2d24455..68cbf3c353 100644
--- a/packages/client/src/pages/settings/theme.manage.vue
+++ b/packages/client/src/pages/settings/theme.manage.vue
@@ -26,7 +26,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, defineExpose, ref } from 'vue';
+import { computed, ref } from 'vue';
 import JSON5 from 'json5';
 import FormTextarea from '@/components/form/textarea.vue';
 import FormSelect from '@/components/form/select.vue';
@@ -36,8 +36,8 @@ 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 * as symbols from '@/symbols';
 import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
 
 const installedThemes = ref(getThemes());
 const builtinThemes = getBuiltinThemesRef();
@@ -67,11 +67,13 @@ function uninstall() {
 	os.success();
 }
 
-defineExpose({
-	[symbols.PAGE_INFO]: {
-		title: i18n.ts._theme.manage,
-		icon: 'fas fa-folder-open',
-		bg: 'var(--bg)',
-	}
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts._theme.manage,
+	icon: 'fas fa-folder-open',
+	bg: 'var(--bg)',
 });
 </script>
diff --git a/packages/client/src/pages/settings/theme.vue b/packages/client/src/pages/settings/theme.vue
index 5e7ffcff4b..db4262ba7e 100644
--- a/packages/client/src/pages/settings/theme.vue
+++ b/packages/client/src/pages/settings/theme.vue
@@ -96,13 +96,12 @@ import FormButton from '@/components/ui/button.vue';
 import { getBuiltinThemesRef } from '@/scripts/theme';
 import { selectFile } from '@/scripts/select-file';
 import { isDeviceDarkmode } from '@/scripts/is-device-darkmode';
-import { ColdDeviceStorage } from '@/store';
+import { ColdDeviceStorage , defaultStore } from '@/store';
 import { i18n } from '@/i18n';
-import { defaultStore } from '@/store';
 import { instance } from '@/instance';
 import { uniqueBy } from '@/scripts/array';
 import { fetchThemes, getThemes } from '@/theme-store';
-import * as symbols from '@/symbols';
+import { definePageMetadata } from '@/scripts/page-metadata';
 
 const installedThemes = ref(getThemes());
 const builtinThemes = getBuiltinThemesRef();
@@ -121,7 +120,7 @@ const darkThemeId = computed({
 	},
 	set(id) {
 		ColdDeviceStorage.set('darkTheme', themes.value.find(x => x.id === id));
-	}
+	},
 });
 const lightTheme = ColdDeviceStorage.ref('lightTheme');
 const lightThemeId = computed({
@@ -130,7 +129,7 @@ const lightThemeId = computed({
 	},
 	set(id) {
 		ColdDeviceStorage.set('lightTheme', themes.value.find(x => x.id === id));
-	}
+	},
 });
 const darkMode = computed(defaultStore.makeGetterSetter('darkMode'));
 const syncDeviceDarkMode = computed(ColdDeviceStorage.makeGetterSetter('syncDeviceDarkMode'));
@@ -168,12 +167,14 @@ function setWallpaper(event) {
 	});
 }
 
-defineExpose({
-	[symbols.PAGE_INFO]: {
-		title: i18n.ts.theme,
-		icon: 'fas fa-palette',
-		bg: 'var(--bg)',
-	}
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.theme,
+	icon: 'fas fa-palette',
+	bg: 'var(--bg)',
 });
 </script>
 
diff --git a/packages/client/src/pages/settings/webhook.edit.vue b/packages/client/src/pages/settings/webhook.edit.vue
index 3690526b41..d3cf5d7b79 100644
--- a/packages/client/src/pages/settings/webhook.edit.vue
+++ b/packages/client/src/pages/settings/webhook.edit.vue
@@ -40,19 +40,11 @@ import FormSection from '@/components/form/section.vue';
 import FormSwitch from '@/components/form/switch.vue';
 import FormButton from '@/components/ui/button.vue';
 import * as os from '@/os';
-import * as symbols from '@/symbols';
 import { i18n } from '@/i18n';
-
-defineExpose({
-	[symbols.PAGE_INFO]: {
-		title: 'Edit webhook',
-		icon: 'fas fa-bolt',
-		bg: 'var(--bg)',
-	},
-});
+import { definePageMetadata } from '@/scripts/page-metadata';
 
 const webhook = await os.api('i/webhooks/show', {
-	webhookId: new URLSearchParams(window.location.search).get('id')
+	webhookId: new URLSearchParams(window.location.search).get('id'),
 });
 
 let name = $ref(webhook.name);
@@ -86,4 +78,14 @@ async function save(): Promise<void> {
 		active,
 	});
 }
+
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: 'Edit webhook',
+	icon: 'fas fa-bolt',
+	bg: 'var(--bg)',
+});
 </script>
diff --git a/packages/client/src/pages/settings/webhook.new.vue b/packages/client/src/pages/settings/webhook.new.vue
index 9bb492c49e..508c0d78be 100644
--- a/packages/client/src/pages/settings/webhook.new.vue
+++ b/packages/client/src/pages/settings/webhook.new.vue
@@ -38,8 +38,8 @@ import FormSection from '@/components/form/section.vue';
 import FormSwitch from '@/components/form/switch.vue';
 import FormButton from '@/components/ui/button.vue';
 import * as os from '@/os';
-import * as symbols from '@/symbols';
 import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
 
 let name = $ref('');
 let url = $ref('');
@@ -71,11 +71,13 @@ async function create(): Promise<void> {
 	});
 }
 
-defineExpose({
-	[symbols.PAGE_INFO]: {
-		title: 'Create new webhook',
-		icon: 'fas fa-bolt',
-		bg: 'var(--bg)',
-	},
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: 'Create new webhook',
+	icon: 'fas fa-bolt',
+	bg: 'var(--bg)',
 });
 </script>
diff --git a/packages/client/src/pages/settings/webhook.vue b/packages/client/src/pages/settings/webhook.vue
index c9af8b6766..50739e2fd1 100644
--- a/packages/client/src/pages/settings/webhook.vue
+++ b/packages/client/src/pages/settings/webhook.vue
@@ -8,7 +8,7 @@
 	
 	<FormSection>
 		<MkPagination :pagination="pagination">
-			<template v-slot="{items}">
+			<template #default="{items}">
 				<FormLink v-for="webhook in items" :key="webhook.id" :to="`/settings/webhook/edit?id=${webhook.id}`" class="_formBlock">
 					<template #icon>
 						<i v-if="webhook.active === false" class="fas fa-circle-pause"></i>
@@ -34,19 +34,21 @@ 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 * as symbols from '@/symbols';
 import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
 
 const pagination = {
 	endpoint: 'i/webhooks/list' as const,
 	limit: 10,
 };
 
-defineExpose({
-	[symbols.PAGE_INFO]: {
-		title: 'Webhook',
-		icon: 'fas fa-bolt',
-		bg: 'var(--bg)',
-	},
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: 'Webhook',
+	icon: 'fas fa-bolt',
+	bg: 'var(--bg)',
 });
 </script>
diff --git a/packages/client/src/pages/settings/word-mute.vue b/packages/client/src/pages/settings/word-mute.vue
index 6e1a4b2ccb..c6af0e7661 100644
--- a/packages/client/src/pages/settings/word-mute.vue
+++ b/packages/client/src/pages/settings/word-mute.vue
@@ -29,7 +29,7 @@
 </template>
 
 <script lang="ts" setup>
-import { defineExpose, ref, watch } from 'vue';
+import { ref, watch } from 'vue';
 import FormTextarea from '@/components/form/textarea.vue';
 import MkKeyValue from '@/components/key-value.vue';
 import MkButton from '@/components/ui/button.vue';
@@ -37,10 +37,10 @@ import MkInfo from '@/components/ui/info.vue';
 import MkTab from '@/components/tab.vue';
 import * as os from '@/os';
 import number from '@/filters/number';
-import * as symbols from '@/symbols';
 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)) {
@@ -87,7 +87,7 @@ async function save() {
 					os.alert({
 						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;
@@ -117,11 +117,13 @@ async function save() {
 	changed.value = false;
 }
 
-defineExpose({
-	[symbols.PAGE_INFO]: {
-		title: i18n.ts.wordMute,
-		icon: 'fas fa-comment-slash',
-		bg: 'var(--bg)',
-	}
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.wordMute,
+	icon: 'fas fa-comment-slash',
+	bg: 'var(--bg)',
 });
 </script>
diff --git a/packages/client/src/pages/share.vue b/packages/client/src/pages/share.vue
index 1700944f82..8984823b60 100644
--- a/packages/client/src/pages/share.vue
+++ b/packages/client/src/pages/share.vue
@@ -22,158 +22,144 @@
 </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 // SPECIFICATION: https://misskey-hub.net/docs/features/share-form.html
 
 import { defineComponent } from 'vue';
+import { noteVisibilities } from 'misskey-js';
+import * as Acct from 'misskey-js/built/acct';
+import * as Misskey from 'misskey-js';
 import MkButton from '@/components/ui/button.vue';
 import XPostForm from '@/components/post-form.vue';
 import * as os from '@/os';
-import { noteVisibilities } from 'misskey-js';
-import * as Acct from 'misskey-js/built/acct';
-import * as symbols from '@/symbols';
-import * as Misskey from 'misskey-js';
+import { mainRouter } from '@/router';
+import { definePageMetadata } from '@/scripts/page-metadata';
+import { i18n } from '@/i18n';
 
-export default defineComponent({
-	components: {
-		XPostForm,
-		MkButton,
-	},
+const urlParams = new URLSearchParams(window.location.search);
+const localOnlyQuery = urlParams.get('localOnly');
+const visibilityQuery = urlParams.get('visibility');
 
-	data() {
-		return {
-			[symbols.PAGE_INFO]: {
-				title: this.$ts.share,
-				icon: 'fas fa-share-alt'
-			},
-			state: 'fetching' as 'fetching' | 'writing' | 'posted',
+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 files = $ref([] as Misskey.entities.DriveFile[]);
+let visibleUsers = $ref([] as Misskey.entities.User[]);
 
-			title: null as string | null,
-			initialText: null as string | null,
-			reply: null as Misskey.entities.Note | null,
-			renote: null as Misskey.entities.Note | null,
-			visibility: null as string | null,
-			localOnly: null as boolean | null,
-			files: [] as Misskey.entities.DriveFile[],
-			visibleUsers: [] as Misskey.entities.User[],
-		};
-	},
+async function init() {
+	let noteText = '';
+	if (title) noteText += `[ ${title} ]\n`;
+	// Googleニュース対策
+	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();
 
-	async created() {
-		const urlParams = new URLSearchParams(window.location.search);
+	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) : []),
+			]
+			// 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)}`);
+				}),
+			),
+		);
+	}
 
-		this.title = urlParams.get('title');
-		const text = urlParams.get('text');
-		const url = urlParams.get('url');
-
-		let noteText = '';
-		if (this.title) noteText += `[ ${this.title} ]\n`;
-		// Googleニュース対策
-		if (text?.startsWith(`${this.title}.\n`)) noteText += text.replace(`${this.title}.\n`, '');
-		else if (text && this.title !== text) noteText += `${text}\n`;
-		if (url) noteText += `${url}`;
-		this.initialText = noteText.trim();
-
-		const visibility = urlParams.get('visibility');
-		if (noteVisibilities.includes(visibility)) {
-			this.visibility = visibility;
+	try {
+		//#region Reply
+		const replyId = urlParams.get('replyId');
+		const replyUri = urlParams.get('replyUri');
+		if (replyId) {
+			reply = await os.api('notes/show', {
+				noteId: replyId,
+			});
+		} else if (replyUri) {
+			const obj = await os.api('ap/show', {
+				uri: replyUri,
+			});
+			if (obj.type === 'Note') {
+				reply = obj.object;
+			}
 		}
+		//#endregion
 
-		if (this.visibility === 'specified') {
-			const visibleUserIds = urlParams.get('visibleUserIds');
-			const visibleAccts = urlParams.get('visibleAccts');
+		//#region Renote
+		const renoteId = urlParams.get('renoteId');
+		const renoteUri = urlParams.get('renoteUri');
+		if (renoteId) {
+			renote = await os.api('notes/show', {
+				noteId: renoteId,
+			});
+		} else if (renoteUri) {
+			const obj = await os.api('ap/show', {
+				uri: renoteUri,
+			});
+			if (obj.type === 'Note') {
+				renote = obj.object;
+			}
+		}
+		//#endregion
+
+		//#region Drive files
+		const fileIds = urlParams.get('fileIds');
+		if (fileIds) {
 			await Promise.all(
-				[
-					...(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 => {
-						this.visibleUsers.push(user);
+				fileIds.split(',')
+				.map(fileId => os.api('drive/files/show', { fileId })
+					.then(file => {
+						files.push(file);
 					}, () => {
-						console.error(`Invalid user query: ${JSON.stringify(q)}`);
-					})
-				)
+						console.error(`Failed to fetch a file ${fileId}`);
+					}),
+				),
 			);
 		}
-
-		const localOnly = urlParams.get('localOnly');
-		if (localOnly === '0') this.localOnly = false;
-		else if (localOnly === '1') this.localOnly = true;
-
-		try {
-			//#region Reply
-			const replyId = urlParams.get('replyId');
-			const replyUri = urlParams.get('replyUri');
-			if (replyId) {
-				this.reply = await os.api('notes/show', {
-					noteId: replyId
-				});
-			} else if (replyUri) {
-				const obj = await os.api('ap/show', {
-					uri: replyUri
-				});
-				if (obj.type === 'Note') {
-					this.reply = obj.object;
-				}
-			}
-			//#endregion
-
-			//#region Renote
-			const renoteId = urlParams.get('renoteId');
-			const renoteUri = urlParams.get('renoteUri');
-			if (renoteId) {
-				this.renote = await os.api('notes/show', {
-					noteId: renoteId
-				});
-			} else if (renoteUri) {
-				const obj = await os.api('ap/show', {
-					uri: renoteUri
-				});
-				if (obj.type === 'Note') {
-					this.renote = obj.object;
-				}
-			}
-			//#endregion
-
-			//#region Drive files
-			const fileIds = urlParams.get('fileIds');
-			if (fileIds) {
-				await Promise.all(
-					fileIds.split(',')
-					.map(fileId => os.api('drive/files/show', { fileId })
-						.then(file => {
-							this.files.push(file);
-						}, () => {
-							console.error(`Failed to fetch a file ${fileId}`);
-						})
-					)
-				);
-			}
-			//#endregion
-		} catch (err) {
-			os.alert({
-				type: 'error',
-				title: err.message,
-				text: err.name
-			});
-		}
-
-		this.state = 'writing';
-	},
-
-	methods: {
-		close() {
-			window.close();
-
-			// 閉じなければ100ms後タイムラインに
-			window.setTimeout(() => {
-				this.$router.push('/');
-			}, 100);
-		}
+		//#endregion
+	} catch (err) {
+		os.alert({
+			type: 'error',
+			title: err.message,
+			text: err.name,
+		});
 	}
+
+	state = 'writing';
+}
+
+init();
+
+function close(): void {
+	window.close();
+
+	// 閉じなければ100ms後タイムラインに
+	window.setTimeout(() => {
+		mainRouter.push('/');
+	}, 100);
+}
+
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.share,
+	icon: 'fas fa-share-alt',
 });
 </script>
 
diff --git a/packages/client/src/pages/signup-complete.vue b/packages/client/src/pages/signup-complete.vue
index 344c9195f7..a97990c129 100644
--- a/packages/client/src/pages/signup-complete.vue
+++ b/packages/client/src/pages/signup-complete.vue
@@ -7,9 +7,9 @@
 <script lang="ts" setup>
 import { onMounted } from 'vue';
 import * as os from '@/os';
-import * as symbols from '@/symbols';
 import { login } from '@/account';
 import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
 
 const props = defineProps<{
 	code: string;
@@ -26,11 +26,13 @@ onMounted(async () => {
 	login(res.i, '/');
 });
 
-defineExpose({
-	[symbols.PAGE_INFO]: {
-		title: i18n.ts.signup,
-		icon: 'fas fa-user',
-	},
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.signup,
+	icon: 'fas fa-user',
 });
 </script>
 
diff --git a/packages/client/src/pages/tag.vue b/packages/client/src/pages/tag.vue
index 045f1ef259..d63864ed5c 100644
--- a/packages/client/src/pages/tag.vue
+++ b/packages/client/src/pages/tag.vue
@@ -7,7 +7,7 @@
 <script lang="ts" setup>
 import { computed } from 'vue';
 import XNotes from '@/components/notes.vue';
-import * as symbols from '@/symbols';
+import { definePageMetadata } from '@/scripts/page-metadata';
 
 const props = defineProps<{
 	tag: string;
@@ -21,11 +21,13 @@ const pagination = {
 	})),
 };
 
-defineExpose({
-	[symbols.PAGE_INFO]: computed(() => ({
-		title: props.tag,
-		icon: 'fas fa-hashtag',
-		bg: 'var(--bg)',
-	})),
-});
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata(computed(() => ({
+	title: props.tag,
+	icon: 'fas fa-hashtag',
+	bg: 'var(--bg)',
+})));
 </script>
diff --git a/packages/client/src/pages/theme-editor.vue b/packages/client/src/pages/theme-editor.vue
index 2a11c07fd2..38f3b90a6e 100644
--- a/packages/client/src/pages/theme-editor.vue
+++ b/packages/client/src/pages/theme-editor.vue
@@ -1,5 +1,6 @@
-<template>
-<MkSpacer :content-max="800" :margin-min="16" :margin-max="32">
+<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>
@@ -61,7 +62,7 @@
 			</div>
 		</FormFolder>
 	</div>
-</MkSpacer>
+</MkSpacer></MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
@@ -82,7 +83,6 @@ import { host } from '@/config';
 import * as os from '@/os';
 import { ColdDeviceStorage, defaultStore } from '@/store';
 import { addTheme } from '@/theme-store';
-import * as symbols from '@/symbols';
 import { i18n } from '@/i18n';
 import { useLeaveGuard } from '@/scripts/use-leave-guard';
 
@@ -204,23 +204,25 @@ async function saveAs() {
 
 watch($$(theme), apply, { deep: true });
 
-defineExpose({
-	[symbols.PAGE_INFO]: {
-		title: i18n.ts.themeEditor,
-		icon: 'fas fa-palette',
-		bg: 'var(--bg)',
-		actions: [{
-			asFullButton: true,
-			icon: 'fas fa-eye',
-			text: i18n.ts.preview,
-			handler: showPreview,
-		}, {
-			asFullButton: true,
-			icon: 'fas fa-check',
-			text: i18n.ts.saveAs,
-			handler: saveAs,
-		}],
-	},
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.themeEditor,
+	icon: 'fas fa-palette',
+	bg: 'var(--bg)',
+	actions: [{
+		asFullButton: true,
+		icon: 'fas fa-eye',
+		text: i18n.ts.preview,
+		handler: showPreview,
+	}, {
+		asFullButton: true,
+		icon: 'fas fa-check',
+		text: i18n.ts.saveAs,
+		handler: saveAs,
+	}],
 });
 </script>
 
diff --git a/packages/client/src/pages/timeline.vue b/packages/client/src/pages/timeline.vue
index fe3dbc3cff..e0f0a1f151 100644
--- a/packages/client/src/pages/timeline.vue
+++ b/packages/client/src/pages/timeline.vue
@@ -1,39 +1,37 @@
 <template>
-<MkSpacer :content-max="800">
-	<div ref="rootEl" v-hotkey.global="keymap" class="cmuxhskf">
-		<XTutorial v-if="$store.reactiveState.tutorial.value != -1" class="tutorial _block"/>
-		<XPostForm v-if="$store.reactiveState.showFixedPostForm.value" class="post-form _block" fixed/>
+<MkStickyContainer>
+	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
+	<MkSpacer :content-max="800">
+		<div ref="rootEl" v-hotkey.global="keymap" class="cmuxhskf">
+			<XTutorial v-if="$store.reactiveState.tutorial.value != -1" class="tutorial _block"/>
+			<XPostForm v-if="$store.reactiveState.showFixedPostForm.value" class="post-form _block" fixed/>
 
-		<div v-if="queue > 0" class="new"><button class="_buttonPrimary" @click="top()">{{ $ts.newNoteRecived }}</button></div>
-		<div class="tl _block">
-			<XTimeline ref="tl" :key="src"
-				class="tl"
-				:src="src"
-				:sound="true"
-				@queue="queueUpdated"
-			/>
+			<div v-if="queue > 0" class="new"><button class="_buttonPrimary" @click="top()">{{ $ts.newNoteRecived }}</button></div>
+			<div class="tl _block">
+				<XTimeline
+					ref="tl" :key="src"
+					class="tl"
+					:src="src"
+					:sound="true"
+					@queue="queueUpdated"
+				/>
+			</div>
 		</div>
-	</div>
-</MkSpacer>
+	</MkSpacer>
+</MkStickyContainer>
 </template>
 
-<script lang="ts">
-export default {
-	name: 'MkTimelinePage',
-};
-</script>
-
 <script lang="ts" setup>
 import { defineAsyncComponent, computed, watch } from 'vue';
 import XTimeline from '@/components/timeline.vue';
 import XPostForm from '@/components/post-form.vue';
 import { scroll } from '@/scripts/scroll';
 import * as os from '@/os';
-import * as symbols from '@/symbols';
 import { defaultStore } from '@/store';
 import { i18n } from '@/i18n';
 import { instance } from '@/instance';
 import { $i } from '@/account';
+import { definePageMetadata } from '@/scripts/page-metadata';
 
 const XTutorial = defineAsyncComponent(() => import('./timeline.tutorial.vue'));
 
@@ -111,55 +109,55 @@ function focus(): void {
 	tlComponent.focus();
 }
 
-defineExpose({
-	[symbols.PAGE_INFO]: computed(() => ({
-		title: i18n.ts.timeline,
-		icon: src === 'local' ? 'fas fa-comments' : src === 'social' ? 'fas fa-share-alt' : src === 'global' ? 'fas fa-globe' : 'fas fa-home',
-		bg: 'var(--bg)',
-		actions: [{
-			icon: 'fas fa-list-ul',
-			text: i18n.ts.lists,
-			handler: chooseList,
-		}, {
-			icon: 'fas fa-satellite',
-			text: i18n.ts.antennas,
-			handler: chooseAntenna,
-		}, {
-			icon: 'fas fa-satellite-dish',
-			text: i18n.ts.channel,
-			handler: chooseChannel,
-		}, {
-			icon: 'fas fa-calendar-alt',
-			text: i18n.ts.jumpToSpecifiedDate,
-			handler: timetravel,
-		}],
-		tabs: [{
-			active: src === 'home',
-			title: i18n.ts._timelines.home,
-			icon: 'fas fa-home',
-			iconOnly: true,
-			onClick: () => { saveSrc('home'); },
-		}, ...(isLocalTimelineAvailable ? [{
-			active: src === 'local',
-			title: i18n.ts._timelines.local,
-			icon: 'fas fa-comments',
-			iconOnly: true,
-			onClick: () => { saveSrc('local'); },
-		}, {
-			active: src === 'social',
-			title: i18n.ts._timelines.social,
-			icon: 'fas fa-share-alt',
-			iconOnly: true,
-			onClick: () => { saveSrc('social'); },
-		}] : []), ...(isGlobalTimelineAvailable ? [{
-			active: src === 'global',
-			title: i18n.ts._timelines.global,
-			icon: 'fas fa-globe',
-			iconOnly: true,
-			onClick: () => { saveSrc('global'); },
-		}] : [])],
-	})),
-});
+const headerActions = $computed(() => [{
+	icon: 'fas fa-list-ul',
+	text: i18n.ts.lists,
+	handler: chooseList,
+}, {
+	icon: 'fas fa-satellite',
+	text: i18n.ts.antennas,
+	handler: chooseAntenna,
+}, {
+	icon: 'fas fa-satellite-dish',
+	text: i18n.ts.channel,
+	handler: chooseChannel,
+}, {
+	icon: 'fas fa-calendar-alt',
+	text: i18n.ts.jumpToSpecifiedDate,
+	handler: timetravel,
+}]);
+
+const headerTabs = $computed(() => [{
+	active: src === 'home',
+	title: i18n.ts._timelines.home,
+	icon: 'fas fa-home',
+	iconOnly: true,
+	onClick: () => { saveSrc('home'); },
+}, ...(isLocalTimelineAvailable ? [{
+	active: src === 'local',
+	title: i18n.ts._timelines.local,
+	icon: 'fas fa-comments',
+	iconOnly: true,
+	onClick: () => { saveSrc('local'); },
+}, {
+	active: src === 'social',
+	title: i18n.ts._timelines.social,
+	icon: 'fas fa-share-alt',
+	iconOnly: true,
+	onClick: () => { saveSrc('social'); },
+}] : []), ...(isGlobalTimelineAvailable ? [{
+	active: src === 'global',
+	title: i18n.ts._timelines.global,
+	icon: 'fas fa-globe',
+	iconOnly: true,
+	onClick: () => { saveSrc('global'); },
+}] : [])]);
+
+definePageMetadata(computed(() => ({
+	title: i18n.ts.timeline,
+	icon: src === 'local' ? 'fas fa-comments' : src === 'social' ? 'fas fa-share-alt' : src === 'global' ? 'fas fa-globe' : 'fas fa-home',
+	bg: 'var(--bg)',
+})));
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/pages/user-info.vue b/packages/client/src/pages/user-info.vue
index 54e1f13021..6dc25e99d6 100644
--- a/packages/client/src/pages/user-info.vue
+++ b/packages/client/src/pages/user-info.vue
@@ -1,71 +1,75 @@
 <template>
-<MkSpacer :content-max="500" :margin-min="16" :margin-max="32">
-	<FormSuspense :p="init">
-		<div class="_formRoot">
-			<div class="_formBlock aeakzknw">
-				<MkAvatar class="avatar" :user="user" :show-indicator="true"/>
-			</div>
+<MkStickyContainer>
+	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
+	<MkSpacer :content-max="500" :margin-min="16" :margin-max="32">
+		<FormSuspense :p="init">
+			<div class="_formRoot">
+				<div class="_formBlock aeakzknw">
+					<MkAvatar class="avatar" :user="user" :show-indicator="true"/>
+				</div>
 
-			<FormLink :to="userPage(user)">Profile</FormLink>
-
-			<div class="_formBlock">
-				<MkKeyValue :copy="acct(user)" oneline style="margin: 1em 0;">
-					<template #key>Acct</template>
-					<template #value><span class="_monospace">{{ acct(user) }}</span></template>
-				</MkKeyValue>
-
-				<MkKeyValue :copy="user.id" oneline style="margin: 1em 0;">
-					<template #key>ID</template>
-					<template #value><span class="_monospace">{{ user.id }}</span></template>
-				</MkKeyValue>
-			</div>
-
-			<FormSection v-if="iAmModerator">
-				<template #label>Moderation</template>
-				<FormSwitch v-if="user.host == null && $i.isAdmin && (moderator || !user.isAdmin)" v-model="moderator" class="_formBlock" @update:modelValue="toggleModerator">{{ $ts.moderator }}</FormSwitch>
-				<FormSwitch v-model="silenced" class="_formBlock" @update:modelValue="toggleSilence">{{ $ts.silence }}</FormSwitch>
-				<FormSwitch v-model="suspended" class="_formBlock" @update:modelValue="toggleSuspend">{{ $ts.suspend }}</FormSwitch>
-				{{ $ts.reflectMayTakeTime }}
-				<FormButton v-if="user.host == null && iAmModerator" class="_formBlock" @click="resetPassword"><i class="fas fa-key"></i> {{ $ts.resetPassword }}</FormButton>
-			</FormSection>
-
-			<FormSection>
-				<template #label>ActivityPub</template>
+				<FormLink :to="userPage(user)">Profile</FormLink>
 
 				<div class="_formBlock">
-					<MkKeyValue v-if="user.host" oneline style="margin: 1em 0;">
-						<template #key>{{ $ts.instanceInfo }}</template>
-						<template #value><MkA :to="`/instance-info/${user.host}`" class="_link">{{ user.host }} <i class="fas fa-angle-right"></i></MkA></template>
+					<MkKeyValue :copy="acct(user)" oneline style="margin: 1em 0;">
+						<template #key>Acct</template>
+						<template #value><span class="_monospace">{{ acct(user) }}</span></template>
 					</MkKeyValue>
-					<MkKeyValue v-else oneline style="margin: 1em 0;">
-						<template #key>{{ $ts.instanceInfo }}</template>
-						<template #value>(Local user)</template>
-					</MkKeyValue>
-					<MkKeyValue oneline style="margin: 1em 0;">
-						<template #key>{{ $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 :copy="user.id" oneline style="margin: 1em 0;">
+						<template #key>ID</template>
+						<template #value><span class="_monospace">{{ user.id }}</span></template>
 					</MkKeyValue>
 				</div>
 
-				<FormButton v-if="user.host != null" class="_formBlock" @click="updateRemoteUser"><i class="fas fa-sync"></i> {{ $ts.updateRemoteUser }}</FormButton>
-			</FormSection>
+				<FormSection v-if="iAmModerator">
+					<template #label>Moderation</template>
+					<FormSwitch v-if="user.host == null && $i.isAdmin && (moderator || !user.isAdmin)" v-model="moderator" class="_formBlock" @update:modelValue="toggleModerator">{{ $ts.moderator }}</FormSwitch>
+					<FormSwitch v-model="silenced" class="_formBlock" @update:modelValue="toggleSilence">{{ $ts.silence }}</FormSwitch>
+					<FormSwitch v-model="suspended" class="_formBlock" @update:modelValue="toggleSuspend">{{ $ts.suspend }}</FormSwitch>
+					{{ $ts.reflectMayTakeTime }}
+					<FormButton v-if="user.host == null && iAmModerator" class="_formBlock" @click="resetPassword"><i class="fas fa-key"></i> {{ $ts.resetPassword }}</FormButton>
+				</FormSection>
 
-			<MkObjectView v-if="info && $i.isAdmin" tall :value="info">
-			</MkObjectView>
+				<FormSection>
+					<template #label>ActivityPub</template>
 
-			<MkObjectView tall :value="user">
-			</MkObjectView>
-		</div>
-	</FormSuspense>
-</MkSpacer>
+					<div class="_formBlock">
+						<MkKeyValue v-if="user.host" oneline style="margin: 1em 0;">
+							<template #key>{{ $ts.instanceInfo }}</template>
+							<template #value><MkA :to="`/instance-info/${user.host}`" class="_link">{{ user.host }} <i class="fas fa-angle-right"></i></MkA></template>
+						</MkKeyValue>
+						<MkKeyValue v-else oneline style="margin: 1em 0;">
+							<template #key>{{ $ts.instanceInfo }}</template>
+							<template #value>(Local user)</template>
+						</MkKeyValue>
+						<MkKeyValue oneline style="margin: 1em 0;">
+							<template #key>{{ $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>
+
+					<FormButton v-if="user.host != null" class="_formBlock" @click="updateRemoteUser"><i class="fas fa-sync"></i> {{ $ts.updateRemoteUser }}</FormButton>
+				</FormSection>
+
+				<MkObjectView v-if="info && $i.isAdmin" tall :value="info">
+				</MkObjectView>
+
+				<MkObjectView tall :value="user">
+				</MkObjectView>
+			</div>
+		</FormSuspense>
+	</MkSpacer>
+</MkStickyContainer>
 </template>
 
-<script lang="ts">
-import { computed, defineAsyncComponent, defineComponent } from 'vue';
+<script lang="ts" setup>
+import { computed, defineAsyncComponent, defineComponent, watch } from 'vue';
+import * as misskey from 'misskey-js';
 import MkObjectView from '@/components/object-view.vue';
 import FormTextarea from '@/components/form/textarea.vue';
 import FormSwitch from '@/components/form/switch.vue';
@@ -77,174 +81,145 @@ import FormSuspense from '@/components/form/suspense.vue';
 import * as os from '@/os';
 import number from '@/filters/number';
 import bytes from '@/filters/bytes';
-import * as symbols from '@/symbols';
 import { url } from '@/config';
 import { userPage, acct } from '@/filters/user';
+import { definePageMetadata } from '@/scripts/page-metadata';
+import { i18n } from '@/i18n';
+import { iAmModerator } from '@/account';
 
-export default defineComponent({
-	components: {
-		FormSection,
-		FormTextarea,
-		FormSwitch,
-		MkObjectView,
-		FormButton,
-		FormLink,
-		MkKeyValue,
-		FormSuspense,
-	},
+const props = defineProps<{
+	userId: string;
+}>();
 
-	props: {
-		userId: {
-			type: String,
-			required: true
-		}
-	},
+let user = $ref<null | misskey.entities.UserDetailed>();
+let init = $ref();
+let info = $ref();
+let ap = $ref(null);
+let moderator = $ref(false);
+let silenced = $ref(false);
+let suspended = $ref(false);
 
-	data() {
-		return {
-			[symbols.PAGE_INFO]: computed(() => ({
-				title: this.user ? acct(this.user) : this.$ts.userInfo,
-				icon: 'fas fa-info-circle',
-				bg: 'var(--bg)',
-				actions: this.user ? [this.user.url ? {
-					text: this.user.url,
-					icon: 'fas fa-external-link-alt',
-					handler: () => {
-						window.open(this.user.url, '_blank');
-					}
-				} : undefined].filter(x => x !== undefined) : [],
-			})),
-			init: null,
-			user: null,
-			info: null,
-			ap: null,
-			moderator: false,
-			silenced: false,
-			suspended: false,
-		};
-	},
-
-	computed: {
-		iAmModerator(): boolean {
-			return this.$i && (this.$i.isAdmin || this.$i.isModerator);
-		}
-	},
-
-	watch: {
-		userId: {
-			handler() {
-				this.init = this.createFetcher();
-			},
-			immediate: true
-		},
-		user() {
-			os.api('ap/get', {
-				uri: this.user.uri || `${url}/users/${this.user.id}`
-			}).then(res => {
-				this.ap = res;
-			});
-		}
-	},
-
-	methods: {
-		number,
-		bytes,
-		userPage,
-		acct,
-
-		createFetcher() {
-			if (this.iAmModerator) {
-				return () => Promise.all([os.api('users/show', {
-					userId: this.userId
-				}), os.api('admin/show-user', {
-					userId: this.userId
-				})]).then(([user, info]) => {
-					this.user = user;
-					this.info = info;
-					this.moderator = this.info.isModerator;
-					this.silenced = this.info.isSilenced;
-					this.suspended = this.info.isSuspended;
-				});
-			} else {
-				return () => os.api('users/show', {
-					userId: this.userId
-				}).then((user) => {
-					this.user = user;
-				});
-			}
-		},
-
-		refreshUser() {
-			this.init = this.createFetcher();
-		},
-
-		async updateRemoteUser() {
-			await os.apiWithDialog('federation/update-remote-user', { userId: this.user.id });
-			this.refreshUser();
-		},
-
-		async resetPassword() {
-			const { password } = await os.api('admin/reset-password', {
-				userId: this.user.id,
-			});
-
-			os.alert({
-				type: 'success',
-				text: this.$t('newPasswordIs', { password })
-			});
-		},
-
-		async toggleSilence(v) {
-			const confirm = await os.confirm({
-				type: 'warning',
-				text: v ? this.$ts.silenceConfirm : this.$ts.unsilenceConfirm,
-			});
-			if (confirm.canceled) {
-				this.silenced = !v;
-			} else {
-				await os.api(v ? 'admin/silence-user' : 'admin/unsilence-user', { userId: this.user.id });
-				await this.refreshUser();
-			}
-		},
-
-		async toggleSuspend(v) {
-			const confirm = await os.confirm({
-				type: 'warning',
-				text: v ? this.$ts.suspendConfirm : this.$ts.unsuspendConfirm,
-			});
-			if (confirm.canceled) {
-				this.suspended = !v;
-			} else {
-				await os.api(v ? 'admin/suspend-user' : 'admin/unsuspend-user', { userId: this.user.id });
-				await this.refreshUser();
-			}
-		},
-
-		async toggleModerator(v) {
-			await os.api(v ? 'admin/moderators/add' : 'admin/moderators/remove', { userId: this.user.id });
-			await this.refreshUser();
-		},
-
-		async deleteAllFiles() {
-			const confirm = await os.confirm({
-				type: 'warning',
-				text: this.$ts.deleteAllFilesConfirm,
-			});
-			if (confirm.canceled) return;
-			const process = async () => {
-				await os.api('admin/delete-all-files-of-a-user', { userId: this.user.id });
-				os.success();
-			};
-			await process().catch(err => {
-				os.alert({
-					type: 'error',
-					text: err.toString(),
-				});
-			});
-			await this.refreshUser();
-		},
+function createFetcher() {
+	if (iAmModerator) {
+		return () => Promise.all([os.api('users/show', {
+			userId: props.userId,
+		}), os.api('admin/show-user', {
+			userId: props.userId,
+		})]).then(([_user, _info]) => {
+			user = _user;
+			info = _info;
+			moderator = info.isModerator;
+			silenced = info.isSilenced;
+			suspended = info.isSuspended;
+		});
+	} else {
+		return () => os.api('users/show', {
+			userId: props.userId,
+		}).then((res) => {
+			user = res;
+		});
 	}
+}
+
+function refreshUser() {
+	init = createFetcher();
+}
+
+async function updateRemoteUser() {
+	await os.apiWithDialog('federation/update-remote-user', { userId: user.id });
+	refreshUser();
+}
+
+async function resetPassword() {
+	const { password } = await os.api('admin/reset-password', {
+		userId: user.id,
+	});
+
+	os.alert({
+		type: 'success',
+		text: i18n.t('newPasswordIs', { password }),
+	});
+}
+
+async function toggleSilence(v) {
+	const confirm = await os.confirm({
+		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 refreshUser();
+	}
+}
+
+async function toggleSuspend(v) {
+	const confirm = await os.confirm({
+		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 refreshUser();
+	}
+}
+
+async function toggleModerator(v) {
+	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',
+		text: i18n.ts.deleteAllFilesConfirm,
+	});
+	if (confirm.canceled) return;
+	const process = async () => {
+		await os.api('admin/delete-all-files-of-a-user', { userId: user.id });
+		os.success();
+	};
+	await process().catch(err => {
+		os.alert({
+			type: 'error',
+			text: err.toString(),
+		});
+	});
+	await refreshUser();
+}
+
+watch(() => props.userId, () => {
+	init = createFetcher();
+}, {
+	immediate: true,
 });
+
+watch(() => user, () => {
+	os.api('ap/get', {
+		uri: user.uri || `${url}/users/${user.id}`,
+	}).then(res => {
+		ap = res;
+	});
+});
+
+const headerActions = $computed(() => user && user.url ? [{
+	text: user.url,
+	icon: 'fas fa-external-link-alt',
+	handler: () => {
+		window.open(user.url, '_blank');
+	},
+}] : []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata(computed(() => ({
+	title: user ? acct(user) : i18n.ts.userInfo,
+	icon: 'fas fa-info-circle',
+	bg: 'var(--bg)',
+})));
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/pages/user-list-timeline.vue b/packages/client/src/pages/user-list-timeline.vue
index 4476567cfb..9783088a19 100644
--- a/packages/client/src/pages/user-list-timeline.vue
+++ b/packages/client/src/pages/user-list-timeline.vue
@@ -1,8 +1,9 @@
 <template>
-<div v-hotkey.global="keymap" v-size="{ min: [800] }" class="eqqrhokj">
+<div ref="rootEl" v-hotkey.global="keymap" v-size="{ min: [800] }" class="eqqrhokj">
 	<div v-if="queue > 0" class="new"><button class="_buttonPrimary" @click="top()">{{ $ts.newNoteRecived }}</button></div>
 	<div class="tl _block">
-		<XTimeline ref="tl" :key="listId"
+		<XTimeline
+			ref="tlEl" :key="listId"
 			class="tl"
 			src="list"
 			:list="listId"
@@ -13,92 +14,71 @@
 </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, defineAsyncComponent, computed } from 'vue';
+<script lang="ts" setup>
+import { computed, watch, inject } from 'vue';
 import XTimeline from '@/components/timeline.vue';
 import { scroll } from '@/scripts/scroll';
 import * as os from '@/os';
-import * as symbols from '@/symbols';
+import { useRouter } from '@/router';
+import { definePageMetadata } from '@/scripts/page-metadata';
+import { i18n } from '@/i18n';
 
-export default defineComponent({
-	components: {
-		XTimeline,
-	},
+const router = useRouter();
 
-	props: {
-		listId: {
-			type: String,
-			required: true
-		}
-	},
+const props = defineProps<{
+	listId: string;
+}>();
 
-	data() {
-		return {
-			list: null,
-			queue: 0,
-			[symbols.PAGE_INFO]: computed(() => this.list ? {
-				title: this.list.name,
-				icon: 'fas fa-list-ul',
-				bg: 'var(--bg)',
-				actions: [{
-					icon: 'fas fa-calendar-alt',
-					text: this.$ts.jumpToSpecifiedDate,
-					handler: this.timetravel
-				}, {
-					icon: 'fas fa-cog',
-					text: this.$ts.settings,
-					handler: this.settings
-				}],
-			} : null),
-		};
-	},
+let list = $ref(null);
+let queue = $ref(0);
+let tlEl = $ref<InstanceType<typeof XTimeline>>();
+let rootEl = $ref<HTMLElement>();
 
-	computed: {
-		keymap(): any {
-			return {
-				't': this.focus
-			};
-		},
-	},
+watch(() => props.listId, async () => {
+	list = await os.api('users/lists/show', {
+		listId: props.listId,
+	});
+}, { immediate: true });
 
-	watch: {
-		listId: {
-			async handler() {
-				this.list = await os.api('users/lists/show', {
-					listId: this.listId
-				});
-			},
-			immediate: true
-		}
-	},
+function queueUpdated(q) {
+	queue = q;
+}
 
-	methods: {
-		queueUpdated(q) {
-			this.queue = q;
-		},
+function top() {
+	scroll(rootEl, { top: 0 });
+}
 
-		top() {
-			scroll(this.$el, { top: 0 });
-		},
+function settings() {
+	router.push(`/my/lists/${props.listId}`);
+}
 
-		settings() {
-			this.$router.push(`/my/lists/${this.listId}`);
-		},
+async function timetravel() {
+	const { canceled, result: date } = await os.inputDate({
+		title: i18n.ts.date,
+	});
+	if (canceled) return;
 
-		async timetravel() {
-			const { canceled, result: date } = await os.inputDate({
-				title: this.$ts.date,
-			});
-			if (canceled) return;
+	tlEl.timetravel(date);
+}
 
-			this.$refs.tl.timetravel(date);
-		},
+const headerActions = $computed(() => []);
 
-		focus() {
-			(this.$refs.tl as any).focus();
-		}
-	}
-});
+const headerTabs = $computed(() => []);
+
+definePageMetadata(computed(() => list ? {
+	title: list.name,
+	icon: 'fas fa-list-ul',
+	bg: 'var(--bg)',
+	actions: [{
+		icon: 'fas fa-calendar-alt',
+		text: i18n.ts.jumpToSpecifiedDate,
+		handler: timetravel,
+	}, {
+		icon: 'fas fa-cog',
+		text: i18n.ts.settings,
+		handler: settings,
+	}],
+} : null));
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/pages/user/index.vue b/packages/client/src/pages/user/index.vue
index a024dd28bc..7b2e2cde1a 100644
--- a/packages/client/src/pages/user/index.vue
+++ b/packages/client/src/pages/user/index.vue
@@ -1,131 +1,136 @@
 <template>
-<div>
-	<transition name="fade" mode="out-in">
-		<MkSpacer v-if="user" :content-max="narrow ? 800 : 1100">
-			<div v-size="{ max: [500] }" class="ftskorzw" :class="{ wide: !narrow }">
-				<div class="main">
-					<!-- TODO -->
-					<!-- <div class="punished" v-if="user.isSuspended"><i class="fas fa-exclamation-triangle" style="margin-right: 8px;"></i> {{ $ts.userSuspended }}</div> -->
-					<!-- <div class="punished" v-if="user.isSilenced"><i class="fas fa-exclamation-triangle" style="margin-right: 8px;"></i> {{ $ts.userSilenced }}</div> -->
+<MkStickyContainer>
+	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
+	<div ref="rootEl">
+		<transition name="fade" mode="out-in">
+			<MkSpacer v-if="user" :content-max="narrow ? 800 : 1100">
+				<div v-size="{ max: [500] }" class="ftskorzw" :class="{ wide: !narrow }">
+					<div class="main">
+						<!-- TODO -->
+						<!-- <div class="punished" v-if="user.isSuspended"><i class="fas fa-exclamation-triangle" style="margin-right: 8px;"></i> {{ $ts.userSuspended }}</div> -->
+						<!-- <div class="punished" v-if="user.isSilenced"><i class="fas fa-exclamation-triangle" style="margin-right: 8px;"></i> {{ $ts.userSilenced }}</div> -->
 
-					<div class="profile">
-						<MkRemoteCaution v-if="user.host != null" :href="user.url" class="warn"/>
+						<div class="profile">
+							<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="banner" 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">
+										<MkUserName class="name" :user="user" :nowrap="true"/>
+										<div class="bottom">
+											<span class="username"><MkAcct :user="user" :detail="true"/></span>
+											<span v-if="user.isAdmin" :title="$ts.isAdmin" style="color: var(--badge);"><i class="fas fa-bookmark"></i></span>
+											<span v-if="!user.isAdmin && user.isModerator" :title="$ts.isModerator" style="color: var(--badge);"><i class="far fa-bookmark"></i></span>
+											<span v-if="user.isLocked" :title="$ts.isLocked"><i class="fas fa-lock"></i></span>
+											<span v-if="user.isBot" :title="$ts.isBot"><i class="fas fa-robot"></i></span>
+										</div>
+									</div>
+									<span v-if="$i && $i.id != user.id && user.isFollowed" class="followed">{{ $ts.followsYou }}</span>
+									<div v-if="$i" class="actions">
+										<button class="menu _button" @click="menu"><i class="fas fa-ellipsis-h"></i></button>
+										<MkFollowButton v-if="$i.id != user.id" :user="user" :inline="true" :transparent="false" :full="true" class="koudoku"/>
+									</div>
+								</div>
+								<MkAvatar class="avatar" :user="user" :disable-preview="true" :show-indicator="true"/>
 								<div class="title">
-									<MkUserName class="name" :user="user" :nowrap="true"/>
+									<MkUserName :user="user" :nowrap="false" class="name"/>
 									<div class="bottom">
-										<span class="username"><MkAcct :user="user" :detail="true" /></span>
+										<span class="username"><MkAcct :user="user" :detail="true"/></span>
 										<span v-if="user.isAdmin" :title="$ts.isAdmin" style="color: var(--badge);"><i class="fas fa-bookmark"></i></span>
 										<span v-if="!user.isAdmin && user.isModerator" :title="$ts.isModerator" style="color: var(--badge);"><i class="far fa-bookmark"></i></span>
 										<span v-if="user.isLocked" :title="$ts.isLocked"><i class="fas fa-lock"></i></span>
 										<span v-if="user.isBot" :title="$ts.isBot"><i class="fas fa-robot"></i></span>
 									</div>
 								</div>
-								<span v-if="$i && $i.id != user.id && user.isFollowed" class="followed">{{ $ts.followsYou }}</span>
-								<div v-if="$i" class="actions">
-									<button class="menu _button" @click="menu"><i class="fas fa-ellipsis-h"></i></button>
-									<MkFollowButton v-if="$i.id != user.id" :user="user" :inline="true" :transparent="false" :full="true" class="koudoku"/>
+								<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">{{ $ts.noAccountDescription }}</p>
 								</div>
-							</div>
-							<MkAvatar class="avatar" :user="user" :disable-preview="true" :show-indicator="true"/>
-							<div class="title">
-								<MkUserName :user="user" :nowrap="false" class="name"/>
-								<div class="bottom">
-									<span class="username"><MkAcct :user="user" :detail="true" /></span>
-									<span v-if="user.isAdmin" :title="$ts.isAdmin" style="color: var(--badge);"><i class="fas fa-bookmark"></i></span>
-									<span v-if="!user.isAdmin && user.isModerator" :title="$ts.isModerator" style="color: var(--badge);"><i class="far fa-bookmark"></i></span>
-									<span v-if="user.isLocked" :title="$ts.isLocked"><i class="fas fa-lock"></i></span>
-									<span v-if="user.isBot" :title="$ts.isBot"><i class="fas fa-robot"></i></span>
+								<div class="fields system">
+									<dl v-if="user.location" class="field">
+										<dt class="name"><i class="fas fa-map-marker fa-fw"></i> {{ $ts.location }}</dt>
+										<dd class="value">{{ user.location }}</dd>
+									</dl>
+									<dl v-if="user.birthday" class="field">
+										<dt class="name"><i class="fas fa-birthday-cake fa-fw"></i> {{ $ts.birthday }}</dt>
+										<dd class="value">{{ user.birthday.replace('-', '/').replace('-', '/') }} ({{ $t('yearsOld', { age }) }})</dd>
+									</dl>
+									<dl class="field">
+										<dt class="name"><i class="fas fa-calendar-alt fa-fw"></i> {{ $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>{{ $ts.notes }}</span>
+									</MkA>
+									<MkA v-click-anime :to="userPage(user, 'following')" :class="{ active: page === 'following' }">
+										<b>{{ number(user.followingCount) }}</b>
+										<span>{{ $ts.following }}</span>
+									</MkA>
+									<MkA v-click-anime :to="userPage(user, 'followers')" :class="{ active: page === 'followers' }">
+										<b>{{ number(user.followersCount) }}</b>
+										<span>{{ $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">{{ $ts.noAccountDescription }}</p>
-							</div>
-							<div class="fields system">
-								<dl v-if="user.location" class="field">
-									<dt class="name"><i class="fas fa-map-marker fa-fw"></i> {{ $ts.location }}</dt>
-									<dd class="value">{{ user.location }}</dd>
-								</dl>
-								<dl v-if="user.birthday" class="field">
-									<dt class="name"><i class="fas fa-birthday-cake fa-fw"></i> {{ $ts.birthday }}</dt>
-									<dd class="value">{{ user.birthday.replace('-', '/').replace('-', '/') }} ({{ $t('yearsOld', { age }) }})</dd>
-								</dl>
-								<dl class="field">
-									<dt class="name"><i class="fas fa-calendar-alt fa-fw"></i> {{ $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>{{ $ts.notes }}</span>
-								</MkA>
-								<MkA v-click-anime :to="userPage(user, 'following')" :class="{ active: page === 'following' }">
-									<b>{{ number(user.followingCount) }}</b>
-									<span>{{ $ts.following }}</span>
-								</MkA>
-								<MkA v-click-anime :to="userPage(user, 'followers')" :class="{ active: page === 'followers' }">
-									<b>{{ number(user.followersCount) }}</b>
-									<span>{{ $ts.followers }}</span>
-								</MkA>
 							</div>
 						</div>
-					</div>
 
-					<div class="contents">
-						<template v-if="page === 'index'">
-							<div>
-								<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">
+							<template v-if="page === 'index'">
+								<div>
+									<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">{{ $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>
-								<MkInfo v-else-if="$i && $i.id === user.id">{{ $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>
-						</template>
-						<XFollowList v-else-if="page === 'following'" type="following" :user="user" class="_content _gap"/>
-						<XFollowList v-else-if="page === 'followers'" type="followers" :user="user" class="_content _gap"/>
-						<XReactions v-else-if="page === 'reactions'" :user="user" class="_gap"/>
-						<XClips v-else-if="page === 'clips'" :user="user" class="_gap"/>
-						<XPages v-else-if="page === 'pages'" :user="user" class="_gap"/>
-						<XGallery v-else-if="page === 'gallery'" :user="user" class="_gap"/>
+								<div>
+									<XUserTimeline :user="user"/>
+								</div>
+							</template>
+							<XFollowList v-else-if="page === 'following'" type="following" :user="user" class="_content _gap"/>
+							<XFollowList v-else-if="page === 'followers'" type="followers" :user="user" class="_content _gap"/>
+							<XReactions v-else-if="page === 'reactions'" :user="user" class="_gap"/>
+							<XClips v-else-if="page === 'clips'" :user="user" class="_gap"/>
+							<XPages v-else-if="page === 'pages'" :user="user" class="_gap"/>
+							<XGallery v-else-if="page === 'gallery'" :user="user" class="_gap"/>
+						</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>
-				<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>
-		<MkError v-else-if="error" @retry="fetch()"/>
-		<MkLoading v-else/>
-	</transition>
-</div>
+			</MkSpacer>
+			<MkError v-else-if="error" @retry="fetch()"/>
+			<MkLoading v-else/>
+		</transition>
+	</div>
+</MkStickyContainer>
 </template>
 
-<script lang="ts">
-import { defineComponent, defineAsyncComponent, computed } from 'vue';
-import age from 's-age';
+<script lang="ts" setup>
+import { defineAsyncComponent, computed, inject, onMounted, onUnmounted, watch } from 'vue';
+import calcAge from 's-age';
+import * as Acct from 'misskey-js/built/acct';
+import * as misskey from 'misskey-js';
 import XUserTimeline from './index.timeline.vue';
 import XNote from '@/components/note.vue';
 import MkFollowButton from '@/components/follow-button.vue';
@@ -134,164 +139,140 @@ import MkFolder from '@/components/ui/folder.vue';
 import MkRemoteCaution from '@/components/remote-caution.vue';
 import MkTab from '@/components/tab.vue';
 import MkInfo from '@/components/ui/info.vue';
-import * as Acct from 'misskey-js/built/acct';
 import { getScrollPosition } from '@/scripts/scroll';
 import { getUserMenu } from '@/scripts/get-user-menu';
 import number from '@/filters/number';
 import { userPage, acct as getAcct } from '@/filters/user';
 import * as os from '@/os';
-import * as symbols from '@/symbols';
-import { MisskeyNavigator } from '@/scripts/navigate';
+import { useRouter } from '@/router';
+import { definePageMetadata } from '@/scripts/page-metadata';
+import { i18n } from '@/i18n';
+import { $i } from '@/account';
 
-export default defineComponent({
-	components: {
-		XUserTimeline,
-		XNote,
-		MkFollowButton,
-		MkContainer,
-		MkRemoteCaution,
-		MkFolder,
-		MkTab,
-		MkInfo,
-		XFollowList: defineAsyncComponent(() => import('./follow-list.vue')),
-		XReactions: defineAsyncComponent(() => import('./reactions.vue')),
-		XClips: defineAsyncComponent(() => import('./clips.vue')),
-		XPages: defineAsyncComponent(() => import('./pages.vue')),
-		XGallery: defineAsyncComponent(() => import('./gallery.vue')),
-		XPhotos: defineAsyncComponent(() => import('./index.photos.vue')),
-		XActivity: defineAsyncComponent(() => import('./index.activity.vue')),
-	},
+const XFollowList = defineAsyncComponent(() => import('./follow-list.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 XPhotos = defineAsyncComponent(() => import('./index.photos.vue'));
+const XActivity = defineAsyncComponent(() => import('./index.activity.vue'));
 
-	props: {
-		acct: {
-			type: String,
-			required: true
-		},
-		page: {
-			type: String,
-			required: false,
-			default: 'index'
-		}
-	},
+const props = withDefaults(defineProps<{
+	acct: string;
+	page?: string;
+}>(), {
+	page: 'index',
+});
 
-	data() {
-		return {
-			[symbols.PAGE_INFO]: computed(() => this.user ? {
-				icon: 'fas fa-user',
-				title: this.user.name ? `${this.user.name} (@${this.user.username})` : `@${this.user.username}`,
-				subtitle: `@${getAcct(this.user)}`,
-				userName: this.user,
-				avatar: this.user,
-				path: `/@${this.user.username}`,
-				share: {
-					title: this.user.name,
-				},
-				bg: 'var(--bg)',
-				tabs: [{
-					active: this.page === 'index',
-					title: this.$ts.overview,
-					icon: 'fas fa-home',
-					onClick: () => { this.mkNav.push('/@' + getAcct(this.user)); },
-				}, ...(this.$i && (this.$i.id === this.user.id)) || this.user.publicReactions ? [{
-					active: this.page === 'reactions',
-					title: this.$ts.reaction,
-					icon: 'fas fa-laugh',
-					onClick: () => { this.mkNav.push('/@' + getAcct(this.user) + '/reactions'); },
-				}] : [], {
-					active: this.page === 'clips',
-					title: this.$ts.clips,
-					icon: 'fas fa-paperclip',
-					onClick: () => { this.mkNav.push('/@' + getAcct(this.user) + '/clips'); },
-				}, {
-					active: this.page === 'pages',
-					title: this.$ts.pages,
-					icon: 'fas fa-file-alt',
-					onClick: () => { this.mkNav.push('/@' + getAcct(this.user) + '/pages'); },
-				}, {
-					active: this.page === 'gallery',
-					title: this.$ts.gallery,
-					icon: 'fas fa-icons',
-					onClick: () => { this.mkNav.push('/@' + getAcct(this.user) + '/gallery'); },
-				}],
-			} : null),
-			user: null,
-			error: null,
-			parallaxAnimationId: null,
-			narrow: null,
-			mkNav: new MisskeyNavigator(),
-		};
-	},
+const router = useRouter();
 
-	computed: {
-		style(): any {
-			if (this.user.bannerUrl == null) return {};
-			return {
-				backgroundImage: `url(${ this.user.bannerUrl })`
-			};
-		},
+let user = $ref<null | misskey.entities.UserDetailed>(null);
+let error = $ref(null);
+let parallaxAnimationId = $ref<null | number>(null);
+let narrow = $ref<null | boolean>(null);
+let rootEl = $ref<null | HTMLElement>(null);
+let bannerEl = $ref<null | HTMLElement>(null);
 
-		age(): number {
-			return age(this.user.birthday);
-		}
-	},
+const style = $computed(() => {
+	if (user?.bannerUrl == null) return {};
+	return {
+		backgroundImage: `url(${ user.bannerUrl })`,
+	};
+});
 
-	watch: {
-		acct: 'fetch'
-	},
+const age = $computed(() => {
+	if (user == null) return null;
+	return calcAge(user.birthday);
+});
 
-	created() {
-		this.fetch();
-	},
+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;
+	});
+}
 
-	mounted() {
-		window.requestAnimationFrame(this.parallaxLoop);
-		this.narrow = this.$el.clientWidth < 1000;
-	},
+watch(() => props.acct, fetchUser, {
+	immediate: true,
+});
 
-	beforeUnmount() {
-		window.cancelAnimationFrame(this.parallaxAnimationId);
-	},
+function menu(ev) {
+	os.popupMenu(getUserMenu(user), ev.currentTarget ?? ev.target);
+}
 
-	methods: {
-		getAcct,
+function parallaxLoop() {
+	parallaxAnimationId = window.requestAnimationFrame(parallaxLoop);
+	parallax();
+}
 
-		fetch() {
-			if (this.acct == null) return;
-			this.user = null;
-			os.api('users/show', Acct.parse(this.acct)).then(user => {
-				this.user = user;
-			}).catch(err => {
-				this.error = err;
-			});
-		},
+function parallax() {
+	const banner = bannerEl as any;
+	if (banner == null) return;
 
-		menu(ev) {
-			os.popupMenu(getUserMenu(this.user), ev.currentTarget ?? ev.target);
-		},
+	const top = getScrollPosition(rootEl);
 
-		parallaxLoop() {
-			this.parallaxAnimationId = window.requestAnimationFrame(this.parallaxLoop);
-			this.parallax();
-		},
+	if (top < 0) return;
 
-		parallax() {
-			const banner = this.$refs.banner as any;
-			if (banner == null) return;
+	const z = 1.75; // 奥行き(小さいほど奥)
+	const pos = -(top / z);
+	banner.style.backgroundPosition = `center calc(50% - ${pos}px)`;
+}
 
-			const top = getScrollPosition(this.$el);
+onMounted(() => {
+	window.requestAnimationFrame(parallaxLoop);
+	narrow = rootEl!.clientWidth < 1000;
+});
 
-			if (top < 0) return;
-
-			const z = 1.75; // 奥行き(小さいほど奥)
-			const pos = -(top / z);
-			banner.style.backgroundPosition = `center calc(50% - ${pos}px)`;
-		},
-
-		number,
-
-		userPage
+onUnmounted(() => {
+	if (parallaxAnimationId) {
+		window.cancelAnimationFrame(parallaxAnimationId);
 	}
 });
+
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => user ? [{
+	active: props.page === 'index',
+	title: i18n.ts.overview,
+	icon: 'fas fa-home',
+	onClick: () => { router.push('/@' + getAcct(user)); },
+}, ...($i && ($i.id === user.id)) || user.publicReactions ? [{
+	active: props.page === 'reactions',
+	title: i18n.ts.reaction,
+	icon: 'fas fa-laugh',
+	onClick: () => { router.push('/@' + getAcct(user) + '/reactions'); },
+}] : [], {
+	active: props.page === 'clips',
+	title: i18n.ts.clips,
+	icon: 'fas fa-paperclip',
+	onClick: () => { router.push('/@' + getAcct(user) + '/clips'); },
+}, {
+	active: props.page === 'pages',
+	title: i18n.ts.pages,
+	icon: 'fas fa-file-alt',
+	onClick: () => { router.push('/@' + getAcct(user) + '/pages'); },
+}, {
+	active: props.page === 'gallery',
+	title: i18n.ts.gallery,
+	icon: 'fas fa-icons',
+	onClick: () => { router.push('/@' + getAcct(user) + '/gallery'); },
+}] : null);
+
+definePageMetadata(computed(() => user ? {
+	icon: 'fas fa-user',
+	title: user.name ? `${user.name} (@${user.username})` : `@${user.username}`,
+	subtitle: `@${getAcct(user)}`,
+	userName: user,
+	avatar: user,
+	path: `/@${user.username}`,
+	share: {
+		title: user.name,
+	},
+	bg: 'var(--bg)',
+} : null));
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/pages/welcome.vue b/packages/client/src/pages/welcome.vue
index 98808229da..a1c3fc2abb 100644
--- a/packages/client/src/pages/welcome.vue
+++ b/packages/client/src/pages/welcome.vue
@@ -11,7 +11,7 @@ import XSetup from './welcome.setup.vue';
 import XEntrance from './welcome.entrance.a.vue';
 import { instanceName } from '@/config';
 import * as os from '@/os';
-import * as symbols from '@/symbols';
+import { definePageMetadata } from '@/scripts/page-metadata';
 
 let meta = $ref(null);
 
@@ -19,10 +19,12 @@ os.api('meta', { detail: true }).then(res => {
 	meta = res;
 });
 
-defineExpose({
-	[symbols.PAGE_INFO]: computed(() => ({
-		title: instanceName,
-		icon: null,
-	})),
-});
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata(computed(() => ({
+	title: instanceName,
+	icon: null,
+})));
 </script>
diff --git a/packages/client/src/router.ts b/packages/client/src/router.ts
index 7e16c35d2b..769d9cb2ac 100644
--- a/packages/client/src/router.ts
+++ b/packages/client/src/router.ts
@@ -1,147 +1,253 @@
-import { AsyncComponentLoader, defineAsyncComponent, markRaw } from 'vue';
-import { createRouter, createWebHistory } from 'vue-router';
-import { $i, iAmModerator } from './account';
+import { AsyncComponentLoader, defineAsyncComponent, inject } from 'vue';
+import { Router } from '@/nirax';
+import { $i, iAmModerator } from '@/account';
 import MkLoading from '@/pages/_loading_.vue';
 import MkError from '@/pages/_error_.vue';
-import MkTimeline from '@/pages/timeline.vue';
 import { ui } from '@/config';
 
-// pathに/が入るとrollupが解決してくれないので、() => import('*.vue')を指定すること
-const page = (path: string | AsyncComponentLoader<any>, uiName?: string) => defineAsyncComponent({
-	loader: typeof path === 'string' ? uiName ? () => import(`./ui/${ui}/pages/${path}.vue`) : () => import(`./pages/${path}.vue`) : path,
+const page = (loader: AsyncComponentLoader<any>) => defineAsyncComponent({
+	loader: loader,
 	loadingComponent: MkLoading,
 	errorComponent: MkError,
 });
 
-let indexScrollPos = 0;
-
-const defaultRoutes = [
-	// NOTE: MkTimelineをdynamic importするとAsyncComponentWrapperが間に入るせいでkeep-aliveのコンポーネント指定が効かなくなる
-	{ path: '/', name: 'index', component: $i ? MkTimeline : page('welcome') },
-	{ path: '/@:acct/:page?', name: 'user', component: page(() => import('./pages/user/index.vue')), props: route => ({ acct: route.params.acct, page: route.params.page || 'index' }) },
-	{ path: '/@:user/pages/:page', component: page('page'), props: route => ({ pageName: route.params.page, username: route.params.user }) },
-	{ path: '/@:user/pages/:pageName/view-source', component: page(() => import('./pages/page-editor/page-editor.vue')), props: route => ({ initUser: route.params.user, initPageName: route.params.pageName }) },
-	{ path: '/settings/:page(.*)?', name: 'settings', component: page(() => import('./pages/settings/index.vue')), props: route => ({ initialPage: route.params.page || null }) },
-	{ path: '/reset-password/:token?', component: page('reset-password'), props: route => ({ token: route.params.token }) },
-	{ path: '/signup-complete/:code', component: page('signup-complete'), props: route => ({ code: route.params.code }) },
-	{ path: '/announcements', component: page('announcements') },
-	{ path: '/about', component: page('about') },
-	{ path: '/about-misskey', component: page('about-misskey') },
-	{ path: '/featured', component: page('featured') },
-	{ path: '/theme-editor', component: page('theme-editor') },
-	{ path: '/advanced-theme-editor', component: page('advanced-theme-editor') },
-	{ path: '/explore', component: page('explore') },
-	{ path: '/explore/tags/:tag', props: true, component: page('explore') },
-	{ path: '/federation', component: page('federation') },
-	{ path: '/emojis', component: page('emojis') },
-	{ path: '/search', component: page('search'), props: route => ({ query: route.query.q, channel: route.query.channel }) },
-	{ path: '/pages', name: 'pages', component: page('pages') },
-	{ path: '/pages/new', component: page(() => import('./pages/page-editor/page-editor.vue')) },
-	{ path: '/pages/edit/:pageId', component: page(() => import('./pages/page-editor/page-editor.vue')), props: route => ({ initPageId: route.params.pageId }) },
-	{ path: '/gallery', component: page(() => import('./pages/gallery/index.vue')) },
-	{ path: '/gallery/new', component: page(() => import('./pages/gallery/edit.vue')) },
-	{ path: '/gallery/:postId/edit', component: page(() => import('./pages/gallery/edit.vue')), props: route => ({ postId: route.params.postId }) },
-	{ path: '/gallery/:postId', component: page(() => import('./pages/gallery/post.vue')), props: route => ({ postId: route.params.postId }) },
-	{ path: '/channels', component: page('channels') },
-	{ path: '/channels/new', component: page('channel-editor') },
-	{ path: '/channels/:channelId/edit', component: page('channel-editor'), props: true },
-	{ path: '/channels/:channelId', component: page('channel'), props: route => ({ channelId: route.params.channelId }) },
-	{ path: '/clips/:clipId', component: page('clip'), props: route => ({ clipId: route.params.clipId }) },
-	{ path: '/timeline/list/:listId', component: page('user-list-timeline'), props: route => ({ listId: route.params.listId }) },
-	{ path: '/timeline/antenna/:antennaId', component: page('antenna-timeline'), props: route => ({ antennaId: route.params.antennaId }) },
-	{ path: '/my/notifications', component: page('notifications') },
-	{ path: '/my/favorites', component: page('favorites') },
-	{ path: '/my/messages', component: page('messages') },
-	{ path: '/my/mentions', component: page('mentions') },
-	{ path: '/my/messaging', name: 'messaging', component: page(() => import('./pages/messaging/index.vue')) },
-	{ path: '/my/messaging/:user', component: page(() => import('./pages/messaging/messaging-room.vue')), props: route => ({ userAcct: route.params.user }) },
-	{ path: '/my/messaging/group/:group', component: page(() => import('./pages/messaging/messaging-room.vue')), props: route => ({ groupId: route.params.group }) },
-	{ path: '/my/drive', name: 'drive', component: page('drive') },
-	{ path: '/my/drive/folder/:folder', component: page('drive') },
-	{ path: '/my/follow-requests', component: page('follow-requests') },
-	{ path: '/my/lists', component: page(() => import('./pages/my-lists/index.vue')) },
-	{ path: '/my/lists/:list', component: page(() => import('./pages/my-lists/list.vue')) },
-	{ path: '/my/groups', component: page(() => import('./pages/my-groups/index.vue')) },
-	{ path: '/my/groups/:group', component: page(() => import('./pages/my-groups/group.vue')), props: route => ({ groupId: route.params.group }) },
-	{ path: '/my/antennas', component: page(() => import('./pages/my-antennas/index.vue')) },
-	{ path: '/my/antennas/create', component: page(() => import('./pages/my-antennas/create.vue')) },
-	{ path: '/my/antennas/:antennaId', component: page(() => import('./pages/my-antennas/edit.vue')), props: true },
-	{ path: '/my/clips', component: page(() => import('./pages/my-clips/index.vue')) },
-	{ path: '/scratchpad', component: page('scratchpad') },
-	{ path: '/admin/:page(.*)?', component: iAmModerator ? page(() => import('./pages/admin/index.vue')) : page('not-found'), props: route => ({ initialPage: route.params.page || null }) },
-	{ path: '/admin', component: iAmModerator ? page(() => import('./pages/admin/index.vue')) : page('not-found') },
-	{ path: '/admin-file/:fileId', component: page('admin-file'), props: route => ({ fileId: route.params.fileId }) },
-	{ path: '/notes/:note', name: 'note', component: page('note'), props: route => ({ noteId: route.params.note }) },
-	{ path: '/tags/:tag', component: page('tag'), props: route => ({ tag: route.params.tag }) },
-	{ path: '/user-info/:user', component: page('user-info'), props: route => ({ userId: route.params.user }) },
-	{ path: '/instance-info/:host', component: page('instance-info'), props: route => ({ host: route.params.host }) },
-	{ path: '/mfm-cheat-sheet', component: page('mfm-cheat-sheet') },
-	{ path: '/api-console', component: page('api-console') },
-	{ path: '/preview', component: page('preview') },
-	{ path: '/test', component: page('test') },
-	{ path: '/auth/:token', component: page('auth') },
-	{ path: '/miauth/:session', component: page('miauth') },
-	{ path: '/authorize-follow', component: page('follow') },
-	{ path: '/share', component: page('share') },
-	{ path: '/:catchAll(.*)', component: page('not-found') },
-];
-
-const chatRoutes = [
-	{ path: '/timeline', component: page('timeline', 'chat'), props: route => ({ src: 'home' }) },
-	{ path: '/timeline/home', component: page('timeline', 'chat'), props: route => ({ src: 'home' }) },
-	{ path: '/timeline/local', component: page('timeline', 'chat'), props: route => ({ src: 'local' }) },
-	{ path: '/timeline/social', component: page('timeline', 'chat'), props: route => ({ src: 'social' }) },
-	{ path: '/timeline/global', component: page('timeline', 'chat'), props: route => ({ src: 'global' }) },
-	{ path: '/channels/:channelId', component: page('channel', 'chat'), props: route => ({ channelId: route.params.channelId }) },
-];
-
-function margeRoutes(routes: any[]) {
-	const result = defaultRoutes;
-	for (const route of routes) {
-		const found = result.findIndex(x => x.path === route.path);
-		if (found > -1) {
-			result[found] = route;
-		} else {
-			result.unshift(route);
-		}
-	}
-	return result;
-}
-
-export const router = createRouter({
-	history: createWebHistory(),
-	routes: margeRoutes(ui === 'chat' ? chatRoutes : []),
-	// なんかHacky
-	// 通常の使い方をすると scroll メソッドの behavior を設定できないため、自前で window.scroll するようにする
-	scrollBehavior(to) {
-		window._scroll = () => { // さらにHacky
-			if (to.name === 'index') {
-				window.scroll({ top: indexScrollPos, behavior: 'instant' });
-				const i = window.setInterval(() => {
-					window.scroll({ top: indexScrollPos, behavior: 'instant' });
-				}, 10);
-				window.setTimeout(() => {
-					window.clearInterval(i);
-				}, 500);
-			} else {
-				window.scroll({ top: 0, behavior: 'instant' });
-			}
-		};
+export const routes = [{
+	name: 'user',
+	path: '/@:acct/:page?',
+	component: page(() => import('./pages/user/index.vue')),
+}, {
+	path: '/@:initUser/pages/:initPageName/view-source',
+	component: page(() => import('./pages/page-editor/page-editor.vue')),
+}, {
+	path: '/@:username/pages/:pageName',
+	component: page(() => import('./pages/page.vue')),
+}, {
+	name: 'note',
+	path: '/notes/:noteId',
+	component: page(() => import('./pages/note.vue')),
+}, {
+	path: '/clips/:clipId',
+	component: page(() => import('./pages/clip.vue')),
+}, {
+	path: '/user-info/:userId',
+	component: page(() => import('./pages/user-info.vue')),
+}, {
+	path: '/instance-info/:host',
+	component: page(() => import('./pages/instance-info.vue')),
+}, {
+	name: 'settings',
+	path: '/settings/:initialPage(*)?',
+	component: page(() => import('./pages/settings/index.vue')),
+}, {
+	path: '/reset-password/:token?',
+	component: page(() => import('./pages/reset-password.vue')),
+}, {
+	path: '/signup-complete/:code',
+	component: page(() => import('./pages/signup-complete.vue')),
+}, {
+	path: '/announcements',
+	component: page(() => import('./pages/announcements.vue')),
+}, {
+	path: '/about',
+	component: page(() => import('./pages/about.vue')),
+}, {
+	path: '/about-misskey',
+	component: page(() => import('./pages/about-misskey.vue')),
+}, {
+	path: '/featured',
+	component: page(() => import('./pages/featured.vue')),
+}, {
+	path: '/theme-editor',
+	component: page(() => import('./pages/theme-editor.vue')),
+}, {
+	path: '/explore/tags/:tag',
+	component: page(() => import('./pages/explore.vue')),
+}, {
+	path: '/explore',
+	component: page(() => import('./pages/explore.vue')),
+}, {
+	path: '/federation',
+	component: page(() => import('./pages/federation.vue')),
+}, {
+	path: '/emojis',
+	component: page(() => import('./pages/emojis.vue')),
+}, {
+	path: '/search',
+	component: page(() => import('./pages/search.vue')),
+	query: {
+		q: 'query',
+		channel: 'channel',
 	},
-});
+}, {
+	path: '/authorize-follow',
+	component: page(() => import('./pages/follow.vue')),
+}, {
+	path: '/share',
+	component: page(() => import('./pages/share.vue')),
+}, {
+	path: '/api-console',
+	component: page(() => import('./pages/api-console.vue')),
+}, {
+	path: '/mfm-cheat-sheet',
+	component: page(() => import('./pages/mfm-cheat-sheet.vue')),
+}, {
+	path: '/scratchpad',
+	component: page(() => import('./pages/scratchpad.vue')),
+}, {
+	path: '/preview',
+	component: page(() => import('./pages/preview.vue')),
+}, {
+	path: '/auth/:token',
+	component: page(() => import('./pages/auth.vue')),
+}, {
+	path: '/miauth/:session',
+	component: page(() => import('./pages/miauth.vue')),
+	query: {
+		callback: 'callback',
+		name: 'name',
+		icon: 'icon',
+		permission: 'permission',
+	},
+}, {
+	path: '/tags/:tag',
+	component: page(() => import('./pages/tag.vue')),
+}, {
+	path: '/pages/new',
+	component: page(() => import('./pages/page-editor/page-editor.vue')),
+}, {
+	path: '/pages/edit/:initPageId',
+	component: page(() => import('./pages/page-editor/page-editor.vue')),
+}, {
+	path: '/pages',
+	component: page(() => import('./pages/pages.vue')),
+}, {
+	path: '/gallery/:postId/edit',
+	component: page(() => import('./pages/gallery/edit.vue')),
+}, {
+	path: '/gallery/new',
+	component: page(() => import('./pages/gallery/edit.vue')),
+}, {
+	path: '/gallery/:postId',
+	component: page(() => import('./pages/gallery/post.vue')),
+}, {
+	path: '/gallery',
+	component: page(() => import('./pages/gallery/index.vue')),
+}, {
+	path: '/channels/:channelId/edit',
+	component: page(() => import('./pages/channel-editor.vue')),
+}, {
+	path: '/channels/new',
+	component: page(() => import('./pages/channel-editor.vue')),
+}, {
+	path: '/channels/:channelId',
+	component: page(() => import('./pages/channel.vue')),
+}, {
+	path: '/channels',
+	component: page(() => import('./pages/channels.vue')),
+}, {
+	path: '/admin/file/:fileId',
+	component: iAmModerator ? page(() => import('./pages/admin-file.vue')) : page(() => import('./pages/not-found.vue')),
+}, {
+	path: '/admin/:initialPage(*)?',
+	component: iAmModerator ? page(() => import('./pages/admin/index.vue')) : page(() => import('./pages/not-found.vue')),
+}, {
+	path: '/my/notifications',
+	component: page(() => import('./pages/notifications.vue')),
+}, {
+	path: '/my/favorites',
+	component: page(() => import('./pages/favorites.vue')),
+}, {
+	path: '/my/messages',
+	component: page(() => import('./pages/messages.vue')),
+}, {
+	path: '/my/mentions',
+	component: page(() => import('./pages/mentions.vue')),
+}, {
+	name: 'messaging',
+	path: '/my/messaging',
+	component: page(() => import('./pages/messaging/index.vue')),
+}, {
+	path: '/my/messaging/:userAcct',
+	component: page(() => import('./pages/messaging/messaging-room.vue')),
+}, {
+	path: '/my/messaging/group/:groupId',
+	component: page(() => import('./pages/messaging/messaging-room.vue')),
+}, {
+	path: '/my/drive/folder/:folder',
+	component: page(() => import('./pages/drive.vue')),
+}, {
+	path: '/my/drive',
+	component: page(() => import('./pages/drive.vue')),
+}, {
+	path: '/my/follow-requests',
+	component: page(() => import('./pages/follow-requests.vue')),
+}, {
+	path: '/my/lists/:listId',
+	component: page(() => import('./pages/my-lists/list.vue')),
+}, {
+	path: '/my/lists',
+	component: page(() => import('./pages/my-lists/index.vue')),
+}, {
+	path: '/my/clips',
+	component: page(() => import('./pages/my-clips/index.vue')),
+}, {
+	path: '/my/antennas/create',
+	component: page(() => import('./pages/my-antennas/create.vue')),
+}, {
+	path: '/my/antennas/:antennaId',
+	component: page(() => import('./pages/my-antennas/edit.vue')),
+}, {
+	path: '/my/antennas',
+	component: page(() => import('./pages/my-antennas/index.vue')),
+}, {
+	path: '/timeline/list/:listId',
+	component: page(() => import('./pages/user-list-timeline.vue')),
+}, {
+	path: '/timeline/antenna/:antennaId',
+	component: page(() => import('./pages/antenna-timeline.vue')),
+}, {
+	name: 'index',
+	path: '/',
+	component: $i ? page(() => import('./pages/timeline.vue')) : page(() => import('./pages/welcome.vue')),
+	globalCacheKey: 'index',
+}, {
+	path: '/(*)',
+	component: page(() => import('./pages/not-found.vue')),
+}];
 
-router.afterEach((to, from) => {
-	if (from.name === 'index') {
-		indexScrollPos = window.scrollY;
+export const mainRouter = new Router(routes, location.pathname + location.search);
+
+window.history.replaceState({ key: mainRouter.getCurrentKey() }, '', location.href);
+
+// TODO: このファイルでスクロール位置も管理する設計だとdeckに対応できないのでなんとかする
+// スクロール位置取得+スクロール位置設定関数をprovideする感じでも良いかも
+
+const scrollPosStore = new Map<string, number>();
+
+window.setInterval(() => {
+	scrollPosStore.set(window.history.state?.key, window.scrollY);
+}, 1000);
+
+mainRouter.addListener('push', ctx => {
+	window.history.pushState({ key: ctx.key }, '', ctx.path);
+	const scrollPos = scrollPosStore.get(ctx.key) ?? 0;
+	window.scroll({ top: scrollPos, behavior: 'instant' });
+	if (scrollPos !== 0) {
+		window.setTimeout(() => { // 遷移直後はタイミングによってはコンポーネントが復元し切ってない可能性も考えられるため少し時間を空けて再度スクロール
+			window.scroll({ top: scrollPos, behavior: 'instant' });
+		}, 1000);
 	}
 });
 
-export function resolve(path: string) {
-	const resolved = router.resolve(path);
-	const route = resolved.matched[0];
-	return {
-		component: markRaw(route.components.default),
-		// TODO: route.propsには関数以外も入る可能性があるのでよしなにハンドリングする
-		props: route.props.default ? route.props.default(resolved) : resolved.params,
-	};
+window.addEventListener('popstate', (event) => {
+	mainRouter.change(location.pathname + location.search, event.state?.key);
+	const scrollPos = scrollPosStore.get(event.state?.key) ?? 0;
+	window.scroll({ top: scrollPos, behavior: 'instant' });
+	window.setTimeout(() => { // 遷移直後はタイミングによってはコンポーネントが復元し切ってない可能性も考えられるため少し時間を空けて再度スクロール
+		window.scroll({ top: scrollPos, behavior: 'instant' });
+	}, 1000);
+});
+
+export function useRouter(): Router {
+	return inject<Router | null>('router', null) ?? mainRouter;
 }
diff --git a/packages/client/src/scripts/get-user-menu.ts b/packages/client/src/scripts/get-user-menu.ts
index 091338efd6..25bcd90e9f 100644
--- a/packages/client/src/scripts/get-user-menu.ts
+++ b/packages/client/src/scripts/get-user-menu.ts
@@ -1,12 +1,12 @@
+import * as Acct from 'misskey-js/built/acct';
+import { defineAsyncComponent } from 'vue';
 import { i18n } from '@/i18n';
 import copyToClipboard from '@/scripts/copy-to-clipboard';
 import { host } from '@/config';
-import * as Acct from 'misskey-js/built/acct';
 import * as os from '@/os';
 import { userActions } from '@/store';
-import { router } from '@/router';
 import { $i, iAmModerator } from '@/account';
-import { defineAsyncComponent } from 'vue';
+import { mainRouter } from '@/router';
 
 export function getUserMenu(user) {
 	const meId = $i ? $i.id : null;
@@ -17,20 +17,20 @@ export function getUserMenu(user) {
 		if (lists.length === 0) {
 			os.alert({
 				type: 'error',
-				text: i18n.ts.youHaveNoLists
+				text: i18n.ts.youHaveNoLists,
 			});
 			return;
 		}
 		const { canceled, result: listId } = await os.select({
 			title: t,
 			items: lists.map(list => ({
-				value: list.id, text: list.name
-			}))
+				value: list.id, text: list.name,
+			})),
 		});
 		if (canceled) return;
 		os.apiWithDialog('users/lists/push', {
 			listId: listId,
-			userId: user.id
+			userId: user.id,
 		});
 	}
 
@@ -39,20 +39,20 @@ export function getUserMenu(user) {
 		if (groups.length === 0) {
 			os.alert({
 				type: 'error',
-				text: i18n.ts.youHaveNoGroups
+				text: i18n.ts.youHaveNoGroups,
 			});
 			return;
 		}
 		const { canceled, result: groupId } = await os.select({
 			title: i18n.ts.group,
 			items: groups.map(group => ({
-				value: group.id, text: group.name
-			}))
+				value: group.id, text: group.name,
+			})),
 		});
 		if (canceled) return;
 		os.apiWithDialog('users/groups/invite', {
 			groupId: groupId,
-			userId: user.id
+			userId: user.id,
 		});
 	}
 
@@ -101,7 +101,7 @@ export function getUserMenu(user) {
 		if (!await getConfirmed(user.isBlocking ? i18n.ts.unblockConfirm : i18n.ts.blockConfirm)) return;
 
 		os.apiWithDialog(user.isBlocking ? 'blocking/delete' : 'blocking/create', {
-			userId: user.id
+			userId: user.id,
 		}).then(() => {
 			user.isBlocking = !user.isBlocking;
 		});
@@ -111,7 +111,7 @@ export function getUserMenu(user) {
 		if (!await getConfirmed(i18n.t(user.isSilenced ? 'unsilenceConfirm' : 'silenceConfirm'))) return;
 
 		os.apiWithDialog(user.isSilenced ? 'admin/unsilence-user' : 'admin/silence-user', {
-			userId: user.id
+			userId: user.id,
 		}).then(() => {
 			user.isSilenced = !user.isSilenced;
 		});
@@ -121,7 +121,7 @@ export function getUserMenu(user) {
 		if (!await getConfirmed(i18n.t(user.isSuspended ? 'unsuspendConfirm' : 'suspendConfirm'))) return;
 
 		os.apiWithDialog(user.isSuspended ? 'admin/unsuspend-user' : 'admin/suspend-user', {
-			userId: user.id
+			userId: user.id,
 		}).then(() => {
 			user.isSuspended = !user.isSuspended;
 		});
@@ -145,7 +145,7 @@ export function getUserMenu(user) {
 
 	async function invalidateFollow() {
 		os.apiWithDialog('following/invalidate', {
-			userId: user.id
+			userId: user.id,
 		}).then(() => {
 			user.isFollowed = !user.isFollowed;
 		});
@@ -156,19 +156,19 @@ export function getUserMenu(user) {
 		text: i18n.ts.copyUsername,
 		action: () => {
 			copyToClipboard(`@${user.username}@${user.host || host}`);
-		}
+		},
 	}, {
 		icon: 'fas fa-info-circle',
 		text: i18n.ts.info,
 		action: () => {
 			os.pageWindow(`/user-info/${user.id}`);
-		}
+		},
 	}, {
 		icon: 'fas fa-envelope',
 		text: i18n.ts.sendMessage,
 		action: () => {
 			os.post({ specified: user });
-		}
+		},
 	}, meId !== user.id ? {
 		type: 'link',
 		icon: 'fas fa-comments',
@@ -177,47 +177,47 @@ export function getUserMenu(user) {
 	} : undefined, null, {
 		icon: 'fas fa-list-ul',
 		text: i18n.ts.addToList,
-		action: pushList
+		action: pushList,
 	}, meId !== user.id ? {
 		icon: 'fas fa-users',
 		text: i18n.ts.inviteToGroup,
-		action: inviteGroup
+		action: inviteGroup,
 	} : undefined] as any;
 
 	if ($i && meId !== user.id) {
 		menu = menu.concat([null, {
 			icon: user.isMuted ? 'fas fa-eye' : 'fas fa-eye-slash',
 			text: user.isMuted ? i18n.ts.unmute : i18n.ts.mute,
-			action: toggleMute
+			action: toggleMute,
 		}, {
 			icon: 'fas fa-ban',
 			text: user.isBlocking ? i18n.ts.unblock : i18n.ts.block,
-			action: toggleBlock
+			action: toggleBlock,
 		}]);
 
 		if (user.isFollowed) {
 			menu = menu.concat([{
 				icon: 'fas fa-unlink',
 				text: i18n.ts.breakFollow,
-				action: invalidateFollow
+				action: invalidateFollow,
 			}]);
 		}
 
 		menu = menu.concat([null, {
 			icon: 'fas fa-exclamation-circle',
 			text: i18n.ts.reportAbuse,
-			action: reportAbuse
+			action: reportAbuse,
 		}]);
 
 		if (iAmModerator) {
 			menu = menu.concat([null, {
 				icon: 'fas fa-microphone-slash',
 				text: user.isSilenced ? i18n.ts.unsilence : i18n.ts.silence,
-				action: toggleSilence
+				action: toggleSilence,
 			}, {
 				icon: 'fas fa-snowflake',
 				text: user.isSuspended ? i18n.ts.unsuspend : i18n.ts.suspend,
-				action: toggleSuspend
+				action: toggleSuspend,
 			}]);
 		}
 	}
@@ -227,8 +227,8 @@ export function getUserMenu(user) {
 			icon: 'fas fa-pencil-alt',
 			text: i18n.ts.editProfile,
 			action: () => {
-				router.push('/settings/profile');
-			}
+				mainRouter.push('/settings/profile');
+			},
 		}]);
 	}
 
@@ -238,7 +238,7 @@ export function getUserMenu(user) {
 			text: action.title,
 			action: () => {
 				action.handler(user);
-			}
+			},
 		}))]);
 	}
 
diff --git a/packages/client/src/scripts/navigate.ts b/packages/client/src/scripts/navigate.ts
deleted file mode 100644
index 08b891ec5b..0000000000
--- a/packages/client/src/scripts/navigate.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { inject } from 'vue';
-import { router } from '@/router';
-import { defaultStore } from '@/store';
-
-export type Navigate = (path: string, record?: boolean) => void;
-
-export class MisskeyNavigator {
-	public readonly navHook: Navigate | null = null;
-	public readonly sideViewHook: Navigate | null = null;
-
-	// It should be constructed during vue creating in order for inject function to work
-	constructor() {
-		this.navHook = inject<Navigate | null>('navHook', null);
-		this.sideViewHook = inject<Navigate | null>('sideViewHook', null);
-	}
-
-	// Use this method instead of router.push()
-	public push(path: string, record = true) {
-		if (this.navHook) {
-			this.navHook(path, record);
-		} else {
-			if (defaultStore.state.defaultSideView && this.sideViewHook && path !== '/') {
-				return this.sideViewHook(path, record);
-			}
-	
-			if (router.currentRoute.value.path === path) {
-				window.scroll({ top: 0, behavior: 'smooth' });
-			} else {
-				if (record) router.push(path);
-				else router.replace(path);
-			}
-		}
-	}
-}
diff --git a/packages/client/src/scripts/page-metadata.ts b/packages/client/src/scripts/page-metadata.ts
new file mode 100644
index 0000000000..0db8369f9d
--- /dev/null
+++ b/packages/client/src/scripts/page-metadata.ts
@@ -0,0 +1,41 @@
+import * as misskey from 'misskey-js';
+import { ComputedRef, inject, isRef, onActivated, onMounted, provide, ref, Ref } from 'vue';
+
+export const setPageMetadata = Symbol('setPageMetadata');
+export const pageMetadataProvider = Symbol('pageMetadataProvider');
+
+export type PageMetadata = {
+	title: string;
+	subtitle?: string;
+	icon?: string | null;
+	avatar?: misskey.entities.User | null;
+	userName?: misskey.entities.User | null;
+	bg?: string;
+};
+
+export function definePageMetadata(metadata: PageMetadata | null | Ref<PageMetadata | null> | ComputedRef<PageMetadata | null>): void {
+	const _metadata = isRef(metadata) ? metadata : ref(metadata);
+
+	provide(pageMetadataProvider, _metadata);
+
+	const set = inject(setPageMetadata) as any;
+	if (set) {
+		set(_metadata);
+
+		onMounted(() => {
+			set(_metadata);
+		});
+
+		onActivated(() => {
+			set(_metadata);
+		});
+	}
+}
+
+export function provideMetadataReceiver(callback: (info: ComputedRef<PageMetadata>) => void): void {
+	provide(setPageMetadata, callback);
+}
+
+export function injectPageMetadata(): PageMetadata | undefined {
+	return inject(pageMetadataProvider);
+}
diff --git a/packages/client/src/scripts/search.ts b/packages/client/src/scripts/search.ts
index 0aedee9c98..64914d3d65 100644
--- a/packages/client/src/scripts/search.ts
+++ b/packages/client/src/scripts/search.ts
@@ -1,6 +1,6 @@
 import * as os from '@/os';
 import { i18n } from '@/i18n';
-import { router } from '@/router';
+import { mainRouter } from '@/router';
 
 export async function search() {
 	const { canceled, result: query } = await os.inputText({
@@ -11,12 +11,12 @@ export async function search() {
 	const q = query.trim();
 
 	if (q.startsWith('@') && !q.includes(' ')) {
-		router.push(`/${q}`);
+		mainRouter.push(`/${q}`);
 		return;
 	}
 
 	if (q.startsWith('#')) {
-		router.push(`/tags/${encodeURIComponent(q.substr(1))}`);
+		mainRouter.push(`/tags/${encodeURIComponent(q.substr(1))}`);
 		return;
 	}
 
@@ -36,14 +36,14 @@ export async function search() {
 		//v.$root.$emit('warp', date);
 		os.alert({
 			icon: 'fas fa-history',
-			iconOnly: true, autoClose: true
+			iconOnly: true, autoClose: true,
 		});
 		return;
 	}
 
 	if (q.startsWith('https://')) {
 		const promise = os.api('ap/show', {
-			uri: q
+			uri: q,
 		});
 
 		os.promiseDialog(promise, null, null, i18n.ts.fetchingAsApObject);
@@ -51,13 +51,13 @@ export async function search() {
 		const res = await promise;
 
 		if (res.type === 'User') {
-			router.push(`/@${res.object.username}@${res.object.host}`);
+			mainRouter.push(`/@${res.object.username}@${res.object.host}`);
 		} else if (res.type === 'Note') {
-			router.push(`/notes/${res.object.id}`);
+			mainRouter.push(`/notes/${res.object.id}`);
 		}
 
 		return;
 	}
 
-	router.push(`/search?q=${encodeURIComponent(q)}`);
+	mainRouter.push(`/search?q=${encodeURIComponent(q)}`);
 }
diff --git a/packages/client/src/scripts/use-leave-guard.ts b/packages/client/src/scripts/use-leave-guard.ts
index 33eea6b522..379a7e577c 100644
--- a/packages/client/src/scripts/use-leave-guard.ts
+++ b/packages/client/src/scripts/use-leave-guard.ts
@@ -1,5 +1,4 @@
 import { inject, onUnmounted, Ref } from 'vue';
-import { onBeforeRouteLeave } from 'vue-router';
 import { i18n } from '@/i18n';
 import * as os from '@/os';
 
diff --git a/packages/client/src/symbols.ts b/packages/client/src/symbols.ts
deleted file mode 100644
index 6913f29c28..0000000000
--- a/packages/client/src/symbols.ts
+++ /dev/null
@@ -1 +0,0 @@
-export const PAGE_INFO = Symbol('Page info');
diff --git a/packages/client/src/ui/_common_/sw-inject.ts b/packages/client/src/ui/_common_/sw-inject.ts
index 371f80ca15..8676d2d48d 100644
--- a/packages/client/src/ui/_common_/sw-inject.ts
+++ b/packages/client/src/ui/_common_/sw-inject.ts
@@ -3,12 +3,9 @@ import { post } from '@/os';
 import { $i, login } from '@/account';
 import { defaultStore } from '@/store';
 import { getAccountFromId } from '@/scripts/get-account-from-id';
-import { router } from '@/router';
+import { mainRouter } from '@/router';
 
 export function swInject() {
-	const navHook = inject('navHook', null);
-	const sideViewHook = inject('sideViewHook', null);
-
 	navigator.serviceWorker.addEventListener('message', ev => {
 		if (_DEV_) {
 			console.log('sw msg', ev.data);
@@ -27,16 +24,10 @@ export function swInject() {
 			case 'post':
 				return post(ev.data.options);
 			case 'push':
-				if (router.currentRoute.value.path === ev.data.url) {
+				if (mainRouter.currentRoute.value.path === ev.data.url) {
 					return window.scroll({ top: 0, behavior: 'smooth' });
 				}
-				if (navHook) {
-					return navHook(ev.data.url);
-				}
-				if (sideViewHook && defaultStore.state.defaultSideView && ev.data.url !== '/') {
-					return sideViewHook(ev.data.url);
-				}
-				return router.push(ev.data.url);
+				return mainRouter.push(ev.data.url);
 			default:
 				return;
 		}
diff --git a/packages/client/src/ui/classic.side.vue b/packages/client/src/ui/classic.side.vue
deleted file mode 100644
index 6c2329194e..0000000000
--- a/packages/client/src/ui/classic.side.vue
+++ /dev/null
@@ -1,148 +0,0 @@
-<template>
-<div v-if="component" class="qvzfzxam _narrow_">
-	<div class="container">
-		<header class="header" @contextmenu.prevent.stop="onContextmenu">
-			<button v-if="history.length > 0" class="_button" @click="back()"><i class="fas fa-chevron-left"></i></button>
-			<button v-else class="_button" style="pointer-events: none;"><!-- マージンのバランスを取るためのダミー --></button>
-			<span class="title" v-text="pageInfo?.title" />
-			<button class="_button" @click="close()"><i class="fas fa-times"></i></button>
-		</header>
-		<MkHeader class="pageHeader" :info="pageInfo"/>
-		<component :is="component" v-bind="props" :ref="changePage"/>
-	</div>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { provide } from 'vue';
-import * as os from '@/os';
-import copyToClipboard from '@/scripts/copy-to-clipboard';
-import { resolve, router } from '@/router';
-import { url as root } from '@/config';
-import * as symbols from '@/symbols';
-import { i18n } from '@/i18n';
-
-provide('navHook', navigate);
-
-let path: string | null = $ref(null);
-let component: ReturnType<typeof resolve>['component'] | null = $ref(null);
-let props: any | null = $ref(null);
-let pageInfo: any | null = $ref(null);
-let history: string[] = $ref([]);
-
-let url = $computed(() => `${root}${path}`);
-
-function changePage(page) {
-	if (page == null) return;
-	if (page[symbols.PAGE_INFO]) {
-		pageInfo = page[symbols.PAGE_INFO];
-	}
-}
-
-function navigate(_path: string, record = true) {
-	if (record && path) history.push($$(path).value);
-	path = _path;
-	const resolved = resolve(path);
-	component = resolved.component;
-	props = resolved.props;
-}
-
-function back() {
-	const prev = history.pop();
-	if (prev) navigate(prev, false);
-}
-
-function close() {
-	path = null;
-	component = null;
-	props = {};
-}
-
-function onContextmenu(ev: MouseEvent) {
-	os.contextMenu([{
-		type: 'label',
-		text: path || '',
-	}, {
-		icon: 'fas fa-expand-alt',
-		text: i18n.ts.showInPage,
-		action: () => {
-			if (path) router.push(path);
-			close();
-		}
-	}, {
-		icon: 'fas fa-window-maximize',
-		text: i18n.ts.openInWindow,
-		action: () => {
-			if (path) os.pageWindow(path);
-			close();
-		}
-	}, null, {
-		icon: 'fas fa-external-link-alt',
-		text: i18n.ts.openInNewTab,
-		action: () => {
-			window.open(url, '_blank');
-			close();
-		}
-	}, {
-		icon: 'fas fa-link',
-		text: i18n.ts.copyLink,
-		action: () => {
-			copyToClipboard(url);
-		}
-	}], ev);
-}
-
-defineExpose({
-	navigate,
-	back,
-	close,
-});
-</script>
-
-<style lang="scss" scoped>
-.qvzfzxam {
-	$header-height: 58px; // TODO: どこかに集約したい
-
-	--root-margin: 16px;
-	--margin: var(--marginHalf);
-
-	> .container {
-		position: fixed;
-		width: 370px;
-		height: 100vh;
-		overflow: auto;
-		box-sizing: border-box;
-
-		> .header {
-			display: flex;
-			position: sticky;
-			z-index: 1000;
-			top: 0;
-			height: $header-height;
-			width: 100%;
-			line-height: $header-height;
-			text-align: center;
-			font-weight: bold;
-			//background-color: var(--panel);
-			-webkit-backdrop-filter: var(--blur, blur(32px));
-			backdrop-filter: var(--blur, blur(32px));
-			background-color: var(--header);
-
-			> ._button {
-				height: $header-height;
-				width: $header-height;
-
-				&:hover {
-					color: var(--fgHighlighted);
-				}
-			}
-
-			> .title {
-				flex: 1;
-				position: relative;
-			}
-		}
-	}
-}
-</style>
-
diff --git a/packages/client/src/ui/classic.vue b/packages/client/src/ui/classic.vue
index c61cbc433e..f5fa8f336a 100644
--- a/packages/client/src/ui/classic.vue
+++ b/packages/client/src/ui/classic.vue
@@ -7,31 +7,23 @@
 			<XSidebar/>
 		</div>
 		<div v-else ref="widgetsLeft" class="widgets left">
-			<XWidgets :place="'left'" @mounted="attachSticky('widgetsLeft')"/>
+			<XWidgets :place="'left'" @mounted="attachSticky(widgetsLeft)"/>
 		</div>
 
-		<main class="main" :style="{ background: pageInfo?.bg }" @contextmenu.stop="onContextmenu">
+		<main class="main" :style="{ background: pageMetadata?.value?.bg }" @contextmenu.stop="onContextmenu">
 			<div class="content">
-				<MkStickyContainer>
-					<template #header><MkHeader v-if="pageInfo && !pageInfo.hideHeader" :info="pageInfo"/></template>
-					<router-view v-slot="{ Component }">
-						<transition :name="$store.state.animation ? 'page' : ''" mode="out-in" @enter="onTransition">
-							<keep-alive :include="['MkTimelinePage']">
-								<component :is="Component" :ref="changePage"/>
-							</keep-alive>
-						</transition>
-					</router-view>
-				</MkStickyContainer>
+				<RouterView/>
 			</div>
 		</main>
 
 		<div v-if="isDesktop" ref="widgetsRight" class="widgets right">
-			<XWidgets :place="null" @mounted="attachSticky('widgetsRight')"/>
+			<XWidgets :place="null" @mounted="attachSticky(widgetsRight)"/>
 		</div>
 	</div>
 
 	<transition :name="$store.state.animation ? 'tray-back' : ''">
-		<div v-if="widgetsShowing"
+		<div
+			v-if="widgetsShowing"
 			class="tray-back _modalBg"
 			@click="widgetsShowing = false"
 			@touchstart.passive="widgetsShowing = false"
@@ -48,157 +40,134 @@
 </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, defineAsyncComponent, markRaw } from 'vue';
-import { instanceName } from '@/config';
-import { StickySidebar } from '@/scripts/sticky-sidebar';
+<script lang="ts" setup>
+import { defineAsyncComponent, markRaw, ComputedRef, ref, onMounted, provide } from 'vue';
 import XSidebar from './classic.sidebar.vue';
 import XCommon from './_common_/common.vue';
+import { instanceName } from '@/config';
+import { StickySidebar } from '@/scripts/sticky-sidebar';
 import * as os from '@/os';
 import { menuDef } from '@/menu';
-import * as symbols from '@/symbols';
+import { mainRouter } from '@/router';
+import { PageMetadata, 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;
 
-export default defineComponent({
-	components: {
-		XCommon,
-		XSidebar,
-		XHeaderMenu: defineAsyncComponent(() => import('./classic.header.vue')),
-		XWidgets: defineAsyncComponent(() => import('./classic.widgets.vue')),
-	},
+const isDesktop = ref(window.innerWidth >= DESKTOP_THRESHOLD);
 
-	provide() {
-		return {
-			shouldHeaderThin: this.showMenuOnTop,
-			shouldSpacerMin: true,
-		};
-	},
+let pageMetadata = $ref<null | ComputedRef<PageMetadata>>();
+const widgetsShowing = $ref(false);
+const fullView = $ref(false);
+let globalHeaderHeight = $ref(0);
+const wallpaper = localStorage.getItem('wallpaper') != null;
+const showMenuOnTop = $computed(() => defaultStore.state.menuDisplay === 'top');
+let live2d = $ref<HTMLIFrameElement>();
+let widgetsLeft = $ref();
+let widgetsRight = $ref();
 
-	data() {
-		return {
-			pageInfo: null,
-			menuDef: menuDef,
-			globalHeaderHeight: 0,
-			isDesktop: window.innerWidth >= DESKTOP_THRESHOLD,
-			widgetsShowing: false,
-			fullView: false,
-			wallpaper: localStorage.getItem('wallpaper') != null,
-		};
-	},
+provide('router', mainRouter);
+provideMetadataReceiver((info) => {
+	pageMetadata = info;
+	if (pageMetadata.value) {
+		document.title = `${pageMetadata.value.title} | ${instanceName}`;
+	}
+});
+provide('shouldHeaderThin', showMenuOnTop);
+provide('shouldSpacerMin', true);
 
-	computed: {
-		showMenuOnTop(): boolean {
-			return this.$store.state.menuDisplay === 'top';
+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 });
+}
+
+function top() {
+	window.scroll({ top: 0, behavior: 'smooth' });
+}
+
+function onContextmenu(ev: MouseEvent) {
+	const isLink = (el: HTMLElement) => {
+		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;
+	const path = mainRouter.getCurrentPath();
+	os.contextMenu([{
+		type: 'label',
+		text: path,
+	}, {
+		icon: fullView ? 'fas fa-compress' : 'fas fa-expand',
+		text: fullView ? i18n.ts.quitFullView : i18n.ts.fullView,
+		action: () => {
+			fullView = !fullView;
+		},
+	}, {
+		icon: 'fas fa-window-maximize',
+		text: i18n.ts.openInWindow,
+		action: () => {
+			os.pageWindow(path);
+		},
+	}], ev);
+}
 
-	created() {
-		if (window.innerWidth < 1024) {
-			localStorage.setItem('ui', 'default');
-			location.reload();
-		}
+function onAiClick(ev) {
+	//if (this.live2d) this.live2d.click(ev);
+}
 
-		document.documentElement.style.overflowY = 'scroll';
+if (window.innerWidth < 1024) {
+	localStorage.setItem('ui', 'default');
+	location.reload();
+}
 
-		if (this.$store.state.widgets.length === 0) {
-			this.$store.set('widgets', [{
-				name: 'calendar',
-				id: 'a', place: null, data: {}
-			}, {
-				name: 'notifications',
-				id: 'b', place: null, data: {}
-			}, {
-				name: 'trends',
-				id: 'c', place: null, data: {}
-			}]);
-		}
-	},
+document.documentElement.style.overflowY = 'scroll';
 
-	mounted() {
-		window.addEventListener('resize', () => {
-			this.isDesktop = (window.innerWidth >= DESKTOP_THRESHOLD);
+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: {},
+	}]);
+}
+
+onMounted(() => {
+	window.addEventListener('resize', () => {
+		isDesktop = (window.innerWidth >= DESKTOP_THRESHOLD);
+	}, { passive: true });
+
+	if (defaultStore.state.aiChanMode) {
+		const iframeRect = live2d.getBoundingClientRect();
+		window.addEventListener('mousemove', ev => {
+			live2d.contentWindow.postMessage({
+				type: 'moveCursor',
+				body: {
+					x: ev.clientX - iframeRect.left,
+					y: ev.clientY - iframeRect.top,
+				},
+			}, '*');
+		}, { passive: true });
+		window.addEventListener('touchmove', ev => {
+			live2d.contentWindow.postMessage({
+				type: 'moveCursor',
+				body: {
+					x: ev.touches[0].clientX - iframeRect.left,
+					y: ev.touches[0].clientY - iframeRect.top,
+				},
+			}, '*');
 		}, { passive: true });
-
-		if (this.$store.state.aiChanMode) {
-			const iframeRect = this.$refs.live2d.getBoundingClientRect();
-			window.addEventListener('mousemove', ev => {
-				this.$refs.live2d.contentWindow.postMessage({
-					type: 'moveCursor',
-					body: {
-						x: ev.clientX - iframeRect.left,
-						y: ev.clientY - iframeRect.top,
-					}
-				}, '*');
-			}, { passive: true });
-			window.addEventListener('touchmove', ev => {
-				this.$refs.live2d.contentWindow.postMessage({
-					type: 'moveCursor',
-					body: {
-						x: ev.touches[0].clientX - iframeRect.left,
-						y: ev.touches[0].clientY - iframeRect.top,
-					}
-				}, '*');
-			}, { passive: true });
-		}
-	},
-
-	methods: {
-		changePage(page) {
-			if (page == null) return;
-			if (page[symbols.PAGE_INFO]) {
-				this.pageInfo = page[symbols.PAGE_INFO];
-				document.title = `${this.pageInfo.title} | ${instanceName}`;
-			}
-		},
-
-		attachSticky(ref) {
-			const sticky = new StickySidebar(this.$refs[ref], this.$store.state.menuDisplay === 'top' ? 0 : 16, this.$store.state.menuDisplay === 'top' ? 60 : 0); // TODO: ヘッダーの高さを60pxと決め打ちしているのを直す
-			window.addEventListener('scroll', () => {
-				sticky.calc(window.scrollY);
-			}, { passive: true });
-		},
-
-		top() {
-			window.scroll({ top: 0, behavior: 'smooth' });
-		},
-
-		onTransition() {
-			if (window._scroll) window._scroll();
-		},
-
-		onContextmenu(ev: MouseEvent) {
-			const isLink = (el: HTMLElement) => {
-				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;
-			const path = this.$route.path;
-			os.contextMenu([{
-				type: 'label',
-				text: path,
-			}, {
-				icon: this.fullView ? 'fas fa-compress' : 'fas fa-expand',
-				text: this.fullView ? this.$ts.quitFullView : this.$ts.fullView,
-				action: () => {
-					this.fullView = !this.fullView;
-				}
-			}, {
-				icon: 'fas fa-window-maximize',
-				text: this.$ts.openInWindow,
-				action: () => {
-					os.pageWindow(path);
-				}
-			}], ev);
-		},
-
-		onAiClick(ev) {
-			//if (this.live2d) this.live2d.click(ev);
-		}
 	}
 });
 </script>
diff --git a/packages/client/src/ui/deck.vue b/packages/client/src/ui/deck.vue
index e538a93f06..7433264794 100644
--- a/packages/client/src/ui/deck.vue
+++ b/packages/client/src/ui/deck.vue
@@ -1,18 +1,21 @@
 <template>
-<div class="mk-deck" :class="[{ isMobile }, `${deckStore.reactiveState.columnAlign.value}`]" :style="{ '--deckMargin': deckStore.reactiveState.columnMargin.value + 'px' }"
+<div
+	class="mk-deck" :class="[{ isMobile }, `${deckStore.reactiveState.columnAlign.value}`]" :style="{ '--deckMargin': deckStore.reactiveState.columnMargin.value + 'px' }"
 	@contextmenu.self.prevent="onContextmenu"
 >
 	<XSidebar v-if="!isMobile"/>
 
 	<template v-for="ids in layout">
 		<!-- sectionを利用しているのは、deck.vue側でcolumnに対してfirst-of-typeを効かせるため -->
-		<section v-if="ids.length > 1"
+		<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
+		<DeckColumnCore
+			v-else
 			:ref="ids[0]"
 			:key="ids[0]"
 			class="column"
@@ -25,13 +28,14 @@
 
 	<div v-if="isMobile" class="buttons">
 		<button class="button nav _button" @click="drawerMenuShowing = true"><i class="fas fa-bars"></i><span v-if="menuIndicated" class="indicator"><i class="fas fa-circle"></i></span></button>
-		<button class="button home _button" @click="$router.push('/')"><i class="fas fa-home"></i></button>
-		<button class="button notifications _button" @click="$router.push('/my/notifications')"><i class="fas fa-bell"></i><span v-if="$i?.hasUnreadNotification" class="indicator"><i class="fas fa-circle"></i></span></button>
+		<button class="button home _button" @click="mainRouter.push('/')"><i class="fas fa-home"></i></button>
+		<button class="button notifications _button" @click="mainRouter.push('/my/notifications')"><i class="fas fa-bell"></i><span v-if="$i?.hasUnreadNotification" class="indicator"><i class="fas fa-circle"></i></span></button>
 		<button class="button post _button" @click="os.post()"><i class="fas fa-pencil-alt"></i></button>
 	</div>
 
 	<transition :name="$store.state.animation ? 'menu-back' : ''">
-		<div v-if="drawerMenuShowing"
+		<div
+			v-if="drawerMenuShowing"
 			class="menu-back _modalBg"
 			@click="drawerMenuShowing = false"
 			@touchstart.passive="drawerMenuShowing = false"
@@ -49,17 +53,17 @@
 <script lang="ts" setup>
 import { computed, provide, ref, watch } from 'vue';
 import { v4 as uuid } from 'uuid';
+import XCommon from './_common_/common.vue';
+import { deckStore, addColumn as addColumnToStore, loadDeck } from './deck/deck-store';
 import DeckColumnCore from '@/ui/deck/column-core.vue';
 import XSidebar from '@/ui/_common_/sidebar.vue';
 import XDrawerMenu from '@/ui/_common_/sidebar-for-mobile.vue';
 import { getScrollContainer } from '@/scripts/scroll';
 import * as os from '@/os';
 import { menuDef } from '@/menu';
-import XCommon from './_common_/common.vue';
-import { deckStore, addColumn as addColumnToStore, loadDeck } from './deck/deck-store';
-import { useRoute } from 'vue-router';
 import { $i } from '@/account';
 import { i18n } from '@/i18n';
+import { mainRouter } from '@/router';
 
 const isMobile = ref(window.innerWidth <= 500);
 window.addEventListener('resize', () => {
@@ -68,7 +72,7 @@ window.addEventListener('resize', () => {
 
 const drawerMenuShowing = ref(false);
 
-const route = useRoute();
+const route = 'TODO';
 watch(route, () => {
 	drawerMenuShowing.value = false;
 });
@@ -98,8 +102,8 @@ const addColumn = async (ev) => {
 	const { canceled, result: column } = await os.select({
 		title: i18n.ts._deck.addColumn,
 		items: columns.map(column => ({
-			value: column, text: i18n.t('_deck._columns.' + column)
-		}))
+			value: column, text: i18n.t('_deck._columns.' + column),
+		})),
 	});
 	if (canceled) return;
 
@@ -119,11 +123,6 @@ const onContextmenu = (ev) => {
 };
 
 provide('shouldSpacerMin', true);
-if (deckStore.state.navWindow) {
-	provide('navHook', (url) => {
-		os.pageWindow(url);
-	});
-}
 
 document.documentElement.style.overflowY = 'hidden';
 document.documentElement.style.scrollBehavior = 'auto';
diff --git a/packages/client/src/ui/deck/main-column.vue b/packages/client/src/ui/deck/main-column.vue
index 3c97cd4867..670b4a212b 100644
--- a/packages/client/src/ui/deck/main-column.vue
+++ b/packages/client/src/ui/deck/main-column.vue
@@ -1,33 +1,24 @@
 <template>
-<XColumn v-if="deckStore.state.alwaysShowMainColumn || $route.name !== 'index'" :column="column" :is-stacked="isStacked" @parent-focus="$event => emit('parent-focus', $event)">
+<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="pageInfo">
-			<i :class="pageInfo.icon"></i>
-			{{ pageInfo.title }}
+		<template v-if="pageMetadata?.value">
+			<i :class="pageMetadata?.value.icon"></i>
+			{{ pageMetadata?.value.title }}
 		</template>
 	</template>
 
-	<MkStickyContainer>
-		<template #header><MkHeader v-if="pageInfo && !pageInfo.hideHeader" :info="pageInfo"/></template>
-		<router-view v-slot="{ Component }">
-			<transition>
-				<keep-alive :include="['MkTimelinePage']">
-					<component :is="Component" :ref="changePage" @contextmenu.stop="onContextmenu"/>
-				</keep-alive>
-			</transition>
-		</router-view>
-	</MkStickyContainer>
+	<RouterView @contextmenu.stop="onContextmenu"/>
 </XColumn>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
+import { ComputedRef, provide } from 'vue';
 import XColumn from './column.vue';
 import { deckStore, Column } from '@/ui/deck/deck-store';
 import * as os from '@/os';
-import * as symbols from '@/symbols';
 import { i18n } from '@/i18n';
-import { router } from '@/router';
+import { mainRouter } from '@/router';
+import { PageMetadata, provideMetadataReceiver, setPageMetadata } from '@/scripts/page-metadata';
 
 defineProps<{
 	column: Column;
@@ -38,14 +29,13 @@ const emit = defineEmits<{
 	(ev: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void;
 }>();
 
-let pageInfo = $ref<Record<string, any> | null>(null);
+let pageMetadata = $ref<null | ComputedRef<PageMetadata>>();
+
+provide('router', mainRouter);
+provideMetadataReceiver((info) => {
+	pageMetadata = info;
+});
 
-function changePage(page) {
-	if (page == null) return;
-	if (page[symbols.PAGE_INFO]) {
-		pageInfo = page[symbols.PAGE_INFO];
-	}
-}
 /*
 function back() {
 	history.back();
@@ -72,7 +62,7 @@ function onContextmenu(ev: MouseEvent) {
 		text: i18n.ts.openInWindow,
 		action: () => {
 			os.pageWindow(path);
-		}
+		},
 	}], ev);
 }
 </script>
diff --git a/packages/client/src/ui/desktop.vue b/packages/client/src/ui/desktop.vue
deleted file mode 100644
index 17783c58e3..0000000000
--- a/packages/client/src/ui/desktop.vue
+++ /dev/null
@@ -1,70 +0,0 @@
-<template>
-<div class="mk-app" :class="{ wallpaper }" @contextmenu.prevent="() => {}">
-	<XSidebar ref="nav" class="sidebar"/>
-
-	<XCommon/>
-</div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import { host } from '@/config';
-import { search } from '@/scripts/search';
-import XCommon from './_common_/common.vue';
-import * as os from '@/os';
-import XSidebar from '@/ui/_common_/sidebar.vue';
-import { menuDef } from '@/menu';
-import { ColdDeviceStorage } from '@/store';
-
-export default defineComponent({
-	components: {
-		XCommon,
-		XSidebar
-	},
-
-	provide() {
-		return {
-			navHook: (url) => {
-				os.pageWindow(url);
-			}
-		};
-	},
-
-	data() {
-		return {
-			host: host,
-			menuDef: menuDef,
-			wallpaper: localStorage.getItem('wallpaper') != null,
-		};
-	},
-
-	computed: {
-		menu(): string[] {
-			return this.$store.state.menu;
-		},
-	},
-
-	created() {
-		if (window.innerWidth < 1024) {
-			localStorage.setItem('ui', 'default');
-			location.reload();
-		}
-	},
-
-	methods: {
-		help() {
-			window.open(`https://misskey-hub.net/docs/keyboard-shortcut.md`, '_blank');
-		},
-	}
-});
-</script>
-
-<style lang="scss" scoped>
-.mk-app {
-	height: 100vh;
-	width: 100vw;
-}
-</style>
-
-<style lang="scss">
-</style>
diff --git a/packages/client/src/ui/universal.vue b/packages/client/src/ui/universal.vue
index a5ff7a6255..41d59342bd 100644
--- a/packages/client/src/ui/universal.vue
+++ b/packages/client/src/ui/universal.vue
@@ -2,26 +2,15 @@
 <div class="dkgtipfy" :class="{ wallpaper }">
 	<XSidebar v-if="!isMobile" class="sidebar"/>
 
-	<div class="contents" :style="{ background: pageInfo?.bg }" @contextmenu.stop="onContextmenu">
+	<div class="contents" :style="{ background: pageMetadata?.value?.bg }" @contextmenu.stop="onContextmenu">
 		<main>
 			<div class="content">
-				<MkStickyContainer>
-					<template #header><MkHeader v-if="pageInfo && !pageInfo.hideHeader" :info="pageInfo"/></template>
-					<router-view v-slot="{ Component }">
-						<transition :name="$store.state.animation ? 'page' : ''" mode="out-in" @enter="onTransition">
-							<keep-alive :include="['MkTimelinePage']">
-								<component :is="Component" :ref="changePage"/>
-							</keep-alive>
-						</transition>
-					</router-view>
-				</MkStickyContainer>
+				<RouterView/>
 			</div>
 			<div class="spacer"></div>
 		</main>
 	</div>
 
-	<XSideView v-if="isDesktop" ref="sideEl" class="side"/>
-
 	<div v-if="isDesktop" ref="widgetsEl" class="widgets">
 		<XWidgets @mounted="attachSticky"/>
 	</div>
@@ -30,14 +19,15 @@
 
 	<div v-if="isMobile" class="buttons">
 		<button class="button nav _button" @click="drawerMenuShowing = true"><i class="fas fa-bars"></i><span v-if="menuIndicated" class="indicator"><i class="fas fa-circle"></i></span></button>
-		<button class="button home _button" @click="$route.name === 'index' ? top() : $router.push('/')"><i class="fas fa-home"></i></button>
-		<button class="button notifications _button" @click="$router.push('/my/notifications')"><i class="fas fa-bell"></i><span v-if="$i?.hasUnreadNotification" class="indicator"><i class="fas fa-circle"></i></span></button>
+		<button class="button home _button" @click="mainRouter.currentRoute.value.name === 'index' ? top() : mainRouter.push('/')"><i class="fas fa-home"></i></button>
+		<button class="button notifications _button" @click="mainRouter.push('/my/notifications')"><i class="fas fa-bell"></i><span v-if="$i?.hasUnreadNotification" class="indicator"><i class="fas fa-circle"></i></span></button>
 		<button class="button widget _button" @click="widgetsShowing = true"><i class="fas fa-layer-group"></i></button>
 		<button class="button post _button" @click="os.post()"><i class="fas fa-pencil-alt"></i></button>
 	</div>
 
 	<transition :name="$store.state.animation ? 'menuDrawer-back' : ''">
-		<div v-if="drawerMenuShowing"
+		<div
+			v-if="drawerMenuShowing"
 			class="menuDrawer-back _modalBg"
 			@click="drawerMenuShowing = false"
 			@touchstart.passive="drawerMenuShowing = false"
@@ -49,7 +39,8 @@
 	</transition>
 
 	<transition :name="$store.state.animation ? 'widgetsDrawer-back' : ''">
-		<div v-if="widgetsShowing"
+		<div
+			v-if="widgetsShowing"
 			class="widgetsDrawer-back _modalBg"
 			@click="widgetsShowing = false"
 			@touchstart.passive="widgetsShowing = false"
@@ -65,19 +56,19 @@
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent, provide, onMounted, computed, ref, watch } from 'vue';
+import { defineAsyncComponent, provide, onMounted, computed, ref, watch, ComputedRef } from 'vue';
+import XCommon from './_common_/common.vue';
 import { instanceName } from '@/config';
 import { StickySidebar } from '@/scripts/sticky-sidebar';
 import XDrawerMenu from '@/ui/_common_/sidebar-for-mobile.vue';
-import XCommon from './_common_/common.vue';
-import XSideView from './classic.side.vue';
 import * as os from '@/os';
-import * as symbols from '@/symbols';
 import { defaultStore } from '@/store';
 import { menuDef } from '@/menu';
-import { useRoute } from 'vue-router';
 import { i18n } from '@/i18n';
 import { $i } from '@/account';
+import { Router } from '@/nirax';
+import { mainRouter } from '@/router';
+import { PageMetadata, provideMetadataReceiver, setPageMetadata } from '@/scripts/page-metadata';
 const XWidgets = defineAsyncComponent(() => import('./universal.widgets.vue'));
 const XSidebar = defineAsyncComponent(() => import('@/ui/_common_/sidebar.vue'));
 
@@ -90,15 +81,18 @@ window.addEventListener('resize', () => {
 	isMobile.value = window.innerWidth <= MOBILE_THRESHOLD;
 });
 
-const pageInfo = ref();
+let pageMetadata = $ref<null | ComputedRef<PageMetadata>>();
 const widgetsEl = $ref<HTMLElement>();
-const widgetsShowing = ref(false);
+const widgetsShowing = $ref(false);
 
-let sideEl = $ref<InstanceType<typeof XSideView>>();
-
-provide('sideViewHook', isDesktop.value ? (url) => {
-	sideEl.navigate(url);
-} : null);
+provide('router', mainRouter);
+provideMetadataReceiver((info) => {
+	console.log(info);
+	pageMetadata = info;
+	if (pageMetadata.value) {
+		document.title = `${pageMetadata.value.title} | ${instanceName}`;
+	}
+});
 
 const menuIndicated = computed(() => {
 	for (const def in menuDef) {
@@ -110,8 +104,7 @@ const menuIndicated = computed(() => {
 
 const drawerMenuShowing = ref(false);
 
-const route = useRoute();
-watch(route, () => {
+mainRouter.on('change', () => {
 	drawerMenuShowing.value = false;
 });
 
@@ -120,13 +113,13 @@ document.documentElement.style.overflowY = 'scroll';
 if (defaultStore.state.widgets.length === 0) {
 	defaultStore.set('widgets', [{
 		name: 'calendar',
-		id: 'a', place: 'right', data: {}
+		id: 'a', place: 'right', data: {},
 	}, {
 		name: 'notifications',
-		id: 'b', place: 'right', data: {}
+		id: 'b', place: 'right', data: {},
 	}, {
 		name: 'trends',
-		id: 'c', place: 'right', data: {}
+		id: 'c', place: 'right', data: {},
 	}]);
 }
 
@@ -138,14 +131,6 @@ onMounted(() => {
 	}
 });
 
-const changePage = (page) => {
-	if (page == null) return;
-	if (page[symbols.PAGE_INFO]) {
-		pageInfo.value = page[symbols.PAGE_INFO];
-		document.title = `${pageInfo.value.title} | ${instanceName}`;
-	}
-};
-
 const onContextmenu = (ev) => {
 	const isLink = (el: HTMLElement) => {
 		if (el.tagName === 'A') return true;
@@ -156,22 +141,16 @@ const onContextmenu = (ev) => {
 	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;
-	const path = route.path;
+	const path = mainRouter.getCurrentPath();
 	os.contextMenu([{
 		type: 'label',
 		text: path,
-	}, {
-		icon: 'fas fa-columns',
-		text: i18n.ts.openInSideView,
-		action: () => {
-			sideEl.navigate(path);
-		}
 	}, {
 		icon: 'fas fa-window-maximize',
 		text: i18n.ts.openInWindow,
 		action: () => {
 			os.pageWindow(path);
-		}
+		},
 	}], ev);
 };
 
@@ -186,10 +165,6 @@ function top() {
 	window.scroll({ top: 0, behavior: 'smooth' });
 }
 
-function onTransition() {
-	if (window._scroll) window._scroll();
-}
-
 const wallpaper = localStorage.getItem('wallpaper') != null;
 </script>
 
@@ -274,12 +249,6 @@ const wallpaper = localStorage.getItem('wallpaper') != null;
 		}
 	}
 
-	> .side {
-		min-width: 370px;
-		max-width: 370px;
-		border-left: solid 0.5px var(--divider);
-	}
-
 	> .widgets {
 		padding: 0 var(--margin);
 		border-left: solid 0.5px var(--divider);
diff --git a/packages/client/src/ui/visitor/a.vue b/packages/client/src/ui/visitor/a.vue
index af77f9e970..e98247cbb1 100644
--- a/packages/client/src/ui/visitor/a.vue
+++ b/packages/client/src/ui/visitor/a.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="mk-app">
-	<div v-if="$route.path === '/'" class="banner" :style="{ backgroundImage: `url(${ $instance.bannerUrl })` }">
+	<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">
@@ -20,15 +20,11 @@
 
 	<div class="main">
 		<div ref="contents" class="contents" :class="{ wallpaper }">
-			<header v-show="$route.path !== '/'" ref="header" class="header">
+			<header v-show="mainRouter.currentRoute?.name !== 'index'" ref="header" class="header">
 				<XHeader :info="pageInfo"/>
 			</header>
 			<main ref="main">
-				<router-view v-slot="{ Component }">
-					<transition :name="$store.state.animation ? 'page' : ''" mode="out-in" @enter="onTransition">
-						<component :is="Component" :ref="changePage"/>
-					</transition>
-				</router-view>
+				<RouterView/>
 			</main>
 			<div class="powered-by">
 				<b><MkA to="/">{{ host }}</MkA></b>
@@ -41,14 +37,14 @@
 
 <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/ui/pagination.vue';
 import MkButton from '@/components/ui/button.vue';
-import XHeader from './header.vue';
 import { ColdDeviceStorage } from '@/store';
-import * as symbols from '@/symbols';
+import { mainRouter } from '@/router';
 
 const DESKTOP_THRESHOLD = 1100;
 
@@ -70,6 +66,7 @@ export default defineComponent({
 				endpoint: 'announcements',
 				limit: 10,
 			},
+			mainRouter,
 			isDesktop: window.innerWidth >= DESKTOP_THRESHOLD,
 		};
 	},
@@ -82,7 +79,7 @@ export default defineComponent({
 					this.$store.set('darkMode', !this.$store.state.darkMode);
 				},
 				's': search,
-				'h|/': this.help
+				'h|/': this.help,
 			};
 		},
 	},
@@ -120,13 +117,9 @@ export default defineComponent({
 		},
 
 		help() {
-			window.open(`https://misskey-hub.net/docs/keyboard-shortcut.md`, '_blank');
+			window.open('https://misskey-hub.net/docs/keyboard-shortcut.md', '_blank');
 		},
-
-		onTransition() {
-			if (window._scroll) window._scroll();
-		},
-	}
+	},
 });
 </script>
 
diff --git a/packages/client/src/ui/visitor/b.vue b/packages/client/src/ui/visitor/b.vue
index c9c0a1f72e..28933f272a 100644
--- a/packages/client/src/ui/visitor/b.vue
+++ b/packages/client/src/ui/visitor/b.vue
@@ -12,11 +12,7 @@
 		<div class="contents">
 			<XHeader v-if="!root" class="header" :info="pageInfo"/>
 			<main>
-				<router-view v-slot="{ Component }">
-					<transition :name="$store.state.animation ? 'page' : ''" mode="out-in" @enter="onTransition">
-						<component :is="Component" :ref="changePage"/>
-					</transition>
-				</router-view>
+				<RouterView/>
 			</main>
 			<div v-if="!root" class="powered-by">
 				<b><MkA to="/">{{ host }}</MkA></b>
@@ -26,7 +22,8 @@
 	</div>
 
 	<transition :name="$store.state.animation ? 'tray-back' : ''">
-		<div v-if="showMenu"
+		<div
+			v-if="showMenu"
 			class="menu-back _modalBg"
 			@click="showMenu = false"
 			@touchstart.passive="showMenu = false"
@@ -48,8 +45,10 @@
 </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, defineAsyncComponent } from 'vue';
+<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';
@@ -57,101 +56,64 @@ import MkPagination from '@/components/ui/pagination.vue';
 import XSigninDialog from '@/components/signin-dialog.vue';
 import XSignupDialog from '@/components/signup-dialog.vue';
 import MkButton from '@/components/ui/button.vue';
-import XHeader from './header.vue';
-import XKanban from './kanban.vue';
-import { ColdDeviceStorage } from '@/store';
-import * as symbols from '@/symbols';
+import { ColdDeviceStorage, defaultStore } from '@/store';
+import { mainRouter } from '@/router';
+import { PageMetadata, provideMetadataReceiver, setPageMetadata } from '@/scripts/page-metadata';
 
 const DESKTOP_THRESHOLD = 1100;
 
-export default defineComponent({
-	components: {
-		XHeader,
-		XKanban,
-		MkPagination,
-		MkButton,
-	},
+let pageMetadata = $ref<null | ComputedRef<PageMetadata>>();
 
-	data() {
-		return {
-			host,
-			instanceName,
-			pageInfo: null,
-			meta: null,
-			showMenu: false,
-			narrow: window.innerWidth < 1280,
-			announcements: {
-				endpoint: 'announcements',
-				limit: 10,
-			},
-			isDesktop: window.innerWidth >= DESKTOP_THRESHOLD,
-		};
-	},
+provide('router', mainRouter);
+provideMetadataReceiver((info) => {
+	pageMetadata = info;
+	if (pageMetadata.value) {
+		document.title = `${pageMetadata.value.title} | ${instanceName}`;
+	}
+});
 
-	computed: {
-		keymap(): any {
-			return {
-				'd': () => {
-					if (ColdDeviceStorage.get('syncDeviceDarkMode')) return;
-					this.$store.set('darkMode', !this.$store.state.darkMode);
-				},
-				's': search,
-				'h|/': this.help
-			};
+const announcements = {
+	endpoint: 'announcements',
+	limit: 10,
+};
+let showMenu = $ref(false);
+let isDesktop = $ref(window.innerWidth >= DESKTOP_THRESHOLD);
+let narrow = $ref(window.innerWidth < 1280);
+let meta = $ref();
+
+const keymap = $computed(() => {
+	return {
+		'd': () => {
+			if (ColdDeviceStorage.get('syncDeviceDarkMode')) return;
+			defaultStore.set('darkMode', !defaultStore.state.darkMode);
 		},
+		's': search,
+	};
+});
 
-		root(): boolean {
-			return this.$route.path === '/';
-		},
-	},
+const root = $computed(() => mainRouter.currentRoute.value.name === 'index');
 
-	created() {
-		//document.documentElement.style.overflowY = 'scroll';
+os.api('meta', { detail: true }).then(res => {
+	meta = res;
+});
 
-		os.api('meta', { detail: true }).then(meta => {
-			this.meta = meta;
-		});
-	},
+function signin() {
+	os.popup(XSigninDialog, {
+		autoSet: true,
+	}, {}, 'closed');
+}
 
-	mounted() {
-		if (!this.isDesktop) {
-			window.addEventListener('resize', () => {
-				if (window.innerWidth >= DESKTOP_THRESHOLD) this.isDesktop = true;
-			}, { passive: true });
-		}
-	},
+function signup() {
+	os.popup(XSignupDialog, {
+		autoSet: true,
+	}, {}, 'closed');
+}
 
-	methods: {
-		changePage(page) {
-			if (page == null) return;
-			if (page[symbols.PAGE_INFO]) {
-				this.pageInfo = page[symbols.PAGE_INFO];
-			}
-		},
-
-		top() {
-			window.scroll({ top: 0, behavior: 'smooth' });
-		},
-
-		help() {
-			window.open(`https://misskey-hub.net/docs/keyboard-shortcut.md`, '_blank');
-		},
-
-		onTransition() {
-			if (window._scroll) window._scroll();
-		},
-
-		signin() {
-			os.popup(XSigninDialog, {
-				autoSet: true
-			}, {}, 'closed');
-		},
-
-		signup() {
-			os.popup(XSignupDialog, {
-				autoSet: true
-			}, {}, 'closed');
-		}
+onMounted(() => {
+	if (!isDesktop) {
+		window.addEventListener('resize', () => {
+			if (window.innerWidth >= DESKTOP_THRESHOLD) isDesktop = true;
+		}, { passive: true });
 	}
 });
 </script>
diff --git a/packages/client/src/ui/zen.vue b/packages/client/src/ui/zen.vue
index a7234f729b..c915f82428 100644
--- a/packages/client/src/ui/zen.vue
+++ b/packages/client/src/ui/zen.vue
@@ -1,106 +1,35 @@
 <template>
 <div class="mk-app">
-	<div class="contents">
-		<header class="header">
-			<MkHeader :info="pageInfo"/>
-		</header>
-		<main ref="main">
-			<div class="content">
-				<router-view v-slot="{ Component }">
-					<transition :name="$store.state.animation ? 'page' : ''" mode="out-in" @enter="onTransition">
-						<keep-alive :include="['MkTimelinePage']">
-							<component :is="Component" :ref="changePage"/>
-						</keep-alive>
-					</transition>
-				</router-view>
-			</div>
-		</main>
-	</div>
+	<RouterView/>
 
 	<XCommon/>
 </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, defineAsyncComponent } from 'vue';
-import { host } from '@/config';
+<script lang="ts" setup>
+import { provide, ComputedRef } from 'vue';
 import XCommon from './_common_/common.vue';
-import * as symbols from '@/symbols';
+import { mainRouter } from '@/router';
+import { PageMetadata, provideMetadataReceiver, setPageMetadata } from '@/scripts/page-metadata';
+import { instanceName } from '@/config';
 
-export default defineComponent({
-	components: {
-		XCommon,
-	},
+let pageMetadata = $ref<null | ComputedRef<PageMetadata>>();
 
-	data() {
-		return {
-			host: host,
-			pageInfo: null,
-		};
-	},
-
-	created() {
-		document.documentElement.style.overflowY = 'scroll';
-	},
-
-	methods: {
-		changePage(page) {
-			if (page == null) return;
-			if (page[symbols.PAGE_INFO]) {
-				this.pageInfo = page[symbols.PAGE_INFO];
-			}
-		},
-
-		top() {
-			window.scroll({ top: 0, behavior: 'smooth' });
-		},
-
-		help() {
-			window.open(`https://misskey-hub.net/docs/keyboard-shortcut.md`, '_blank');
-		},
-
-		onTransition() {
-			if (window._scroll) window._scroll();
-		},
+provide('router', mainRouter);
+provideMetadataReceiver((info) => {
+	pageMetadata = info;
+	if (pageMetadata.value) {
+		document.title = `${pageMetadata.value.title} | ${instanceName}`;
 	}
 });
+
+document.documentElement.style.overflowY = 'scroll';
 </script>
 
 <style lang="scss" scoped>
 .mk-app {
-	$header-height: 52px;
-	$ui-font-size: 1em; // TODO: どこかに集約したい
-
 	// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
 	min-height: calc(var(--vh, 1vh) * 100);
 	box-sizing: border-box;
-
-	> .contents {
-		padding-top: $header-height;
-
-		> .header {
-			position: fixed;
-			z-index: 1000;
-			top: 0;
-			height: $header-height;
-			width: 100%;
-			line-height: $header-height;
-			text-align: center;
-			//background-color: var(--panel);
-			-webkit-backdrop-filter: var(--blur, blur(32px));
-			backdrop-filter: var(--blur, blur(32px));
-			background-color: var(--header);
-			border-bottom: solid 0.5px var(--divider);
-		}
-
-		> main {
-			> .content {
-				> * {
-					// ほんとは単に calc(100vh - #{$header-height}) と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
-					min-height: calc((var(--vh, 1vh) * 100) - #{$header-height});
-				}
-			}
-		}
-	}
 }
 </style>
diff --git a/packages/client/tsconfig.json b/packages/client/tsconfig.json
index f7320a7251..86109f600a 100644
--- a/packages/client/tsconfig.json
+++ b/packages/client/tsconfig.json
@@ -35,7 +35,8 @@
 		"lib": [
 			"esnext",
 			"dom"
-		]
+		],
+		"jsx": "preserve"
 	},
 	"compileOnSave": false,
 	"include": [
diff --git a/packages/client/vite.config.ts b/packages/client/vite.config.ts
index af13e646c6..5800cf5021 100644
--- a/packages/client/vite.config.ts
+++ b/packages/client/vite.config.ts
@@ -1,10 +1,10 @@
 import * as fs from 'fs';
 import pluginVue from '@vitejs/plugin-vue';
-import pluginJson5 from './vite.json5';
 import { defineConfig } from 'vite';
 
 import locales from '../../locales';
 import meta from '../../package.json';
+import pluginJson5 from './vite.json5';
 
 const extensions = ['.ts', '.tsx', '.js', '.jsx', '.mjs', '.json', '.json5', '.svg', '.sass', '.scss', '.css', '.vue'];
 
@@ -57,7 +57,7 @@ export default defineConfig(({ command, mode }) => {
 				},
 				output: {
 					manualChunks: {
-						vue: ['vue', 'vue-router'],
+						vue: ['vue'],
 					},
 				},
 			},
@@ -68,5 +68,5 @@ export default defineConfig(({ command, mode }) => {
 			sourcemap: process.env.NODE_ENV !== 'production',
 			reportCompressedSize: false,
 		},
-	}
+	};
 });
diff --git a/packages/client/yarn.lock b/packages/client/yarn.lock
index 796c72304a..0dc898800d 100644
--- a/packages/client/yarn.lock
+++ b/packages/client/yarn.lock
@@ -647,11 +647,6 @@
     "@vue/compiler-dom" "3.2.37"
     "@vue/shared" "3.2.37"
 
-"@vue/devtools-api@^6.0.0":
-  version "6.0.12"
-  resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.0.12.tgz#7b57cce215ae9f37a86984633b3aa3d595aa5b46"
-  integrity sha512-iO/4FIezHKXhiDBdKySCvJVh8/mZPxHpiQrTy+PXVqJZgpTPTdHy4q8GXulaY+UKEagdkBb0onxNQZ0LNiqVhw==
-
 "@vue/reactivity-transform@3.2.37":
   version "3.2.37"
   resolved "https://registry.yarnpkg.com/@vue/reactivity-transform/-/reactivity-transform-3.2.37.tgz#0caa47c4344df4ae59f5a05dde2a8758829f8eca"
@@ -4232,13 +4227,6 @@ vue-prism-editor@2.0.0-alpha.2:
   resolved "https://registry.yarnpkg.com/vue-prism-editor/-/vue-prism-editor-2.0.0-alpha.2.tgz#aa53a88efaaed628027cbb282c2b1d37fc7c5c69"
   integrity sha512-Gu42ba9nosrE+gJpnAEuEkDMqG9zSUysIR8SdXUw8MQKDjBnnNR9lHC18uOr/ICz7yrA/5c7jHJr9lpElODC7w==
 
-vue-router@4.0.16:
-  version "4.0.16"
-  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.0.16.tgz#9477beeeef36e80e04d041a1738801a55e6e862e"
-  integrity sha512-JcO7cb8QJLBWE+DfxGUL3xUDOae/8nhM1KVdnudadTAORbuxIC/xAydC5Zr/VLHUDQi1ppuTF5/rjBGzgzrJNA==
-  dependencies:
-    "@vue/devtools-api" "^6.0.0"
-
 vue@3.2.37:
   version "3.2.37"
   resolved "https://registry.yarnpkg.com/vue/-/vue-3.2.37.tgz#da220ccb618d78579d25b06c7c21498ca4e5452e"

From 8e20e27ff91b7ef81b3994abcd3f7846f8258b71 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Mon, 20 Jun 2022 19:49:51 +0900
Subject: [PATCH 11/90] fix client

---
 packages/client/src/pages/instance-info.vue   | 221 +++++++++---------
 .../src/pages/page-editor/page-editor.vue     | 165 ++++++-------
 2 files changed, 194 insertions(+), 192 deletions(-)

diff --git a/packages/client/src/pages/instance-info.vue b/packages/client/src/pages/instance-info.vue
index 31d3d4ac83..9d7af4fc7d 100644
--- a/packages/client/src/pages/instance-info.vue
+++ b/packages/client/src/pages/instance-info.vue
@@ -1,109 +1,111 @@
-<template><MkStickyContainer>
+<template>
+<MkStickyContainer>
 	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
-		<MkSpacer :content-max="600" :margin-min="16" :margin-max="32">
-	<div v-if="instance" class="_formRoot">
-		<div class="fnfelxur">
-			<img :src="instance.iconUrl || instance.faviconUrl" alt="" class="icon"/>
-		</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>Name</template>
-			<template #value>{{ instance.name || `(${$ts.unknown})` }}</template>
-		</MkKeyValue>
-		<MkKeyValue>
-			<template #key>{{ $ts.description }}</template>
-			<template #value>{{ instance.description }}</template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>{{ $ts.software }}</template>
-			<template #value><span class="_monospace">{{ instance.softwareName || `(${$ts.unknown})` }} / {{ instance.softwareVersion || `(${$ts.unknown})` }}</span></template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>{{ $ts.administrator }}</template>
-			<template #value>{{ instance.maintainerName || `(${$ts.unknown})` }} ({{ instance.maintainerEmail || `(${$ts.unknown})` }})</template>
-		</MkKeyValue>
-
-		<FormSection v-if="iAmModerator">
-			<template #label>Moderation</template>
-			<FormSwitch v-model="suspended" class="_formBlock" @update:modelValue="toggleSuspend">{{ $ts.stopActivityDelivery }}</FormSwitch>
-			<FormSwitch v-model="isBlocked" class="_formBlock" @update:modelValue="toggleBlock">{{ $ts.blockThisInstance }}</FormSwitch>
-			<MkButton @click="refreshMetadata">Refresh metadata</MkButton>
-		</FormSection>
-
-		<FormSection>
-			<MkKeyValue oneline style="margin: 1em 0;">
-				<template #key>{{ $ts.registeredAt }}</template>
-				<template #value><MkTime mode="detail" :time="instance.caughtAt"/></template>
-			</MkKeyValue>
-			<MkKeyValue oneline style="margin: 1em 0;">
-				<template #key>{{ $ts.updatedAt }}</template>
-				<template #value><MkTime mode="detail" :time="instance.infoUpdatedAt"/></template>
-			</MkKeyValue>
-			<MkKeyValue oneline style="margin: 1em 0;">
-				<template #key>{{ $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>{{ $ts.latestStatus }}</template>
-				<template #value>{{ instance.latestStatus ? instance.latestStatus : 'N/A' }}</template>
-			</MkKeyValue>
-			<MkKeyValue oneline style="margin: 1em 0;">
-				<template #key>{{ $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>Open Registrations</template>
-				<template #value>{{ instance.openRegistrations ? $ts.yes : $ts.no }}</template>
-			</MkKeyValue>
-		</FormSection>
-
-		<FormSection>
-			<template #label>{{ $ts.statistics }}</template>
-			<div class="cmhjzshl">
-				<div class="selects">
-					<MkSelect v-model="chartSrc" style="margin: 0 10px 0 0; flex: 1;">
-						<option value="instance-requests">{{ $ts._instanceCharts.requests }}</option>
-						<option value="instance-users">{{ $ts._instanceCharts.users }}</option>
-						<option value="instance-users-total">{{ $ts._instanceCharts.usersTotal }}</option>
-						<option value="instance-notes">{{ $ts._instanceCharts.notes }}</option>
-						<option value="instance-notes-total">{{ $ts._instanceCharts.notesTotal }}</option>
-						<option value="instance-ff">{{ $ts._instanceCharts.ff }}</option>
-						<option value="instance-ff-total">{{ $ts._instanceCharts.ffTotal }}</option>
-						<option value="instance-drive-usage">{{ $ts._instanceCharts.cacheSize }}</option>
-						<option value="instance-drive-usage-total">{{ $ts._instanceCharts.cacheSizeTotal }}</option>
-						<option value="instance-drive-files">{{ $ts._instanceCharts.files }}</option>
-						<option value="instance-drive-files-total">{{ $ts._instanceCharts.filesTotal }}</option>
-					</MkSelect>
-					<MkSelect v-model="chartSpan" style="margin: 0;">
-						<option value="hour">{{ $ts.perHour }}</option>
-						<option value="day">{{ $ts.perDay }}</option>
-					</MkSelect>
-				</div>
-				<div class="chart">
-					<MkChart :src="chartSrc" :span="chartSpan" :limit="90" :args="{ host: host }" :detailed="true"></MkChart>
-				</div>
+	<MkSpacer :content-max="600" :margin-min="16" :margin-max="32">
+		<div v-if="instance" class="_formRoot">
+			<div class="fnfelxur">
+				<img :src="instance.iconUrl || instance.faviconUrl" alt="" class="icon"/>
 			</div>
-		</FormSection>
+			<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>Name</template>
+				<template #value>{{ instance.name || `(${$ts.unknown})` }}</template>
+			</MkKeyValue>
+			<MkKeyValue>
+				<template #key>{{ $ts.description }}</template>
+				<template #value>{{ instance.description }}</template>
+			</MkKeyValue>
+			<MkKeyValue oneline style="margin: 1em 0;">
+				<template #key>{{ $ts.software }}</template>
+				<template #value><span class="_monospace">{{ instance.softwareName || `(${$ts.unknown})` }} / {{ instance.softwareVersion || `(${$ts.unknown})` }}</span></template>
+			</MkKeyValue>
+			<MkKeyValue oneline style="margin: 1em 0;">
+				<template #key>{{ $ts.administrator }}</template>
+				<template #value>{{ instance.maintainerName || `(${$ts.unknown})` }} ({{ instance.maintainerEmail || `(${$ts.unknown})` }})</template>
+			</MkKeyValue>
 
-		<MkObjectView tall :value="instance">
-		</MkObjectView>
+			<FormSection v-if="iAmModerator">
+				<template #label>Moderation</template>
+				<FormSwitch v-model="suspended" class="_formBlock" @update:modelValue="toggleSuspend">{{ $ts.stopActivityDelivery }}</FormSwitch>
+				<FormSwitch v-model="isBlocked" class="_formBlock" @update:modelValue="toggleBlock">{{ $ts.blockThisInstance }}</FormSwitch>
+				<MkButton @click="refreshMetadata">Refresh metadata</MkButton>
+			</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>
-</MkSpacer></MkStickyContainer>
+			<FormSection>
+				<MkKeyValue oneline style="margin: 1em 0;">
+					<template #key>{{ $ts.registeredAt }}</template>
+					<template #value><MkTime mode="detail" :time="instance.caughtAt"/></template>
+				</MkKeyValue>
+				<MkKeyValue oneline style="margin: 1em 0;">
+					<template #key>{{ $ts.updatedAt }}</template>
+					<template #value><MkTime mode="detail" :time="instance.infoUpdatedAt"/></template>
+				</MkKeyValue>
+				<MkKeyValue oneline style="margin: 1em 0;">
+					<template #key>{{ $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>{{ $ts.latestStatus }}</template>
+					<template #value>{{ instance.latestStatus ? instance.latestStatus : 'N/A' }}</template>
+				</MkKeyValue>
+				<MkKeyValue oneline style="margin: 1em 0;">
+					<template #key>{{ $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>Open Registrations</template>
+					<template #value>{{ instance.openRegistrations ? $ts.yes : $ts.no }}</template>
+				</MkKeyValue>
+			</FormSection>
+
+			<FormSection>
+				<template #label>{{ $ts.statistics }}</template>
+				<div class="cmhjzshl">
+					<div class="selects">
+						<MkSelect v-model="chartSrc" style="margin: 0 10px 0 0; flex: 1;">
+							<option value="instance-requests">{{ $ts._instanceCharts.requests }}</option>
+							<option value="instance-users">{{ $ts._instanceCharts.users }}</option>
+							<option value="instance-users-total">{{ $ts._instanceCharts.usersTotal }}</option>
+							<option value="instance-notes">{{ $ts._instanceCharts.notes }}</option>
+							<option value="instance-notes-total">{{ $ts._instanceCharts.notesTotal }}</option>
+							<option value="instance-ff">{{ $ts._instanceCharts.ff }}</option>
+							<option value="instance-ff-total">{{ $ts._instanceCharts.ffTotal }}</option>
+							<option value="instance-drive-usage">{{ $ts._instanceCharts.cacheSize }}</option>
+							<option value="instance-drive-usage-total">{{ $ts._instanceCharts.cacheSizeTotal }}</option>
+							<option value="instance-drive-files">{{ $ts._instanceCharts.files }}</option>
+							<option value="instance-drive-files-total">{{ $ts._instanceCharts.filesTotal }}</option>
+						</MkSelect>
+						<MkSelect v-model="chartSpan" style="margin: 0;">
+							<option value="hour">{{ $ts.perHour }}</option>
+							<option value="day">{{ $ts.perDay }}</option>
+						</MkSelect>
+					</div>
+					<div class="chart">
+						<MkChart :src="chartSrc" :span="chartSpan" :limit="90" :args="{ host: host }" :detailed="true"></MkChart>
+					</div>
+				</div>
+			</FormSection>
+
+			<MkObjectView tall :value="instance">
+			</MkObjectView>
+
+			<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>
+	</MkSpacer>
+</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
@@ -169,7 +171,13 @@ function refreshMetadata() {
 
 fetch();
 
-const headerActions = $computed(() => []);
+const headerActions = $computed(() => [{
+	text: `https://${props.host}`,
+	icon: 'fas fa-external-link-alt',
+	handler: () => {
+		window.open(`https://${props.host}`, '_blank');
+	},
+}]);
 
 const headerTabs = $computed(() => []);
 
@@ -177,13 +185,6 @@ definePageMetadata({
 	title: props.host,
 	icon: 'fas fa-info-circle',
 	bg: 'var(--bg)',
-	actions: [{
-		text: `https://${props.host}`,
-		icon: 'fas fa-external-link-alt',
-		handler: () => {
-			window.open(`https://${props.host}`, '_blank');
-		},
-	}],
 });
 </script>
 
diff --git a/packages/client/src/pages/page-editor/page-editor.vue b/packages/client/src/pages/page-editor/page-editor.vue
index 97c278e5e8..1061e19dce 100644
--- a/packages/client/src/pages/page-editor/page-editor.vue
+++ b/packages/client/src/pages/page-editor/page-editor.vue
@@ -1,82 +1,84 @@
-<template><MkStickyContainer>
+<template>
+<MkStickyContainer>
 	<template #header><MkPageHeader :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="fas fa-external-link-square-alt"></i> {{ $ts._pages.viewPage }}</MkButton>
-		<MkButton v-if="!readonly" inline primary class="button" @click="save"><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
-		<MkButton v-if="pageId" inline class="button" @click="duplicate"><i class="fas fa-copy"></i> {{ $ts.duplicate }}</MkButton>
-		<MkButton v-if="pageId && !readonly" inline class="button" danger @click="del"><i class="fas fa-trash-alt"></i> {{ $ts.delete }}</MkButton>
-	</div>
+	<MkSpacer :content-max="700">
+		<div class="jqqmcavi">
+			<MkButton v-if="pageId" class="button" inline link :to="`/@${ author.username }/pages/${ currentName }`"><i class="fas fa-external-link-square-alt"></i> {{ $ts._pages.viewPage }}</MkButton>
+			<MkButton v-if="!readonly" inline primary class="button" @click="save"><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
+			<MkButton v-if="pageId" inline class="button" @click="duplicate"><i class="fas fa-copy"></i> {{ $ts.duplicate }}</MkButton>
+			<MkButton v-if="pageId && !readonly" inline class="button" danger @click="del"><i class="fas fa-trash-alt"></i> {{ $ts.delete }}</MkButton>
+		</div>
 
-	<div v-if="tab === 'settings'">
-		<div class="_formRoot">
-			<MkInput v-model="title" class="_formBlock">
-				<template #label>{{ $ts._pages.title }}</template>
-			</MkInput>
+		<div v-if="tab === 'settings'">
+			<div class="_formRoot">
+				<MkInput v-model="title" class="_formBlock">
+					<template #label>{{ $ts._pages.title }}</template>
+				</MkInput>
 
-			<MkInput v-model="summary" class="_formBlock">
-				<template #label>{{ $ts._pages.summary }}</template>
-			</MkInput>
+				<MkInput v-model="summary" class="_formBlock">
+					<template #label>{{ $ts._pages.summary }}</template>
+				</MkInput>
 
-			<MkInput v-model="name" class="_formBlock">
-				<template #prefix>{{ url }}/@{{ author.username }}/pages/</template>
-				<template #label>{{ $ts._pages.url }}</template>
-			</MkInput>
+				<MkInput v-model="name" class="_formBlock">
+					<template #prefix>{{ url }}/@{{ author.username }}/pages/</template>
+					<template #label>{{ $ts._pages.url }}</template>
+				</MkInput>
 
-			<MkSwitch v-model="alignCenter" class="_formBlock">{{ $ts._pages.alignCenter }}</MkSwitch>
+				<MkSwitch v-model="alignCenter" class="_formBlock">{{ $ts._pages.alignCenter }}</MkSwitch>
 
-			<MkSelect v-model="font" class="_formBlock">
-				<template #label>{{ $ts._pages.font }}</template>
-				<option value="serif">{{ $ts._pages.fontSerif }}</option>
-				<option value="sans-serif">{{ $ts._pages.fontSansSerif }}</option>
-			</MkSelect>
+				<MkSelect v-model="font" class="_formBlock">
+					<template #label>{{ $ts._pages.font }}</template>
+					<option value="serif">{{ $ts._pages.fontSerif }}</option>
+					<option value="sans-serif">{{ $ts._pages.fontSansSerif }}</option>
+				</MkSelect>
 
-			<MkSwitch v-model="hideTitleWhenPinned" class="_formBlock">{{ $ts._pages.hideTitleWhenPinned }}</MkSwitch>
+				<MkSwitch v-model="hideTitleWhenPinned" class="_formBlock">{{ $ts._pages.hideTitleWhenPinned }}</MkSwitch>
 
-			<div class="eyeCatch">
-				<MkButton v-if="eyeCatchingImageId == null && !readonly" @click="setEyeCatchingImage"><i class="fas fa-plus"></i> {{ $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="fas fa-trash-alt"></i> {{ $ts._pages.eyeCatchingImageRemove }}</MkButton>
+				<div class="eyeCatch">
+					<MkButton v-if="eyeCatchingImageId == null && !readonly" @click="setEyeCatchingImage"><i class="fas fa-plus"></i> {{ $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="fas fa-trash-alt"></i> {{ $ts._pages.eyeCatchingImageRemove }}</MkButton>
+					</div>
 				</div>
 			</div>
 		</div>
-	</div>
 
-	<div v-else-if="tab === 'contents'">
-		<div>
-			<XBlocks v-model="content" class="content" :hpml="hpml"/>
+		<div v-else-if="tab === 'contents'">
+			<div>
+				<XBlocks v-model="content" class="content" :hpml="hpml"/>
 
-			<MkButton v-if="!readonly" @click="add()"><i class="fas fa-plus"></i></MkButton>
+				<MkButton v-if="!readonly" @click="add()"><i class="fas fa-plus"></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="fas fa-plus"></i></MkButton>
+				<MkButton v-if="!readonly" class="add" @click="addVariable()"><i class="fas fa-plus"></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>
@@ -408,7 +410,27 @@ init();
 
 const headerActions = $computed(() => []);
 
-const headerTabs = $computed(() => []);
+const headerTabs = $computed(() => [{
+	active: tab === 'settings',
+	title: i18n.ts._pages.pageSetting,
+	icon: 'fas fa-cog',
+	onClick: () => { tab = 'settings'; },
+}, {
+	active: tab === 'contents',
+	title: i18n.ts._pages.contents,
+	icon: 'fas fa-sticky-note',
+	onClick: () => { tab = 'contents'; },
+}, {
+	active: tab === 'variables',
+	title: i18n.ts._pages.variables,
+	icon: 'fas fa-magic',
+	onClick: () => { tab = 'variables'; },
+}, {
+	active: tab === 'script',
+	title: i18n.ts.script,
+	icon: 'fas fa-code',
+	onClick: () => { tab = 'script'; },
+}]);
 
 definePageMetadata(computed(() => {
 	let title = i18n.ts._pages.newPage;
@@ -422,27 +444,6 @@ definePageMetadata(computed(() => {
 		title: title,
 		icon: 'fas fa-pencil-alt',
 		bg: 'var(--bg)',
-		tabs: [{
-			active: tab === 'settings',
-			title: i18n.ts._pages.pageSetting,
-			icon: 'fas fa-cog',
-			onClick: () => { tab = 'settings'; },
-		}, {
-			active: tab === 'contents',
-			title: i18n.ts._pages.contents,
-			icon: 'fas fa-sticky-note',
-			onClick: () => { tab = 'contents'; },
-		}, {
-			active: tab === 'variables',
-			title: i18n.ts._pages.variables,
-			icon: 'fas fa-magic',
-			onClick: () => { tab = 'variables'; },
-		}, {
-			active: tab === 'script',
-			title: i18n.ts.script,
-			icon: 'fas fa-code',
-			onClick: () => { tab = 'script'; },
-		}],
 	};
 }));
 </script>

From f995172c5d3a4166ff3285b65cee66237d313393 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Mon, 20 Jun 2022 21:05:18 +0900
Subject: [PATCH 12/90] tweak client

---
 packages/client/src/pages/admin-file.vue | 11 ++++-------
 packages/client/src/pages/user-info.vue  | 12 ++++--------
 2 files changed, 8 insertions(+), 15 deletions(-)

diff --git a/packages/client/src/pages/admin-file.vue b/packages/client/src/pages/admin-file.vue
index 67dcd88bc4..2cbe8890a1 100644
--- a/packages/client/src/pages/admin-file.vue
+++ b/packages/client/src/pages/admin-file.vue
@@ -14,9 +14,9 @@
 			<div class="_formBlock">
 				<MkSwitch v-model="isSensitive" @update:modelValue="toggleIsSensitive">NSFW</MkSwitch>
 			</div>
-			<div class="_formBlock">
-				<MkButton full @click="showUser"><i class="fas fa-external-link-square-alt"></i> {{ $ts.user }}</MkButton>
-			</div>
+			<FormLink class="_formBlock" :to="file.url" :external="true">Open</FormLink>
+			<FormLink class="_formBlock" :to="`/user-info/${file.userId}`">{{ $ts.user }}</FormLink>
+
 			<div class="_formBlock">
 				<MkButton full danger @click="del"><i class="fas fa-trash-alt"></i> {{ $ts.delete }}</MkButton>
 			</div>
@@ -35,6 +35,7 @@ import { computed } from 'vue';
 import MkButton from '@/components/ui/button.vue';
 import MkSwitch from '@/components/form/switch.vue';
 import MkDriveFileThumbnail from '@/components/drive-file-thumbnail.vue';
+import FormLink from '@/components/form/link.vue';
 import bytes from '@/filters/bytes';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
@@ -56,10 +57,6 @@ async function fetch() {
 
 fetch();
 
-function showUser() {
-	os.pageWindow(`/user-info/${file.userId}`);
-}
-
 async function del() {
 	const { canceled } = await os.confirm({
 		type: 'warning',
diff --git a/packages/client/src/pages/user-info.vue b/packages/client/src/pages/user-info.vue
index 6dc25e99d6..996c018dd9 100644
--- a/packages/client/src/pages/user-info.vue
+++ b/packages/client/src/pages/user-info.vue
@@ -8,7 +8,9 @@
 					<MkAvatar class="avatar" :user="user" :show-indicator="true"/>
 				</div>
 
-				<FormLink :to="userPage(user)">Profile</FormLink>
+				<FormLink class="_formBlock" :to="userPage(user)">Profile</FormLink>
+
+				<FormLink v-if="user.url" class="_formBlock" :to="user.url" :external="true">Profile (remote)</FormLink>
 
 				<div class="_formBlock">
 					<MkKeyValue :copy="acct(user)" oneline style="margin: 1em 0;">
@@ -205,13 +207,7 @@ watch(() => user, () => {
 	});
 });
 
-const headerActions = $computed(() => user && user.url ? [{
-	text: user.url,
-	icon: 'fas fa-external-link-alt',
-	handler: () => {
-		window.open(user.url, '_blank');
-	},
-}] : []);
+const headerActions = $computed(() => []);
 
 const headerTabs = $computed(() => []);
 

From 3796a3edeac52314a992b9aae61ca9a6d7d6b1d1 Mon Sep 17 00:00:00 2001
From: Johann150 <johann.galle@protonmail.com>
Date: Mon, 20 Jun 2022 16:48:38 +0200
Subject: [PATCH 13/90] fix: block button in federation panel (#8855)

---
 packages/client/src/pages/instance-info.vue | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/packages/client/src/pages/instance-info.vue b/packages/client/src/pages/instance-info.vue
index 9d7af4fc7d..231b1dfd18 100644
--- a/packages/client/src/pages/instance-info.vue
+++ b/packages/client/src/pages/instance-info.vue
@@ -138,12 +138,17 @@ let chartSrc = $ref('instance-requests');
 let chartSpan = $ref('hour');
 
 async function fetch() {
-	meta = await os.api('meta', { detail: true });
-	instance = await os.api('federation/show-instance', {
-		host: props.host,
-	});
-	suspended = instance.isSuspended;
-	isBlocked = meta.blockedHosts.includes(instance.host);
+	if (iAmModerator) {
+		// suspended and blocked information is only displayed to moderators.
+		// otherwise the API will error anyway
+
+		meta = await os.api('admin/meta', { detail: true });
+		instance = await os.api('federation/show-instance', {
+			host: props.host,
+		});
+		suspended = instance.isSuspended;
+		isBlocked = meta.blockedHosts.includes(instance.host);
+	}
 }
 
 async function toggleBlock(ev) {

From ce6cc21bcd5db7d8b454f91f5db884da71c4536f Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Tue, 21 Jun 2022 14:12:39 +0900
Subject: [PATCH 14/90] tweak client

Fix #8856
---
 .../client/src/components/abuse-report.vue    | 129 +++++++++---------
 packages/client/src/nirax.ts                  |  11 +-
 .../src/pages/page-editor/page-editor.vue     |  54 ++++----
 packages/client/src/pages/page.vue            | 102 +++++++-------
 packages/client/src/pages/timeline.vue        |  35 +++--
 .../client/src/pages/user-list-timeline.vue   |  46 ++++---
 6 files changed, 195 insertions(+), 182 deletions(-)

diff --git a/packages/client/src/components/abuse-report.vue b/packages/client/src/components/abuse-report.vue
index a947406f88..86eccd6276 100644
--- a/packages/client/src/components/abuse-report.vue
+++ b/packages/client/src/components/abuse-report.vue
@@ -1,13 +1,19 @@
 <template>
-<div class="bcekxzvu _card _gap">
-	<div class="_content target">
-		<MkAvatar class="avatar" :user="report.targetUser" :show-indicator="true"/>
-		<MkA v-user-preview="report.targetUserId" class="info" :to="userPage(report.targetUser)">
-			<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}`" :behavior="'window'">
+			<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>{{ $ts.registeredDate }}</template>
+			<template #value>{{ new Date(report.targetUser.createdAt).toLocaleString() }} (<MkTime :time="report.targetUser.createdAt"/>)</template>
+		</MkKeyValue>
 	</div>
-	<div class="_content">
+	<div class="detail">
 		<div>
 			<Mfm :text="report.comment"/>
 		</div>
@@ -18,85 +24,84 @@
 			<MkAcct :user="report.assignee"/>
 		</div>
 		<div><MkTime :time="report.createdAt"/></div>
-	</div>
-	<div class="_footer">
-		<MkSwitch v-model="forward" :disabled="report.targetUser.host == null || report.resolved">
-			{{ $ts.forwardReport }}
-			<template #caption>{{ $ts.forwardReportIsAnonymous }}</template>
-		</MkSwitch>
-		<MkButton v-if="!report.resolved" primary @click="resolve">{{ $ts.abuseMarkAsResolved }}</MkButton>
+		<div class="action">
+			<MkSwitch v-model="forward" :disabled="report.targetUser.host == null || report.resolved">
+				{{ $ts.forwardReport }}
+				<template #caption>{{ $ts.forwardReportIsAnonymous }}</template>
+			</MkSwitch>
+			<MkButton v-if="!report.resolved" primary @click="resolve">{{ $ts.abuseMarkAsResolved }}</MkButton>
+		</div>
 	</div>
 </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
-
+<script lang="ts" setup>
 import MkButton from '@/components/ui/button.vue';
 import MkSwitch from '@/components/form/switch.vue';
+import MkKeyValue from '@/components/key-value.vue';
 import { acct, userPage } from '@/filters/user';
 import * as os from '@/os';
 
-export default defineComponent({
-	components: {
-		MkButton,
-		MkSwitch,
-	},
+const props = defineProps<{
+	report: any;
+}>();
 
-	props: {
-		report: {
-			type: Object,
-			required: true,
-		}
-	},
+const emit = defineEmits<{
+	(ev: 'resolved', reportId: string): void;
+}>();
 
-	emits: ['resolved'],
+let forward = $ref(props.report.forwarded);
 
-	data() {
-		return {
-			forward: this.report.forwarded,
-		};
-	},
-
-	methods: {
-		acct,
-		userPage,
-
-		resolve() {
-			os.apiWithDialog('admin/resolve-abuse-user-report', {
-				forward: this.forward,
-				reportId: this.report.id,
-			}).then(() => {
-				this.$emit('resolved', this.report.id);
-			});
-		}
-	}
-});
+function resolve() {
+	os.apiWithDialog('admin/resolve-abuse-user-report', {
+		forward: forward,
+		reportId: props.report.id,
+	}).then(() => {
+		emit('resolved', props.report.id);
+	});
+}
 </script>
 
 <style lang="scss" scoped>
 .bcekxzvu {
+	display: flex;
+
 	> .target {
-		display: flex;
-		width: 100%;
+		width: 35%;
 		box-sizing: border-box;
 		text-align: left;
-		align-items: center;
-
-		> .avatar {
-			width: 42px;
-			height: 42px;
-		}
+		padding: 24px;
+		border-right: solid 1px var(--divider);
 
 		> .info {
-			margin-left: 0.3em;
-			padding: 0 8px;
-			flex: 1;
+			display: flex;
+			box-sizing: border-box;
+			align-items: center;
+			padding: 14px;
+			border-radius: 8px;
+			background-image: linear-gradient(45deg, rgb(255 196 0 / 15%) 16.67%, transparent 16.67%, transparent 50%, rgb(255 196 0 / 15%) 50%, rgb(255 196 0 / 15%) 66.67%, transparent 66.67%, transparent 100%);
+			background-size: 16px 16px;
 
-			> .name {
-				font-weight: bold;
+			> .avatar {
+				width: 42px;
+				height: 42px;
+			}
+
+			> .names {
+				margin-left: 0.3em;
+				padding: 0 8px;
+				flex: 1;
+
+				> .name {
+					font-weight: bold;
+				}
 			}
 		}
 	}
+
+	> .detail {
+		flex: 1;
+		padding: 24px;
+	}
 }
 </style>
diff --git a/packages/client/src/nirax.ts b/packages/client/src/nirax.ts
index 6840483c21..a0cdb03482 100644
--- a/packages/client/src/nirax.ts
+++ b/packages/client/src/nirax.ts
@@ -107,10 +107,15 @@ export class Router extends EventEmitter<{
 						}
 						break pathMatchLoop;
 					} else {
-						if (p.startsWith && (parts[0] == null || !parts[0].startsWith(p.startsWith))) continue forEachRouteLoop;
+						if (p.startsWith) {
+							if (parts[0] == null || !parts[0].startsWith(p.startsWith)) continue forEachRouteLoop;
 
-						props.set(p.name, parts[0]);
-						parts.shift();
+							props.set(p.name, parts[0].substring(p.startsWith.length));
+							parts.shift();
+						} else {
+							props.set(p.name, parts[0]);
+							parts.shift();
+						}
 					}
 				}
 			}
diff --git a/packages/client/src/pages/page-editor/page-editor.vue b/packages/client/src/pages/page-editor/page-editor.vue
index 1061e19dce..c09d9af734 100644
--- a/packages/client/src/pages/page-editor/page-editor.vue
+++ b/packages/client/src/pages/page-editor/page-editor.vue
@@ -151,21 +151,21 @@ watch($$(eyeCatchingImageId), async () => {
 
 function getSaveOptions() {
 	return {
-		title: tatitle.trim(),
-		name: taname.trim(),
-		summary: tasummary,
-		font: tafont,
-		script: tascript,
-		hideTitleWhenPinned: tahideTitleWhenPinned,
-		alignCenter: taalignCenter,
-		content: tacontent,
-		variables: tavariables,
-		eyeCatchingImageId: taeyeCatchingImageId,
+		title: title.trim(),
+		name: name.trim(),
+		summary: summary,
+		font: font,
+		script: script,
+		hideTitleWhenPinned: hideTitleWhenPinned,
+		alignCenter: alignCenter,
+		content: content,
+		variables: variables,
+		eyeCatchingImageId: eyeCatchingImageId,
 	};
 }
 
 function save() {
-	const options = tagetSaveOptions();
+	const options = getSaveOptions();
 
 	const onError = err => {
 		if (err.id == '3d81ceae-475f-4600-b2a8-2bc116157532') {
@@ -184,11 +184,11 @@ function save() {
 		}
 	};
 
-	if (tapageId) {
-		options.pageId = tapageId;
+	if (pageId) {
+		options.pageId = pageId;
 		os.api('pages/update', options)
 		.then(page => {
-			tacurrentName = taname.trim();
+			currentName = name.trim();
 			os.alert({
 				type: 'success',
 				text: i18n.ts._pages.updated,
@@ -197,8 +197,8 @@ function save() {
 	} else {
 		os.api('pages/create', options)
 		.then(created => {
-			tapageId = created.id;
-			tacurrentName = name.trim();
+			pageId = created.id;
+			currentName = name.trim();
 			os.alert({
 				type: 'success',
 				text: i18n.ts._pages.created,
@@ -227,11 +227,11 @@ function del() {
 }
 
 function duplicate() {
-	tatitle = tatitle + ' - copy';
-	taname = taname + '-copy';
-	os.api('pages/create', tagetSaveOptions()).then(created => {
-		tapageId = created.id;
-		tacurrentName = taname.trim();
+	title = title + ' - copy';
+	name = name + '-copy';
+	os.api('pages/create', getSaveOptions()).then(created => {
+		pageId = created.id;
+		currentName = name.trim();
 		os.alert({
 			type: 'success',
 			text: i18n.ts._pages.created,
@@ -244,12 +244,12 @@ async function add() {
 	const { canceled, result: type } = await os.select({
 		type: null,
 		title: i18n.ts._pages.chooseBlock,
-		groupedItems: tagetPageBlockList(),
+		groupedItems: getPageBlockList(),
 	});
 	if (canceled) return;
 
 	const id = uuid();
-	tacontent.push({ id, type });
+	content.push({ id, type });
 }
 
 async function addVariable() {
@@ -260,7 +260,7 @@ async function addVariable() {
 
 	name = name.trim();
 
-	if (tahpml.isUsedName(name)) {
+	if (hpml.isUsedName(name)) {
 		os.alert({
 			type: 'error',
 			text: i18n.ts._pages.variableNameIsAlreadyUsed,
@@ -269,11 +269,11 @@ async function addVariable() {
 	}
 
 	const id = uuid();
-	tavariables.push({ id, name, type: null });
+	variables.push({ id, name, type: null });
 }
 
 function removeVariable(v) {
-	tavariables = tavariables.filter(x => x.name !== v.name);
+	variables = variables.filter(x => x.name !== v.name);
 }
 
 function getPageBlockList() {
@@ -352,7 +352,7 @@ function setEyeCatchingImage(e) {
 }
 
 function removeEyeCatchingImage() {
-	taeyeCatchingImageId = null;
+	eyeCatchingImageId = null;
 }
 
 function highlighter(code) {
diff --git a/packages/client/src/pages/page.vue b/packages/client/src/pages/page.vue
index 71b404bbf4..c60b7069e9 100644
--- a/packages/client/src/pages/page.vue
+++ b/packages/client/src/pages/page.vue
@@ -1,63 +1,65 @@
-<template><MkStickyContainer>
+<template>
+<MkStickyContainer>
 	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
-		<MkSpacer :content-max="700">
-	<transition :name="$store.state.animation ? 'fade' : ''" mode="out-in">
-		<div v-if="page" :key="page.id" v-size="{ max: [450] }" class="xcukqgmh">
-			<div class="_block main">
-				<!--
+	<MkSpacer :content-max="700">
+		<transition :name="$store.state.animation ? 'fade' : ''" mode="out-in">
+			<div v-if="page" :key="page.id" v-size="{ max: [450] }" class="xcukqgmh">
+				<div class="_block main">
+					<!--
 				<div class="header">
 					<h1>{{ page.title }}</h1>
 				</div>
 				-->
-				<div class="banner">
-					<img v-if="page.eyeCatchingImageId" :src="page.eyeCatchingImage.url"/>
-				</div>
-				<div class="content">
-					<XPage :page="page"/>
-				</div>
-				<div class="actions">
-					<div class="like">
-						<MkButton v-if="page.isLiked" v-tooltip="$ts._pages.unlike" class="button" primary @click="unlike()"><i class="fas fa-heart"></i><span v-if="page.likedCount > 0" class="count">{{ page.likedCount }}</span></MkButton>
-						<MkButton v-else v-tooltip="$ts._pages.like" class="button" @click="like()"><i class="far fa-heart"></i><span v-if="page.likedCount > 0" class="count">{{ page.likedCount }}</span></MkButton>
+					<div class="banner">
+						<img v-if="page.eyeCatchingImageId" :src="page.eyeCatchingImage.url"/>
 					</div>
-					<div class="other">
-						<button v-tooltip="$ts.shareWithNote" v-click-anime class="_button" @click="shareWithNote"><i class="fas fa-retweet fa-fw"></i></button>
-						<button v-tooltip="$ts.share" v-click-anime class="_button" @click="share"><i class="fas fa-share-alt fa-fw"></i></button>
+					<div class="content">
+						<XPage :page="page"/>
+					</div>
+					<div class="actions">
+						<div class="like">
+							<MkButton v-if="page.isLiked" v-tooltip="$ts._pages.unlike" class="button" primary @click="unlike()"><i class="fas fa-heart"></i><span v-if="page.likedCount > 0" class="count">{{ page.likedCount }}</span></MkButton>
+							<MkButton v-else v-tooltip="$ts._pages.like" class="button" @click="like()"><i class="far fa-heart"></i><span v-if="page.likedCount > 0" class="count">{{ page.likedCount }}</span></MkButton>
+						</div>
+						<div class="other">
+							<button v-tooltip="$ts.shareWithNote" v-click-anime class="_button" @click="shareWithNote"><i class="fas fa-retweet fa-fw"></i></button>
+							<button v-tooltip="$ts.share" v-click-anime class="_button" @click="share"><i class="fas fa-share-alt fa-fw"></i></button>
+						</div>
+					</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" large class="koudoku"/>
+					</div>
+					<div class="links">
+						<MkA :to="`/@${username}/pages/${pageName}/view-source`" class="link">{{ $ts._pages.viewSource }}</MkA>
+						<template v-if="$i && $i.id === page.userId">
+							<MkA :to="`/pages/edit/${page.id}`" class="link">{{ $ts._pages.editThisPage }}</MkA>
+							<button v-if="$i.pinnedPageId === page.id" class="link _textButton" @click="pin(false)">{{ $ts.unpin }}</button>
+							<button v-else class="link _textButton" @click="pin(true)">{{ $ts.pin }}</button>
+						</template>
 					</div>
 				</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" large class="koudoku"/>
-				</div>
-				<div class="links">
-					<MkA :to="`/@${username}/pages/${pageName}/view-source`" class="link">{{ $ts._pages.viewSource }}</MkA>
-					<template v-if="$i && $i.id === page.userId">
-						<MkA :to="`/pages/edit/${page.id}`" class="link">{{ $ts._pages.editThisPage }}</MkA>
-						<button v-if="$i.pinnedPageId === page.id" class="link _textButton" @click="pin(false)">{{ $ts.unpin }}</button>
-						<button v-else class="link _textButton" @click="pin(true)">{{ $ts.pin }}</button>
-					</template>
+				<div class="footer">
+					<div><i class="far fa-clock"></i> {{ $ts.createdAt }}: <MkTime :time="page.createdAt" mode="detail"/></div>
+					<div v-if="page.createdAt != page.updatedAt"><i class="far fa-clock"></i> {{ $ts.updatedAt }}: <MkTime :time="page.updatedAt" mode="detail"/></div>
 				</div>
+				<MkAd :prefer="['horizontal', 'horizontal-big']"/>
+				<MkContainer :max-height="300" :foldable="true" class="other">
+					<template #header><i class="fas fa-clock"></i> {{ $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>
-			<div class="footer">
-				<div><i class="far fa-clock"></i> {{ $ts.createdAt }}: <MkTime :time="page.createdAt" mode="detail"/></div>
-				<div v-if="page.createdAt != page.updatedAt"><i class="far fa-clock"></i> {{ $ts.updatedAt }}: <MkTime :time="page.updatedAt" mode="detail"/></div>
-			</div>
-			<MkAd :prefer="['horizontal', 'horizontal-big']"/>
-			<MkContainer :max-height="300" :foldable="true" class="other">
-				<template #header><i class="fas fa-clock"></i> {{ $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="fetch()"/>
-		<MkLoading v-else/>
-	</transition>
-</MkSpacer></MkStickyContainer>
+			<MkError v-else-if="error" @retry="fetchPage()"/>
+			<MkLoading v-else/>
+		</transition>
+	</MkSpacer>
+</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
diff --git a/packages/client/src/pages/timeline.vue b/packages/client/src/pages/timeline.vue
index e0f0a1f151..111451632c 100644
--- a/packages/client/src/pages/timeline.vue
+++ b/packages/client/src/pages/timeline.vue
@@ -109,23 +109,7 @@ function focus(): void {
 	tlComponent.focus();
 }
 
-const headerActions = $computed(() => [{
-	icon: 'fas fa-list-ul',
-	text: i18n.ts.lists,
-	handler: chooseList,
-}, {
-	icon: 'fas fa-satellite',
-	text: i18n.ts.antennas,
-	handler: chooseAntenna,
-}, {
-	icon: 'fas fa-satellite-dish',
-	text: i18n.ts.channel,
-	handler: chooseChannel,
-}, {
-	icon: 'fas fa-calendar-alt',
-	text: i18n.ts.jumpToSpecifiedDate,
-	handler: timetravel,
-}]);
+const headerActions = $computed(() => []);
 
 const headerTabs = $computed(() => [{
 	active: src === 'home',
@@ -151,7 +135,22 @@ const headerTabs = $computed(() => [{
 	icon: 'fas fa-globe',
 	iconOnly: true,
 	onClick: () => { saveSrc('global'); },
-}] : [])]);
+}] : []), {
+	icon: 'fas fa-list-ul',
+	title: i18n.ts.lists,
+	iconOnly: true,
+	onClick: chooseList,
+}, {
+	icon: 'fas fa-satellite',
+	title: i18n.ts.antennas,
+	iconOnly: true,
+	onClick: chooseAntenna,
+}, {
+	icon: 'fas fa-satellite-dish',
+	title: i18n.ts.channel,
+	iconOnly: true,
+	onClick: chooseChannel,
+}]);
 
 definePageMetadata(computed(() => ({
 	title: i18n.ts.timeline,
diff --git a/packages/client/src/pages/user-list-timeline.vue b/packages/client/src/pages/user-list-timeline.vue
index 9783088a19..07d5a166e9 100644
--- a/packages/client/src/pages/user-list-timeline.vue
+++ b/packages/client/src/pages/user-list-timeline.vue
@@ -1,17 +1,20 @@
 <template>
-<div ref="rootEl" v-hotkey.global="keymap" v-size="{ min: [800] }" class="eqqrhokj">
-	<div v-if="queue > 0" class="new"><button class="_buttonPrimary" @click="top()">{{ $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()">{{ $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>
 </template>
 
 <script lang="ts" setup>
@@ -61,7 +64,15 @@ async function timetravel() {
 	tlEl.timetravel(date);
 }
 
-const headerActions = $computed(() => []);
+const headerActions = $computed(() => list ? [{
+	icon: 'fas fa-calendar-alt',
+	text: i18n.ts.jumpToSpecifiedDate,
+	handler: timetravel,
+}, {
+	icon: 'fas fa-cog',
+	text: i18n.ts.settings,
+	handler: settings,
+}] : []);
 
 const headerTabs = $computed(() => []);
 
@@ -69,15 +80,6 @@ definePageMetadata(computed(() => list ? {
 	title: list.name,
 	icon: 'fas fa-list-ul',
 	bg: 'var(--bg)',
-	actions: [{
-		icon: 'fas fa-calendar-alt',
-		text: i18n.ts.jumpToSpecifiedDate,
-		handler: timetravel,
-	}, {
-		icon: 'fas fa-cog',
-		text: i18n.ts.settings,
-		handler: settings,
-	}],
 } : null));
 </script>
 

From 14cc341cc93c088bd98c6f4a04c93d455e47b3cc Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Tue, 21 Jun 2022 14:18:06 +0900
Subject: [PATCH 15/90] chore: add comments

---
 packages/client/src/nirax.ts  | 2 ++
 packages/client/src/pizzax.ts | 6 ++++--
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/client/src/nirax.ts b/packages/client/src/nirax.ts
index a0cdb03482..d219787448 100644
--- a/packages/client/src/nirax.ts
+++ b/packages/client/src/nirax.ts
@@ -1,3 +1,5 @@
+// NIRAX --- A lightweight router
+
 import { EventEmitter } from 'eventemitter3';
 import { Ref, Component, ref, shallowRef, ShallowRef } from 'vue';
 
diff --git a/packages/client/src/pizzax.ts b/packages/client/src/pizzax.ts
index fa35df5511..89679123ba 100644
--- a/packages/client/src/pizzax.ts
+++ b/packages/client/src/pizzax.ts
@@ -1,3 +1,5 @@
+// PIZZAX --- A lightweight store
+
 import { onUnmounted, Ref, ref, watch } from 'vue';
 import { $i } from './account';
 import { api } from './os';
@@ -116,7 +118,7 @@ export class Storage<T extends StateDef> {
 				api('i/registry/set', {
 					scope: ['client', this.key],
 					key: key,
-					value: value
+					value: value,
 				});
 				break;
 			}
@@ -161,7 +163,7 @@ export class Storage<T extends StateDef> {
 				const val = setter ? setter(value) : value;
 				this.set(key, val);
 				valueRef.value = val;
-			}
+			},
 		};
 	}
 }

From 4efee455b1e118312fd07305095835c74fab5523 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Tue, 21 Jun 2022 14:28:43 +0900
Subject: [PATCH 16/90] fix(server): faviconUrl of federated instance is
 missing

---
 CHANGELOG.md                                              | 1 +
 packages/backend/src/models/repositories/instance.ts      | 1 +
 packages/backend/src/models/schema/federation-instance.ts | 5 +++++
 3 files changed, 7 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 01b179f13f..904083e7b1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -20,6 +20,7 @@ You should also include the user name that made the change.
 ### Bugfixes
 - Server: Fix GenerateVideoThumbnail failed @mei23
 - Server: Ensure temp directory cleanup @Johann150
+- favicons of federated instances not showing @syuilo
 
 ## 12.111.1 (2022/06/13)
 
diff --git a/packages/backend/src/models/repositories/instance.ts b/packages/backend/src/models/repositories/instance.ts
index 4ddf717098..4594d86346 100644
--- a/packages/backend/src/models/repositories/instance.ts
+++ b/packages/backend/src/models/repositories/instance.ts
@@ -26,6 +26,7 @@ export const InstanceRepository = db.getRepository(Instance).extend({
 			maintainerName: instance.maintainerName,
 			maintainerEmail: instance.maintainerEmail,
 			iconUrl: instance.iconUrl,
+			faviconUrl: instance.faviconUrl,
 			infoUpdatedAt: instance.infoUpdatedAt ? instance.infoUpdatedAt.toISOString() : null,
 		};
 	},
diff --git a/packages/backend/src/models/schema/federation-instance.ts b/packages/backend/src/models/schema/federation-instance.ts
index c4e7b3f18b..9f27aab985 100644
--- a/packages/backend/src/models/schema/federation-instance.ts
+++ b/packages/backend/src/models/schema/federation-instance.ts
@@ -88,6 +88,11 @@ export const packedFederationInstanceSchema = {
 			optional: false, nullable: true,
 			format: 'url',
 		},
+		faviconUrl: {
+			type: 'string',
+			optional: false, nullable: true,
+			format: 'url',
+		},
 		infoUpdatedAt: {
 			type: 'string',
 			optional: false, nullable: true,

From a6fff86099d918a3c520524fb616f7a335edfcdc Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Tue, 21 Jun 2022 14:39:23 +0900
Subject: [PATCH 17/90] refactor(client): use composition api

---
 packages/client/src/components/mini-chart.vue | 97 ++++++++-----------
 1 file changed, 43 insertions(+), 54 deletions(-)

diff --git a/packages/client/src/components/mini-chart.vue b/packages/client/src/components/mini-chart.vue
index 8c74eae876..345b6a0b01 100644
--- a/packages/client/src/components/mini-chart.vue
+++ b/packages/client/src/components/mini-chart.vue
@@ -9,82 +9,71 @@
 			<polygon
 				:points="polygonPoints"
 				fill="#fff"
-				fill-opacity="0.5"/>
+				fill-opacity="0.5"
+			/>
 			<polyline
 				:points="polylinePoints"
 				fill="none"
 				stroke="#fff"
-				stroke-width="2"/>
+				stroke-width="2"
+			/>
 			<circle
 				:cx="headX"
 				:cy="headY"
 				r="3"
-				fill="#fff"/>
+				fill="#fff"
+			/>
 		</mask>
 	</defs>
 	<rect
 		x="-10" y="-10"
 		:width="viewBoxX + 20" :height="viewBoxY + 20"
-		:style="`stroke: none; fill: url(#${ gradientId }); mask: url(#${ maskId })`"/>
+		:style="`stroke: none; fill: url(#${ gradientId }); mask: url(#${ maskId })`"
+	/>
 </svg>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
+import { onUnmounted, watch } from 'vue';
 import { v4 as uuid } from 'uuid';
-import * as os from '@/os';
 
-export default defineComponent({
-	props: {
-		src: {
-			type: Array,
-			required: true
-		}
-	},
-	data() {
-		return {
-			viewBoxX: 50,
-			viewBoxY: 30,
-			gradientId: uuid(),
-			maskId: uuid(),
-			polylinePoints: '',
-			polygonPoints: '',
-			headX: null,
-			headY: null,
-			clock: null
-		};
-	},
-	watch: {
-		src() {
-			this.draw();
-		}
-	},
-	created() {
-		this.draw();
+const props = defineProps<{
+	src: number[];
+}>();
 
-		// Vueが何故かWatchを発動させない場合があるので
-		this.clock = window.setInterval(this.draw, 1000);
-	},
-	beforeUnmount() {
-		window.clearInterval(this.clock);
-	},
-	methods: {
-		draw() {
-			const stats = this.src.slice().reverse();
-			const peak = Math.max.apply(null, stats) || 1;
+const viewBoxX = 50;
+const viewBoxY = 50;
+const gradientId = uuid();
+const maskId = uuid();
+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 polylinePoints = stats.map((n, i) => [
-				i * (this.viewBoxX / (stats.length - 1)),
-				(1 - (n / peak)) * this.viewBoxY
-			]);
+function draw(): void {
+	const stats = props.src.slice().reverse();
+	const peak = Math.max.apply(null, stats) || 1;
 
-			this.polylinePoints = polylinePoints.map(xy => `${xy[0]},${xy[1]}`).join(' ');
+	const _polylinePoints = stats.map((n, i) => [
+		i * (viewBoxX / (stats.length - 1)),
+		(1 - (n / peak)) * viewBoxY,
+	]);
 
-			this.polygonPoints = `0,${ this.viewBoxY } ${ this.polylinePoints } ${ this.viewBoxX },${ this.viewBoxY }`;
+	polylinePoints = _polylinePoints.map(xy => `${xy[0]},${xy[1]}`).join(' ');
 
-			this.headX = polylinePoints[polylinePoints.length - 1][0];
-			this.headY = polylinePoints[polylinePoints.length - 1][1];
-		}
-	}
+	polygonPoints = `0,${ viewBoxY } ${ polylinePoints } ${ viewBoxX },${ viewBoxY }`;
+
+	headX = _polylinePoints[_polylinePoints.length - 1][0];
+	headY = _polylinePoints[_polylinePoints.length - 1][1];
+}
+
+watch(() => props.src, draw, { immediate: true });
+
+// Vueが何故かWatchを発動させない場合があるので
+clock = window.setInterval(draw, 1000);
+
+onUnmounted(() => {
+	window.clearInterval(clock);
 });
 </script>

From f880d0631c7daf9cffbc388dcb81fd1f7f4259fb Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Tue, 21 Jun 2022 17:55:38 +0900
Subject: [PATCH 18/90] tweak client

---
 locales/ja-JP.yml                             |   2 +
 .../src/models/repositories/instance.ts       |   3 +
 .../src/models/schema/federation-instance.ts  |   4 +
 .../client/src/components/abuse-report.vue    |   3 +-
 .../client/src/components/instance-info.vue   |  96 ++++++++++++
 packages/client/src/pages/federation.vue      | 137 ++----------------
 packages/client/src/pages/instance-info.vue   |  93 +++++++-----
 packages/client/src/scripts/i18n.ts           |   4 +-
 8 files changed, 175 insertions(+), 167 deletions(-)
 create mode 100644 packages/client/src/components/instance-info.vue

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 082b8a24bc..2383d8f436 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -848,6 +848,8 @@ rateLimitExceeded: "レート制限を超えました"
 cropImage: "画像のクロップ"
 cropImageAsk: "画像をクロップしますか？"
 file: "ファイル"
+recentNHours: "直近{n}時間"
+recentNDays: "直近{n}日"
 
 _emailUnavailable:
   used: "既に使用されています"
diff --git a/packages/backend/src/models/repositories/instance.ts b/packages/backend/src/models/repositories/instance.ts
index 4594d86346..e9ee18ea35 100644
--- a/packages/backend/src/models/repositories/instance.ts
+++ b/packages/backend/src/models/repositories/instance.ts
@@ -1,11 +1,13 @@
 import { db } from '@/db/postgre.js';
 import { Instance } from '@/models/entities/instance.js';
 import { Packed } from '@/misc/schema.js';
+import { fetchMeta } from '@/misc/fetch-meta.js';
 
 export const InstanceRepository = db.getRepository(Instance).extend({
 	async pack(
 		instance: Instance,
 	): Promise<Packed<'FederationInstance'>> {
+		const meta = await fetchMeta();
 		return {
 			id: instance.id,
 			caughtAt: instance.caughtAt.toISOString(),
@@ -18,6 +20,7 @@ export const InstanceRepository = db.getRepository(Instance).extend({
 			lastCommunicatedAt: instance.lastCommunicatedAt.toISOString(),
 			isNotResponding: instance.isNotResponding,
 			isSuspended: instance.isSuspended,
+			isBlocked: meta.blockedHosts.includes(instance.host),
 			softwareName: instance.softwareName,
 			softwareVersion: instance.softwareVersion,
 			openRegistrations: instance.openRegistrations,
diff --git a/packages/backend/src/models/schema/federation-instance.ts b/packages/backend/src/models/schema/federation-instance.ts
index 9f27aab985..3efff6ca9c 100644
--- a/packages/backend/src/models/schema/federation-instance.ts
+++ b/packages/backend/src/models/schema/federation-instance.ts
@@ -52,6 +52,10 @@ export const packedFederationInstanceSchema = {
 			type: 'boolean',
 			optional: false, nullable: false,
 		},
+		isBlocked: {
+			type: 'boolean',
+			optional: false, nullable: false,
+		},
 		softwareName: {
 			type: 'string',
 			optional: false, nullable: true,
diff --git a/packages/client/src/components/abuse-report.vue b/packages/client/src/components/abuse-report.vue
index 86eccd6276..e8ab6f600e 100644
--- a/packages/client/src/components/abuse-report.vue
+++ b/packages/client/src/components/abuse-report.vue
@@ -79,7 +79,8 @@ function resolve() {
 			align-items: center;
 			padding: 14px;
 			border-radius: 8px;
-			background-image: linear-gradient(45deg, rgb(255 196 0 / 15%) 16.67%, transparent 16.67%, transparent 50%, rgb(255 196 0 / 15%) 50%, rgb(255 196 0 / 15%) 66.67%, transparent 66.67%, transparent 100%);
+			--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-size: 16px 16px;
 
 			> .avatar {
diff --git a/packages/client/src/components/instance-info.vue b/packages/client/src/components/instance-info.vue
new file mode 100644
index 0000000000..e55c1d8215
--- /dev/null
+++ b/packages/client/src/components/instance-info.vue
@@ -0,0 +1,96 @@
+<template>
+<div :class="[$style.root, { yellow: instance.isNotResponding, red: instance.isBlocked, gray: instance.isSuspended }]">
+	<img v-if="instance.iconUrl" class="icon" :src="instance.iconUrl" alt=""/>
+	<div class="body">
+		<span class="host">{{ instance.host }}</span>
+		<span class="sub">{{ instance.softwareName || '?' }} {{ instance.softwareVersion }}</span>
+	</div>
+	<MkMiniChart v-if="chart" class="chart" :src="chart.requests.received"/>
+</div>
+</template>
+
+<script lang="ts" setup>
+import * as misskey from 'misskey-js';
+import MkMiniChart from '@/components/mini-chart.vue';
+import * as os from '@/os';
+
+const props = defineProps<{
+	instance: misskey.entities.Instance;
+}>();
+
+const chart = $ref(null);
+
+os.api('charts/instance', { host: props.instance.host, limit: 16, span: 'hour' }).then(res => {
+	chart = res;
+});
+</script>
+
+<style lang="scss" module>
+.root {
+	$bodyTitleHieght: 18px;
+	$bodyInfoHieght: 16px;
+
+	display: flex;
+	align-items: center;
+	padding: 16px;
+	background: var(--panel);
+	border-radius: 8px;
+
+	> :global(.icon) {
+		display: block;
+		width: ($bodyTitleHieght + $bodyInfoHieght);
+		height: ($bodyTitleHieght + $bodyInfoHieght);
+		object-fit: cover;
+		border-radius: 4px;
+		margin-right: 8px;
+	}
+
+	> :global(.body) {
+		flex: 1;
+		overflow: hidden;
+		font-size: 0.9em;
+		color: var(--fg);
+		padding-right: 8px;
+
+		> :global(.host) {
+			display: block;
+			width: 100%;
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			line-height: $bodyTitleHieght;
+		}
+
+		> :global(.sub) {
+			font-size: 75%;
+			opacity: 0.7;
+			line-height: $bodyInfoHieght;
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+	}
+
+	> :global(.chart) {
+		height: 30px;
+	}
+
+	&: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-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-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-size: 16px 16px;
+	}
+}
+</style>
diff --git a/packages/client/src/pages/federation.vue b/packages/client/src/pages/federation.vue
index eda46b9aa3..38d42f2be4 100644
--- a/packages/client/src/pages/federation.vue
+++ b/packages/client/src/pages/federation.vue
@@ -41,51 +41,8 @@
 
 			<MkPagination v-slot="{items}" ref="instances" :key="host + state" :pagination="pagination">
 				<div class="dqokceoi">
-					<MkA v-for="instance in items" :key="instance.id" class="instance" :to="`/instance-info/${instance.host}`">
-						<div class="host"><img :src="instance.faviconUrl">{{ instance.host }}</div>
-						<div class="table">
-							<div class="cell">
-								<div class="key">{{ $ts.registeredAt }}</div>
-								<div class="value"><MkTime :time="instance.caughtAt"/></div>
-							</div>
-							<div class="cell">
-								<div class="key">{{ $ts.software }}</div>
-								<div class="value">{{ instance.softwareName || `(${$ts.unknown})` }}</div>
-							</div>
-							<div class="cell">
-								<div class="key">{{ $ts.version }}</div>
-								<div class="value">{{ instance.softwareVersion || `(${$ts.unknown})` }}</div>
-							</div>
-							<div class="cell">
-								<div class="key">{{ $ts.users }}</div>
-								<div class="value">{{ instance.usersCount }}</div>
-							</div>
-							<div class="cell">
-								<div class="key">{{ $ts.notes }}</div>
-								<div class="value">{{ instance.notesCount }}</div>
-							</div>
-							<div class="cell">
-								<div class="key">{{ $ts.sent }}</div>
-								<div class="value"><MkTime v-if="instance.latestRequestSentAt" :time="instance.latestRequestSentAt"/><span v-else>N/A</span></div>
-							</div>
-							<div class="cell">
-								<div class="key">{{ $ts.received }}</div>
-								<div class="value"><MkTime v-if="instance.latestRequestReceivedAt" :time="instance.latestRequestReceivedAt"/><span v-else>N/A</span></div>
-							</div>
-						</div>
-						<div class="footer">
-							<span class="status" :class="getStatus(instance)">{{ getStatus(instance) }}</span>
-							<span class="pubSub">
-								<span v-if="instance.followersCount > 0" class="sub"><i class="fas fa-caret-down icon"></i>Sub</span>
-								<span v-else class="sub"><i class="fas fa-caret-down icon"></i>-</span>
-								<span v-if="instance.followingCount > 0" class="pub"><i class="fas fa-caret-up icon"></i>Pub</span>
-								<span v-else class="pub"><i class="fas fa-caret-up icon"></i>-</span>
-							</span>
-							<span class="right">
-								<span class="latestStatus">{{ instance.latestStatus || '-' }}</span>
-								<span class="lastCommunicatedAt"><MkTime :time="instance.lastCommunicatedAt"/></span>
-							</span>
-						</div>
+					<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}`" :behavior="'window'">
+						<MkInstanceInfo :instance="instance"/>
 					</MkA>
 				</div>
 			</MkPagination>
@@ -100,6 +57,7 @@ import MkButton from '@/components/ui/button.vue';
 import MkInput from '@/components/form/input.vue';
 import MkSelect from '@/components/form/select.vue';
 import MkPagination from '@/components/ui/pagination.vue';
+import MkInstanceInfo from '@/components/instance-info.vue';
 import FormSplit from '@/components/form/split.vue';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
@@ -127,9 +85,10 @@ const pagination = {
 };
 
 function getStatus(instance) {
-	if (instance.isSuspended) return 'suspended';
-	if (instance.isNotResponding) return 'error';
-	return 'alive';
+	if (instance.isSuspended) return 'Suspended';
+	if (instance.isBlocked) return 'Blocked';
+	if (instance.isNotResponding) return 'Error';
+	return 'Alive';
 }
 
 const headerActions = $computed(() => []);
@@ -156,86 +115,8 @@ definePageMetadata({
 	grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
 	grid-gap: 12px;
 
-	> .instance {
-		padding: 16px;
-		background: var(--panel);
-		border-radius: 8px;
-
-		&:hover {
-			text-decoration: none;
-		}
-
-		> .host {
-			font-weight: bold;
-			white-space: nowrap;
-			overflow: hidden;
-			text-overflow: ellipsis;
-
-			> img {
-				width: 18px;
-				height: 18px;
-				margin-right: 6px;
-				vertical-align: middle;
-			}
-		}
-
-		> .table {
-			display: grid;
-			grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
-			grid-gap: 6px;
-			margin: 6px 0;
-			font-size: 70%;
-
-			> .cell {
-				> .key, > .value {
-					white-space: nowrap;
-					overflow: hidden;
-					text-overflow: ellipsis;
-				}
-
-				> .key {
-					opacity: 0.7;
-				}
-
-				> .value {
-				}
-			}
-		}
-
-		> .footer {
-			display: flex;
-			align-items: center;
-			font-size: 0.9em;
-
-			> .status {
-				&.suspended {
-					opacity: 0.5;
-				}
-
-				&.error {
-					color: var(--error);
-				}
-
-				&.alive {
-					color: var(--success);
-				}
-			}
-
-			> .pubSub {
-				margin-left: 8px;
-			}
-
-			> .right {
-				margin-left: auto;
-
-				> .latestStatus {
-					border: solid 1px var(--divider);
-					border-radius: 4px;
-					margin: 0 8px;
-					padding: 0 4px;
-				}
-			}
-		}
+	> .instance:hover {
+		text-decoration: none;
 	}
 }
 </style>
diff --git a/packages/client/src/pages/instance-info.vue b/packages/client/src/pages/instance-info.vue
index 231b1dfd18..11e3618574 100644
--- a/packages/client/src/pages/instance-info.vue
+++ b/packages/client/src/pages/instance-info.vue
@@ -1,8 +1,8 @@
 <template>
 <MkStickyContainer>
 	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
-	<MkSpacer :content-max="600" :margin-min="16" :margin-max="32">
-		<div v-if="instance" class="_formRoot">
+	<MkSpacer v-if="instance" :content-max="600" :margin-min="16" :margin-max="32">
+		<div v-if="tab === 'overview'" class="_formRoot">
 			<div class="fnfelxur">
 				<img :src="instance.iconUrl || instance.faviconUrl" alt="" class="icon"/>
 			</div>
@@ -64,37 +64,6 @@
 				</MkKeyValue>
 			</FormSection>
 
-			<FormSection>
-				<template #label>{{ $ts.statistics }}</template>
-				<div class="cmhjzshl">
-					<div class="selects">
-						<MkSelect v-model="chartSrc" style="margin: 0 10px 0 0; flex: 1;">
-							<option value="instance-requests">{{ $ts._instanceCharts.requests }}</option>
-							<option value="instance-users">{{ $ts._instanceCharts.users }}</option>
-							<option value="instance-users-total">{{ $ts._instanceCharts.usersTotal }}</option>
-							<option value="instance-notes">{{ $ts._instanceCharts.notes }}</option>
-							<option value="instance-notes-total">{{ $ts._instanceCharts.notesTotal }}</option>
-							<option value="instance-ff">{{ $ts._instanceCharts.ff }}</option>
-							<option value="instance-ff-total">{{ $ts._instanceCharts.ffTotal }}</option>
-							<option value="instance-drive-usage">{{ $ts._instanceCharts.cacheSize }}</option>
-							<option value="instance-drive-usage-total">{{ $ts._instanceCharts.cacheSizeTotal }}</option>
-							<option value="instance-drive-files">{{ $ts._instanceCharts.files }}</option>
-							<option value="instance-drive-files-total">{{ $ts._instanceCharts.filesTotal }}</option>
-						</MkSelect>
-						<MkSelect v-model="chartSpan" style="margin: 0;">
-							<option value="hour">{{ $ts.perHour }}</option>
-							<option value="day">{{ $ts.perDay }}</option>
-						</MkSelect>
-					</div>
-					<div class="chart">
-						<MkChart :src="chartSrc" :span="chartSpan" :limit="90" :args="{ host: host }" :detailed="true"></MkChart>
-					</div>
-				</div>
-			</FormSection>
-
-			<MkObjectView tall :value="instance">
-			</MkObjectView>
-
 			<FormSection>
 				<template #label>Well-known resources</template>
 				<FormLink :to="`https://${host}/.well-known/host-meta`" external style="margin-bottom: 8px;">host-meta</FormLink>
@@ -104,6 +73,35 @@
 				<FormLink :to="`https://${host}/manifest.json`" external style="margin-bottom: 8px;">manifest.json</FormLink>
 			</FormSection>
 		</div>
+		<div v-if="tab === 'chart'" class="_formRoot">
+			<div class="cmhjzshl">
+				<div class="selects">
+					<MkSelect v-model="chartSrc" style="margin: 0 10px 0 0; flex: 1;">
+						<option value="instance-requests">{{ $ts._instanceCharts.requests }}</option>
+						<option value="instance-users">{{ $ts._instanceCharts.users }}</option>
+						<option value="instance-users-total">{{ $ts._instanceCharts.usersTotal }}</option>
+						<option value="instance-notes">{{ $ts._instanceCharts.notes }}</option>
+						<option value="instance-notes-total">{{ $ts._instanceCharts.notesTotal }}</option>
+						<option value="instance-ff">{{ $ts._instanceCharts.ff }}</option>
+						<option value="instance-ff-total">{{ $ts._instanceCharts.ffTotal }}</option>
+						<option value="instance-drive-usage">{{ $ts._instanceCharts.cacheSize }}</option>
+						<option value="instance-drive-usage-total">{{ $ts._instanceCharts.cacheSizeTotal }}</option>
+						<option value="instance-drive-files">{{ $ts._instanceCharts.files }}</option>
+						<option value="instance-drive-files-total">{{ $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 v-if="tab === 'raw'" class="_formRoot">
+			<MkObjectView tall :value="instance">
+			</MkObjectView>
+		</div>
 	</MkSpacer>
 </MkStickyContainer>
 </template>
@@ -125,17 +123,18 @@ import number from '@/filters/number';
 import bytes from '@/filters/bytes';
 import { iAmModerator } from '@/account';
 import { definePageMetadata } from '@/scripts/page-metadata';
+import { i18n } from '@/i18n';
 
 const props = defineProps<{
 	host: string;
 }>();
 
+let tab = $ref('overview');
 let meta = $ref<misskey.entities.DetailedInstanceMetadata | null>(null);
 let instance = $ref<misskey.entities.Instance | null>(null);
 let suspended = $ref(false);
 let isBlocked = $ref(false);
 let chartSrc = $ref('instance-requests');
-let chartSpan = $ref('hour');
 
 async function fetch() {
 	if (iAmModerator) {
@@ -184,11 +183,26 @@ const headerActions = $computed(() => [{
 	},
 }]);
 
-const headerTabs = $computed(() => []);
+const headerTabs = $computed(() => [{
+	active: tab === 'overview',
+	title: i18n.ts.overview,
+	icon: 'fas fa-info-circle',
+	onClick: () => { tab = 'overview'; },
+}, {
+	active: tab === 'chart',
+	title: i18n.ts.charts,
+	icon: 'fas fa-chart-simple',
+	onClick: () => { tab = 'chart'; },
+}, {
+	active: tab === 'raw',
+	title: 'Raw data',
+	icon: 'fas fa-code',
+	onClick: () => { tab = 'raw'; },
+}]);
 
 definePageMetadata({
 	title: props.host,
-	icon: 'fas fa-info-circle',
+	icon: 'fas fa-server',
 	bg: 'var(--bg)',
 });
 </script>
@@ -208,5 +222,12 @@ definePageMetadata({
 		display: flex;
 		margin: 0 0 16px 0;
 	}
+
+	> .charts {
+		> .label {
+			margin-bottom: 12px;
+			font-weight: bold;
+		}
+	}
 }
 </style>
diff --git a/packages/client/src/scripts/i18n.ts b/packages/client/src/scripts/i18n.ts
index 3fe88e5514..54184386da 100644
--- a/packages/client/src/scripts/i18n.ts
+++ b/packages/client/src/scripts/i18n.ts
@@ -11,13 +11,13 @@ export class I18n<T extends Record<string, any>> {
 
 	// string にしているのは、ドット区切りでのパス指定を許可するため
 	// なるべくこのメソッド使うよりもlocale直接参照の方がvueのキャッシュ効いてパフォーマンスが良いかも
-	public t(key: string, args?: Record<string, string>): string {
+	public t(key: string, args?: Record<string, string | number>): string {
 		try {
 			let str = key.split('.').reduce((o, i) => o[i], this.ts) as unknown as string;
 
 			if (args) {
 				for (const [k, v] of Object.entries(args)) {
-					str = str.replace(`{${k}}`, v);
+					str = str.replace(`{${k}}`, v.toString());
 				}
 			}
 			return str;

From 2d181ba5afcc141befde4bcbe540bdf106d79083 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Tue, 21 Jun 2022 19:48:28 +0900
Subject: [PATCH 19/90] enhance(client): show warning in control panel when
 there is an unresolved abuse report

---
 CHANGELOG.md                                       |  1 +
 locales/ja-JP.yml                                  |  4 ++++
 packages/client/src/pages/admin/email-settings.vue |  2 +-
 packages/client/src/pages/admin/index.vue          | 11 +++++++++++
 4 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 904083e7b1..eb91425e89 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,7 @@ You should also include the user name that made the change.
 ### Improvements
 - Server: Add rate limit to i/notifications @tamaina
 - Client: Improve files page of control panel @syuilo
+- Client: Show warning in control panel when there is an unresolved abuse report @syuilo
 - Improve player detection in URL preview @mei23
 - Add Badge Image to Push Notification #8012 @tamaina
 
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 2383d8f436..bbbb037a8e 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -850,6 +850,10 @@ cropImageAsk: "画像をクロップしますか？"
 file: "ファイル"
 recentNHours: "直近{n}時間"
 recentNDays: "直近{n}日"
+noEmailServerWarning: "メールサーバーの設定がされていません。"
+thereIsUnresolvedAbuseReportWarning: "未対応の通報があります。"
+recommended: "推奨"
+check: "チェック"
 
 _emailUnavailable:
   used: "既に使用されています"
diff --git a/packages/client/src/pages/admin/email-settings.vue b/packages/client/src/pages/admin/email-settings.vue
index 5487c5f333..c0ff94fad2 100644
--- a/packages/client/src/pages/admin/email-settings.vue
+++ b/packages/client/src/pages/admin/email-settings.vue
@@ -5,7 +5,7 @@
 		<FormSuspense :p="init">
 			<div class="_formRoot">
 				<FormSwitch v-model="enableEmail" class="_formBlock">
-					<template #label>{{ i18n.ts.enableEmail }}</template>
+					<template #label>{{ i18n.ts.enableEmail }} ({{ i18n.ts.recommended }})</template>
 					<template #caption>{{ i18n.ts.emailConfigInfo }}</template>
 				</FormSwitch>
 
diff --git a/packages/client/src/pages/admin/index.vue b/packages/client/src/pages/admin/index.vue
index 5db91101d7..b91330e1b7 100644
--- a/packages/client/src/pages/admin/index.vue
+++ b/packages/client/src/pages/admin/index.vue
@@ -7,8 +7,10 @@
 					<img :src="$instance.iconUrl || '/favicon.ico'" alt="" class="icon"/>
 				</div>
 
+				<MkInfo v-if="thereIsUnresolvedAbuseReport" warn class="info">{{ $ts.thereIsUnresolvedAbuseReportWarning }} <MkA to="/admin/abuses" class="_link">{{ $ts.check }}</MkA></MkInfo>
 				<MkInfo v-if="noMaintainerInformation" warn class="info">{{ $ts.noMaintainerInformationWarning }} <MkA to="/admin/settings" class="_link">{{ $ts.configure }}</MkA></MkInfo>
 				<MkInfo v-if="noBotProtection" warn class="info">{{ $ts.noBotProtectionWarning }} <MkA to="/admin/security" class="_link">{{ $ts.configure }}</MkA></MkInfo>
+				<MkInfo v-if="noEmailServer" warn class="info">{{ $ts.noEmailServerWarning }} <MkA to="/admin/email-settings" class="_link">{{ $ts.configure }}</MkA></MkInfo>
 
 				<MkSuperMenu :def="menuDef" :grid="initialPage == null"></MkSuperMenu>
 			</div>
@@ -58,6 +60,15 @@ let el = $ref(null);
 let pageProps = $ref({});
 let noMaintainerInformation = isEmpty(instance.maintainerName) || isEmpty(instance.maintainerEmail);
 let noBotProtection = !instance.enableHcaptcha && !instance.enableRecaptcha;
+let noEmailServer = !instance.enableEmail;
+let thereIsUnresolvedAbuseReport = $ref(false);
+
+os.api('admin/abuse-user-reports', {
+	state: 'unresolved',
+	limit: 1,
+}).then(reports => {
+	if (reports.length > 0) thereIsUnresolvedAbuseReport = true;
+});
 
 const NARROW_THRESHOLD = 600;
 const ro = new ResizeObserver((entries, observer) => {

From e0c6688709c12c71efea8312ae3753b3f10e8ca9 Mon Sep 17 00:00:00 2001
From: Johann150 <johann.galle@protonmail.com>
Date: Tue, 21 Jun 2022 15:56:47 +0200
Subject: [PATCH 20/90] update changelog

---
 CHANGELOG.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index eb91425e89..c4486dd6c5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -17,11 +17,13 @@ You should also include the user name that made the change.
 - Client: Show warning in control panel when there is an unresolved abuse report @syuilo
 - Improve player detection in URL preview @mei23
 - Add Badge Image to Push Notification #8012 @tamaina
+- Client: Removing entries from a clip @futchitwo
 
 ### Bugfixes
 - Server: Fix GenerateVideoThumbnail failed @mei23
 - Server: Ensure temp directory cleanup @Johann150
 - favicons of federated instances not showing @syuilo
+- Admin: The checkbox for blocking an instance works again @Johann150
 
 ## 12.111.1 (2022/06/13)
 

From c9d4c007081b5e63f6bf23123f6abc942bbf19c6 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Tue, 21 Jun 2022 23:22:18 +0900
Subject: [PATCH 21/90] fix(client): moderators cannot view instance-info page

---
 packages/client/src/pages/instance-info.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/client/src/pages/instance-info.vue b/packages/client/src/pages/instance-info.vue
index 11e3618574..afee31b44a 100644
--- a/packages/client/src/pages/instance-info.vue
+++ b/packages/client/src/pages/instance-info.vue
@@ -141,12 +141,11 @@ async function fetch() {
 		// suspended and blocked information is only displayed to moderators.
 		// otherwise the API will error anyway
 
-		meta = await os.api('admin/meta', { detail: true });
 		instance = await os.api('federation/show-instance', {
 			host: props.host,
 		});
 		suspended = instance.isSuspended;
-		isBlocked = meta.blockedHosts.includes(instance.host);
+		isBlocked = instance.isBlocked;
 	}
 }
 

From ad123b3cce0a8691681561984fb8c056db23a816 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Wed, 22 Jun 2022 00:10:34 +0900
Subject: [PATCH 22/90] tweak client

---
 packages/client/src/pages/admin-file.vue    | 85 ++++++++++++++-------
 packages/client/src/pages/instance-info.vue |  6 +-
 packages/client/src/pages/user-info.vue     | 63 +++++++++++++--
 3 files changed, 118 insertions(+), 36 deletions(-)

diff --git a/packages/client/src/pages/admin-file.vue b/packages/client/src/pages/admin-file.vue
index 2cbe8890a1..7273ddce6a 100644
--- a/packages/client/src/pages/admin-file.vue
+++ b/packages/client/src/pages/admin-file.vue
@@ -1,30 +1,46 @@
 <template>
 <MkStickyContainer>
 	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
-	<MkSpacer :content-max="500" :margin-min="16" :margin-max="32">
-		<div v-if="file" class="cxqhhsmd _formRoot">
-			<div class="_formBlock">
+	<MkSpacer v-if="file" :content-max="500" :margin-min="16" :margin-max="32">
+		<div v-if="tab === 'overview'" class="cxqhhsmd _formRoot">
+			<a class="_formBlock thumbnail" :href="file.url" target="_blank">
 				<MkDriveFileThumbnail class="thumbnail" :file="file" fit="contain"/>
-				<div class="info">
-					<span style="margin-right: 1em;">{{ file.type }}</span>
-					<span>{{ bytes(file.size) }}</span>
-					<MkTime :time="file.createdAt" mode="detail" style="display: block;"/>
-				</div>
+			</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>
 			<div class="_formBlock">
 				<MkSwitch v-model="isSensitive" @update:modelValue="toggleIsSensitive">NSFW</MkSwitch>
 			</div>
 			<FormLink class="_formBlock" :to="file.url" :external="true">Open</FormLink>
-			<FormLink class="_formBlock" :to="`/user-info/${file.userId}`">{{ $ts.user }}</FormLink>
+			<FormLink class="_formBlock" :to="`/user-info/${file.userId}`">{{ $ts.user }} ({{ acct(file.user) }})</FormLink>
 
 			<div class="_formBlock">
 				<MkButton full danger @click="del"><i class="fas fa-trash-alt"></i> {{ $ts.delete }}</MkButton>
 			</div>
-			<div v-if="info" class="_formBlock">
-				<details class="_content rawdata">
-					<pre><code>{{ JSON.stringify(info, null, 2) }}</code></pre>
-				</details>
-			</div>
+		</div>
+		<div v-else-if="tab === 'raw'" class="_formRoot">
+			<MkObjectView v-if="info" tall :value="info">
+			</MkObjectView>
 		</div>
 	</MkSpacer>
 </MkStickyContainer>
@@ -34,13 +50,17 @@
 import { computed } from 'vue';
 import MkButton from '@/components/ui/button.vue';
 import MkSwitch from '@/components/form/switch.vue';
+import MkObjectView from '@/components/object-view.vue';
 import MkDriveFileThumbnail from '@/components/drive-file-thumbnail.vue';
+import MkKeyValue from '@/components/key-value.vue';
 import FormLink from '@/components/form/link.vue';
 import bytes from '@/filters/bytes';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';
+import { acct } from '@/filters/user';
 
+let tab = $ref('overview');
 let file: any = $ref(null);
 let info: any = $ref(null);
 let isSensitive: boolean = $ref(false);
@@ -74,9 +94,25 @@ async function toggleIsSensitive(v) {
 	isSensitive = v;
 }
 
-const headerActions = $computed(() => []);
+const headerActions = $computed(() => [{
+	text: i18n.ts.openInNewTab,
+	icon: 'fas fa-external-link-alt',
+	handler: () => {
+		window.open(file.url, '_blank');
+	},
+}]);
 
-const headerTabs = $computed(() => []);
+const headerTabs = $computed(() => [{
+	active: tab === 'overview',
+	title: i18n.ts.overview,
+	icon: 'fas fa-info-circle',
+	onClick: () => { tab = 'overview'; },
+}, {
+	active: tab === 'raw',
+	title: 'Raw data',
+	icon: 'fas fa-code',
+	onClick: () => { tab = 'raw'; },
+}]);
 
 definePageMetadata(computed(() => ({
 	title: file ? i18n.ts.file + ': ' + file.name : i18n.ts.file,
@@ -87,19 +123,12 @@ definePageMetadata(computed(() => ({
 
 <style lang="scss" scoped>
 .cxqhhsmd {
-	> ._section {
-		> .thumbnail {
-			height: 150px;
-			max-width: 100%;
-		}
+	> .thumbnail {
+		display: block;
 
-		> .info {
-			text-align: center;
-			margin-top: 8px;
-		}
-		
-		> .rawdata {
-			overflow: auto;
+		> .thumbnail {
+			height: 300px;
+			max-width: 100%;
 		}
 	}
 }
diff --git a/packages/client/src/pages/instance-info.vue b/packages/client/src/pages/instance-info.vue
index afee31b44a..cca04aca93 100644
--- a/packages/client/src/pages/instance-info.vue
+++ b/packages/client/src/pages/instance-info.vue
@@ -73,7 +73,7 @@
 				<FormLink :to="`https://${host}/manifest.json`" external style="margin-bottom: 8px;">manifest.json</FormLink>
 			</FormSection>
 		</div>
-		<div v-if="tab === 'chart'" class="_formRoot">
+		<div v-else-if="tab === 'chart'" class="_formRoot">
 			<div class="cmhjzshl">
 				<div class="selects">
 					<MkSelect v-model="chartSrc" style="margin: 0 10px 0 0; flex: 1;">
@@ -98,7 +98,7 @@
 				</div>
 			</div>
 		</div>
-		<div v-if="tab === 'raw'" class="_formRoot">
+		<div v-else-if="tab === 'raw'" class="_formRoot">
 			<MkObjectView tall :value="instance">
 			</MkObjectView>
 		</div>
@@ -130,11 +130,11 @@ const props = defineProps<{
 }>();
 
 let tab = $ref('overview');
+let chartSrc = $ref('instance-requests');
 let meta = $ref<misskey.entities.DetailedInstanceMetadata | null>(null);
 let instance = $ref<misskey.entities.Instance | null>(null);
 let suspended = $ref(false);
 let isBlocked = $ref(false);
-let chartSrc = $ref('instance-requests');
 
 async function fetch() {
 	if (iAmModerator) {
diff --git a/packages/client/src/pages/user-info.vue b/packages/client/src/pages/user-info.vue
index 996c018dd9..233a8857fc 100644
--- a/packages/client/src/pages/user-info.vue
+++ b/packages/client/src/pages/user-info.vue
@@ -3,14 +3,18 @@
 	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :content-max="500" :margin-min="16" :margin-max="32">
 		<FormSuspense :p="init">
-			<div class="_formRoot">
+			<div v-if="tab === 'overview'" class="_formRoot">
 				<div class="_formBlock aeakzknw">
 					<MkAvatar class="avatar" :user="user" :show-indicator="true"/>
 				</div>
 
-				<FormLink 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.url" class="_formBlock" :to="user.url" :external="true">Profile (remote)</FormLink>
+				<FormLink v-if="user.host" class="_formBlock" :to="`/instance-info/${user.host}`">{{ i18n.ts.instanceInfo }}</FormLink>
 
 				<div class="_formBlock">
 					<MkKeyValue :copy="acct(user)" oneline style="margin: 1em 0;">
@@ -57,7 +61,23 @@
 
 					<FormButton v-if="user.host != null" class="_formBlock" @click="updateRemoteUser"><i class="fas fa-sync"></i> {{ $ts.updateRemoteUser }}</FormButton>
 				</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">{{ $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 v-else-if="tab === 'raw'" class="_formRoot">
 				<MkObjectView v-if="info && $i.isAdmin" tall :value="info">
 				</MkObjectView>
 
@@ -72,6 +92,7 @@
 <script lang="ts" setup>
 import { computed, defineAsyncComponent, defineComponent, watch } from 'vue';
 import * as misskey from 'misskey-js';
+import MkChart from '@/components/chart.vue';
 import MkObjectView from '@/components/object-view.vue';
 import FormTextarea from '@/components/form/textarea.vue';
 import FormSwitch from '@/components/form/switch.vue';
@@ -79,6 +100,7 @@ import FormLink from '@/components/form/link.vue';
 import FormSection from '@/components/form/section.vue';
 import FormButton from '@/components/ui/button.vue';
 import MkKeyValue from '@/components/key-value.vue';
+import MkSelect from '@/components/form/select.vue';
 import FormSuspense from '@/components/form/suspense.vue';
 import * as os from '@/os';
 import number from '@/filters/number';
@@ -93,6 +115,8 @@ const props = defineProps<{
 	userId: string;
 }>();
 
+let tab = $ref('overview');
+let chartSrc = $ref('per-user-notes');
 let user = $ref<null | misskey.entities.UserDetailed>();
 let init = $ref();
 let info = $ref();
@@ -209,7 +233,22 @@ watch(() => user, () => {
 
 const headerActions = $computed(() => []);
 
-const headerTabs = $computed(() => []);
+const headerTabs = $computed(() => [{
+	active: tab === 'overview',
+	title: i18n.ts.overview,
+	icon: 'fas fa-info-circle',
+	onClick: () => { tab = 'overview'; },
+}, {
+	active: tab === 'chart',
+	title: i18n.ts.charts,
+	icon: 'fas fa-chart-simple',
+	onClick: () => { tab = 'chart'; },
+}, {
+	active: tab === 'raw',
+	title: 'Raw data',
+	icon: 'fas fa-code',
+	onClick: () => { tab = 'raw'; },
+}]);
 
 definePageMetadata(computed(() => ({
 	title: user ? acct(user) : i18n.ts.userInfo,
@@ -226,4 +265,18 @@ definePageMetadata(computed(() => ({
 		height: 64px;
 	}
 }
+
+.cmhjzshm {
+	> .selects {
+		display: flex;
+		margin: 0 0 16px 0;
+	}
+
+	> .charts {
+		> .label {
+			margin-bottom: 12px;
+			font-weight: bold;
+		}
+	}
+}
 </style>

From e44cb42de41c5378910d9b9240b951629bf1720c Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Wed, 22 Jun 2022 00:48:16 +0900
Subject: [PATCH 23/90] :art:

---
 packages/client/src/style.scss          | 4 +++-
 packages/client/src/themes/_dark.json5  | 1 +
 packages/client/src/themes/_light.json5 | 1 +
 3 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/client/src/style.scss b/packages/client/src/style.scss
index c1d47ffd08..44dac26265 100644
--- a/packages/client/src/style.scss
+++ b/packages/client/src/style.scss
@@ -339,9 +339,11 @@ hr {
 }
 
 ._window {
-	background: var(--panel);
+	background: var(--windowHeader);
 	border-radius: var(--radius);
 	contain: content;
+	-webkit-backdrop-filter: var(--blur, blur(15px));
+	backdrop-filter: var(--blur, blur(15px));
 }
 
 ._popup {
diff --git a/packages/client/src/themes/_dark.json5 b/packages/client/src/themes/_dark.json5
index 1d87788794..e159f73b83 100644
--- a/packages/client/src/themes/_dark.json5
+++ b/packages/client/src/themes/_dark.json5
@@ -30,6 +30,7 @@
 		panelHeaderDivider: 'rgba(0, 0, 0, 0)',
 		panelBorder: '" solid 1px var(--divider)',
 		acrylicPanel: ':alpha<0.5<@panel',
+		windowHeader: ':alpha<0.85<@panel',
 		popup: ':lighten<3<@panel',
 		shadow: 'rgba(0, 0, 0, 0.3)',
 		header: ':alpha<0.7<@panel',
diff --git a/packages/client/src/themes/_light.json5 b/packages/client/src/themes/_light.json5
index 359b560688..87fdbd86b7 100644
--- a/packages/client/src/themes/_light.json5
+++ b/packages/client/src/themes/_light.json5
@@ -30,6 +30,7 @@
 		panelHeaderDivider: 'rgba(0, 0, 0, 0)',
 		panelBorder: '" solid 1px var(--divider)',
 		acrylicPanel: ':alpha<0.5<@panel',
+		windowHeader: ':alpha<0.85<@panel',
 		popup: ':lighten<3<@panel',
 		shadow: 'rgba(0, 0, 0, 0.1)',
 		header: ':alpha<0.7<@panel',

From 85365da69e3b150003dc5324bbc971e3e82b2e33 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Wed, 22 Jun 2022 16:29:21 +0900
Subject: [PATCH 24/90] refactor(client): refactor header tab handling

---
 .../src/components/global/page-header.vue     | 89 +++++++++++++------
 packages/client/src/pages/about.vue           |  8 +-
 packages/client/src/pages/admin-file.vue      |  8 +-
 packages/client/src/pages/admin/_header_.vue  | 87 +++++++++++++-----
 packages/client/src/pages/admin/emojis.vue    |  8 +-
 packages/client/src/pages/channels.vue        | 11 +--
 packages/client/src/pages/explore.vue         | 11 +--
 packages/client/src/pages/instance-info.vue   | 11 +--
 packages/client/src/pages/notifications.vue   |  8 +-
 .../src/pages/page-editor/page-editor.vue     | 14 ++-
 packages/client/src/pages/pages.vue           | 11 +--
 packages/client/src/pages/timeline.vue        | 16 ++--
 packages/client/src/pages/user-info.vue       | 11 +--
 13 files changed, 170 insertions(+), 123 deletions(-)

diff --git a/packages/client/src/components/global/page-header.vue b/packages/client/src/components/global/page-header.vue
index c01631c6a3..0ad7699834 100644
--- a/packages/client/src/components/global/page-header.vue
+++ b/packages/client/src/components/global/page-header.vue
@@ -12,16 +12,17 @@
 					{{ metadata.subtitle }}
 				</div>
 				<div v-if="narrow && hasTabs" class="subtitle activeTab">
-					{{ tabs.find(tab => tab.active)?.title }}
+					{{ tabs.find(tab => tab.key === props.tab)?.title }}
 					<i class="chevron fas fa-chevron-down"></i>
 				</div>
 			</div>
 		</div>
 		<div v-if="!narrow || hideTitle" class="tabs">
-			<button v-for="tab in tabs" v-tooltip="tab.title" class="tab _button" :class="{ active: tab.active }" @click="tab.onClick">
+			<button v-for="tab in tabs" :ref="(el) => tabRefs[tab.key] = el" v-tooltip="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">
@@ -33,22 +34,25 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted, onUnmounted, ref, inject } from 'vue';
+import { computed, onMounted, onUnmounted, ref, inject, watch } from 'vue';
 import tinycolor from 'tinycolor2';
 import { popupMenu } from '@/os';
 import { scrollToTop } from '@/scripts/scroll';
 import { i18n } from '@/i18n';
 import { globalEvents } from '@/events';
-import { injectPageMetadata, PageMetadata } from '@/scripts/page-metadata';
+import { injectPageMetadata } from '@/scripts/page-metadata';
+
+type Tab = {
+	key?: string | null;
+	title: string;
+	icon?: string;
+	iconOnly?: boolean;
+	onClick?: (ev: MouseEvent) => void;
+};
 
 const props = defineProps<{
-	tabs?: {
-		title: string;
-		active: boolean;
-		icon?: string;
-		iconOnly?: boolean;
-		onClick: () => void;
-	}[];
+	tabs?: Tab[];
+	tab?: string;
 	actions?: {
 		text: string;
 		icon: string;
@@ -57,12 +61,18 @@ const props = defineProps<{
 	thin?: boolean;
 }>();
 
+const emit = defineEmits<{
+	(ev: 'update:tab', key: string);
+}>();
+
 const metadata = injectPageMetadata();
 
 const hideTitle = inject('shouldOmitHeaderTitle', false);
 const thin_ = props.thin || inject('shouldHeaderThin', false);
 
 const el = $ref<HTMLElement | null>(null);
+const tabRefs = {};
+const tabHighlightEl = $ref<HTMLElement | null>(null);
 const bg = ref(null);
 let narrow = $ref(false);
 const height = ref(0);
@@ -80,7 +90,10 @@ const showTabsPopup = (ev: MouseEvent) => {
 	const menu = props.tabs.map(tab => ({
 		text: tab.title,
 		icon: tab.icon,
-		action: tab.onClick,
+		active: tab.key != null && tab.key === props.tab,
+		action: (ev) => {
+			onTabClick(tab, ev);
+		},
 	}));
 	popupMenu(menu, ev.currentTarget ?? ev.target);
 };
@@ -93,6 +106,20 @@ const onClick = () => {
 	scrollToTop(el, { behavior: 'smooth' });
 };
 
+function onTabMousedown(tab: Tab, ev: MouseEvent): void {
+	// ユーザビリティの観点からmousedown時にはonClickは呼ばない
+	if (tab.key) {
+		emit('update:tab', tab.key);
+	}
+}
+
+function onTabClick(tab: Tab, ev: MouseEvent): void {
+	if (tab.onClick) tab.onClick(ev);
+	if (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);
@@ -106,6 +133,20 @@ onMounted(() => {
 	calcBg();
 	globalEvents.on('themeChanged', calcBg);
 
+	watch(() => props.tab, () => {
+		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,
+	});
+
 	if (el && el.parentElement) {
 		narrow = el.parentElement.offsetWidth < 500;
 		ro = new ResizeObserver((entries, observer) => {
@@ -257,6 +298,7 @@ onUnmounted(() => {
 	}
 
 	> .tabs {
+		position: relative;
 		margin-left: 16px;
 		font-size: 0.8em;
 		overflow: auto;
@@ -276,25 +318,22 @@ onUnmounted(() => {
 
 			&.active {
 				opacity: 1;
-
-				&:after {
-					content: "";
-					display: block;
-					position: absolute;
-					bottom: 0;
-					left: 0;
-					right: 0;
-					margin: 0 auto;
-					width: 100%;
-					height: 3px;
-					background: var(--accent);
-				}
 			}
 
 			> .icon + .title {
 				margin-left: 8px;
 			}
 		}
+
+		> .highlight {
+			position: absolute;
+			bottom: 0;
+			height: 3px;
+			background: var(--accent);
+			border-radius: 999px;
+			transition: all 0.2s ease;
+			pointer-events: none;
+		}
 	}
 }
 </style>
diff --git a/packages/client/src/pages/about.vue b/packages/client/src/pages/about.vue
index 20497c86fc..c0226bdb6c 100644
--- a/packages/client/src/pages/about.vue
+++ b/packages/client/src/pages/about.vue
@@ -1,6 +1,6 @@
 <template>
 <MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
+	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer v-if="tab === 'overview'" :content-max="600" :margin-min="20">
 		<div class="_formRoot">
 			<div class="_formBlock fwhjspax" :style="{ backgroundImage: `url(${ $instance.bannerUrl })` }">
@@ -98,14 +98,12 @@ const initStats = () => os.api('stats', {
 const headerActions = $computed(() => []);
 
 const headerTabs = $computed(() => [{
-	active: tab === 'overview',
+	key: 'overview',
 	title: i18n.ts.overview,
-	onClick: () => { tab = 'overview'; },
 }, {
-	active: tab === 'charts',
+	key: 'charts',
 	title: i18n.ts.charts,
 	icon: 'fas fa-chart-bar',
-	onClick: () => { tab = 'charts'; },
 }]);
 
 definePageMetadata(computed(() => ({
diff --git a/packages/client/src/pages/admin-file.vue b/packages/client/src/pages/admin-file.vue
index 7273ddce6a..7fb7cc1c87 100644
--- a/packages/client/src/pages/admin-file.vue
+++ b/packages/client/src/pages/admin-file.vue
@@ -1,6 +1,6 @@
 <template>
 <MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
+	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer v-if="file" :content-max="500" :margin-min="16" :margin-max="32">
 		<div v-if="tab === 'overview'" class="cxqhhsmd _formRoot">
 			<a class="_formBlock thumbnail" :href="file.url" target="_blank">
@@ -103,15 +103,13 @@ const headerActions = $computed(() => [{
 }]);
 
 const headerTabs = $computed(() => [{
-	active: tab === 'overview',
+	key: 'overview',
 	title: i18n.ts.overview,
 	icon: 'fas fa-info-circle',
-	onClick: () => { tab = 'overview'; },
 }, {
-	active: tab === 'raw',
+	key: 'raw',
 	title: 'Raw data',
 	icon: 'fas fa-code',
-	onClick: () => { tab = 'raw'; },
 }]);
 
 definePageMetadata(computed(() => ({
diff --git a/packages/client/src/pages/admin/_header_.vue b/packages/client/src/pages/admin/_header_.vue
index 9e11d065d9..59c5ce4f47 100644
--- a/packages/client/src/pages/admin/_header_.vue
+++ b/packages/client/src/pages/admin/_header_.vue
@@ -9,10 +9,11 @@
 			</div>
 		</div>
 		<div class="tabs">
-			<button v-for="tab in tabs" v-tooltip="tab.title" class="tab _button" :class="{ active: tab.active }" @click="tab.onClick">
+			<button v-for="tab in tabs" :ref="(el) => tabRefs[tab.key] = el" v-tooltip="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">
@@ -27,7 +28,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted, onUnmounted, ref, inject } from 'vue';
+import { computed, onMounted, onUnmounted, ref, inject, watch } from 'vue';
 import tinycolor from 'tinycolor2';
 import { popupMenu } from '@/os';
 import { url } from '@/config';
@@ -35,16 +36,19 @@ import { scrollToTop } from '@/scripts/scroll';
 import MkButton from '@/components/ui/button.vue';
 import { i18n } from '@/i18n';
 import { globalEvents } from '@/events';
-import { injectPageMetadata, PageMetadata } from '@/scripts/page-metadata';
+import { injectPageMetadata } from '@/scripts/page-metadata';
+
+type Tab = {
+	key?: string | null;
+	title: string;
+	icon?: string;
+	iconOnly?: boolean;
+	onClick?: (ev: MouseEvent) => void;
+};
 
 const props = defineProps<{
-	tabs?: {
-		title: string;
-		active: boolean;
-		icon?: string;
-		iconOnly?: boolean;
-		onClick: () => void;
-	}[];
+	tabs?: Tab[];
+	tab?: string;
 	actions?: {
 		text: string;
 		icon: string;
@@ -54,9 +58,15 @@ const props = defineProps<{
 	thin?: boolean;
 }>();
 
+const emit = defineEmits<{
+	(ev: 'update:tab', key: string);
+}>();
+
 const metadata = injectPageMetadata();
 
 const el = ref<HTMLElement>(null);
+const tabRefs = {};
+const tabHighlightEl = $ref<HTMLElement | null>(null);
 const bg = ref(null);
 const height = ref(0);
 const hasTabs = computed(() => {
@@ -71,7 +81,10 @@ const showTabsPopup = (ev: MouseEvent) => {
 	const menu = props.tabs.map(tab => ({
 		text: tab.title,
 		icon: tab.icon,
-		action: tab.onClick,
+		active: tab.key != null && tab.key === props.tab,
+		action: (ev) => {
+			onTabClick(tab, ev);
+		},
 	}));
 	popupMenu(menu, ev.currentTarget ?? ev.target);
 };
@@ -84,6 +97,20 @@ const onClick = () => {
 	scrollToTop(el.value, { behavior: 'smooth' });
 };
 
+function onTabMousedown(tab: Tab, ev: MouseEvent): void {
+	// ユーザビリティの観点からmousedown時にはonClickは呼ばない
+	if (tab.key) {
+		emit('update:tab', tab.key);
+	}
+}
+
+function onTabClick(tab: Tab, ev: MouseEvent): void {
+	if (tab.onClick) tab.onClick(ev);
+	if (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);
@@ -94,6 +121,20 @@ const calcBg = () => {
 onMounted(() => {
 	calcBg();
 	globalEvents.on('themeChanged', calcBg);
+
+	watch(() => props.tab, () => {
+		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(() => {
@@ -206,6 +247,7 @@ onUnmounted(() => {
 	}
 
 	> .tabs {
+		position: relative;
 		margin-left: 16px;
 		font-size: 0.8em;
 		overflow: auto;
@@ -225,25 +267,22 @@ onUnmounted(() => {
 
 			&.active {
 				opacity: 1;
-
-				&:after {
-					content: "";
-					display: block;
-					position: absolute;
-					bottom: 0;
-					left: 0;
-					right: 0;
-					margin: 0 auto;
-					width: 100%;
-					height: 3px;
-					background: var(--accent);
-				}
 			}
 
 			> .icon + .title {
 				margin-left: 8px;
 			}
 		}
+
+		> .highlight {
+			position: absolute;
+			bottom: 0;
+			height: 3px;
+			background: var(--accent);
+			border-radius: 999px;
+			transition: all 0.2s ease;
+			pointer-events: none;
+		}
 	}
 }
 </style>
diff --git a/packages/client/src/pages/admin/emojis.vue b/packages/client/src/pages/admin/emojis.vue
index 9d6b56dbc5..868472ac9c 100644
--- a/packages/client/src/pages/admin/emojis.vue
+++ b/packages/client/src/pages/admin/emojis.vue
@@ -1,7 +1,7 @@
 <template>
 <div>
 	<MkStickyContainer>
-		<template #header><XHeader :actions="headerActions" :tabs="headerTabs"/></template>
+		<template #header><XHeader :actions="headerActions" :tabs="headerTabs" v-model:tab="tab"/></template>
 		<MkSpacer :content-max="900">
 			<div class="ogwlenmc">
 				<div v-if="tab === 'local'" class="local">
@@ -282,13 +282,11 @@ const headerActions = $computed(() => [{
 }]);
 
 const headerTabs = $computed(() => [{
-	active: tab.value === 'local',
+	key: 'local',
 	title: i18n.ts.local,
-	onClick: () => { tab.value = 'local'; },
 }, {
-	active: tab.value === 'remote',
+	key: 'remote',
 	title: i18n.ts.remote,
-	onClick: () => { tab.value = 'remote'; },
 }]);
 
 definePageMetadata(computed(() => ({
diff --git a/packages/client/src/pages/channels.vue b/packages/client/src/pages/channels.vue
index 89d23350f2..c48a64a1e7 100644
--- a/packages/client/src/pages/channels.vue
+++ b/packages/client/src/pages/channels.vue
@@ -1,6 +1,6 @@
 <template>
 <MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
+	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :content-max="700">
 		<div v-if="tab === 'featured'" class="_content grwlizim featured">
 			<MkPagination v-slot="{items}" :pagination="featuredPagination">
@@ -59,20 +59,17 @@ const headerActions = $computed(() => [{
 }]);
 
 const headerTabs = $computed(() => [{
-	active: tab === 'featured',
+	key: 'featured',
 	title: i18n.ts._channel.featured,
 	icon: 'fas fa-fire-alt',
-	onClick: () => { tab = 'featured'; },
 }, {
-	active: tab === 'following',
+	key: 'following',
 	title: i18n.ts._channel.following,
 	icon: 'fas fa-heart',
-	onClick: () => { tab = 'following'; },
 }, {
-	active: tab === 'owned',
+	key: 'owned',
 	title: i18n.ts._channel.owned,
 	icon: 'fas fa-edit',
-	onClick: () => { tab = 'owned'; },
 }]);
 
 definePageMetadata(computed(() => ({
diff --git a/packages/client/src/pages/explore.vue b/packages/client/src/pages/explore.vue
index 26e201cd99..cd0dba7817 100644
--- a/packages/client/src/pages/explore.vue
+++ b/packages/client/src/pages/explore.vue
@@ -1,6 +1,6 @@
 <template>
 <MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
+	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :content-max="1200">
 		<div class="lznhrdub">
 			<div v-if="tab === 'local'">
@@ -178,17 +178,14 @@ os.api('stats').then(_stats => {
 const headerActions = $computed(() => []);
 
 const headerTabs = $computed(() => [{
-	active: tab === 'local',
+	key: 'local',
 	title: i18n.ts.local,
-	onClick: () => { tab = 'local'; },
 }, {
-	active: tab === 'remote',
+	key: 'remote',
 	title: i18n.ts.remote,
-	onClick: () => { tab = 'remote'; },
 }, {
-	active: tab === 'search',
+	key: 'search',
 	title: i18n.ts.search,
-	onClick: () => { tab = 'search'; },
 }]);
 
 definePageMetadata(computed(() => ({
diff --git a/packages/client/src/pages/instance-info.vue b/packages/client/src/pages/instance-info.vue
index cca04aca93..148eab6fcd 100644
--- a/packages/client/src/pages/instance-info.vue
+++ b/packages/client/src/pages/instance-info.vue
@@ -1,6 +1,6 @@
 <template>
 <MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
+	<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">
 		<div v-if="tab === 'overview'" class="_formRoot">
 			<div class="fnfelxur">
@@ -183,20 +183,17 @@ const headerActions = $computed(() => [{
 }]);
 
 const headerTabs = $computed(() => [{
-	active: tab === 'overview',
+	key: 'overview',
 	title: i18n.ts.overview,
 	icon: 'fas fa-info-circle',
-	onClick: () => { tab = 'overview'; },
 }, {
-	active: tab === 'chart',
+	key: 'chart',
 	title: i18n.ts.charts,
 	icon: 'fas fa-chart-simple',
-	onClick: () => { tab = 'chart'; },
 }, {
-	active: tab === 'raw',
+	key: 'raw',
 	title: 'Raw data',
 	icon: 'fas fa-code',
-	onClick: () => { tab = 'raw'; },
 }]);
 
 definePageMetadata({
diff --git a/packages/client/src/pages/notifications.vue b/packages/client/src/pages/notifications.vue
index 3d1014b3cd..52cb298fa3 100644
--- a/packages/client/src/pages/notifications.vue
+++ b/packages/client/src/pages/notifications.vue
@@ -1,6 +1,6 @@
 <template>
 <MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
+	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :content-max="800">
 		<div class="clupoqwt">
 			<XNotifications class="notifications" :include-types="includeTypes" :unread-only="tab === 'unread'"/>
@@ -52,13 +52,11 @@ const headerActions = $computed(() => [{
 }]);
 
 const headerTabs = $computed(() => [{
-	active: tab === 'all',
+	key: 'all',
 	title: i18n.ts.all,
-	onClick: () => { tab = 'all'; },
 }, {
-	active: tab === 'unread',
+	key: 'unread',
 	title: i18n.ts.unread,
-	onClick: () => { tab = 'unread'; },
 }]);
 
 definePageMetadata(computed(() => ({
diff --git a/packages/client/src/pages/page-editor/page-editor.vue b/packages/client/src/pages/page-editor/page-editor.vue
index c09d9af734..c38286c1d3 100644
--- a/packages/client/src/pages/page-editor/page-editor.vue
+++ b/packages/client/src/pages/page-editor/page-editor.vue
@@ -1,6 +1,6 @@
 <template>
 <MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
+	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs" v-model:tab="tab"/></template>
 	<MkSpacer :content-max="700">
 		<div class="jqqmcavi">
 			<MkButton v-if="pageId" class="button" inline link :to="`/@${ author.username }/pages/${ currentName }`"><i class="fas fa-external-link-square-alt"></i> {{ $ts._pages.viewPage }}</MkButton>
@@ -411,25 +411,21 @@ init();
 const headerActions = $computed(() => []);
 
 const headerTabs = $computed(() => [{
-	active: tab === 'settings',
+	key: 'settings',
 	title: i18n.ts._pages.pageSetting,
 	icon: 'fas fa-cog',
-	onClick: () => { tab = 'settings'; },
 }, {
-	active: tab === 'contents',
+	key: 'contents',
 	title: i18n.ts._pages.contents,
 	icon: 'fas fa-sticky-note',
-	onClick: () => { tab = 'contents'; },
 }, {
-	active: tab === 'variables',
+	key: 'variables',
 	title: i18n.ts._pages.variables,
 	icon: 'fas fa-magic',
-	onClick: () => { tab = 'variables'; },
 }, {
-	active: tab === 'script',
+	key: 'script',
 	title: i18n.ts.script,
 	icon: 'fas fa-code',
-	onClick: () => { tab = 'script'; },
 }]);
 
 definePageMetadata(computed(() => {
diff --git a/packages/client/src/pages/pages.vue b/packages/client/src/pages/pages.vue
index 541c968ff4..16aeae2f56 100644
--- a/packages/client/src/pages/pages.vue
+++ b/packages/client/src/pages/pages.vue
@@ -1,6 +1,6 @@
 <template>
 <MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
+	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :content-max="700">
 		<div v-if="tab === 'featured'" class="rknalgpo">
 			<MkPagination v-slot="{items}" :pagination="featuredPagesPagination">
@@ -61,20 +61,17 @@ const headerActions = $computed(() => [{
 }]);
 
 const headerTabs = $computed(() => [{
-	active: tab === 'featured',
+	key: 'featured',
 	title: i18n.ts._pages.featured,
 	icon: 'fas fa-fire-alt',
-	onClick: () => { tab = 'featured'; },
 }, {
-	active: tab === 'my',
+	key: 'my',
 	title: i18n.ts._pages.my,
 	icon: 'fas fa-edit',
-	onClick: () => { tab = 'my'; },
 }, {
-	active: tab === 'liked',
+	key: 'liked',
 	title: i18n.ts._pages.liked,
 	icon: 'fas fa-heart',
-	onClick: () => { tab = 'liked'; },
 }]);
 
 definePageMetadata(computed(() => ({
diff --git a/packages/client/src/pages/timeline.vue b/packages/client/src/pages/timeline.vue
index 111451632c..004c29c56b 100644
--- a/packages/client/src/pages/timeline.vue
+++ b/packages/client/src/pages/timeline.vue
@@ -1,6 +1,6 @@
 <template>
 <MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
+	<template #header><MkPageHeader v-model:tab="src" :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :content-max="800">
 		<div ref="rootEl" v-hotkey.global="keymap" class="cmuxhskf">
 			<XTutorial v-if="$store.reactiveState.tutorial.value != -1" class="tutorial _block"/>
@@ -45,7 +45,7 @@ const tlComponent = $ref<InstanceType<typeof XTimeline>>();
 const rootEl = $ref<HTMLElement>();
 
 let queue = $ref(0);
-const src = $computed(() => defaultStore.reactiveState.tl.value.src);
+const src = $computed({ get: () => defaultStore.reactiveState.tl.value.src, set: (x) => saveSrc(x) });
 
 watch ($$(src), () => queue = 0);
 
@@ -112,29 +112,25 @@ function focus(): void {
 const headerActions = $computed(() => []);
 
 const headerTabs = $computed(() => [{
-	active: src === 'home',
+	key: 'home',
 	title: i18n.ts._timelines.home,
 	icon: 'fas fa-home',
 	iconOnly: true,
-	onClick: () => { saveSrc('home'); },
 }, ...(isLocalTimelineAvailable ? [{
-	active: src === 'local',
+	key: 'local',
 	title: i18n.ts._timelines.local,
 	icon: 'fas fa-comments',
 	iconOnly: true,
-	onClick: () => { saveSrc('local'); },
 }, {
-	active: src === 'social',
+	key: 'social',
 	title: i18n.ts._timelines.social,
 	icon: 'fas fa-share-alt',
 	iconOnly: true,
-	onClick: () => { saveSrc('social'); },
 }] : []), ...(isGlobalTimelineAvailable ? [{
-	active: src === 'global',
+	key: 'global',
 	title: i18n.ts._timelines.global,
 	icon: 'fas fa-globe',
 	iconOnly: true,
-	onClick: () => { saveSrc('global'); },
 }] : []), {
 	icon: 'fas fa-list-ul',
 	title: i18n.ts.lists,
diff --git a/packages/client/src/pages/user-info.vue b/packages/client/src/pages/user-info.vue
index 233a8857fc..67fc5ba7e3 100644
--- a/packages/client/src/pages/user-info.vue
+++ b/packages/client/src/pages/user-info.vue
@@ -1,6 +1,6 @@
 <template>
 <MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
+	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :content-max="500" :margin-min="16" :margin-max="32">
 		<FormSuspense :p="init">
 			<div v-if="tab === 'overview'" class="_formRoot">
@@ -234,20 +234,17 @@ watch(() => user, () => {
 const headerActions = $computed(() => []);
 
 const headerTabs = $computed(() => [{
-	active: tab === 'overview',
+	key: 'overview',
 	title: i18n.ts.overview,
 	icon: 'fas fa-info-circle',
-	onClick: () => { tab = 'overview'; },
 }, {
-	active: tab === 'chart',
+	key: 'chart',
 	title: i18n.ts.charts,
 	icon: 'fas fa-chart-simple',
-	onClick: () => { tab = 'chart'; },
 }, {
-	active: tab === 'raw',
+	key: 'raw',
 	title: 'Raw data',
 	icon: 'fas fa-code',
-	onClick: () => { tab = 'raw'; },
 }]);
 
 definePageMetadata(computed(() => ({

From be383aa5b2161674149df8f6708b1411399641c7 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Wed, 22 Jun 2022 16:29:31 +0900
Subject: [PATCH 25/90] refactor(client): use composition api

---
 .../client/src/components/global/spacer.vue   | 109 ++++++++----------
 1 file changed, 46 insertions(+), 63 deletions(-)

diff --git a/packages/client/src/components/global/spacer.vue b/packages/client/src/components/global/spacer.vue
index f2eda1907b..53adf07771 100644
--- a/packages/client/src/components/global/spacer.vue
+++ b/packages/client/src/components/global/spacer.vue
@@ -6,78 +6,61 @@
 </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
+import { inject, onMounted, onUnmounted, ref } from 'vue';
 import { deviceKind } from '@/scripts/device-kind';
-import { defineComponent, inject, onMounted, onUnmounted, ref } from 'vue';
 
-export default defineComponent({
-	props: {
-		contentMax: {
-			type: Number,
-			required: false,
-			default: null,
-		},
-		marginMin: {
-			type: Number,
-			required: false,
-			default: 12,
-		},
-		marginMax: {
-			type: Number,
-			required: false,
-			default: 24,
-		},
-	},
+const props = withDefaults(defineProps<{
+	contentMax?: number | null;
+	marginMin?: number;
+	marginMax?: number;
+}>(), {
+	contentMax: null,
+	marginMin: 12,
+	marginMax: 24,
+});
 
-	setup(props, context) {
-		let ro: ResizeObserver;
-		const root = ref<HTMLElement>();
-		const content = ref<HTMLElement>();
-		const margin = ref(0);
-		const shouldSpacerMin = inject('shouldSpacerMin', false);
-		const adjust = (rect: { width: number; height: number; }) => {
-			if (shouldSpacerMin || deviceKind === 'smartphone') {
-				margin.value = props.marginMin;
-				return;
-			}
+let ro: ResizeObserver;
+let root = $ref<HTMLElement>();
+let content = $ref<HTMLElement>();
+let margin = $ref(0);
+const shouldSpacerMin = inject('shouldSpacerMin', false);
 
-			if (rect.width > props.contentMax || (rect.width > 360 && window.innerWidth > 400)) {
-				margin.value = props.marginMax;
-			} else {
-				margin.value = props.marginMin;
-			}
-		};
+const adjust = (rect: { width: number; height: number; }) => {
+	if (shouldSpacerMin || deviceKind === 'smartphone') {
+		margin = props.marginMin;
+		return;
+	}
 
-		onMounted(() => {
-			ro = new ResizeObserver((entries) => {
-				/* iOSが対応していない
-				adjust({
-					width: entries[0].borderBoxSize[0].inlineSize,
-					height: entries[0].borderBoxSize[0].blockSize,
-				});
-				*/
-				adjust({
-					width: root.value!.offsetWidth,
-					height: root.value!.offsetHeight,
-				});
-			});
-			ro.observe(root.value!);
+	if (rect.width > (props.contentMax ?? 0) || (rect.width > 360 && window.innerWidth > 400)) {
+		margin = props.marginMax;
+	} else {
+		margin = props.marginMin;
+	}
+};
 
-			if (props.contentMax) {
-				content.value!.style.maxWidth = `${props.contentMax}px`;
-			}
+onMounted(() => {
+	ro = new ResizeObserver((entries) => {
+		/* iOSが対応していない
+		adjust({
+			width: entries[0].borderBoxSize[0].inlineSize,
+			height: entries[0].borderBoxSize[0].blockSize,
 		});
-
-		onUnmounted(() => {
-			ro.disconnect();
+		*/
+		adjust({
+			width: root!.offsetWidth,
+			height: root!.offsetHeight,
 		});
+	});
+	ro.observe(root!);
 
-		return {
-			root,
-			content,
-			margin,
-		};
-	},
+	if (props.contentMax) {
+		content!.style.maxWidth = `${props.contentMax}px`;
+	}
+});
+
+onUnmounted(() => {
+	ro.disconnect();
 });
 </script>
 

From d3f25fa29045b8a6ba9332284d07549185c62c70 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Wed, 22 Jun 2022 20:47:53 +0900
Subject: [PATCH 26/90] tweak client

---
 packages/client/src/components/global/page-header.vue | 10 ++++++++--
 packages/client/src/components/ui/window.vue          |  3 ++-
 packages/client/src/pages/admin/_header_.vue          |  8 +++++++-
 3 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/packages/client/src/components/global/page-header.vue b/packages/client/src/components/global/page-header.vue
index 0ad7699834..a750fdb309 100644
--- a/packages/client/src/components/global/page-header.vue
+++ b/packages/client/src/components/global/page-header.vue
@@ -114,7 +114,11 @@ function onTabMousedown(tab: Tab, ev: MouseEvent): void {
 }
 
 function onTabClick(tab: Tab, ev: MouseEvent): void {
-	if (tab.onClick) tab.onClick(ev);
+	if (tab.onClick) {
+		ev.preventDefault();
+		ev.stopPropagation();
+		tab.onClick(ev);
+	}
 	if (tab.key) {
 		emit('update:tab', tab.key);
 	}
@@ -150,7 +154,7 @@ onMounted(() => {
 	if (el && el.parentElement) {
 		narrow = el.parentElement.offsetWidth < 500;
 		ro = new ResizeObserver((entries, observer) => {
-			if (el.parentElement) {
+			if (el.parentElement && document.body.contains(el)) {
 				narrow = el.parentElement.offsetWidth < 500;
 			}
 		});
@@ -268,6 +272,8 @@ onUnmounted(() => {
 
 		> .icon {
 			margin-right: 8px;
+			width: 16px;
+			text-align: center;
 		}
 
 		> .title {
diff --git a/packages/client/src/components/ui/window.vue b/packages/client/src/components/ui/window.vue
index 3cd4378f03..a5efab154b 100644
--- a/packages/client/src/components/ui/window.vue
+++ b/packages/client/src/components/ui/window.vue
@@ -402,7 +402,7 @@ export default defineComponent({
     height: 100%;
 
 		> .header {
-			--height: 50px;
+			--height: 45px;
 
 			&.mini {
 				--height: 38px;
@@ -415,6 +415,7 @@ export default defineComponent({
 			user-select: none;
 			height: var(--height);
 			border-bottom: solid 1px var(--divider);
+			font-size: 95%;
 
 			> .left, > .right {
 				> .button {
diff --git a/packages/client/src/pages/admin/_header_.vue b/packages/client/src/pages/admin/_header_.vue
index 59c5ce4f47..1883b4abee 100644
--- a/packages/client/src/pages/admin/_header_.vue
+++ b/packages/client/src/pages/admin/_header_.vue
@@ -105,7 +105,11 @@ function onTabMousedown(tab: Tab, ev: MouseEvent): void {
 }
 
 function onTabClick(tab: Tab, ev: MouseEvent): void {
-	if (tab.onClick) tab.onClick(ev);
+	if (tab.onClick) {
+		ev.preventDefault();
+		ev.stopPropagation();
+		tab.onClick(ev);
+	}
 	if (tab.key) {
 		emit('update:tab', tab.key);
 	}
@@ -217,6 +221,8 @@ onUnmounted(() => {
 
 		> .icon {
 			margin-right: 8px;
+			width: 16px;
+			text-align: center;
 		}
 
 		> .title {

From aabf12038c02de9d6bd2089139a5bfb6059409ad Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Wed, 22 Jun 2022 20:51:04 +0900
Subject: [PATCH 27/90] 12.112.0-beta.2

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index fd565f7cec..a642571b98 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "misskey",
-	"version": "12.111.1-test.1",
+	"version": "12.112.0-beta.2",
 	"codename": "indigo",
 	"repository": {
 		"type": "git",

From 43b9a9e618f4e1345d303f78a437454ccf685f6a Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Wed, 22 Jun 2022 23:40:53 +0900
Subject: [PATCH 28/90] enhance(client): tweak ui

---
 ...stance-info.vue => instance-card-mini.vue} |  8 +-
 .../client/src/components/user-card-mini.vue  | 95 +++++++++++++++++++
 packages/client/src/pages/admin/users.vue     | 76 ++-------------
 packages/client/src/pages/federation.vue      |  4 +-
 packages/client/src/pages/user-info.vue       | 10 +-
 5 files changed, 119 insertions(+), 74 deletions(-)
 rename packages/client/src/components/{instance-info.vue => instance-card-mini.vue} (90%)
 create mode 100644 packages/client/src/components/user-card-mini.vue

diff --git a/packages/client/src/components/instance-info.vue b/packages/client/src/components/instance-card-mini.vue
similarity index 90%
rename from packages/client/src/components/instance-info.vue
rename to packages/client/src/components/instance-card-mini.vue
index e55c1d8215..edcd576ce0 100644
--- a/packages/client/src/components/instance-info.vue
+++ b/packages/client/src/components/instance-card-mini.vue
@@ -2,8 +2,8 @@
 <div :class="[$style.root, { yellow: instance.isNotResponding, red: instance.isBlocked, gray: instance.isSuspended }]">
 	<img v-if="instance.iconUrl" class="icon" :src="instance.iconUrl" alt=""/>
 	<div class="body">
-		<span class="host">{{ instance.host }}</span>
-		<span class="sub">{{ instance.softwareName || '?' }} {{ instance.softwareVersion }}</span>
+		<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="chart" class="chart" :src="chart.requests.received"/>
 </div>
@@ -20,7 +20,7 @@ const props = defineProps<{
 
 const chart = $ref(null);
 
-os.api('charts/instance', { host: props.instance.host, limit: 16, span: 'hour' }).then(res => {
+os.api('charts/instance', { host: props.instance.host, limit: 16, span: 'day' }).then(res => {
 	chart = res;
 });
 </script>
@@ -42,7 +42,7 @@ os.api('charts/instance', { host: props.instance.host, limit: 16, span: 'hour' }
 		height: ($bodyTitleHieght + $bodyInfoHieght);
 		object-fit: cover;
 		border-radius: 4px;
-		margin-right: 8px;
+		margin-right: 10px;
 	}
 
 	> :global(.body) {
diff --git a/packages/client/src/components/user-card-mini.vue b/packages/client/src/components/user-card-mini.vue
new file mode 100644
index 0000000000..9a286a1a83
--- /dev/null
+++ b/packages/client/src/components/user-card-mini.vue
@@ -0,0 +1,95 @@
+<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>
+	<MkMiniChart v-if="chart" class="chart" :src="chart.inc"/>
+</div>
+</template>
+
+<script lang="ts" setup>
+import * as misskey from 'misskey-js';
+import MkMiniChart from '@/components/mini-chart.vue';
+import * as os from '@/os';
+import { acct } from '@/filters/user';
+
+const props = defineProps<{
+	user: misskey.entities.User;
+}>();
+
+const chart = $ref(null);
+
+os.api('charts/user/notes', { userId: props.user.id, limit: 16, span: 'day' }).then(res => {
+	chart = res;
+});
+</script>
+
+<style lang="scss" module>
+.root {
+	$bodyTitleHieght: 18px;
+	$bodyInfoHieght: 16px;
+
+	display: flex;
+	align-items: center;
+	padding: 16px;
+	background: var(--panel);
+	border-radius: 8px;
+
+	> :global(.avatar) {
+		display: block;
+		width: ($bodyTitleHieght + $bodyInfoHieght);
+		height: ($bodyTitleHieght + $bodyInfoHieght);
+		margin-right: 12px;
+	}
+
+	> :global(.body) {
+		flex: 1;
+		overflow: hidden;
+		font-size: 0.9em;
+		color: var(--fg);
+		padding-right: 8px;
+
+		> :global(.name) {
+			display: block;
+			width: 100%;
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			line-height: $bodyTitleHieght;
+		}
+
+		> :global(.sub) {
+			font-size: 75%;
+			opacity: 0.7;
+			line-height: $bodyInfoHieght;
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+	}
+
+	> :global(.chart) {
+		height: 30px;
+	}
+
+	&: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-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-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-size: 16px 16px;
+	}
+}
+</style>
diff --git a/packages/client/src/pages/admin/users.vue b/packages/client/src/pages/admin/users.vue
index dccf952ba9..ce377074cc 100644
--- a/packages/client/src/pages/admin/users.vue
+++ b/packages/client/src/pages/admin/users.vue
@@ -41,25 +41,9 @@
 					</div>
 
 					<MkPagination v-slot="{items}" ref="paginationComponent" :pagination="pagination" class="users">
-						<button v-for="user in items" :key="user.id" class="user _panel _button _gap" @click="show(user)">
-							<MkAvatar class="avatar" :user="user" :disable-link="true" :show-indicator="true"/>
-							<div class="body">
-								<header>
-									<MkUserName class="name" :user="user"/>
-									<span class="acct">@{{ acct(user) }}</span>
-									<span v-if="user.isAdmin" class="staff"><i class="fas fa-bookmark"></i></span>
-									<span v-if="user.isModerator" class="staff"><i class="far fa-bookmark"></i></span>
-									<span v-if="user.isSilenced" class="punished"><i class="fas fa-microphone-slash"></i></span>
-									<span v-if="user.isSuspended" class="punished"><i class="fas fa-snowflake"></i></span>
-								</header>
-								<div>
-									<span>{{ $ts.lastUsed }}: <MkTime v-if="user.updatedAt" :time="user.updatedAt" mode="detail"/></span>
-								</div>
-								<div>
-									<span>{{ $ts.registeredDate }}: <MkTime :time="user.createdAt" mode="detail"/></span>
-								</div>
-							</div>
-						</button>
+						<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}`" :behavior="'window'">
+							<MkUserCardMini :user="user"/>
+						</MkA>
 					</MkPagination>
 				</div>
 			</div>
@@ -74,11 +58,11 @@ import XHeader from './_header_.vue';
 import MkInput from '@/components/form/input.vue';
 import MkSelect from '@/components/form/select.vue';
 import MkPagination from '@/components/ui/pagination.vue';
-import { acct } from '@/filters/user';
 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/user-card-mini.vue';
 
 let paginationComponent = $ref<InstanceType<typeof MkPagination>>();
 
@@ -174,54 +158,12 @@ definePageMetadata(computed(() => ({
 	
 		> .users {
 			margin-top: var(--margin);
+			display: grid;
+			grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
+			grid-gap: 12px;
 
-			> .user {
-				display: flex;
-				width: 100%;
-				box-sizing: border-box;
-				text-align: left;
-				align-items: center;
-				padding: 16px;
-
-				&:hover {
-					color: var(--accent);
-				}
-
-				> .avatar {
-					width: 60px;
-					height: 60px;
-				}
-
-				> .body {
-					margin-left: 0.3em;
-					padding: 0 8px;
-					flex: 1;
-
-					@media (max-width: 500px) {
-						font-size: 14px;
-					}
-
-					> header {
-						> .name {
-							font-weight: bold;
-						}
-
-						> .acct {
-							margin-left: 8px;
-							opacity: 0.7;
-						}
-
-						> .staff {
-							margin-left: 0.5em;
-							color: var(--badge);
-						}
-
-						> .punished {
-							margin-left: 0.5em;
-							color: #4dabf7;
-						}
-					}
-				}
+			> .user:hover {
+				text-decoration: none;
 			}
 		}
 	}
diff --git a/packages/client/src/pages/federation.vue b/packages/client/src/pages/federation.vue
index 38d42f2be4..bbd1bd352a 100644
--- a/packages/client/src/pages/federation.vue
+++ b/packages/client/src/pages/federation.vue
@@ -42,7 +42,7 @@
 			<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}`" :behavior="'window'">
-						<MkInstanceInfo :instance="instance"/>
+						<MkInstanceCardMini :instance="instance"/>
 					</MkA>
 				</div>
 			</MkPagination>
@@ -57,7 +57,7 @@ import MkButton from '@/components/ui/button.vue';
 import MkInput from '@/components/form/input.vue';
 import MkSelect from '@/components/form/select.vue';
 import MkPagination from '@/components/ui/pagination.vue';
-import MkInstanceInfo from '@/components/instance-info.vue';
+import MkInstanceCardMini from '@/components/instance-card-mini.vue';
 import FormSplit from '@/components/form/split.vue';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
diff --git a/packages/client/src/pages/user-info.vue b/packages/client/src/pages/user-info.vue
index 67fc5ba7e3..ad11ae045b 100644
--- a/packages/client/src/pages/user-info.vue
+++ b/packages/client/src/pages/user-info.vue
@@ -77,6 +77,10 @@
 					</div>
 				</div>
 			</div>
+			<div v-else-if="tab === 'ap'" class="_formRoot">
+				<MkObjectView v-if="ap" tall :value="user">
+				</MkObjectView>
+			</div>
 			<div v-else-if="tab === 'raw'" class="_formRoot">
 				<MkObjectView v-if="info && $i.isAdmin" tall :value="info">
 				</MkObjectView>
@@ -225,7 +229,7 @@ watch(() => props.userId, () => {
 
 watch(() => user, () => {
 	os.api('ap/get', {
-		uri: user.uri || `${url}/users/${user.id}`,
+		uri: user.uri ?? `${url}/users/${user.id}`,
 	}).then(res => {
 		ap = res;
 	});
@@ -241,6 +245,10 @@ const headerTabs = $computed(() => [{
 	key: 'chart',
 	title: i18n.ts.charts,
 	icon: 'fas fa-chart-simple',
+}, {
+	key: 'ap',
+	title: 'AP',
+	icon: 'fas fa-share-alt',
 }, {
 	key: 'raw',
 	title: 'Raw data',

From 2a2020b79786b25668bfcfed19366a26c840e508 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Thu, 23 Jun 2022 13:19:17 +0900
Subject: [PATCH 29/90] chore(dev): improve eslint config

---
 packages/client/.eslintrc.js | 1 -
 packages/shared/.eslintrc.js | 5 +++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/client/.eslintrc.js b/packages/client/.eslintrc.js
index 10f0e5a9cb..9022143486 100644
--- a/packages/client/.eslintrc.js
+++ b/packages/client/.eslintrc.js
@@ -25,7 +25,6 @@ module.exports = {
 		// data の禁止理由: 抽象的すぎるため
 		// e の禁止理由: error や event など、複数のキーワードの頭文字であり分かりにくいため
 		'id-denylist': ['error', 'window', 'data', 'e'],
-		'eqeqeq': ['error', 'always', { 'null': 'ignore' }],
 		'no-shadow': ['warn'],
 		'vue/attributes-order': ['error', {
 			'alphabetical': false,
diff --git a/packages/shared/.eslintrc.js b/packages/shared/.eslintrc.js
index 4d9d6f2c85..dc53218824 100644
--- a/packages/shared/.eslintrc.js
+++ b/packages/shared/.eslintrc.js
@@ -31,6 +31,11 @@ module.exports = {
 			'beforeColon': false,
 			'afterColon': true,
 		}],
+		'arrow-spacing': ['error', {
+			'before': true,
+			'after': true,
+		}],
+		'padded-blocks': ['error', 'never'],
 		/* TODO: path aliasを使わないとwarnする
 		'no-restricted-imports': ['warn', {
 			'patterns': [

From d1e151172b8e7b41e443e4ce33e2ad710aa0de55 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Thu, 23 Jun 2022 13:39:28 +0900
Subject: [PATCH 30/90] chore(client): tweak client design

---
 .../src/components/instance-card-mini.vue     |  4 ++-
 .../client/src/components/user-card-mini.vue  |  4 ++-
 packages/client/src/pages/user-info.vue       | 36 ++++++++++++++++---
 3 files changed, 37 insertions(+), 7 deletions(-)

diff --git a/packages/client/src/components/instance-card-mini.vue b/packages/client/src/components/instance-card-mini.vue
index edcd576ce0..0bac6c0ad0 100644
--- a/packages/client/src/components/instance-card-mini.vue
+++ b/packages/client/src/components/instance-card-mini.vue
@@ -62,7 +62,9 @@ os.api('charts/instance', { host: props.instance.host, limit: 16, span: 'day' })
 		}
 
 		> :global(.sub) {
-			font-size: 75%;
+			display: block;
+			width: 100%;
+			font-size: 80%;
 			opacity: 0.7;
 			line-height: $bodyInfoHieght;
 			white-space: nowrap;
diff --git a/packages/client/src/components/user-card-mini.vue b/packages/client/src/components/user-card-mini.vue
index 9a286a1a83..d83e4a56f5 100644
--- a/packages/client/src/components/user-card-mini.vue
+++ b/packages/client/src/components/user-card-mini.vue
@@ -61,7 +61,9 @@ os.api('charts/user/notes', { userId: props.user.id, limit: 16, span: 'day' }).t
 		}
 
 		> :global(.sub) {
-			font-size: 75%;
+			display: block;
+			width: 100%;
+			font-size: 95%;
 			opacity: 0.7;
 			line-height: $bodyInfoHieght;
 			white-space: nowrap;
diff --git a/packages/client/src/pages/user-info.vue b/packages/client/src/pages/user-info.vue
index ad11ae045b..cc187b9df3 100644
--- a/packages/client/src/pages/user-info.vue
+++ b/packages/client/src/pages/user-info.vue
@@ -6,6 +6,10 @@
 			<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>
+					</div>
 				</div>
 
 				<div v-if="user.url" class="_formLinksGrid _formBlock">
@@ -17,11 +21,6 @@
 				<FormLink v-if="user.host" class="_formBlock" :to="`/instance-info/${user.host}`">{{ i18n.ts.instanceInfo }}</FormLink>
 
 				<div class="_formBlock">
-					<MkKeyValue :copy="acct(user)" oneline style="margin: 1em 0;">
-						<template #key>Acct</template>
-						<template #value><span class="_monospace">{{ acct(user) }}</span></template>
-					</MkKeyValue>
-
 					<MkKeyValue :copy="user.id" oneline style="margin: 1em 0;">
 						<template #key>ID</template>
 						<template #value><span class="_monospace">{{ user.id }}</span></template>
@@ -264,10 +263,37 @@ definePageMetadata(computed(() => ({
 
 <style lang="scss" scoped>
 .aeakzknw {
+	display: flex;
+	align-items: center;
+
 	> .avatar {
 		display: block;
 		width: 64px;
 		height: 64px;
+		margin-right: 16px;
+	}
+
+	> .body {
+		flex: 1;
+		overflow: hidden;
+
+		> .name {
+			display: block;
+			width: 100%;
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+
+		> .sub {
+			display: block;
+			width: 100%;
+			font-size: 85%;
+			opacity: 0.7;
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
 	}
 }
 

From ecdaeea94f72d1bd6ae7d3cf50e3c128d537e157 Mon Sep 17 00:00:00 2001
From: Johann150 <johann.galle@protonmail.com>
Date: Thu, 23 Jun 2022 13:26:47 +0200
Subject: [PATCH 31/90] enhance: word mute checks CW (#8873)

---
 packages/backend/src/misc/check-word-mute.ts   | 8 +++++---
 packages/client/src/scripts/check-word-mute.ts | 8 +++++---
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/packages/backend/src/misc/check-word-mute.ts b/packages/backend/src/misc/check-word-mute.ts
index 588dc79e55..015a368dfd 100644
--- a/packages/backend/src/misc/check-word-mute.ts
+++ b/packages/backend/src/misc/check-word-mute.ts
@@ -16,11 +16,13 @@ export async function checkWordMute(note: NoteLike, me: UserLike | null | undefi
 	if (me && (note.userId === me.id)) return false;
 
 	if (mutedWords.length > 0) {
-		if (note.text == null) return false;
+		const text = ((note.cw ?? '') + '\n' + (note.text ?? '')).trim();
+
+		if (text == '') return false;
 
 		const matched = mutedWords.some(filter => {
 			if (Array.isArray(filter)) {
-				return filter.every(keyword => note.text!.includes(keyword));
+				return filter.every(keyword => text.includes(keyword));
 			} else {
 				// represents RegExp
 				const regexp = filter.match(/^\/(.+)\/(.*)$/);
@@ -29,7 +31,7 @@ export async function checkWordMute(note: NoteLike, me: UserLike | null | undefi
 				if (!regexp) return false;
 
 				try {
-					return new RE2(regexp[1], regexp[2]).test(note.text!);
+					return new RE2(regexp[1], regexp[2]).test(text);
 				} catch (err) {
 					// This should never happen due to input sanitisation.
 					return false;
diff --git a/packages/client/src/scripts/check-word-mute.ts b/packages/client/src/scripts/check-word-mute.ts
index fa74c09939..aafdd8920a 100644
--- a/packages/client/src/scripts/check-word-mute.ts
+++ b/packages/client/src/scripts/check-word-mute.ts
@@ -3,7 +3,9 @@ export function checkWordMute(note: Record<string, any>, me: Record<string, any>
 	if (me && (note.userId === me.id)) return false;
 
 	if (mutedWords.length > 0) {
-		if (note.text == null) return false;
+		const text = ((note.cw ?? '') + '\n' + (note.text ?? '')).trim();
+
+		if (text == '') return false;
 
 		const matched = mutedWords.some(filter => {
 			if (Array.isArray(filter)) {
@@ -11,7 +13,7 @@ export function checkWordMute(note: Record<string, any>, me: Record<string, any>
 				const filteredFilter = filter.filter(keyword => keyword !== '');
 				if (filteredFilter.length === 0) return false;
 
-				return filteredFilter.every(keyword => note.text!.includes(keyword));
+				return filteredFilter.every(keyword => text.includes(keyword));
 			} else {
 				// represents RegExp
 				const regexp = filter.match(/^\/(.+)\/(.*)$/);
@@ -20,7 +22,7 @@ export function checkWordMute(note: Record<string, any>, me: Record<string, any>
 				if (!regexp) return false;
 
 				try {
-					return new RegExp(regexp[1], regexp[2]).test(note.text!);
+					return new RegExp(regexp[1], regexp[2]).test(text);
 				} catch (err) {
 					// This should never happen due to input sanitisation.
 					return false;

From 4f4d2b7c5389ac73af1198577902379f7920326f Mon Sep 17 00:00:00 2001
From: Johann150 <johann.galle@protonmail.com>
Date: Thu, 23 Jun 2022 14:32:17 +0200
Subject: [PATCH 32/90] refactor: simplify ap/show with DbResolver (#8838)

Using the existing code in DbResolver we can avoid separate code for
parsing the URIs in this endpoint.

Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>
---
 .../src/server/api/endpoints/ap/show.ts       | 132 +++++-------------
 1 file changed, 33 insertions(+), 99 deletions(-)

diff --git a/packages/backend/src/server/api/endpoints/ap/show.ts b/packages/backend/src/server/api/endpoints/ap/show.ts
index 3c0c0642e3..6442a1412c 100644
--- a/packages/backend/src/server/api/endpoints/ap/show.ts
+++ b/packages/backend/src/server/api/endpoints/ap/show.ts
@@ -2,12 +2,13 @@ import define from '../../define.js';
 import config from '@/config/index.js';
 import { createPerson } from '@/remote/activitypub/models/person.js';
 import { createNote } from '@/remote/activitypub/models/note.js';
+import DbResolver from '@/remote/activitypub/db-resolver.js';
 import Resolver from '@/remote/activitypub/resolver.js';
 import { ApiError } from '../../error.js';
 import { extractDbHost } from '@/misc/convert-host.js';
 import { Users, Notes } from '@/models/index.js';
 import { Note } from '@/models/entities/note.js';
-import { User } from '@/models/entities/user.js';
+import { CacheableLocalUser, User } from '@/models/entities/user.js';
 import { fetchMeta } from '@/misc/fetch-meta.js';
 import { isActor, isPost, getApId } from '@/remote/activitypub/type.js';
 import ms from 'ms';
@@ -77,8 +78,8 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps) => {
-	const object = await fetchAny(ps.uri);
+export default define(meta, paramDef, async (ps, me) => {
+	const object = await fetchAny(ps.uri, me);
 	if (object) {
 		return object;
 	} else {
@@ -89,48 +90,18 @@ export default define(meta, paramDef, async (ps) => {
 /***
  * URIからUserかNoteを解決する
  */
-async function fetchAny(uri: string): Promise<SchemaType<typeof meta['res']> | null> {
-	// URIがこのサーバーを指しているなら、ローカルユーザーIDとしてDBからフェッチ
-	if (uri.startsWith(config.url + '/')) {
-		const parts = uri.split('/');
-		const id = parts.pop();
-		const type = parts.pop();
-
-		if (type === 'notes') {
-			const note = await Notes.findOneBy({ id });
-
-			if (note) {
-				return {
-					type: 'Note',
-					object: await Notes.pack(note, null, { detail: true }),
-				};
-			}
-		} else if (type === 'users') {
-			const user = await Users.findOneBy({ id });
-
-			if (user) {
-				return {
-					type: 'User',
-					object: await Users.pack(user, null, { detail: true }),
-				};
-			}
-		}
-	}
-
+async function fetchAny(uri: string, me: CacheableLocalUser | null | undefined): Promise<SchemaType<typeof meta['res']> | null> {
 	// ブロックしてたら中断
 	const fetchedMeta = await fetchMeta();
 	if (fetchedMeta.blockedHosts.includes(extractDbHost(uri))) return null;
 
-	// URI(AP Object id)としてDB検索
-	{
-		const [user, note] = await Promise.all([
-			Users.findOneBy({ uri: uri }),
-			Notes.findOneBy({ uri: uri }),
-		]);
+	const dbResolver = new DbResolver();
 
-		const packed = await mergePack(user, note);
-		if (packed !== null) return packed;
-	}
+	let local = await mergePack(me, ...await Promise.all([
+		dbResolver.getUserFromApId(uri),
+		dbResolver.getNoteFromApId(uri),
+	]));
+	if (local != null) return local;
 
 	// リモートから一旦オブジェクトフェッチ
 	const resolver = new Resolver();
@@ -139,74 +110,37 @@ async function fetchAny(uri: string): Promise<SchemaType<typeof meta['res']> | n
 	// /@user のような正規id以外で取得できるURIが指定されていた場合、ここで初めて正規URIが確定する
 	// これはDBに存在する可能性があるため再度DB検索
 	if (uri !== object.id) {
-		if (object.id.startsWith(config.url + '/')) {
-			const parts = object.id.split('/');
-			const id = parts.pop();
-			const type = parts.pop();
-
-			if (type === 'notes') {
-				const note = await Notes.findOneBy({ id });
-
-				if (note) {
-					return {
-						type: 'Note',
-						object: await Notes.pack(note, null, { detail: true }),
-					};
-				}
-			} else if (type === 'users') {
-				const user = await Users.findOneBy({ id });
-
-				if (user) {
-					return {
-						type: 'User',
-						object: await Users.pack(user, null, { detail: true }),
-					};
-				}
-			}
-		}
-
-		const [user, note] = await Promise.all([
-			Users.findOneBy({ uri: object.id }),
-			Notes.findOneBy({ uri: object.id }),
-		]);
-
-		const packed = await mergePack(user, note);
-		if (packed !== null) return packed;
+		local = await mergePack(me, ...await Promise.all([
+			dbResolver.getUserFromApId(object.id),
+			dbResolver.getNoteFromApId(object.id),
+		]));
+		if (local != null) return local;
 	}
 
-	// それでもみつからなければ新規であるため登録
-	if (isActor(object)) {
-		const user = await createPerson(getApId(object));
-		return {
-			type: 'User',
-			object: await Users.pack(user, null, { detail: true }),
-		};
-	}
-
-	if (isPost(object)) {
-		const note = await createNote(getApId(object), undefined, true);
-		return {
-			type: 'Note',
-			object: await Notes.pack(note!, null, { detail: true }),
-		};
-	}
-
-	return null;
+	return await mergePack(
+		me,
+		isActor(object) ? await createPerson(getApId(object)) : null,
+		isPost(object) ? await createNote(getApId(object), undefined, true) : null,
+	);
 }
 
-async function mergePack(user: User | null | undefined, note: Note | null | undefined): Promise<SchemaType<typeof meta.res> | null> {
+async function mergePack(me: CacheableLocalUser | null | undefined, user: User | null | undefined, note: Note | null | undefined): Promise<SchemaType<typeof meta.res> | null> {
 	if (user != null) {
 		return {
 			type: 'User',
-			object: await Users.pack(user, null, { detail: true }),
+			object: await Users.pack(user, me, { detail: true }),
 		};
-	}
+	} else if (note != null) {
+		try {
+			const object = await Notes.pack(note, me, { detail: true });
 
-	if (note != null) {
-		return {
-			type: 'Note',
-			object: await Notes.pack(note, null, { detail: true }),
-		};
+			return {
+				type: 'Note',
+				object,
+			};
+		} catch (e) {
+			return null;
+		}
 	}
 
 	return null;

From 3e1248ff3581ecba8c5456d2cea5a1c44adbf489 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Thu, 23 Jun 2022 21:46:15 +0900
Subject: [PATCH 33/90] lint fixes

---
 packages/client/src/components/mfm.ts | 40 +++++++++++++--------------
 1 file changed, 20 insertions(+), 20 deletions(-)

diff --git a/packages/client/src/components/mfm.ts b/packages/client/src/components/mfm.ts
index 4556a82d55..f7dbca0d30 100644
--- a/packages/client/src/components/mfm.ts
+++ b/packages/client/src/components/mfm.ts
@@ -17,30 +17,30 @@ export default defineComponent({
 	props: {
 		text: {
 			type: String,
-			required: true
+			required: true,
 		},
 		plain: {
 			type: Boolean,
-			default: false
+			default: false,
 		},
 		nowrap: {
 			type: Boolean,
-			default: false
+			default: false,
 		},
 		author: {
 			type: Object,
-			default: null
+			default: null,
 		},
 		i: {
 			type: Object,
-			default: null
+			default: null,
 		},
 		customEmojis: {
 			required: false,
 		},
 		isNote: {
 			type: Boolean,
-			default: true
+			default: true,
 		},
 	},
 
@@ -82,7 +82,7 @@ export default defineComponent({
 
 				case 'italic': {
 					return h('i', {
-						style: 'font-style: oblique;'
+						style: 'font-style: oblique;',
 					}, genEl(token.children));
 				}
 
@@ -201,13 +201,13 @@ export default defineComponent({
 
 				case 'small': {
 					return [h('small', {
-						style: 'opacity: 0.7;'
+						style: 'opacity: 0.7;',
 					}, genEl(token.children))];
 				}
 
 				case 'center': {
 					return [h('div', {
-						style: 'text-align:center;'
+						style: 'text-align:center;',
 					}, genEl(token.children))];
 				}
 
@@ -231,7 +231,7 @@ export default defineComponent({
 					return [h(MkMention, {
 						key: Math.random(),
 						host: (token.props.host == null && this.author && this.author.host != null ? this.author.host : token.props.host) || host,
-						username: token.props.username
+						username: token.props.username,
 					})];
 				}
 
@@ -239,7 +239,7 @@ export default defineComponent({
 					return [h(MkA, {
 						key: Math.random(),
 						to: this.isNote ? `/tags/${encodeURIComponent(token.props.hashtag)}` : `/explore/tags/${encodeURIComponent(token.props.hashtag)}`,
-						style: 'color:var(--hashtag);'
+						style: 'color:var(--hashtag);',
 					}, `#${token.props.hashtag}`)];
 				}
 
@@ -255,18 +255,18 @@ export default defineComponent({
 					return [h(MkCode, {
 						key: Math.random(),
 						code: token.props.code,
-						inline: true
+						inline: true,
 					})];
 				}
 
 				case 'quote': {
 					if (!this.nowrap) {
 						return [h('div', {
-							class: 'quote'
+							class: 'quote',
 						}, genEl(token.children))];
 					} else {
 						return [h('span', {
-							class: 'quote'
+							class: 'quote',
 						}, genEl(token.children))];
 					}
 				}
@@ -276,7 +276,7 @@ export default defineComponent({
 						key: Math.random(),
 						emoji: `:${token.props.name}:`,
 						customEmojis: this.customEmojis,
-						normal: this.plain
+						normal: this.plain,
 					})];
 				}
 
@@ -285,7 +285,7 @@ export default defineComponent({
 						key: Math.random(),
 						emoji: token.props.emoji,
 						customEmojis: this.customEmojis,
-						normal: this.plain
+						normal: this.plain,
 					})];
 				}
 
@@ -293,7 +293,7 @@ export default defineComponent({
 					return [h(MkFormula, {
 						key: Math.random(),
 						formula: token.props.formula,
-						block: false
+						block: false,
 					})];
 				}
 
@@ -301,14 +301,14 @@ export default defineComponent({
 					return [h(MkFormula, {
 						key: Math.random(),
 						formula: token.props.formula,
-						block: true
+						block: true,
 					})];
 				}
 
 				case 'search': {
 					return [h(MkGoogle, {
 						key: Math.random(),
-						q: token.props.query
+						q: token.props.query,
 					})];
 				}
 
@@ -322,5 +322,5 @@ export default defineComponent({
 
 		// Parse ast to DOM
 		return h('span', genEl(ast));
-	}
+	},
 });

From 5ee53c222b0489f1be839a9de4694ad1445a58bb Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Thu, 23 Jun 2022 23:45:22 +0900
Subject: [PATCH 34/90] chore(client): tweak ui

---
 packages/client/src/pages/admin-file.vue | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/packages/client/src/pages/admin-file.vue b/packages/client/src/pages/admin-file.vue
index 7fb7cc1c87..1a8092322c 100644
--- a/packages/client/src/pages/admin-file.vue
+++ b/packages/client/src/pages/admin-file.vue
@@ -28,14 +28,15 @@
 					<template #value><span class="_monospace"><MkTime :time="file.createdAt" mode="detail" style="display: block;"/></span></template>
 				</MkKeyValue>
 			</div>
+			<MkA class="user" :to="`/user-info/${file.user.id}`" :behavior="'window'">
+				<MkUserCardMini :user="file.user"/>
+			</MkA>
 			<div class="_formBlock">
 				<MkSwitch v-model="isSensitive" @update:modelValue="toggleIsSensitive">NSFW</MkSwitch>
 			</div>
-			<FormLink class="_formBlock" :to="file.url" :external="true">Open</FormLink>
-			<FormLink class="_formBlock" :to="`/user-info/${file.userId}`">{{ $ts.user }} ({{ acct(file.user) }})</FormLink>
 
 			<div class="_formBlock">
-				<MkButton full danger @click="del"><i class="fas fa-trash-alt"></i> {{ $ts.delete }}</MkButton>
+				<MkButton danger @click="del"><i class="fas fa-trash-alt"></i> {{ i18n.ts.delete }}</MkButton>
 			</div>
 		</div>
 		<div v-else-if="tab === 'raw'" class="_formRoot">
@@ -54,6 +55,7 @@ import MkObjectView from '@/components/object-view.vue';
 import MkDriveFileThumbnail from '@/components/drive-file-thumbnail.vue';
 import MkKeyValue from '@/components/key-value.vue';
 import FormLink from '@/components/form/link.vue';
+import MkUserCardMini from '@/components/user-card-mini.vue';
 import bytes from '@/filters/bytes';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
@@ -129,5 +131,11 @@ definePageMetadata(computed(() => ({
 			max-width: 100%;
 		}
 	}
+
+	> .user {
+		&:hover {
+			text-decoration: none;
+		}
+	}
 }
 </style>

From c9e9129373a41b1ffe3a8d345b10a3a9a0ce48ee Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Fri, 24 Jun 2022 00:47:55 +0900
Subject: [PATCH 35/90] fix #8861

---
 packages/client/src/pages/theme-editor.vue    | 138 +++++++++---------
 .../client/src/scripts/use-leave-guard.ts     |   2 +
 2 files changed, 72 insertions(+), 68 deletions(-)

diff --git a/packages/client/src/pages/theme-editor.vue b/packages/client/src/pages/theme-editor.vue
index 38f3b90a6e..3525543531 100644
--- a/packages/client/src/pages/theme-editor.vue
+++ b/packages/client/src/pages/theme-editor.vue
@@ -1,68 +1,70 @@
-<template><MkStickyContainer>
+<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>
+	<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="fas fa-code"></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="fas fa-code"></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>
@@ -85,6 +87,7 @@ 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' },
@@ -204,7 +207,17 @@ async function saveAs() {
 
 watch($$(theme), apply, { deep: true });
 
-const headerActions = $computed(() => []);
+const headerActions = $computed(() => [{
+	asFullButton: true,
+	icon: 'fas fa-eye',
+	text: i18n.ts.preview,
+	handler: showPreview,
+}, {
+	asFullButton: true,
+	icon: 'fas fa-check',
+	text: i18n.ts.saveAs,
+	handler: saveAs,
+}]);
 
 const headerTabs = $computed(() => []);
 
@@ -212,17 +225,6 @@ definePageMetadata({
 	title: i18n.ts.themeEditor,
 	icon: 'fas fa-palette',
 	bg: 'var(--bg)',
-	actions: [{
-		asFullButton: true,
-		icon: 'fas fa-eye',
-		text: i18n.ts.preview,
-		handler: showPreview,
-	}, {
-		asFullButton: true,
-		icon: 'fas fa-check',
-		text: i18n.ts.saveAs,
-		handler: saveAs,
-	}],
 });
 </script>
 
diff --git a/packages/client/src/scripts/use-leave-guard.ts b/packages/client/src/scripts/use-leave-guard.ts
index 379a7e577c..a93b84d1fe 100644
--- a/packages/client/src/scripts/use-leave-guard.ts
+++ b/packages/client/src/scripts/use-leave-guard.ts
@@ -3,6 +3,7 @@ import { i18n } from '@/i18n';
 import * as os from '@/os';
 
 export function useLeaveGuard(enabled: Ref<boolean>) {
+	/* TODO
 	const setLeaveGuard = inject('setLeaveGuard');
 
 	if (setLeaveGuard) {
@@ -28,6 +29,7 @@ export function useLeaveGuard(enabled: Ref<boolean>) {
 			return !canceled;
 		});
 	}
+	*/
 
 	/*
 	function onBeforeLeave(ev: BeforeUnloadEvent) {

From 12374bd6a389f2da307a9214b797314dfcdfd19f Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Fri, 24 Jun 2022 01:26:15 +0900
Subject: [PATCH 36/90] fix(nirax): Normalize path (#8877)

---
 packages/client/src/nirax.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/client/src/nirax.ts b/packages/client/src/nirax.ts
index d219787448..cae4edaf18 100644
--- a/packages/client/src/nirax.ts
+++ b/packages/client/src/nirax.ts
@@ -35,7 +35,7 @@ function parsePath(path: string): ParsedPath {
 				wildcard,
 				optional,
 			});
-		} else {
+		} else if (part.length !== 0) {
 			res.push(part);
 		}
 	}
@@ -85,9 +85,11 @@ export class Router extends EventEmitter<{
 
 		if (_DEV_) console.log('Routing: ', path, queryString);
 
+		const _parts = path.split('/').filter(part => part.length !== 0);
+
 		forEachRouteLoop:
 		for (const route of this.routes) {
-			let parts = path.split('/');
+			let parts = [ ..._parts ];
 			const props = new Map<string, string>();
 
 			pathMatchLoop:

From 4a5d5fe20c055582d23c60162b25e836b3f24107 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Fri, 24 Jun 2022 10:34:36 +0900
Subject: [PATCH 37/90] refactor(client): use composition api

---
 packages/client/src/components/mention.vue | 54 ++++++++--------------
 1 file changed, 18 insertions(+), 36 deletions(-)

diff --git a/packages/client/src/components/mention.vue b/packages/client/src/components/mention.vue
index 70c2f49afa..2c8bc0c04e 100644
--- a/packages/client/src/components/mention.vue
+++ b/packages/client/src/components/mention.vue
@@ -1,12 +1,12 @@
 <template>
-<MkA v-if="url.startsWith('/')" v-user-preview="canonical" :class="[$style.root, { isMe }]" :to="url" :style="{ background: bg }">
+<MkA v-if="url.startsWith('/')" v-user-preview="canonical" :class="[$style.root, { isMe }]" :to="url" :style="{ background: bgCss }">
 	<img :class="$style.icon" :src="`/avatar/@${username}@${host}`" alt="">
 	<span class="main">
 		<span class="username">@{{ username }}</span>
 		<span v-if="(host != localHost) || $store.state.showFullAcct" :class="$style.mainHost">@{{ toUnicode(host) }}</span>
 	</span>
 </MkA>
-<a v-else :class="$style.root" :href="url" target="_blank" rel="noopener" :style="{ background: bg }">
+<a v-else :class="$style.root" :href="url" target="_blank" rel="noopener" :style="{ background: bgCss }">
 	<span class="main">
 		<span class="username">@{{ username }}</span>
 		<span :class="$style.mainHost">@{{ toUnicode(host) }}</span>
@@ -14,49 +14,31 @@
 </a>
 </template>
 
-<script lang="ts">
-import { defineComponent, useCssModule } from 'vue';
-import tinycolor from 'tinycolor2';
+<script lang="ts" setup>
 import { toUnicode } from 'punycode';
+import { useCssModule } from 'vue';
+import tinycolor from 'tinycolor2';
 import { host as localHost } from '@/config';
 import { $i } from '@/account';
 
-export default defineComponent({
-	props: {
-		username: {
-			type: String,
-			required: true
-		},
-		host: {
-			type: String,
-			required: true
-		}
-	},
+const props = defineProps<{
+	username: string;
+	host: string;
+}>();
 
-	setup(props) {
-		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 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'));
-		bg.setAlpha(0.1);
+const bg = tinycolor(getComputedStyle(document.documentElement).getPropertyValue(isMe ? '--mentionMe' : '--mention'));
+bg.setAlpha(0.1);
+const bgCss = bg.toRgbString();
 
-		useCssModule();
-
-		return {
-			localHost,
-			isMe,
-			url,
-			canonical,
-			toUnicode,
-			bg: bg.toRgbString(),
-		};
-	},
-});
+useCssModule();
 </script>
 
 <style lang="scss" module>

From 55c22eec8bbbe255198b5d9b2957dfc1cf9caf9c Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Fri, 24 Jun 2022 10:51:45 +0900
Subject: [PATCH 38/90] chore(client): tweak ui

---
 packages/client/src/components/mini-chart.vue | 32 +++++-----
 .../src/pages/settings/import-export.vue      | 60 ++++++++++++++-----
 .../client/src/pages/settings/privacy.vue     | 11 +++-
 3 files changed, 72 insertions(+), 31 deletions(-)

diff --git a/packages/client/src/components/mini-chart.vue b/packages/client/src/components/mini-chart.vue
index 345b6a0b01..34acb766af 100644
--- a/packages/client/src/components/mini-chart.vue
+++ b/packages/client/src/components/mini-chart.vue
@@ -2,8 +2,8 @@
 <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="hsl(200, 80%, 70%)"></stop>
-			<stop offset="100%" stop-color="hsl(90, 80%, 70%)"></stop>
+			<stop offset="0%" :stop-color="color"></stop>
+			<stop offset="100%" :stop-color="colorAlpha"></stop>
 		</linearGradient>
 		<mask :id="maskId" x="0" y="0" :width="viewBoxX" :height="viewBoxY">
 			<polygon
@@ -11,18 +11,6 @@
 				fill="#fff"
 				fill-opacity="0.5"
 			/>
-			<polyline
-				:points="polylinePoints"
-				fill="none"
-				stroke="#fff"
-				stroke-width="2"
-			/>
-			<circle
-				:cx="headX"
-				:cy="headY"
-				r="3"
-				fill="#fff"
-			/>
 		</mask>
 	</defs>
 	<rect
@@ -30,12 +18,25 @@
 		:width="viewBoxX + 20" :height="viewBoxY + 20"
 		:style="`stroke: none; fill: url(#${ gradientId }); mask: url(#${ maskId })`"
 	/>
+	<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';
 
 const props = defineProps<{
 	src: number[];
@@ -50,6 +51,9 @@ 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 color = accent.toRgbString();
+const colorAlpha = accent.clone().setAlpha(1).toRgbString();
 
 function draw(): void {
 	const stats = props.src.slice().reverse();
diff --git a/packages/client/src/pages/settings/import-export.vue b/packages/client/src/pages/settings/import-export.vue
index 438ecbd330..49d8a80b38 100644
--- a/packages/client/src/pages/settings/import-export.vue
+++ b/packages/client/src/pages/settings/import-export.vue
@@ -2,37 +2,69 @@
 <div class="_formRoot">
 	<FormSection>
 		<template #label>{{ $ts._exportOrImport.allNotes }}</template>
-		<MkButton :class="$style.button" inline @click="exportNotes()"><i class="fas fa-download"></i> {{ $ts.export }}</MkButton>
+		<FormFolder>
+			<template #label>{{ $ts.export }}</template>
+			<template #icon><i class="fas fa-download"></i></template>
+			<MkButton primary :class="$style.button" inline @click="exportNotes()"><i class="fas fa-download"></i> {{ $ts.export }}</MkButton>
+		</FormFolder>
 	</FormSection>
 	<FormSection>
 		<template #label>{{ $ts._exportOrImport.followingList }}</template>
-		<FormGroup>
+		<FormFolder class="_formBlock">
+			<template #label>{{ $ts.export }}</template>
+			<template #icon><i class="fas fa-download"></i></template>
 			<FormSwitch v-model="excludeMutingUsers" class="_formBlock">
 				{{ $ts._exportOrImport.excludeMutingUsers }}
 			</FormSwitch>
 			<FormSwitch v-model="excludeInactiveUsers" class="_formBlock">
 				{{ $ts._exportOrImport.excludeInactiveUsers }}
 			</FormSwitch>
-			<MkButton :class="$style.button" inline @click="exportFollowing()"><i class="fas fa-download"></i> {{ $ts.export }}</MkButton>
-		</FormGroup>
-		<FormGroup>
-			<MkButton :class="$style.button" inline @click="importFollowing($event)"><i class="fas fa-upload"></i> {{ $ts.import }}</MkButton>
-		</FormGroup>
+			<MkButton primary :class="$style.button" inline @click="exportFollowing()"><i class="fas fa-download"></i> {{ $ts.export }}</MkButton>
+		</FormFolder>
+		<FormFolder class="_formBlock">
+			<template #label>{{ $ts.import }}</template>
+			<template #icon><i class="fas fa-upload"></i></template>
+			<MkButton primary :class="$style.button" inline @click="importFollowing($event)"><i class="fas fa-upload"></i> {{ $ts.import }}</MkButton>
+		</FormFolder>
 	</FormSection>
 	<FormSection>
 		<template #label>{{ $ts._exportOrImport.userLists }}</template>
-		<MkButton :class="$style.button" inline @click="exportUserLists()"><i class="fas fa-download"></i> {{ $ts.export }}</MkButton>
-		<MkButton :class="$style.button" inline @click="importUserLists($event)"><i class="fas fa-upload"></i> {{ $ts.import }}</MkButton>
+		<FormFolder class="_formBlock">
+			<template #label>{{ $ts.export }}</template>
+			<template #icon><i class="fas fa-download"></i></template>
+			<MkButton primary :class="$style.button" inline @click="exportUserLists()"><i class="fas fa-download"></i> {{ $ts.export }}</MkButton>
+		</FormFolder>
+		<FormFolder class="_formBlock">
+			<template #label>{{ $ts.import }}</template>
+			<template #icon><i class="fas fa-upload"></i></template>
+			<MkButton primary :class="$style.button" inline @click="importUserLists($event)"><i class="fas fa-upload"></i> {{ $ts.import }}</MkButton>
+		</FormFolder>
 	</FormSection>
 	<FormSection>
 		<template #label>{{ $ts._exportOrImport.muteList }}</template>
-		<MkButton :class="$style.button" inline @click="exportMuting()"><i class="fas fa-download"></i> {{ $ts.export }}</MkButton>
-		<MkButton :class="$style.button" inline @click="importMuting($event)"><i class="fas fa-upload"></i> {{ $ts.import }}</MkButton>
+		<FormFolder class="_formBlock">
+			<template #label>{{ $ts.export }}</template>
+			<template #icon><i class="fas fa-download"></i></template>
+			<MkButton primary :class="$style.button" inline @click="exportMuting()"><i class="fas fa-download"></i> {{ $ts.export }}</MkButton>
+		</FormFolder>
+		<FormFolder class="_formBlock">
+			<template #label>{{ $ts.import }}</template>
+			<template #icon><i class="fas fa-upload"></i></template>
+			<MkButton primary :class="$style.button" inline @click="importMuting($event)"><i class="fas fa-upload"></i> {{ $ts.import }}</MkButton>
+		</FormFolder>
 	</FormSection>
 	<FormSection>
 		<template #label>{{ $ts._exportOrImport.blockingList }}</template>
-		<MkButton :class="$style.button" inline @click="exportBlocking()"><i class="fas fa-download"></i> {{ $ts.export }}</MkButton>
-		<MkButton :class="$style.button" inline @click="importBlocking($event)"><i class="fas fa-upload"></i> {{ $ts.import }}</MkButton>
+		<FormFolder class="_formBlock">
+			<template #label>{{ $ts.export }}</template>
+			<template #icon><i class="fas fa-download"></i></template>
+			<MkButton primary :class="$style.button" inline @click="exportBlocking()"><i class="fas fa-download"></i> {{ $ts.export }}</MkButton>
+		</FormFolder>
+		<FormFolder class="_formBlock">
+			<template #label>{{ $ts.import }}</template>
+			<template #icon><i class="fas fa-upload"></i></template>
+			<MkButton primary :class="$style.button" inline @click="importBlocking($event)"><i class="fas fa-upload"></i> {{ $ts.import }}</MkButton>
+		</FormFolder>
 	</FormSection>
 </div>
 </template>
@@ -41,7 +73,7 @@
 import { ref } from 'vue';
 import MkButton from '@/components/ui/button.vue';
 import FormSection from '@/components/form/section.vue';
-import FormGroup from '@/components/form/group.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';
diff --git a/packages/client/src/pages/settings/privacy.vue b/packages/client/src/pages/settings/privacy.vue
index a209c3f469..4d509efe28 100644
--- a/packages/client/src/pages/settings/privacy.vue
+++ b/packages/client/src/pages/settings/privacy.vue
@@ -31,8 +31,13 @@
 
 	<FormSection>
 		<FormSwitch v-model="rememberNoteVisibility" class="_formBlock" @update:modelValue="save()">{{ $ts.rememberNoteVisibility }}</FormSwitch>
-		<FormGroup v-if="!rememberNoteVisibility" class="_formBlock">
+		<FormFolder v-if="!rememberNoteVisibility" class="_formBlock">
 			<template #label>{{ $ts.defaultNoteVisibility }}</template>
+			<template v-if="defaultNoteVisibility === 'public'" #suffix>{{ $ts._visibility.public }}</template>
+			<template v-else-if="defaultNoteVisibility === 'home'" #suffix>{{ $ts._visibility.home }}</template>
+			<template v-else-if="defaultNoteVisibility === 'followers'" #suffix>{{ $ts._visibility.followers }}</template>
+			<template v-else-if="defaultNoteVisibility === 'specified'" #suffix>{{ $ts._visibility.specified }}</template>
+
 			<FormSelect v-model="defaultNoteVisibility" class="_formBlock">
 				<option value="public">{{ $ts._visibility.public }}</option>
 				<option value="home">{{ $ts._visibility.home }}</option>
@@ -40,7 +45,7 @@
 				<option value="specified">{{ $ts._visibility.specified }}</option>
 			</FormSelect>
 			<FormSwitch v-model="defaultNoteLocalOnly" class="_formBlock">{{ $ts._visibility.localOnly }}</FormSwitch>
-		</FormGroup>
+		</FormFolder>
 	</FormSection>
 
 	<FormSwitch v-model="keepCw" class="_formBlock" @update:modelValue="save()">{{ $ts.keepCw }}</FormSwitch>
@@ -52,7 +57,7 @@ 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 FormGroup from '@/components/form/group.vue';
+import FormFolder from '@/components/form/folder.vue';
 import * as os from '@/os';
 import { defaultStore } from '@/store';
 import { i18n } from '@/i18n';

From 1c2e2c4b06b088ad0d4d752760b3126a6a9bf017 Mon Sep 17 00:00:00 2001
From: Johann150 <johann.galle@protonmail.com>
Date: Fri, 24 Jun 2022 12:03:41 +0200
Subject: [PATCH 39/90] fix(client): ask to log in for poll vote (#8883)

---
 packages/client/src/components/poll.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/client/src/components/poll.vue b/packages/client/src/components/poll.vue
index 171b4a4770..d9ef5970cb 100644
--- a/packages/client/src/components/poll.vue
+++ b/packages/client/src/components/poll.vue
@@ -24,6 +24,7 @@
 <script lang="ts">
 import { computed, defineComponent, onUnmounted, ref, toRef } from 'vue';
 import { sum } from '@/scripts/array';
+import { pleaseLogin } from '@/scripts/please-login';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
 
@@ -75,6 +76,8 @@ export default defineComponent({
 		}
 
 		const vote = async (id) => {
+			pleaseLogin();
+
 			if (props.readOnly || closed.value || isVoted.value) return;
 
 			const { canceled } = await os.confirm({

From 6f8e3fe36633836d36c5447d78636f370b36cd84 Mon Sep 17 00:00:00 2001
From: MeiMei <30769358+mei23@users.noreply.github.com>
Date: Fri, 24 Jun 2022 19:22:19 +0900
Subject: [PATCH 40/90] =?UTF-8?q?enhance:=20Redis=E3=82=92ioredis=E3=81=AB?=
 =?UTF-8?q?=E7=B5=B1=E4=B8=80=E3=81=97=E3=81=A6IPv6=E3=82=B5=E3=83=9D?=
 =?UTF-8?q?=E3=83=BC=E3=83=88=20(#8869)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Use ioredis, Supports IPv6 host

https://github.com/misskey-dev/misskey/issues/8862

* Fix import

* order

* a

* i

* fix

* flushdb

* family

* CHANGELOG

* redis_version

Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>
---
 .config/example.yml                           |  1 +
 CHANGELOG.md                                  |  2 ++
 packages/backend/package.json                 |  2 +-
 packages/backend/src/config/types.ts          |  1 +
 packages/backend/src/db/postgre.ts            |  7 ++++---
 packages/backend/src/db/redis.ts              | 19 +++++++++----------
 packages/backend/src/queue/initialize.ts      |  1 +
 .../server/api/endpoints/admin/server-info.ts |  6 +++++-
 packages/backend/yarn.lock                    | 19 ++-----------------
 9 files changed, 26 insertions(+), 32 deletions(-)

diff --git a/.config/example.yml b/.config/example.yml
index ef91c86f52..8b9d9b4823 100644
--- a/.config/example.yml
+++ b/.config/example.yml
@@ -57,6 +57,7 @@ db:
 redis:
   host: localhost
   port: 6379
+  #family: 0  # 0=Both, 4=IPv4, 6=IPv6
   #pass: example-pass
   #prefix: example-prefix
   #db: 1
diff --git a/CHANGELOG.md b/CHANGELOG.md
index c4486dd6c5..3dc75e6f92 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -18,6 +18,8 @@ You should also include the user name that made the change.
 - Improve player detection in URL preview @mei23
 - Add Badge Image to Push Notification #8012 @tamaina
 - Client: Removing entries from a clip @futchitwo
+- Server: Supports IPv6 on Redis transport. @mei23  
+  IPv4/IPv6 is used by default. You can tune this behavior via `redis.family`.
 
 ### Bugfixes
 - Server: Fix GenerateVideoThumbnail failed @mei23
diff --git a/packages/backend/package.json b/packages/backend/package.json
index 3ac5b7398c..b126f723ec 100644
--- a/packages/backend/package.json
+++ b/packages/backend/package.json
@@ -47,6 +47,7 @@
 		"fluent-ffmpeg": "2.1.2",
 		"got": "12.1.0",
 		"hpagent": "0.1.2",
+		"ioredis": "4.28.5",
 		"ip-cidr": "3.0.10",
 		"is-svg": "4.3.2",
 		"js-yaml": "4.1.0",
@@ -86,7 +87,6 @@
 		"random-seed": "0.3.0",
 		"ratelimiter": "3.4.1",
 		"re2": "1.17.4",
-		"redis": "3.1.2",
 		"redis-lock": "0.1.4",
 		"reflect-metadata": "0.1.13",
 		"rename": "1.0.4",
diff --git a/packages/backend/src/config/types.ts b/packages/backend/src/config/types.ts
index 948545db7a..78510c8377 100644
--- a/packages/backend/src/config/types.ts
+++ b/packages/backend/src/config/types.ts
@@ -19,6 +19,7 @@ export type Source = {
 	redis: {
 		host: string;
 		port: number;
+		family?: number;
 		pass: string;
 		db?: number;
 		prefix?: string;
diff --git a/packages/backend/src/db/postgre.ts b/packages/backend/src/db/postgre.ts
index 298f6713ea..904bbb8b7c 100644
--- a/packages/backend/src/db/postgre.ts
+++ b/packages/backend/src/db/postgre.ts
@@ -192,12 +192,13 @@ export const db = new DataSource({
 	synchronize: process.env.NODE_ENV === 'test',
 	dropSchema: process.env.NODE_ENV === 'test',
 	cache: !config.db.disableCache ? {
-		type: 'redis',
+		type: 'ioredis',
 		options: {
 			host: config.redis.host,
 			port: config.redis.port,
+			family: config.redis.family == null ? 0 : config.redis.family,
 			password: config.redis.pass,
-			prefix: `${config.redis.prefix}:query:`,
+			keyPrefix: `${config.redis.prefix}:query:`,
 			db: config.redis.db || 0,
 		},
 	} : false,
@@ -226,7 +227,7 @@ export async function initDb(force = false) {
 
 export async function resetDb() {
 	const reset = async () => {
-		await redisClient.FLUSHDB();
+		await redisClient.flushdb();
 		const tables = await db.query(`SELECT relname AS "table"
 		FROM pg_class C LEFT JOIN pg_namespace N ON (N.oid = C.relnamespace)
 		WHERE nspname NOT IN ('pg_catalog', 'information_schema')
diff --git a/packages/backend/src/db/redis.ts b/packages/backend/src/db/redis.ts
index 9346041456..49f5bb2ba8 100644
--- a/packages/backend/src/db/redis.ts
+++ b/packages/backend/src/db/redis.ts
@@ -1,16 +1,15 @@
-import * as redis from 'redis';
+import Redis from 'ioredis';
 import config from '@/config/index.js';
 
 export function createConnection() {
-	return redis.createClient(
-		config.redis.port,
-		config.redis.host,
-		{
-			password: config.redis.pass,
-			prefix: config.redis.prefix,
-			db: config.redis.db || 0,
-		}
-	);
+	return new Redis({
+		port: config.redis.port,
+		host: config.redis.host,
+		family: config.redis.family == null ? 0 : config.redis.family,
+		password: config.redis.pass,
+		keyPrefix: `${config.redis.prefix}:`,
+		db: config.redis.db || 0,
+	});
 }
 
 export const subsdcriber = createConnection();
diff --git a/packages/backend/src/queue/initialize.ts b/packages/backend/src/queue/initialize.ts
index 1db118ca9f..eef4080af3 100644
--- a/packages/backend/src/queue/initialize.ts
+++ b/packages/backend/src/queue/initialize.ts
@@ -6,6 +6,7 @@ export function initialize<T>(name: string, limitPerSec = -1) {
 		redis: {
 			port: config.redis.port,
 			host: config.redis.host,
+			family: config.redis.family == null ? 0 : config.redis.family,
 			password: config.redis.pass,
 			db: config.redis.db || 0,
 		},
diff --git a/packages/backend/src/server/api/endpoints/admin/server-info.ts b/packages/backend/src/server/api/endpoints/admin/server-info.ts
index 9c150420b1..85c6fb82e7 100644
--- a/packages/backend/src/server/api/endpoints/admin/server-info.ts
+++ b/packages/backend/src/server/api/endpoints/admin/server-info.ts
@@ -99,12 +99,16 @@ export default define(meta, paramDef, async () => {
 	const fsStats = await si.fsSize();
 	const netInterface = await si.networkInterfaceDefault();
 
+	const redisServerInfo = await redisClient.info('Server');
+	const m = redisServerInfo.match(new RegExp('^redis_version:(.*)', 'm'));
+	const redis_version = m?.[1];
+
 	return {
 		machine: os.hostname(),
 		os: os.platform(),
 		node: process.version,
 		psql: await db.query('SHOW server_version').then(x => x[0].server_version),
-		redis: redisClient.server_info.redis_version,
+		redis: redis_version,
 		cpu: {
 			model: os.cpus()[0].model,
 			cores: os.cpus().length,
diff --git a/packages/backend/yarn.lock b/packages/backend/yarn.lock
index 4c89fdf050..aa134183a9 100644
--- a/packages/backend/yarn.lock
+++ b/packages/backend/yarn.lock
@@ -2227,11 +2227,6 @@ denque@^1.1.0:
   resolved "https://registry.yarnpkg.com/denque/-/denque-1.4.1.tgz#6744ff7641c148c3f8a69c307e51235c1f4a37cf"
   integrity sha512-OfzPuSZKGcgr96rf1oODnfjqBFmr1DVoc/TrItj3Ohe0Ah1C5WX5Baquw/9U9KovnQ88EqmJbD66rKYUQYN1tQ==
 
-denque@^1.5.0:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/denque/-/denque-1.5.0.tgz#773de0686ff2d8ec2ff92914316a47b73b1c73de"
-  integrity sha512-CYiCSgIF1p6EUByQPlGkKnP1M9g0ZV3qMIrqMqZqdwazygIA/YP2vrbcyl1h/WppKJTdl1F85cXIle+394iDAQ==
-
 depd@^1.1.2, depd@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9"
@@ -3581,7 +3576,7 @@ internal-slot@^1.0.3:
     has "^1.0.3"
     side-channel "^1.0.4"
 
-ioredis@^4.28.5:
+ioredis@4.28.5, ioredis@^4.28.5:
   version "4.28.5"
   resolved "https://registry.yarnpkg.com/ioredis/-/ioredis-4.28.5.tgz#5c149e6a8d76a7f8fa8a504ffc85b7d5b6797f9f"
   integrity sha512-3GYo0GJtLqgNXj4YhrisLaNNvWSNwSS2wS4OELGfGxH8I69+XfNdnmV1AyN+ZqMh0i7eX+SWjrwFKDBDgfBC1A==
@@ -5805,7 +5800,7 @@ reconnecting-websocket@^4.4.0:
   resolved "https://registry.yarnpkg.com/reconnecting-websocket/-/reconnecting-websocket-4.4.0.tgz#3b0e5b96ef119e78a03135865b8bb0af1b948783"
   integrity sha512-D2E33ceRPga0NvTDhJmphEgJ7FUYF0v4lr1ki0csq06OdlxKfugGzN0dSkxM/NfqCxYELK4KcaTOUOjTV6Dcng==
 
-redis-commands@1.7.0, redis-commands@^1.7.0:
+redis-commands@1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/redis-commands/-/redis-commands-1.7.0.tgz#15a6fea2d58281e27b1cd1acfb4b293e278c3a89"
   integrity sha512-nJWqw3bTFy21hX/CPKHth6sfhZbdiHP6bTawSgQBlKOVRG7EZkfHbbHwQJnrE4vsQf0CMNE+3gJ4Fmm16vdVlQ==
@@ -5845,16 +5840,6 @@ redis@*:
     "@node-redis/search" "^1.0.2"
     "@node-redis/time-series" "^1.0.1"
 
-redis@3.1.2:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/redis/-/redis-3.1.2.tgz#766851117e80653d23e0ed536254677ab647638c"
-  integrity sha512-grn5KoZLr/qrRQVwoSkmzdbw6pwF+/rwODtrOr6vuBRiR/f3rjSTGupbF90Zpqm2oenix8Do6RV7pYEkGwlKkw==
-  dependencies:
-    denque "^1.5.0"
-    redis-commands "^1.7.0"
-    redis-errors "^1.2.0"
-    redis-parser "^3.0.0"
-
 reflect-metadata@0.1.13, reflect-metadata@^0.1.13:
   version "0.1.13"
   resolved "https://registry.yarnpkg.com/reflect-metadata/-/reflect-metadata-0.1.13.tgz#67ae3ca57c972a2aa1642b10fe363fe32d49dc08"

From a5241379afa71381bf23b59f6e3066cb934b9fe8 Mon Sep 17 00:00:00 2001
From: Johann150 <johann.galle@protonmail.com>
Date: Fri, 24 Jun 2022 12:44:22 +0200
Subject: [PATCH 41/90] fix lints

---
 packages/backend/src/misc/check-word-mute.ts       | 2 +-
 packages/backend/src/remote/activitypub/type.ts    | 2 +-
 packages/backend/src/server/api/define.ts          | 1 -
 packages/backend/src/services/note/polls/update.ts | 1 -
 packages/client/src/scripts/check-word-mute.ts     | 2 +-
 5 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/packages/backend/src/misc/check-word-mute.ts b/packages/backend/src/misc/check-word-mute.ts
index 015a368dfd..d7662820af 100644
--- a/packages/backend/src/misc/check-word-mute.ts
+++ b/packages/backend/src/misc/check-word-mute.ts
@@ -18,7 +18,7 @@ export async function checkWordMute(note: NoteLike, me: UserLike | null | undefi
 	if (mutedWords.length > 0) {
 		const text = ((note.cw ?? '') + '\n' + (note.text ?? '')).trim();
 
-		if (text == '') return false;
+		if (text === '') return false;
 
 		const matched = mutedWords.some(filter => {
 			if (Array.isArray(filter)) {
diff --git a/packages/backend/src/remote/activitypub/type.ts b/packages/backend/src/remote/activitypub/type.ts
index 5d00481b75..de7eb0ed83 100644
--- a/packages/backend/src/remote/activitypub/type.ts
+++ b/packages/backend/src/remote/activitypub/type.ts
@@ -201,7 +201,7 @@ export interface IApMention extends IObject {
 	href: string;
 }
 
-export const isMention = (object: IObject): object is IApMention=>
+export const isMention = (object: IObject): object is IApMention =>
 	getApType(object) === 'Mention' &&
 	typeof object.href === 'string';
 
diff --git a/packages/backend/src/server/api/define.ts b/packages/backend/src/server/api/define.ts
index 1529894341..47dcb44ea8 100644
--- a/packages/backend/src/server/api/define.ts
+++ b/packages/backend/src/server/api/define.ts
@@ -21,7 +21,6 @@ ajv.addFormat('misskey:id', /^[a-zA-Z0-9]+$/);
 
 export default function <T extends IEndpointMeta, Ps extends Schema>(meta: T, paramDef: Ps, cb: executor<T, Ps>)
 		: (params: any, user: T['requireCredential'] extends true ? CacheableLocalUser : CacheableLocalUser | null, token: AccessToken | null, file?: any) => Promise<any> {
-
 	const validate = ajv.compile(paramDef);
 
 	return (params: any, user: T['requireCredential'] extends true ? CacheableLocalUser : CacheableLocalUser | null, token: AccessToken | null, file?: any) => {
diff --git a/packages/backend/src/services/note/polls/update.ts b/packages/backend/src/services/note/polls/update.ts
index 43ca3eff4d..68cbb9835a 100644
--- a/packages/backend/src/services/note/polls/update.ts
+++ b/packages/backend/src/services/note/polls/update.ts
@@ -14,7 +14,6 @@ export async function deliverQuestionUpdate(noteId: Note['id']) {
 	if (user == null) throw new Error('note not found');
 
 	if (Users.isLocalUser(user)) {
-
 		const content = renderActivity(renderUpdate(await renderNote(note, false), user));
 		deliverToFollowers(user, content);
 		deliverToRelays(user, content);
diff --git a/packages/client/src/scripts/check-word-mute.ts b/packages/client/src/scripts/check-word-mute.ts
index aafdd8920a..35d40a6e08 100644
--- a/packages/client/src/scripts/check-word-mute.ts
+++ b/packages/client/src/scripts/check-word-mute.ts
@@ -5,7 +5,7 @@ export function checkWordMute(note: Record<string, any>, me: Record<string, any>
 	if (mutedWords.length > 0) {
 		const text = ((note.cw ?? '') + '\n' + (note.text ?? '')).trim();
 
-		if (text == '') return false;
+		if (text === '') return false;
 
 		const matched = mutedWords.some(filter => {
 			if (Array.isArray(filter)) {

From a1449455a24f2c191f11e0cdeab0034a58ae6d14 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Fri, 24 Jun 2022 19:47:38 +0900
Subject: [PATCH 42/90] chore(client): tweak mini-chart rendering

---
 packages/client/src/components/mini-chart.vue | 20 +++++--------------
 1 file changed, 5 insertions(+), 15 deletions(-)

diff --git a/packages/client/src/components/mini-chart.vue b/packages/client/src/components/mini-chart.vue
index 34acb766af..5e842b1975 100644
--- a/packages/client/src/components/mini-chart.vue
+++ b/packages/client/src/components/mini-chart.vue
@@ -2,21 +2,13 @@
 <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>
-			<stop offset="100%" :stop-color="colorAlpha"></stop>
+			<stop offset="0%" :stop-color="color" stop-opacity="0"></stop>
+			<stop offset="100%" :stop-color="color" stop-opacity="0.65"></stop>
 		</linearGradient>
-		<mask :id="maskId" x="0" y="0" :width="viewBoxX" :height="viewBoxY">
-			<polygon
-				:points="polygonPoints"
-				fill="#fff"
-				fill-opacity="0.5"
-			/>
-		</mask>
 	</defs>
-	<rect
-		x="-10" y="-10"
-		:width="viewBoxX + 20" :height="viewBoxY + 20"
-		:style="`stroke: none; fill: url(#${ gradientId }); mask: url(#${ maskId })`"
+	<polygon
+		:points="polygonPoints"
+		:style="`stroke: none; fill: url(#${ gradientId });`"
 	/>
 	<polyline
 		:points="polylinePoints"
@@ -45,7 +37,6 @@ const props = defineProps<{
 const viewBoxX = 50;
 const viewBoxY = 50;
 const gradientId = uuid();
-const maskId = uuid();
 let polylinePoints = $ref('');
 let polygonPoints = $ref('');
 let headX = $ref<number | null>(null);
@@ -53,7 +44,6 @@ let headY = $ref<number | null>(null);
 let clock = $ref<number | null>(null);
 const accent = tinycolor(getComputedStyle(document.documentElement).getPropertyValue('--accent'));
 const color = accent.toRgbString();
-const colorAlpha = accent.clone().setAlpha(1).toRgbString();
 
 function draw(): void {
 	const stats = props.src.slice().reverse();

From bf4726f91d8ce6977b6e05219816238811931e99 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Fri, 24 Jun 2022 21:16:05 +0900
Subject: [PATCH 43/90] =?UTF-8?q?fix(client):=20=E3=83=AD=E3=82=B0?=
 =?UTF-8?q?=E3=82=A2=E3=82=A6=E3=83=88=E3=81=A7=E3=81=8D=E3=81=AA=E3=81=84?=
 =?UTF-8?q?=E5=95=8F=E9=A1=8C=E3=82=92=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/client/src/account.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/client/src/account.ts b/packages/client/src/account.ts
index 2b07dd1990..eb2ba0a1e1 100644
--- a/packages/client/src/account.ts
+++ b/packages/client/src/account.ts
@@ -24,6 +24,8 @@ export async function signout() {
 
 	await removeAccount($i.id);
 
+	const accounts = await getAccounts();
+
 	//#region Remove service worker registration
 	try {
 		if (navigator.serviceWorker.controller) {

From 905d8625f831d2080b339aaff159440a4c279004 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Fri, 24 Jun 2022 21:19:38 +0900
Subject: [PATCH 44/90] =?UTF-8?q?fix(client):=20=E3=82=A2=E3=82=AB?=
 =?UTF-8?q?=E3=82=A6=E3=83=B3=E3=83=88=E4=BD=9C=E6=88=90=E3=83=95=E3=82=A9?=
 =?UTF-8?q?=E3=83=BC=E3=83=A0=E3=81=A7=E3=82=A8=E3=83=A9=E3=83=BC=E3=81=8C?=
 =?UTF-8?q?=E5=87=BA=E3=82=8B=E5=95=8F=E9=A1=8C=E3=82=92=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/client/src/components/signup.vue | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/client/src/components/signup.vue b/packages/client/src/components/signup.vue
index 3f2af306e5..a1327e1a1c 100644
--- a/packages/client/src/components/signup.vue
+++ b/packages/client/src/components/signup.vue
@@ -67,12 +67,12 @@
 
 <script lang="ts">
 import { defineComponent, defineAsyncComponent } from 'vue';
-const getPasswordStrength = await import('syuilo-password-strength');
+import getPasswordStrength from 'syuilo-password-strength';
 import { toUnicode } from 'punycode/';
-import { host, url } from '@/config';
 import MkButton from './ui/button.vue';
 import MkInput from './form/input.vue';
 import MkSwitch from './form/switch.vue';
+import { host, url } from '@/config';
 import * as os from '@/os';
 import { login } from '@/account';
 
@@ -89,7 +89,7 @@ export default defineComponent({
 			type: Boolean,
 			required: false,
 			default: false,
-		}
+		},
 	},
 
 	emits: ['signup'],
@@ -132,7 +132,7 @@ export default defineComponent({
 				this.usernameState !== 'invalid-format' &&
 				this.usernameState !== 'min-range' &&
 				this.usernameState !== 'max-range');
-		}
+		},
 	},
 
 	methods: {
@@ -156,7 +156,7 @@ export default defineComponent({
 			this.usernameState = 'wait';
 
 			os.api('username/available', {
-				username: this.username
+				username: this.username,
 			}).then(result => {
 				this.usernameState = result.available ? 'ok' : 'unavailable';
 			}).catch(err => {
@@ -173,7 +173,7 @@ export default defineComponent({
 			this.emailState = 'wait';
 
 			os.api('email-address/available', {
-				emailAddress: this.email
+				emailAddress: this.email,
 			}).then(result => {
 				this.emailState = result.available ? 'ok' :
 					result.reason === 'used' ? 'unavailable:used' :
@@ -228,7 +228,7 @@ export default defineComponent({
 				} else {
 					os.api('signin', {
 						username: this.username,
-						password: this.password
+						password: this.password,
 					}).then(res => {
 						this.$emit('signup', res);
 
@@ -244,11 +244,11 @@ export default defineComponent({
 
 				os.alert({
 					type: 'error',
-					text: this.$ts.somethingHappened
+					text: this.$ts.somethingHappened,
 				});
 			});
-		}
-	}
+		},
+	},
 });
 </script>
 

From 696e8add005837481bc40fb3cd7cb9392439e0ac Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Fri, 24 Jun 2022 21:43:28 +0900
Subject: [PATCH 45/90] =?UTF-8?q?feat:=20=E7=AE=A1=E7=90=86=E8=80=85?=
 =?UTF-8?q?=E3=81=8C=E7=89=B9=E5=AE=9A=E3=83=A6=E3=83=BC=E3=82=B6=E3=83=BC?=
 =?UTF-8?q?=E3=81=AE=E3=82=A2=E3=83=83=E3=83=97=E3=83=AD=E3=83=BC=E3=83=89?=
 =?UTF-8?q?=E3=81=97=E3=81=9F=E3=83=95=E3=82=A1=E3=82=A4=E3=83=AB=E4=B8=80?=
 =?UTF-8?q?=E8=A6=A7=E3=82=92=E8=A6=8B=E3=82=8C=E3=82=8B=E3=82=88=E3=81=86?=
 =?UTF-8?q?=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md                                  |  2 +-
 .../server/api/endpoints/admin/drive/files.ts | 23 +++--
 .../src/components/file-list-for-admin.vue    | 93 +++++++++++++++++++
 packages/client/src/pages/admin/files.vue     | 82 ++--------------
 packages/client/src/pages/user-info.vue       | 19 +++-
 5 files changed, 133 insertions(+), 86 deletions(-)
 create mode 100644 packages/client/src/components/file-list-for-admin.vue

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3dc75e6f92..bc3e1a4223 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -13,7 +13,7 @@ You should also include the user name that made the change.
 
 ### Improvements
 - Server: Add rate limit to i/notifications @tamaina
-- Client: Improve files page of control panel @syuilo
+- Client: Improve control panel @syuilo
 - Client: Show warning in control panel when there is an unresolved abuse report @syuilo
 - Improve player detection in URL preview @mei23
 - Add Badge Image to Push Notification #8012 @tamaina
diff --git a/packages/backend/src/server/api/endpoints/admin/drive/files.ts b/packages/backend/src/server/api/endpoints/admin/drive/files.ts
index 119c4db19b..ba32aac431 100644
--- a/packages/backend/src/server/api/endpoints/admin/drive/files.ts
+++ b/packages/backend/src/server/api/endpoints/admin/drive/files.ts
@@ -1,5 +1,5 @@
-import define from '../../../define.js';
 import { DriveFiles } from '@/models/index.js';
+import define from '../../../define.js';
 import { makePaginationQuery } from '../../../common/make-pagination-query.js';
 
 export const meta = {
@@ -25,8 +25,9 @@ export const paramDef = {
 		limit: { type: 'integer', minimum: 1, maximum: 100, default: 10 },
 		sinceId: { type: 'string', format: 'misskey:id' },
 		untilId: { type: 'string', format: 'misskey:id' },
+		userId: { type: 'string', format: 'misskey:id', nullable: true },
 		type: { type: 'string', nullable: true, pattern: /^[a-zA-Z0-9\/\-*]+$/.toString().slice(1, -1) },
-		origin: { type: 'string', enum: ['combined', 'local', 'remote'], default: "local" },
+		origin: { type: 'string', enum: ['combined', 'local', 'remote'], default: 'local' },
 		hostname: {
 			type: 'string',
 			nullable: true,
@@ -41,14 +42,18 @@ export const paramDef = {
 export default define(meta, paramDef, async (ps, me) => {
 	const query = makePaginationQuery(DriveFiles.createQueryBuilder('file'), ps.sinceId, ps.untilId);
 
-	if (ps.origin === 'local') {
-		query.andWhere('file.userHost IS NULL');
-	} else if (ps.origin === 'remote') {
-		query.andWhere('file.userHost IS NOT NULL');
-	}
+	if (ps.userId) {
+		query.andWhere('file.userId = :userId', { userId: ps.userId });
+	} else {
+		if (ps.origin === 'local') {
+			query.andWhere('file.userHost IS NULL');
+		} else if (ps.origin === 'remote') {
+			query.andWhere('file.userHost IS NOT NULL');
+		}
 
-	if (ps.hostname) {
-		query.andWhere('file.userHost = :hostname', { hostname: ps.hostname });
+		if (ps.hostname) {
+			query.andWhere('file.userHost = :hostname', { hostname: ps.hostname });
+		}
 	}
 
 	if (ps.type) {
diff --git a/packages/client/src/components/file-list-for-admin.vue b/packages/client/src/components/file-list-for-admin.vue
new file mode 100644
index 0000000000..992b41a4fc
--- /dev/null
+++ b/packages/client/src/components/file-list-for-admin.vue
@@ -0,0 +1,93 @@
+<template>
+<div>
+	<MkPagination v-slot="{items}" :pagination="pagination" class="urempief" :class="{ grid: viewMode === 'grid' }">
+		<button 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'}`" class="file _button">
+			<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>{{ $ts.system }}</div>
+				</div>
+				<div>
+					<span style="margin-right: 1em;">{{ file.type }}</span>
+					<span>{{ bytes(file.size) }}</span>
+				</div>
+				<div>
+					<span>{{ $ts.registeredDate }}: <MkTime :time="file.createdAt" mode="detail"/></span>
+				</div>
+			</div>
+		</button>
+	</MkPagination>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import * as Acct from 'misskey-js/built/acct';
+import MkSwitch from '@/components/ui/switch.vue';
+import MkPagination from '@/components/ui/pagination.vue';
+import MkDriveFileThumbnail from '@/components/drive-file-thumbnail.vue';
+import bytes from '@/filters/bytes';
+import * as os from '@/os';
+import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
+
+const props = defineProps<{
+	pagination: any;
+	viewMode: 'grid' | 'list';
+}>();
+</script>
+
+<style lang="scss" scoped>
+.urempief {
+	margin-top: var(--margin);
+
+	&.list {
+		> .file {
+			display: flex;
+			width: 100%;
+			box-sizing: border-box;
+			text-align: left;
+			align-items: center;
+
+			&:hover {
+				color: var(--accent);
+			}
+
+			> .thumbnail {
+				width: 128px;
+				height: 128px;
+			}
+
+			> .body {
+				margin-left: 0.3em;
+				padding: 8px;
+				flex: 1;
+
+				@media (max-width: 500px) {
+					font-size: 14px;
+				}
+			}
+		}
+	}
+
+	&.grid {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+		grid-gap: 12px;
+		margin: var(--margin) 0;
+
+		> .file {
+			aspect-ratio: 1;
+		
+			> .thumbnail {
+				width: 100%;
+				height: 100%;
+			}
+		}
+	}
+}
+</style>
diff --git a/packages/client/src/pages/admin/files.vue b/packages/client/src/pages/admin/files.vue
index 18bf4f9a8c..1d037fc4e4 100644
--- a/packages/client/src/pages/admin/files.vue
+++ b/packages/client/src/pages/admin/files.vue
@@ -16,32 +16,15 @@
 							<template #label>{{ $ts.host }}</template>
 						</MkInput>
 					</div>
-					<div class="inputs" style="display: flex; padding-top: 1.2em;">
+					<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>
-					<MkPagination v-slot="{items}" :pagination="pagination" class="urempief" :class="{ grid: viewMode === 'grid' }">
-						<button 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'}`" class="file _button" @click="show(file, $event)">
-							<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>{{ $ts.system }}</div>
-								</div>
-								<div>
-									<span style="margin-right: 1em;">{{ file.type }}</span>
-									<span>{{ bytes(file.size) }}</span>
-								</div>
-								<div>
-									<span>{{ $ts.registeredDate }}: <MkTime :time="file.createdAt" mode="detail"/></span>
-								</div>
-							</div>
-						</button>
-					</MkPagination>
+					<MkFileListForAdmin :pagination="pagination" :view-mode="viewMode"/>
 				</div>
 			</div>
 		</MkSpacer>
@@ -56,9 +39,7 @@ import XHeader from './_header_.vue';
 import MkButton from '@/components/ui/button.vue';
 import MkInput from '@/components/form/input.vue';
 import MkSelect from '@/components/form/select.vue';
-import MkPagination from '@/components/ui/pagination.vue';
-import MkContainer from '@/components/ui/container.vue';
-import MkDriveFileThumbnail from '@/components/drive-file-thumbnail.vue';
+import MkFileListForAdmin from '@/components/file-list-for-admin.vue';
 import bytes from '@/filters/bytes';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
@@ -67,12 +48,14 @@ import { definePageMetadata } from '@/scripts/page-metadata';
 let origin = $ref('local');
 let type = $ref(null);
 let searchHost = $ref('');
+let userId = $ref('');
 let viewMode = $ref('grid');
 const pagination = {
 	endpoint: 'admin/drive/files' as const,
 	limit: 10,
 	params: computed(() => ({
 		type: (type && type !== '') ? type : null,
+		userId: (userId && userId !== '') ? userId : null,
 		origin: origin,
 		hostname: (searchHost && searchHost !== '') ? searchHost : null,
 	})),
@@ -134,54 +117,5 @@ definePageMetadata(computed(() => ({
 <style lang="scss" scoped>
 .xrmjdkdw {
 	margin: var(--margin);
-
-	.urempief {
-		margin-top: var(--margin);
-
-		&.list {
-			> .file {
-				display: flex;
-				width: 100%;
-				box-sizing: border-box;
-				text-align: left;
-				align-items: center;
-
-				&:hover {
-					color: var(--accent);
-				}
-
-				> .thumbnail {
-					width: 128px;
-					height: 128px;
-				}
-
-				> .body {
-					margin-left: 0.3em;
-					padding: 8px;
-					flex: 1;
-
-					@media (max-width: 500px) {
-						font-size: 14px;
-					}
-				}
-			}
-		}
-
-		&.grid {
-			display: grid;
-			grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
-			grid-gap: 12px;
-			margin: var(--margin) 0;
-
-			> .file {
-				aspect-ratio: 1;
-			
-				> .thumbnail {
-					width: 100%;
-					height: 100%;
-				}
-			}
-		}
-	}
 }
 </style>
diff --git a/packages/client/src/pages/user-info.vue b/packages/client/src/pages/user-info.vue
index cc187b9df3..b4c4aedfcd 100644
--- a/packages/client/src/pages/user-info.vue
+++ b/packages/client/src/pages/user-info.vue
@@ -76,6 +76,9 @@
 					</div>
 				</div>
 			</div>
+			<div v-else-if="tab === 'files'" class="_formRoot">
+				<MkFileListForAdmin :pagination="filesPagination" view-mode="grid"/>
+			</div>
 			<div v-else-if="tab === 'ap'" class="_formRoot">
 				<MkObjectView v-if="ap" tall :value="user">
 				</MkObjectView>
@@ -105,6 +108,7 @@ import FormButton from '@/components/ui/button.vue';
 import MkKeyValue from '@/components/key-value.vue';
 import MkSelect from '@/components/form/select.vue';
 import FormSuspense from '@/components/form/suspense.vue';
+import MkFileListForAdmin from '@/components/file-list-for-admin.vue';
 import * as os from '@/os';
 import number from '@/filters/number';
 import bytes from '@/filters/bytes';
@@ -127,6 +131,13 @@ let ap = $ref(null);
 let moderator = $ref(false);
 let silenced = $ref(false);
 let suspended = $ref(false);
+const filesPagination = {
+	endpoint: 'admin/drive/files' as const,
+	limit: 10,
+	params: computed(() => ({
+		userId: props.userId,
+	})),
+};
 
 function createFetcher() {
 	if (iAmModerator) {
@@ -244,7 +255,11 @@ const headerTabs = $computed(() => [{
 	key: 'chart',
 	title: i18n.ts.charts,
 	icon: 'fas fa-chart-simple',
-}, {
+}, iAmModerator ? {
+	key: 'files',
+	title: i18n.ts.files,
+	icon: 'fas fa-cloud',
+} : null, {
 	key: 'ap',
 	title: 'AP',
 	icon: 'fas fa-share-alt',
@@ -252,7 +267,7 @@ const headerTabs = $computed(() => [{
 	key: 'raw',
 	title: 'Raw data',
 	icon: 'fas fa-code',
-}]);
+}].filter(x => x != null));
 
 definePageMetadata(computed(() => ({
 	title: user ? acct(user) : i18n.ts.userInfo,

From 1e8d84dbfa25a8702aa95c2f2b97144ee6c97676 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Fri, 24 Jun 2022 21:46:49 +0900
Subject: [PATCH 46/90] refactor: remove unused import

---
 packages/client/src/components/file-list-for-admin.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/client/src/components/file-list-for-admin.vue b/packages/client/src/components/file-list-for-admin.vue
index 992b41a4fc..80e0883b66 100644
--- a/packages/client/src/components/file-list-for-admin.vue
+++ b/packages/client/src/components/file-list-for-admin.vue
@@ -33,7 +33,6 @@ import MkDriveFileThumbnail from '@/components/drive-file-thumbnail.vue';
 import bytes from '@/filters/bytes';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
 
 const props = defineProps<{
 	pagination: any;

From 1b2bd893834225797947d52e9118f8feb0112a8f Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Fri, 24 Jun 2022 21:48:54 +0900
Subject: [PATCH 47/90] fix bug

---
 .../client/src/components/file-list-for-admin.vue     | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/client/src/components/file-list-for-admin.vue b/packages/client/src/components/file-list-for-admin.vue
index 80e0883b66..4a89463267 100644
--- a/packages/client/src/components/file-list-for-admin.vue
+++ b/packages/client/src/components/file-list-for-admin.vue
@@ -1,7 +1,14 @@
 <template>
 <div>
 	<MkPagination v-slot="{items}" :pagination="pagination" class="urempief" :class="{ grid: viewMode === 'grid' }">
-		<button 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'}`" class="file _button">
+		<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}`"
+			behavior="window"
+			class="file _button"
+		>
 			<MkDriveFileThumbnail class="thumbnail" :file="file" fit="contain"/>
 			<div v-if="viewMode === 'list'" class="body">
 				<div>
@@ -19,7 +26,7 @@
 					<span>{{ $ts.registeredDate }}: <MkTime :time="file.createdAt" mode="detail"/></span>
 				</div>
 			</div>
-		</button>
+		</MkA>
 	</MkPagination>
 </div>
 </template>

From 03973654b51593ddcd89355a8dd49eb61a553657 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Fri, 24 Jun 2022 23:49:47 +0900
Subject: [PATCH 48/90] chore(client): improve usability

---
 packages/client/src/components/abuse-report.vue        | 2 +-
 packages/client/src/components/file-list-for-admin.vue | 1 -
 packages/client/src/pages/admin-file.vue               | 2 +-
 packages/client/src/pages/admin/users.vue              | 2 +-
 packages/client/src/pages/federation.vue               | 2 +-
 5 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/client/src/components/abuse-report.vue b/packages/client/src/components/abuse-report.vue
index e8ab6f600e..2b89eef85a 100644
--- a/packages/client/src/components/abuse-report.vue
+++ b/packages/client/src/components/abuse-report.vue
@@ -1,7 +1,7 @@
 <template>
 <div class="bcekxzvu _gap _panel">
 	<div class="target">
-		<MkA v-user-preview="report.targetUserId" class="info" :to="`/user-info/${report.targetUserId}`" :behavior="'window'">
+		<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"/>
diff --git a/packages/client/src/components/file-list-for-admin.vue b/packages/client/src/components/file-list-for-admin.vue
index 4a89463267..04427de453 100644
--- a/packages/client/src/components/file-list-for-admin.vue
+++ b/packages/client/src/components/file-list-for-admin.vue
@@ -6,7 +6,6 @@
 			: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}`"
-			behavior="window"
 			class="file _button"
 		>
 			<MkDriveFileThumbnail class="thumbnail" :file="file" fit="contain"/>
diff --git a/packages/client/src/pages/admin-file.vue b/packages/client/src/pages/admin-file.vue
index 1a8092322c..67ebdd4678 100644
--- a/packages/client/src/pages/admin-file.vue
+++ b/packages/client/src/pages/admin-file.vue
@@ -28,7 +28,7 @@
 					<template #value><span class="_monospace"><MkTime :time="file.createdAt" mode="detail" style="display: block;"/></span></template>
 				</MkKeyValue>
 			</div>
-			<MkA class="user" :to="`/user-info/${file.user.id}`" :behavior="'window'">
+			<MkA class="user" :to="`/user-info/${file.user.id}`">
 				<MkUserCardMini :user="file.user"/>
 			</MkA>
 			<div class="_formBlock">
diff --git a/packages/client/src/pages/admin/users.vue b/packages/client/src/pages/admin/users.vue
index ce377074cc..3b70679a45 100644
--- a/packages/client/src/pages/admin/users.vue
+++ b/packages/client/src/pages/admin/users.vue
@@ -41,7 +41,7 @@
 					</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}`" :behavior="'window'">
+						<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>
diff --git a/packages/client/src/pages/federation.vue b/packages/client/src/pages/federation.vue
index bbd1bd352a..07c5a32bdb 100644
--- a/packages/client/src/pages/federation.vue
+++ b/packages/client/src/pages/federation.vue
@@ -41,7 +41,7 @@
 
 			<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}`" :behavior="'window'">
+					<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>

From 734fe9fd9daf590150a9cfcdbbb1f9f8b93b1a70 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sat, 25 Jun 2022 00:03:59 +0900
Subject: [PATCH 49/90] chore(client): tweak ui

---
 .../src/components/file-list-for-admin.vue    | 24 +++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/packages/client/src/components/file-list-for-admin.vue b/packages/client/src/components/file-list-for-admin.vue
index 04427de453..59256f90c9 100644
--- a/packages/client/src/components/file-list-for-admin.vue
+++ b/packages/client/src/components/file-list-for-admin.vue
@@ -8,6 +8,7 @@
 			:to="`/admin/file/${file.id}`"
 			class="file _button"
 		>
+			<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>
@@ -15,14 +16,14 @@
 				</div>
 				<div>
 					<MkAcct v-if="file.user" :user="file.user"/>
-					<div v-else>{{ $ts.system }}</div>
+					<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>{{ $ts.registeredDate }}: <MkTime :time="file.createdAt" mode="detail"/></span>
+					<span>{{ i18n.ts.registeredDate }}: <MkTime :time="file.createdAt" mode="detail"/></span>
 				</div>
 			</div>
 		</MkA>
@@ -47,6 +48,11 @@ const props = defineProps<{
 </script>
 
 <style lang="scss" scoped>
+@keyframes sensitive-blink {
+	0% { opacity: 1; }
+	50% { opacity: 0; }
+}
+
 .urempief {
 	margin-top: var(--margin);
 
@@ -86,12 +92,26 @@ const props = defineProps<{
 		margin: var(--margin) 0;
 
 		> .file {
+			position: relative;
 			aspect-ratio: 1;
 		
 			> .thumbnail {
 				width: 100%;
 				height: 100%;
 			}
+
+			> .sensitive-label {
+				position: absolute;
+				z-index: 10;
+				top: 8px;
+				left: 8px;
+				padding: 2px 4px;
+				background: #ff0000bf;
+				color: #fff;
+				border-radius: 4px;
+				font-size: 85%;
+				animation: sensitive-blink 1s infinite;
+			}
 		}
 	}
 }

From b2caf821ef666f62eb265054064efd108bcc769d Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sat, 25 Jun 2022 00:06:13 +0900
Subject: [PATCH 50/90] 12.112.0-beta.3

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index a642571b98..6308308766 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "misskey",
-	"version": "12.112.0-beta.2",
+	"version": "12.112.0-beta.3",
 	"codename": "indigo",
 	"repository": {
 		"type": "git",

From 16fda8973805ae3f644a9e7a16279a531aa20da6 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sat, 25 Jun 2022 11:50:19 +0900
Subject: [PATCH 51/90] chore(client): tweak MkKeyValue component

---
 packages/client/src/components/key-value.vue | 48 +++++++-------------
 1 file changed, 16 insertions(+), 32 deletions(-)

diff --git a/packages/client/src/components/key-value.vue b/packages/client/src/components/key-value.vue
index da98abd77c..592c7be593 100644
--- a/packages/client/src/components/key-value.vue
+++ b/packages/client/src/components/key-value.vue
@@ -10,46 +10,27 @@
 </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
+import { } from 'vue';
 import copyToClipboard from '@/scripts/copy-to-clipboard';
 import * as os from '@/os';
 
-export default defineComponent({
-	props: {
-		copy: {
-			type: String,
-			required: false,
-			default: null,
-		},
-		oneline: {
-			type: Boolean,
-			required: false,
-			default: false,
-		},
-	},
-
-	setup(props) {
-		const copy_ = () => {
-			copyToClipboard(props.copy);
-			os.success();
-		};
-
-		return {
-			copy_
-		};
-	},
+const props = withDefaults(defineProps<{
+	copy: string | null;
+	oneline: boolean;
+}>(), {
+	copy: null,
+	oneline: false,
 });
+
+const copy_ = () => {
+	copyToClipboard(props.copy);
+	os.success();
+};
 </script>
 
 <style lang="scss" scoped>
 .alqyeyti {
-	> .key, > .value {
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
-
 	> .key {
 		font-size: 0.85em;
 		padding: 0 0 0.25em 0;
@@ -67,6 +48,9 @@ export default defineComponent({
 
 		> .value {
 			width: 70%;
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
 		}
 	}
 }

From ca5200d1f1d65950009e2b368742c28af7cc3242 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Sat, 25 Jun 2022 13:50:06 +0900
Subject: [PATCH 52/90] chore(deps): bump undici from 5.4.0 to 5.5.1 in
 /packages/backend (#8842)

Bumps [undici](https://github.com/nodejs/undici) from 5.4.0 to 5.5.1.
- [Release notes](https://github.com/nodejs/undici/releases)
- [Commits](https://github.com/nodejs/undici/compare/v5.4.0...v5.5.1)

---
updated-dependencies:
- dependency-name: undici
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 packages/backend/yarn.lock | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/backend/yarn.lock b/packages/backend/yarn.lock
index aa134183a9..9cc0a41af6 100644
--- a/packages/backend/yarn.lock
+++ b/packages/backend/yarn.lock
@@ -6827,9 +6827,9 @@ unbox-primitive@^1.0.1:
     which-boxed-primitive "^1.0.2"
 
 undici@^5.2.0:
-  version "5.4.0"
-  resolved "https://registry.yarnpkg.com/undici/-/undici-5.4.0.tgz#c474fae02743d4788b96118d46008a24195024d2"
-  integrity sha512-A1SRXysDg7J+mVP46jF+9cKANw0kptqSFZ8tGyL+HBiv0K1spjxPX8Z4EGu+Eu6pjClJUBdnUPlxrOafR668/g==
+  version "5.5.1"
+  resolved "https://registry.yarnpkg.com/undici/-/undici-5.5.1.tgz#baaf25844a99eaa0b22e1ef8d205bffe587c8f43"
+  integrity sha512-MEvryPLf18HvlCbLSzCW0U00IMftKGI5udnjrQbC5D4P0Hodwffhv+iGfWuJwg16Y/TK11ZFK8i+BPVW2z/eAw==
 
 unique-filename@^1.1.1:
   version "1.1.1"

From e3461f1b58bac7bd79938a25814a4177c3b2dcfe Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Sat, 25 Jun 2022 13:50:15 +0900
Subject: [PATCH 53/90] chore(deps): bump jpeg-js from 0.4.1 to 0.4.4 in
 /packages/backend (#8843)

Bumps [jpeg-js](https://github.com/eugeneware/jpeg-js) from 0.4.1 to 0.4.4.
- [Release notes](https://github.com/eugeneware/jpeg-js/releases)
- [Commits](https://github.com/eugeneware/jpeg-js/compare/v0.4.1...v0.4.4)

---
updated-dependencies:
- dependency-name: jpeg-js
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 packages/backend/yarn.lock | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/backend/yarn.lock b/packages/backend/yarn.lock
index 9cc0a41af6..1b397966d0 100644
--- a/packages/backend/yarn.lock
+++ b/packages/backend/yarn.lock
@@ -3887,9 +3887,9 @@ jmespath@0.16.0:
   integrity sha512-9FzQjJ7MATs1tSpnco1K6ayiYE3figslrXA72G2HQ/n76RzvYlofyi5QM+iX4YRs/pu3yzxlVQSST23+dMDknw==
 
 jpeg-js@^0.4.1:
-  version "0.4.1"
-  resolved "https://registry.yarnpkg.com/jpeg-js/-/jpeg-js-0.4.1.tgz#937a3ae911eb6427f151760f8123f04c8bfe6ef7"
-  integrity sha512-jA55yJiB5tCXEddos8JBbvW+IMrqY0y1tjjx9KNVtA+QPmu7ND5j0zkKopClpUTsaETL135uOM2XfcYG4XRjmw==
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/jpeg-js/-/jpeg-js-0.4.4.tgz#a9f1c6f1f9f0fa80cdb3484ed9635054d28936aa"
+  integrity sha512-WZzeDOEtTOBK4Mdsar0IqEU5sMr3vSV2RqkAIzUEV2BHnUfKGyswWFPFwK5EeDo93K3FohSHbLAjj0s1Wzd+dg==
 
 js-beautify@^1.6.12:
   version "1.11.0"

From 5728350267faa95e171840b7573d767617ce5491 Mon Sep 17 00:00:00 2001
From: Johann150 <johann.galle@protonmail.com>
Date: Sat, 25 Jun 2022 07:23:59 +0200
Subject: [PATCH 54/90] fix: always respect instance mutes (#8854)

* fix: muted user query also checks instances

This way it can be ensured that the instance mute is used everywhere it
is required without checking the whole codebase again. Muted users and
muted instances should be used together anyways.

* fix lint
---
 .../common/generate-muted-instance-query.ts   | 40 ----------------
 .../api/common/generate-muted-user-query.ts   | 46 +++++++++++++++++--
 .../server/api/endpoints/i/notifications.ts   | 16 +++++--
 .../server/api/endpoints/notes/children.ts    |  8 ++--
 .../api/endpoints/notes/global-timeline.ts    | 12 ++---
 .../api/endpoints/notes/hybrid-timeline.ts    |  8 +---
 .../server/api/endpoints/notes/timeline.ts    |  6 +--
 .../src/server/api/endpoints/users/notes.ts   |  8 ++--
 8 files changed, 71 insertions(+), 73 deletions(-)
 delete mode 100644 packages/backend/src/server/api/common/generate-muted-instance-query.ts

diff --git a/packages/backend/src/server/api/common/generate-muted-instance-query.ts b/packages/backend/src/server/api/common/generate-muted-instance-query.ts
deleted file mode 100644
index 72a6fec68f..0000000000
--- a/packages/backend/src/server/api/common/generate-muted-instance-query.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import { User } from '@/models/entities/user.js';
-import { id } from '@/models/id.js';
-import { UserProfiles } from '@/models/index.js';
-import { SelectQueryBuilder, Brackets } from 'typeorm';
-
-function createMutesQuery(id: string) {
-	return UserProfiles.createQueryBuilder('user_profile')
-		.select('user_profile.mutedInstances')
-		.where('user_profile.userId = :muterId', { muterId: id });
-}
-
-export function generateMutedInstanceQuery(q: SelectQueryBuilder<any>, me: { id: User['id'] }) {
-	const mutingQuery = createMutesQuery(me.id);
-
-	q
-		.andWhere(new Brackets(qb => { qb
-			.andWhere('note.userHost IS NULL')
-			.orWhere(`NOT((${ mutingQuery.getQuery() })::jsonb ? note.userHost)`);
-		}))
-		.andWhere(new Brackets(qb => { qb
-			.where(`note.replyUserHost IS NULL`)
-			.orWhere(`NOT ((${ mutingQuery.getQuery() })::jsonb ? note.replyUserHost)`);
-		}))
-		.andWhere(new Brackets(qb => { qb
-			.where(`note.renoteUserHost IS NULL`)
-			.orWhere(`NOT ((${ mutingQuery.getQuery() })::jsonb ? note.renoteUserHost)`);
-		}));
-	q.setParameters(mutingQuery.getParameters());
-}
-
-export function generateMutedInstanceNotificationQuery(q: SelectQueryBuilder<any>, me: { id: User['id'] }) {
-	const mutingQuery = createMutesQuery(me.id);
-
-	q.andWhere(new Brackets(qb => { qb 
-		.andWhere('notifier.host IS NULL')
-		.orWhere(`NOT (( ${mutingQuery.getQuery()} )::jsonb ? notifier.host)`);
-	}));
-
-	q.setParameters(mutingQuery.getParameters());
-}
diff --git a/packages/backend/src/server/api/common/generate-muted-user-query.ts b/packages/backend/src/server/api/common/generate-muted-user-query.ts
index 79cb3ff894..e276ff2bd5 100644
--- a/packages/backend/src/server/api/common/generate-muted-user-query.ts
+++ b/packages/backend/src/server/api/common/generate-muted-user-query.ts
@@ -1,6 +1,6 @@
-import { User } from '@/models/entities/user.js';
-import { Mutings } from '@/models/index.js';
 import { SelectQueryBuilder, Brackets } from 'typeorm';
+import { User } from '@/models/entities/user.js';
+import { Mutings, UserProfiles } from '@/models/index.js';
 
 export function generateMutedUserQuery(q: SelectQueryBuilder<any>, me: { id: User['id'] }, exclude?: User) {
 	const mutingQuery = Mutings.createQueryBuilder('muting')
@@ -11,21 +11,39 @@ export function generateMutedUserQuery(q: SelectQueryBuilder<any>, me: { id: Use
 		mutingQuery.andWhere('muting.muteeId != :excludeId', { excludeId: exclude.id });
 	}
 
+	const mutingInstanceQuery = UserProfiles.createQueryBuilder('user_profile')
+		.select('user_profile.mutedInstances')
+		.where('user_profile.userId = :muterId', { muterId: me.id });
+
 	// 投稿の作者をミュートしていない かつ
 	// 投稿の返信先の作者をミュートしていない かつ
 	// 投稿の引用元の作者をミュートしていない
 	q
 		.andWhere(`note.userId NOT IN (${ mutingQuery.getQuery() })`)
 		.andWhere(new Brackets(qb => { qb
-			.where(`note.replyUserId IS NULL`)
+			.where('note.replyUserId IS NULL')
 			.orWhere(`note.replyUserId NOT IN (${ mutingQuery.getQuery() })`);
 		}))
 		.andWhere(new Brackets(qb => { qb
-			.where(`note.renoteUserId IS NULL`)
+			.where('note.renoteUserId IS NULL')
 			.orWhere(`note.renoteUserId NOT IN (${ mutingQuery.getQuery() })`);
+		}))
+		// mute instances
+		.andWhere(new Brackets(qb => { qb
+			.andWhere('note.userHost IS NULL')
+			.orWhere(`NOT ((${ mutingInstanceQuery.getQuery() })::jsonb ? note.userHost)`);
+		}))
+		.andWhere(new Brackets(qb => { qb
+			.where('note.replyUserHost IS NULL')
+			.orWhere(`NOT ((${ mutingInstanceQuery.getQuery() })::jsonb ? note.replyUserHost)`);
+		}))
+		.andWhere(new Brackets(qb => { qb
+			.where('note.renoteUserHost IS NULL')
+			.orWhere(`NOT ((${ mutingInstanceQuery.getQuery() })::jsonb ? note.renoteUserHost)`);
 		}));
 
 	q.setParameters(mutingQuery.getParameters());
+	q.setParameters(mutingInstanceQuery.getParameters());
 }
 
 export function generateMutedUserQueryForUsers(q: SelectQueryBuilder<any>, me: { id: User['id'] }) {
@@ -33,8 +51,26 @@ export function generateMutedUserQueryForUsers(q: SelectQueryBuilder<any>, me: {
 		.select('muting.muteeId')
 		.where('muting.muterId = :muterId', { muterId: me.id });
 
+	const mutingInstanceQuery = UserProfiles.createQueryBuilder('user_profile')
+		.select('user_profile.mutedInstances')
+		.where('user_profile.userId = :muterId', { muterId: me.id });
+
 	q
-		.andWhere(`user.id NOT IN (${ mutingQuery.getQuery() })`);
+		.andWhere(`user.id NOT IN (${ mutingQuery.getQuery() })`)
+		// mute instances
+		.andWhere(new Brackets(qb => { qb
+			.andWhere('note.userHost IS NULL')
+			.orWhere(`NOT ((${ mutingInstanceQuery.getQuery() })::jsonb ? note.userHost)`);
+		}))
+		.andWhere(new Brackets(qb => { qb
+			.where('note.replyUserHost IS NULL')
+			.orWhere(`NOT ((${ mutingInstanceQuery.getQuery() })::jsonb ? note.replyUserHost)`);
+		}))
+		.andWhere(new Brackets(qb => { qb
+			.where('note.renoteUserHost IS NULL')
+			.orWhere(`NOT ((${ mutingInstanceQuery.getQuery() })::jsonb ? note.renoteUserHost)`);
+		}));
 
 	q.setParameters(mutingQuery.getParameters());
+	q.setParameters(mutingInstanceQuery.getParameters());
 }
diff --git a/packages/backend/src/server/api/endpoints/i/notifications.ts b/packages/backend/src/server/api/endpoints/i/notifications.ts
index 1c31ce7a68..a2249803ee 100644
--- a/packages/backend/src/server/api/endpoints/i/notifications.ts
+++ b/packages/backend/src/server/api/endpoints/i/notifications.ts
@@ -1,11 +1,10 @@
 import { Brackets } from 'typeorm';
-import { Notifications, Followings, Mutings, Users } from '@/models/index.js';
+import { Notifications, Followings, Mutings, Users, UserProfiles } from '@/models/index.js';
 import { notificationTypes } from '@/types.js';
 import read from '@/services/note/read.js';
 import { readNotification } from '../../common/read-notification.js';
 import define from '../../define.js';
 import { makePaginationQuery } from '../../common/make-pagination-query.js';
-import { generateMutedInstanceNotificationQuery } from '../../common/generate-muted-instance-query.js';
 
 export const meta = {
 	tags: ['account', 'notifications'],
@@ -67,6 +66,10 @@ export default define(meta, paramDef, async (ps, user) => {
 		.select('muting.muteeId')
 		.where('muting.muterId = :muterId', { muterId: user.id });
 
+	const mutingInstanceQuery = UserProfiles.createQueryBuilder('user_profile')
+		.select('user_profile.mutedInstances')
+		.where('user_profile.userId = :muterId', { muterId: user.id });
+
 	const suspendedQuery = Users.createQueryBuilder('users')
 		.select('users.id')
 		.where('users.isSuspended = TRUE');
@@ -89,14 +92,21 @@ export default define(meta, paramDef, async (ps, user) => {
 		.leftJoinAndSelect('renoteUser.avatar', 'renoteUserAvatar')
 		.leftJoinAndSelect('renoteUser.banner', 'renoteUserBanner');
 
+	// muted users
 	query.andWhere(new Brackets(qb => { qb
 		.where(`notification.notifierId NOT IN (${ mutingQuery.getQuery() })`)
 		.orWhere('notification.notifierId IS NULL');
 	}));
 	query.setParameters(mutingQuery.getParameters());
 
-	generateMutedInstanceNotificationQuery(query, user);
+	// muted instances
+	query.andWhere(new Brackets(qb => { qb
+		.andWhere('notifier.host IS NULL')
+		.orWhere(`NOT (( ${mutingInstanceQuery.getQuery()} )::jsonb ? notifier.host)`);
+	}));
+	query.setParameters(mutingInstanceQuery.getParameters());
 
+	// suspended users
 	query.andWhere(new Brackets(qb => { qb
 		.where(`notification.notifierId NOT IN (${ suspendedQuery.getQuery() })`)
 		.orWhere('notification.notifierId IS NULL');
diff --git a/packages/backend/src/server/api/endpoints/notes/children.ts b/packages/backend/src/server/api/endpoints/notes/children.ts
index 50ba293a58..efc109105c 100644
--- a/packages/backend/src/server/api/endpoints/notes/children.ts
+++ b/packages/backend/src/server/api/endpoints/notes/children.ts
@@ -5,7 +5,6 @@ import { makePaginationQuery } from '../../common/make-pagination-query.js';
 import { generateVisibilityQuery } from '../../common/generate-visibility-query.js';
 import { generateMutedUserQuery } from '../../common/generate-muted-user-query.js';
 import { generateBlockedUserQuery } from '../../common/generate-block-query.js';
-import { generateMutedInstanceQuery } from '../../common/generate-muted-instance-query.js';
 
 export const meta = {
 	tags: ['notes'],
@@ -61,9 +60,10 @@ export default define(meta, paramDef, async (ps, user) => {
 		.leftJoinAndSelect('renoteUser.banner', 'renoteUserBanner');
 
 	generateVisibilityQuery(query, user);
-	if (user) generateMutedUserQuery(query, user);
-	if (user) generateBlockedUserQuery(query, user);
-	if (user) generateMutedInstanceQuery(query, user);
+	if (user) {
+		generateMutedUserQuery(query, user);
+		generateBlockedUserQuery(query, user);
+	}
 
 	const notes = await query.take(ps.limit).getMany();
 
diff --git a/packages/backend/src/server/api/endpoints/notes/global-timeline.ts b/packages/backend/src/server/api/endpoints/notes/global-timeline.ts
index 418fc62c31..925318f544 100644
--- a/packages/backend/src/server/api/endpoints/notes/global-timeline.ts
+++ b/packages/backend/src/server/api/endpoints/notes/global-timeline.ts
@@ -1,11 +1,10 @@
 import { fetchMeta } from '@/misc/fetch-meta.js';
-import { Notes, Users } from '@/models/index.js';
+import { Notes } from '@/models/index.js';
 import { activeUsersChart } from '@/services/chart/index.js';
 import define from '../../define.js';
 import { ApiError } from '../../error.js';
 import { makePaginationQuery } from '../../common/make-pagination-query.js';
 import { generateMutedUserQuery } from '../../common/generate-muted-user-query.js';
-import { generateMutedInstanceQuery } from '../../common/generate-muted-instance-query.js';
 import { generateRepliesQuery } from '../../common/generate-replies-query.js';
 import { generateMutedNoteQuery } from '../../common/generate-muted-note-query.js';
 import { generateBlockedUserQuery } from '../../common/generate-block-query.js';
@@ -76,10 +75,11 @@ export default define(meta, paramDef, async (ps, user) => {
 		.leftJoinAndSelect('renoteUser.banner', 'renoteUserBanner');
 
 	generateRepliesQuery(query, user);
-	if (user) generateMutedUserQuery(query, user);
-	if (user) generateMutedNoteQuery(query, user);
-	if (user) generateBlockedUserQuery(query, user);
-	if (user) generateMutedInstanceQuery(query, user);
+	if (user) {
+		generateMutedUserQuery(query, user);
+		generateMutedNoteQuery(query, user);
+		generateBlockedUserQuery(query, user);
+	}
 
 	if (ps.withFiles) {
 		query.andWhere('note.fileIds != \'{}\'');
diff --git a/packages/backend/src/server/api/endpoints/notes/hybrid-timeline.ts b/packages/backend/src/server/api/endpoints/notes/hybrid-timeline.ts
index 52ee817997..2dc98c4c9f 100644
--- a/packages/backend/src/server/api/endpoints/notes/hybrid-timeline.ts
+++ b/packages/backend/src/server/api/endpoints/notes/hybrid-timeline.ts
@@ -1,13 +1,12 @@
 import { Brackets } from 'typeorm';
 import { fetchMeta } from '@/misc/fetch-meta.js';
-import { Followings, Notes, Users } from '@/models/index.js';
+import { Followings, Notes } from '@/models/index.js';
 import { activeUsersChart } from '@/services/chart/index.js';
 import define from '../../define.js';
 import { ApiError } from '../../error.js';
 import { makePaginationQuery } from '../../common/make-pagination-query.js';
 import { generateVisibilityQuery } from '../../common/generate-visibility-query.js';
 import { generateMutedUserQuery } from '../../common/generate-muted-user-query.js';
-import { generateMutedInstanceQuery } from '../../common/generate-muted-instance-query.js';
 import { generateRepliesQuery } from '../../common/generate-replies-query.js';
 import { generateMutedNoteQuery } from '../../common/generate-muted-note-query.js';
 import { generateChannelQuery } from '../../common/generate-channel-query.js';
@@ -92,7 +91,6 @@ export default define(meta, paramDef, async (ps, user) => {
 	generateRepliesQuery(query, user);
 	generateVisibilityQuery(query, user);
 	generateMutedUserQuery(query, user);
-	generateMutedInstanceQuery(query, user);
 	generateMutedNoteQuery(query, user);
 	generateBlockedUserQuery(query, user);
 
@@ -134,9 +132,7 @@ export default define(meta, paramDef, async (ps, user) => {
 	const timeline = await query.take(ps.limit).getMany();
 
 	process.nextTick(() => {
-		if (user) {
-			activeUsersChart.read(user);
-		}
+		activeUsersChart.read(user);
 	});
 
 	return await Notes.packMany(timeline, user);
diff --git a/packages/backend/src/server/api/endpoints/notes/timeline.ts b/packages/backend/src/server/api/endpoints/notes/timeline.ts
index d80940e950..22f4925175 100644
--- a/packages/backend/src/server/api/endpoints/notes/timeline.ts
+++ b/packages/backend/src/server/api/endpoints/notes/timeline.ts
@@ -5,7 +5,6 @@ import define from '../../define.js';
 import { makePaginationQuery } from '../../common/make-pagination-query.js';
 import { generateVisibilityQuery } from '../../common/generate-visibility-query.js';
 import { generateMutedUserQuery } from '../../common/generate-muted-user-query.js';
-import { generateMutedInstanceQuery } from '../../common/generate-muted-instance-query.js';
 import { generateRepliesQuery } from '../../common/generate-replies-query.js';
 import { generateMutedNoteQuery } from '../../common/generate-muted-note-query.js';
 import { generateChannelQuery } from '../../common/generate-channel-query.js';
@@ -84,7 +83,6 @@ export default define(meta, paramDef, async (ps, user) => {
 	generateRepliesQuery(query, user);
 	generateVisibilityQuery(query, user);
 	generateMutedUserQuery(query, user);
-	generateMutedInstanceQuery(query, user);
 	generateMutedNoteQuery(query, user);
 	generateBlockedUserQuery(query, user);
 
@@ -126,9 +124,7 @@ export default define(meta, paramDef, async (ps, user) => {
 	const timeline = await query.take(ps.limit).getMany();
 
 	process.nextTick(() => {
-		if (user) {
-			activeUsersChart.read(user);
-		}
+		activeUsersChart.read(user);
 	});
 
 	return await Notes.packMany(timeline, user);
diff --git a/packages/backend/src/server/api/endpoints/users/notes.ts b/packages/backend/src/server/api/endpoints/users/notes.ts
index aec5c0ea99..9fa56fe83a 100644
--- a/packages/backend/src/server/api/endpoints/users/notes.ts
+++ b/packages/backend/src/server/api/endpoints/users/notes.ts
@@ -7,7 +7,6 @@ import { makePaginationQuery } from '../../common/make-pagination-query.js';
 import { generateVisibilityQuery } from '../../common/generate-visibility-query.js';
 import { generateMutedUserQuery } from '../../common/generate-muted-user-query.js';
 import { generateBlockedUserQuery } from '../../common/generate-block-query.js';
-import { generateMutedInstanceQuery } from '../../common/generate-muted-instance-query.js';
 
 export const meta = {
 	tags: ['users', 'notes'],
@@ -77,9 +76,10 @@ export default define(meta, paramDef, async (ps, me) => {
 		.leftJoinAndSelect('renoteUser.banner', 'renoteUserBanner');
 
 	generateVisibilityQuery(query, me);
-	if (me) generateMutedUserQuery(query, me, user);
-	if (me) generateBlockedUserQuery(query, me);
-	if (me) generateMutedInstanceQuery(query, me);
+	if (me) {
+		generateMutedUserQuery(query, me, user);
+		generateBlockedUserQuery(query, me);
+	}
 
 	if (ps.withFiles) {
 		query.andWhere('note.fileIds != \'{}\'');

From 36f09b6cdca904a548b642d0eb6adc05a4095d09 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <github-bf215181b5140522137b3d4f6b73544a@desu.email>
Date: Sat, 25 Jun 2022 07:25:22 +0200
Subject: [PATCH 55/90] fix(client): only enable hotkeys for logged in users
 (#8793)

* fix(client): only enable hotkeys for logged in users

* fix(client): keep theme and search hotkeys for logged out users
---
 packages/client/src/init.ts | 23 +++++++++++++----------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/packages/client/src/init.ts b/packages/client/src/init.ts
index a11dd2d050..98f69c701f 100644
--- a/packages/client/src/init.ts
+++ b/packages/client/src/init.ts
@@ -287,16 +287,6 @@ fetchInstanceMetaPromise.then(() => {
 	}
 });
 
-// shortcut
-document.addEventListener('keydown', makeHotkey({
-	'd': () => {
-		defaultStore.set('darkMode', !defaultStore.state.darkMode);
-	},
-	'p|n': post,
-	's': search,
-	//TODO: 'h|/': help
-}));
-
 watch(defaultStore.reactiveState.useBlurEffectForModal, v => {
 	document.documentElement.style.setProperty('--modalBgFilter', v ? 'blur(4px)' : 'none');
 }, { immediate: true });
@@ -339,7 +329,17 @@ for (const plugin of ColdDeviceStorage.get('plugins').filter(p => p.active)) {
 	});
 }
 
+const hotkeys = {
+	'd': (): void => {
+		defaultStore.set('darkMode', !defaultStore.state.darkMode);
+	},
+	's': search,
+};
+
 if ($i) {
+	// only add post shortcuts if logged in
+	hotkeys['p|n'] = post;
+
 	if ($i.isDeleted) {
 		alert({
 			type: 'warning',
@@ -434,3 +434,6 @@ if ($i) {
 		signout();
 	});
 }
+
+// shortcut
+document.addEventListener('keydown', makeHotkey(hotkeys));

From 126011c1a739e58d44f7f19c6de9b1041c9a1a8b Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Sat, 25 Jun 2022 16:28:36 +0900
Subject: [PATCH 56/90] chore(deps): bump jsrsasign from 10.5.24 to 10.5.25 in
 /packages/backend (#8889)

Bumps [jsrsasign](https://github.com/kjur/jsrsasign) from 10.5.24 to 10.5.25.
- [Release notes](https://github.com/kjur/jsrsasign/releases)
- [Changelog](https://github.com/kjur/jsrsasign/blob/master/ChangeLog.txt)
- [Commits](https://github.com/kjur/jsrsasign/compare/10.5.24...10.5.25)

---
updated-dependencies:
- dependency-name: jsrsasign
  dependency-type: direct:production
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 packages/backend/package.json | 2 +-
 packages/backend/yarn.lock    | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/backend/package.json b/packages/backend/package.json
index b126f723ec..c6c76b30a6 100644
--- a/packages/backend/package.json
+++ b/packages/backend/package.json
@@ -55,7 +55,7 @@
 		"json5": "2.2.1",
 		"json5-loader": "4.0.1",
 		"jsonld": "6.0.0",
-		"jsrsasign": "10.5.24",
+		"jsrsasign": "10.5.25",
 		"koa": "2.13.4",
 		"koa-bodyparser": "4.3.0",
 		"koa-favicon": "2.1.0",
diff --git a/packages/backend/yarn.lock b/packages/backend/yarn.lock
index 1b397966d0..25c4ee9c25 100644
--- a/packages/backend/yarn.lock
+++ b/packages/backend/yarn.lock
@@ -4061,10 +4061,10 @@ jsprim@^1.2.2:
     json-schema "0.4.0"
     verror "1.10.0"
 
-jsrsasign@10.5.24:
-  version "10.5.24"
-  resolved "https://registry.yarnpkg.com/jsrsasign/-/jsrsasign-10.5.24.tgz#2d159e1756b2268682c6eb5e147184e33e946b1c"
-  integrity sha512-0i/UHRgJZifp/YmoXHyNQXUY4eKWiSd7YxuD7oKEw9mlqgr51hg9lZQw2nlEDvwHDh7pyj6ZjYlxldlW27xb/Q==
+jsrsasign@10.5.25:
+  version "10.5.25"
+  resolved "https://registry.yarnpkg.com/jsrsasign/-/jsrsasign-10.5.25.tgz#8eb3f943718d73f2dd3d85f587f241a5316b835a"
+  integrity sha512-N7zxHaCwYvFlXsybq4p4RxRwn4AbEq3cEiyjbCrWmwA7g8aS4LTKDJ9AJmsXxwtYesYx0imJ+ITtkyyxLCgeIg==
 
 jstransformer@1.0.0:
   version "1.0.0"

From d5ef68336a18ca90c0885a00f55c7e599a745930 Mon Sep 17 00:00:00 2001
From: Johann150 <johann.galle@protonmail.com>
Date: Sat, 25 Jun 2022 10:14:13 +0200
Subject: [PATCH 57/90] refactor: notification setting window composition API
 (#8860)

* refactor: notification setting window composition API

* fix lint vue/require-valid-default-prop

* fix type
---
 .../notification-setting-window.vue           | 128 ++++++++----------
 1 file changed, 57 insertions(+), 71 deletions(-)

diff --git a/packages/client/src/components/notification-setting-window.vue b/packages/client/src/components/notification-setting-window.vue
index 64d828394b..84550c9da1 100644
--- a/packages/client/src/components/notification-setting-window.vue
+++ b/packages/client/src/components/notification-setting-window.vue
@@ -6,95 +6,81 @@
 	:with-ok-button="true"
 	:ok-button-disabled="false"
 	@ok="ok()"
-	@close="$refs.dialog.close()"
-	@closed="$emit('closed')"
+	@close="dialog.close()"
+	@closed="emit('closed')"
 >
-	<template #header>{{ $ts.notificationSetting }}</template>
+	<template #header>{{ i18n.ts.notificationSetting }}</template>
 	<div class="_monolithic_">
 		<div v-if="showGlobalToggle" class="_section">
 			<MkSwitch v-model="useGlobalSetting">
-				{{ $ts.useGlobalSetting }}
-				<template #caption>{{ $ts.useGlobalSettingDesc }}</template>
+				{{ i18n.ts.useGlobalSetting }}
+				<template #caption>{{ i18n.ts.useGlobalSettingDesc }}</template>
 			</MkSwitch>
 		</div>
 		<div v-if="!useGlobalSetting" class="_section">
-			<MkInfo>{{ $ts.notificationSettingDesc }}</MkInfo>
-			<MkButton inline @click="disableAll">{{ $ts.disableAll }}</MkButton>
-			<MkButton inline @click="enableAll">{{ $ts.enableAll }}</MkButton>
-			<MkSwitch v-for="type in notificationTypes" :key="type" v-model="typesMap[type]">{{ $t(`_notification._types.${type}`) }}</MkSwitch>
+			<MkInfo>{{ i18n.ts.notificationSettingDesc }}</MkInfo>
+			<MkButton inline @click="disableAll">{{ i18n.ts.disableAll }}</MkButton>
+			<MkButton inline @click="enableAll">{{ i18n.ts.enableAll }}</MkButton>
+			<MkSwitch v-for="type in notificationTypes" :key="type" v-model="typesMap[type]">{{ i18n.t(`_notification._types.${type}`) }}</MkSwitch>
 		</div>
 	</div>
 </XModalWindow>
 </template>
 
-<script lang="ts">
-import { defineComponent, PropType } from 'vue';
+<script lang="ts" setup>
+import { PropType } from 'vue';
 import { notificationTypes } from 'misskey-js';
 import MkSwitch from './form/switch.vue';
 import MkInfo from './ui/info.vue';
 import MkButton from './ui/button.vue';
 import XModalWindow from '@/components/ui/modal-window.vue';
+import { i18n } from '@/i18n';
 
-export default defineComponent({
-	components: {
-		XModalWindow,
-		MkSwitch,
-		MkInfo,
-		MkButton,
-	},
+const emit = defineEmits<{
+	(ev: 'done', v: { includingTypes: string[] | null }): void,
+	(ev: 'closed'): void,
+}>();
 
-	props: {
-		includingTypes: {
-			// TODO: これで型に合わないものを弾いてくれるのかどうか要調査
-			type: Array as PropType<typeof notificationTypes[number][]>,
-			required: false,
-			default: null,
-		},
-		showGlobalToggle: {
-			type: Boolean,
-			required: false,
-			default: true,
-		},
-	},
-
-	emits: ['done', 'closed'],
-
-	data() {
-		return {
-			typesMap: {} as Record<typeof notificationTypes[number], boolean>,
-			useGlobalSetting: false,
-			notificationTypes,
-		};
-	},
-
-	created() {
-		this.useGlobalSetting = this.includingTypes === null && this.showGlobalToggle;
-
-		for (const type of this.notificationTypes) {
-			this.typesMap[type] = this.includingTypes === null || this.includingTypes.includes(type);
-		}
-	},
-
-	methods: {
-		ok() {
-			const includingTypes = this.useGlobalSetting ? null : (Object.keys(this.typesMap) as typeof notificationTypes[number][])
-				.filter(type => this.typesMap[type]);
-
-			this.$emit('done', { includingTypes });
-			this.$refs.dialog.close();
-		},
-
-		disableAll() {
-			for (const type in this.typesMap) {
-				this.typesMap[type as typeof notificationTypes[number]] = false;
-			}
-		},
-
-		enableAll() {
-			for (const type in this.typesMap) {
-				this.typesMap[type as typeof notificationTypes[number]] = true;
-			}
-		},
-	},
+const props = withDefaults(defineProps<{
+	// TODO: これで型に合わないものを弾いてくれるのかどうか要調査
+	includingTypes?: typeof notificationTypes[number][];
+	showGlobalToggle?: boolean;
+}>(), {
+	includingTypes: () => [],
+	showGlobalToggle: true,
 });
+
+const dialog = $ref<InstanceType<typeof XModalWindow>>();
+
+let typesMap = $ref<Record<typeof notificationTypes[number], boolean>>({});
+let useGlobalSetting = $ref(props.includingTypes === [] && props.showGlobalToggle);
+
+for (const type of notificationTypes) {
+	typesMap[type] = props.includingTypes.includes(type);
+}
+
+function ok() {
+	if (useGlobalSetting) {
+		emit('done', { includingTypes: null });
+	} else {
+		emit('done', {
+			includingTypes: (Object.keys(typesMap) as typeof notificationTypes[number][])
+				.filter(type => typesMap[type]),
+		});
+	}
+
+	dialog.close();
+}
+
+function disableAll() {
+	for (const type in typesMap) {
+		typesMap[type as typeof notificationTypes[number]] = false;
+	}
+}
+
+function enableAll() {
+	for (const type in typesMap) {
+		typesMap[type as typeof notificationTypes[number]] = true;
+	}
+}
 </script>

From 7be4b2145b5eb5db02400ba66366aa682111ffaa Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sat, 25 Jun 2022 18:05:35 +0900
Subject: [PATCH 58/90] refactor(client): extract tooltip logic of chart

---
 packages/client/src/components/chart.vue      | 43 +---------------
 .../client/src/scripts/use-chart-tooltip.ts   | 50 +++++++++++++++++++
 2 files changed, 52 insertions(+), 41 deletions(-)
 create mode 100644 packages/client/src/scripts/use-chart-tooltip.ts

diff --git a/packages/client/src/components/chart.vue b/packages/client/src/components/chart.vue
index 5e9c2f03be..d9075dd077 100644
--- a/packages/client/src/components/chart.vue
+++ b/packages/client/src/components/chart.vue
@@ -39,7 +39,7 @@ import zoomPlugin from 'chartjs-plugin-zoom';
 //import gradient from 'chartjs-plugin-gradient';
 import * as os from '@/os';
 import { defaultStore } from '@/store';
-import MkChartTooltip from '@/components/chart-tooltip.vue';
+import { useChartTooltip } from '@/scripts/use-chart-tooltip';
 
 const props = defineProps({
 	src: {
@@ -160,42 +160,7 @@ const format = (arr) => {
 	}));
 };
 
-const tooltipShowing = ref(false);
-const tooltipX = ref(0);
-const tooltipY = ref(0);
-const tooltipTitle = ref(null);
-const tooltipSeries = ref(null);
-let disposeTooltipComponent;
-
-os.popup(MkChartTooltip, {
-	showing: tooltipShowing,
-	x: tooltipX,
-	y: tooltipY,
-	title: tooltipTitle,
-	series: tooltipSeries,
-}, {}).then(({ dispose }) => {
-	disposeTooltipComponent = dispose;
-});
-
-function externalTooltipHandler(context) {
-	if (context.tooltip.opacity === 0) {
-		tooltipShowing.value = false;
-		return;
-	}
-
-	tooltipTitle.value = context.tooltip.title[0];
-	tooltipSeries.value = context.tooltip.body.map((b, i) => ({
-		backgroundColor: context.tooltip.labelColors[i].backgroundColor,
-		borderColor: context.tooltip.labelColors[i].borderColor,
-		text: b.lines[0],
-	}));
-
-	const rect = context.chart.canvas.getBoundingClientRect();
-
-	tooltipShowing.value = true;
-	tooltipX.value = rect.left + window.pageXOffset + context.tooltip.caretX;
-	tooltipY.value = rect.top + window.pageYOffset + context.tooltip.caretY;
-}
+const { handler: externalTooltipHandler } = useChartTooltip();
 
 const render = () => {
 	if (chartInstance) {
@@ -891,10 +856,6 @@ watch(() => [props.src, props.span], fetchAndRender);
 onMounted(() => {
 	fetchAndRender();
 });
-
-onUnmounted(() => {
-	if (disposeTooltipComponent) disposeTooltipComponent();
-});
 /* eslint-enable id-denylist */
 </script>
 
diff --git a/packages/client/src/scripts/use-chart-tooltip.ts b/packages/client/src/scripts/use-chart-tooltip.ts
new file mode 100644
index 0000000000..ab57165694
--- /dev/null
+++ b/packages/client/src/scripts/use-chart-tooltip.ts
@@ -0,0 +1,50 @@
+import { onUnmounted, ref } from 'vue';
+import * as os from '@/os';
+import MkChartTooltip from '@/components/chart-tooltip.vue';
+
+export function useChartTooltip() {
+	const tooltipShowing = ref(false);
+	const tooltipX = ref(0);
+	const tooltipY = ref(0);
+	const tooltipTitle = ref(null);
+	const tooltipSeries = ref(null);
+	let disposeTooltipComponent;
+
+	os.popup(MkChartTooltip, {
+		showing: tooltipShowing,
+		x: tooltipX,
+		y: tooltipY,
+		title: tooltipTitle,
+		series: tooltipSeries,
+	}, {}).then(({ dispose }) => {
+		disposeTooltipComponent = dispose;
+	});
+
+	onUnmounted(() => {
+		if (disposeTooltipComponent) disposeTooltipComponent();
+	});
+
+	function handler(context) {
+		if (context.tooltip.opacity === 0) {
+			tooltipShowing.value = false;
+			return;
+		}
+
+		tooltipTitle.value = context.tooltip.title[0];
+		tooltipSeries.value = context.tooltip.body.map((b, i) => ({
+			backgroundColor: context.tooltip.labelColors[i].backgroundColor,
+			borderColor: context.tooltip.labelColors[i].borderColor,
+			text: b.lines[0],
+		}));
+
+		const rect = context.chart.canvas.getBoundingClientRect();
+
+		tooltipShowing.value = true;
+		tooltipX.value = rect.left + window.pageXOffset + context.tooltip.caretX;
+		tooltipY.value = rect.top + window.pageYOffset + context.tooltip.caretY;
+	}
+
+	return {
+		handler,
+	};
+}

From 58e83f8e4f634bfd95a3afc847a875413120c301 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sat, 25 Jun 2022 18:26:31 +0900
Subject: [PATCH 59/90] feat: allow GET for some endpoints

Resolve #8263
---
 CHANGELOG.md                                  |  1 +
 .../backend/src/server/api/api-handler.ts     |  9 ++++-
 packages/backend/src/server/api/call.ts       |  2 +-
 packages/backend/src/server/api/endpoints.ts  | 10 ++++++
 .../api/endpoints/charts/active-users.ts      |  5 ++-
 .../server/api/endpoints/charts/ap-request.ts |  5 ++-
 .../src/server/api/endpoints/charts/drive.ts  |  5 ++-
 .../server/api/endpoints/charts/federation.ts |  5 ++-
 .../server/api/endpoints/charts/hashtag.ts    |  5 ++-
 .../server/api/endpoints/charts/instance.ts   |  5 ++-
 .../src/server/api/endpoints/charts/notes.ts  |  5 ++-
 .../server/api/endpoints/charts/user/drive.ts |  5 ++-
 .../api/endpoints/charts/user/following.ts    |  3 ++
 .../server/api/endpoints/charts/user/notes.ts |  5 ++-
 .../api/endpoints/charts/user/reactions.ts    |  5 ++-
 .../src/server/api/endpoints/charts/users.ts  |  5 ++-
 packages/backend/src/server/api/index.ts      | 19 ++++++++--
 packages/client/src/components/chart.vue      | 36 +++++++++----------
 .../src/components/instance-card-mini.vue     |  2 +-
 .../client/src/components/user-card-mini.vue  |  2 +-
 packages/client/src/os.ts                     | 33 +++++++++++++++++
 packages/client/src/pages/admin/overview.vue  |  4 +--
 packages/client/src/widgets/activity.vue      | 10 +++---
 packages/client/src/widgets/federation.vue    |  6 ++--
 24 files changed, 146 insertions(+), 46 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index bc3e1a4223..8b147ed4b6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,6 +12,7 @@ You should also include the user name that made the change.
 ## 12.x.x (unreleased)
 
 ### Improvements
+- Server: Allow GET method for some endpoints @syuilo
 - Server: Add rate limit to i/notifications @tamaina
 - Client: Improve control panel @syuilo
 - Client: Show warning in control panel when there is an unresolved abuse report @syuilo
diff --git a/packages/backend/src/server/api/api-handler.ts b/packages/backend/src/server/api/api-handler.ts
index f97c3dd397..d2d16597e1 100644
--- a/packages/backend/src/server/api/api-handler.ts
+++ b/packages/backend/src/server/api/api-handler.ts
@@ -6,7 +6,11 @@ import call from './call.js';
 import { ApiError } from './error.js';
 
 export default (endpoint: IEndpoint, ctx: Koa.Context) => new Promise<void>((res) => {
-	const body = ctx.request.body;
+	const body = ctx.is('multipart/form-data')
+		? (ctx.req as any).body
+		: ctx.method === 'GET'
+			? ctx.query
+			: ctx.request.body;
 
 	const reply = (x?: any, y?: ApiError) => {
 		if (x == null) {
@@ -33,6 +37,9 @@ export default (endpoint: IEndpoint, ctx: Koa.Context) => new Promise<void>((res
 	authenticate(body['i']).then(([user, app]) => {
 		// API invoking
 		call(endpoint.name, user, app, body, ctx).then((res: any) => {
+			if (ctx.method === 'GET' && endpoint.meta.cacheSec && !body['i'] && !user) {
+				ctx.set('Cache-Control', `public, max-age=${endpoint.meta.cacheSec}`);
+			}
 			reply(res);
 		}).catch((e: ApiError) => {
 			reply(e.httpStatusCode ? e.httpStatusCode : e.kind === 'client' ? 400 : 500, e);
diff --git a/packages/backend/src/server/api/call.ts b/packages/backend/src/server/api/call.ts
index 46afde4e47..75bbc9f908 100644
--- a/packages/backend/src/server/api/call.ts
+++ b/packages/backend/src/server/api/call.ts
@@ -94,7 +94,7 @@ export default async (endpoint: string, user: CacheableLocalUser | null | undefi
 	}
 
 	// Cast non JSON input
-	if (ep.meta.requireFile && ep.params.properties) {
+	if ((ep.meta.requireFile || ctx?.method === 'GET') && ep.params.properties) {
 		for (const k of Object.keys(ep.params.properties)) {
 			const param = ep.params.properties![k];
 			if (['boolean', 'number', 'integer'].includes(param.type ?? '') && typeof data[k] === 'string') {
diff --git a/packages/backend/src/server/api/endpoints.ts b/packages/backend/src/server/api/endpoints.ts
index 5fac7df239..11d9d7c026 100644
--- a/packages/backend/src/server/api/endpoints.ts
+++ b/packages/backend/src/server/api/endpoints.ts
@@ -701,6 +701,16 @@ export interface IEndpointMeta {
 	readonly kind?: string;
 
 	readonly description?: string;
+
+	/**
+	 * GETでのリクエストを許容するか否か
+	 */
+	readonly allowGet?: boolean;
+
+	/**
+	 * 正常応答をキャッシュ (Cache-Control: public) する秒数
+	 */
+	readonly cacheSec?: number;
 }
 
 export interface IEndpoint {
diff --git a/packages/backend/src/server/api/endpoints/charts/active-users.ts b/packages/backend/src/server/api/endpoints/charts/active-users.ts
index 97f7885dbe..ea23794296 100644
--- a/packages/backend/src/server/api/endpoints/charts/active-users.ts
+++ b/packages/backend/src/server/api/endpoints/charts/active-users.ts
@@ -1,11 +1,14 @@
-import define from '../../define.js';
 import { getJsonSchema } from '@/services/chart/core.js';
 import { activeUsersChart } from '@/services/chart/index.js';
+import define from '../../define.js';
 
 export const meta = {
 	tags: ['charts', 'users'],
 
 	res: getJsonSchema(activeUsersChart.schema),
+
+	allowGet: true,
+	cacheSec: 60 * 60,
 } as const;
 
 export const paramDef = {
diff --git a/packages/backend/src/server/api/endpoints/charts/ap-request.ts b/packages/backend/src/server/api/endpoints/charts/ap-request.ts
index 4477bfc987..06dee250ee 100644
--- a/packages/backend/src/server/api/endpoints/charts/ap-request.ts
+++ b/packages/backend/src/server/api/endpoints/charts/ap-request.ts
@@ -1,11 +1,14 @@
-import define from '../../define.js';
 import { getJsonSchema } from '@/services/chart/core.js';
 import { apRequestChart } from '@/services/chart/index.js';
+import define from '../../define.js';
 
 export const meta = {
 	tags: ['charts'],
 
 	res: getJsonSchema(apRequestChart.schema),
+
+	allowGet: true,
+	cacheSec: 60 * 60,
 } as const;
 
 export const paramDef = {
diff --git a/packages/backend/src/server/api/endpoints/charts/drive.ts b/packages/backend/src/server/api/endpoints/charts/drive.ts
index fd6033392f..dd2c2d6838 100644
--- a/packages/backend/src/server/api/endpoints/charts/drive.ts
+++ b/packages/backend/src/server/api/endpoints/charts/drive.ts
@@ -1,11 +1,14 @@
-import define from '../../define.js';
 import { getJsonSchema } from '@/services/chart/core.js';
 import { driveChart } from '@/services/chart/index.js';
+import define from '../../define.js';
 
 export const meta = {
 	tags: ['charts', 'drive'],
 
 	res: getJsonSchema(driveChart.schema),
+
+	allowGet: true,
+	cacheSec: 60 * 60,
 } as const;
 
 export const paramDef = {
diff --git a/packages/backend/src/server/api/endpoints/charts/federation.ts b/packages/backend/src/server/api/endpoints/charts/federation.ts
index f842f574ec..8c35b3c46d 100644
--- a/packages/backend/src/server/api/endpoints/charts/federation.ts
+++ b/packages/backend/src/server/api/endpoints/charts/federation.ts
@@ -1,11 +1,14 @@
-import define from '../../define.js';
 import { getJsonSchema } from '@/services/chart/core.js';
 import { federationChart } from '@/services/chart/index.js';
+import define from '../../define.js';
 
 export const meta = {
 	tags: ['charts'],
 
 	res: getJsonSchema(federationChart.schema),
+
+	allowGet: true,
+	cacheSec: 60 * 60,
 } as const;
 
 export const paramDef = {
diff --git a/packages/backend/src/server/api/endpoints/charts/hashtag.ts b/packages/backend/src/server/api/endpoints/charts/hashtag.ts
index 01407defdd..77e24a62c3 100644
--- a/packages/backend/src/server/api/endpoints/charts/hashtag.ts
+++ b/packages/backend/src/server/api/endpoints/charts/hashtag.ts
@@ -1,11 +1,14 @@
-import define from '../../define.js';
 import { getJsonSchema } from '@/services/chart/core.js';
 import { hashtagChart } from '@/services/chart/index.js';
+import define from '../../define.js';
 
 export const meta = {
 	tags: ['charts', 'hashtags'],
 
 	res: getJsonSchema(hashtagChart.schema),
+
+	allowGet: true,
+	cacheSec: 60 * 60,
 } as const;
 
 export const paramDef = {
diff --git a/packages/backend/src/server/api/endpoints/charts/instance.ts b/packages/backend/src/server/api/endpoints/charts/instance.ts
index 2d12951c6c..817d51ad01 100644
--- a/packages/backend/src/server/api/endpoints/charts/instance.ts
+++ b/packages/backend/src/server/api/endpoints/charts/instance.ts
@@ -1,11 +1,14 @@
-import define from '../../define.js';
 import { getJsonSchema } from '@/services/chart/core.js';
 import { instanceChart } from '@/services/chart/index.js';
+import define from '../../define.js';
 
 export const meta = {
 	tags: ['charts'],
 
 	res: getJsonSchema(instanceChart.schema),
+
+	allowGet: true,
+	cacheSec: 60 * 60,
 } as const;
 
 export const paramDef = {
diff --git a/packages/backend/src/server/api/endpoints/charts/notes.ts b/packages/backend/src/server/api/endpoints/charts/notes.ts
index b6089f67ef..951adf5408 100644
--- a/packages/backend/src/server/api/endpoints/charts/notes.ts
+++ b/packages/backend/src/server/api/endpoints/charts/notes.ts
@@ -1,11 +1,14 @@
-import define from '../../define.js';
 import { getJsonSchema } from '@/services/chart/core.js';
 import { notesChart } from '@/services/chart/index.js';
+import define from '../../define.js';
 
 export const meta = {
 	tags: ['charts', 'notes'],
 
 	res: getJsonSchema(notesChart.schema),
+
+	allowGet: true,
+	cacheSec: 60 * 60,
 } as const;
 
 export const paramDef = {
diff --git a/packages/backend/src/server/api/endpoints/charts/user/drive.ts b/packages/backend/src/server/api/endpoints/charts/user/drive.ts
index e5db7131a8..f165b40224 100644
--- a/packages/backend/src/server/api/endpoints/charts/user/drive.ts
+++ b/packages/backend/src/server/api/endpoints/charts/user/drive.ts
@@ -1,11 +1,14 @@
-import define from '../../../define.js';
 import { getJsonSchema } from '@/services/chart/core.js';
 import { perUserDriveChart } from '@/services/chart/index.js';
+import define from '../../../define.js';
 
 export const meta = {
 	tags: ['charts', 'drive', 'users'],
 
 	res: getJsonSchema(perUserDriveChart.schema),
+
+	allowGet: true,
+	cacheSec: 60 * 60,
 } as const;
 
 export const paramDef = {
diff --git a/packages/backend/src/server/api/endpoints/charts/user/following.ts b/packages/backend/src/server/api/endpoints/charts/user/following.ts
index 9b72de745d..f5d42e21c2 100644
--- a/packages/backend/src/server/api/endpoints/charts/user/following.ts
+++ b/packages/backend/src/server/api/endpoints/charts/user/following.ts
@@ -6,6 +6,9 @@ export const meta = {
 	tags: ['charts', 'users', 'following'],
 
 	res: getJsonSchema(perUserFollowingChart.schema),
+
+	allowGet: true,
+	cacheSec: 60 * 60,
 } as const;
 
 export const paramDef = {
diff --git a/packages/backend/src/server/api/endpoints/charts/user/notes.ts b/packages/backend/src/server/api/endpoints/charts/user/notes.ts
index 7cc6cbf316..aefe550d43 100644
--- a/packages/backend/src/server/api/endpoints/charts/user/notes.ts
+++ b/packages/backend/src/server/api/endpoints/charts/user/notes.ts
@@ -1,11 +1,14 @@
-import define from '../../../define.js';
 import { getJsonSchema } from '@/services/chart/core.js';
 import { perUserNotesChart } from '@/services/chart/index.js';
+import define from '../../../define.js';
 
 export const meta = {
 	tags: ['charts', 'users', 'notes'],
 
 	res: getJsonSchema(perUserNotesChart.schema),
+
+	allowGet: true,
+	cacheSec: 60 * 60,
 } as const;
 
 export const paramDef = {
diff --git a/packages/backend/src/server/api/endpoints/charts/user/reactions.ts b/packages/backend/src/server/api/endpoints/charts/user/reactions.ts
index 5c58a7f152..6bc6b56bf0 100644
--- a/packages/backend/src/server/api/endpoints/charts/user/reactions.ts
+++ b/packages/backend/src/server/api/endpoints/charts/user/reactions.ts
@@ -1,11 +1,14 @@
-import define from '../../../define.js';
 import { getJsonSchema } from '@/services/chart/core.js';
 import { perUserReactionsChart } from '@/services/chart/index.js';
+import define from '../../../define.js';
 
 export const meta = {
 	tags: ['charts', 'users', 'reactions'],
 
 	res: getJsonSchema(perUserReactionsChart.schema),
+
+	allowGet: true,
+	cacheSec: 60 * 60,
 } as const;
 
 export const paramDef = {
diff --git a/packages/backend/src/server/api/endpoints/charts/users.ts b/packages/backend/src/server/api/endpoints/charts/users.ts
index 49c762b2e4..338e8fd338 100644
--- a/packages/backend/src/server/api/endpoints/charts/users.ts
+++ b/packages/backend/src/server/api/endpoints/charts/users.ts
@@ -1,11 +1,14 @@
-import define from '../../define.js';
 import { getJsonSchema } from '@/services/chart/core.js';
 import { usersChart } from '@/services/chart/index.js';
+import define from '../../define.js';
 
 export const meta = {
 	tags: ['charts', 'users'],
 
 	res: getJsonSchema(usersChart.schema),
+
+	allowGet: true,
+	cacheSec: 60 * 60,
 } as const;
 
 export const paramDef = {
diff --git a/packages/backend/src/server/api/index.ts b/packages/backend/src/server/api/index.ts
index 02bec31b17..83ece51f51 100644
--- a/packages/backend/src/server/api/index.ts
+++ b/packages/backend/src/server/api/index.ts
@@ -8,6 +8,8 @@ import multer from '@koa/multer';
 import bodyParser from 'koa-bodyparser';
 import cors from '@koa/cors';
 
+import { Instances, AccessTokens, Users } from '@/models/index.js';
+import config from '@/config/index.js';
 import endpoints from './endpoints.js';
 import handler from './api-handler.js';
 import signup from './private/signup.js';
@@ -16,8 +18,6 @@ import signupPending from './private/signup-pending.js';
 import discord from './service/discord.js';
 import github from './service/github.js';
 import twitter from './service/twitter.js';
-import { Instances, AccessTokens, Users } from '@/models/index.js';
-import config from '@/config/index.js';
 
 // Init app
 const app = new Koa();
@@ -56,11 +56,24 @@ for (const endpoint of endpoints) {
 	if (endpoint.meta.requireFile) {
 		router.post(`/${endpoint.name}`, upload.single('file'), handler.bind(null, endpoint));
 	} else {
+		// 後方互換性のため
 		if (endpoint.name.includes('-')) {
-			// 後方互換性のため
 			router.post(`/${endpoint.name.replace(/-/g, '_')}`, handler.bind(null, endpoint));
+
+			if (endpoint.meta.allowGet) {
+				router.get(`/${endpoint.name.replace(/-/g, '_')}`, handler.bind(null, endpoint));
+			} else {
+				router.get(`/${endpoint.name.replace(/-/g, '_')}`, async ctx => { ctx.status = 405; });
+			}
 		}
+
 		router.post(`/${endpoint.name}`, handler.bind(null, endpoint));
+
+		if (endpoint.meta.allowGet) {
+			router.get(`/${endpoint.name}`, handler.bind(null, endpoint));
+		} else {
+			router.get(`/${endpoint.name}`, async ctx => { ctx.status = 405; });
+		}
 	}
 }
 
diff --git a/packages/client/src/components/chart.vue b/packages/client/src/components/chart.vue
index d9075dd077..fc7c4ff950 100644
--- a/packages/client/src/components/chart.vue
+++ b/packages/client/src/components/chart.vue
@@ -342,7 +342,7 @@ const exportData = () => {
 };
 
 const fetchFederationChart = async (): Promise<typeof chartData> => {
-	const raw = await os.api('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',
@@ -392,7 +392,7 @@ const fetchFederationChart = async (): Promise<typeof chartData> => {
 };
 
 const fetchApRequestChart = async (): Promise<typeof chartData> => {
-	const raw = await os.api('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',
@@ -414,7 +414,7 @@ const fetchApRequestChart = async (): Promise<typeof chartData> => {
 };
 
 const fetchNotesChart = async (type: string): Promise<typeof chartData> => {
-	const raw = await os.api('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',
@@ -461,7 +461,7 @@ const fetchNotesChart = async (type: string): Promise<typeof chartData> => {
 };
 
 const fetchNotesTotalChart = async (): Promise<typeof chartData> => {
-	const raw = await os.api('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',
@@ -480,7 +480,7 @@ const fetchNotesTotalChart = async (): Promise<typeof chartData> => {
 };
 
 const fetchUsersChart = async (total: boolean): Promise<typeof chartData> => {
-	const raw = await os.api('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',
@@ -508,7 +508,7 @@ const fetchUsersChart = async (total: boolean): Promise<typeof chartData> => {
 };
 
 const fetchActiveUsersChart = async (): Promise<typeof chartData> => {
-	const raw = await os.api('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',
@@ -560,7 +560,7 @@ const fetchActiveUsersChart = async (): Promise<typeof chartData> => {
 };
 
 const fetchDriveChart = async (): Promise<typeof chartData> => {
-	const raw = await os.api('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: [{
@@ -596,7 +596,7 @@ const fetchDriveChart = async (): Promise<typeof chartData> => {
 };
 
 const fetchDriveFilesChart = async (): Promise<typeof chartData> => {
-	const raw = await os.api('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',
@@ -631,7 +631,7 @@ const fetchDriveFilesChart = async (): Promise<typeof chartData> => {
 };
 
 const fetchInstanceRequestsChart = async (): Promise<typeof chartData> => {
-	const raw = await os.api('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',
@@ -653,7 +653,7 @@ const fetchInstanceRequestsChart = async (): Promise<typeof chartData> => {
 };
 
 const fetchInstanceUsersChart = async (total: boolean): Promise<typeof chartData> => {
-	const raw = await os.api('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: 'Users',
@@ -668,7 +668,7 @@ const fetchInstanceUsersChart = async (total: boolean): Promise<typeof chartData
 };
 
 const fetchInstanceNotesChart = async (total: boolean): Promise<typeof chartData> => {
-	const raw = await os.api('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: 'Notes',
@@ -683,7 +683,7 @@ const fetchInstanceNotesChart = async (total: boolean): Promise<typeof chartData
 };
 
 const fetchInstanceFfChart = async (total: boolean): Promise<typeof chartData> => {
-	const raw = await os.api('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: 'Following',
@@ -706,7 +706,7 @@ const fetchInstanceFfChart = async (total: boolean): Promise<typeof chartData> =
 };
 
 const fetchInstanceDriveUsageChart = async (total: boolean): Promise<typeof chartData> => {
-	const raw = await os.api('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 {
 		bytes: true,
 		series: [{
@@ -722,7 +722,7 @@ const fetchInstanceDriveUsageChart = async (total: boolean): Promise<typeof char
 };
 
 const fetchInstanceDriveFilesChart = async (total: boolean): Promise<typeof chartData> => {
-	const raw = await os.api('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: 'Drive files',
@@ -737,7 +737,7 @@ const fetchInstanceDriveFilesChart = async (total: boolean): Promise<typeof char
 };
 
 const fetchPerUserNotesChart = async (): Promise<typeof chartData> => {
-	const raw = await os.api('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',
@@ -769,7 +769,7 @@ const fetchPerUserNotesChart = async (): Promise<typeof chartData> => {
 };
 
 const fetchPerUserFollowingChart = async (): Promise<typeof chartData> => {
-	const raw = await os.api('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',
@@ -784,7 +784,7 @@ const fetchPerUserFollowingChart = async (): Promise<typeof chartData> => {
 };
 
 const fetchPerUserFollowersChart = async (): Promise<typeof chartData> => {
-	const raw = await os.api('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',
@@ -799,7 +799,7 @@ const fetchPerUserFollowersChart = async (): Promise<typeof chartData> => {
 };
 
 const fetchPerUserDriveChart = async (): Promise<typeof chartData> => {
-	const raw = await os.api('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',
diff --git a/packages/client/src/components/instance-card-mini.vue b/packages/client/src/components/instance-card-mini.vue
index 0bac6c0ad0..de16dacf7b 100644
--- a/packages/client/src/components/instance-card-mini.vue
+++ b/packages/client/src/components/instance-card-mini.vue
@@ -20,7 +20,7 @@ const props = defineProps<{
 
 const chart = $ref(null);
 
-os.api('charts/instance', { host: props.instance.host, limit: 16, span: 'day' }).then(res => {
+os.apiGet('charts/instance', { host: props.instance.host, limit: 16, span: 'day' }).then(res => {
 	chart = res;
 });
 </script>
diff --git a/packages/client/src/components/user-card-mini.vue b/packages/client/src/components/user-card-mini.vue
index d83e4a56f5..2c3e0fe956 100644
--- a/packages/client/src/components/user-card-mini.vue
+++ b/packages/client/src/components/user-card-mini.vue
@@ -21,7 +21,7 @@ const props = defineProps<{
 
 const chart = $ref(null);
 
-os.api('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/os.ts b/packages/client/src/os.ts
index e823d3719c..00dae867d6 100644
--- a/packages/client/src/os.ts
+++ b/packages/client/src/os.ts
@@ -52,6 +52,39 @@ export const api = ((endpoint: string, data: Record<string, any> = {}, token?: s
 	return promise;
 }) as typeof apiClient.request;
 
+export const apiGet = ((endpoint: string, data: Record<string, any> = {}) => {
+	pendingApiRequestsCount.value++;
+
+	const onFinally = () => {
+		pendingApiRequestsCount.value--;
+	};
+
+	const query = new URLSearchParams(data);
+
+	const promise = new Promise((resolve, reject) => {
+		// Send request
+		fetch(`${apiUrl}/${endpoint}?${query}`, {
+			method: 'GET',
+			credentials: 'omit',
+			cache: 'default',
+		}).then(async (res) => {
+			const body = res.status === 204 ? null : await res.json();
+
+			if (res.status === 200) {
+				resolve(body);
+			} else if (res.status === 204) {
+				resolve();
+			} else {
+				reject(body.error);
+			}
+		}).catch(reject);
+	});
+
+	promise.then(onFinally, onFinally);
+
+	return promise;
+}) as typeof apiClient.request;
+
 export const apiWithDialog = ((
 	endpoint: string,
 	data: Record<string, any> = {},
diff --git a/packages/client/src/pages/admin/overview.vue b/packages/client/src/pages/admin/overview.vue
index 82b3c33852..f81f6104c7 100644
--- a/packages/client/src/pages/admin/overview.vue
+++ b/packages/client/src/pages/admin/overview.vue
@@ -90,11 +90,11 @@ onMounted(async () => {
 	os.api('stats', {}).then(statsResponse => {
 		stats = statsResponse;
 
-		os.api('charts/users', { limit: 2, span: 'day' }).then(chart => {
+		os.apiGet('charts/users', { limit: 2, span: 'day' }).then(chart => {
 			usersComparedToThePrevDay = stats.originalUsersCount - chart.local.total[1];
 		});
 
-		os.api('charts/notes', { limit: 2, span: 'day' }).then(chart => {
+		os.apiGet('charts/notes', { limit: 2, span: 'day' }).then(chart => {
 			notesComparedToThePrevDay = stats.originalNotesCount - chart.local.total[1];
 		});
 	});
diff --git a/packages/client/src/widgets/activity.vue b/packages/client/src/widgets/activity.vue
index 7fb9f5894c..265bde4a3b 100644
--- a/packages/client/src/widgets/activity.vue
+++ b/packages/client/src/widgets/activity.vue
@@ -15,12 +15,12 @@
 
 <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/ui/container.vue';
 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/ui/container.vue';
 import { $i } from '@/account';
 
 const name = 'activity';
@@ -67,7 +67,7 @@ const toggleView = () => {
 	save();
 };
 
-os.api('charts/user/notes', {
+os.apiGet('charts/user/notes', {
 	userId: $i.id,
 	span: 'day',
 	limit: 7 * 21,
@@ -76,7 +76,7 @@ os.api('charts/user/notes', {
 		total: res.diffs.normal[i] + res.diffs.reply[i] + res.diffs.renote[i],
 		notes: res.diffs.normal[i],
 		replies: res.diffs.reply[i],
-		renotes: res.diffs.renote[i]
+		renotes: res.diffs.renote[i],
 	}));
 	fetching.value = false;
 });
diff --git a/packages/client/src/widgets/federation.vue b/packages/client/src/widgets/federation.vue
index a3862077bb..afe7af0e96 100644
--- a/packages/client/src/widgets/federation.vue
+++ b/packages/client/src/widgets/federation.vue
@@ -20,8 +20,8 @@
 
 <script lang="ts" setup>
 import { onMounted, onUnmounted, ref } from 'vue';
-import { GetFormResultType } from '@/scripts/form';
 import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
+import { GetFormResultType } from '@/scripts/form';
 import MkContainer from '@/components/ui/container.vue';
 import MkMiniChart from '@/components/mini-chart.vue';
 import * as os from '@/os';
@@ -56,9 +56,9 @@ const fetching = ref(true);
 const fetch = async () => {
 	const fetchedInstances = await os.api('federation/instances', {
 		sort: '+lastCommunicatedAt',
-		limit: 5
+		limit: 5,
 	});
-	const fetchedCharts = await Promise.all(fetchedInstances.map(i => os.api('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;

From c67c0df76248ca23dd3ee2223da09b0f9bc9196c Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sat, 25 Jun 2022 09:29:42 +0000
Subject: [PATCH 60/90] fix notification-setting-window.vue

---
 .../components/notification-setting-window.vue    | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/packages/client/src/components/notification-setting-window.vue b/packages/client/src/components/notification-setting-window.vue
index 84550c9da1..bf0a148f59 100644
--- a/packages/client/src/components/notification-setting-window.vue
+++ b/packages/client/src/components/notification-setting-window.vue
@@ -21,14 +21,14 @@
 			<MkInfo>{{ i18n.ts.notificationSettingDesc }}</MkInfo>
 			<MkButton inline @click="disableAll">{{ i18n.ts.disableAll }}</MkButton>
 			<MkButton inline @click="enableAll">{{ i18n.ts.enableAll }}</MkButton>
-			<MkSwitch v-for="type in notificationTypes" :key="type" v-model="typesMap[type]">{{ i18n.t(`_notification._types.${type}`) }}</MkSwitch>
+			<MkSwitch v-for="ntype in notificationTypes" :key="ntype" v-model="typesMap[ntype]">{{ i18n.t(`_notification._types.${ntype}`) }}</MkSwitch>
 		</div>
 	</div>
 </XModalWindow>
 </template>
 
 <script lang="ts" setup>
-import { PropType } from 'vue';
+import { } from 'vue';
 import { notificationTypes } from 'misskey-js';
 import MkSwitch from './form/switch.vue';
 import MkInfo from './ui/info.vue';
@@ -42,21 +42,22 @@ const emit = defineEmits<{
 }>();
 
 const props = withDefaults(defineProps<{
-	// TODO: これで型に合わないものを弾いてくれるのかどうか要調査
-	includingTypes?: typeof notificationTypes[number][];
+	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(props.includingTypes === [] && props.showGlobalToggle);
+let useGlobalSetting = $ref((includingTypes === null || includingTypes.length === 0) && props.showGlobalToggle);
 
-for (const type of notificationTypes) {
-	typesMap[type] = props.includingTypes.includes(type);
+for (const ntype of notificationTypes) {
+	typesMap[ntype] = includingTypes.includes(ntype);
 }
 
 function ok() {

From 0248a2a98926d47bf10ada8446393cb6fe0e0238 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sat, 25 Jun 2022 23:01:40 +0900
Subject: [PATCH 61/90] enhance(client): improve control panel

---
 .../client/src/components/queue-chart.vue     | 232 ---------
 .../src/pages/admin/overview.federation.vue   | 105 ++++
 .../src/pages/admin/overview.queue-chart.vue  | 213 ++++++++
 packages/client/src/pages/admin/overview.vue  | 487 ++++++++++++++----
 .../src/pages/admin/queue.chart.chart.vue     | 181 +++++++
 .../client/src/pages/admin/queue.chart.vue    | 146 ++++--
 packages/client/src/pages/admin/queue.vue     |  35 +-
 7 files changed, 996 insertions(+), 403 deletions(-)
 delete mode 100644 packages/client/src/components/queue-chart.vue
 create mode 100644 packages/client/src/pages/admin/overview.federation.vue
 create mode 100644 packages/client/src/pages/admin/overview.queue-chart.vue
 create mode 100644 packages/client/src/pages/admin/queue.chart.chart.vue

diff --git a/packages/client/src/components/queue-chart.vue b/packages/client/src/components/queue-chart.vue
deleted file mode 100644
index 7bb548cf06..0000000000
--- a/packages/client/src/components/queue-chart.vue
+++ /dev/null
@@ -1,232 +0,0 @@
-<template>
-<canvas ref="chartEl"></canvas>
-</template>
-
-<script lang="ts">
-import { defineComponent, 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 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);
-	const g = parseInt(result[2], 16);
-	const b = parseInt(result[3], 16);
-	return `rgba(${r}, ${g}, ${b}, ${a})`;
-};
-
-export default defineComponent({
-	props: {
-		domain: {
-			type: String,
-			required: true,
-		},
-		connection: {
-			required: true,
-		},
-	},
-
-	setup(props) {
-		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: '#00E396',
-						backgroundColor: alpha('#00E396', 0.1),
-						data: []
-					}, {
-						label: 'Active',
-						pointRadius: 0,
-						tension: 0,
-						borderWidth: 2,
-						borderJoinStyle: 'round',
-						borderColor: '#00BCD4',
-						backgroundColor: alpha('#00BCD4', 0.1),
-						data: []
-					}, {
-						label: 'Waiting',
-						pointRadius: 0,
-						tension: 0,
-						borderWidth: 2,
-						borderJoinStyle: 'round',
-						borderColor: '#FFB300',
-						backgroundColor: alpha('#FFB300', 0.1),
-						yAxisID: 'y2',
-						data: []
-					}, {
-						label: 'Delayed',
-						pointRadius: 0,
-						tension: 0,
-						borderWidth: 2,
-						borderJoinStyle: 'round',
-						borderColor: '#E53935',
-						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: 'rgb(0, 0, 0, 0)',
-							},
-							ticks: {
-								display: false,
-								maxTicksLimit: 10
-							},
-						},
-						y: {
-							min: 0,
-							stack: 'queue',
-							stackWeight: 2,
-							grid: {
-								color: gridColor,
-								borderColor: 'rgb(0, 0, 0, 0)',
-							},
-						},
-						y2: {
-							min: 0,
-							offset: true,
-							stack: 'queue',
-							stackWeight: 1,
-							grid: {
-								color: gridColor,
-								borderColor: 'rgb(0, 0, 0, 0)',
-							},
-						},
-					},
-					interaction: {
-						intersect: false,
-					},
-					plugins: {
-						legend: {
-							position: 'bottom',
-							labels: {
-								boxWidth: 16,
-							},
-						},
-						tooltip: {
-							mode: 'index',
-							animation: {
-								duration: 0,
-							},
-						},
-					},
-				},
-			});
-
-			const onStats = (stats) => {
-				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);
-				if (chartInstance.data.datasets[0].data.length > 200) {
-					chartInstance.data.labels.shift();
-					chartInstance.data.datasets[0].data.shift();
-					chartInstance.data.datasets[1].data.shift();
-					chartInstance.data.datasets[2].data.shift();
-					chartInstance.data.datasets[3].data.shift();
-				}
-				chartInstance.update();
-			};
-
-			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.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);
-					if (chartInstance.data.datasets[0].data.length > 200) {
-						chartInstance.data.labels.shift();
-						chartInstance.data.datasets[0].data.shift();
-						chartInstance.data.datasets[1].data.shift();
-						chartInstance.data.datasets[2].data.shift();
-						chartInstance.data.datasets[3].data.shift();
-					}
-				}
-				chartInstance.update();
-			};
-
-			props.connection.on('stats', onStats);
-			props.connection.on('statsLog', onStatsLog);
-
-			onUnmounted(() => {
-				props.connection.off('stats', onStats);
-				props.connection.off('statsLog', onStatsLog);
-			});
-		});
-
-		return {
-			chartEl,
-		};
-	},
-});
-</script>
-
-<style lang="scss" scoped>
-
-</style>
diff --git a/packages/client/src/pages/admin/overview.federation.vue b/packages/client/src/pages/admin/overview.federation.vue
new file mode 100644
index 0000000000..6709c30c64
--- /dev/null
+++ b/packages/client/src/pages/admin/overview.federation.vue
@@ -0,0 +1,105 @@
+<template>
+<div class="wbrkwale">
+	<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 v-if="instance.iconUrl" :src="instance.iconUrl" alt=""/>
+			<div class="body">
+				<a class="a" :href="'https://' + instance.host" target="_blank" :title="instance.host">{{ instance.name ?? instance.host }}</a>
+				<p>{{ instance.host }}</p>
+			</div>
+			<MkMiniChart class="chart" :src="charts[i].requests.received"/>
+		</div>
+	</transition-group>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, onUnmounted, ref } from 'vue';
+import MkMiniChart from '@/components/mini-chart.vue';
+import * as os from '@/os';
+
+const instances = ref([]);
+const charts = ref([]);
+const fetching = ref(true);
+
+const fetch = async () => {
+	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' })));
+	instances.value = fetchedInstances;
+	charts.value = fetchedCharts;
+	fetching.value = false;
+};
+
+let intervalId;
+
+onMounted(() => {
+	fetch();
+	intervalId = window.setInterval(fetch, 1000 * 60);
+});
+
+onUnmounted(() => {
+	window.clearInterval(intervalId);
+});
+</script>
+
+<style lang="scss" scoped>
+.wbrkwale {
+	> .instances {
+		.chart-move {
+			transition: transform 1s ease;
+		}
+
+		> .instance {
+			display: flex;
+			align-items: center;
+			padding: 16px 20px;
+
+			&:not(:last-child) {
+				border-bottom: solid 0.5px var(--divider);
+			}
+
+			> img {
+				display: block;
+				width: 34px;
+				height: 34px;
+				object-fit: cover;
+				border-radius: 4px;
+				margin-right: 12px;
+			}
+
+			> .body {
+				flex: 1;
+				overflow: hidden;
+				font-size: 0.9em;
+				color: var(--fg);
+				padding-right: 8px;
+
+				> .a {
+					display: block;
+					width: 100%;
+					white-space: nowrap;
+					overflow: hidden;
+					text-overflow: ellipsis;
+				}
+
+				> p {
+					margin: 0;
+					font-size: 75%;
+					opacity: 0.7;
+					white-space: nowrap;
+					overflow: hidden;
+					text-overflow: ellipsis;
+				}
+			}
+
+			> .chart {
+				height: 30px;
+			}
+		}
+	}
+}
+</style>
diff --git a/packages/client/src/pages/admin/overview.queue-chart.vue b/packages/client/src/pages/admin/overview.queue-chart.vue
new file mode 100644
index 0000000000..646d1ac2f3
--- /dev/null
+++ b/packages/client/src/pages/admin/overview.queue-chart.vue
@@ -0,0 +1,213 @@
+<template>
+<canvas ref="chartEl"></canvas>
+</template>
+
+<script lang="ts" setup>
+import { defineComponent, 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';
+import { useChartTooltip } from '@/scripts/use-chart-tooltip';
+
+Chart.register(
+	ArcElement,
+	LineElement,
+	BarElement,
+	PointElement,
+	BarController,
+	LineController,
+	CategoryScale,
+	LinearScale,
+	TimeScale,
+	Legend,
+	Title,
+	Tooltip,
+	SubTitle,
+	Filler,
+);
+
+const props = defineProps<{
+	domain: string;
+	connection: any;
+}>();
+
+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);
+	const g = parseInt(result[2], 16);
+	const b = parseInt(result[3], 16);
+	return `rgba(${r}, ${g}, ${b}, ${a})`;
+};
+
+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');
+
+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.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);
+	if (chartInstance.data.datasets[0].data.length > 200) {
+		chartInstance.data.labels.shift();
+		chartInstance.data.datasets[0].data.shift();
+		chartInstance.data.datasets[1].data.shift();
+		chartInstance.data.datasets[2].data.shift();
+		chartInstance.data.datasets[3].data.shift();
+	}
+	chartInstance.update();
+};
+
+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.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);
+		if (chartInstance.data.datasets[0].data.length > 200) {
+			chartInstance.data.labels.shift();
+			chartInstance.data.datasets[0].data.shift();
+			chartInstance.data.datasets[1].data.shift();
+			chartInstance.data.datasets[2].data.shift();
+			chartInstance.data.datasets[3].data.shift();
+		}
+	}
+	chartInstance.update();
+};
+
+onMounted(() => {
+	chartInstance = new Chart(chartEl.value, {
+		type: 'line',
+		data: {
+			labels: [],
+			datasets: [{
+				label: 'Process',
+				pointRadius: 0,
+				tension: 0.3,
+				borderWidth: 2,
+				borderJoinStyle: 'round',
+				borderColor: '#00E396',
+				backgroundColor: alpha('#00E396', 0.1),
+				data: [],
+			}, {
+				label: 'Active',
+				pointRadius: 0,
+				tension: 0.3,
+				borderWidth: 2,
+				borderJoinStyle: 'round',
+				borderColor: '#00BCD4',
+				backgroundColor: alpha('#00BCD4', 0.1),
+				data: [],
+			}, {
+				label: 'Waiting',
+				pointRadius: 0,
+				tension: 0.3,
+				borderWidth: 2,
+				borderJoinStyle: 'round',
+				borderColor: '#FFB300',
+				backgroundColor: alpha('#FFB300', 0.1),
+				data: [],
+			}, {
+				label: 'Delayed',
+				pointRadius: 0,
+				tension: 0.3,
+				borderWidth: 2,
+				borderJoinStyle: 'round',
+				borderColor: '#E53935',
+				borderDash: [5, 5],
+				fill: false,
+				data: [],
+			}],
+		},
+		options: {
+			aspectRatio: 2.5,
+			layout: {
+				padding: {
+					left: 0,
+					right: 8,
+					top: 0,
+					bottom: 0,
+				},
+			},
+			scales: {
+				x: {
+					grid: {
+						display: false,
+					},
+					ticks: {
+						display: false,
+						maxTicksLimit: 10,
+					},
+				},
+				y: {
+					min: 0,
+					grid: {
+						display: false,
+					},
+					ticks: {
+						display: false,
+					},
+				},
+			},
+			interaction: {
+				intersect: false,
+			},
+			plugins: {
+				legend: {
+					display: false,
+				},
+				tooltip: {
+					enabled: false,
+					mode: 'index',
+					animation: {
+						duration: 0,
+					},
+					external: externalTooltipHandler,
+				},
+			},
+		},
+	});
+
+	props.connection.on('stats', onStats);
+	props.connection.on('statsLog', onStatsLog);
+
+	props.connection.send('requestLog', {
+		id: Math.random().toString().substr(2, 8),
+	});
+});
+
+onUnmounted(() => {
+	props.connection.off('stats', onStats);
+	props.connection.off('statsLog', onStatsLog);
+});
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/packages/client/src/pages/admin/overview.vue b/packages/client/src/pages/admin/overview.vue
index f81f6104c7..22d9d72a70 100644
--- a/packages/client/src/pages/admin/overview.vue
+++ b/packages/client/src/pages/admin/overview.vue
@@ -1,92 +1,318 @@
 <template>
-<div v-size="{ max: [740] }" class="edbbcaef">
-	<div v-if="stats" class="cfcdecdf" style="margin: var(--margin)">
-		<div class="number _panel">
-			<div class="label">Users</div>
-			<div class="value _monospace">
-				{{ number(stats.originalUsersCount) }}
-				<MkNumberDiff v-if="usersComparedToThePrevDay != null" v-tooltip="i18n.ts.dayOverDayChanges" class="diff" :value="usersComparedToThePrevDay"><template #before>(</template><template #after>)</template></MkNumberDiff>
+<MkSpacer :content-max="900">
+	<div ref="rootEl" v-size="{ max: [740] }" class="edbbcaef">
+		<div class="left">
+			<div v-if="stats" class="container stats">
+				<div class="title">Stats</div>
+				<div class="body">
+					<div class="number _panel">
+						<div class="label">Users</div>
+						<div class="value _monospace">
+							{{ number(stats.originalUsersCount) }}
+							<MkNumberDiff v-if="usersComparedToThePrevDay != null" v-tooltip="i18n.ts.dayOverDayChanges" class="diff" :value="usersComparedToThePrevDay"><template #before>(</template><template #after>)</template></MkNumberDiff>
+						</div>
+					</div>
+					<div class="number _panel">
+						<div class="label">Notes</div>
+						<div class="value _monospace">
+							{{ number(stats.originalNotesCount) }}
+							<MkNumberDiff v-if="notesComparedToThePrevDay != null" v-tooltip="i18n.ts.dayOverDayChanges" class="diff" :value="notesComparedToThePrevDay"><template #before>(</template><template #after>)</template></MkNumberDiff>
+						</div>
+					</div>
+				</div>
+			</div>
+
+			<div class="container queue">
+				<div class="title">Job queue</div>
+				<div class="body deliver">
+					<div class="title">Deliver</div>
+					<XQueueChart :connection="queueStatsConnection" domain="deliver"/>
+				</div>
+				<div class="body inbox">
+					<div class="title">Inbox</div>
+					<XQueueChart :connection="queueStatsConnection" domain="inbox"/>
+				</div>
+			</div>
+
+			<!--<XMetrics/>-->
+
+			<div class="container env">
+				<div class="title">Enviroment</div>
+				<div class="body">
+					<div class="number _panel">
+						<div class="label">Misskey</div>
+						<div class="value _monospace">{{ version }}</div>
+					</div>
+					<div v-if="serverInfo" class="number _panel">
+						<div class="label">Node.js</div>
+						<div class="value _monospace">{{ serverInfo.node }}</div>
+					</div>
+					<div v-if="serverInfo" class="number _panel">
+						<div class="label">PostgreSQL</div>
+						<div class="value _monospace">{{ serverInfo.psql }}</div>
+					</div>
+					<div v-if="serverInfo" class="number _panel">
+						<div class="label">Redis</div>
+						<div class="value _monospace">{{ serverInfo.redis }}</div>
+					</div>
+					<div class="number _panel">
+						<div class="label">Vue</div>
+						<div class="value _monospace">{{ vueVersion }}</div>
+					</div>
+				</div>
 			</div>
 		</div>
-		<div class="number _panel">
-			<div class="label">Notes</div>
-			<div class="value _monospace">
-				{{ number(stats.originalNotesCount) }}
-				<MkNumberDiff v-if="notesComparedToThePrevDay != null" v-tooltip="i18n.ts.dayOverDayChanges" class="diff" :value="notesComparedToThePrevDay"><template #before>(</template><template #after>)</template></MkNumberDiff>
+		<div class="right">
+			<div class="container charts">
+				<div class="title">Active users</div>
+				<div class="body">
+					<canvas ref="chartEl"></canvas>
+				</div>
+			</div>
+			<div class="container federation">
+				<div class="title">Active instances</div>
+				<div class="body">
+					<XFederation/>
+				</div>
 			</div>
 		</div>
 	</div>
-
-	<MkContainer :foldable="true" class="charts">
-		<template #header><i class="fas fa-chart-bar"></i>{{ i18n.ts.charts }}</template>
-		<div style="padding: 12px;">
-			<MkInstanceStats :chart-limit="500" :detailed="true"/>
-		</div>
-	</MkContainer>
-
-	<div class="queue">
-		<MkContainer :foldable="true" :thin="true" class="deliver">
-			<template #header>Queue: deliver</template>
-			<MkQueueChart :connection="queueStatsConnection" domain="deliver"/>
-		</MkContainer>
-		<MkContainer :foldable="true" :thin="true" class="inbox">
-			<template #header>Queue: inbox</template>
-			<MkQueueChart :connection="queueStatsConnection" domain="inbox"/>
-		</MkContainer>
-	</div>
-
-	<!--<XMetrics/>-->
-
-	<MkFolder style="margin: var(--margin)">
-		<template #header><i class="fas fa-info-circle"></i> {{ i18n.ts.info }}</template>
-		<div class="cfcdecdf">
-			<div class="number _panel">
-				<div class="label">Misskey</div>
-				<div class="value _monospace">{{ version }}</div>
-			</div>
-			<div v-if="serverInfo" class="number _panel">
-				<div class="label">Node.js</div>
-				<div class="value _monospace">{{ serverInfo.node }}</div>
-			</div>
-			<div v-if="serverInfo" class="number _panel">
-				<div class="label">PostgreSQL</div>
-				<div class="value _monospace">{{ serverInfo.psql }}</div>
-			</div>
-			<div v-if="serverInfo" class="number _panel">
-				<div class="label">Redis</div>
-				<div class="value _monospace">{{ serverInfo.redis }}</div>
-			</div>
-			<div class="number _panel">
-				<div class="label">Vue</div>
-				<div class="value _monospace">{{ vueVersion }}</div>
-			</div>
-		</div>
-	</MkFolder>
-</div>
+</MkSpacer>
 </template>
 
 <script lang="ts" setup>
 import { markRaw, version as vueVersion, onMounted, onBeforeUnmount, nextTick } from 'vue';
+import {
+	Chart,
+	ArcElement,
+	LineElement,
+	BarElement,
+	PointElement,
+	BarController,
+	LineController,
+	CategoryScale,
+	LinearScale,
+	TimeScale,
+	Legend,
+	Title,
+	Tooltip,
+	SubTitle,
+	Filler,
+} from 'chart.js';
+import { enUS } from 'date-fns/locale';
+import tinycolor from 'tinycolor2';
+import MagicGrid from 'magic-grid';
 import XMetrics from './metrics.vue';
+import XFederation from './overview.federation.vue';
+import XQueueChart from './overview.queue-chart.vue';
 import MkInstanceStats from '@/components/instance-stats.vue';
 import MkNumberDiff from '@/components/number-diff.vue';
-import MkContainer from '@/components/ui/container.vue';
-import MkFolder from '@/components/ui/folder.vue';
-import MkQueueChart from '@/components/queue-chart.vue';
 import { version, url } from '@/config';
 import number from '@/filters/number';
 import * as os from '@/os';
 import { stream } from '@/stream';
 import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';
+import 'chartjs-adapter-date-fns';
+import { defaultStore } from '@/store';
+import { useChartTooltip } from '@/scripts/use-chart-tooltip';
 
+Chart.register(
+	ArcElement,
+	LineElement,
+	BarElement,
+	PointElement,
+	BarController,
+	LineController,
+	CategoryScale,
+	LinearScale,
+	TimeScale,
+	Legend,
+	Title,
+	Tooltip,
+	SubTitle,
+	Filler,
+	//gradient,
+);
+
+const rootEl = $ref<HTMLElement>();
+const chartEl = $ref<HTMLCanvasElement>(null);
 let stats: any = $ref(null);
 let serverInfo: any = $ref(null);
 let usersComparedToThePrevDay: any = $ref(null);
 let notesComparedToThePrevDay: any = $ref(null);
 const queueStatsConnection = markRaw(stream.useChannel('queueStats'));
+const now = new Date();
+let chartInstance: Chart = null;
+const chartLimit = 30;
+
+const { handler: externalTooltipHandler } = useChartTooltip();
+
+async function renderChart() {
+	if (chartInstance) {
+		chartInstance.destroy();
+	}
+
+	const getDate = (ago: number) => {
+		const y = now.getFullYear();
+		const m = now.getMonth();
+		const d = now.getDate();
+
+		return new Date(y, m, d - ago);
+	};
+
+	const format = (arr) => {
+		return arr.map((v, i) => ({
+			x: getDate(i).getTime(),
+			y: v,
+		}));
+	};
+
+	const raw = await os.api('charts/active-users', { limit: chartLimit, span: 'day' });
+
+	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');
+
+	const color = tinycolor(getComputedStyle(document.documentElement).getPropertyValue('--accent'));
+
+	chartInstance = new Chart(chartEl, {
+		type: 'bar',
+		data: {
+			//labels: new Array(props.limit).fill(0).map((_, i) => getDate(i).toLocaleString()).slice().reverse(),
+			datasets: [{
+				parsing: false,
+				label: 'a',
+				data: format(raw.readWrite).slice().reverse(),
+				tension: 0.3,
+				pointRadius: 0,
+				borderWidth: 0,
+				borderJoinStyle: 'round',
+				borderRadius: 3,
+				backgroundColor: color,
+				/*gradient: props.bar ? undefined : {
+					backgroundColor: {
+						axis: 'y',
+						colors: {
+							0: alpha(x.color ? x.color : getColor(i), 0),
+							[maxes[i]]: alpha(x.color ? x.color : getColor(i), 0.2),
+						},
+					},
+				},*/
+				barPercentage: 0.9,
+				categoryPercentage: 0.9,
+				clip: 8,
+			}],
+		},
+		options: {
+			aspectRatio: 2.5,
+			layout: {
+				padding: {
+					left: 0,
+					right: 8,
+					top: 0,
+					bottom: 0,
+				},
+			},
+			scales: {
+				x: {
+					type: 'time',
+					stacked: true,
+					offset: false,
+					time: {
+						stepSize: 1,
+						unit: 'month',
+					},
+					grid: {
+						display: false,
+					},
+					ticks: {
+						display: false,
+					},
+					adapters: {
+						date: {
+							locale: enUS,
+						},
+					},
+					min: getDate(chartLimit).getTime(),
+				},
+				y: {
+					position: 'left',
+					stacked: true,
+					grid: {
+						display: false,
+					},
+					ticks: {
+						display: false,
+						//mirror: true,
+					},
+				},
+			},
+			interaction: {
+				intersect: false,
+				mode: 'index',
+			},
+			elements: {
+				point: {
+					hoverRadius: 5,
+					hoverBorderWidth: 2,
+				},
+			},
+			animation: false,
+			plugins: {
+				legend: {
+					display: false,
+				},
+				tooltip: {
+					enabled: false,
+					mode: 'index',
+					animation: {
+						duration: 0,
+					},
+					external: externalTooltipHandler,
+				},
+				//gradient,
+			},
+		},
+		plugins: [{
+			id: 'vLine',
+			beforeDraw(chart, args, options) {
+				if (chart.tooltip._active && 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();
+				}
+			},
+		}],
+	});
+}
+
+onMounted(async () => {
+	/*
+	const magicGrid = new MagicGrid({
+		container: rootEl,
+		static: true,
+		animate: true,
+	});
+
+	magicGrid.listen();
+	*/
+
+	renderChart();
 
-onMounted(async () => {	
 	os.api('stats', {}).then(statsResponse => {
 		stats = statsResponse;
 
@@ -128,63 +354,108 @@ definePageMetadata({
 
 <style lang="scss" scoped>
 .edbbcaef {
-	.cfcdecdf {
-		display: grid;
-		grid-gap: 8px;
-		grid-template-columns: repeat(auto-fill,minmax(150px,1fr));
+	display: flex;
 
-		> .number {
-			padding: 12px 16px;
+	> .left, > .right {
+		box-sizing: border-box;
+		width: 50%;
 
-			> .label {
-				opacity: 0.7;
-				font-size: 0.8em;
-			}
+		> .container {
+			margin: 32px 0;
 
-			> .value {
-				font-weight: bold;
+			> .title {
 				font-size: 1.2em;
+				font-weight: bold;
+				margin-bottom: 16px;
+			}
 
-				> .diff {
-					font-size: 0.8em;
+			&.stats {
+				> .body {
+					display: grid;
+					grid-gap: 16px;
+					grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+
+					> .number {
+						padding: 14px 20px;
+
+						> .label {
+							opacity: 0.7;
+							font-size: 0.8em;
+						}
+
+						> .value {
+							font-weight: bold;
+							font-size: 1.5em;
+
+							> .diff {
+								font-size: 0.8em;
+							}
+						}
+					}
+				}
+			}
+
+			&.env {
+				> .body {
+					display: grid;
+					grid-gap: 16px;
+					grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+
+					> .number {
+						padding: 14px 20px;
+
+						> .label {
+							opacity: 0.7;
+							font-size: 0.8em;
+						}
+
+						> .value {
+							font-size: 1.2em;
+						}
+					}
+				}
+			}
+
+			&.charts {
+				> .body {
+					padding: 32px;
+					background: var(--panel);
+					border-radius: var(--radius);
+				}
+			}
+
+			&.federation {
+				> .body {
+					background: var(--panel);
+					border-radius: var(--radius);
+					overflow: clip;
+				}
+			}
+
+			&.queue {
+				> .body {
+					padding: 32px;
+					background: var(--panel);
+					border-radius: var(--radius);
+
+					&:not(:last-child) {
+						margin-bottom: 16px;
+					}
+
+					> .title {
+
+					}
 				}
 			}
 		}
 	}
 
-	> .charts {
-		margin: var(--margin);
+	> .left {
+		padding-right: 16px;
 	}
 
-	> .queue {
-		margin: var(--margin);
-		display: flex;
-
-		> .deliver,
-		> .inbox {
-			flex: 1;
-			width: 50%;
-
-			&:not(:first-child) {
-				margin-left: var(--margin);
-			}
-		}
-	}
-
-	&.max-width_740px {
-		> .queue {
-			display: block;
-
-			> .deliver,
-			> .inbox {
-				width: 100%;
-
-				&:not(:first-child) {
-					margin-top: var(--margin);
-					margin-left: 0;
-				}
-			}
-		}
+	> .right {
+		padding-left: 16px;
 	}
 }
 </style>
diff --git a/packages/client/src/pages/admin/queue.chart.chart.vue b/packages/client/src/pages/admin/queue.chart.chart.vue
new file mode 100644
index 0000000000..dbfaf6caa4
--- /dev/null
+++ b/packages/client/src/pages/admin/queue.chart.chart.vue
@@ -0,0 +1,181 @@
+<template>
+<canvas ref="chartEl"></canvas>
+</template>
+
+<script lang="ts" setup>
+import { watch, 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';
+import { useChartTooltip } from '@/scripts/use-chart-tooltip';
+
+Chart.register(
+	ArcElement,
+	LineElement,
+	BarElement,
+	PointElement,
+	BarController,
+	LineController,
+	CategoryScale,
+	LinearScale,
+	TimeScale,
+	Legend,
+	Title,
+	Tooltip,
+	SubTitle,
+	Filler,
+);
+
+const props = defineProps<{
+	type: string;
+}>();
+
+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);
+	const g = parseInt(result[2], 16);
+	const b = parseInt(result[3], 16);
+	return `rgba(${r}, ${g}, ${b}, ${a})`;
+};
+
+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');
+
+const { handler: externalTooltipHandler } = useChartTooltip();
+
+let chartInstance: Chart;
+
+function setData(values) {
+	if (chartInstance == null) return;
+	for (const value of values) {
+		chartInstance.data.labels.push('');
+		chartInstance.data.datasets[0].data.push(value);
+		if (chartInstance.data.datasets[0].data.length > 200) {
+			chartInstance.data.labels.shift();
+			chartInstance.data.datasets[0].data.shift();
+		}
+	}
+	chartInstance.update();
+}
+
+function pushData(value) {
+	if (chartInstance == null) return;
+	chartInstance.data.labels.push('');
+	chartInstance.data.datasets[0].data.push(value);
+	if (chartInstance.data.datasets[0].data.length > 200) {
+		chartInstance.data.labels.shift();
+		chartInstance.data.datasets[0].data.shift();
+	}
+	chartInstance.update();
+}
+
+const label =
+	props.type === 'process' ? 'Process' :
+	props.type === 'active' ? 'Active' :
+	props.type === 'delayed' ? 'Delayed' :
+	props.type === 'waiting' ? 'Waiting' :
+	'?' as never;
+
+const color =
+	props.type === 'process' ? '#00E396' :
+	props.type === 'active' ? '#00BCD4' :
+	props.type === 'delayed' ? '#E53935' :
+	props.type === 'waiting' ? '#FFB300' :
+	'?' as never;
+
+onMounted(() => {
+	chartInstance = new Chart(chartEl.value, {
+		type: 'line',
+		data: {
+			labels: [],
+			datasets: [{
+				label: label,
+				pointRadius: 0,
+				tension: 0.3,
+				borderWidth: 2,
+				borderJoinStyle: 'round',
+				borderColor: color,
+				backgroundColor: alpha(color, 0.1),
+				data: [],
+			}],
+		},
+		options: {
+			aspectRatio: 2.5,
+			layout: {
+				padding: {
+					left: 0,
+					right: 8,
+					top: 0,
+					bottom: 0,
+				},
+			},
+			scales: {
+				x: {
+					grid: {
+						display: true,
+						color: gridColor,
+						borderColor: 'rgb(0, 0, 0, 0)',
+					},
+					ticks: {
+						display: false,
+						maxTicksLimit: 10,
+					},
+				},
+				y: {
+					min: 0,
+					grid: {
+						color: gridColor,
+						borderColor: 'rgb(0, 0, 0, 0)',
+					},
+				},
+			},
+			interaction: {
+				intersect: false,
+			},
+			plugins: {
+				legend: {
+					display: false,
+				},
+				tooltip: {
+					enabled: false,
+					mode: 'index',
+					animation: {
+						duration: 0,
+					},
+					external: externalTooltipHandler,
+				},
+			},
+		},
+	});
+});
+
+defineExpose({
+	setData,
+	pushData,
+});
+</script>
+
+<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 be63830bdd..c213037b65 100644
--- a/packages/client/src/pages/admin/queue.chart.vue
+++ b/packages/client/src/pages/admin/queue.chart.vue
@@ -1,80 +1,148 @@
 <template>
-<div class="_debobigegoItem">
-	<div class="_debobigegoLabel"><slot name="title"></slot></div>
-	<div class="_debobigegoPanel 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 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>
 		</div>
-		<div class="">
-			<MkQueueChart :domain="domain" :connection="connection"/>
-		</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;">{{ $ts.noJobs }}</span>
-		</div>
+		<span v-else style="opacity: 0.5;">{{ $ts.noJobs }}</span>
 	</div>
 </div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, ref } from 'vue';
+import { markRaw, onMounted, onUnmounted, ref } from 'vue';
+import XChart from './queue.chart.chart.vue';
 import number from '@/filters/number';
-import MkQueueChart from '@/components/queue-chart.vue';
 import * as os from '@/os';
+import { stream } from '@/stream';
+
+const connection = markRaw(stream.useChannel('queueStats'));
 
 const activeSincePrevTick = ref(0);
 const active = ref(0);
-const waiting = ref(0);
 const delayed = ref(0);
+const waiting = ref(0);
 const jobs = ref([]);
+let chartProcess = $ref<InstanceType<typeof XChart>>();
+let chartActive = $ref<InstanceType<typeof XChart>>();
+let chartDelayed = $ref<InstanceType<typeof XChart>>();
+let chartWaiting = $ref<InstanceType<typeof XChart>>();
 
 const props = defineProps<{
-	domain: string,
-	connection: any,
+	domain: string;
 }>();
 
+const onStats = (stats) => {
+	activeSincePrevTick.value = stats[props.domain].activeSincePrevTick;
+	active.value = stats[props.domain].active;
+	delayed.value = stats[props.domain].delayed;
+	waiting.value = stats[props.domain].waiting;
+
+	chartProcess.pushData(stats[props.domain].activeSincePrevTick);
+	chartActive.pushData(stats[props.domain].active);
+	chartDelayed.pushData(stats[props.domain].delayed);
+	chartWaiting.pushData(stats[props.domain].waiting);
+};
+
+const onStatsLog = (statsLog) => {
+	const dataProcess = [];
+	const dataActive = [];
+	const dataDelayed = [];
+	const dataWaiting = [];
+
+	for (const stats of [...statsLog].reverse()) {
+		dataProcess.push(stats[props.domain].activeSincePrevTick);
+		dataActive.push(stats[props.domain].active);
+		dataDelayed.push(stats[props.domain].delayed);
+		dataWaiting.push(stats[props.domain].waiting);
+	}
+
+	chartProcess.setData(dataProcess);
+	chartActive.setData(dataActive);
+	chartDelayed.setData(dataDelayed);
+	chartWaiting.setData(dataWaiting);
+};
+
 onMounted(() => {
 	os.api(props.domain === 'inbox' ? 'admin/queue/inbox-delayed' : props.domain === 'deliver' ? 'admin/queue/deliver-delayed' : null, {}).then(result => {
 		jobs.value = result;
 	});
 
-	const onStats = (stats) => {
-		activeSincePrevTick.value = stats[props.domain].activeSincePrevTick;
-		active.value = stats[props.domain].active;
-		waiting.value = stats[props.domain].waiting;
-		delayed.value = stats[props.domain].delayed;
-	};
-
-	props.connection.on('stats', onStats);
-
-	onUnmounted(() => {
-		props.connection.off('stats', onStats);
+	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.dispose();
+});
 </script>
 
 <style lang="scss" scoped>
 .pumxzjhg {
 	> .status {
 		padding: 16px;
-		border-bottom: solid 0.5px var(--divider);
+	}
+
+	> .charts {
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		gap: 16px;
+
+		> .chart {
+			min-width: 0;
+			padding: 16px;
+			background: var(--panel);
+			border-radius: var(--radius);
+
+			> .title {
+				margin-bottom: 8px;
+			}
+		}
 	}
 
 	> .jobs {
+		margin-top: 16px;
 		padding: 16px;
-		border-top: solid 0.5px var(--divider);
 		max-height: 180px;
 		overflow: auto;
+		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 c2865525ab..d091fe647c 100644
--- a/packages/client/src/pages/admin/queue.vue
+++ b/packages/client/src/pages/admin/queue.vue
@@ -1,14 +1,9 @@
 <template>
 <MkStickyContainer>
-	<template #header><XHeader :actions="headerActions" :tabs="headerTabs"/></template>
+	<template #header><XHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :content-max="800">
-		<XQueue :connection="connection" domain="inbox">
-			<template #title>In</template>
-		</XQueue>
-		<XQueue :connection="connection" domain="deliver">
-			<template #title>Out</template>
-		</XQueue>
-		<MkButton danger @click="clear()"><i class="fas fa-trash-alt"></i> {{ i18n.ts.clearQueue }}</MkButton>
+		<XQueue v-if="tab === 'deliver'" domain="deliver"/>
+		<XQueue v-else-if="tab === 'inbox'" domain="inbox"/>
 	</MkSpacer>
 </MkStickyContainer>
 </template>
@@ -19,12 +14,11 @@ import XQueue from './queue.chart.vue';
 import XHeader from './_header_.vue';
 import MkButton from '@/components/ui/button.vue';
 import * as os from '@/os';
-import { stream } from '@/stream';
 import * as config from '@/config';
 import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';
 
-const connection = markRaw(stream.useChannel('queueStats'));
+let tab = $ref('deliver');
 
 function clear() {
 	os.confirm({
@@ -38,19 +32,6 @@ function clear() {
 	});
 }
 
-onMounted(() => {
-	nextTick(() => {
-		connection.send('requestLog', {
-			id: Math.random().toString().substr(2, 8),
-			length: 200,
-		});
-	});
-});
-
-onBeforeUnmount(() => {
-	connection.dispose();
-});
-
 const headerActions = $computed(() => [{
 	asFullButton: true,
 	icon: 'fas fa-up-right-from-square',
@@ -60,7 +41,13 @@ const headerActions = $computed(() => [{
 	},
 }]);
 
-const headerTabs = $computed(() => []);
+const headerTabs = $computed(() => [{
+	key: 'deliver',
+	title: 'Deliver',
+}, {
+	key: 'inbox',
+	title: 'Inbox',
+}]);
 
 definePageMetadata({
 	title: i18n.ts.jobQueue,

From 0af581f2e6fdb5167991227a9e7fe4ba758d2ff8 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sat, 25 Jun 2022 23:01:48 +0900
Subject: [PATCH 62/90] 12.112.0-beta.4

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 6308308766..c1485eba43 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "misskey",
-	"version": "12.112.0-beta.3",
+	"version": "12.112.0-beta.4",
 	"codename": "indigo",
 	"repository": {
 		"type": "git",

From f071ea490299778ae84f57fb2d82835665c647f8 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sat, 25 Jun 2022 23:16:02 +0900
Subject: [PATCH 63/90] fix(client): remove needless requestLog call

---
 packages/client/src/pages/admin/overview.queue-chart.vue | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/packages/client/src/pages/admin/overview.queue-chart.vue b/packages/client/src/pages/admin/overview.queue-chart.vue
index 646d1ac2f3..e3889e04bc 100644
--- a/packages/client/src/pages/admin/overview.queue-chart.vue
+++ b/packages/client/src/pages/admin/overview.queue-chart.vue
@@ -196,10 +196,6 @@ onMounted(() => {
 
 	props.connection.on('stats', onStats);
 	props.connection.on('statsLog', onStatsLog);
-
-	props.connection.send('requestLog', {
-		id: Math.random().toString().substr(2, 8),
-	});
 });
 
 onUnmounted(() => {

From 6a4574b612f0a729096878158e3c03d753c8200b Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sun, 26 Jun 2022 01:45:33 +0900
Subject: [PATCH 64/90] enhance(client): tweak control panel dashboard

---
 .../src/pages/admin/overview.federation.vue   | 12 +--
 .../src/pages/admin/overview.queue-chart.vue  |  2 +-
 .../client/src/pages/admin/overview.user.vue  | 76 +++++++++++++++++
 packages/client/src/pages/admin/overview.vue  | 81 +++++++++++++++++--
 4 files changed, 158 insertions(+), 13 deletions(-)
 create mode 100644 packages/client/src/pages/admin/overview.user.vue

diff --git a/packages/client/src/pages/admin/overview.federation.vue b/packages/client/src/pages/admin/overview.federation.vue
index 6709c30c64..6da1fa4e98 100644
--- a/packages/client/src/pages/admin/overview.federation.vue
+++ b/packages/client/src/pages/admin/overview.federation.vue
@@ -2,14 +2,14 @@
 <div class="wbrkwale">
 	<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">
+		<MkA v-for="(instance, i) in instances" :key="instance.id" :to="`/instance-info/${instance.host}`" class="instance">
 			<img v-if="instance.iconUrl" :src="instance.iconUrl" alt=""/>
 			<div class="body">
-				<a class="a" :href="'https://' + instance.host" target="_blank" :title="instance.host">{{ instance.name ?? instance.host }}</a>
-				<p>{{ instance.host }}</p>
+				<div class="name">{{ instance.name ?? instance.host }}</div>
+				<div class="host">{{ instance.host }}</div>
 			</div>
 			<MkMiniChart class="chart" :src="charts[i].requests.received"/>
-		</div>
+		</MkA>
 	</transition-group>
 </div>
 </template>
@@ -78,7 +78,7 @@ onUnmounted(() => {
 				color: var(--fg);
 				padding-right: 8px;
 
-				> .a {
+				> .name {
 					display: block;
 					width: 100%;
 					white-space: nowrap;
@@ -86,7 +86,7 @@ onUnmounted(() => {
 					text-overflow: ellipsis;
 				}
 
-				> p {
+				> .host {
 					margin: 0;
 					font-size: 75%;
 					opacity: 0.7;
diff --git a/packages/client/src/pages/admin/overview.queue-chart.vue b/packages/client/src/pages/admin/overview.queue-chart.vue
index e3889e04bc..9f23a14b5d 100644
--- a/packages/client/src/pages/admin/overview.queue-chart.vue
+++ b/packages/client/src/pages/admin/overview.queue-chart.vue
@@ -146,7 +146,7 @@ onMounted(() => {
 			}],
 		},
 		options: {
-			aspectRatio: 2.5,
+			aspectRatio: 3,
 			layout: {
 				padding: {
 					left: 0,
diff --git a/packages/client/src/pages/admin/overview.user.vue b/packages/client/src/pages/admin/overview.user.vue
new file mode 100644
index 0000000000..40592b280b
--- /dev/null
+++ b/packages/client/src/pages/admin/overview.user.vue
@@ -0,0 +1,76 @@
+<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>
+</template>
+
+<script lang="ts" setup>
+import * as misskey from 'misskey-js';
+import MkMiniChart from '@/components/mini-chart.vue';
+import * as os from '@/os';
+import { acct } from '@/filters/user';
+
+const props = defineProps<{
+	user: misskey.entities.User;
+}>();
+
+const chart = $ref(null);
+
+os.apiGet('charts/user/notes', { userId: props.user.id, limit: 16, span: 'day' }).then(res => {
+	chart = res;
+});
+</script>
+
+<style lang="scss" module>
+.root {
+	$bodyTitleHieght: 18px;
+	$bodyInfoHieght: 16px;
+
+	display: flex;
+	align-items: center;
+
+	> :global(.avatar) {
+		display: block;
+		width: ($bodyTitleHieght + $bodyInfoHieght);
+		height: ($bodyTitleHieght + $bodyInfoHieght);
+		margin-right: 12px;
+	}
+
+	> :global(.body) {
+		flex: 1;
+		overflow: hidden;
+		font-size: 0.9em;
+		color: var(--fg);
+		padding-right: 8px;
+
+		> :global(.name) {
+			display: block;
+			width: 100%;
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			line-height: $bodyTitleHieght;
+		}
+
+		> :global(.sub) {
+			display: block;
+			width: 100%;
+			font-size: 95%;
+			opacity: 0.7;
+			line-height: $bodyInfoHieght;
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+	}
+
+	> :global(.chart) {
+		height: 30px;
+	}
+}
+</style>
diff --git a/packages/client/src/pages/admin/overview.vue b/packages/client/src/pages/admin/overview.vue
index 22d9d72a70..8e57c7aafb 100644
--- a/packages/client/src/pages/admin/overview.vue
+++ b/packages/client/src/pages/admin/overview.vue
@@ -34,6 +34,13 @@
 				</div>
 			</div>
 
+			<div class="container users">
+				<div class="title">New users</div>
+				<div v-if="newUsers" class="body">
+					<XUser v-for="user in newUsers" :key="user.id" class="user" :user="user"/>
+				</div>
+			</div>
+
 			<!--<XMetrics/>-->
 
 			<div class="container env">
@@ -75,6 +82,30 @@
 					<XFederation/>
 				</div>
 			</div>
+			<div v-if="stats" class="container federationStats">
+				<div class="title">Federation</div>
+				<div class="body">
+					<div class="number _panel">
+						<div class="label">Sub</div>
+						<div class="value _monospace">
+							{{ number(federationSubActive) }}
+							<MkNumberDiff v-tooltip="i18n.ts.dayOverDayChanges" class="diff" :value="federationSubActiveDiff"><template #before>(</template><template #after>)</template></MkNumberDiff>
+						</div>
+					</div>
+					<div class="number _panel">
+						<div class="label">Pub</div>
+						<div class="value _monospace">
+							{{ number(federationPubActive) }}
+							<MkNumberDiff v-tooltip="i18n.ts.dayOverDayChanges" class="diff" :value="federationPubActiveDiff"><template #before>(</template><template #after>)</template></MkNumberDiff>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="container files">
+				<div class="title">Recent files</div>
+				<div class="body">
+				</div>
+			</div>
 		</div>
 	</div>
 </MkSpacer>
@@ -105,6 +136,7 @@ import MagicGrid from 'magic-grid';
 import XMetrics from './metrics.vue';
 import XFederation from './overview.federation.vue';
 import XQueueChart from './overview.queue-chart.vue';
+import XUser from './overview.user.vue';
 import MkInstanceStats from '@/components/instance-stats.vue';
 import MkNumberDiff from '@/components/number-diff.vue';
 import { version, url } from '@/config';
@@ -141,6 +173,11 @@ let stats: any = $ref(null);
 let serverInfo: any = $ref(null);
 let usersComparedToThePrevDay: any = $ref(null);
 let notesComparedToThePrevDay: any = $ref(null);
+let federationPubActive = $ref<number | null>(null);
+let federationPubActiveDiff = $ref<number | null>(null);
+let federationSubActive = $ref<number | null>(null);
+let federationSubActiveDiff = $ref<number | null>(null);
+let newUsers = $ref(null);
 const queueStatsConnection = markRaw(stream.useChannel('queueStats'));
 const now = new Date();
 let chartInstance: Chart = null;
@@ -325,10 +362,24 @@ onMounted(async () => {
 		});
 	});
 
+	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.api('admin/server-info').then(serverInfoResponse => {
 		serverInfo = serverInfoResponse;
 	});
 
+	os.api('admin/show-users', {
+		limit: 5,
+		sort: '+createdAt',
+	}).then(res => {
+		newUsers = res;
+	});
+
 	nextTick(() => {
 		queueStatsConnection.send('requestLog', {
 			id: Math.random().toString().substr(2, 8),
@@ -364,12 +415,12 @@ definePageMetadata({
 			margin: 32px 0;
 
 			> .title {
-				font-size: 1.2em;
+				font-size: 1.1em;
 				font-weight: bold;
 				margin-bottom: 16px;
 			}
 
-			&.stats {
+			&.stats, &.federationStats {
 				> .body {
 					display: grid;
 					grid-gap: 16px;
@@ -388,7 +439,7 @@ definePageMetadata({
 							font-size: 1.5em;
 
 							> .diff {
-								font-size: 0.8em;
+								font-size: 0.7em;
 							}
 						}
 					}
@@ -410,7 +461,7 @@ definePageMetadata({
 						}
 
 						> .value {
-							font-size: 1.2em;
+							font-size: 1.1em;
 						}
 					}
 				}
@@ -424,6 +475,21 @@ definePageMetadata({
 				}
 			}
 
+			&.users {
+				> .body {
+					background: var(--panel);
+					border-radius: var(--radius);
+
+					> .user {
+						padding: 16px 20px;
+
+						&:not(:last-child) {
+							border-bottom: solid 0.5px var(--divider);
+						}
+					}
+				}
+			}
+
 			&.federation {
 				> .body {
 					background: var(--panel);
@@ -434,7 +500,8 @@ definePageMetadata({
 
 			&.queue {
 				> .body {
-					padding: 32px;
+					position: relative;
+					padding: 24px;
 					background: var(--panel);
 					border-radius: var(--radius);
 
@@ -443,7 +510,9 @@ definePageMetadata({
 					}
 
 					> .title {
-
+						position: absolute;
+						top: 24px;
+						left: 24px;
 					}
 				}
 			}

From 5e95a1f7af841f10646133ad0cc155a2c5cea9fd Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sun, 26 Jun 2022 03:12:58 +0900
Subject: [PATCH 65/90] refactor(client): extract interval logic to a
 composable function
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

あと`onUnmounted`を`onMounted`内で呼んでいたりしたのを修正したりとか
---
 packages/client/src/components/form/input.vue | 73 ++++++++++---------
 packages/client/src/components/form/range.vue | 24 +++---
 .../client/src/components/form/select.vue     | 57 ++++++++-------
 .../client/src/components/global/time.vue     | 18 ++---
 packages/client/src/components/mini-chart.vue |  8 +-
 .../client/src/components/notification.vue    | 17 +++--
 .../client/src/components/notifications.vue   | 10 ++-
 packages/client/src/components/poll.vue       | 14 ++--
 packages/client/src/components/sparkle.vue    | 17 +++--
 .../src/pages/admin/overview.federation.vue   | 13 +---
 packages/client/src/scripts/use-interval.ts   | 22 ++++++
 packages/client/src/widgets/aichan.vue        | 31 ++++----
 packages/client/src/widgets/calendar.vue      | 25 +++----
 packages/client/src/widgets/federation.vue    | 10 +--
 packages/client/src/widgets/online-users.vue  | 12 ++-
 packages/client/src/widgets/rss.vue           | 12 ++-
 packages/client/src/widgets/slideshow.vue     | 15 ++--
 packages/client/src/widgets/trends.vue        | 12 ++-
 18 files changed, 207 insertions(+), 183 deletions(-)
 create mode 100644 packages/client/src/scripts/use-interval.ts

diff --git a/packages/client/src/components/form/input.vue b/packages/client/src/components/form/input.vue
index 7165671af3..5065e28892 100644
--- a/packages/client/src/components/form/input.vue
+++ b/packages/client/src/components/form/input.vue
@@ -3,7 +3,8 @@
 	<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"
+		<input
+			ref="inputEl"
 			v-model="v"
 			v-adaptive-border
 			:type="type"
@@ -34,8 +35,9 @@
 
 <script lang="ts">
 import { defineComponent, onMounted, onUnmounted, nextTick, ref, watch, computed, toRefs } from 'vue';
-import MkButton from '@/components/ui/button.vue';
 import { debounce } from 'throttle-debounce';
+import MkButton from '@/components/ui/button.vue';
+import { useInterval } from '@/scripts/use-interval';
 
 export default defineComponent({
 	components: {
@@ -44,45 +46,45 @@ export default defineComponent({
 
 	props: {
 		modelValue: {
-			required: true
+			required: true,
 		},
 		type: {
 			type: String,
-			required: false
+			required: false,
 		},
 		required: {
 			type: Boolean,
-			required: false
+			required: false,
 		},
 		readonly: {
 			type: Boolean,
-			required: false
+			required: false,
 		},
 		disabled: {
 			type: Boolean,
-			required: false
+			required: false,
 		},
 		pattern: {
 			type: String,
-			required: false
+			required: false,
 		},
 		placeholder: {
 			type: String,
-			required: false
+			required: false,
 		},
 		autofocus: {
 			type: Boolean,
 			required: false,
-			default: false
+			default: false,
 		},
 		autocomplete: {
-			required: false
+			required: false,
 		},
 		spellcheck: {
-			required: false
+			required: false,
 		},
 		step: {
-			required: false
+			required: false,
 		},
 		datalist: {
 			type: Array,
@@ -91,17 +93,17 @@ export default defineComponent({
 		inline: {
 			type: Boolean,
 			required: false,
-			default: false
+			default: false,
 		},
 		debounce: {
 			type: Boolean,
 			required: false,
-			default: false
+			default: false,
 		},
 		manualSave: {
 			type: Boolean,
 			required: false,
-			default: false
+			default: false,
 		},
 	},
 
@@ -134,7 +136,7 @@ export default defineComponent({
 
 		const updated = () => {
 			changed.value = false;
-			if (type?.value === 'number') {
+			if (type.value === 'number') {
 				context.emit('update:modelValue', parseFloat(v.value));
 			} else {
 				context.emit('update:modelValue', v.value);
@@ -159,30 +161,29 @@ export default defineComponent({
 			invalid.value = inputEl.value.validity.badInput;
 		});
 
+		// このコンポーネントが作成された時、非表示状態である場合がある
+		// 非表示状態だと要素の幅などは0になってしまうので、定期的に計算する
+		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';
+				}
+			}
+		}, 100, {
+			immediate: true,
+			afterMounted: true,
+		});
+
 		onMounted(() => {
 			nextTick(() => {
 				if (autofocus.value) {
 					focus();
 				}
-
-				// このコンポーネントが作成された時、非表示状態である場合がある
-				// 非表示状態だと要素の幅などは0になってしまうので、定期的に計算する
-				const clock = window.setInterval(() => {
-					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';
-						}
-					}
-				}, 100);
-
-				onUnmounted(() => {
-					window.clearInterval(clock);
-				});
 			});
 		});
 
diff --git a/packages/client/src/components/form/range.vue b/packages/client/src/components/form/range.vue
index 9bf7651119..221ad029a7 100644
--- a/packages/client/src/components/form/range.vue
+++ b/packages/client/src/components/form/range.vue
@@ -24,31 +24,31 @@ export default defineComponent({
 		modelValue: {
 			type: Number,
 			required: false,
-			default: 0
+			default: 0,
 		},
 		disabled: {
 			type: Boolean,
 			required: false,
-			default: false
+			default: false,
 		},
 		min: {
 			type: Number,
 			required: false,
-			default: 0
+			default: 0,
 		},
 		max: {
 			type: Number,
 			required: false,
-			default: 100
+			default: 100,
 		},
 		step: {
 			type: Number,
 			required: false,
-			default: 1
+			default: 1,
 		},
 		autofocus: {
 			type: Boolean,
-			required: false
+			required: false,
 		},
 		textConverter: {
 			type: Function,
@@ -90,14 +90,18 @@ export default defineComponent({
 			}
 		};
 		watch([steppedValue, containerEl], calcThumbPosition);
+
+		let ro: ResizeObserver | undefined;
+
 		onMounted(() => {
-			const ro = new ResizeObserver((entries, observer) => {
+			ro = new ResizeObserver((entries, observer) => {
 				calcThumbPosition();
 			});
 			ro.observe(containerEl.value);
-			onUnmounted(() => {
-				ro.disconnect();
-			});
+		});
+		
+		onUnmounted(() => {
+			if (ro) ro.disconnect();
 		});
 
 		const steps = computed(() => {
diff --git a/packages/client/src/components/form/select.vue b/packages/client/src/components/form/select.vue
index 87196027a8..7f5f8784b6 100644
--- a/packages/client/src/components/form/select.vue
+++ b/packages/client/src/components/form/select.vue
@@ -3,7 +3,8 @@
 	<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"
+		<select
+			ref="inputEl"
 			v-model="v"
 			v-adaptive-border
 			class="select"
@@ -29,6 +30,7 @@
 import { defineComponent, onMounted, onUnmounted, nextTick, ref, watch, computed, toRefs, VNode } from 'vue';
 import MkButton from '@/components/ui/button.vue';
 import * as os from '@/os';
+import { useInterval } from '@/scripts/use-interval';
 
 export default defineComponent({
 	components: {
@@ -37,38 +39,38 @@ export default defineComponent({
 
 	props: {
 		modelValue: {
-			required: true
+			required: true,
 		},
 		required: {
 			type: Boolean,
-			required: false
+			required: false,
 		},
 		readonly: {
 			type: Boolean,
-			required: false
+			required: false,
 		},
 		disabled: {
 			type: Boolean,
-			required: false
+			required: false,
 		},
 		placeholder: {
 			type: String,
-			required: false
+			required: false,
 		},
 		autofocus: {
 			type: Boolean,
 			required: false,
-			default: false
+			default: false,
 		},
 		inline: {
 			type: Boolean,
 			required: false,
-			default: false
+			default: false,
 		},
 		manualSave: {
 			type: Boolean,
 			required: false,
-			default: false
+			default: false,
 		},
 	},
 
@@ -109,30 +111,29 @@ export default defineComponent({
 			invalid.value = inputEl.value.validity.badInput;
 		});
 
+		// このコンポーネントが作成された時、非表示状態である場合がある
+		// 非表示状態だと要素の幅などは0になってしまうので、定期的に計算する
+		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';
+				}
+			}
+		}, 100, {
+			immediate: true,
+			afterMounted: true,
+		});
+
 		onMounted(() => {
 			nextTick(() => {
 				if (autofocus.value) {
 					focus();
 				}
-
-				// このコンポーネントが作成された時、非表示状態である場合がある
-				// 非表示状態だと要素の幅などは0になってしまうので、定期的に計算する
-				const clock = window.setInterval(() => {
-					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';
-						}
-					}
-				}, 100);
-
-				onUnmounted(() => {
-					window.clearInterval(clock);
-				});
 			});
 		});
 
diff --git a/packages/client/src/components/global/time.vue b/packages/client/src/components/global/time.vue
index a7f142f961..801490225b 100644
--- a/packages/client/src/components/global/time.vue
+++ b/packages/client/src/components/global/time.vue
@@ -24,14 +24,14 @@ let now = $ref(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 :
+		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);
 });
 
@@ -50,7 +50,7 @@ if (props.mode === 'relative' || props.mode === 'detail') {
 	tickId = window.requestAnimationFrame(tick);
 
 	onUnmounted(() => {
-		window.clearTimeout(tickId);
+		window.cancelAnimationFrame(tickId);
 	});
 }
 </script>
diff --git a/packages/client/src/components/mini-chart.vue b/packages/client/src/components/mini-chart.vue
index 5e842b1975..c64ce163f9 100644
--- a/packages/client/src/components/mini-chart.vue
+++ b/packages/client/src/components/mini-chart.vue
@@ -29,6 +29,7 @@
 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[];
@@ -65,9 +66,8 @@ function draw(): void {
 watch(() => props.src, draw, { immediate: true });
 
 // Vueが何故かWatchを発動させない場合があるので
-clock = window.setInterval(draw, 1000);
-
-onUnmounted(() => {
-	window.clearInterval(clock);
+useInterval(draw, 1000, {
+	immediate: false,
+	afterMounted: true,
 });
 </script>
diff --git a/packages/client/src/components/notification.vue b/packages/client/src/components/notification.vue
index cbfd809f37..26fbeecb68 100644
--- a/packages/client/src/components/notification.vue
+++ b/packages/client/src/components/notification.vue
@@ -112,9 +112,12 @@ export default defineComponent({
 		const elRef = ref<HTMLElement>(null);
 		const reactionRef = ref(null);
 
+		let readObserver: IntersectionObserver | undefined;
+		let connection;
+
 		onMounted(() => {
 			if (!props.notification.isRead) {
-				const readObserver = new IntersectionObserver((entries, observer) => {
+				readObserver = new IntersectionObserver((entries, observer) => {
 					if (!entries.some(entry => entry.isIntersecting)) return;
 					stream.send('readNotification', {
 						id: props.notification.id,
@@ -124,19 +127,19 @@ export default defineComponent({
 
 				readObserver.observe(elRef.value);
 
-				const connection = stream.useChannel('main');
+				connection = stream.useChannel('main');
 				connection.on('readAllNotifications', () => readObserver.disconnect());
 
 				watch(props.notification.isRead, () => {
 					readObserver.disconnect();
 				});
-
-				onUnmounted(() => {
-					readObserver.disconnect();
-					connection.dispose();
-				});
 			}
 		});
+		
+		onUnmounted(() => {
+			if (readObserver) readObserver.disconnect();
+			if (connection) connection.dispose();
+		});
 
 		const followRequestDone = ref(false);
 		const groupInviteDone = ref(false);
diff --git a/packages/client/src/components/notifications.vue b/packages/client/src/components/notifications.vue
index 8eb569c369..eb19ad488c 100644
--- a/packages/client/src/components/notifications.vue
+++ b/packages/client/src/components/notifications.vue
@@ -60,8 +60,10 @@ const onNotification = (notification) => {
 	}
 };
 
+let connection;
+
 onMounted(() => {
-	const connection = stream.useChannel('main');
+	connection = stream.useChannel('main');
 	connection.on('notification', onNotification);
 	connection.on('readAllNotifications', () => {
 		if (pagingComponent.value) {
@@ -87,10 +89,10 @@ onMounted(() => {
 			}
 		}
 	});
+});
 
-	onUnmounted(() => {
-		connection.dispose();
-	});
+onUnmounted(() => {
+	if (connection) connection.dispose();
 });
 </script>
 
diff --git a/packages/client/src/components/poll.vue b/packages/client/src/components/poll.vue
index d9ef5970cb..35f87325d8 100644
--- a/packages/client/src/components/poll.vue
+++ b/packages/client/src/components/poll.vue
@@ -27,18 +27,19 @@ 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';
 
 export default defineComponent({
 	props: {
 		note: {
 			type: Object,
-			required: true
+			required: true,
 		},
 		readOnly: {
 			type: Boolean,
 			required: false,
 			default: false,
-		}
+		},
 	},
 
 	setup(props) {
@@ -54,7 +55,7 @@ export default defineComponent({
 				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)
+				d: Math.floor(remaining.value / 86400),
 			}));
 
 		const showResult = ref(props.readOnly || isVoted.value);
@@ -68,10 +69,9 @@ export default defineComponent({
 				}
 			};
 
-			tick();
-			const intevalId = window.setInterval(tick, 3000);
-			onUnmounted(() => {
-				window.clearInterval(intevalId);
+			useInterval(tick, 3000, {
+				immediate: true,
+				afterMounted: false,
 			});
 		}
 
diff --git a/packages/client/src/components/sparkle.vue b/packages/client/src/components/sparkle.vue
index f52e5a3f9b..b52dbe31c4 100644
--- a/packages/client/src/components/sparkle.vue
+++ b/packages/client/src/components/sparkle.vue
@@ -33,7 +33,8 @@
 	</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;"
+		<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"
@@ -73,14 +74,15 @@ export default defineComponent({
 		const width = ref(0);
 		const height = ref(0);
 		const colors = ['#FF1493', '#00FFFF', '#FFE202', '#FFE202', '#FFE202'];
+		let stop = false;
+		let ro: ResizeObserver | undefined;
 
 		onMounted(() => {
-			const ro = new ResizeObserver((entries, observer) => {
+			ro = new ResizeObserver((entries, observer) => {
 				width.value = el.value?.offsetWidth + 64;
 				height.value = el.value?.offsetHeight + 64;
 			});
 			ro.observe(el.value);
-			let stop = false;
 			const add = () => {
 				if (stop) return;
 				const x = (Math.random() * (width.value - 64));
@@ -104,10 +106,11 @@ export default defineComponent({
 				}, 500 + (Math.random() * 500));
 			};
 			add();
-			onUnmounted(() => {
-				ro.disconnect();
-				stop = true;
-			});
+		});
+		
+		onUnmounted(() => {
+			if (ro) ro.disconnect();
+			stop = true;
 		});
 
 		return {
diff --git a/packages/client/src/pages/admin/overview.federation.vue b/packages/client/src/pages/admin/overview.federation.vue
index 6da1fa4e98..6c99cad33c 100644
--- a/packages/client/src/pages/admin/overview.federation.vue
+++ b/packages/client/src/pages/admin/overview.federation.vue
@@ -18,6 +18,7 @@
 import { onMounted, onUnmounted, ref } from 'vue';
 import MkMiniChart from '@/components/mini-chart.vue';
 import * as os from '@/os';
+import { useInterval } from '@/scripts/use-interval';
 
 const instances = ref([]);
 const charts = ref([]);
@@ -34,15 +35,9 @@ const fetch = async () => {
 	fetching.value = false;
 };
 
-let intervalId;
-
-onMounted(() => {
-	fetch();
-	intervalId = window.setInterval(fetch, 1000 * 60);
-});
-
-onUnmounted(() => {
-	window.clearInterval(intervalId);
+useInterval(fetch, 1000 * 60, {
+	immediate: true,
+	afterMounted: true,
 });
 </script>
 
diff --git a/packages/client/src/scripts/use-interval.ts b/packages/client/src/scripts/use-interval.ts
new file mode 100644
index 0000000000..eb6e44338d
--- /dev/null
+++ b/packages/client/src/scripts/use-interval.ts
@@ -0,0 +1,22 @@
+import { onMounted, onUnmounted } from 'vue';
+
+export function useInterval(fn: () => void, interval: number, options: {
+	immediate: boolean;
+	afterMounted: boolean;
+}): void {
+	let intervalId: number | null = null;
+
+	if (options.afterMounted) {
+		onMounted(() => {
+			if (options.immediate) fn();
+			intervalId = window.setInterval(fn, interval);
+		});
+	} else {
+		if (options.immediate) fn();
+		intervalId = window.setInterval(fn, interval);
+	}
+
+	onUnmounted(() => {
+		if (intervalId) window.clearInterval(intervalId);
+	});
+}
diff --git a/packages/client/src/widgets/aichan.vue b/packages/client/src/widgets/aichan.vue
index cdd367cc84..828490fd9c 100644
--- a/packages/client/src/widgets/aichan.vue
+++ b/packages/client/src/widgets/aichan.vue
@@ -6,8 +6,8 @@
 
 <script lang="ts" setup>
 import { onMounted, onUnmounted, reactive, ref } from 'vue';
-import { GetFormResultType } from '@/scripts/form';
 import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
+import { GetFormResultType } from '@/scripts/form';
 
 const name = 'ai';
 
@@ -38,22 +38,23 @@ const touched = () => {
 	//if (this.live2d) this.live2d.changeExpression('gurugurume');
 };
 
-onMounted(() => {
-	const onMousemove = (ev: MouseEvent) => {
-		const iframeRect = live2d.value.getBoundingClientRect();
-		live2d.value.contentWindow.postMessage({
-			type: 'moveCursor',
-			body: {
-				x: ev.clientX - iframeRect.left,
-				y: ev.clientY - iframeRect.top,
-			}
-		}, '*');
-	};
+const onMousemove = (ev: MouseEvent) => {
+	const iframeRect = live2d.value.getBoundingClientRect();
+	live2d.value.contentWindow.postMessage({
+		type: 'moveCursor',
+		body: {
+			x: ev.clientX - iframeRect.left,
+			y: ev.clientY - iframeRect.top,
+		},
+	}, '*');
+};
 
+onMounted(() => {
 	window.addEventListener('mousemove', onMousemove, { passive: true });
-	onUnmounted(() => {
-		window.removeEventListener('mousemove', onMousemove);
-	});
+});
+
+onUnmounted(() => {
+	window.removeEventListener('mousemove', onMousemove);
 });
 
 defineExpose<WidgetComponentExpose>({
diff --git a/packages/client/src/widgets/calendar.vue b/packages/client/src/widgets/calendar.vue
index 2a2b035541..3a0dc8970c 100644
--- a/packages/client/src/widgets/calendar.vue
+++ b/packages/client/src/widgets/calendar.vue
@@ -34,9 +34,10 @@
 
 <script lang="ts" setup>
 import { onUnmounted, ref } from 'vue';
-import { GetFormResultType } from '@/scripts/form';
 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';
 
@@ -85,28 +86,26 @@ const tick = () => {
 		i18n.ts._weekday.wednesday,
 		i18n.ts._weekday.thursday,
 		i18n.ts._weekday.friday,
-		i18n.ts._weekday.saturday
+		i18n.ts._weekday.saturday,
 	][now.getDay()];
 
-	const dayNumer   = now.getTime() - new Date(ny, nm, nd).getTime();
-	const dayDenom   = 1000/*ms*/ * 60/*s*/ * 60/*m*/ * 24/*h*/;
+	const dayNumer = now.getTime() - new Date(ny, nm, nd).getTime();
+	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 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 yearNumer = now.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;
+	dayP.value = dayNumer / dayDenom * 100;
 	monthP.value = monthNumer / monthDenom * 100;
-	yearP.value  = yearNumer  / yearDenom  * 100;
+	yearP.value = yearNumer / yearDenom * 100;
 
 	isHoliday.value = now.getDay() === 0 || now.getDay() === 6;
 };
 
-tick();
-
-const intervalId = window.setInterval(tick, 1000);
-onUnmounted(() => {
-	window.clearInterval(intervalId);
+useInterval(tick, 1000, {
+	immediate: true,
+	afterMounted: false,
 });
 
 defineExpose<WidgetComponentExpose>({
diff --git a/packages/client/src/widgets/federation.vue b/packages/client/src/widgets/federation.vue
index afe7af0e96..ac87cdac2e 100644
--- a/packages/client/src/widgets/federation.vue
+++ b/packages/client/src/widgets/federation.vue
@@ -25,6 +25,7 @@ import { GetFormResultType } from '@/scripts/form';
 import MkContainer from '@/components/ui/container.vue';
 import MkMiniChart from '@/components/mini-chart.vue';
 import * as os from '@/os';
+import { useInterval } from '@/scripts/use-interval';
 
 const name = 'federation';
 
@@ -64,12 +65,9 @@ const fetch = async () => {
 	fetching.value = false;
 };
 
-onMounted(() => {
-	fetch();
-	const intervalId = window.setInterval(fetch, 1000 * 60);
-	onUnmounted(() => {
-		window.clearInterval(intervalId);
-	});
+useInterval(fetch, 1000 * 60, {
+	immediate: true,
+	afterMounted: true,
 });
 
 defineExpose<WidgetComponentExpose>({
diff --git a/packages/client/src/widgets/online-users.vue b/packages/client/src/widgets/online-users.vue
index eb3184fe9d..4122a82657 100644
--- a/packages/client/src/widgets/online-users.vue
+++ b/packages/client/src/widgets/online-users.vue
@@ -8,9 +8,10 @@
 
 <script lang="ts" setup>
 import { onMounted, onUnmounted, ref } from 'vue';
-import { GetFormResultType } from '@/scripts/form';
 import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
+import { GetFormResultType } from '@/scripts/form';
 import * as os from '@/os';
+import { useInterval } from '@/scripts/use-interval';
 
 const name = 'onlineUsers';
 
@@ -43,12 +44,9 @@ const tick = () => {
 	});
 };
 
-onMounted(() => {
-	tick();
-	const intervalId = window.setInterval(tick, 1000 * 15);
-	onUnmounted(() => {
-		window.clearInterval(intervalId);
-	});
+useInterval(tick, 1000 * 15, {
+	immediate: true,
+	afterMounted: true,
 });
 
 defineExpose<WidgetComponentExpose>({
diff --git a/packages/client/src/widgets/rss.vue b/packages/client/src/widgets/rss.vue
index fc65f11813..e5da291a8d 100644
--- a/packages/client/src/widgets/rss.vue
+++ b/packages/client/src/widgets/rss.vue
@@ -14,10 +14,11 @@
 
 <script lang="ts" setup>
 import { onMounted, onUnmounted, ref, watch } from 'vue';
-import { GetFormResultType } from '@/scripts/form';
 import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
+import { GetFormResultType } from '@/scripts/form';
 import * as os from '@/os';
 import MkContainer from '@/components/ui/container.vue';
+import { useInterval } from '@/scripts/use-interval';
 
 const name = 'rss';
 
@@ -60,12 +61,9 @@ const tick = () => {
 
 watch(() => widgetProps.url, tick);
 
-onMounted(() => {
-	tick();
-	const intervalId = window.setInterval(tick, 60000);
-	onUnmounted(() => {
-		window.clearInterval(intervalId);
-	});
+useInterval(tick, 60000, {
+	immediate: true,
+	afterMounted: true,
 });
 
 defineExpose<WidgetComponentExpose>({
diff --git a/packages/client/src/widgets/slideshow.vue b/packages/client/src/widgets/slideshow.vue
index fd78edbe40..c286312161 100644
--- a/packages/client/src/widgets/slideshow.vue
+++ b/packages/client/src/widgets/slideshow.vue
@@ -13,9 +13,10 @@
 
 <script lang="ts" setup>
 import { nextTick, onMounted, onUnmounted, reactive, ref } from 'vue';
-import { GetFormResultType } from '@/scripts/form';
 import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
+import { GetFormResultType } from '@/scripts/form';
 import * as os from '@/os';
+import { useInterval } from '@/scripts/use-interval';
 
 const name = 'slideshow';
 
@@ -75,7 +76,7 @@ const fetch = () => {
 	os.api('drive/files', {
 		folderId: widgetProps.folderId,
 		type: 'image/*',
-		limit: 100
+		limit: 100,
 	}).then(res => {
 		images.value = res;
 		fetching.value = false;
@@ -96,15 +97,15 @@ const choose = () => {
 	});
 };
 
+useInterval(change, 10000, {
+	immediate: false,
+	afterMounted: true,
+});
+
 onMounted(() => {
 	if (widgetProps.folderId != null) {
 		fetch();
 	}
-
-	const intervalId = window.setInterval(change, 10000);
-	onUnmounted(() => {
-		window.clearInterval(intervalId);
-	});
 });
 
 defineExpose<WidgetComponentExpose>({
diff --git a/packages/client/src/widgets/trends.vue b/packages/client/src/widgets/trends.vue
index 9680f1c892..0f34ea6341 100644
--- a/packages/client/src/widgets/trends.vue
+++ b/packages/client/src/widgets/trends.vue
@@ -19,11 +19,12 @@
 
 <script lang="ts" setup>
 import { onMounted, onUnmounted, ref } from 'vue';
-import { GetFormResultType } from '@/scripts/form';
 import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
+import { GetFormResultType } from '@/scripts/form';
 import MkContainer from '@/components/ui/container.vue';
 import MkMiniChart from '@/components/mini-chart.vue';
 import * as os from '@/os';
+import { useInterval } from '@/scripts/use-interval';
 
 const name = 'hashtags';
 
@@ -58,12 +59,9 @@ const fetch = () => {
 	});
 };
 
-onMounted(() => {
-	fetch();
-	const intervalId = window.setInterval(fetch, 1000 * 60);
-	onUnmounted(() => {
-		window.clearInterval(intervalId);
-	});
+useInterval(fetch, 1000 * 60, {
+	immediate: true,
+	afterMounted: true,
 });
 
 defineExpose<WidgetComponentExpose>({

From 2366f568b996dc7d09c66d768fa52d3aa38630bd Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sun, 26 Jun 2022 12:47:43 +0900
Subject: [PATCH 66/90] enhance(client): Enhance boot error display (#8879)

* Change boot error message

* fix

* :v:

* fix
---
 packages/backend/src/server/web/boot.js | 35 +++++++++++++++----------
 1 file changed, 21 insertions(+), 14 deletions(-)

diff --git a/packages/backend/src/server/web/boot.js b/packages/backend/src/server/web/boot.js
index 94329e11c9..9fc536555a 100644
--- a/packages/backend/src/server/web/boot.js
+++ b/packages/backend/src/server/web/boot.js
@@ -14,10 +14,10 @@
 // ブロックの中に入れないと、定義した変数がブラウザのグローバルスコープに登録されてしまい邪魔なので
 (async () => {
 	window.onerror = (e) => {
-		renderError('SOMETHING_HAPPENED', e.toString());
+		renderError('SOMETHING_HAPPENED', e);
 	};
 	window.onunhandledrejection = (e) => {
-		renderError('SOMETHING_HAPPENED_IN_PROMISE', e.toString());
+		renderError('SOMETHING_HAPPENED_IN_PROMISE', e);
 	};
 
 	const v = localStorage.getItem('v') || VERSION;
@@ -57,7 +57,7 @@
 	import(`/assets/${CLIENT_ENTRY}`)
 		.catch(async e => {
 			await checkUpdate();
-			renderError('APP_FETCH_FAILED', JSON.stringify(e));
+			renderError('APP_FETCH_FAILED', e);
 		})
 	//#endregion
 
@@ -104,20 +104,27 @@
 
 	// eslint-disable-next-line no-inner-declarations
 	function renderError(code, details) {
-		document.documentElement.innerHTML = `
-			<h1>⚠エラーが発生しました</h1>
-			<p>問題が解決しない場合は管理者までお問い合わせください。以下のオプションを試すこともできます:</p>
+		let errorsElement = document.getElementById('errors');
+		if (!errorsElement) {
+			document.documentElement.innerHTML = `
+			<h1>⚠ An error has occurred. ⚠</h1>
+			<p>If the problem persists, please contact the administrator. You may also try the following options:</p>
 			<ul>
-				<li><a href="/cli">簡易クライアント</a>を起動</li>
-				<li><a href="/bios">BIOS</a>で修復を試みる</li>
-				<li><a href="/flush">キャッシュをクリア</a>する</li>
+				<li>Start <a href="/cli">the simple client</a></li>
+				<li>Attempt to repair in <a href="/bios">BIOS</a></li>
+				<li><a href="/flush">Flush preferences and cache</a></li>
 			</ul>
 			<hr>
-			<code>ERROR CODE: ${code}</code>
-			<details>
-				${details}
-			</details>
-		`;
+			<div id="errors"></div>
+			`;
+
+			errorsElement = document.getElementById('errors');
+		}
+
+		const detailsElement = document.createElement('details');
+		detailsElement.innerHTML = `<summary><code>ERROR CODE: ${code}</code></summary>${JSON.stringify(details)}`;
+
+		errorsElement.appendChild(detailsElement);
 	}
 
 	// eslint-disable-next-line no-inner-declarations

From 0cae0a49e267e09d3a74eb96b6af1dc53effbd74 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sun, 26 Jun 2022 13:28:47 +0900
Subject: [PATCH 67/90] chore(client): tweak ui

---
 .../src/components/file-list-for-admin.vue    |  2 +-
 .../src/pages/admin/overview.queue-chart.vue  |  8 ++-
 packages/client/src/pages/admin/overview.vue  | 57 ++++++++++++-------
 3 files changed, 41 insertions(+), 26 deletions(-)

diff --git a/packages/client/src/components/file-list-for-admin.vue b/packages/client/src/components/file-list-for-admin.vue
index 59256f90c9..489c017a93 100644
--- a/packages/client/src/components/file-list-for-admin.vue
+++ b/packages/client/src/components/file-list-for-admin.vue
@@ -87,7 +87,7 @@ const props = defineProps<{
 
 	&.grid {
 		display: grid;
-		grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+		grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
 		grid-gap: 12px;
 		margin: var(--margin) 0;
 
diff --git a/packages/client/src/pages/admin/overview.queue-chart.vue b/packages/client/src/pages/admin/overview.queue-chart.vue
index 9f23a14b5d..e9ad186141 100644
--- a/packages/client/src/pages/admin/overview.queue-chart.vue
+++ b/packages/client/src/pages/admin/overview.queue-chart.vue
@@ -73,7 +73,7 @@ const onStats = (stats) => {
 	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);
-	if (chartInstance.data.datasets[0].data.length > 200) {
+	if (chartInstance.data.datasets[0].data.length > 100) {
 		chartInstance.data.labels.shift();
 		chartInstance.data.datasets[0].data.shift();
 		chartInstance.data.datasets[1].data.shift();
@@ -90,7 +90,7 @@ const onStatsLog = (statsLog) => {
 		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);
-		if (chartInstance.data.datasets[0].data.length > 200) {
+		if (chartInstance.data.datasets[0].data.length > 100) {
 			chartInstance.data.labels.shift();
 			chartInstance.data.datasets[0].data.shift();
 			chartInstance.data.datasets[1].data.shift();
@@ -146,7 +146,7 @@ onMounted(() => {
 			}],
 		},
 		options: {
-			aspectRatio: 3,
+			aspectRatio: 2.5,
 			layout: {
 				padding: {
 					left: 0,
@@ -157,6 +157,7 @@ onMounted(() => {
 			},
 			scales: {
 				x: {
+					display: false,
 					grid: {
 						display: false,
 					},
@@ -166,6 +167,7 @@ onMounted(() => {
 					},
 				},
 				y: {
+					display: false,
 					min: 0,
 					grid: {
 						display: false,
diff --git a/packages/client/src/pages/admin/overview.vue b/packages/client/src/pages/admin/overview.vue
index 8e57c7aafb..382169f723 100644
--- a/packages/client/src/pages/admin/overview.vue
+++ b/packages/client/src/pages/admin/overview.vue
@@ -24,13 +24,15 @@
 
 			<div class="container queue">
 				<div class="title">Job queue</div>
-				<div class="body deliver">
-					<div class="title">Deliver</div>
-					<XQueueChart :connection="queueStatsConnection" domain="deliver"/>
-				</div>
-				<div class="body inbox">
-					<div class="title">Inbox</div>
-					<XQueueChart :connection="queueStatsConnection" domain="inbox"/>
+				<div class="body">
+					<div class="chart deliver">
+						<div class="title">Deliver</div>
+						<XQueueChart :connection="queueStatsConnection" domain="deliver"/>
+					</div>
+					<div class="chart inbox">
+						<div class="title">Inbox</div>
+						<XQueueChart :connection="queueStatsConnection" domain="inbox"/>
+					</div>
 				</div>
 			</div>
 
@@ -104,6 +106,7 @@
 			<div class="container files">
 				<div class="title">Recent files</div>
 				<div class="body">
+					<MkFileListForAdmin :pagination="filesPagination" view-mode="grid"/>
 				</div>
 			</div>
 		</div>
@@ -148,6 +151,7 @@ import { definePageMetadata } from '@/scripts/page-metadata';
 import 'chartjs-adapter-date-fns';
 import { defaultStore } from '@/store';
 import { useChartTooltip } from '@/scripts/use-chart-tooltip';
+import MkFileListForAdmin from '@/components/file-list-for-admin.vue';
 
 Chart.register(
 	ArcElement,
@@ -182,6 +186,11 @@ const queueStatsConnection = markRaw(stream.useChannel('queueStats'));
 const now = new Date();
 let chartInstance: Chart = null;
 const chartLimit = 30;
+const filesPagination = {
+	endpoint: 'admin/drive/files' as const,
+	limit: 9,
+	noPaging: true,
+};
 
 const { handler: externalTooltipHandler } = useChartTooltip();
 
@@ -256,6 +265,7 @@ async function renderChart() {
 			scales: {
 				x: {
 					type: 'time',
+					display: false,
 					stacked: true,
 					offset: false,
 					time: {
@@ -276,6 +286,7 @@ async function renderChart() {
 					min: getDate(chartLimit).getTime(),
 				},
 				y: {
+					display: false,
 					position: 'left',
 					stacked: true,
 					grid: {
@@ -383,7 +394,7 @@ onMounted(async () => {
 	nextTick(() => {
 		queueStatsConnection.send('requestLog', {
 			id: Math.random().toString().substr(2, 8),
-			length: 200,
+			length: 100,
 		});
 	});
 });
@@ -415,7 +426,6 @@ definePageMetadata({
 			margin: 32px 0;
 
 			> .title {
-				font-size: 1.1em;
 				font-weight: bold;
 				margin-bottom: 16px;
 			}
@@ -424,7 +434,7 @@ definePageMetadata({
 				> .body {
 					display: grid;
 					grid-gap: 16px;
-					grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+					grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
 
 					> .number {
 						padding: 14px 20px;
@@ -450,7 +460,7 @@ definePageMetadata({
 				> .body {
 					display: grid;
 					grid-gap: 16px;
-					grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+					grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
 
 					> .number {
 						padding: 14px 20px;
@@ -500,19 +510,22 @@ definePageMetadata({
 
 			&.queue {
 				> .body {
-					position: relative;
-					padding: 24px;
-					background: var(--panel);
-					border-radius: var(--radius);
+					display: grid;
+					grid-gap: 16px;
+					grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
 
-					&:not(:last-child) {
-						margin-bottom: 16px;
-					}
+					> .chart {
+						position: relative;
+						padding: 20px;
+						background: var(--panel);
+						border-radius: var(--radius);
 
-					> .title {
-						position: absolute;
-						top: 24px;
-						left: 24px;
+						> .title {
+							position: absolute;
+							top: 20px;
+							left: 20px;
+							font-size: 90%;
+						}
 					}
 				}
 			}

From de43b47ca8dc13a763c5ad0b5b29ad546b22c3de Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sun, 26 Jun 2022 13:29:14 +0900
Subject: [PATCH 68/90] 12.112.0-beta.5

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index c1485eba43..7bab3780bf 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "misskey",
-	"version": "12.112.0-beta.4",
+	"version": "12.112.0-beta.5",
 	"codename": "indigo",
 	"repository": {
 		"type": "git",

From c27d9e11b4f9a0e2a89360dacd54136dd39c3d6a Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sun, 26 Jun 2022 14:17:55 +0900
Subject: [PATCH 69/90] chore(client): tweak client

---
 locales/ja-JP.yml                        | 1 +
 packages/client/src/pages/admin-file.vue | 2 +-
 packages/client/src/pages/user-info.vue  | 2 ++
 3 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index bbbb037a8e..7788a04dc3 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -854,6 +854,7 @@ noEmailServerWarning: "メールサーバーの設定がされていません。
 thereIsUnresolvedAbuseReportWarning: "未対応の通報があります。"
 recommended: "推奨"
 check: "チェック"
+isSystemAccount: "システムにより自動で作成・管理されているアカウントです。"
 
 _emailUnavailable:
   used: "既に使用されています"
diff --git a/packages/client/src/pages/admin-file.vue b/packages/client/src/pages/admin-file.vue
index 67ebdd4678..402e9502d2 100644
--- a/packages/client/src/pages/admin-file.vue
+++ b/packages/client/src/pages/admin-file.vue
@@ -28,7 +28,7 @@
 					<template #value><span class="_monospace"><MkTime :time="file.createdAt" mode="detail" style="display: block;"/></span></template>
 				</MkKeyValue>
 			</div>
-			<MkA class="user" :to="`/user-info/${file.user.id}`">
+			<MkA v-if="file.user" class="user" :to="`/user-info/${file.user.id}`">
 				<MkUserCardMini :user="file.user"/>
 			</MkA>
 			<div class="_formBlock">
diff --git a/packages/client/src/pages/user-info.vue b/packages/client/src/pages/user-info.vue
index b4c4aedfcd..86c1be8d06 100644
--- a/packages/client/src/pages/user-info.vue
+++ b/packages/client/src/pages/user-info.vue
@@ -12,6 +12,8 @@
 					</div>
 				</div>
 
+				<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>

From 311478e7253f7c55568809739316c6e0a28dd91b Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sun, 26 Jun 2022 15:54:07 +0900
Subject: [PATCH 70/90] chore(client): tweak client

---
 packages/client/src/components/instance-card-mini.vue | 10 ++++++----
 packages/client/src/components/user-card-mini.vue     | 10 ++++++----
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/packages/client/src/components/instance-card-mini.vue b/packages/client/src/components/instance-card-mini.vue
index de16dacf7b..72d83bd992 100644
--- a/packages/client/src/components/instance-card-mini.vue
+++ b/packages/client/src/components/instance-card-mini.vue
@@ -5,7 +5,7 @@
 		<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="chart" class="chart" :src="chart.requests.received"/>
+	<MkMiniChart v-if="chartValues" class="chart" :src="chartValues"/>
 </div>
 </template>
 
@@ -18,10 +18,12 @@ const props = defineProps<{
 	instance: misskey.entities.Instance;
 }>();
 
-const chart = $ref(null);
+let chartValues = $ref<number | null>(null);
 
-os.apiGet('charts/instance', { host: props.instance.host, limit: 16, span: 'day' }).then(res => {
-	chart = 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;
 });
 </script>
 
diff --git a/packages/client/src/components/user-card-mini.vue b/packages/client/src/components/user-card-mini.vue
index 2c3e0fe956..997431d1ba 100644
--- a/packages/client/src/components/user-card-mini.vue
+++ b/packages/client/src/components/user-card-mini.vue
@@ -5,7 +5,7 @@
 		<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"/>
+	<MkMiniChart v-if="chartValues" class="chart" :src="chartValues"/>
 </div>
 </template>
 
@@ -19,10 +19,12 @@ const props = defineProps<{
 	user: misskey.entities.User;
 }>();
 
-const chart = $ref(null);
+let chartValues = $ref<number | null>(null);
 
-os.apiGet('charts/user/notes', { userId: props.user.id, limit: 16, span: 'day' }).then(res => {
-	chart = 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;
 });
 </script>
 

From 4329d9e76dac8b20f72381baceb94076052af424 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sun, 26 Jun 2022 15:55:51 +0900
Subject: [PATCH 71/90] chore(client): fix type

---
 packages/client/src/components/instance-card-mini.vue | 2 +-
 packages/client/src/components/user-card-mini.vue     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/client/src/components/instance-card-mini.vue b/packages/client/src/components/instance-card-mini.vue
index 72d83bd992..88621e72c2 100644
--- a/packages/client/src/components/instance-card-mini.vue
+++ b/packages/client/src/components/instance-card-mini.vue
@@ -18,7 +18,7 @@ const props = defineProps<{
 	instance: misskey.entities.Instance;
 }>();
 
-let chartValues = $ref<number | null>(null);
+let chartValues = $ref<number[] | null>(null);
 
 os.apiGet('charts/instance', { host: props.instance.host, limit: 16 + 1, span: 'day' }).then(res => {
 	// 今日のぶんの値はまだ途中の値であり、それも含めると大抵の場合前日よりも下降しているようなグラフになってしまうため今日は弾く
diff --git a/packages/client/src/components/user-card-mini.vue b/packages/client/src/components/user-card-mini.vue
index 997431d1ba..732adf7f5b 100644
--- a/packages/client/src/components/user-card-mini.vue
+++ b/packages/client/src/components/user-card-mini.vue
@@ -19,7 +19,7 @@ const props = defineProps<{
 	user: misskey.entities.User;
 }>();
 
-let chartValues = $ref<number | null>(null);
+let chartValues = $ref<number[] | null>(null);
 
 os.apiGet('charts/user/notes', { userId: props.user.id, limit: 16 + 1, span: 'day' }).then(res => {
 	// 今日のぶんの値はまだ途中の値であり、それも含めると大抵の場合前日よりも下降しているようなグラフになってしまうため今日は弾く

From bd3c6f4157366e34b41d35eefefce03d110dd415 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sun, 26 Jun 2022 16:38:27 +0900
Subject: [PATCH 72/90] chore(client): tweak ui :art:

---
 .../client/src/components/form/checkbox.vue   | 143 ++++++++++++++++++
 .../client/src/components/form/switch.vue     |  47 +++---
 packages/client/src/themes/_dark.json5        |   4 +
 packages/client/src/themes/_light.json5       |   4 +
 4 files changed, 174 insertions(+), 24 deletions(-)
 create mode 100644 packages/client/src/components/form/checkbox.vue

diff --git a/packages/client/src/components/form/checkbox.vue b/packages/client/src/components/form/checkbox.vue
new file mode 100644
index 0000000000..fadb770aee
--- /dev/null
+++ b/packages/client/src/components/form/checkbox.vue
@@ -0,0 +1,143 @@
+<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 ? $ts.itsOn : $ts.itsOff" class="button" @click.prevent="toggle">
+		<i class="check fas fa-check"></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/ripple.vue';
+
+const props = defineProps<{
+	modelValue: boolean | Ref<boolean>;
+	disabled?: boolean;
+}>();
+
+const emit = defineEmits<{
+	(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);
+
+	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');
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.ziffeoms {
+	position: relative;
+	display: flex;
+	transition: all 0.2s ease;
+
+	> * {
+		user-select: none;
+	}
+
+	> input {
+		position: absolute;
+		width: 0;
+		height: 0;
+		opacity: 0;
+		margin: 0;
+	}
+
+	> .button {
+		position: relative;
+		display: inline-flex;
+		flex-shrink: 0;
+		margin: 0;
+		box-sizing: border-box;
+		width: 23px;
+		height: 23px;
+		outline: none;
+		background: var(--panel);
+		border: solid 1px var(--panel);
+		border-radius: 4px;
+		cursor: pointer;
+		transition: inherit;
+
+		> .check {
+			margin: auto;
+			opacity: 0;
+			color: var(--fgOnAccent);
+			font-size: 13px;
+			transform: scale(0.5);
+			transition: all 0.2s ease;
+		}
+	}
+
+	&:hover {
+		> .button {
+			border-color: var(--inputBorderHover) !important;
+		}
+	}
+
+	> .label {
+		margin-left: 12px;
+		margin-top: 2px;
+		display: block;
+		transition: inherit;
+		color: var(--fg);
+
+		> span {
+			display: block;
+			line-height: 20px;
+			cursor: pointer;
+			transition: inherit;
+		}
+
+		> .caption {
+			margin: 8px 0 0 0;
+			color: var(--fgTransparentWeak);
+			font-size: 0.85em;
+
+			&:empty {
+				display: none;
+			}
+		}
+	}
+
+	&.disabled {
+		opacity: 0.6;
+		cursor: not-allowed;
+	}
+
+	&.checked {
+		> .button {
+			background-color: var(--accent) !important;
+			border-color: var(--accent) !important;
+
+			> .check {
+				opacity: 1;
+				transform: scale(1);
+			}
+		}
+	}
+}
+</style>
diff --git a/packages/client/src/components/form/switch.vue b/packages/client/src/components/form/switch.vue
index fadb770aee..22b307a46f 100644
--- a/packages/client/src/components/form/switch.vue
+++ b/packages/client/src/components/form/switch.vue
@@ -1,6 +1,6 @@
 <template>
 <div
-	class="ziffeoms"
+	class="ziffeomt"
 	:class="{ disabled, checked }"
 >
 	<input
@@ -9,8 +9,8 @@
 		:disabled="disabled"
 		@keydown.enter="toggle"
 	>
-	<span ref="button" v-adaptive-border v-tooltip="checked ? $ts.itsOn : $ts.itsOff" class="button" @click.prevent="toggle">
-		<i class="check fas fa-check"></i>
+	<span ref="button" v-tooltip="checked ? $ts.itsOn : $ts.itsOff" class="button" @click.prevent="toggle">
+		<div class="knob"></div>
 	</span>
 	<span class="label">
 		<!-- TODO: 無名slotの方は廃止 -->
@@ -23,7 +23,6 @@
 <script lang="ts" setup>
 import { toRefs, Ref } from 'vue';
 import * as os from '@/os';
-import Ripple from '@/components/ripple.vue';
 
 const props = defineProps<{
 	modelValue: boolean | Ref<boolean>;
@@ -41,16 +40,13 @@ const toggle = () => {
 	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');
+
 	}
 };
 </script>
 
 <style lang="scss" scoped>
-.ziffeoms {
+.ziffeomt {
 	position: relative;
 	display: flex;
 	transition: all 0.2s ease;
@@ -73,21 +69,24 @@ const toggle = () => {
 		flex-shrink: 0;
 		margin: 0;
 		box-sizing: border-box;
-		width: 23px;
+		width: 32px;
 		height: 23px;
 		outline: none;
-		background: var(--panel);
-		border: solid 1px var(--panel);
-		border-radius: 4px;
+		background: var(--swutchOffBg);
+		background-clip: content-box;
+		border: solid 1px var(--swutchOffBg);
+		border-radius: 999px;
 		cursor: pointer;
 		transition: inherit;
 
-		> .check {
-			margin: auto;
-			opacity: 0;
-			color: var(--fgOnAccent);
-			font-size: 13px;
-			transform: scale(0.5);
+		> .knob {
+			position: absolute;
+			top: 3px;
+			left: 3px;
+			width: 15px;
+			height: 15px;
+			background: var(--swutchOffFg);
+			border-radius: 999px;
 			transition: all 0.2s ease;
 		}
 	}
@@ -130,12 +129,12 @@ const toggle = () => {
 
 	&.checked {
 		> .button {
-			background-color: var(--accent) !important;
-			border-color: var(--accent) !important;
+			background-color: var(--swutchOnBg) !important;
+			border-color: var(--swutchOnBg) !important;
 
-			> .check {
-				opacity: 1;
-				transform: scale(1);
+			> .knob {
+				left: 12px;
+				background: var(--swutchOnFg);
 			}
 		}
 	}
diff --git a/packages/client/src/themes/_dark.json5 b/packages/client/src/themes/_dark.json5
index e159f73b83..5c6e7755e4 100644
--- a/packages/client/src/themes/_dark.json5
+++ b/packages/client/src/themes/_dark.json5
@@ -60,6 +60,10 @@
 		buttonHoverBg: 'rgba(255, 255, 255, 0.1)',
 		buttonGradateA: '@accent',
 		buttonGradateB: ':hue<20<@accent',
+		swutchOffBg: 'rgba(255, 255, 255, 0.1)',
+		swutchOffFg: '@fg',
+		swutchOnBg: '@accentedBg',
+		swutchOnFg: '@accent',
 		inputBorder: 'rgba(255, 255, 255, 0.1)',
 		inputBorderHover: 'rgba(255, 255, 255, 0.2)',
 		listItemHoverBg: 'rgba(255, 255, 255, 0.03)',
diff --git a/packages/client/src/themes/_light.json5 b/packages/client/src/themes/_light.json5
index 87fdbd86b7..66e70d5e19 100644
--- a/packages/client/src/themes/_light.json5
+++ b/packages/client/src/themes/_light.json5
@@ -60,6 +60,10 @@
 		buttonHoverBg: 'rgba(0, 0, 0, 0.1)',
 		buttonGradateA: '@accent',
 		buttonGradateB: ':hue<20<@accent',
+		swutchOffBg: 'rgba(0, 0, 0, 0.1)',
+		swutchOffFg: '@panel',
+		swutchOnBg: '@accent',
+		swutchOnFg: '@fgOnAccent',
 		inputBorder: 'rgba(0, 0, 0, 0.1)',
 		inputBorderHover: 'rgba(0, 0, 0, 0.2)',
 		listItemHoverBg: 'rgba(0, 0, 0, 0.03)',

From 744db4b5eda84774487384fd5b4e24c9b9ec97f0 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sun, 26 Jun 2022 16:57:12 +0900
Subject: [PATCH 73/90] chore(client): tweak ui :art:

---
 packages/client/src/pages/instance-info.vue | 22 ++++++++++++---------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/packages/client/src/pages/instance-info.vue b/packages/client/src/pages/instance-info.vue
index 148eab6fcd..9eddbad79b 100644
--- a/packages/client/src/pages/instance-info.vue
+++ b/packages/client/src/pages/instance-info.vue
@@ -5,19 +5,12 @@
 		<div v-if="tab === 'overview'" class="_formRoot">
 			<div class="fnfelxur">
 				<img :src="instance.iconUrl || instance.faviconUrl" alt="" class="icon"/>
+				<span class="name">{{ instance.name || `(${$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>Name</template>
-				<template #value>{{ instance.name || `(${$ts.unknown})` }}</template>
-			</MkKeyValue>
-			<MkKeyValue>
-				<template #key>{{ $ts.description }}</template>
-				<template #value>{{ instance.description }}</template>
-			</MkKeyValue>
 			<MkKeyValue oneline style="margin: 1em 0;">
 				<template #key>{{ $ts.software }}</template>
 				<template #value><span class="_monospace">{{ instance.softwareName || `(${$ts.unknown})` }} / {{ instance.softwareVersion || `(${$ts.unknown})` }}</span></template>
@@ -26,6 +19,10 @@
 				<template #key>{{ $ts.administrator }}</template>
 				<template #value>{{ instance.maintainerName || `(${$ts.unknown})` }} ({{ instance.maintainerEmail || `(${$ts.unknown})` }})</template>
 			</MkKeyValue>
+			<MkKeyValue>
+				<template #key>{{ $ts.description }}</template>
+				<template #value>{{ instance.description }}</template>
+			</MkKeyValue>
 
 			<FormSection v-if="iAmModerator">
 				<template #label>Moderation</template>
@@ -205,12 +202,19 @@ definePageMetadata({
 
 <style lang="scss" scoped>
 .fnfelxur {
+	display: flex;
+	align-items: center;
+
 	> .icon {
 		display: block;
-		margin: 0;
+		margin: 0 16px 0 0;
 		height: 64px;
 		border-radius: 8px;
 	}
+
+	> .name {
+		word-break: break-all;
+	}
 }
 
 .cmhjzshl {

From 46349208666324f5cda684cb04122f2732ebc950 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sun, 26 Jun 2022 17:38:50 +0900
Subject: [PATCH 74/90] fix #8894

---
 packages/backend/src/server/api/api-handler.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/backend/src/server/api/api-handler.ts b/packages/backend/src/server/api/api-handler.ts
index d2d16597e1..c22c868c80 100644
--- a/packages/backend/src/server/api/api-handler.ts
+++ b/packages/backend/src/server/api/api-handler.ts
@@ -7,7 +7,7 @@ import { ApiError } from './error.js';
 
 export default (endpoint: IEndpoint, ctx: Koa.Context) => new Promise<void>((res) => {
 	const body = ctx.is('multipart/form-data')
-		? (ctx.req as any).body
+		? (ctx.request as any).body
 		: ctx.method === 'GET'
 			? ctx.query
 			: ctx.request.body;

From f834d6a8136950bc510480fcd23fb527b49f2541 Mon Sep 17 00:00:00 2001
From: MeiMei <30769358+mei23@users.noreply.github.com>
Date: Sun, 26 Jun 2022 19:16:32 +0900
Subject: [PATCH 75/90] =?UTF-8?q?fix:=20mocha=20=E3=83=86=E3=82=B9?=
 =?UTF-8?q?=E3=83=88=E3=81=8C=E5=8B=95=E3=81=8B=E3=81=AA=E3=81=84=E3=81=AE?=
 =?UTF-8?q?=E3=82=92=E4=BF=AE=E6=AD=A3=20v2=20(#8892)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* on push

* Fix mute test

* fix note test

* api

* inc timeout

* uploadUrl

* Revert "on push"

This reverts commit 778a58df61ff9a22421f8ec5dcce96b364eab38d.

* lint

* waitFire

* Wrap connectStream

* return
---
 packages/backend/.mocharc.json             |   2 +-
 packages/backend/src/server/api/limiter.ts |   2 +
 packages/backend/test/mute.ts              |  42 ++----
 packages/backend/test/note.ts              |  32 ++---
 packages/backend/test/user-notes.ts        |  11 +-
 packages/backend/test/utils.ts             | 142 ++++++++++++++++++---
 6 files changed, 157 insertions(+), 74 deletions(-)

diff --git a/packages/backend/.mocharc.json b/packages/backend/.mocharc.json
index 87c571cfd6..f836f9e900 100644
--- a/packages/backend/.mocharc.json
+++ b/packages/backend/.mocharc.json
@@ -5,6 +5,6 @@
 		"loader=./test/loader.js"
 	],
 	"slow": 1000,
-	"timeout": 10000,
+	"timeout": 30000,
 	"exit": true
 }
diff --git a/packages/backend/src/server/api/limiter.ts b/packages/backend/src/server/api/limiter.ts
index 6ca3ebf18f..9a7751716e 100644
--- a/packages/backend/src/server/api/limiter.ts
+++ b/packages/backend/src/server/api/limiter.ts
@@ -7,6 +7,8 @@ import { IEndpointMeta } from './endpoints.js';
 const logger = new Logger('limiter');
 
 export const limiter = (limitation: IEndpointMeta['limit'] & { key: NonNullable<string> }, actor: string) => new Promise<void>((ok, reject) => {
+	if (process.env.NODE_ENV === 'test') ok();
+
 	const hasShortTermLimit = typeof limitation.minInterval === 'number';
 
 	const hasLongTermLimit =
diff --git a/packages/backend/test/mute.ts b/packages/backend/test/mute.ts
index 2be70f2b65..465633973c 100644
--- a/packages/backend/test/mute.ts
+++ b/packages/backend/test/mute.ts
@@ -2,7 +2,7 @@ process.env.NODE_ENV = 'test';
 
 import * as assert from 'assert';
 import * as childProcess from 'child_process';
-import { async, signup, request, post, react, connectStream, startServer, shutdownServer } from './utils.js';
+import { async, signup, request, post, react, startServer, shutdownServer, waitFire } from './utils.js';
 
 describe('Mute', () => {
 	let p: childProcess.ChildProcess;
@@ -55,48 +55,24 @@ describe('Mute', () => {
 		assert.strictEqual(res.body.hasUnreadMentions, false);
 	}));
 
-	it('ミュートしているユーザーからメンションされても、ストリームに unreadMention イベントが流れてこない', () => new Promise(async done => {
+	it('ミュートしているユーザーからメンションされても、ストリームに unreadMention イベントが流れてこない', async () => {
 		// 状態リセット
 		await request('/i/read-all-unread-notes', {}, alice);
 
-		let fired = false;
+		const fired = await waitFire(alice, 'main', () => post(carol, { text: '@alice hi' }), msg => msg.type === 'unreadMention');
 
-		const ws = await connectStream(alice, 'main', ({ type }) => {
-			if (type == 'unreadMention') {
-				fired = true;
-			}
-		});
+		assert.strictEqual(fired, false);
+	});
 
-		post(carol, { text: '@alice hi' });
-
-		setTimeout(() => {
-			assert.strictEqual(fired, false);
-			ws.close();
-			done();
-		}, 5000);
-	}));
-
-	it('ミュートしているユーザーからメンションされても、ストリームに unreadNotification イベントが流れてこない', () => new Promise(async done => {
+	it('ミュートしているユーザーからメンションされても、ストリームに unreadNotification イベントが流れてこない', async () => {
 		// 状態リセット
 		await request('/i/read-all-unread-notes', {}, alice);
 		await request('/notifications/mark-all-as-read', {}, alice);
 
-		let fired = false;
+		const fired = await waitFire(alice, 'main', () => post(carol, { text: '@alice hi' }), msg => msg.type === 'unreadNotification');
 
-		const ws = await connectStream(alice, 'main', ({ type }) => {
-			if (type == 'unreadNotification') {
-				fired = true;
-			}
-		});
-
-		post(carol, { text: '@alice hi' });
-
-		setTimeout(() => {
-			assert.strictEqual(fired, false);
-			ws.close();
-			done();
-		}, 5000);
-	}));
+		assert.strictEqual(fired, false);
+	});
 
 	describe('Timeline', () => {
 		it('タイムラインにミュートしているユーザーの投稿が含まれない', async(async () => {
diff --git a/packages/backend/test/note.ts b/packages/backend/test/note.ts
index 1183e9e4f1..b495d8b7bb 100644
--- a/packages/backend/test/note.ts
+++ b/packages/backend/test/note.ts
@@ -3,7 +3,7 @@ process.env.NODE_ENV = 'test';
 import * as assert from 'assert';
 import * as childProcess from 'child_process';
 import { Note } from '../src/models/entities/note.js';
-import { async, signup, request, post, uploadFile, startServer, shutdownServer, initTestDb } from './utils.js';
+import { async, signup, request, post, uploadUrl, startServer, shutdownServer, initTestDb, api } from './utils.js';
 
 describe('Note', () => {
 	let p: childProcess.ChildProcess;
@@ -37,7 +37,7 @@ describe('Note', () => {
 	}));
 
 	it('ファイルを添付できる', async(async () => {
-		const file = await uploadFile(alice);
+		const file = await uploadUrl(alice, 'https://raw.githubusercontent.com/misskey-dev/misskey/develop/packages/backend/test/resources/Lenna.jpg');
 
 		const res = await request('/notes/create', {
 			fileIds: [file.id],
@@ -49,7 +49,7 @@ describe('Note', () => {
 	}));
 
 	it('他人のファイルは無視', async(async () => {
-		const file = await uploadFile(bob);
+		const file = await uploadUrl(bob, 'https://raw.githubusercontent.com/misskey-dev/misskey/develop/packages/backend/test/resources/Lenna.jpg');
 
 		const res = await request('/notes/create', {
 			text: 'test',
@@ -72,11 +72,13 @@ describe('Note', () => {
 		assert.deepStrictEqual(res.body.createdNote.fileIds, []);
 	}));
 
-	it('不正なファイルIDで怒られる', async(async () => {
+	it('不正なファイルIDは無視', async(async () => {
 		const res = await request('/notes/create', {
 			fileIds: ['kyoppie'],
 		}, alice);
-		assert.strictEqual(res.status, 400);
+		assert.strictEqual(res.status, 200);
+		assert.strictEqual(typeof res.body === 'object' && !Array.isArray(res.body), true);
+		assert.deepStrictEqual(res.body.createdNote.fileIds, []);
 	}));
 
 	it('返信できる', async(async () => {
@@ -136,7 +138,7 @@ describe('Note', () => {
 
 	it('文字数ぎりぎりで怒られない', async(async () => {
 		const post = {
-			text: '!'.repeat(500),
+			text: '!'.repeat(3000),
 		};
 		const res = await request('/notes/create', post, alice);
 		assert.strictEqual(res.status, 200);
@@ -144,7 +146,7 @@ describe('Note', () => {
 
 	it('文字数オーバーで怒られる', async(async () => {
 		const post = {
-			text: '!'.repeat(501),
+			text: '!'.repeat(3001),
 		};
 		const res = await request('/notes/create', post, alice);
 		assert.strictEqual(res.status, 400);
@@ -207,7 +209,7 @@ describe('Note', () => {
 		assert.strictEqual(typeof res.body === 'object' && !Array.isArray(res.body), true);
 		assert.strictEqual(res.body.createdNote.text, post.text);
 
-		const noteDoc = await Notes.findOne(res.body.createdNote.id);
+		const noteDoc = await Notes.findOneBy({ id: res.body.createdNote.id });
 		assert.deepStrictEqual(noteDoc.mentions, [bob.id]);
 	}));
 
@@ -336,32 +338,32 @@ describe('Note', () => {
 
 	describe('notes/delete', () => {
 		it('delete a reply', async(async () => {
-			const mainNoteRes = await request('/notes/create', {
+			const mainNoteRes = await api('notes/create', {
 				text: 'main post',
 			}, alice);
-			const replyOneRes = await request('/notes/create', {
+			const replyOneRes = await api('notes/create', {
 				text: 'reply one',
 				replyId: mainNoteRes.body.createdNote.id,
 			}, alice);
-			const replyTwoRes = await request('/notes/create', {
+			const replyTwoRes = await api('notes/create', {
 				text: 'reply two',
 				replyId: mainNoteRes.body.createdNote.id,
 			}, alice);
 
-			const deleteOneRes = await request('/notes/delete', {
+			const deleteOneRes = await api('notes/delete', {
 				noteId: replyOneRes.body.createdNote.id,
 			}, alice);
 
 			assert.strictEqual(deleteOneRes.status, 204);
-			let mainNote = await Notes.findOne({ id: mainNoteRes.body.createdNote.id });
+			let mainNote = await Notes.findOneBy({ id: mainNoteRes.body.createdNote.id });
 			assert.strictEqual(mainNote.repliesCount, 1);
 
-			const deleteTwoRes = await request('/notes/delete', {
+			const deleteTwoRes = await api('notes/delete', {
 				noteId: replyTwoRes.body.createdNote.id,
 			}, alice);
 
 			assert.strictEqual(deleteTwoRes.status, 204);
-			mainNote = await Notes.findOne({ id: mainNoteRes.body.createdNote.id });
+			mainNote = await Notes.findOneBy({ id: mainNoteRes.body.createdNote.id });
 			assert.strictEqual(mainNote.repliesCount, 0);
 		}));
 	});
diff --git a/packages/backend/test/user-notes.ts b/packages/backend/test/user-notes.ts
index 5b7933da67..4447754d66 100644
--- a/packages/backend/test/user-notes.ts
+++ b/packages/backend/test/user-notes.ts
@@ -2,12 +2,7 @@ process.env.NODE_ENV = 'test';
 
 import * as assert from 'assert';
 import * as childProcess from 'child_process';
-import { dirname } from 'node:path';
-import { fileURLToPath } from 'node:url';
-import { async, signup, request, post, uploadFile, startServer, shutdownServer } from './utils.js';
-
-const _filename = fileURLToPath(import.meta.url);
-const _dirname = dirname(_filename);
+import { async, signup, request, post, uploadUrl, startServer, shutdownServer } from './utils.js';
 
 describe('users/notes', () => {
 	let p: childProcess.ChildProcess;
@@ -20,8 +15,8 @@ describe('users/notes', () => {
 	before(async () => {
 		p = await startServer();
 		alice = await signup({ username: 'alice' });
-		const jpg = await uploadFile(alice, _dirname + '/resources/Lenna.jpg');
-		const png = await uploadFile(alice, _dirname + '/resources/Lenna.png');
+		const jpg = await uploadUrl(alice, 'https://raw.githubusercontent.com/misskey-dev/misskey/develop/packages/backend/test/resources/Lenna.jpg');
+		const png = await uploadUrl(alice, 'https://raw.githubusercontent.com/misskey-dev/misskey/develop/packages/backend/test/resources/Lenna.png');
 		jpgNote = await post(alice, {
 			fileIds: [jpg.id],
 		});
diff --git a/packages/backend/test/utils.ts b/packages/backend/test/utils.ts
index 5eb4ed3b01..0ee15067d1 100644
--- a/packages/backend/test/utils.ts
+++ b/packages/backend/test/utils.ts
@@ -1,16 +1,18 @@
 import * as fs from 'node:fs';
+import * as path from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { dirname } from 'node:path';
 import * as childProcess from 'child_process';
 import * as http from 'node:http';
 import { SIGKILL } from 'constants';
-import * as WebSocket from 'ws';
+import WebSocket from 'ws';
 import * as misskey from 'misskey-js';
 import fetch from 'node-fetch';
 import FormData from 'form-data';
 import { DataSource } from 'typeorm';
 import loadConfig from '../src/config/load.js';
 import { entities } from '../src/db/postgre.js';
+import got from 'got';
 
 const _filename = fileURLToPath(import.meta.url);
 const _dirname = dirname(_filename);
@@ -26,6 +28,42 @@ export const async = (fn: Function) => (done: Function) => {
 	});
 };
 
+export const api = async (endpoint: string, params: any, me?: any) => {
+	endpoint = endpoint.replace(/^\//, '');
+
+	const auth = me ? {
+		i: me.token
+	} : {};
+
+	const res = await got<string>(`http://localhost:${port}/api/${endpoint}`, {
+		method: 'POST',
+		headers: {
+			'Content-Type': 'application/json'
+		},
+		body: JSON.stringify(Object.assign(auth, params)),
+		retry: {
+			limit: 0,
+		},
+		hooks: {
+			beforeError: [
+				error => {
+					const { response } = error;
+					if (response && response.body) console.warn(response.body);
+					return error;
+				}
+			]
+		},
+	});
+
+	const status = res.statusCode;
+	const body = res.statusCode !== 204 ? await JSON.parse(res.body) : null;
+
+	return {
+		status,
+		body
+	};
+};
+
 export const request = async (endpoint: string, params: any, me?: any): Promise<{ body: any, status: number }> => {
 	const auth = me ? {
 		i: me.token,
@@ -53,7 +91,7 @@ export const signup = async (params?: any): Promise<any> => {
 		password: 'test',
 	}, params);
 
-	const res = await request('/signup', q);
+	const res = await api('signup', q);
 
 	return res.body;
 };
@@ -63,34 +101,62 @@ export const post = async (user: any, params?: misskey.Endpoints['notes/create']
 		text: 'test',
 	}, params);
 
-	const res = await request('/notes/create', q, user);
+	const res = await api('notes/create', q, user);
 
 	return res.body ? res.body.createdNote : null;
 };
 
 export const react = async (user: any, note: any, reaction: string): Promise<any> => {
-	await request('/notes/reactions/create', {
+	await api('notes/reactions/create', {
 		noteId: note.id,
 		reaction: reaction,
 	}, user);
 };
 
-export const uploadFile = (user: any, path?: string): Promise<any> => {
-	const formData = new FormData();
-	formData.append('i', user.token);
-	formData.append('file', fs.createReadStream(path || _dirname + '/resources/Lenna.png'));
+/**
+ * Upload file
+ * @param user User
+ * @param _path Optional, absolute path or relative from ./resources/
+ */
+export const uploadFile = async (user: any, _path?: string): Promise<any> => {
+	const absPath = _path == null ? `${_dirname}/resources/Lenna.jpg` : path.isAbsolute(_path) ? _path : `${_dirname}/resources/${_path}`;
 
-	return fetch(`http://localhost:${port}/api/drive/files/create`, {
-		method: 'post',
+	const formData = new FormData() as any;
+	formData.append('i', user.token);
+	formData.append('file', fs.createReadStream(absPath));
+	formData.append('force', 'true');
+
+	const res = await got<string>(`http://localhost:${port}/api/drive/files/create`, {
+		method: 'POST',
 		body: formData,
-		timeout: 30 * 1000,
-	}).then(res => {
-		if (!res.ok) {
-			throw `${res.status} ${res.statusText}`;
-		} else {
-			return res.json();
+		retry: {
+			limit: 0,
+		},
+	});
+
+	const body = res.statusCode !== 204 ? await JSON.parse(res.body) : null;
+
+	return body;
+};
+
+export const uploadUrl = async (user: any, url: string) => {
+	let file: any;
+
+	const ws = await connectStream(user, 'main', (msg) => {
+		if (msg.type === 'driveFileCreated') {
+			file = msg.body;
 		}
 	});
+
+	await api('drive/files/upload-from-url', {
+		url,
+		force: true,
+	}, user);
+
+	await sleep(5000);
+	ws.close();
+
+	return file;
 };
 
 export function connectStream(user: any, channel: string, listener: (message: Record<string, any>) => any, params?: any): Promise<WebSocket> {
@@ -120,6 +186,40 @@ export function connectStream(user: any, channel: string, listener: (message: Re
 	});
 }
 
+export const waitFire = async (user: any, channel: string, trgr: () => any, cond: (msg: Record<string, any>) => boolean) => {
+	return new Promise<boolean>(async (res, rej) => {
+		let timer: NodeJS.Timeout;
+
+		let ws: WebSocket;
+		try {
+			ws = await connectStream(user, channel, msg => {
+				if (cond(msg)) {
+					ws.close();
+					if (timer) clearTimeout(timer);
+					res(true);
+				}
+			});
+		} catch (e) {
+			rej(e);
+		}
+
+		if (!ws!) return;
+
+		timer = setTimeout(() => {
+			ws.close();
+			res(false);
+		}, 5000);
+
+		try {
+			await trgr();
+		} catch (e) {
+			ws.close();
+			if (timer) clearTimeout(timer);
+			rej(e);
+		}
+	})
+};
+
 export const simpleGet = async (path: string, accept = '*/*'): Promise<{ status?: number, type?: string, location?: string }> => {
 	// node-fetchだと3xxを取れない
 	return await new Promise((resolve, reject) => {
@@ -176,7 +276,7 @@ export async function initTestDb(justBorrow = false, initEntities?: any[]) {
 	return db;
 }
 
-export function startServer(timeout = 30 * 1000): Promise<childProcess.ChildProcess> {
+export function startServer(timeout = 60 * 1000): Promise<childProcess.ChildProcess> {
 	return new Promise((res, rej) => {
 		const t = setTimeout(() => {
 			p.kill(SIGKILL);
@@ -214,3 +314,11 @@ export function shutdownServer(p: childProcess.ChildProcess, timeout = 20 * 1000
 		p.kill();
 	});
 }
+
+export function sleep(msec: number) {
+	return new Promise<void>(res => {
+		setTimeout(() => {
+			res();
+		}, msec);
+	});
+}

From 0ec266abf7cb17f1e1fe02c151377c3b7960af4b Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sun, 26 Jun 2022 19:41:21 +0900
Subject: [PATCH 76/90] chore(client): tweak client

---
 .../src/components/modal-page-window.vue      |  6 +++++-
 .../client/src/components/ui/modal-window.vue | 16 +++++++-------
 packages/client/src/components/ui/window.vue  | 21 +++++++------------
 packages/client/src/style.scss                |  8 -------
 4 files changed, 20 insertions(+), 31 deletions(-)

diff --git a/packages/client/src/components/modal-page-window.vue b/packages/client/src/components/modal-page-window.vue
index aef70f113b..a810bd2144 100644
--- a/packages/client/src/components/modal-page-window.vue
+++ b/packages/client/src/components/modal-page-window.vue
@@ -1,6 +1,6 @@
 <template>
 <MkModal ref="modal" @click="$emit('click')" @closed="$emit('closed')">
-	<div ref="rootEl" class="hrmcaedk _window _narrow_" :style="{ width: `${width}px`, height: (height ? `min(${height}px, 100%)` : '100%') }">
+	<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="$ts.goBack" class="_button" @click="back()"><i class="fas fa-arrow-left"></i></button>
 			<span v-else style="display: inline-block; width: 20px"></span>
@@ -121,6 +121,7 @@ function onContextmenu(ev: MouseEvent) {
 	display: flex;
 	flex-direction: column;
 	contain: content;
+	border-radius: var(--radius);
 
 	--root-margin: 24px;
 
@@ -139,6 +140,9 @@ function onContextmenu(ev: MouseEvent) {
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
+		background: var(--windowHeader);
+		-webkit-backdrop-filter: var(--blur, blur(15px));
+		backdrop-filter: var(--blur, blur(15px));
 		box-shadow: 0px 1px var(--divider);
 
 		> button {
diff --git a/packages/client/src/components/ui/modal-window.vue b/packages/client/src/components/ui/modal-window.vue
index d2b2ccff7a..bf9be971fc 100644
--- a/packages/client/src/components/ui/modal-window.vue
+++ b/packages/client/src/components/ui/modal-window.vue
@@ -1,6 +1,6 @@
 <template>
 <MkModal ref="modal" :prefer-type="'dialog'" @click="onBgClick" @closed="$emit('closed')">
-	<div ref="rootEl" class="ebkgoccj _window _narrow_" :style="{ width: `${width}px`, height: scroll ? (height ? `${height}px` : null) : (height ? `min(${height}px, 100%)` : '100%') }" @keydown="onKeydown">
+	<div ref="rootEl" class="ebkgoccj _narrow_" :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="fas fa-times"></i></button>
 			<span class="title">
@@ -9,12 +9,7 @@
 			<button v-if="!withOkButton" class="_button" @click="$emit('close')"><i class="fas fa-times"></i></button>
 			<button v-if="withOkButton" class="_button" :disabled="okButtonDisabled" @click="$emit('ok')"><i class="fas fa-check"></i></button>
 		</div>
-		<div v-if="padding" class="body">
-			<div class="_section">
-				<slot :width="bodyWidth" :height="bodyHeight"></slot>
-			</div>
-		</div>
-		<div v-else class="body">
+		<div class="body">
 			<slot :width="bodyWidth" :height="bodyHeight"></slot>
 		</div>
 	</div>
@@ -28,14 +23,12 @@ import MkModal from './modal.vue';
 const props = withDefaults(defineProps<{
 	withOkButton: boolean;
 	okButtonDisabled: boolean;
-	padding: boolean;
 	width: number;
 	height: number | null;
 	scroll: boolean;
 }>(), {
 	withOkButton: false,
 	okButtonDisabled: false,
-	padding: false,
 	width: 400,
 	height: null,
 	scroll: true,
@@ -96,6 +89,7 @@ defineExpose({
 	display: flex;
 	flex-direction: column;
 	contain: content;
+	border-radius: var(--radius);
 
 	--root-margin: 24px;
 
@@ -108,6 +102,9 @@ defineExpose({
 		$height-narrow: 42px;
 		display: flex;
 		flex-shrink: 0;
+		background: var(--windowHeader);
+		-webkit-backdrop-filter: var(--blur, blur(15px));
+		backdrop-filter: var(--blur, blur(15px));
 		box-shadow: 0px 1px var(--divider);
 
 		> button {
@@ -143,6 +140,7 @@ defineExpose({
 
 	> .body {
 		overflow: auto;
+		background: var(--panel);
 	}
 }
 </style>
diff --git a/packages/client/src/components/ui/window.vue b/packages/client/src/components/ui/window.vue
index a5efab154b..25f937ef10 100644
--- a/packages/client/src/components/ui/window.vue
+++ b/packages/client/src/components/ui/window.vue
@@ -1,7 +1,7 @@
 <template>
 <transition :name="$store.state.animation ? 'window' : ''" appear @after-leave="$emit('closed')">
 	<div v-if="showing" class="ebkgocck">
-		<div class="body _window _shadow _narrow_" @mousedown="onBodyMousedown" @keydown="onKeydown">
+		<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>
@@ -14,12 +14,7 @@
 					<button v-if="closeButton" class="button _button" @click="close()"><i class="fas fa-times"></i></button>
 				</span>
 			</div>
-			<div v-if="padding" class="body">
-				<div class="_section">
-					<slot></slot>
-				</div>
-			</div>
-			<div v-else class="body">
+			<div class="body">
 				<slot></slot>
 			</div>
 		</div>
@@ -67,11 +62,6 @@ export default defineComponent({
 	},
 
 	props: {
-		padding: {
-			type: Boolean,
-			required: false,
-			default: false,
-		},
 		initialWidth: {
 			type: Number,
 			required: false,
@@ -399,7 +389,8 @@ export default defineComponent({
 		flex-direction: column;
 		contain: content;
 		width: 100%;
-    height: 100%;
+		height: 100%;
+		border-radius: var(--radius);
 
 		> .header {
 			--height: 45px;
@@ -414,6 +405,9 @@ export default defineComponent({
 			flex-shrink: 0;
 			user-select: none;
 			height: var(--height);
+			background: var(--windowHeader);
+			-webkit-backdrop-filter: var(--blur, blur(15px));
+			backdrop-filter: var(--blur, blur(15px));
 			border-bottom: solid 1px var(--divider);
 			font-size: 95%;
 
@@ -454,6 +448,7 @@ export default defineComponent({
 		> .body {
 			flex: 1;
 			overflow: auto;
+			background: var(--panel);
 		}
 	}
 
diff --git a/packages/client/src/style.scss b/packages/client/src/style.scss
index 44dac26265..94b5dd8cbf 100644
--- a/packages/client/src/style.scss
+++ b/packages/client/src/style.scss
@@ -338,14 +338,6 @@ hr {
 	}
 }
 
-._window {
-	background: var(--windowHeader);
-	border-radius: var(--radius);
-	contain: content;
-	-webkit-backdrop-filter: var(--blur, blur(15px));
-	backdrop-filter: var(--blur, blur(15px));
-}
-
 ._popup {
 	background: var(--popup);
 	border-radius: var(--radius);

From bc3ae901cc25fed47b85a9c3b88b13aa4ac0442d Mon Sep 17 00:00:00 2001
From: Johann150 <johann.galle@protonmail.com>
Date: Mon, 27 Jun 2022 14:48:10 +0200
Subject: [PATCH 77/90] refactor: remove duplicate code (#8895)

---
 .../backend/src/misc/is-blocker-user-related.ts   | 15 ---------------
 .../backend/src/misc/is-muted-user-related.ts     | 15 ---------------
 packages/backend/src/misc/is-user-related.ts      | 15 +++++++++++++++
 .../src/server/api/stream/channels/antenna.ts     |  7 +++----
 .../src/server/api/stream/channels/channel.ts     |  7 +++----
 .../server/api/stream/channels/global-timeline.ts |  7 +++----
 .../src/server/api/stream/channels/hashtag.ts     |  7 +++----
 .../server/api/stream/channels/home-timeline.ts   |  7 +++----
 .../server/api/stream/channels/hybrid-timeline.ts |  7 +++----
 .../server/api/stream/channels/local-timeline.ts  |  7 +++----
 .../src/server/api/stream/channels/user-list.ts   |  7 +++----
 .../backend/src/services/add-note-to-antenna.ts   |  4 ++--
 12 files changed, 41 insertions(+), 64 deletions(-)
 delete mode 100644 packages/backend/src/misc/is-blocker-user-related.ts
 delete mode 100644 packages/backend/src/misc/is-muted-user-related.ts
 create mode 100644 packages/backend/src/misc/is-user-related.ts

diff --git a/packages/backend/src/misc/is-blocker-user-related.ts b/packages/backend/src/misc/is-blocker-user-related.ts
deleted file mode 100644
index 8c0ebfad9b..0000000000
--- a/packages/backend/src/misc/is-blocker-user-related.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-export function isBlockerUserRelated(note: any, blockerUserIds: Set<string>): boolean {
-	if (blockerUserIds.has(note.userId)) {
-		return true;
-	}
-
-	if (note.reply != null && blockerUserIds.has(note.reply.userId)) {
-		return true;
-	}
-
-	if (note.renote != null && blockerUserIds.has(note.renote.userId)) {
-		return true;
-	}
-
-	return false;
-}
diff --git a/packages/backend/src/misc/is-muted-user-related.ts b/packages/backend/src/misc/is-muted-user-related.ts
deleted file mode 100644
index 2caa743f95..0000000000
--- a/packages/backend/src/misc/is-muted-user-related.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-export function isMutedUserRelated(note: any, mutedUserIds: Set<string>): boolean {
-	if (mutedUserIds.has(note.userId)) {
-		return true;
-	}
-
-	if (note.reply != null && mutedUserIds.has(note.reply.userId)) {
-		return true;
-	}
-
-	if (note.renote != null && mutedUserIds.has(note.renote.userId)) {
-		return true;
-	}
-
-	return false;
-}
diff --git a/packages/backend/src/misc/is-user-related.ts b/packages/backend/src/misc/is-user-related.ts
new file mode 100644
index 0000000000..e6bbdb5d35
--- /dev/null
+++ b/packages/backend/src/misc/is-user-related.ts
@@ -0,0 +1,15 @@
+export function isUserRelated(note: any, userIds: Set<string>): boolean {
+	if (userIds.has(note.userId)) {
+		return true;
+	}
+
+	if (note.reply != null && userIds.has(note.reply.userId)) {
+		return true;
+	}
+
+	if (note.renote != null && userIds.has(note.renote.userId)) {
+		return true;
+	}
+
+	return false;
+}
diff --git a/packages/backend/src/server/api/stream/channels/antenna.ts b/packages/backend/src/server/api/stream/channels/antenna.ts
index afd14946e1..d28320d928 100644
--- a/packages/backend/src/server/api/stream/channels/antenna.ts
+++ b/packages/backend/src/server/api/stream/channels/antenna.ts
@@ -1,7 +1,6 @@
 import Channel from '../channel.js';
 import { Notes } from '@/models/index.js';
-import { isMutedUserRelated } from '@/misc/is-muted-user-related.js';
-import { isBlockerUserRelated } from '@/misc/is-blocker-user-related.js';
+import { isUserRelated } from '@/misc/is-user-related.js';
 import { StreamMessages } from '../types.js';
 
 export default class extends Channel {
@@ -27,9 +26,9 @@ export default class extends Channel {
 			const note = await Notes.pack(data.body.id, this.user, { detail: true });
 
 			// 流れてきたNoteがミュートしているユーザーが関わるものだったら無視する
-			if (isMutedUserRelated(note, this.muting)) return;
+			if (isUserRelated(note, this.muting)) return;
 			// 流れてきたNoteがブロックされているユーザーが関わるものだったら無視する
-			if (isBlockerUserRelated(note, this.blocking)) return;
+			if (isUserRelated(note, this.blocking)) return;
 
 			this.connection.cacheNote(note);
 
diff --git a/packages/backend/src/server/api/stream/channels/channel.ts b/packages/backend/src/server/api/stream/channels/channel.ts
index 16ad809395..5148cfd055 100644
--- a/packages/backend/src/server/api/stream/channels/channel.ts
+++ b/packages/backend/src/server/api/stream/channels/channel.ts
@@ -1,7 +1,6 @@
 import Channel from '../channel.js';
 import { Notes, Users } from '@/models/index.js';
-import { isMutedUserRelated } from '@/misc/is-muted-user-related.js';
-import { isBlockerUserRelated } from '@/misc/is-blocker-user-related.js';
+import { isUserRelated } from '@/misc/is-user-related.js';
 import { User } from '@/models/entities/user.js';
 import { StreamMessages } from '../types.js';
 import { Packed } from '@/misc/schema.js';
@@ -45,9 +44,9 @@ export default class extends Channel {
 		}
 
 		// 流れてきたNoteがミュートしているユーザーが関わるものだったら無視する
-		if (isMutedUserRelated(note, this.muting)) return;
+		if (isUserRelated(note, this.muting)) return;
 		// 流れてきたNoteがブロックされているユーザーが関わるものだったら無視する
-		if (isBlockerUserRelated(note, this.blocking)) return;
+		if (isUserRelated(note, this.blocking)) return;
 
 		this.connection.cacheNote(note);
 
diff --git a/packages/backend/src/server/api/stream/channels/global-timeline.ts b/packages/backend/src/server/api/stream/channels/global-timeline.ts
index 1c7e038ab2..5b4ae850ec 100644
--- a/packages/backend/src/server/api/stream/channels/global-timeline.ts
+++ b/packages/backend/src/server/api/stream/channels/global-timeline.ts
@@ -1,10 +1,9 @@
-import { isMutedUserRelated } from '@/misc/is-muted-user-related.js';
 import Channel from '../channel.js';
 import { fetchMeta } from '@/misc/fetch-meta.js';
 import { Notes } from '@/models/index.js';
 import { checkWordMute } from '@/misc/check-word-mute.js';
-import { isBlockerUserRelated } from '@/misc/is-blocker-user-related.js';
 import { isInstanceMuted } from '@/misc/is-instance-muted.js';
+import { isUserRelated } from '@/misc/is-user-related.js';
 import { Packed } from '@/misc/schema.js';
 
 export default class extends Channel {
@@ -55,9 +54,9 @@ export default class extends Channel {
 		if (isInstanceMuted(note, new Set<string>(this.userProfile?.mutedInstances ?? []))) return;
 
 		// 流れてきたNoteがミュートしているユーザーが関わるものだったら無視する
-		if (isMutedUserRelated(note, this.muting)) return;
+		if (isUserRelated(note, this.muting)) return;
 		// 流れてきたNoteがブロックされているユーザーが関わるものだったら無視する
-		if (isBlockerUserRelated(note, this.blocking)) return;
+		if (isUserRelated(note, this.blocking)) return;
 
 		// 流れてきたNoteがミュートすべきNoteだったら無視する
 		// TODO: 将来的には、単にMutedNoteテーブルにレコードがあるかどうかで判定したい(以下の理由により難しそうではある)
diff --git a/packages/backend/src/server/api/stream/channels/hashtag.ts b/packages/backend/src/server/api/stream/channels/hashtag.ts
index 1b7a58022f..741db447e6 100644
--- a/packages/backend/src/server/api/stream/channels/hashtag.ts
+++ b/packages/backend/src/server/api/stream/channels/hashtag.ts
@@ -1,8 +1,7 @@
-import { isMutedUserRelated } from '@/misc/is-muted-user-related.js';
 import Channel from '../channel.js';
 import { Notes } from '@/models/index.js';
 import { normalizeForSearch } from '@/misc/normalize-for-search.js';
-import { isBlockerUserRelated } from '@/misc/is-blocker-user-related.js';
+import { isUserRelated } from '@/misc/is-user-related.js';
 import { Packed } from '@/misc/schema.js';
 
 export default class extends Channel {
@@ -38,9 +37,9 @@ export default class extends Channel {
 		}
 
 		// 流れてきたNoteがミュートしているユーザーが関わるものだったら無視する
-		if (isMutedUserRelated(note, this.muting)) return;
+		if (isUserRelated(note, this.muting)) return;
 		// 流れてきたNoteがブロックされているユーザーが関わるものだったら無視する
-		if (isBlockerUserRelated(note, this.blocking)) return;
+		if (isUserRelated(note, this.blocking)) return;
 
 		this.connection.cacheNote(note);
 
diff --git a/packages/backend/src/server/api/stream/channels/home-timeline.ts b/packages/backend/src/server/api/stream/channels/home-timeline.ts
index 3a8e55202a..075a242ef0 100644
--- a/packages/backend/src/server/api/stream/channels/home-timeline.ts
+++ b/packages/backend/src/server/api/stream/channels/home-timeline.ts
@@ -1,8 +1,7 @@
-import { isMutedUserRelated } from '@/misc/is-muted-user-related.js';
 import Channel from '../channel.js';
 import { Notes } from '@/models/index.js';
 import { checkWordMute } from '@/misc/check-word-mute.js';
-import { isBlockerUserRelated } from '@/misc/is-blocker-user-related.js';
+import { isUserRelated } from '@/misc/is-user-related.js';
 import { isInstanceMuted } from '@/misc/is-instance-muted.js';
 import { Packed } from '@/misc/schema.js';
 
@@ -63,9 +62,9 @@ export default class extends Channel {
 		}
 
 		// 流れてきたNoteがミュートしているユーザーが関わるものだったら無視する
-		if (isMutedUserRelated(note, this.muting)) return;
+		if (isUserRelated(note, this.muting)) return;
 		// 流れてきたNoteがブロックされているユーザーが関わるものだったら無視する
-		if (isBlockerUserRelated(note, this.blocking)) return;
+		if (isUserRelated(note, this.blocking)) return;
 
 		// 流れてきたNoteがミュートすべきNoteだったら無視する
 		// TODO: 将来的には、単にMutedNoteテーブルにレコードがあるかどうかで判定したい(以下の理由により難しそうではある)
diff --git a/packages/backend/src/server/api/stream/channels/hybrid-timeline.ts b/packages/backend/src/server/api/stream/channels/hybrid-timeline.ts
index f3ceeffa1a..f5dedf77ce 100644
--- a/packages/backend/src/server/api/stream/channels/hybrid-timeline.ts
+++ b/packages/backend/src/server/api/stream/channels/hybrid-timeline.ts
@@ -1,9 +1,8 @@
-import { isMutedUserRelated } from '@/misc/is-muted-user-related.js';
 import Channel from '../channel.js';
 import { fetchMeta } from '@/misc/fetch-meta.js';
 import { Notes } from '@/models/index.js';
 import { checkWordMute } from '@/misc/check-word-mute.js';
-import { isBlockerUserRelated } from '@/misc/is-blocker-user-related.js';
+import { isUserRelated } from '@/misc/is-user-related.js';
 import { isInstanceMuted } from '@/misc/is-instance-muted.js';
 import { Packed } from '@/misc/schema.js';
 
@@ -71,9 +70,9 @@ export default class extends Channel {
 		}
 
 		// 流れてきたNoteがミュートしているユーザーが関わるものだったら無視する
-		if (isMutedUserRelated(note, this.muting)) return;
+		if (isUserRelated(note, this.muting)) return;
 		// 流れてきたNoteがブロックされているユーザーが関わるものだったら無視する
-		if (isBlockerUserRelated(note, this.blocking)) return;
+		if (isUserRelated(note, this.blocking)) return;
 
 		// 流れてきたNoteがミュートすべきNoteだったら無視する
 		// TODO: 将来的には、単にMutedNoteテーブルにレコードがあるかどうかで判定したい(以下の理由により難しそうではある)
diff --git a/packages/backend/src/server/api/stream/channels/local-timeline.ts b/packages/backend/src/server/api/stream/channels/local-timeline.ts
index 4e198482a0..8bb9279878 100644
--- a/packages/backend/src/server/api/stream/channels/local-timeline.ts
+++ b/packages/backend/src/server/api/stream/channels/local-timeline.ts
@@ -1,9 +1,8 @@
-import { isMutedUserRelated } from '@/misc/is-muted-user-related.js';
 import Channel from '../channel.js';
 import { fetchMeta } from '@/misc/fetch-meta.js';
 import { Notes } from '@/models/index.js';
 import { checkWordMute } from '@/misc/check-word-mute.js';
-import { isBlockerUserRelated } from '@/misc/is-blocker-user-related.js';
+import { isUserRelated } from '@/misc/is-user-related.js';
 import { Packed } from '@/misc/schema.js';
 
 export default class extends Channel {
@@ -52,9 +51,9 @@ export default class extends Channel {
 		}
 
 		// 流れてきたNoteがミュートしているユーザーが関わるものだったら無視する
-		if (isMutedUserRelated(note, this.muting)) return;
+		if (iUserRelated(note, this.muting)) return;
 		// 流れてきたNoteがブロックされているユーザーが関わるものだったら無視する
-		if (isBlockerUserRelated(note, this.blocking)) return;
+		if (isUserRelated(note, this.blocking)) return;
 
 		// 流れてきたNoteがミュートすべきNoteだったら無視する
 		// TODO: 将来的には、単にMutedNoteテーブルにレコードがあるかどうかで判定したい(以下の理由により難しそうではある)
diff --git a/packages/backend/src/server/api/stream/channels/user-list.ts b/packages/backend/src/server/api/stream/channels/user-list.ts
index d8034e83fe..97ad2983c5 100644
--- a/packages/backend/src/server/api/stream/channels/user-list.ts
+++ b/packages/backend/src/server/api/stream/channels/user-list.ts
@@ -1,8 +1,7 @@
 import Channel from '../channel.js';
 import { Notes, UserListJoinings, UserLists } from '@/models/index.js';
-import { isMutedUserRelated } from '@/misc/is-muted-user-related.js';
 import { User } from '@/models/entities/user.js';
-import { isBlockerUserRelated } from '@/misc/is-blocker-user-related.js';
+import { isUserRelated } from '@/misc/is-user-related.js';
 import { Packed } from '@/misc/schema.js';
 
 export default class extends Channel {
@@ -76,9 +75,9 @@ export default class extends Channel {
 		}
 
 		// 流れてきたNoteがミュートしているユーザーが関わるものだったら無視する
-		if (isMutedUserRelated(note, this.muting)) return;
+		if (isUserRelated(note, this.muting)) return;
 		// 流れてきたNoteがブロックされているユーザーが関わるものだったら無視する
-		if (isBlockerUserRelated(note, this.blocking)) return;
+		if (isUserRelated(note, this.blocking)) return;
 
 		this.send('note', note);
 	}
diff --git a/packages/backend/src/services/add-note-to-antenna.ts b/packages/backend/src/services/add-note-to-antenna.ts
index f86f394f80..1f344222e1 100644
--- a/packages/backend/src/services/add-note-to-antenna.ts
+++ b/packages/backend/src/services/add-note-to-antenna.ts
@@ -2,7 +2,7 @@ import { Antenna } from '@/models/entities/antenna.js';
 import { Note } from '@/models/entities/note.js';
 import { AntennaNotes, Mutings, Notes } from '@/models/index.js';
 import { genId } from '@/misc/gen-id.js';
-import { isMutedUserRelated } from '@/misc/is-muted-user-related.js';
+import { isUserRelated } from '@/misc/is-user-related.js';
 import { publishAntennaStream, publishMainStream } from '@/services/stream.js';
 import { User } from '@/models/entities/user.js';
 
@@ -39,7 +39,7 @@ export async function addNoteToAntenna(antenna: Antenna, note: Note, noteUser: {
 			_note.renote = await Notes.findOneByOrFail({ id: note.renoteId });
 		}
 
-		if (isMutedUserRelated(_note, new Set<string>(mutings.map(x => x.muteeId)))) {
+		if (isUserRelated(_note, new Set<string>(mutings.map(x => x.muteeId)))) {
 			return;
 		}
 

From 329f055a976dc3b2e12f2a0141bfab2c57ae9193 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Mon, 27 Jun 2022 23:49:16 +0900
Subject: [PATCH 78/90] feat: make possible to delete an account by admin

Resolve #8830
---
 CHANGELOG.md                                  |  1 +
 locales/ja-JP.yml                             |  2 ++
 packages/backend/src/server/api/endpoints.ts  |  2 ++
 .../api/endpoints/admin/delete-account.ts     | 31 +++++++++++++++++++
 .../server/api/endpoints/i/delete-account.ts  | 20 ++----------
 .../backend/src/services/delete-account.ts    | 23 ++++++++++++++
 packages/client/src/pages/user-info.vue       | 29 ++++++++++++++++-
 7 files changed, 90 insertions(+), 18 deletions(-)
 create mode 100644 packages/backend/src/server/api/endpoints/admin/delete-account.ts
 create mode 100644 packages/backend/src/services/delete-account.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8b147ed4b6..e9bb600ff9 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -16,6 +16,7 @@ You should also include the user name that made the change.
 - Server: Add rate limit to i/notifications @tamaina
 - Client: Improve control panel @syuilo
 - Client: Show warning in control panel when there is an unresolved abuse report @syuilo
+- Make possible to delete an account by admin @syuilo
 - Improve player detection in URL preview @mei23
 - Add Badge Image to Push Notification #8012 @tamaina
 - Client: Removing entries from a clip @futchitwo
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 7788a04dc3..f813389225 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -855,6 +855,8 @@ thereIsUnresolvedAbuseReportWarning: "未対応の通報があります。"
 recommended: "推奨"
 check: "チェック"
 isSystemAccount: "システムにより自動で作成・管理されているアカウントです。"
+typeToConfirm: "この操作を行うには {x} と入力してください"
+deleteAccount: "アカウント削除"
 
 _emailUnavailable:
   used: "既に使用されています"
diff --git a/packages/backend/src/server/api/endpoints.ts b/packages/backend/src/server/api/endpoints.ts
index 11d9d7c026..93f93cef0c 100644
--- a/packages/backend/src/server/api/endpoints.ts
+++ b/packages/backend/src/server/api/endpoints.ts
@@ -59,6 +59,7 @@ import * as ep___admin_unsilenceUser from './endpoints/admin/unsilence-user.js';
 import * as ep___admin_unsuspendUser from './endpoints/admin/unsuspend-user.js';
 import * as ep___admin_updateMeta from './endpoints/admin/update-meta.js';
 import * as ep___admin_vacuum from './endpoints/admin/vacuum.js';
+import * as ep___admin_deleteAccount from './endpoints/admin/delete-account.js';
 import * as ep___announcements from './endpoints/announcements.js';
 import * as ep___antennas_create from './endpoints/antennas/create.js';
 import * as ep___antennas_delete from './endpoints/antennas/delete.js';
@@ -370,6 +371,7 @@ const eps = [
 	['admin/unsuspend-user', ep___admin_unsuspendUser],
 	['admin/update-meta', ep___admin_updateMeta],
 	['admin/vacuum', ep___admin_vacuum],
+	['admin/delete-account', ep___admin_deleteAccount],
 	['announcements', ep___announcements],
 	['antennas/create', ep___antennas_create],
 	['antennas/delete', ep___antennas_delete],
diff --git a/packages/backend/src/server/api/endpoints/admin/delete-account.ts b/packages/backend/src/server/api/endpoints/admin/delete-account.ts
new file mode 100644
index 0000000000..2d7ef2f236
--- /dev/null
+++ b/packages/backend/src/server/api/endpoints/admin/delete-account.ts
@@ -0,0 +1,31 @@
+import { Users } from '@/models/index.js';
+import { deleteAccount } from '@/services/delete-account.js';
+import define from '../../define.js';
+
+export const meta = {
+	tags: ['admin'],
+
+	requireCredential: true,
+	requireAdmin: true,
+
+	res: {
+	},
+} as const;
+
+export const paramDef = {
+	type: 'object',
+	properties: {
+		userId: { type: 'string', format: 'misskey:id' },
+	},
+	required: ['userId'],
+} as const;
+
+// eslint-disable-next-line import/no-default-export
+export default define(meta, paramDef, async (ps) => {
+	const user = await Users.findOneByOrFail({ id: ps.userId });
+	if (user.isDeleted) {
+		return;
+	}
+
+	await deleteAccount(user);
+});
diff --git a/packages/backend/src/server/api/endpoints/i/delete-account.ts b/packages/backend/src/server/api/endpoints/i/delete-account.ts
index 184005eb53..ede4a9d03b 100644
--- a/packages/backend/src/server/api/endpoints/i/delete-account.ts
+++ b/packages/backend/src/server/api/endpoints/i/delete-account.ts
@@ -1,9 +1,7 @@
 import bcrypt from 'bcryptjs';
-import define from '../../define.js';
 import { UserProfiles, Users } from '@/models/index.js';
-import { doPostSuspend } from '@/services/suspend-user.js';
-import { publishUserEvent } from '@/services/stream.js';
-import { createDeleteAccountJob } from '@/queue/index.js';
+import { deleteAccount } from '@/services/delete-account.js';
+import define from '../../define.js';
 
 export const meta = {
 	requireCredential: true,
@@ -34,17 +32,5 @@ export default define(meta, paramDef, async (ps, user) => {
 		throw new Error('incorrect password');
 	}
 
-	// 物理削除する前にDelete activityを送信する
-	await doPostSuspend(user).catch(e => {});
-
-	createDeleteAccountJob(user, {
-		soft: false,
-	});
-
-	await Users.update(user.id, {
-		isDeleted: true,
-	});
-
-	// Terminate streaming
-	publishUserEvent(user.id, 'terminate', {});
+	await deleteAccount(user);
 });
diff --git a/packages/backend/src/services/delete-account.ts b/packages/backend/src/services/delete-account.ts
new file mode 100644
index 0000000000..0fdceb671b
--- /dev/null
+++ b/packages/backend/src/services/delete-account.ts
@@ -0,0 +1,23 @@
+import { Users } from '@/models/index.js';
+import { createDeleteAccountJob } from '@/queue/index.js';
+import { publishUserEvent } from './stream.js';
+import { doPostSuspend } from './suspend-user.js';
+
+export async function deleteAccount(user: {
+	id: string;
+	host: string | null;
+}): Promise<void> {
+	// 物理削除する前にDelete activityを送信する
+	await doPostSuspend(user).catch(e => {});
+
+	createDeleteAccountJob(user, {
+		soft: false,
+	});
+
+	await Users.update(user.id, {
+		isDeleted: true,
+	});
+
+	// Terminate streaming
+	publishUserEvent(user.id, 'terminate', {});
+}
diff --git a/packages/client/src/pages/user-info.vue b/packages/client/src/pages/user-info.vue
index 86c1be8d06..9dfb2d87a0 100644
--- a/packages/client/src/pages/user-info.vue
+++ b/packages/client/src/pages/user-info.vue
@@ -35,7 +35,10 @@
 					<FormSwitch v-model="silenced" class="_formBlock" @update:modelValue="toggleSilence">{{ $ts.silence }}</FormSwitch>
 					<FormSwitch v-model="suspended" class="_formBlock" @update:modelValue="toggleSuspend">{{ $ts.suspend }}</FormSwitch>
 					{{ $ts.reflectMayTakeTime }}
-					<FormButton v-if="user.host == null && iAmModerator" class="_formBlock" @click="resetPassword"><i class="fas fa-key"></i> {{ $ts.resetPassword }}</FormButton>
+					<div class="_formBlock">
+						<FormButton v-if="user.host == null && iAmModerator" inline style="margin-right: 8px;" @click="resetPassword"><i class="fas fa-key"></i> {{ $ts.resetPassword }}</FormButton>
+						<FormButton v-if="$i.isAdmin" inline danger @click="deleteAccount">{{ $ts.deleteAccount }}</FormButton>
+					</div>
 				</FormSection>
 
 				<FormSection>
@@ -233,6 +236,30 @@ async function deleteAllFiles() {
 	await refreshUser();
 }
 
+async function deleteAccount() {
+	const confirm = await os.confirm({
+		type: 'warning',
+		text: i18n.ts.deleteAccountConfirm,
+	});
+	if (confirm.canceled) return;
+
+	const typed = await os.inputText({
+		text: i18n.t('typeToConfirm', { x: user?.username }),
+	});
+	if (typed.canceled) return;
+
+	if (typed.result === user?.username) {
+		await os.apiWithDialog('admin/delete-account', {
+			userId: user.id,
+		});
+	} else {
+		os.alert({
+			type: 'error',
+			text: 'input not match',
+		});
+	}
+}
+
 watch(() => props.userId, () => {
 	init = createFetcher();
 }, {

From 40cd5c5a498b197d3b739b993afb904e6a5c5499 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Tue, 28 Jun 2022 00:20:51 +0900
Subject: [PATCH 79/90] chore(client): tweak style

---
 packages/client/src/components/form/switch.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/client/src/components/form/switch.vue b/packages/client/src/components/form/switch.vue
index 22b307a46f..fead163552 100644
--- a/packages/client/src/components/form/switch.vue
+++ b/packages/client/src/components/form/switch.vue
@@ -78,6 +78,7 @@ const toggle = () => {
 		border-radius: 999px;
 		cursor: pointer;
 		transition: inherit;
+		user-select: none;
 
 		> .knob {
 			position: absolute;

From 596a61ce186d9a633a93aea07059c3930767e8bf Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Tue, 28 Jun 2022 00:27:24 +0900
Subject: [PATCH 80/90] lint fix

---
 packages/client/src/store.ts | 100 +++++++++++++++++------------------
 1 file changed, 50 insertions(+), 50 deletions(-)

diff --git a/packages/client/src/store.ts b/packages/client/src/store.ts
index deee23951e..a273a46c7c 100644
--- a/packages/client/src/store.ts
+++ b/packages/client/src/store.ts
@@ -13,55 +13,55 @@ export const notePostInterruptors = [];
 export const defaultStore = markRaw(new Storage('base', {
 	tutorial: {
 		where: 'account',
-		default: 0
+		default: 0,
 	},
 	keepCw: {
 		where: 'account',
-		default: true
+		default: true,
 	},
 	showFullAcct: {
 		where: 'account',
-		default: false
+		default: false,
 	},
 	rememberNoteVisibility: {
 		where: 'account',
-		default: false
+		default: false,
 	},
 	defaultNoteVisibility: {
 		where: 'account',
-		default: 'public'
+		default: 'public',
 	},
 	defaultNoteLocalOnly: {
 		where: 'account',
-		default: false
+		default: false,
 	},
 	uploadFolder: {
 		where: 'account',
-		default: null as string | null
+		default: null as string | null,
 	},
 	pastedFileName: {
 		where: 'account',
-		default: 'yyyy-MM-dd HH-mm-ss [{{number}}]'
+		default: 'yyyy-MM-dd HH-mm-ss [{{number}}]',
 	},
 	keepOriginalUploading: {
 		where: 'account',
-		default: false
+		default: false,
 	},
 	memo: {
 		where: 'account',
-		default: null
+		default: null,
 	},
 	reactions: {
 		where: 'account',
-		default: ['👍', '❤️', '😆', '🤔', '😮', '🎉', '💢', '😥', '😇', '🍮']
+		default: ['👍', '❤️', '😆', '🤔', '😮', '🎉', '💢', '😥', '😇', '🍮'],
 	},
 	mutedWords: {
 		where: 'account',
-		default: []
+		default: [],
 	},
 	mutedAds: {
 		where: 'account',
-		default: [] as string[]
+		default: [] as string[],
 	},
 
 	menu: {
@@ -78,15 +78,15 @@ export const defaultStore = markRaw(new Storage('base', {
 			'search',
 			'-',
 			'ui',
-		]
+		],
 	},
 	visibility: {
 		where: 'deviceAccount',
-		default: 'public' as 'public' | 'home' | 'followers' | 'specified'
+		default: 'public' as 'public' | 'home' | 'followers' | 'specified',
 	},
 	localOnly: {
 		where: 'deviceAccount',
-		default: false
+		default: false,
 	},
 	widgets: {
 		where: 'deviceAccount',
@@ -95,14 +95,14 @@ export const defaultStore = markRaw(new Storage('base', {
 			id: string;
 			place: string | null;
 			data: Record<string, any>;
-		}[]
+		}[],
 	},
 	tl: {
 		where: 'deviceAccount',
 		default: {
 			src: 'home' as 'home' | 'local' | 'social' | 'global',
-			arg: null
-		}
+			arg: null,
+		},
 	},
 
 	overridedDeviceKind: {
@@ -111,87 +111,87 @@ export const defaultStore = markRaw(new Storage('base', {
 	},
 	serverDisconnectedBehavior: {
 		where: 'device',
-		default: 'quiet' as 'quiet' | 'reload' | 'dialog'
+		default: 'quiet' as 'quiet' | 'reload' | 'dialog',
 	},
 	nsfw: {
 		where: 'device',
-		default: 'respect' as 'respect' | 'force' | 'ignore'
+		default: 'respect' as 'respect' | 'force' | 'ignore',
 	},
 	animation: {
 		where: 'device',
-		default: true
+		default: true,
 	},
 	animatedMfm: {
 		where: 'device',
-		default: true
+		default: true,
 	},
 	loadRawImages: {
 		where: 'device',
-		default: false
+		default: false,
 	},
 	imageNewTab: {
 		where: 'device',
-		default: false
+		default: false,
 	},
 	disableShowingAnimatedImages: {
 		where: 'device',
-		default: false
+		default: false,
 	},
 	disablePagesScript: {
 		where: 'device',
-		default: false
+		default: false,
 	},
 	useOsNativeEmojis: {
 		where: 'device',
-		default: false
+		default: false,
 	},
 	disableDrawer: {
 		where: 'device',
-		default: false
+		default: false,
 	},
 	useBlurEffectForModal: {
 		where: 'device',
-		default: true
+		default: true,
 	},
 	useBlurEffect: {
 		where: 'device',
-		default: true
+		default: true,
 	},
 	showFixedPostForm: {
 		where: 'device',
-		default: false
+		default: false,
 	},
 	enableInfiniteScroll: {
 		where: 'device',
-		default: true
+		default: true,
 	},
 	useReactionPickerForContextMenu: {
 		where: 'device',
-		default: false
+		default: false,
 	},
 	showGapBetweenNotesInTimeline: {
 		where: 'device',
-		default: false
+		default: false,
 	},
 	darkMode: {
 		where: 'device',
-		default: false
+		default: false,
 	},
 	instanceTicker: {
 		where: 'device',
-		default: 'remote' as 'none' | 'remote' | 'always'
+		default: 'remote' as 'none' | 'remote' | 'always',
 	},
 	reactionPickerSize: {
 		where: 'device',
-		default: 1
+		default: 1,
 	},
 	reactionPickerWidth: {
 		where: 'device',
-		default: 1
+		default: 1,
 	},
 	reactionPickerHeight: {
 		where: 'device',
-		default: 2
+		default: 2,
 	},
 	reactionPickerUseDrawerForMobile: {
 		where: 'device',
@@ -199,35 +199,35 @@ export const defaultStore = markRaw(new Storage('base', {
 	},
 	recentlyUsedEmojis: {
 		where: 'device',
-		default: [] as string[]
+		default: [] as string[],
 	},
 	recentlyUsedUsers: {
 		where: 'device',
-		default: [] as string[]
+		default: [] as string[],
 	},
 	defaultSideView: {
 		where: 'device',
-		default: false
+		default: false,
 	},
 	menuDisplay: {
 		where: 'device',
-		default: 'sideFull' as 'sideFull' | 'sideIcon' | 'top'
+		default: 'sideFull' as 'sideFull' | 'sideIcon' | 'top',
 	},
 	reportError: {
 		where: 'device',
-		default: false
+		default: false,
 	},
 	squareAvatars: {
 		where: 'device',
-		default: false
+		default: false,
 	},
 	postFormWithHashtags: {
 		where: 'device',
-		default: false
+		default: false,
 	},
 	postFormHashtags: {
 		where: 'device',
-		default: ''
+		default: '',
 	},
 	themeInitial: {
 		where: 'device',
@@ -235,7 +235,7 @@ export const defaultStore = markRaw(new Storage('base', {
 	},
 	aiChanMode: {
 		where: 'device',
-		default: false
+		default: false,
 	},
 }));
 
@@ -326,7 +326,7 @@ export class ColdDeviceStorage {
 			set: (value: unknown) => {
 				const val = value;
 				ColdDeviceStorage.set(key, val);
-			}
+			},
 		};
 	}
 }

From 164d4a98253669594e9e04bac19aa4c4ffeac46f Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Tue, 28 Jun 2022 10:40:49 +0900
Subject: [PATCH 81/90] fix(api): add missing themeColor property of instance

---
 packages/backend/src/models/repositories/instance.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/backend/src/models/repositories/instance.ts b/packages/backend/src/models/repositories/instance.ts
index e9ee18ea35..5f0fd8d582 100644
--- a/packages/backend/src/models/repositories/instance.ts
+++ b/packages/backend/src/models/repositories/instance.ts
@@ -30,6 +30,7 @@ export const InstanceRepository = db.getRepository(Instance).extend({
 			maintainerEmail: instance.maintainerEmail,
 			iconUrl: instance.iconUrl,
 			faviconUrl: instance.faviconUrl,
+			themeColor: instance.themeColor,
 			infoUpdatedAt: instance.infoUpdatedAt ? instance.infoUpdatedAt.toISOString() : null,
 		};
 	},

From c04d3d22af2ba58cf199f24723f6109b12589e0f Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Tue, 28 Jun 2022 10:41:22 +0900
Subject: [PATCH 82/90] feat(api): add federation/stats endpoint

---
 packages/backend/src/server/api/endpoints.ts  |  2 +
 .../server/api/endpoints/federation/stats.ts  | 49 +++++++++++++++++++
 2 files changed, 51 insertions(+)
 create mode 100644 packages/backend/src/server/api/endpoints/federation/stats.ts

diff --git a/packages/backend/src/server/api/endpoints.ts b/packages/backend/src/server/api/endpoints.ts
index 93f93cef0c..1a3fc199dc 100644
--- a/packages/backend/src/server/api/endpoints.ts
+++ b/packages/backend/src/server/api/endpoints.ts
@@ -135,6 +135,7 @@ import * as ep___federation_instances from './endpoints/federation/instances.js'
 import * as ep___federation_showInstance from './endpoints/federation/show-instance.js';
 import * as ep___federation_updateRemoteUser from './endpoints/federation/update-remote-user.js';
 import * as ep___federation_users from './endpoints/federation/users.js';
+import * as ep___federation_stats from './endpoints/federation/stats.js';
 import * as ep___following_create from './endpoints/following/create.js';
 import * as ep___following_delete from './endpoints/following/delete.js';
 import * as ep___following_invalidate from './endpoints/following/invalidate.js';
@@ -447,6 +448,7 @@ const eps = [
 	['federation/show-instance', ep___federation_showInstance],
 	['federation/update-remote-user', ep___federation_updateRemoteUser],
 	['federation/users', ep___federation_users],
+	['federation/stats', ep___federation_stats],
 	['following/create', ep___following_create],
 	['following/delete', ep___following_delete],
 	['following/invalidate', ep___following_invalidate],
diff --git a/packages/backend/src/server/api/endpoints/federation/stats.ts b/packages/backend/src/server/api/endpoints/federation/stats.ts
new file mode 100644
index 0000000000..5769996706
--- /dev/null
+++ b/packages/backend/src/server/api/endpoints/federation/stats.ts
@@ -0,0 +1,49 @@
+import { MoreThan } from 'typeorm';
+import { Instances } from '@/models/index.js';
+import { awaitAll } from '@/prelude/await-all.js';
+import define from '../../define.js';
+
+export const meta = {
+	tags: ['federation'],
+
+	requireCredential: false,
+
+	allowGet: true,
+	cacheSec: 60 * 60,
+} as const;
+
+export const paramDef = {
+	type: 'object',
+	properties: {
+	},
+	required: [],
+} as const;
+
+// eslint-disable-next-line import/no-default-export
+export default define(meta, paramDef, async (ps) => {
+	const [topSubInstances, topPubInstances] = await Promise.all([
+		Instances.find({
+			where: {
+				followersCount: MoreThan(0),
+			},
+			order: {
+				followersCount: 'DESC',
+			},
+			take: 10,
+		}),
+		Instances.find({
+			where: {
+				followingCount: MoreThan(0),
+			},
+			order: {
+				followingCount: 'DESC',
+			},
+			take: 10,
+		}),
+	]);
+
+	return await awaitAll({
+		topSubInstances: Instances.packMany(topSubInstances),
+		topPubInstances: Instances.packMany(topPubInstances),
+	});
+});

From d7c6e2e61c7d7bfe985fa4bc3731c8a826ae7957 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Tue, 28 Jun 2022 10:41:38 +0900
Subject: [PATCH 83/90] fix(client): fix chart tooltip rendering

---
 .../client/src/components/chart-tooltip.vue    | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/packages/client/src/components/chart-tooltip.vue b/packages/client/src/components/chart-tooltip.vue
index 20e094a5a7..5c5e42db87 100644
--- a/packages/client/src/components/chart-tooltip.vue
+++ b/packages/client/src/components/chart-tooltip.vue
@@ -1,17 +1,19 @@
 <template>
-<MkTooltip ref="tooltip" :showing="showing" :x="x" :y="y" :max-width="340" :direction="'left'" :inner-margin="16" @closed="emit('closed')">
-	<div v-if="title" class="qpcyisrl">
-		<div class="title">{{ title }}</div>
-		<div v-for="x in series" class="series">
-			<span class="color" :style="{ background: x.backgroundColor, borderColor: x.borderColor }"></span>
-			<span>{{ x.text }}</span>
-		</div>
+<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 { } from 'vue';
 import MkTooltip from './ui/tooltip.vue';
 
 const props = defineProps<{

From fe460c022c9839861c53a0664625c67b57003cb6 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Tue, 28 Jun 2022 10:42:26 +0900
Subject: [PATCH 84/90] feat(client): add instances doughnuts charts for
 dashboard

---
 .../client/src/pages/admin/overview.pie.vue   | 102 ++++++++++++++++++
 packages/client/src/pages/admin/overview.vue  |  58 +++++++++-
 2 files changed, 155 insertions(+), 5 deletions(-)
 create mode 100644 packages/client/src/pages/admin/overview.pie.vue

diff --git a/packages/client/src/pages/admin/overview.pie.vue b/packages/client/src/pages/admin/overview.pie.vue
new file mode 100644
index 0000000000..d14b3cc6db
--- /dev/null
+++ b/packages/client/src/pages/admin/overview.pie.vue
@@ -0,0 +1,102 @@
+<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,
+	DoughnutController,
+} from 'chart.js';
+import number from '@/filters/number';
+import { defaultStore } from '@/store';
+import { useChartTooltip } from '@/scripts/use-chart-tooltip';
+
+Chart.register(
+	ArcElement,
+	LineElement,
+	BarElement,
+	PointElement,
+	BarController,
+	LineController,
+	DoughnutController,
+	CategoryScale,
+	LinearScale,
+	TimeScale,
+	Legend,
+	Title,
+	Tooltip,
+	SubTitle,
+	Filler,
+);
+
+const props = defineProps<{
+	data: { name: string; value: number; color: string; }[];
+}>();
+
+const chartEl = ref<HTMLCanvasElement>(null);
+
+// フォントカラー
+Chart.defaults.color = getComputedStyle(document.documentElement).getPropertyValue('--fg');
+
+const { handler: externalTooltipHandler } = useChartTooltip();
+
+let chartInstance: Chart;
+
+onMounted(() => {
+	chartInstance = new Chart(chartEl.value, {
+		type: 'doughnut',
+		data: {
+			labels: props.data.map(x => x.name),
+			datasets: [{
+				backgroundColor: props.data.map(x => x.color),
+				data: props.data.map(x => x.value),
+			}],
+		},
+		options: {
+			layout: {
+				padding: {
+					left: 8,
+					right: 8,
+					top: 8,
+					bottom: 8,
+				},
+			},
+			interaction: {
+				intersect: false,
+			},
+			plugins: {
+				legend: {
+					display: false,
+				},
+				tooltip: {
+					enabled: false,
+					mode: 'index',
+					animation: {
+						duration: 0,
+					},
+					external: externalTooltipHandler,
+				},
+			},
+		},
+	});
+});
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/packages/client/src/pages/admin/overview.vue b/packages/client/src/pages/admin/overview.vue
index 382169f723..61e3174c67 100644
--- a/packages/client/src/pages/admin/overview.vue
+++ b/packages/client/src/pages/admin/overview.vue
@@ -43,7 +43,12 @@
 				</div>
 			</div>
 
-			<!--<XMetrics/>-->
+			<div class="container files">
+				<div class="title">Recent files</div>
+				<div class="body">
+					<MkFileListForAdmin :pagination="filesPagination" view-mode="grid"/>
+				</div>
+			</div>
 
 			<div class="container env">
 				<div class="title">Enviroment</div>
@@ -103,10 +108,18 @@
 					</div>
 				</div>
 			</div>
-			<div class="container files">
-				<div class="title">Recent files</div>
+			<div v-if="fedStats" class="container federationPies">
 				<div class="body">
-					<MkFileListForAdmin :pagination="filesPagination" view-mode="grid"/>
+					<div class="chart deliver">
+						<div class="title">Sub</div>
+						<XPie :data="fedStats.topSubInstances.map(x => ({ name: x.host, value: x.followersCount }))"/>
+						<div class="subTitle">Top 10</div>
+					</div>
+					<div class="chart inbox">
+						<div class="title">Pub</div>
+						<XPie :data="fedStats.topPubInstances.map(x => ({ name: x.host, value: x.followingCount }))"/>
+						<div class="subTitle">Top 10</div>
+					</div>
 				</div>
 			</div>
 		</div>
@@ -140,6 +153,7 @@ import XMetrics from './metrics.vue';
 import XFederation from './overview.federation.vue';
 import XQueueChart from './overview.queue-chart.vue';
 import XUser from './overview.user.vue';
+import XPie from './overview.pie.vue';
 import MkInstanceStats from '@/components/instance-stats.vue';
 import MkNumberDiff from '@/components/number-diff.vue';
 import { version, url } from '@/config';
@@ -175,6 +189,7 @@ const rootEl = $ref<HTMLElement>();
 const chartEl = $ref<HTMLCanvasElement>(null);
 let stats: any = $ref(null);
 let serverInfo: any = $ref(null);
+let fedStats: any = $ref(null);
 let usersComparedToThePrevDay: any = $ref(null);
 let notesComparedToThePrevDay: any = $ref(null);
 let federationPubActive = $ref<number | null>(null);
@@ -257,7 +272,7 @@ async function renderChart() {
 			layout: {
 				padding: {
 					left: 0,
-					right: 8,
+					right: 0,
 					top: 0,
 					bottom: 0,
 				},
@@ -380,6 +395,10 @@ onMounted(async () => {
 		federationSubActiveDiff = chart.subActive[0] - chart.subActive[1];
 	});
 
+	os.apiGet('federation/stats').then(res => {
+		fedStats = res;
+	});
+
 	os.api('admin/server-info').then(serverInfoResponse => {
 		serverInfo = serverInfoResponse;
 	});
@@ -529,6 +548,35 @@ definePageMetadata({
 					}
 				}
 			}
+
+			&.federationPies {
+				> .body {
+					display: grid;
+					grid-gap: 16px;
+					grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+
+					> .chart {
+						position: relative;
+						padding: 20px;
+						background: var(--panel);
+						border-radius: var(--radius);
+
+						> .title {
+							position: absolute;
+							top: 20px;
+							left: 20px;
+							font-size: 90%;
+						}
+
+						> .subTitle {
+							position: absolute;
+							bottom: 20px;
+							right: 20px;
+							font-size: 85%;
+						}
+					}
+				}
+			}
 		}
 	}
 

From 0657995b42c71ecaba30be69274cefa7552bed9e Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Tue, 28 Jun 2022 10:42:54 +0900
Subject: [PATCH 85/90] chore(client): tweak style

---
 packages/client/src/pages/admin/overview.queue-chart.vue | 2 +-
 packages/client/src/pages/admin/queue.chart.chart.vue    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/client/src/pages/admin/overview.queue-chart.vue b/packages/client/src/pages/admin/overview.queue-chart.vue
index e9ad186141..a2b748ad38 100644
--- a/packages/client/src/pages/admin/overview.queue-chart.vue
+++ b/packages/client/src/pages/admin/overview.queue-chart.vue
@@ -150,7 +150,7 @@ onMounted(() => {
 			layout: {
 				padding: {
 					left: 0,
-					right: 8,
+					right: 0,
 					top: 0,
 					bottom: 0,
 				},
diff --git a/packages/client/src/pages/admin/queue.chart.chart.vue b/packages/client/src/pages/admin/queue.chart.chart.vue
index dbfaf6caa4..96156f8e67 100644
--- a/packages/client/src/pages/admin/queue.chart.chart.vue
+++ b/packages/client/src/pages/admin/queue.chart.chart.vue
@@ -125,7 +125,7 @@ onMounted(() => {
 			layout: {
 				padding: {
 					left: 0,
-					right: 8,
+					right: 0,
 					top: 0,
 					bottom: 0,
 				},

From 0f550d568dd057734fdf483245bb3390ae5637b0 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Tue, 28 Jun 2022 10:43:18 +0900
Subject: [PATCH 86/90] 12.112.0-beta.6

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 7bab3780bf..dc15198ca9 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "misskey",
-	"version": "12.112.0-beta.5",
+	"version": "12.112.0-beta.6",
 	"codename": "indigo",
 	"repository": {
 		"type": "git",

From 7d8a70f99ef9ff62e29a3de0ff51c84c18ca55b6 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Tue, 28 Jun 2022 12:16:11 +0900
Subject: [PATCH 87/90] fix(api): fix instance schema

---
 packages/backend/src/models/schema/federation-instance.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/backend/src/models/schema/federation-instance.ts b/packages/backend/src/models/schema/federation-instance.ts
index 3efff6ca9c..93327304f3 100644
--- a/packages/backend/src/models/schema/federation-instance.ts
+++ b/packages/backend/src/models/schema/federation-instance.ts
@@ -97,6 +97,10 @@ export const packedFederationInstanceSchema = {
 			optional: false, nullable: true,
 			format: 'url',
 		},
+		themeColor: {
+			type: 'string',
+			optional: false, nullable: true,
+		},
 		infoUpdatedAt: {
 			type: 'string',
 			optional: false, nullable: true,

From 553d644781cda97fcb538d18783edc415a19092d Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Tue, 28 Jun 2022 12:16:20 +0900
Subject: [PATCH 88/90] chore(client): tweak style

---
 packages/client/src/pages/admin/overview.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/client/src/pages/admin/overview.vue b/packages/client/src/pages/admin/overview.vue
index 61e3174c67..7e297890cc 100644
--- a/packages/client/src/pages/admin/overview.vue
+++ b/packages/client/src/pages/admin/overview.vue
@@ -112,12 +112,12 @@
 				<div class="body">
 					<div class="chart deliver">
 						<div class="title">Sub</div>
-						<XPie :data="fedStats.topSubInstances.map(x => ({ name: x.host, value: x.followersCount }))"/>
+						<XPie :data="fedStats.topSubInstances.map(x => ({ name: x.host, color: x.themeColor, value: x.followersCount }))"/>
 						<div class="subTitle">Top 10</div>
 					</div>
 					<div class="chart inbox">
 						<div class="title">Pub</div>
-						<XPie :data="fedStats.topPubInstances.map(x => ({ name: x.host, value: x.followingCount }))"/>
+						<XPie :data="fedStats.topPubInstances.map(x => ({ name: x.host, color: x.themeColor, value: x.followingCount }))"/>
 						<div class="subTitle">Top 10</div>
 					</div>
 				</div>

From 5c3e782d29a16b4f13d2b372224f7a650b98be81 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Tue, 28 Jun 2022 13:05:20 +0900
Subject: [PATCH 89/90] improve instance doughnut charts

---
 .../server/api/endpoints/federation/stats.ts  | 21 ++++++++++++++++---
 packages/client/src/pages/admin/overview.vue  |  4 ++--
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/packages/backend/src/server/api/endpoints/federation/stats.ts b/packages/backend/src/server/api/endpoints/federation/stats.ts
index 5769996706..d3c2659088 100644
--- a/packages/backend/src/server/api/endpoints/federation/stats.ts
+++ b/packages/backend/src/server/api/endpoints/federation/stats.ts
@@ -1,5 +1,5 @@
-import { MoreThan } from 'typeorm';
-import { Instances } from '@/models/index.js';
+import { IsNull, MoreThan, Not } from 'typeorm';
+import { Followings, Instances } from '@/models/index.js';
 import { awaitAll } from '@/prelude/await-all.js';
 import define from '../../define.js';
 
@@ -21,7 +21,7 @@ export const paramDef = {
 
 // eslint-disable-next-line import/no-default-export
 export default define(meta, paramDef, async (ps) => {
-	const [topSubInstances, topPubInstances] = await Promise.all([
+	const [topSubInstances, topPubInstances, allSubCount, allPubCount] = await Promise.all([
 		Instances.find({
 			where: {
 				followersCount: MoreThan(0),
@@ -40,10 +40,25 @@ export default define(meta, paramDef, async (ps) => {
 			},
 			take: 10,
 		}),
+		Followings.count({
+			where: {
+				followeeHost: Not(IsNull()),
+			},
+		}),
+		Followings.count({
+			where: {
+				followerHost: Not(IsNull()),
+			},
+		}),
 	]);
 
+	const gotSubCount = topSubInstances.map(x => x.followersCount).reduce((a, b) => a + b, 0);
+	const gotPubCount = topSubInstances.map(x => x.followingCount).reduce((a, b) => a + b, 0);
+
 	return await awaitAll({
 		topSubInstances: Instances.packMany(topSubInstances),
+		otherFollowersCount: Math.max(0, allSubCount - gotSubCount),
 		topPubInstances: Instances.packMany(topPubInstances),
+		otherFollowingCount: Math.max(0, allPubCount - gotPubCount),
 	});
 });
diff --git a/packages/client/src/pages/admin/overview.vue b/packages/client/src/pages/admin/overview.vue
index 7e297890cc..190f756f78 100644
--- a/packages/client/src/pages/admin/overview.vue
+++ b/packages/client/src/pages/admin/overview.vue
@@ -112,12 +112,12 @@
 				<div class="body">
 					<div class="chart deliver">
 						<div class="title">Sub</div>
-						<XPie :data="fedStats.topSubInstances.map(x => ({ name: x.host, color: x.themeColor, value: x.followersCount }))"/>
+						<XPie :data="fedStats.topSubInstances.map(x => ({ name: x.host, color: x.themeColor, value: x.followersCount })).concat([{ name: '(other)', color: '#808080', value: fedStats.otherFollowersCount }])"/>
 						<div class="subTitle">Top 10</div>
 					</div>
 					<div class="chart inbox">
 						<div class="title">Pub</div>
-						<XPie :data="fedStats.topPubInstances.map(x => ({ name: x.host, color: x.themeColor, value: x.followingCount }))"/>
+						<XPie :data="fedStats.topPubInstances.map(x => ({ name: x.host, color: x.themeColor, value: x.followingCount })).concat([{ name: '(other)', color: '#808080', value: fedStats.otherFollowingCount }])"/>
 						<div class="subTitle">Top 10</div>
 					</div>
 				</div>

From 31d73f46598a12b84693ff55c7705ba1e3e910ef Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Tue, 28 Jun 2022 13:06:31 +0900
Subject: [PATCH 90/90] chore(client): fix type def

---
 packages/client/src/components/chart-tooltip.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/client/src/components/chart-tooltip.vue b/packages/client/src/components/chart-tooltip.vue
index 5c5e42db87..9b57a1b3d5 100644
--- a/packages/client/src/components/chart-tooltip.vue
+++ b/packages/client/src/components/chart-tooltip.vue
@@ -20,8 +20,8 @@ const props = defineProps<{
 	showing: boolean;
 	x: number;
 	y: number;
-	title: string;
-	series: {
+	title?: string;
+	series?: {
 		backgroundColor: string;
 		borderColor: string;
 		text: string;